Address review feedback on FleetDM connector implementation (#18651)

* Initial plan

* Add public override modifiers to updated method

Co-authored-by: GirlBossRush <[email protected]>

* Address additional feedback from PR #18589

Co-authored-by: GirlBossRush <[email protected]>

* Fix indentation in ak-switch-input component

Co-authored-by: GirlBossRush <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: GirlBossRush <[email protected]>

Author: Copilot

web/src/admin/endpoints/connectors/fleet/FleetConnectorForm.ts

@@ -1,4 +1,5 @@
 import "#components/ak-secret-text-input";
+import "#components/ak-switch-input";
 import "#components/ak-text-input";
 import "#elements/forms/HorizontalFormElement";
 
@@ -11,7 +12,6 @@ import { EndpointsApi, FleetConnector, FleetConnectorRequest } from "@goauthenti
 import { msg } from "@lit/localize";
 import { html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("ak-endpoints-connector-fleet-form")
 export class FleetConnectorForm extends ModelForm<FleetConnector, string> {
@@ -21,10 +21,10 @@ export class FleetConnectorForm extends ModelForm<FleetConnector, string> {
         });
     }
 
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return this.instance
-            ? msg("Successfully updated fleet connector.")
-            : msg("Successfully created fleet connector.");
+            ? msg("Successfully updated Fleet connector.")
+            : msg("Successfully created Fleet connector.");
     }
 
     async send(data: FleetConnector): Promise<FleetConnector> {
@@ -44,28 +44,18 @@ export class FleetConnectorForm extends ModelForm<FleetConnector, string> {
                 name="name"
                 placeholder=${msg("Connector name...")}
                 label=${msg("Connector name")}
-                value=${ifDefined(this.instance?.name)}
+                value=${this.instance?.name ?? ""}
                 required
             ></ak-text-input>
-            <ak-form-element-horizontal name="enabled">
-                <label class="pf-c-switch">
-                    <input
-                        class="pf-c-switch__input"
-                        type="checkbox"
-                        ?checked=${this.instance?.enabled ?? true}
-                    />
-                    <span class="pf-c-switch__toggle">
-                        <span class="pf-c-switch__toggle-icon">
-                            <i class="fas fa-check" aria-hidden="true"></i>
-                        </span>
-                    </span>
-                    <span class="pf-c-switch__label">${msg("Enabled")}</span>
-                </label>
-            </ak-form-element-horizontal>
+            <ak-switch-input
+                name="enabled"
+                label=${msg("Enabled")}
+                ?checked=${this.instance?.enabled ?? true}
+            ></ak-switch-input>
             <ak-text-input
                 name="url"
                 label=${msg("Fleet Server URL")}
-                value="${ifDefined(this.instance?.url)}"
+                value=${this.instance?.url ?? ""}
                 required
                 input-hint="code"
             >

web/src/admin/endpoints/connectors/fleet/FleetConnectorViewPage.ts

@@ -27,7 +27,9 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+const [FLEET_CONNECTOR_APP_LABEL, FLEET_CONNECTOR_MODEL_NAME] =
+    ModelEnum.AuthentikEndpointsConnectorsFleetFleetconnector.split(".");
 
 @customElement("ak-endpoints-connector-fleet-view")
 export class FleetConnectorViewPage extends AKElement {
@@ -40,7 +42,7 @@ export class FleetConnectorViewPage extends AKElement {
     @state()
     protected error?: APIError;
 
-    static styles: CSSResult[] = [PFBase, PFCard, PFPage, PFGrid, PFButton, PFDescriptionList];
+    static styles: CSSResult[] = [PFCard, PFPage, PFGrid, PFButton, PFDescriptionList];
 
     protected fetchDevice(id: string) {
         new EndpointsApi(DEFAULT_CONFIG)
@@ -59,7 +61,7 @@ export class FleetConnectorViewPage extends AKElement {
         }
     }
 
-    updated(changed: PropertyValues<this>) {
+    public override updated(changed: PropertyValues<this>) {
         super.updated(changed);
         setPageDetails({
             icon: "pf-icon pf-icon-data-source",
@@ -68,9 +70,7 @@ export class FleetConnectorViewPage extends AKElement {
         });
     }
 
-    renderTabOverview() {
-        const [appLabel, modelName] =
-            ModelEnum.AuthentikEndpointsConnectorsFleetFleetconnector.split(".");
+    protected renderTabOverview() {
         return html`<div
             class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"
         >
@@ -81,8 +81,8 @@ export class FleetConnectorViewPage extends AKElement {
                     </div>
                     <div class="pf-c-card__body">
                         <ak-schedule-list
-                            .relObjAppLabel=${appLabel}
-                            .relObjModel=${modelName}
+                            .relObjAppLabel=${FLEET_CONNECTOR_APP_LABEL}
+                            .relObjModel=${FLEET_CONNECTOR_MODEL_NAME}
                             .relObjId="${this.connector?.connectorUuid}"
                         ></ak-schedule-list>
                     </div>
@@ -95,8 +95,8 @@ export class FleetConnectorViewPage extends AKElement {
                     </div>
                     <div class="pf-c-card__body">
                         <ak-task-list
-                            .relObjAppLabel=${appLabel}
-                            .relObjModel=${modelName}
+                            .relObjAppLabel=${FLEET_CONNECTOR_APP_LABEL}
+                            .relObjModel=${FLEET_CONNECTOR_MODEL_NAME}
                             .relObjId="${this.connector?.connectorUuid}"
                         ></ak-task-list>
                     </div>
@@ -142,7 +142,7 @@ export class FleetConnectorViewPage extends AKElement {
                 tabindex="0"
                 slot="page-permissions"
                 id="page-permissions"
-                aria-label="${msg("Permissions")}"
+                aria-label=${msg("Permissions")}
                 model=${RbacPermissionsAssignedByUsersListModelEnum.AuthentikEndpointsConnectorsAgentAgentconnector}
                 objectPk=${this.connector.connectorUuid!}
             ></ak-rbac-object-permission-page>