web: bump prettier from 2.8.8 to 3.0.0 in /web (#6329)

* web: bump prettier from 2.8.8 to 3.0.0 in /web

Bumps [prettier](https://github.com/prettier/prettier) from 2.8.8 to 3.0.0.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/2.8.8...3.0.0)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* update formatting and config

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>

web/.prettierrc.json

@@ -15,6 +15,7 @@
     "trailingComma": "all",
     "useTabs": false,
     "vueIndentScriptAndStyle": false,
+    "plugins": ["@trivago/prettier-plugin-sort-imports"],
     "importOrder": ["^(@?)lit(.*)$", "\\.css$", "^@goauthentik/api$", "^[./]"],
     "importOrderSeparation": true,
     "importOrderSortSpecifiers": true,

web/package-lock.json

@@ -78,7 +78,7 @@
                 "eslint-plugin-storybook": "^0.6.13",
                 "lit-analyzer": "^1.2.1",
                 "npm-run-all": "^4.1.5",
-                "prettier": "^2.8.8",
+                "prettier": "^3.0.0",
                 "pyright": "^1.1.318",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
@@ -6985,6 +6985,21 @@
                 "node": ">=10"
             }
         },
+        "node_modules/@storybook/cli/node_modules/prettier": {
+            "version": "2.8.8",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+            "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+            "dev": true,
+            "bin": {
+                "prettier": "bin-prettier.js"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
         "node_modules/@storybook/cli/node_modules/semver": {
             "version": "7.5.4",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -7116,6 +7131,21 @@
                 "url": "https://opencollective.com/storybook"
             }
         },
+        "node_modules/@storybook/codemod/node_modules/prettier": {
+            "version": "2.8.8",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+            "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+            "dev": true,
+            "bin": {
+                "prettier": "bin-prettier.js"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
         "node_modules/@storybook/components": {
             "version": "7.1.0",
             "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.1.0.tgz",
@@ -18288,15 +18318,15 @@
             }
         },
         "node_modules/prettier": {
-            "version": "2.8.8",
+            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz",
-            "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+            "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==",
             "dev": true,
             "bin": {
-                "prettier": "bin-prettier.js"
+                "prettier": "bin/prettier.cjs"
             },
             "engines": {
-                "node": ">=10.13.0"
+                "node": ">=14"
             },
             "funding": {
                 "url": "https://github.com/prettier/prettier?sponsor=1"

web/package.json

@@ -95,7 +95,7 @@
         "eslint-plugin-storybook": "^0.6.13",
         "lit-analyzer": "^1.2.1",
         "npm-run-all": "^4.1.5",
-        "prettier": "^2.8.8",
+        "prettier": "^3.0.0",
         "pyright": "^1.1.318",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

web/src/admin/admin-overview/cards/RecentEventsCard.ts

@@ -92,8 +92,10 @@ export class RecentEventsCard extends Table<Event> {
     }
 
     renderEmpty(): TemplateResult {
-        return super.renderEmpty(html`<ak-empty-state header=${msg("No Events found.")}>
+        return super.renderEmpty(
+            html`<ak-empty-state header=${msg("No Events found.")}>
                 <div slot="body">${msg("No matching events could be found.")}</div>
-        </ak-empty-state>`);
+            </ak-empty-state>`,
+        );
     }
 }

web/src/admin/flows/BoundStagesList.ts

@@ -121,10 +121,8 @@ export class BoundStagesList extends Table<FlowStageBinding> {
     }
 
     renderEmpty(): TemplateResult {
-        return super.renderEmpty(html`<ak-empty-state
+        return super.renderEmpty(
-            header=${msg("No Stages bound")}
+            html`<ak-empty-state header=${msg("No Stages bound")} icon="pf-icon-module">
-            icon="pf-icon-module"
-        >
                 <div slot="body">${msg("No stages are currently bound to this flow.")}</div>
                 <div slot="primary">
                     <ak-forms-modal>
@@ -137,7 +135,8 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                         </button>
                     </ak-forms-modal>
                 </div>
-        </ak-empty-state>`);
+            </ak-empty-state>`,
+        );
     }
 
     renderToolbar(): TemplateResult {

web/src/admin/flows/FlowViewPage.ts

@@ -40,16 +40,14 @@ export class FlowViewPage extends AKElement {
     flow!: Flow;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFDescriptionList, PFButton, PFCard, PFContent, PFGrid].concat(
+        return [PFBase, PFPage, PFDescriptionList, PFButton, PFCard, PFContent, PFGrid].concat(css`
-            css`
             img.pf-icon {
                 max-height: 24px;
             }
             ak-tabs {
                 height: 100%;
             }
-            `,
+        `);
-        );
     }
 
     render(): TemplateResult {

web/src/admin/policies/BoundPoliciesList.ts

@@ -170,10 +170,8 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
     }
 
     renderEmpty(): TemplateResult {
-        return super.renderEmpty(html`<ak-empty-state
+        return super.renderEmpty(
-            header=${msg("No Policies bound.")}
+            html`<ak-empty-state header=${msg("No Policies bound.")} icon="pf-icon-module">
-            icon="pf-icon-module"
-        >
                 <div slot="body">${msg("No policies are currently bound to this object.")}</div>
                 <div slot="primary">
                     <ak-forms-modal size=${PFSize.Medium}>
@@ -190,7 +188,8 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                         </button>
                     </ak-forms-modal>
                 </div>
-        </ak-empty-state>`);
+            </ak-empty-state>`,
+        );
     }
 
     renderToolbar(): TemplateResult {

web/src/admin/providers/ldap/LDAPProviderViewPage.ts

@@ -191,9 +191,8 @@ export class LDAPProviderViewPage extends AKElement {
                                     class="pf-c-form-control"
                                     readonly
                                     type="text"
-                                    value=${`cn=${
+                                    value=${`cn=${this.me?.user
-                                        this.me?.user.username
+                                        .username},ou=users,${this.provider?.baseDn?.toLowerCase()}`}
-                                    },ou=users,${this.provider?.baseDn?.toLowerCase()}`}
                                 />
                             </div>
                             <div class="pf-c-form__group">

web/src/admin/providers/saml/SAMLProviderViewPage.ts

@@ -120,7 +120,8 @@ export class SAMLProviderViewPage extends AKElement {
     renderRelatedObjects(): TemplateResult {
         const relatedObjects = [];
         if (this.provider?.assignedApplicationName) {
-            relatedObjects.push(html`<div class="pf-c-description-list__group">
+            relatedObjects.push(
+                html`<div class="pf-c-description-list__group">
                     <dt class="pf-c-description-list__term">
                         <span class="pf-c-description-list__text">${msg("Metadata")}</span>
                     </dt>
@@ -153,10 +154,12 @@ export class SAMLProviderViewPage extends AKElement {
                             </ak-action-button>
                         </div>
                     </dd>
-            </div>`);
+                </div>`,
+            );
         }
         if (this.signer) {
-            relatedObjects.push(html`<div class="pf-c-description-list__group">
+            relatedObjects.push(
+                html`<div class="pf-c-description-list__group">
                     <dt class="pf-c-description-list__term">
                         <span class="pf-c-description-list__text"
                             >${msg("Download signing certificate")}</span
@@ -171,7 +174,8 @@ export class SAMLProviderViewPage extends AKElement {
                             >
                         </div>
                     </dd>
-            </div>`);
+                </div>`,
+            );
         }
         return html` <div class="pf-c-card pf-l-grid__item pf-m-12-col">
             <div class="pf-c-card__title">${msg("Related objects")}</div>

web/src/elements/buttons/ActionButton/ak-action-button.stories.ts

@@ -27,7 +27,8 @@ const metadata: Meta<AKActionButton> = {
 
 export default metadata;
 
-const container = (testItem: TemplateResult) => html` <div style="background: #fff; padding: 2em">
+const container = (testItem: TemplateResult) =>
+    html` <div style="background: #fff; padding: 2em">
         <style>
             li {
                 display: block;
@@ -40,7 +41,7 @@ const container = (testItem: TemplateResult) => html` <div style="background: #f
         ${testItem}
         <p>Messages received from the button:</p>
         <ul id="action-button-message-pad" style="margin-top: 1em"></ul>
-</div>`;
+    </div>`;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const displayMessage = (result: any) => {
@@ -81,7 +82,9 @@ export const ButtonWithError = () => {
             }, 3000);
         });
 
-    return container(html` <ak-action-button class="pf-m-secondary" .apiRequest=${run}
+    return container(
+        html` <ak-action-button class="pf-m-secondary" .apiRequest=${run}
             >3 Seconds</ak-action-button
-    >`);
+        >`,
+    );
 };

web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.stories.ts

@@ -21,7 +21,8 @@ function makeid(length: number) {
 // We want the display to be rich and comprehensive.  The next two functions provide
 // a styled wrapper for the return messages, and a styled wrapper for each message.
 
-const container = (testItem: TemplateResult) => html` <div style="background: #fff; padding: 2em">
+const container = (testItem: TemplateResult) =>
+    html` <div style="background: #fff; padding: 2em">
         <style>
             li {
                 display: block;
@@ -39,7 +40,7 @@ const container = (testItem: TemplateResult) => html` <div style="background: #f
         ${testItem}
         <p>Messages received from the button:</p>
         <ul id="action-button-message-pad" style="margin-top: 1em"></ul>
-</div>`;
+    </div>`;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const displayMessage = (result: any) => {

web/src/elements/charts/Chart.ts

@@ -33,7 +33,12 @@ export const FONT_COLOUR_DARK_MODE = "#fafafa";
 export const FONT_COLOUR_LIGHT_MODE = "#151515";
 
 export class RGBAColor {
-    constructor(public r: number, public g: number, public b: number, public a: number = 1) {}
+    constructor(
+        public r: number,
+        public g: number,
+        public b: number,
+        public a: number = 1,
+    ) {}
     toString(): string {
         return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`;
     }

web/src/elements/events/ObjectChangelog.ts

@@ -97,8 +97,10 @@ export class ObjectChangelog extends Table<Event> {
     }
 
     renderEmpty(): TemplateResult {
-        return super.renderEmpty(html`<ak-empty-state header=${msg("No Events found.")}>
+        return super.renderEmpty(
+            html`<ak-empty-state header=${msg("No Events found.")}>
                 <div slot="body">${msg("No matching events could be found.")}</div>
-        </ak-empty-state>`);
+            </ak-empty-state>`,
+        );
     }
 }

web/src/elements/events/UserEvents.ts

@@ -71,8 +71,10 @@ export class UserEvents extends Table<Event> {
     }
 
     renderEmpty(): TemplateResult {
-        return super.renderEmpty(html`<ak-empty-state header=${msg("No Events found.")}>
+        return super.renderEmpty(
+            html`<ak-empty-state header=${msg("No Events found.")}>
                 <div slot="body">${msg("No matching events could be found.")}</div>
-        </ak-empty-state>`);
+            </ak-empty-state>`,
+        );
     }
 }

web/src/elements/forms/Form.ts

@@ -22,7 +22,10 @@ import { ResponseError, ValidationError, ValidationErrorFromJSON } from "@goauth
 
 export class PreventFormSubmit {
     // Stub class which can be returned by form elements to prevent the form from submitting
-    constructor(public message: string, public element?: HorizontalFormElement) {}
+    constructor(
+        public message: string,
+        public element?: HorizontalFormElement,
+    ) {}
 }
 
 export class APIError extends Error {

web/src/elements/notifications/NotificationDrawer.ts

@@ -28,8 +28,7 @@ export class NotificationDrawer extends AKElement {
     unread = 0;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown].concat(
+        return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown].concat(css`
-            css`
             .pf-c-drawer__body {
                 height: 100%;
             }
@@ -51,8 +50,7 @@ export class NotificationDrawer extends AKElement {
             .pf-c-notification-drawer__footer {
                 margin: 1rem;
             }
-            `,
+        `);
-        );
     }
 
     firstUpdated(): void {

web/src/flow/stages/identification/IdentificationStage.ts

@@ -44,8 +44,7 @@ export class IdentificationStage extends BaseStage<
     form?: HTMLFormElement;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(
+        return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css`
-            css`
             /* login page's icons */
             .pf-c-login__main-footer-links-item button {
                 background-color: transparent;
@@ -60,8 +59,7 @@ export class IdentificationStage extends BaseStage<
                 height: 100%;
                 max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
             }
-            `,
+        `);
-        );
     }
 
     firstUpdated(): void {

web/src/flow/stages/prompt/PromptStage.ts

@@ -200,7 +200,8 @@ ${prompt.initialValue}</textarea
                     ? LOCALES
                     : LOCALES.filter((locale) => locale.code !== "debug");
                 const options = locales.map(
-                    (locale) => html`<option
+                    (locale) =>
+                        html`<option
                             value=${locale.code}
                             ?selected=${locale.code === prompt.initialValue}
                         >