diff --git a/web/.prettierrc.json b/web/.prettierrc.json index cc4ea8ee1..0a4c18708 100644 --- a/web/.prettierrc.json +++ b/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, diff --git a/web/package-lock.json b/web/package-lock.json index 2384ecf63..d44b469f1 100644 --- a/web/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "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" diff --git a/web/package.json b/web/package.json index 113b226ae..5e81d33cf 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/admin/admin-overview/cards/RecentEventsCard.ts b/web/src/admin/admin-overview/cards/RecentEventsCard.ts index 2ecab89d2..e0b75d970 100644 --- a/web/src/admin/admin-overview/cards/RecentEventsCard.ts +++ b/web/src/admin/admin-overview/cards/RecentEventsCard.ts @@ -92,8 +92,10 @@ export class RecentEventsCard extends Table { } renderEmpty(): TemplateResult { - return super.renderEmpty(html` -
${msg("No matching events could be found.")}
- `); + return super.renderEmpty( + html` +
${msg("No matching events could be found.")}
+ `, + ); } } diff --git a/web/src/admin/flows/BoundStagesList.ts b/web/src/admin/flows/BoundStagesList.ts index 732f676cf..f682dfc05 100644 --- a/web/src/admin/flows/BoundStagesList.ts +++ b/web/src/admin/flows/BoundStagesList.ts @@ -121,23 +121,22 @@ export class BoundStagesList extends Table { } renderEmpty(): TemplateResult { - return super.renderEmpty(html` -
${msg("No stages are currently bound to this flow.")}
-
- - ${msg("Create")} - ${msg("Create Stage binding")} - - - - -
- `); + return super.renderEmpty( + html` +
${msg("No stages are currently bound to this flow.")}
+
+ + ${msg("Create")} + ${msg("Create Stage binding")} + + + + +
+ `, + ); } renderToolbar(): TemplateResult { diff --git a/web/src/admin/flows/FlowViewPage.ts b/web/src/admin/flows/FlowViewPage.ts index 35acb31ad..a6448678b 100644 --- a/web/src/admin/flows/FlowViewPage.ts +++ b/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( - css` - img.pf-icon { - max-height: 24px; - } - ak-tabs { - height: 100%; - } - `, - ); + return [PFBase, PFPage, PFDescriptionList, PFButton, PFCard, PFContent, PFGrid].concat(css` + img.pf-icon { + max-height: 24px; + } + ak-tabs { + height: 100%; + } + `); } render(): TemplateResult { diff --git a/web/src/admin/policies/BoundPoliciesList.ts b/web/src/admin/policies/BoundPoliciesList.ts index d4f67aae9..acf8b2ce7 100644 --- a/web/src/admin/policies/BoundPoliciesList.ts +++ b/web/src/admin/policies/BoundPoliciesList.ts @@ -170,27 +170,26 @@ export class BoundPoliciesList extends Table { } renderEmpty(): TemplateResult { - return super.renderEmpty(html` -
${msg("No policies are currently bound to this object.")}
-
- - ${msg("Create")} - ${msg("Create Binding")} - - - - -
- `); + return super.renderEmpty( + html` +
${msg("No policies are currently bound to this object.")}
+
+ + ${msg("Create")} + ${msg("Create Binding")} + + + + +
+ `, + ); } renderToolbar(): TemplateResult { diff --git a/web/src/admin/providers/ldap/LDAPProviderViewPage.ts b/web/src/admin/providers/ldap/LDAPProviderViewPage.ts index 88813a1fc..6693ee8d6 100644 --- a/web/src/admin/providers/ldap/LDAPProviderViewPage.ts +++ b/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=${ - this.me?.user.username - },ou=users,${this.provider?.baseDn?.toLowerCase()}`} + value=${`cn=${this.me?.user + .username},ou=users,${this.provider?.baseDn?.toLowerCase()}`} />
diff --git a/web/src/admin/providers/saml/SAMLProviderViewPage.ts b/web/src/admin/providers/saml/SAMLProviderViewPage.ts index e060366a3..82fccf1a9 100644 --- a/web/src/admin/providers/saml/SAMLProviderViewPage.ts +++ b/web/src/admin/providers/saml/SAMLProviderViewPage.ts @@ -120,58 +120,62 @@ export class SAMLProviderViewPage extends AKElement { renderRelatedObjects(): TemplateResult { const relatedObjects = []; if (this.provider?.assignedApplicationName) { - relatedObjects.push(html`
-
- ${msg("Metadata")} -
-
-
- - ${msg("Download")} - - { - if (!navigator.clipboard) { - return Promise.resolve( - showMessage({ - level: MessageLevel.info, - message: this.provider?.urlDownloadMetadata || "", - }), + relatedObjects.push( + html`
+
+ ${msg("Metadata")} +
+
+
+ + ${msg("Download")} + + { + if (!navigator.clipboard) { + return Promise.resolve( + showMessage({ + level: MessageLevel.info, + message: this.provider?.urlDownloadMetadata || "", + }), + ); + } + return navigator.clipboard.writeText( + this.provider?.urlDownloadMetadata || "", ); - } - return navigator.clipboard.writeText( - this.provider?.urlDownloadMetadata || "", - ); - }} - > - ${msg("Copy download URL")} - -
-
-
`); + }} + > + ${msg("Copy download URL")} + +
+ + `, + ); } if (this.signer) { - relatedObjects.push(html`
-
- ${msg("Download signing certificate")} -
-
-
- ${msg("Download")} +
+ ${msg("Download signing certificate")} -
- - `); + +
+
+ ${msg("Download")} +
+
+ `, + ); } return html`
${msg("Related objects")}
diff --git a/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts b/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts index e1c959670..45430cce4 100644 --- a/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts +++ b/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts @@ -27,20 +27,21 @@ const metadata: Meta = { export default metadata; -const container = (testItem: TemplateResult) => html`
- - - ${testItem} -

Messages received from the button:

-
    -
    `; +const container = (testItem: TemplateResult) => + html`
    + + + ${testItem} +

    Messages received from the button:

    +
      +
      `; // eslint-disable-next-line @typescript-eslint/no-explicit-any const displayMessage = (result: any) => { @@ -81,7 +82,9 @@ export const ButtonWithError = () => { }, 3000); }); - return container(html` 3 Seconds`); + return container( + html` 3 Seconds`, + ); }; diff --git a/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.stories.ts b/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.stories.ts index f97f60184..5aa8be34d 100644 --- a/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.stories.ts +++ b/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.stories.ts @@ -21,25 +21,26 @@ 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`
      - - - ${testItem} -

      Messages received from the button:

      -
        -
        `; +const container = (testItem: TemplateResult) => + html`
        + + + ${testItem} +

        Messages received from the button:

        +
          +
          `; // eslint-disable-next-line @typescript-eslint/no-explicit-any const displayMessage = (result: any) => { diff --git a/web/src/elements/charts/Chart.ts b/web/src/elements/charts/Chart.ts index 7fbb4fa30..eb92dbfc3 100644 --- a/web/src/elements/charts/Chart.ts +++ b/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})`; } diff --git a/web/src/elements/events/ObjectChangelog.ts b/web/src/elements/events/ObjectChangelog.ts index ab1c0c95e..d9e53000f 100644 --- a/web/src/elements/events/ObjectChangelog.ts +++ b/web/src/elements/events/ObjectChangelog.ts @@ -97,8 +97,10 @@ export class ObjectChangelog extends Table { } renderEmpty(): TemplateResult { - return super.renderEmpty(html` -
          ${msg("No matching events could be found.")}
          -           `); + return super.renderEmpty( + html` +
          ${msg("No matching events could be found.")}
          +           `, + ); } } diff --git a/web/src/elements/events/UserEvents.ts b/web/src/elements/events/UserEvents.ts index 20b3765e9..e8107b0f4 100644 --- a/web/src/elements/events/UserEvents.ts +++ b/web/src/elements/events/UserEvents.ts @@ -71,8 +71,10 @@ export class UserEvents extends Table { } renderEmpty(): TemplateResult { - return super.renderEmpty(html` -
          ${msg("No matching events could be found.")}
          -           `); + return super.renderEmpty( + html` +
          ${msg("No matching events could be found.")}
          +           `, + ); } } diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts index 338147c90..734e6eb51 100644 --- a/web/src/elements/forms/Form.ts +++ b/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 { diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts index 08767487b..6c611be21 100644 --- a/web/src/elements/notifications/NotificationDrawer.ts +++ b/web/src/elements/notifications/NotificationDrawer.ts @@ -28,31 +28,29 @@ export class NotificationDrawer extends AKElement { unread = 0; static get styles(): CSSResult[] { - return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown].concat( - css` - .pf-c-drawer__body { - height: 100%; - } - .pf-c-notification-drawer__body { - flex-grow: 1; - } - .pf-c-notification-drawer__header { - height: 114px; - align-items: center; - } - .pf-c-notification-drawer__header-action, - .pf-c-notification-drawer__header-action-close, - .pf-c-notification-drawer__header-action-close > .pf-c-button.pf-m-plain { - height: 100%; - } - .pf-c-notification-drawer__list-item-description { - white-space: pre-wrap; - } - .pf-c-notification-drawer__footer { - margin: 1rem; - } - `, - ); + return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown].concat(css` + .pf-c-drawer__body { + height: 100%; + } + .pf-c-notification-drawer__body { + flex-grow: 1; + } + .pf-c-notification-drawer__header { + height: 114px; + align-items: center; + } + .pf-c-notification-drawer__header-action, + .pf-c-notification-drawer__header-action-close, + .pf-c-notification-drawer__header-action-close > .pf-c-button.pf-m-plain { + height: 100%; + } + .pf-c-notification-drawer__list-item-description { + white-space: pre-wrap; + } + .pf-c-notification-drawer__footer { + margin: 1rem; + } + `); } firstUpdated(): void { diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts index c2f9e7fac..6e302f9a7 100644 --- a/web/src/flow/stages/identification/IdentificationStage.ts +++ b/web/src/flow/stages/identification/IdentificationStage.ts @@ -44,24 +44,22 @@ export class IdentificationStage extends BaseStage< form?: HTMLFormElement; static get styles(): CSSResult[] { - return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat( - css` - /* login page's icons */ - .pf-c-login__main-footer-links-item button { - background-color: transparent; - border: 0; - display: flex; - align-items: stretch; - } - .pf-c-login__main-footer-links-item img { - fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill); - width: 100px; - max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width); - height: 100%; - max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height); - } - `, - ); + return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css` + /* login page's icons */ + .pf-c-login__main-footer-links-item button { + background-color: transparent; + border: 0; + display: flex; + align-items: stretch; + } + .pf-c-login__main-footer-links-item img { + fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill); + width: 100px; + max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width); + height: 100%; + max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height); + } + `); } firstUpdated(): void { diff --git a/web/src/flow/stages/prompt/PromptStage.ts b/web/src/flow/stages/prompt/PromptStage.ts index 1015737ed..877d02119 100644 --- a/web/src/flow/stages/prompt/PromptStage.ts +++ b/web/src/flow/stages/prompt/PromptStage.ts @@ -200,12 +200,13 @@ ${prompt.initialValue} locale.code !== "debug"); const options = locales.map( - (locale) => html` `, + (locale) => + html` `, ); return html`