diff --git a/src/clients/ClientSettings.tsx b/src/clients/ClientSettings.tsx index 462916333e..a9c2959e2b 100644 --- a/src/clients/ClientSettings.tsx +++ b/src/clients/ClientSettings.tsx @@ -31,6 +31,7 @@ import { useAlerts } from "../components/alert/Alerts"; import { ViewHeader } from "../components/view-header/ViewHeader"; import { exportClient } from "../util"; import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; +import { useDownloadDialog } from "../components/download-dialog/DownloadDialog"; export const ClientSettings = () => { const { t } = useTranslation("clients"); @@ -74,6 +75,11 @@ export const ClientSettings = () => { }, }); + const [toggleDownloadDialog, DownloadDialog] = useDownloadDialog({ + id, + protocol: form.getValues("protocol"), + }); + const save = async () => { if (await form.trigger()) { const redirectUris = toValue(form.getValues()["redirectUris"]); @@ -89,6 +95,7 @@ export const ClientSettings = () => { return ( <> + { titleKey={name} subKey="clients:clientsExplain" selectItems={[ + + {t("downloadAdapterConfig")} + , {t("common:export")} , @@ -131,6 +141,8 @@ export const ClientSettings = () => { exportClient(form.getValues()); } else if (value === "delete") { toggleDeleteDialog(); + } else if (value === "download") { + toggleDownloadDialog(); } }} /> diff --git a/src/clients/messages.json b/src/clients/messages.json index fc6ebafc86..1fe2e4e2bb 100644 --- a/src/clients/messages.json +++ b/src/clients/messages.json @@ -28,6 +28,7 @@ "clientDeleteError": "Could not delete client:", "clientDeleteConfirmTitle": "Delete client?", "disableConfirmTitle": "Disable client?", + "downloadAdapterConfig": "Download adapter config", "disableConfirm": "If you disable this client, you cannot initiate a login or obtain access tokens.", "clientDeleteConfirm": "If you delete this client, all associated data will be removed.", "clientAuthentication": "Client authentication", diff --git a/src/components/download-dialog/DownloadDialog.tsx b/src/components/download-dialog/DownloadDialog.tsx index 0bce56529a..9c207d0e45 100644 --- a/src/components/download-dialog/DownloadDialog.tsx +++ b/src/components/download-dialog/DownloadDialog.tsx @@ -11,11 +11,15 @@ import { StackItem, TextArea, } from "@patternfly/react-core"; +import FileSaver from "file-saver"; + import { ConfirmDialogModal } from "../confirm-dialog/ConfirmDialog"; import { HttpClientContext } from "../../context/http-service/HttpClientContext"; import { RealmContext } from "../../context/realm-context/RealmContext"; import { HelpItem } from "../help-enabler/HelpItem"; import { useTranslation } from "react-i18next"; +import { useServerInfo } from "../../context/server-info/ServerInfoProvider"; +import { HelpContext } from "../help-enabler/HelpHeader"; export type DownloadDialogProps = { id: string; @@ -27,39 +31,6 @@ type DownloadDialogModalProps = DownloadDialogProps & { toggleDialog: () => void; }; -const serverInfo = [ - { - id: "keycloak-oidc-jboss-subsystem-cli", - protocol: "openid-connect", - downloadOnly: false, - displayType: "Keycloak OIDC JBoss Subsystem CLI", - helpText: - "CLI script you must edit and apply to your client app server. This type of configuration is useful when you can't or don't want to crack open your WAR file.", - filename: "keycloak-oidc-subsystem.cli", - mediaType: "text/plain", - }, - { - id: "keycloak-oidc-jboss-subsystem", - protocol: "openid-connect", - downloadOnly: false, - displayType: "Keycloak OIDC JBoss Subsystem XML", - helpText: - "XML snippet you must edit and add to the Keycloak OIDC subsystem on your client app server. This type of configuration is useful when you can't or don't want to crack open your WAR file.", - filename: "keycloak-oidc-subsystem.xml", - mediaType: "application/xml", - }, - { - id: "keycloak-oidc-keycloak-json", - protocol: "openid-connect", - downloadOnly: false, - displayType: "Keycloak OIDC JSON", - helpText: - "keycloak.json file used by the Keycloak OIDC client adapter to configure clients. This must be saved to a keycloak.json file and put in your WEB-INF directory of your WAR file. You may also want to tweak this file after you download it.", - filename: "keycloak.json", - mediaType: "application/json", - }, -]; - export const useDownloadDialog = ( props: DownloadDialogProps ): [() => void, () => ReactElement] => { @@ -84,8 +55,10 @@ export const DownloadDialog = ({ const httpClient = useContext(HttpClientContext)!; const { realm } = useContext(RealmContext); const { t } = useTranslation("common"); + const { enabled } = useContext(HelpContext); + const serverInfo = useServerInfo(); - const configFormats = serverInfo; //serverInfo.clientInstallations[protocol]; + const configFormats = serverInfo.clientInstallations[protocol]; const [selected, setSelected] = useState( configFormats[configFormats.length - 1].id ); @@ -95,35 +68,43 @@ export const DownloadDialog = ({ useEffect(() => { (async () => { const response = await httpClient.doGet( - `admin/${realm}/master/clients/${id}/installation/providers/${selected}` + `/admin/realms/${realm}/clients/${id}/installation/providers/${selected}` ); - setSnippet(response.data!); + setSnippet(await response.text()); })(); - }, [selected]); + }, [selected, snippet]); return ( {}} + onConfirm={() => { + const config = configFormats.find((config) => config.id === selected)!; + FileSaver.saveAs( + new Blob([snippet], { type: config.mediaType }), + config.filename + ); + }} open={open} toggleDialog={toggleDialog} >
- - - { - configFormats.find( - (configFormat) => configFormat.id === selected - )?.helpText - } - - + {enabled && ( + + + { + configFormats.find( + (configFormat) => configFormat.id === selected + )?.helpText + } + + + )} } > diff --git a/src/components/list-empty-state/ListEmptyState.tsx b/src/components/list-empty-state/ListEmptyState.tsx index 0859d52a7d..cf0561fabd 100644 --- a/src/components/list-empty-state/ListEmptyState.tsx +++ b/src/components/list-empty-state/ListEmptyState.tsx @@ -9,6 +9,7 @@ import { EmptyStateSecondaryActions, } from "@patternfly/react-core"; import { PlusCircleIcon } from "@patternfly/react-icons"; +import { SearchIcon } from "@patternfly/react-icons"; export type Action = { text: string; @@ -19,8 +20,10 @@ export type Action = { export type ListEmptyStateProps = { message: string; instructions: string; - primaryActionText: string; - onPrimaryAction: MouseEventHandler; + primaryActionText?: string; + onPrimaryAction?: MouseEventHandler; + hasIcon?: boolean; + isSearchVariant?: boolean; secondaryActions?: Action[]; }; @@ -28,26 +31,34 @@ export const ListEmptyState = ({ message, instructions, onPrimaryAction, + hasIcon, + isSearchVariant, primaryActionText, secondaryActions, }: ListEmptyStateProps) => { return ( <> - + {hasIcon && isSearchVariant ? ( + + ) : ( + + )} {message} {instructions} - + {primaryActionText && ( + + )} {secondaryActions && ( {secondaryActions.map((action) => (