web: migrate remaining view pages to modalInvoker

web/src/admin/applications/ApplicationCheckAccessForm.ts

@@ -4,8 +4,12 @@ import "#elements/forms/HorizontalFormElement";
 import "#elements/forms/SearchSelect/index";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { PFSize } from "#common/enums";
+import { APIMessage, MessageLevel } from "#common/messages";
 
 import { Form } from "#elements/forms/Form";
+import { SlottedTemplateResult } from "#elements/types";
+import { ifPresent } from "#elements/utils/attributes";
 
 import {
     Application,
@@ -16,49 +20,67 @@ import {
 } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { CSSResult, html, nothing, TemplateResult } from "lit";
+import { CSSResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
 @customElement("ak-application-check-access-form")
 export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
+    public static override verboseName = msg("Access");
+    public static override submitVerb = msg("Check");
+    public static override createLabel = msg("Check");
+    public static override submittingVerb = msg("Checking");
+
+    static styles: CSSResult[] = [...super.styles, PFDescriptionList];
+
+    #api = new CoreApi(DEFAULT_CONFIG);
+
+    public override size = PFSize.XLarge;
+
     @property({ attribute: false })
     public application!: Application;
 
     @property({ attribute: false })
     public result: PolicyTestResult | null = null;
 
     @property({ attribute: false })
-    public request?: number;
+    public request: number | null = null;
 
-    getSuccessMessage(): string {
-        return msg("Successfully sent test-request.");
+    public override formatAPISuccessMessage(): APIMessage {
+        return {
+            level: MessageLevel.success,
+            message: msg("Successfully sent test-request."),
+        };
     }
 
-    async send(data: { forUser: number }): Promise<PolicyTestResult> {
+    protected override send(data: { forUser: number }): Promise<PolicyTestResult> {
         this.request = data.forUser;
-        const result = await new CoreApi(DEFAULT_CONFIG).coreApplicationsCheckAccessRetrieve({
-            slug: this.application?.slug,
-            forUser: data.forUser,
-        });
-        return (this.result = result);
+
+        return this.#api
+            .coreApplicationsCheckAccessRetrieve({
+                slug: this.application?.slug,
+                forUser: data.forUser,
+            })
+            .then((result) => {
+                this.result = result;
+                return result;
+            });
     }
 
     public override reset(): void {
         super.reset();
         this.result = null;
     }
 
-    static styles: CSSResult[] = [...super.styles, PFDescriptionList];
+    protected renderResult(): SlottedTemplateResult {
+        const { passing, messages = [], logMessages = [] } = this.result || {};
 
-    renderResult(): TemplateResult {
-        return html`
-            <ak-form-element-horizontal label=${msg("Passing")}>
+        return html`<ak-form-element-horizontal label=${msg("Passing")}>
                 <div class="pf-c-form__group-label">
                     <div class="c-form__horizontal-group">
                         <span class="pf-c-form__label-text">
-                            <ak-status-label ?good=${this.result?.passing}></ak-status-label>
+                            <ak-status-label ?good=${ifPresent(passing)}></ak-status-label>
                         </span>
                     </div>
                 </div>
@@ -67,54 +89,56 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
                 <div class="pf-c-form__group-label">
                     <div class="c-form__horizontal-group">
                         <ul>
-                            ${(this.result?.messages || []).length > 0
-                                ? this.result?.messages?.map((m) => {
-                                      return html`<li>
-                                          <span class="pf-c-form__label-text">${m}</span>
-                                      </li>`;
-                                  })
-                                : html`<li>
-                                      <span class="pf-c-form__label-text">-</span>
-                                  </li>`}
+                            ${messages.map((m) => {
+                                return html`<li>
+                                    <span class="pf-c-form__label-text">${m}</span>
+                                </li>`;
+                            })}
                         </ul>
                     </div>
                 </div>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Log messages")}>
-                <ak-log-viewer .items=${this.result?.logMessages}></ak-log-viewer>
-            </ak-form-element-horizontal>
-        `;
+                <ak-log-viewer .items=${logMessages}></ak-log-viewer>
+            </ak-form-element-horizontal>`;
     }
 
-    protected override renderForm(): TemplateResult {
+    protected override renderForm(): SlottedTemplateResult {
         return html`<ak-form-element-horizontal label=${msg("User")} required name="forUser">
                 <ak-search-select
+                    placeholder=${msg("Select a user...")}
                     .fetchObjects=${async (query?: string): Promise<User[]> => {
                         const args: CoreUsersListRequest = {
                             ordering: "username",
                         };
-                        if (query !== undefined) {
+
+                        if (query) {
                             args.search = query;
                         }
-                        const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args);
+
+                        const users = await this.#api.coreUsersList(args);
+
                         return users.results;
                     }}
                     .renderElement=${(user: User): string => {
                         return user.username;
                     }}
-                    .renderDescription=${(user: User): TemplateResult => {
+                    .renderDescription=${(user: User): SlottedTemplateResult => {
                         return html`${user.name}`;
                     }}
                     .value=${(user: User | undefined): number | undefined => {
                         return user?.pk;
                     }}
                     .selected=${(user: User): boolean => {
-                        return user.pk.toString() === this.request?.toString();
+                        return (
+                            typeof this.request === "number" &&
+                            user.pk.toString() === this.request.toString()
+                        );
                     }}
                 >
                 </ak-search-select>
             </ak-form-element-horizontal>
-            ${this.result ? this.renderResult() : nothing}`;
+            ${this.renderResult()}`;
     }
 }
 

web/src/admin/applications/ApplicationListPage.ts

@@ -201,7 +201,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
                             "Opens the new application wizard, which will guide you through creating a new application with an existing provider.",
                         )}
                     >
-                        ${msg("With New Provider...")}
+                        ${msg("with New Provider...")}
                     </button>
                 </li>
                 <li role="presentation">
@@ -214,7 +214,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
                             "Opens the new application form, which will guide you through creating a new application with an existing provider.",
                         )}
                     >
-                        ${msg("With Existing Provider...")}
+                        ${msg("with Existing Provider...")}
                     </button>
                 </li>
             </menu>

web/src/admin/applications/ApplicationViewPage.ts

@@ -16,11 +16,15 @@ import { DEFAULT_CONFIG } from "#common/api/config";
 import { APIError, parseAPIResponseError, pluckErrorDetail } from "#common/errors/network";
 
 import { AKElement } from "#elements/Base";
+import { modalInvoker } from "#elements/dialogs";
 import { WithLicenseSummary } from "#elements/mixins/license";
 
 import { setPageDetails } from "#components/ak-page-navbar";
 import renderDescriptionList from "#components/DescriptionList";
 
+import { ApplicationCheckAccessForm } from "#admin/applications/ApplicationCheckAccessForm";
+import { ApplicationForm } from "#admin/applications/ApplicationForm";
+
 import {
     Application,
     ContentTypeEnum,
@@ -181,36 +185,28 @@ export class ApplicationViewPage extends WithLicenseSummary(AKElement) {
                         ],
                         [
                             msg("Related actions"),
-                            html`<ak-forms-modal>
-                                    <span slot="submit">${msg("Save Changes")}</span>
-                                    <span slot="header"> ${msg("Update Application")} </span>
-                                    <ak-application-form
-                                        slot="form"
-                                        .instancePk=${this.application.slug}
-                                    >
-                                    </ak-application-form>
-                                    <button
-                                        slot="trigger"
-                                        class="pf-c-button pf-m-secondary pf-m-block"
-                                    >
-                                        ${msg("Edit")}
-                                    </button>
-                                </ak-forms-modal>
-                                <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
-                                    <span slot="submit">${msg("Check")}</span>
-                                    <span slot="header"> ${msg("Check Application access")} </span>
-                                    <ak-application-check-access-form
-                                        slot="form"
-                                        .application=${this.application}
-                                    >
-                                    </ak-application-check-access-form>
-                                    <button
-                                        slot="trigger"
-                                        class="pf-c-button pf-m-secondary pf-m-block"
-                                    >
-                                        ${msg("Check access")}
-                                    </button>
-                                </ak-forms-modal>
+                            html`<button
+                                    class="pf-c-button pf-m-secondary pf-m-block"
+                                    ${modalInvoker(ApplicationForm, {
+                                        instancePk: this.application.slug,
+                                    })}
+                                >
+                                    ${msg("Edit")}
+                                </button>
+                                <button
+                                    class="pf-c-button pf-m-secondary pf-m-block"
+                                    ${modalInvoker(
+                                        ApplicationCheckAccessForm,
+                                        {
+                                            application: this.application,
+                                        },
+                                        {
+                                            closedBy: "closerequest",
+                                        },
+                                    )}
+                                >
+                                    ${msg("Check access")}
+                                </button>
                                 ${this.application.launchUrl
                                     ? html`<a
                                           target="_blank"
@@ -220,7 +216,7 @@ export class ApplicationViewPage extends WithLicenseSummary(AKElement) {
                                       >
                                           ${msg("Launch")}
                                       </a>`
-                                    : nothing}`,
+                                    : null}`,
                         ],
                     ])}
                 </div>

web/src/admin/endpoints/devices/DeviceForm.ts

@@ -20,6 +20,8 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-endpoints-device-form")
 export class EndpointDeviceForm extends ModelForm<EndpointDevice, string> {
+    public static override verboseName = msg("Device");
+    public static override verboseNamePlural = msg("Devices");
     loadInstance(pk: string): Promise<EndpointDevice> {
         return new EndpointsApi(DEFAULT_CONFIG).endpointsDevicesRetrieve({
             deviceUuid: pk,

web/src/admin/endpoints/devices/DeviceListPage.ts

@@ -1,15 +1,16 @@
 import "#elements/cards/AggregateCard";
 import "#elements/forms/DeleteBulkForm";
-import "#admin/endpoints/devices/DeviceForm";
 import "#admin/endpoints/devices/DeviceAddHowTo";
-import "#elements/forms/ModalForm";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 
+import { modalInvoker } from "#elements/dialogs";
 import { PaginatedResponse, TableColumn, Timestamp } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
+import { EndpointDeviceForm } from "#admin/endpoints/devices/DeviceForm";
+
 import { DeviceSummary, EndpointDevice, EndpointsApi } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
@@ -132,17 +133,14 @@ export class DeviceListPage extends TablePage<EndpointDevice> {
             html`${item.facts.data.os?.name} ${item.facts.data.os?.version}`,
             html`${item.accessGroupObj?.name || "-"}`,
             item.facts.created ? Timestamp(item.facts.created) : html`-`,
-            html`<ak-forms-modal>
-                <span slot="submit">${msg("Save Changes")}</span>
-                <span slot="header">${msg("Update Device")}</span>
-                <ak-endpoints-device-form slot="form" .instancePk=${item.deviceUuid}>
-                </ak-endpoints-device-form>
-                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
-            </ak-forms-modal>`,
+            html`<button
+                class="pf-c-button pf-m-plain"
+                ${modalInvoker(EndpointDeviceForm, { instancePk: item.deviceUuid })}
+            >
+                <pf-tooltip position="top" content=${msg("Edit")}>
+                    <i class="fas fa-edit" aria-hidden="true"></i>
+                </pf-tooltip>
+            </button>`,
         ];
     }
 

web/src/admin/endpoints/devices/DeviceViewPage.ts

@@ -5,20 +5,20 @@ import "#admin/endpoints/devices/facts/DeviceProcessTable";
 import "#admin/endpoints/devices/facts/DeviceUserTable";
 import "#admin/endpoints/devices/facts/DeviceSoftwareTable";
 import "#admin/endpoints/devices/facts/DeviceGroupTable";
-import "#admin/endpoints/devices/DeviceForm";
 import "#admin/endpoints/devices/DeviceEvents";
-import "#elements/forms/ModalForm";
 import "#elements/Tabs";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
 import { APIError, parseAPIResponseError } from "#common/errors/network";
 
 import { AKElement } from "#elements/Base";
+import { modalInvoker } from "#elements/dialogs";
 import { Timestamp } from "#elements/table/shared";
 
 import { setPageDetails } from "#components/ak-page-navbar";
 import renderDescriptionList, { DescriptionPair } from "#components/DescriptionList";
 
+import { EndpointDeviceForm } from "#admin/endpoints/devices/DeviceForm";
 import { getSize, osFamilyToLabel, trySortNumerical } from "#admin/endpoints/devices/utils";
 
 import { DeviceConnection, Disk, EndpointDeviceDetails, EndpointsApi } from "@goauthentik/api";
@@ -124,18 +124,14 @@ export class DeviceViewPage extends AKElement {
                             [msg("Device access group"), this.device?.accessGroupObj?.name ?? "-"],
                             [
                                 msg("Actions"),
-                                html`<ak-forms-modal>
-                                    <span slot="submit">${msg("Save Changes")}</span>
-                                    <span slot="header">${msg("Update Device")}</span>
-                                    <ak-endpoints-device-form
-                                        slot="form"
-                                        .instancePk=${this.device?.deviceUuid}
-                                    >
-                                    </ak-endpoints-device-form>
-                                    <button slot="trigger" class="pf-c-button pf-m-primary">
-                                        ${msg("Edit")}
-                                    </button>
-                                </ak-forms-modal>`,
+                                html`<button
+                                    class="pf-c-button pf-m-primary"
+                                    ${modalInvoker(EndpointDeviceForm, {
+                                        instancePk: this.device?.deviceUuid,
+                                    })}
+                                >
+                                    ${msg("Edit")}
+                                </button>`,
                             ],
                         ],
                         { horizontal: true },