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

@@ -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;

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;

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 }) => (
           <KerberosSettingsHeader
             value={value}
-            onChange={(value) => onChange("" + value)}
+            onChange={onChange}
+            save={() => save(form.getValues())}
             toggleDeleteDialog={toggleDeleteDialog}
           />
         )}

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 (
+    <>
+      <DisableConfirm />
+      <ViewHeader
+        titleKey="LDAP"
+        subKey=""
+        dropdownItems={[
+          <DropdownItem
+            key="sync"
+            onClick={() => console.log("Sync users TBD")}
+          >
+            {t("syncChangedUsers")}
+          </DropdownItem>,
+          <DropdownItem
+            key="syncall"
+            onClick={() => console.log("Sync all users TBD")}
+          >
+            {t("syncAllUsers")}
+          </DropdownItem>,
+          <DropdownItem
+            key="unlink"
+            onClick={() => console.log("Unlink users TBD")}
+          >
+            {t("unlinkUsers")}
+          </DropdownItem>,
+          <DropdownItem key="remove" onClick={() => toggleRemoveUsersDialog()}>
+            {t("removeImported")}
+          </DropdownItem>,
+          <DropdownSeparator key="separator" />,
+          <DropdownItem key="delete" onClick={() => toggleDeleteDialog()}>
+            {t("deleteProvider")}
+          </DropdownItem>,
+        ]}
+        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 (
     <>
+      <DeleteConfirm />
+      <RemoveUsersConfirm />
+      <Controller
+        name="config.enabled[0]"
+        defaultValue={["true"]}
+        control={form.control}
+        render={({ onChange, value }) => (
+          <LdapSettingsHeader
+            value={value}
+            save={() => save(form.getValues())}
+            onChange={onChange}
+            toggleDeleteDialog={toggleDeleteDialog}
+            toggleRemoveUsersDialog={toggleRemoveUsersDialog}
+          />
+        )}
+      />
       <PageSection variant="light" isFilled>
         <ScrollForm
           sections={[

src/user-federation/messages.json

@@ -90,7 +90,12 @@
     "userFedDeleteConfirmTitle": "Delete user federation provider?",
     "userFedDeleteConfirm": "If you delete this user federation provider, all associated data will be removed.",
     "userFedDisableConfirmTitle": "Disable user federation provider?",
-    "userFedDisableConfirm": "If you disable this user federation provider, you cannot make changes to the provider.",
+    "userFedDisableConfirm": "If you disable this user federation provider, it will not be considered for queries and imported users will be disabled and read-only until the provider is enabled again.",
+
+    "removeImportedUsers": "Remove imported users?",
+    "removeImportedUsersMessage": "Do you really want to remove all imported users? The option \"Unlink users\" makes sense just for the Edit Mode \"Unsynced\" and there should be a warning that \"unlinked\" users without the password in the Keycloak database won't be able to authenticate.",
+    "removeImportedUsersSuccess": "Imported users have been removed",
+    "removeImportedUsersError": "Could not remove imported users: '{{error}}'",
 
     "validateName": "You must enter a name",
     "validateRealm":"You must enter a realm",