web/admin: add sidebar to applications

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

web/src/locales/en.po

@@ -122,6 +122,10 @@ msgstr "API Token (can be used to access the API programmatically)"
 msgid "API request failed"
 msgstr "API request failed"
 
+#: src/pages/applications/ApplicationListPage.ts
+msgid "About applications"
+msgstr "About applications"
+
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 msgid "Access Key"
 msgstr "Access Key"

web/src/locales/fr_FR.po

@@ -128,6 +128,10 @@ msgstr "Jeton d'API (peut être utilisé pour accéder à l'API via un programme
 msgid "API request failed"
 msgstr "Requête d'API échouée"
 
+#: src/pages/applications/ApplicationListPage.ts
+msgid "About applications"
+msgstr ""
+
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 msgid "Access Key"
 msgstr "Clé d'accès"

web/src/locales/pseudo-LOCALE.po

@@ -122,6 +122,10 @@ msgstr ""
 msgid "API request failed"
 msgstr ""
 
+#: src/pages/applications/ApplicationListPage.ts
+msgid "About applications"
+msgstr ""
+
 #: src/pages/sources/oauth/OAuthSourceViewPage.ts
 msgid "Access Key"
 msgstr ""

web/src/pages/applications/ApplicationListPage.ts

@@ -5,12 +5,15 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
 
 import { Application, CoreApi } from "@goauthentik/api";
 
+import MDApplication from "../../../../website/docs/core/applications.md";
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { uiConfig } from "../../common/config";
+import "../../elements/Markdown";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
@@ -52,6 +55,7 @@ export class ApplicationListPage extends TablePage<Application> {
     static get styles(): CSSResult[] {
         return super.styles.concat(
             PFAvatar,
+            PFCard,
             css`
                 tr td:first-child {
                     width: auto;
@@ -74,6 +78,17 @@ export class ApplicationListPage extends TablePage<Application> {
         ];
     }
 
+    renderSidebarAfter(): TemplateResult {
+        return html`<div class="pf-c-sidebar__panel pf-m-width-25">
+            <div class="pf-c-card">
+                <div class="pf-c-card__title">${t`About applications`}</div>
+                <div class="pf-c-card__body">
+                    <ak-markdown .md=${MDApplication}></ak-markdown>
+                </div>
+            </div>
+        </div>`;
+    }
+
     renderToolbarSelected(): TemplateResult {
         const disabled = this.selectedElements.length < 1;
         return html`<ak-forms-delete-bulk

website/docs/core/applications.md

@@ -3,7 +3,7 @@ title: Applications
 slug: /applications
 ---
 
-Applications in authentik are the counterpart of providers. They exist in a 1-to-1 relationship, each application needs a provider and every provider can be used with one application.
+Applications in authentik are the other half of providers. They exist in a 1-to-1 relationship, each application needs a provider and every provider can be used with one application.
 
 Applications are used to configure and separate the authorization / access control and the appearance in the Library page.