Web: Controllers cleanup

packages/prettier-config/lib/constants.js

@@ -31,8 +31,33 @@ export const AuthentikPrettierConfig = {
     trailingComma: "all",
     useTabs: false,
     vueIndentScriptAndStyle: false,
-    plugins: ["prettier-plugin-packagejson", "@trivago/prettier-plugin-sort-imports"],
-    importOrder: ["^(@?)lit(.*)$", "\\.css$", "^@goauthentik/api$", "^[./]"],
+    plugins: [
+        // ---
+        "prettier-plugin-packagejson",
+        "@trivago/prettier-plugin-sort-imports",
+    ],
+    importOrder: [
+        // ---
+
+        "^(@goauthentik/|#)common.+",
+        "^(@goauthentik/|#)elements.+",
+        "^(@goauthentik/|#)components.+",
+        "^(@goauthentik/|#)user.+",
+        "^(@goauthentik/|#)admin.+",
+        "^(@goauthentik/|#)flow.+",
+        "^(@goauthentik/|#)flow.+",
+
+        "^#.+",
+        "^@goauthentik.+",
+
+        "<THIRD_PARTY_MODULES>",
+
+        "^(@?)lit(.*)$",
+        "\\.css$",
+        "^@goauthentik/api$",
+        "^[./]",
+    ],
+    importOrderSideEffects: false,
     importOrderSeparation: true,
     importOrderSortSpecifiers: true,
     importOrderParserPlugins: ["typescript", "jsx", "classProperties", "decorators-legacy"],

packages/prettier-config/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goauthentik/prettier-config",
-    "version": "1.0.5",
+    "version": "2.0.0",
     "description": "authentik's Prettier config",
     "license": "MIT",
     "scripts": {

web/bundler/mdx-plugin/node.js

@@ -4,30 +4,27 @@
  * @import {
  *   OnLoadArgs,
  *   OnLoadResult,
+ *   OnResolveArgs,
+ *   OnResolveResult,
  *   Plugin,
  *   PluginBuild
  * } from "esbuild"
  */
+import { MonoRepoRoot } from "@goauthentik/core/paths/node";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
 
 /**
- * @typedef {Omit<OnLoadArgs, 'pluginData'> & LoadDataFields} LoadData
- *   Data passed to `onload`.
+ * @typedef {Omit<OnLoadArgs, 'pluginData'> & LoadDataFields} LoadData Data passed to `onload`.
  *
- * @typedef LoadDataFields
- *   Extra fields given in `data` to `onload`.
- * @property {PluginData | null | undefined} [pluginData]
- *   Plugin data.
+ * @typedef LoadDataFields Extra fields given in `data` to `onload`.
+ * @property {PluginData | null | undefined} [pluginData] Plugin data.
  *
- *
- * @typedef PluginData
- *   Extra data passed.
- * @property {Buffer | string | null | undefined} [contents]
- *   File contents.
+ * @typedef PluginData Extra data passed.
+ * @property {Buffer | string | null | undefined} [contents] File contents.
  */
 
-const name = "mdx-plugin";
+const pluginName = "mdx-plugin";
 
 /**
  * @typedef MDXPluginOptions
@@ -38,28 +35,35 @@ const name = "mdx-plugin";
 /**
  * Bundle MDX into JSON modules.
  *
- * @param {MDXPluginOptions} options Options.
- * @returns {Plugin} Plugin.
+ * @param {MDXPluginOptions} options
+ * @returns {Plugin}
  */
 export function mdxPlugin({ root }) {
-    return { name, setup };
+    // TODO: Replace with `resolvePackage` after NPM Workspaces support is added.
+    const docsPackageRoot = path.resolve(MonoRepoRoot, "website");
 
     /**
      * @param {PluginBuild} build
-     *   Build.
-     * @returns {undefined}
-     *   Nothing.
      */
     function setup(build) {
-        build.onLoad({ filter: /\.mdx?$/ }, onload);
+        /**
+         * @param {OnResolveArgs} args
+         * @returns {Promise<OnResolveResult>}
+         */
+        async function resolveListener(args) {
+            if (!args.path.startsWith("~")) return args;
+
+            return {
+                path: path.resolve(docsPackageRoot, args.path.slice(1)),
+                pluginName,
+            };
+        }
 
         /**
          * @param {LoadData} data
-         *   Data.
          * @returns {Promise<OnLoadResult>}
-         *   Result.
          */
-        async function onload(data) {
+        async function loadListener(data) {
             const content = String(
                 data.pluginData &&
                     data.pluginData.contents !== null &&
@@ -77,7 +81,16 @@ export function mdxPlugin({ root }) {
             return {
                 contents: JSON.stringify({ content, publicPath, publicDirectory }),
                 loader: "file",
+                pluginName,
             };
         }
+
+        build.onResolve({ filter: /\.mdx?$/ }, resolveListener);
+        build.onLoad({ filter: /\.mdx?$/ }, loadListener);
     }
+
+    return {
+        name: pluginName,
+        setup,
+    };
 }

web/package.json

@@ -67,6 +67,7 @@
         "#admin/*": "./src/admin/*.js",
         "#flow/*.css": "./src/flow/*.css",
         "#flow/*": "./src/flow/*.js",
+        "#locales/*": "./src/locales/*.js",
         "#stories/*": "./src/stories/*.js",
         "#*/browser": {
             "types": "./out/*/browser.d.ts",

web/paths/index.js

@@ -0,0 +1,19 @@
+/**
+ * @file Paths used by the web package.
+ *
+ * @runtime common
+ */
+
+/**
+ * The name of the distribution directory.
+ *
+ * @runtime common
+ */
+export const DistDirectoryName = "dist";
+
+/**
+ * The name of the static file directory.
+ *
+ * @runtime common
+ */
+export const StaticDirectoryName = "static";

web/paths/node.js

@@ -1,3 +1,9 @@
+/**
+ * @file Paths used by the web package.
+ *
+ * @runtime node
+ */
+import { DistDirectoryName } from "#paths";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -11,18 +17,17 @@ const relativeDirname = dirname(fileURLToPath(import.meta.url));
 
 /**
  * The root of the web package.
+ *
+ * @runtime node
  */
 export const PackageRoot = /** @type {WebPackageIdentifier} */ (resolve(relativeDirname, ".."));
 
-/**
- * The name of the distribution directory.
- */
-export const DistDirectoryName = "dist";
-
 /**
  * Path to the web package's distribution directory.
  *
  * This is where the built files are located after running the build process.
+ *
+ * @runtime node
  */
 export const DistDirectory = /** @type {`${WebPackageIdentifier}/${DistDirectoryName}`} */ (
     resolve(PackageRoot, DistDirectoryName)
@@ -43,6 +48,8 @@ export const DistDirectory = /** @type {`${WebPackageIdentifier}/${DistDirectory
  * Entry points available for building.
  *
  * @satisfies {Record<string, EntryPointTarget>}
+ *
+ * @runtime node
  */
 export const EntryPoint = /** @type {const} */ ({
     Admin: {

web/scripts/build-web.mjs

@@ -6,7 +6,8 @@
  */
 import { mdxPlugin } from "#bundler/mdx-plugin/node";
 import { createBundleDefinitions } from "#bundler/utils/node";
-import { DistDirectory, DistDirectoryName, EntryPoint, PackageRoot } from "#paths/node";
+import { DistDirectoryName } from "#paths";
+import { DistDirectory, EntryPoint, PackageRoot } from "#paths/node";
 import { NodeEnvironment } from "@goauthentik/core/environment/node";
 import { MonoRepoRoot, resolvePackage } from "@goauthentik/core/paths/node";
 import { readBuildIdentifier } from "@goauthentik/core/version/node";
@@ -26,7 +27,7 @@ const patternflyPath = resolvePackage("@patternfly/patternfly", import.meta);
  */
 const BASE_ESBUILD_OPTIONS = {
     entryNames: `[dir]/[name]-${readBuildIdentifier()}`,
-    chunkNames: "[dir]/chunks/[name]-[hash]",
+    chunkNames: "[dir]/chunks/[hash]",
     assetNames: "assets/[dir]/[name]-[hash]",
     publicPath: path.join("/static", DistDirectoryName),
     outdir: DistDirectory,

web/src/admin/AdminInterface/AboutModal.ts

@@ -1,9 +1,8 @@
+import { WithBrandConfig } from "#elements/mixins/branding";
+import { WithLicenseSummary } from "#elements/mixins/license";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { globalAK } from "@goauthentik/common/global";
-import { DefaultBrand } from "@goauthentik/common/ui/config";
 import "@goauthentik/elements/EmptyState";
-import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
-import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider";
 import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
 
 import { msg } from "@lit/localize";
@@ -57,7 +56,8 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton))
     }
 
     renderModal() {
-        let product = globalAK().brand.brandingTitle || DefaultBrand.brandingTitle;
+        let product = this.brandingTitle;
+
         if (this.licenseSummary.status !== LicenseSummaryStatusEnum.Unlicensed) {
             product += ` ${msg("Enterprise")}`;
         }
@@ -73,7 +73,7 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton))
                     <div class="pf-c-about-modal-box__brand">
                         <img
                             class="pf-c-about-modal-box__brand-image"
-                            src=${this.brand?.brandingFavicon ?? DefaultBrand.brandingFavicon}
+                            src=${this.brandingFavicon}
                             alt="${msg("authentik Logo")}"
                         />
                     </div>

web/src/admin/AdminInterface/index.entrypoint.ts

@@ -1,26 +1,26 @@
+import "#admin/AdminInterface/AboutModal";
+import type { AboutModal } from "#admin/AdminInterface/AboutModal";
+import { ROUTES } from "#admin/Routes";
 import { EVENT_API_DRAWER_TOGGLE, EVENT_NOTIFICATION_DRAWER_TOGGLE } from "#common/constants";
 import { configureSentry } from "#common/sentry/index";
 import { me } from "#common/users";
 import { WebsocketClient } from "#common/ws";
-import { AuthenticatedInterface } from "#elements/Interface/Interface";
-import { WithLicenseSummary } from "#elements/Interface/licenseSummaryProvider";
+import { SidebarToggleEventDetail } from "#components/ak-page-header";
+import { AuthenticatedInterface } from "#elements/AuthenticatedInterface";
 import "#elements/ak-locale-context/ak-locale-context";
 import "#elements/banner/EnterpriseStatusBanner";
 import "#elements/banner/EnterpriseStatusBanner";
 import "#elements/banner/VersionBanner";
 import "#elements/banner/VersionBanner";
 import "#elements/messages/MessageContainer";
 import "#elements/messages/MessageContainer";
+import { WithCapabilitiesConfig } from "#elements/mixins/capabilities";
 import "#elements/notifications/APIDrawer";
 import "#elements/notifications/NotificationDrawer";
 import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
 import "#elements/router/RouterOutlet";
 import "#elements/sidebar/Sidebar";
 import "#elements/sidebar/SidebarItem";
-import "@goauthentik/admin/AdminInterface/AboutModal";
-import type { AboutModal } from "@goauthentik/admin/AdminInterface/AboutModal";
-import { ROUTES } from "@goauthentik/admin/Routes";
-import { SidebarToggleEventDetail } from "@goauthentik/components/ak-page-header.js";
 
 import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement, eventOptions, property, query } from "lit/decorators.js";
@@ -45,7 +45,7 @@ if (process.env.NODE_ENV === "development") {
 }
 
 @customElement("ak-interface-admin")
-export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
+export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterface) {
     //#region Properties
 
     @property({ type: Boolean })
@@ -202,7 +202,7 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
 
                 <ak-sidebar class="${classMap(sidebarClasses)}">
                     ${renderSidebarItems(AdminSidebarEntries)}
-                    ${this.config?.capabilities.includes(CapabilitiesEnum.IsEnterprise)
+                    ${this.can(CapabilitiesEnum.IsEnterprise)
                         ? renderSidebarItems(AdminSidebarEnterpriseEntries)
                         : nothing}
                 </ak-sidebar>

web/src/admin/admin-overview/AdminOverviewPage.ts

@@ -11,10 +11,10 @@ import "#admin/admin-overview/charts/SyncStatusChart";
 import { me } from "#common/users";
 import "#components/ak-page-header";
 import { AKElement } from "#elements/Base";
-import { WithLicenseSummary } from "#elements/Interface/licenseSummaryProvider";
 import "#elements/cards/AggregatePromiseCard";
 import type { QuickAction } from "#elements/cards/QuickActionsCard";
 import "#elements/cards/QuickActionsCard";
+import { WithLicenseSummary } from "#elements/mixins/license";
 import { paramURL } from "#elements/router/RouterOutlet";
 import { createReleaseNotesURL } from "@goauthentik/core/version";
 

web/src/admin/applications/ApplicationForm.ts

@@ -1,3 +1,4 @@
+import { CapabilitiesEnum, WithCapabilitiesConfig } from "#elements/mixins/capabilities";
 import "@goauthentik/admin/applications/ProviderSelectModal";
 import { iconHelperText } from "@goauthentik/admin/helperText";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
@@ -6,18 +7,14 @@ import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
 import "@goauthentik/components/ak-textarea-input";
-import "@goauthentik/elements/Alert.js";
-import {
-    CapabilitiesEnum,
-    WithCapabilitiesConfig,
-} from "@goauthentik/elements/Interface/capabilitiesProvider";
+import "@goauthentik/elements/Alert";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/ModalForm";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/ProxyForm";
 import "@goauthentik/elements/forms/Radio";
-import "@goauthentik/elements/forms/SearchSelect";
+import "@goauthentik/elements/forms/SearchSelect/ak-search-select";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { msg } from "@lit/localize";