core: add grouping to applications (#2648)

* core: add grouping to applications

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

* core: add new field to tests

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

authentik/core/api/applications.py

@@ -68,6 +68,7 @@ class ApplicationSerializer(ModelSerializer):
             "meta_description",
             "meta_publisher",
             "policy_engine_mode",
+            "group",
         ]
         extra_kwargs = {
             "meta_icon": {"read_only": True},
@@ -85,6 +86,7 @@ class ApplicationViewSet(UsedByMixin, ModelViewSet):
         "meta_launch_url",
         "meta_description",
         "meta_publisher",
+        "group",
     ]
     lookup_field = "slug"
     ordering = ["name"]

authentik/core/migrations/0019_application_group.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.0.3 on 2022-04-02 19:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("authentik_core", "0018_auto_20210330_1345_squashed_0028_alter_token_intent"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="application",
+            name="group",
+            field=models.TextField(blank=True, default=""),
+        ),
+    ]

authentik/core/models.py

@@ -267,6 +267,8 @@ class Application(PolicyBindingModel):
 
     name = models.TextField(help_text=_("Application's display Name."))
     slug = models.SlugField(help_text=_("Internal application name, used in URLs."), unique=True)
+    group = models.TextField(blank=True, default="")
+
     provider = models.OneToOneField(
         "Provider", null=True, blank=True, default=None, on_delete=models.SET_DEFAULT
     )

authentik/core/tests/test_applications_api.py

@@ -84,6 +84,7 @@ class TestApplicationsAPI(APITestCase):
                         "pk": str(self.allowed.pk),
                         "name": "allowed",
                         "slug": "allowed",
