249 lines
9.4 KiB
TypeScript
249 lines
9.4 KiB
TypeScript
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
|
import { LayoutType } from "@goauthentik/common/ui/config";
|
|
import { groupBy } from "@goauthentik/common/utils";
|
|
import { AKElement, rootInterface } from "@goauthentik/elements/Base";
|
|
import "@goauthentik/elements/EmptyState";
|
|
import { getURLParam, updateURLParams } from "@goauthentik/elements/router/RouteMatch";
|
|
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
|
|
import "@goauthentik/user/LibraryApplication";
|
|
import Fuse from "fuse.js";
|
|
|
|
import { t } from "@lingui/macro";
|
|
|
|
import { CSSResult, TemplateResult, css, html } from "lit";
|
|
import { customElement, property, state } from "lit/decorators.js";
|
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
|
|
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";
|
|
|
|
import { Application, CoreApi } from "@goauthentik/api";
|
|
|
|
export function loading<T>(v: T, actual: TemplateResult): TemplateResult {
|
|
if (!v) {
|
|
return html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`;
|
|
}
|
|
return actual;
|
|
}
|
|
|
|
@customElement("ak-library")
|
|
export class LibraryPage extends AKElement {
|
|
@property({ attribute: false })
|
|
apps?: PaginatedResponse<Application>;
|
|
|
|
@state()
|
|
selectedApp?: Application;
|
|
|
|
@state()
|
|
filteredApps: Application[] = [];
|
|
|
|
@property()
|
|
query = getURLParam<string | undefined>("search", undefined);
|
|
|
|
fuse: Fuse<Application>;
|
|
|
|
constructor() {
|
|
super();
|
|
this.fuse = new Fuse([], {
|
|
keys: [
|
|
{ name: "name", weight: 3 },
|
|
"slug",
|
|
"group",
|
|
{ name: "metaDescription", weight: 0.5 },
|
|
{ name: "metaPublisher", weight: 0.5 },
|
|
],
|
|
findAllMatches: true,
|
|
includeScore: true,
|
|
shouldSort: true,
|
|
ignoreFieldNorm: true,
|
|
useExtendedSearch: true,
|
|
threshold: 0.5,
|
|
});
|
|
new CoreApi(DEFAULT_CONFIG).coreApplicationsList({}).then((apps) => {
|
|
this.apps = apps;
|
|
this.filteredApps = apps.results;
|
|
this.fuse.setCollection(apps.results);
|
|
if (!this.query) return;
|
|
const matchingApps = this.fuse.search(this.query);
|
|
if (matchingApps.length < 1) return;
|
|
this.selectedApp = matchingApps[0].item;
|
|
this.filteredApps = matchingApps.map((a) => a.item);
|
|
});
|
|
}
|
|
|
|
pageTitle(): string {
|
|
return t`My Applications`;
|
|
}
|
|
|
|
static get styles(): CSSResult[] {
|
|
return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGrid, PFGallery].concat(css`
|
|
:host,
|
|
main {
|
|
padding: 3% 5%;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
.header input {
|
|
width: 30ch;
|
|
box-sizing: border-box;
|
|
border: 0;
|
|
border-bottom: 1px solid;
|
|
border-bottom-color: #fd4b2d;
|
|
background-color: transparent;
|
|
font-size: 1.5rem;
|
|
}
|
|
.header input:focus {
|
|
outline: 0;
|
|
}
|
|
.pf-c-page__main {
|
|
overflow: hidden;
|
|
}
|
|
.pf-c-page__main-section {
|
|
background-color: transparent;
|
|
}
|
|
.app-group-header {
|
|
margin-bottom: 1em;
|
|
margin-top: 1.2em;
|
|
}
|
|
`);
|
|
}
|
|
|
|
renderEmptyState(): TemplateResult {
|
|
return html` <div class="pf-c-empty-state pf-m-full-height">
|
|
<div class="pf-c-empty-state__content">
|
|
<i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
|
|
<h1 class="pf-c-title pf-m-lg">${t`No Applications available.`}</h1>
|
|
<div class="pf-c-empty-state__body">
|
|
${t`Either no applications are defined, or you don't have access to any.`}
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
filterApps(apps: Application[]): Application[] {
|
|
return apps.filter((app) => {
|
|
if (app.launchUrl && app.launchUrl !== "") {
|
|
// If the launch URL is a full URL, only show with http or https
|
|
if (app.launchUrl.indexOf("://") !== -1) {
|
|
return app.launchUrl.startsWith("http");
|
|
}
|
|
// If the URL doesn't include a protocol, assume its a relative path
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
}
|
|
|
|
getApps(): [string, Application[]][] {
|
|
return groupBy(this.filterApps(this.filteredApps), (app) => app.group || "");
|
|
}
|
|
|
|
renderApps(): TemplateResult {
|
|
let groupClass = "";
|
|
let groupGrid = "";
|
|
const uiConfig = rootInterface()?.uiConfig;
|
|
switch (uiConfig?.layout.type) {
|
|
case LayoutType.row:
|
|
groupClass = "pf-m-12-col";
|
|
groupGrid =
|
|
"pf-m-all-6-col-on-sm pf-m-all-4-col-on-md pf-m-all-5-col-on-lg pf-m-all-2-col-on-xl";
|
|
break;
|
|
case LayoutType.column_2:
|
|
groupClass = "pf-m-6-col";
|
|
groupGrid =
|
|
"pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-4-col-on-lg pf-m-all-4-col-on-xl";
|
|
break;
|
|
case LayoutType.column_3:
|
|
groupClass = "pf-m-4-col";
|
|
groupGrid =
|
|
"pf-m-all-12-col-on-sm pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-6-col-on-xl";
|
|
break;
|
|
}
|
|
return html`<div class="pf-l-grid pf-m-gutter">
|
|
${this.getApps().map(([group, apps]) => {
|
|
return html`<div class="pf-l-grid__item ${groupClass}">
|
|
<div class="pf-c-content app-group-header">
|
|
<h2>${group}</h2>
|
|
</div>
|
|
<div class="pf-l-grid pf-m-gutter ${groupGrid}">
|
|
${apps.map((app) => {
|
|
return html`<ak-library-app
|
|
class="pf-l-grid__item"
|
|
.application=${app}
|
|
background=${ifDefined(uiConfig?.theme.cardBackground)}
|
|
?selected=${app.slug === this.selectedApp?.slug}
|
|
></ak-library-app>`;
|
|
})}
|
|
</div>
|
|
</div> `;
|
|
})}
|
|
</div>`;
|
|
}
|
|
|
|
resetSearch(): void {
|
|
const searchInput = this.shadowRoot?.querySelector("input");
|
|
if (searchInput) {
|
|
searchInput.value = "";
|
|
}
|
|
this.query = "";
|
|
updateURLParams({
|
|
search: this.query,
|
|
});
|
|
this.selectedApp = undefined;
|
|
this.filteredApps = this.apps?.results || [];
|
|
}
|
|
|
|
render(): TemplateResult {
|
|
return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
|
|
<div class="pf-c-content header">
|
|
<h1>${t`My applications`}</h1>
|
|
${rootInterface()?.uiConfig?.enabledFeatures.search
|
|
? html`<input
|
|
@input=${(ev: InputEvent) => {
|
|
this.query = (ev.target as HTMLInputElement).value;
|
|
if (this.query === "") {
|
|
return this.resetSearch();
|
|
}
|
|
updateURLParams({
|
|
search: this.query,
|
|
});
|
|
const apps = this.fuse.search(this.query);
|
|
if (apps.length < 1) return;
|
|
this.selectedApp = apps[0].item;
|
|
this.filteredApps = apps.map((a) => a.item);
|
|
}}
|
|
@keydown=${(ev: KeyboardEvent) => {
|
|
if (ev.key === "Enter" && this.selectedApp?.launchUrl) {
|
|
window.location.assign(this.selectedApp.launchUrl);
|
|
} else if (ev.key === "Escape") {
|
|
this.resetSearch();
|
|
}
|
|
}}
|
|
type="text"
|
|
class="pf-u-display-none pf-u-display-block-on-md"
|
|
autofocus
|
|
placeholder=${t`Search...`}
|
|
value=${ifDefined(this.query)}
|
|
/>`
|
|
: html``}
|
|
</div>
|
|
<section class="pf-c-page__main-section">
|
|
${loading(
|
|
this.apps,
|
|
html`${this.filteredApps.length > 0
|
|
? this.renderApps()
|
|
: this.renderEmptyState()}`,
|
|
)}
|
|
</section>
|
|
</main>`;
|
|
}
|
|
}
|