Merge pull request #326 from mfrances17/kerb-enable-actions

Add enable switch and action menu to kerberos settings

src/components/bread-crumb/__tests__/__snapshots__/PageBreadCrumbs.test.tsx.snap

@@ -21,6 +21,63 @@ exports[`BreadCrumbs tests couple of crumbs 1`] = `
           <li
             className="pf-c-breadcrumb__item"
           >
+            <Link
+              to="/master"
+            >
+              <LinkAnchor
+                href="/master"
+                navigate={[Function]}
+              >
+                <a
+                  href="/master"
+                  onClick={[Function]}
+                >
+                  <span
+                    key="/master"
+                  >
+                    Home
+                  </span>
+                </a>
+              </LinkAnchor>
+            </Link>
+          </li>
+        </BreadcrumbItem>
+        <BreadcrumbItem
+          isActive={false}
+          key=".$1"
+          showDivider={true}
+        >
+          <li
+            className="pf-c-breadcrumb__item"
+          >
+            <span
+              className="pf-c-breadcrumb__item-divider"
+            >
+              <AngleRightIcon
+                color="currentColor"
+                noVerticalAlign={false}
+                size="sm"
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  />
+                </svg>
+              </AngleRightIcon>
+            </span>
             <Link
               to="/master/clients"
             >
@@ -44,7 +101,7 @@ exports[`BreadCrumbs tests couple of crumbs 1`] = `
         </BreadcrumbItem>
         <BreadcrumbItem
           isActive={true}
-          key=".$1"
+          key=".$2"
           showDivider={true}
         >
           <li

src/route-config.ts

@@ -142,15 +142,6 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: t("users:title"),
     access: "query-users",
   },
-  {
-    path: "/:realm/groups",
-    component: GroupsSection,
-    breadcrumb: null,
-    matchOptions: {
-      exact: false,
-    },
-    access: "query-groups",
-  },
   {
     path: "/:realm/sessions",
     component: SessionsSection,
@@ -235,4 +226,13 @@ export const routes: RoutesFn = (t: TFunction) => [
     breadcrumb: null,
     access: "anyone",
   },
+  {
+    path: "/:realm/groups",
+    component: GroupsSection,
+    breadcrumb: null,
+    matchOptions: {
+      exact: false,
+    },
+    access: "query-groups",
+  },
 ];

src/user-federation/UserFederationKerberosSettings.tsx

@@ -1,23 +1,71 @@
+import React, { useEffect } from "react";
 import {
   ActionGroup,
   AlertVariant,
   Button,
+  ButtonVariant,
+  DropdownItem,
   Form,
   PageSection,
 } from "@patternfly/react-core";
-import { useTranslation } from "react-i18next";
-import React, { useEffect } from "react";
 
 import { KerberosSettingsRequired } from "./kerberos/KerberosSettingsRequired";
 import { KerberosSettingsCache } from "./kerberos/KerberosSettingsCache";
-import { useHistory } from "react-router-dom";
 import { useRealm } from "../context/realm-context/RealmContext";
-import { useParams } from "react-router-dom";
 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";
+
+type KerberosSettingsHeaderProps = {
+  onChange: (...event: any[]) => void;
+  value: any;
+  toggleDeleteDialog: () => void;
+};
+
+const KerberosSettingsHeader = ({
+  onChange,
+  value,
+  toggleDeleteDialog,
+}: KerberosSettingsHeaderProps) => {
+  const { t } = useTranslation("user-federation");
+  const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
+    titleKey: "user-federation:userFedDisableConfirmTitle",
+    messageKey: "user-federation:userFedDisableConfirm",
+    continueButtonLabel: "common:disable",
+    onConfirm: () => {
+      onChange(!value);
+    },
+  });
+  return (
+    <>
+      <DisableConfirm />
+      <ViewHeader
+        titleKey="Kerberos"
+        subKey=""
+        dropdownItems={[
+          <DropdownItem key="delete" onClick={() => toggleDeleteDialog()}>
+            {t("deleteProvider")}
+          </DropdownItem>,
+        ]}
+        isEnabled={value === "true"}
+        onToggle={(value) => {
+          if (!value) {
+            toggleDisableDialog();
+          } else {
+            onChange("" + value);
+          }
+        }}
+      />
+    </>
+  );
+};
 
 export const UserFederationKerberosSettings = () => {
   const { t } = useTranslation("user-federation");
@@ -62,8 +110,37 @@ export const UserFederationKerberosSettings = () => {
     }
   };
 
+  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 />
+      <Controller
+        name="config.enabled[0]"
+        defaultValue={["true"]}
+        control={form.control}
+        render={({ onChange, value }) => (
+          <KerberosSettingsHeader
+            value={value}
+            onChange={(value) => onChange("" + value)}
+            toggleDeleteDialog={toggleDeleteDialog}
+          />
+        )}
+      />
       <PageSection variant="light">
         <KerberosSettingsRequired form={form} showSectionHeading />
       </PageSection>

src/user-federation/messages.json

@@ -89,6 +89,8 @@
     "userFedDeleteError": "Could not delete user federation provider: '{{error}}'",
     "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.",
 
     "validateName": "You must enter a name",
     "validateRealm":"You must enter a realm",