+                        "group": "",
                         "provider": self.provider.pk,
                         "provider_obj": {
                             "assigned_application_name": "allowed",
@@ -131,6 +132,7 @@ class TestApplicationsAPI(APITestCase):
                         "pk": str(self.allowed.pk),
                         "name": "allowed",
                         "slug": "allowed",
+                        "group": "",
                         "provider": self.provider.pk,
                         "provider_obj": {
                             "assigned_application_name": "allowed",
@@ -157,6 +159,7 @@ class TestApplicationsAPI(APITestCase):
                         "meta_icon": None,
                         "meta_launch_url": "",
                         "meta_publisher": "",
+                        "group": "",
                         "name": "denied",
                         "pk": str(self.denied.pk),
                         "policy_engine_mode": "any",

schema.yml

@@ -19108,6 +19108,8 @@ components:
           type: string
         policy_engine_mode:
           $ref: '#/components/schemas/PolicyEngineMode'
+        group:
+          type: string
       required:
       - launch_url
       - meta_icon
@@ -19142,6 +19144,8 @@ components:
           type: string
         policy_engine_mode:
           $ref: '#/components/schemas/PolicyEngineMode'
+        group:
+          type: string
       required:
       - name
       - slug
@@ -26598,6 +26602,8 @@ components:
           type: string
         policy_engine_mode:
           $ref: '#/components/schemas/PolicyEngineMode'
+        group:
+          type: string
     PatchedAuthenticateWebAuthnStageRequest:
       type: object
       description: AuthenticateWebAuthnStage Serializer

web/src/locales/de.po

@@ -48,6 +48,7 @@ msgstr "(Format: hours=-1;minutes=-2;seconds=-3)."
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2305,6 +2306,8 @@ msgstr "Zurück zur vorherigen Seite"
 #~ msgid "Go to user interface"
 #~ msgstr "Zur Benutzeroberfläche"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3538,6 +3541,10 @@ msgstr "Optionaler Wiederherstellungsablauf, der unten auf der Seite verlinkt is
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "Optionale, durch Kommas getrennte SubjectAlt-Namen"
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "Geben Sie optional den Eingabewert vor"
@@ -4605,7 +4612,6 @@ msgstr "Einmalbenutzung"
 #~ msgstr "Pfad-Regex überspringen"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/en.po

@@ -32,6 +32,7 @@ msgstr "(Format: hours=1;minutes=2;seconds=3)."
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2343,6 +2344,8 @@ msgstr "Go to previous page"
 #~ msgid "Go to user interface"
 #~ msgstr "Go to user interface"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3597,6 +3600,10 @@ msgstr "Optional recovery flow, which is linked at the bottom of the page."
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "Optional, comma-separated SubjectAlt Names."
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr "Optionally enter a group name. Applications with identical groups are shown grouped together."
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "Optionally pre-fill the input value"
@@ -4694,7 +4701,6 @@ msgstr "Single use"
 #~ msgstr "Skip path regex"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/es.po

@@ -35,6 +35,7 @@ msgstr "(Formato: horas = 1; minutos = 2; segundos = 3)."
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2296,6 +2297,8 @@ msgstr "Ir a la página anterior"
 #~ msgid "Go to user interface"
 #~ msgstr "Ir a la interfaz de usuario"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3531,6 +3534,10 @@ msgstr "Flujo de recuperación opcional, que se enlaza en la parte inferior de l
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "Nombres Alt de asunto separados por comas opcionales."
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "Rellenar previamente el valor de entrada opcionalmente"
@@ -4598,7 +4605,6 @@ msgstr "De un solo uso"
 #~ msgstr "Omitir expresión regular de ruta"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/fr_FR.po

@@ -38,6 +38,7 @@ msgstr ""
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2321,6 +2322,8 @@ msgstr "Aller à la page précédente"
 #~ msgid "Go to user interface"
 #~ msgstr "Aller à l'interface utilisateu"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3565,6 +3568,10 @@ msgstr "Flux de récupération facultatif, qui sera accessible en bas de page."
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "Liste optionnelle de noms alternatifs (SubjetAlt Names), séparés par des virgules."
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "Pré-remplir la valeur du champ (optionnel)"
@@ -4648,7 +4655,6 @@ msgstr "Usage unique"
 #~ msgstr "Regex chemins exclus"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/pl.po

@@ -35,6 +35,7 @@ msgstr "(Format: hours=1;minutes=2;seconds=3)."
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2293,6 +2294,8 @@ msgstr "Wróć do poprzedniej strony"
 #~ msgid "Go to user interface"
 #~ msgstr "Przejdź do interfejsu użytkownika"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3528,6 +3531,10 @@ msgstr "Opcjonalny przepływ odzyskiwania, do którego link znajduje się na dol
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "Opcjonalne, rozdzielone przecinkami nazwy SubjectAlt."
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "Opcjonalnie wstępnie wypełnij wartość wejściową"
@@ -4595,7 +4602,6 @@ msgstr "Jednorazowego użytku"
 #~ msgstr "Pomiń path regex"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/pseudo-LOCALE.po

@@ -32,6 +32,7 @@ msgstr ""
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2329,6 +2330,8 @@ msgstr ""
 #~ msgid "Go to user interface"
 #~ msgstr ""
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3579,6 +3582,10 @@ msgstr ""
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr ""
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr ""
@@ -4674,7 +4681,6 @@ msgstr ""
 #~ msgstr ""
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/tr.po

@@ -35,6 +35,7 @@ msgstr "(Biçim: saat=1; dakika=2; saniye= 3)."
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2296,6 +2297,8 @@ msgstr "Önceki sayfaya git"
 #~ msgid "Go to user interface"
 #~ msgstr "Kullanıcı arayüzüne git"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3533,6 +3536,10 @@ msgstr "Sayfanın alt kısmında bağlı olan isteğe bağlı kurtarma akışı.
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "İsteğe bağlı, virgülle ayrılmış SubjectAlt Adları."
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "İsteğe bağlı olarak giriş değerini önceden doldurun"
@@ -4600,7 +4607,6 @@ msgstr "Tek kullanımlık"
 #~ msgstr "Yol regex atla"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/zh-Hans.po

@@ -37,6 +37,7 @@ msgstr "（格式：hours=1;minutes=2;seconds=3）。"
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2269,6 +2270,8 @@ msgstr "前往上一页"
 #~ msgid "Go to user interface"
 #~ msgstr "前往用户界面"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3490,6 +3493,10 @@ msgstr "可选的恢复流程，链接在页面底部。"
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "可选，逗号分隔的替代名称。"
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "可选，预先填充输入值"
@@ -4537,7 +4544,6 @@ msgstr "一次性使用"
 #~ msgstr "跳过路径正则表达式"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/zh-Hant.po

@@ -37,6 +37,7 @@ msgstr "(格式： hours=1;minutes=2;seconds=3)."
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2269,6 +2270,8 @@ msgstr "转到上一页"
 #~ msgid "Go to user interface"
 #~ msgstr "转到用户界面"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3490,6 +3493,10 @@ msgstr "可选的恢复流程，链接在页面底部。"
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "可选，逗号分隔的 subjectAlt 名称。"
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "（可选）预先填充输入值"
@@ -4537,7 +4544,6 @@ msgstr "一次性使用"
 #~ msgstr "跳过路径正则表达式"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/locales/zh_TW.po

@@ -37,6 +37,7 @@ msgstr "(格式： hours=1;minutes=2;seconds=3)."
 #: src/elements/events/UserEvents.ts
 #: src/elements/user/SessionList.ts
 #: src/pages/applications/ApplicationListPage.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/events/EventListPage.ts
 #: src/pages/groups/GroupListPage.ts
@@ -2269,6 +2270,8 @@ msgstr "转到上一页"
 #~ msgid "Go to user interface"
 #~ msgstr "转到用户界面"
 
+#: src/pages/applications/ApplicationForm.ts
+#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/events/RuleForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -3490,6 +3493,10 @@ msgstr "可选的恢复流程，链接在页面底部。"
 msgid "Optional, comma-separated SubjectAlt Names."
 msgstr "可选，逗号分隔的 subjectAlt 名称。"
 
+#: src/pages/applications/ApplicationForm.ts
+msgid "Optionally enter a group name. Applications with identical groups are shown grouped together."
+msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Optionally pre-fill the input value"
 msgstr "（可选）预先填充输入值"
@@ -4537,7 +4544,6 @@ msgstr "一次性使用"
 #~ msgstr "跳过路径正则表达式"
 
 #: src/pages/applications/ApplicationForm.ts
-#: src/pages/applications/ApplicationListPage.ts
 #: src/pages/flows/FlowForm.ts
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 #: src/pages/sources/oauth/OAuthSourceForm.ts

web/src/pages/applications/ApplicationForm.ts

@@ -121,6 +121,16 @@ export class ApplicationForm extends ModelForm<Application, string> {
                 />
                 <p class="pf-c-form__helper-text">${t`Internal application name, used in URLs.`}</p>
             </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`Group`} name="group">
+                <input
+                    type="text"
+                    value="${ifDefined(this.instance?.group)}"
+                    class="pf-c-form-control"
+                />
+                <p class="pf-c-form__helper-text">
+                    ${t`Optionally enter a group name. Applications with identical groups are shown grouped together.`}
+                </p>
+            </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${t`Provider`} name="provider">
                 <select class="pf-c-form-control">
                     <option value="" ?selected=${this.instance?.provider === undefined}>

web/src/pages/applications/ApplicationListPage.ts

@@ -73,7 +73,7 @@ export class ApplicationListPage extends TablePage<Application> {
         return [
             new TableColumn(""),
             new TableColumn(t`Name`, "name"),
-            new TableColumn(t`Slug`, "slug"),
+            new TableColumn(t`Group`, "group"),
             new TableColumn(t`Provider`),
             new TableColumn(t`Provider Type`),
             new TableColumn(t`Actions`),
@@ -135,7 +135,7 @@ export class ApplicationListPage extends TablePage<Application> {
                 <div>${item.name}</div>
                 ${item.metaPublisher ? html`<small>${item.metaPublisher}</small>` : html``}
             </a>`,
-            html`<code>${item.slug}</code>`,
+            html`${item.group || t`-`}`,
             item.provider
                 ? html`<a href="#/core/providers/${item.providerObj?.pk}">
                       ${item.providerObj?.name}

web/src/user/LibraryPage.ts

@@ -11,6 +11,7 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
 
@@ -20,7 +21,7 @@ import { AKResponse } from "../api/Client";
 import { DEFAULT_CONFIG } from "../api/Config";
 import { UIConfig, uiConfig } from "../common/config";
 import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
-import { loading } from "../utils";
+import { groupBy, loading } from "../utils";
 import "./LibraryApplication";
 
 @customElement("ak-library")
@@ -41,7 +42,7 @@ export class LibraryPage extends LitElement {
         new CoreApi(DEFAULT_CONFIG).coreApplicationsList({}).then((apps) => {
             this.apps = apps;
             this.fuse = new Fuse(apps.results, {
-                keys: ["slug", "name", "metaDescription", "metaPublisher"],
+                keys: ["slug", "name", "metaDescription", "metaPublisher", "group"],
             });
             if (!this.fuse || !this.query) return;
             const matchingApps = this.fuse.search(this.query);
@@ -55,7 +56,8 @@ export class LibraryPage extends LitElement {
     }
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGallery, AKGlobal].concat(css`
+        return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGrid, PFGallery, AKGlobal]
+            .concat(css`
             :host,
             main {
                 padding: 3% 5%;
@@ -80,6 +82,10 @@ export class LibraryPage extends LitElement {
             .pf-c-page__main-section {
                 background-color: transparent;
             }
+            .app-group-header {
+                margin-bottom: 1em;
+                margin-top: 1.2em;
+            }
         `);
     }
 
@@ -95,29 +101,43 @@ export class LibraryPage extends LitElement {
         </div>`;
     }
 
-    renderApps(config: UIConfig): TemplateResult {
+    getApps(): [string, Application[]][] {
-        return html`<div class="pf-l-gallery pf-m-gutter">
+        return groupBy(
-            ${this.apps?.results
+            this.apps?.results.filter((app) => {
-                .filter((app) => {
+                if (app.launchUrl) {
-                    if (app.launchUrl) {
+                    // If the launch URL is a full URL, only show with http or https
-                        // If the launch URL is a full URL, only show with http or https
+                    if (app.launchUrl.indexOf("://") !== -1) {
-                        if (app.launchUrl.indexOf("://") !== -1) {
+                        return app.launchUrl.startsWith("http");
-                            return app.launchUrl.startsWith("http");
-                        }
-                        // If the URL doesn't include a protocol, assume its a relative path
-                        return true;
                     }
-                    return false;
+                    // If the URL doesn't include a protocol, assume its a relative path
-                })
+                    return true;
-                .map(
+                }
-                    (app) =>
+                return false;
-                        html`<ak-library-app
+            }) || [],
+            (app) => app.group || "",
+        );
+    }
+
+    renderApps(config: UIConfig): TemplateResult {
+        return html`${this.getApps().map(([group, apps]) => {
+            return html`
+                <div class="pf-c-content app-group-header">
+                    <h2>${group}</h2>
+                </div>
+                <div
+                    class="pf-l-grid pf-m-gutter pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-5-col-on-lg pf-m-all-3-col-on-xl"
+                >
+                    ${apps.map((app) => {
+                        return html`<ak-library-app
+                            class="pf-l-grid__item"
                             .application=${app}
                             background=${config.color.cardBackground}
                             ?selected=${app.slug === this.selectedApp?.slug}
-                        ></ak-library-app>`,
+                        ></ak-library-app>`;
-                )}
+                    })}
-        </div>`;
+                </div>
+            `;
+        })}`;
     }
 
     render(): TemplateResult {

website/docs/releases/v2022.4.md

@@ -11,6 +11,10 @@ slug: "2022.4"
 
 ## New features
 
+- Application Grouping
+
+  Applications can now be grouped together to better organise connected applications in the user dashboard.
+
 - JWT authentication for `client_credentials` grants
 
   Providers can now be configured to accept JWTs signed by configured certificates, which makes it a lot easier to services access to authentik, when an existing machine/service identity is provided (for example, this can be used to let Kubernetes Pods authenticate themselves to authentik via their service account)