From 32a3ff150b46dad56cc27ceb10a77c4bbff5f99b Mon Sep 17 00:00:00 2001 From: mfrances17 <39063664+mfrances17@users.noreply.github.com> Date: Mon, 8 Feb 2021 15:50:03 -0500 Subject: [PATCH] Add enable switch and action menu to LDAP settings (#349) * add messages from sarah * enable and delete working * localize strings * changes from PR * enable now saves --- src/clients/ClientDetails.tsx | 4 +- src/realm-settings/RealmSettingsSection.tsx | 2 +- .../UserFederationKerberosSettings.tsx | 13 +- .../UserFederationLdapSettings.tsx | 138 +++++++++++++++++- src/user-federation/messages.json | 7 +- 5 files changed, 149 insertions(+), 15 deletions(-) diff --git a/src/clients/ClientDetails.tsx b/src/clients/ClientDetails.tsx index 4d145de82f..98b69853b3 100644 --- a/src/clients/ClientDetails.tsx +++ b/src/clients/ClientDetails.tsx @@ -36,8 +36,8 @@ import { ServiceAccount } from "./service-account/ServiceAccount"; import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs"; type ClientDetailHeaderProps = { - onChange: (...event: any[]) => void; - value: any; + onChange: (value: boolean) => void; + value: boolean; save: () => void; client: ClientRepresentation; toggleDownloadDialog: () => void; diff --git a/src/realm-settings/RealmSettingsSection.tsx b/src/realm-settings/RealmSettingsSection.tsx index 2c243df80b..6125a57c88 100644 --- a/src/realm-settings/RealmSettingsSection.tsx +++ b/src/realm-settings/RealmSettingsSection.tsx @@ -36,7 +36,7 @@ import { HelpItem } from "../components/help-enabler/HelpItem"; import { FormattedLink } from "../components/external-link/FormattedLink"; type RealmSettingsHeaderProps = { - onChange: (...event: any[]) => void; + onChange: (value: boolean) => void; value: boolean; save: () => void; realmName: string; diff --git a/src/user-federation/UserFederationKerberosSettings.tsx b/src/user-federation/UserFederationKerberosSettings.tsx index 6a1a99abe3..30c0f70bb1 100644 --- a/src/user-federation/UserFederationKerberosSettings.tsx +++ b/src/user-federation/UserFederationKerberosSettings.tsx @@ -24,14 +24,16 @@ import { ViewHeader } from "../components/view-header/ViewHeader"; import { useHistory, useParams } from "react-router-dom"; type KerberosSettingsHeaderProps = { - onChange: (...event: any[]) => void; - value: any; + onChange: (value: string) => void; + value: string; + save: () => void; toggleDeleteDialog: () => void; }; const KerberosSettingsHeader = ({ onChange, value, + save, toggleDeleteDialog, }: KerberosSettingsHeaderProps) => { const { t } = useTranslation("user-federation"); @@ -40,7 +42,8 @@ const KerberosSettingsHeader = ({ messageKey: "user-federation:userFedDisableConfirm", continueButtonLabel: "common:disable", onConfirm: () => { - onChange(!value); + onChange("false"); + save(); }, }); return ( @@ -60,6 +63,7 @@ const KerberosSettingsHeader = ({ toggleDisableDialog(); } else { onChange("" + value); + save(); } }} /> @@ -136,7 +140,8 @@ export const UserFederationKerberosSettings = () => { render={({ onChange, value }) => ( onChange("" + value)} + onChange={onChange} + save={() => save(form.getValues())} toggleDeleteDialog={toggleDeleteDialog} /> )} diff --git a/src/user-federation/UserFederationLdapSettings.tsx b/src/user-federation/UserFederationLdapSettings.tsx index a6d4e2b369..6444372f71 100644 --- a/src/user-federation/UserFederationLdapSettings.tsx +++ b/src/user-federation/UserFederationLdapSettings.tsx @@ -1,12 +1,14 @@ +import React, { useEffect } from "react"; import { ActionGroup, AlertVariant, Button, + ButtonVariant, + DropdownItem, + DropdownSeparator, Form, PageSection, } from "@patternfly/react-core"; -import { useTranslation } from "react-i18next"; -import React, { useEffect } from "react"; import { LdapSettingsAdvanced } from "./ldap/LdapSettingsAdvanced"; import { LdapSettingsKerberosIntegration } from "./ldap/LdapSettingsKerberosIntegration"; @@ -15,16 +17,91 @@ import { LdapSettingsSynchronization } from "./ldap/LdapSettingsSynchronization" import { LdapSettingsGeneral } from "./ldap/LdapSettingsGeneral"; import { LdapSettingsConnection } from "./ldap/LdapSettingsConnection"; import { LdapSettingsSearching } from "./ldap/LdapSettingsSearching"; -import { ScrollForm } from "../components/scroll-form/ScrollForm"; -import { useHistory, useParams } from "react-router-dom"; import { useRealm } from "../context/realm-context/RealmContext"; import { convertToFormValues } from "../util"; -import { useAlerts } from "../components/alert/Alerts"; -import { useAdminClient } from "../context/auth/AdminClient"; import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation"; -import { useForm } from "react-hook-form"; +import { Controller, useForm } from "react-hook-form"; +import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog"; +import { useAdminClient } from "../context/auth/AdminClient"; +import { useAlerts } from "../components/alert/Alerts"; +import { useTranslation } from "react-i18next"; +import { ViewHeader } from "../components/view-header/ViewHeader"; +import { useHistory, useParams } from "react-router-dom"; +import { ScrollForm } from "../components/scroll-form/ScrollForm"; + +type LdapSettingsHeaderProps = { + onChange: (value: string) => void; + value: string; + save: () => void; + toggleDeleteDialog: () => void; + toggleRemoveUsersDialog: () => void; +}; + +const LdapSettingsHeader = ({ + onChange, + value, + save, + toggleDeleteDialog, + toggleRemoveUsersDialog, +}: LdapSettingsHeaderProps) => { + const { t } = useTranslation("user-federation"); + const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({ + titleKey: "user-federation:userFedDisableConfirmTitle", + messageKey: "user-federation:userFedDisableConfirm", + continueButtonLabel: "common:disable", + onConfirm: () => { + onChange("false"); + save(); + }, + }); + return ( + <> + + console.log("Sync users TBD")} + > + {t("syncChangedUsers")} + , + console.log("Sync all users TBD")} + > + {t("syncAllUsers")} + , + console.log("Unlink users TBD")} + > + {t("unlinkUsers")} + , + toggleRemoveUsersDialog()}> + {t("removeImported")} + , + , + toggleDeleteDialog()}> + {t("deleteProvider")} + , + ]} + isEnabled={value === "true"} + onToggle={(value) => { + if (!value) { + toggleDisableDialog(); + } else { + onChange("" + value); + save(); + } + }} + /> + + ); +}; export const UserFederationLdapSettings = () => { const { t } = useTranslation("user-federation"); @@ -65,8 +142,55 @@ export const UserFederationLdapSettings = () => { } }; + const [toggleRemoveUsersDialog, RemoveUsersConfirm] = useConfirmDialog({ + titleKey: t("removeImportedUsers"), + messageKey: t("removeImportedUsersMessage"), + continueButtonLabel: "common:remove", + onConfirm: async () => { + try { + console.log("Remove imported TBD"); + // TODO await remove imported users command + addAlert(t("removeImportedUsersSuccess"), AlertVariant.success); + } catch (error) { + addAlert(t("removeImportedUsersError", { error }), AlertVariant.danger); + } + }, + }); + + const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({ + titleKey: "user-federation:userFedDeleteConfirmTitle", + messageKey: "user-federation:userFedDeleteConfirm", + continueButtonLabel: "common:delete", + continueButtonVariant: ButtonVariant.danger, + onConfirm: async () => { + try { + await adminClient.components.del({ id }); + addAlert(t("userFedDeletedSuccess"), AlertVariant.success); + history.replace(`/${realm}/user-federation`); + } catch (error) { + addAlert(`${t("userFedDeleteError")} ${error}`, AlertVariant.danger); + } + }, + }); + return ( <> + + + ( + save(form.getValues())} + onChange={onChange} + toggleDeleteDialog={toggleDeleteDialog} + toggleRemoveUsersDialog={toggleRemoveUsersDialog} + /> + )} + />