web: fix source pages

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/authentik.css

@@ -136,6 +136,9 @@ ak-message {
     .pf-c-tabs {
         background-color: var(--ak-dark-background-light);
     }
+    .pf-c-tabs__item.pf-m-current {
+        --pf-c-tabs__link--after--BorderColor: #fd4b2d;
+    }
     /* tabs, vertical */
     .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
         background-color: var(--ak-dark-background-light);

web/src/elements/EmptyState.ts

@@ -19,14 +19,14 @@ export class EmptyState extends LitElement {
     fullHeight = false;
 
     @property()
-    header: string = "";
+    header = "";
 
     static get styles(): CSSResult[] {
         return [PFBase, PFEmptyState, PFTitle, AKGlobal];
     }
 
     render(): TemplateResult {
-        return html`<div class="pf-c-empty-state ${this.fullHeight && 'pf-m-full-height'}">
+        return html`<div class="pf-c-empty-state ${this.fullHeight && "pf-m-full-height"}">
             <div class="pf-c-empty-state__content">
                 ${this.loading ?
                     html`<div class="pf-c-empty-state__icon">

web/src/elements/buttons/ModalButton.ts

@@ -11,7 +11,7 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
-import AKGlobal from "../../authentik.css"
+import AKGlobal from "../../authentik.css";
 
 import { convertToSlug } from "../../utils";
 import { SpinnerButton } from "./SpinnerButton";

web/src/elements/cards/AggregateCard.ts

@@ -4,7 +4,7 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
-import AKGlobal from "../../authentik.css"
+import AKGlobal from "../../authentik.css";
 
 @customElement("ak-aggregate-card")
 export class AggregateCard extends LitElement {

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

@@ -16,7 +16,7 @@ import "./cards/WorkerStatusCard";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
-import AKGlobal from "../../authentik.css"
+import AKGlobal from "../../authentik.css";
 
 @customElement("ak-admin-overview")
 export class AdminOverviewPage extends LitElement {

web/src/pages/admin-overview/TopApplicationsTable.ts

@@ -2,7 +2,7 @@ import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { EventsApi, EventTopPerUser } from "authentik-api";
 import PFTable from "@patternfly/patternfly/components/Table/table.css";
-import AKGlobal from "../../authentik.css"
+import AKGlobal from "../../authentik.css";
 
 import "../../elements/Spinner";
 import { DEFAULT_CONFIG } from "../../api/Config";

web/src/pages/providers/ProviderViewPage.ts

@@ -10,7 +10,6 @@ import "./ProxyProviderViewPage";
 import { Provider, ProvidersApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { ifDefined } from "lit-html/directives/if-defined";
-import { gettext } from "django";
 
 @customElement("ak-provider-view")
 export class ProviderViewPage extends LitElement {
@@ -35,10 +34,7 @@ export class ProviderViewPage extends LitElement {
 
     render(): TemplateResult {
         if (!this.provider) {
-            return html`<ak-empty-state
-                ?loading="${true}"
-                header=${gettext("Loading")}>
-            </ak-empty-state>`;
+            return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
         }
         switch (this.provider?.objectType) {
             case "saml":

web/src/pages/sources/LDAPSourceViewPage.ts

@@ -4,6 +4,13 @@ import { CSSResult, customElement, html, property, TemplateResult } from "lit-el
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -41,7 +48,7 @@ export class LDAPSourceViewPage extends Page {
     source!: LDAPSource;
 
     static get styles(): CSSResult[] {
-        return [PFPage, PFGallery, PFContent];
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
     }
 
     constructor() {

web/src/pages/sources/OAuthSourceViewPage.ts

@@ -4,6 +4,13 @@ import { CSSResult, customElement, html, property, TemplateResult } from "lit-el
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -39,7 +46,7 @@ export class OAuthSourceViewPage extends Page {
     source?: OAuthSource;
 
     static get styles(): CSSResult[] {
-        return [PFPage, PFGallery, PFContent];
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
     }
 
     constructor() {

web/src/pages/sources/SAMLSourceViewPage.ts

@@ -5,6 +5,13 @@ import { until } from "lit-html/directives/until";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -40,7 +47,7 @@ export class SAMLSourceViewPage extends Page {
     source?: SAMLSource;
 
     static get styles(): CSSResult[] {
-        return [PFPage, PFGallery, PFContent];
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
     }
 
     constructor() {

web/src/pages/sources/SourceViewPage.ts

@@ -2,13 +2,9 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import { Source, SourcesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 
-import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PFContent from "@patternfly/patternfly/components/Content/content.css";
-import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
-
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
-import { SpinnerSize } from "../../elements/Spinner";
+import "../../elements/EmptyState";
 
 import "./LDAPSourceViewPage";
 import "./OAuthSourceViewPage";
@@ -34,24 +30,16 @@ export class SourceViewPage extends LitElement {
     source?: Source;
 
     static get styles(): CSSResult[] {
-        return [PFPage, PFGallery, PFContent].concat(css`
+        return [css`
             * {
                 height: 100%;
             }
-        `);
+        `];
     }
 
     render(): TemplateResult {
         if (!this.source) {
-            return html`<div class="pf-c-empty-state pf-m-full-height">
-                <div class="pf-c-empty-state__content">
-                    <div class="pf-l-bullseye">
-                        <div class="pf-l-bullseye__item">
-                            <ak-spinner size="${SpinnerSize.XLarge}"></ak-spinner>
-                        </div>
-                    </div>
-                </div>
-            </div>`;
+            return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
         }
         switch (this.source?.objectType) {
             case "ldap":