@keycloakify/keycloak-account-ui/applications/Applications.js

<p align="center"> <img src="https://github.com/user-attachments/assets/e31c4910-7205-441c-9a35-e134b806b3a8"> </p> <p align="center"> <i>Repackaged Keycloak Account UI</i> <br> <br> <a href="https://github.com/keycloakify/keycloak-a

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, DataList, DataListCell, DataListContent, DataListItem, DataListItemCells, DataListItemRow, DataListToggle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Grid, GridItem, Spinner, } from "@patternfly/react-core";
import { CheckIcon, ExternalLinkAltIcon, InfoAltIcon, } from "@patternfly/react-icons";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ContinueCancelModal, useAlerts, useEnvironment, } from "../ui-shared";
import { deleteConsent, getApplications } from "../api/methods";
import { Page } from "../components/page/Page";
import { formatDate } from "../utils/formatDate";
import { usePromise } from "../utils/usePromise";
export const Applications = () => {
    const { t } = useTranslation();
    const context = useEnvironment();
    const { addAlert, addError } = useAlerts();
    const [applications, setApplications] = useState();
    const [key, setKey] = useState(1);
    const refresh = () => setKey(key + 1);
    usePromise((signal) => getApplications({ signal, context }), (clients) => setApplications(clients.map((c) => (Object.assign(Object.assign({}, c), { open: false })))), [key]);
    const toggleOpen = (clientId) => {
        setApplications([
            ...applications.map((a) => a.clientId === clientId ? Object.assign(Object.assign({}, a), { open: !a.open }) : a),
        ]);
    };
    const removeConsent = async (id) => {
        try {
            await deleteConsent(context, id);
            refresh();
            addAlert(t("removeConsentSuccess"));
        }
        catch (error) {
            addError(t("removeConsentError", { error }).toString());
        }
    };
    if (!applications) {
        return _jsx(Spinner, {});
    }
    return (_jsx(Page, { title: t("application"), description: t("applicationsIntroMessage"), children: _jsxs(DataList, { id: "applications-list", "aria-label": t("application"), children: [_jsx(DataListItem, { id: "applications-list-header", "aria-labelledby": "Columns names", children: _jsxs(DataListItemRow, { children: [_jsx("span", { style: { visibility: "hidden", height: 55 }, children: _jsx(DataListToggle, { id: "applications-list-header-invisible-toggle", "aria-controls": "applications-list-content" }) }), _jsx(DataListItemCells, { dataListCells: [
                                    _jsx(DataListCell, { width: 2, className: "pf-v5-u-pt-md", children: _jsx("strong", { children: t("name") }) }, "applications-list-client-id-header"),
                                    _jsx(DataListCell, { width: 2, className: "pf-v5-u-pt-md", children: _jsx("strong", { children: t("applicationType") }) }, "applications-list-app-type-header"),
                                    _jsx(DataListCell, { width: 2, className: "pf-v5-u-pt-md", children: _jsx("strong", { children: t("status") }) }, "applications-list-status"),
                                ] })] }) }), applications.map((application) => (_jsxs(DataListItem, { "aria-labelledby": "applications-list", "data-testid": "applications-list-item", isExpanded: application.open, children: [_jsxs(DataListItemRow, { className: "pf-v5-u-align-items-center", children: [_jsx(DataListToggle, { onClick: () => toggleOpen(application.clientId), isExpanded: application.open, id: `toggle-${application.clientId}`, "aria-controls": `content-${application.clientId}` }), _jsx(DataListItemCells, { className: "pf-v5-u-align-items-center", dataListCells: [
                                        _jsxs(DataListCell, { width: 2, children: [application.effectiveUrl && (_jsxs(Button, { className: "pf-v5-u-pl-0 title-case", component: "a", variant: "link", onClick: () => window.open(application.effectiveUrl), children: [application.clientName || application.clientId, " ", _jsx(ExternalLinkAltIcon, {})] })), !application.effectiveUrl && (_jsx("span", { children: application.clientName || application.clientId }))] }, `client${application.clientId}`),
                                        _jsxs(DataListCell, { width: 2, children: [application.userConsentRequired
                                                    ? t("thirdPartyApp")
                                                    : t("internalApp"), application.offlineAccess ? ", " + t("offlineAccess") : ""] }, `internal${application.clientId}`),
                                        _jsx(DataListCell, { width: 2, children: application.inUse ? t("inUse") : t("notInUse") }, `status${application.clientId}`),
                                    ] })] }), _jsxs(DataListContent, { id: `content-${application.clientId}`, className: "pf-v5-u-pl-4xl", "aria-label": t("applicationDetails", {
                                clientId: application.clientId,
                            }), isHidden: !application.open, children: [_jsxs(DescriptionList, { children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("client") }), _jsx(DescriptionListDescription, { children: application.clientId })] }), application.description && (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("description") }), _jsx(DescriptionListDescription, { children: application.description })] })), application.effectiveUrl && (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: "URL" }), _jsx(DescriptionListDescription, { children: application.effectiveUrl.split('"') })] })), application.consent && (_jsxs(_Fragment, { children: [_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("hasAccessTo") }), application.consent.grantedScopes.map((scope) => (_jsxs(DescriptionListDescription, { children: [_jsx(CheckIcon, {}), " ", t(scope.name)] }, `scope${scope.id}`)))] }), application.tosUri && (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("termsOfService") }), _jsx(DescriptionListDescription, { children: application.tosUri })] })), application.policyUri && (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("privacyPolicy") }), _jsx(DescriptionListDescription, { children: application.policyUri })] })), application.logoUri && (_jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("logo") }), _jsx(DescriptionListDescription, { children: _jsx("img", { src: application.logoUri }) })] })), _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("accessGrantedOn") }), _jsx(DescriptionListDescription, { children: formatDate(new Date(application.consent.createdDate)) })] })] }))] }), (application.consent || application.offlineAccess) && (_jsxs(Grid, { hasGutter: true, children: [_jsx("hr", {}), _jsx(GridItem, { children: _jsx(ContinueCancelModal, { buttonTitle: t("removeAccess"), modalTitle: t("removeAccess"), continueLabel: t("confirm"), cancelLabel: t("cancel"), buttonVariant: "secondary", onContinue: () => removeConsent(application.clientId), children: t("removeModalMessage", { name: application.clientId }) }) }), _jsxs(GridItem, { children: [_jsx(InfoAltIcon, {}), " ", t("infoMessage")] })] }))] })] }, application.clientId)))] }) }));
};
export default Applications;
//# sourceMappingURL=Applications.js.map