Add credential table (#3710)

2022-11-07 15:02:53 -05:00 · 2022-11-07 15:02:53 -05:00 · 2ae520fb8a
commit 2ae520fb8a
parent 25c66e6901
7 changed files with 157 additions and 102 deletions
--- a/apps/admin-ui/package.json
+++ b/apps/admin-ui/package.json
@ -46,7 +46,7 @@
    }
  },
  "dependencies": {
-    "@keycloak/keycloak-admin-client": "^19.0.3",
+    "@keycloak/keycloak-admin-client": "^21.0.0-dev.3",
    "@patternfly/patternfly": "^4.219.2",
    "@patternfly/react-code-editor": "^4.82.55",
    "@patternfly/react-core": "^4.258.3",
--- a/apps/admin-ui/public/resources/en/users.json
+++ b/apps/admin-ui/public/resources/en/users.json
@ -150,6 +150,7 @@
  "type": "Type",
  "userLabel": "User label",
  "data": "Data",
+  "providedBy": "Provided by",
  "passwordDataTitle": "Password data",
  "updateCredentialUserLabelSuccess": "The user label has been changed successfully.",
  "updateCredentialUserLabelError": "Error changing user label: {{error}}",
--- a/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx
+++ b/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx
@ -94,6 +94,10 @@ export const ResourcesPolicySelect = ({
        ])
      )
        .flat()
+        .filter(
+          (r): r is PolicyRepresentation | ResourceRepresentation =>
+            typeof r !== "string"
+        )
        .map(convert)
        .filter(
          ({ id }, index, self) =>
--- a/apps/admin-ui/src/realm-settings/NewAttributeSettings.tsx
+++ b/apps/admin-ui/src/realm-settings/NewAttributeSettings.tsx
@ -134,24 +134,13 @@ export default function NewAttributeSettings() {
        flatten<any, any>({ permissions, selector, required }, { safe: true })
      ).map(([key, value]) => form.setValue(key, value));
      form.setValue("annotations", convert(annotations));
-      form.setValue("validations", convert(validations));
+      form.setValue("validations", validations);
      form.setValue("isRequired", required !== undefined);
    },
    []
  );

  const save = async (profileConfig: UserProfileAttributeType) => {
-    const validations = profileConfig.validations?.reduce(
-      (prevValidations: any, currentValidations: any) => {
-        prevValidations[currentValidations.key] =
-          currentValidations.value?.length === 0
-            ? {}
-            : currentValidations.value;
-        return prevValidations;
-      },
-      {}
-    );
-
    const annotations = (profileConfig.annotations! as KeyValueType[]).reduce(
      (obj, item) => Object.assign(obj, { [item.key]: item.value }),
      {}
@ -169,7 +158,6 @@ export default function NewAttributeSettings() {
            ...attribute,
            name: attributeName,
            displayName: profileConfig.displayName!,
-            validations,
            selector: profileConfig.selector,
            permissions: profileConfig.permissions!,
            annotations,
@ -188,7 +176,6 @@ export default function NewAttributeSettings() {
            name: profileConfig.name,
            displayName: profileConfig.displayName!,
            required: profileConfig.isRequired ? profileConfig.required : {},
-            validations,
            selector: profileConfig.selector,
            permissions: profileConfig.permissions!,
            annotations,
--- a/apps/admin-ui/src/user/UserCredentials.tsx
+++ b/apps/admin-ui/src/user/UserCredentials.tsx
@ -37,6 +37,7 @@ import { CredentialRow } from "./user-credentials/CredentialRow";
 import { toUpperCase } from "../util";

 import "./user-credentials.css";
+import { FederatedCredentials } from "./user-credentials/FederatedCredentials";

 type UserCredentialsProps = {
  user: UserRepresentation;
@ -361,7 +362,7 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
          <Divider />
        </>
      )}
-      {groupedUserCredentials.length !== 0 ? (
+      {groupedUserCredentials.length !== 0 && (
        <>
          {user.email && (
            <Button
@ -374,10 +375,7 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
            </Button>
          )}
          <PageSection variant={PageSectionVariants.light}>
-            <TableComposable
-              aria-label="userCredentials-table"
-              variant={"compact"}
-            >
+            <TableComposable variant={"compact"}>
              <Thead>
                <Tr className="kc-table-header">
                  <Th>
@ -490,26 +488,31 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
            </TableComposable>
          </PageSection>
        </>
-      ) : (
-        <ListEmptyState
-          hasIcon={true}
-          message={t("noCredentials")}
-          instructions={t("noCredentialsText")}
-          primaryActionText={t("setPassword")}
-          onPrimaryAction={toggleModal}
-          secondaryActions={
-            user.email
-              ? [
-                  {
-                    text: t("credentialResetBtn"),
-                    onClick: toggleCredentialsResetModal,
-                    type: ButtonVariant.link,
-                  },
-                ]
-              : undefined
-          }
-        />
      )}
+      {(user.federationLink || user.origin) && (
+        <FederatedCredentials user={user} onSetPassword={toggleModal} />
+      )}
+      {groupedUserCredentials.length === 0 &&
+        !(user.federationLink || user.origin) && (
+          <ListEmptyState
+            hasIcon
+            message={t("noCredentials")}
+            instructions={t("noCredentialsText")}
+            primaryActionText={t("setPassword")}
+            onPrimaryAction={toggleModal}
+            secondaryActions={
+              user.email
+                ? [
+                    {
+                      text: t("credentialResetBtn"),
+                      onClick: toggleCredentialsResetModal,
+                      type: ButtonVariant.link,
+                    },
+                  ]
+                : undefined
+            }
+          />
+        )}
    </>
  );
 };
--- a/apps/admin-ui/src/user/user-credentials/FederatedCredentials.tsx
+++ b/apps/admin-ui/src/user/user-credentials/FederatedCredentials.tsx
@ -0,0 +1,112 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Button,
+  PageSection,
+  PageSectionVariants,
+} from "@patternfly/react-core";
+import {
+  TableComposable,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@patternfly/react-table";
+
+import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
+import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
+import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
+import { useAccess } from "../../context/access/Access";
+import { toUserFederationLdap } from "../../user-federation/routes/UserFederationLdap";
+import { useRealm } from "../../context/realm-context/RealmContext";
+import { Link } from "react-router-dom";
+
+type FederatedCredentialsProps = {
+  user: UserRepresentation;
+  onSetPassword: () => void;
+};
+
+export const FederatedCredentials = ({
+  user,
+  onSetPassword,
+}: FederatedCredentialsProps) => {
+  const { t } = useTranslation("users");
+  const { adminClient } = useAdminClient();
+  const { realm } = useRealm();
+
+  const [credentialTypes, setCredentialTypes] = useState<string[]>();
+  const [component, setComponent] = useState<ComponentRepresentation>();
+  const access = useAccess();
+
+  useFetch(
+    () =>
+      Promise.all([
+        adminClient.users.getUserStorageCredentialTypes({ id: user.id! }),
+        access.hasAccess("view-realm")
+          ? adminClient.components.findOne({
+              id: (user.federationLink || user.origin)!,
+            })
+          : adminClient.userStorageProvider.name({
+              id: (user.federationLink || user.origin)!,
+            }),
+      ]),
+    ([credentialTypes, component]) => {
+      setCredentialTypes(credentialTypes);
+      setComponent(component);
+    },
+    []
+  );
+
+  if (!credentialTypes || !component) {
+    return <KeycloakSpinner />;
+  }
+
+  return (
+    <PageSection variant={PageSectionVariants.light}>
+      <TableComposable variant={"compact"}>
+        <Thead>
+          <Tr>
+            <Th>{t("type")}</Th>
+            <Th>{t("providedBy")}</Th>
+            <Th />
+          </Tr>
+        </Thead>
+        <Tbody>
+          {credentialTypes.map((credential) => (
+            <Tr key={credential}>
+              <Td>
+                <b>{credential}</b>
+              </Td>
+              <Td>
+                <Button
+                  variant="link"
+                  isDisabled={!access.hasAccess("view-realm")}
+                  component={(props) => (
+                    <Link
+                      {...props}
+                      to={toUserFederationLdap({
+                        id: component.id!,
+                        realm,
+                      })}
+                    />
+                  )}
+                >
+                  {component.name}
+                </Button>
+              </Td>
+              {credential === "password" && (
+                <Td modifier="fitContent">
+                  <Button variant="secondary" onClick={onSetPassword}>
+                    {t("setPassword")}
+                  </Button>
+                </Td>
+              )}
+            </Tr>
+          ))}
+        </Tbody>
+      </TableComposable>
+    </PageSection>
+  );
+};
--- a/package-lock.json
+++ b/package-lock.json
@ -140,7 +140,7 @@
    },
    "apps/admin-ui": {
      "dependencies": {
-        "@keycloak/keycloak-admin-client": "^19.0.3",
+        "@keycloak/keycloak-admin-client": "^21.0.0-dev.3",
        "@patternfly/patternfly": "^4.219.2",
        "@patternfly/react-code-editor": "^4.82.55",
        "@patternfly/react-core": "^4.258.3",
@ -2953,13 +2953,13 @@
      }
    },
    "node_modules/@keycloak/keycloak-admin-client": {
-      "version": "19.0.3",
-      "license": "Apache-2.0",
+      "version": "21.0.0-dev.3",
+      "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-21.0.0-dev.3.tgz",
+      "integrity": "sha512-wFvxZXrVGiHgd3OCab4YWAwcinykPYhuNlO8BokyP6XClKKL5qCQgNm+iWxgDB/njUdY3ovqDBTnY9KUKI3qWA==",
      "dependencies": {
        "axios": "^0.27.2",
        "camelize-ts": "^2.1.1",
        "lodash-es": "^4.17.21",
-        "query-string": "^7.0.1",
        "url-join": "^5.0.0",
        "url-template": "^3.0.0"
      },
@ -6822,6 +6822,7 @@
    },
    "node_modules/decode-uri-component": {
      "version": "0.2.0",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10"
@ -8354,13 +8355,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/filter-obj": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/find-cache-dir": {
      "version": "3.3.2",
      "dev": true,
@ -11726,22 +11720,6 @@
        "node": ">=0.6"
      }
    },
-    "node_modules/query-string": {
-      "version": "7.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/querystring": {
      "version": "0.2.0",
      "dev": true,
@ -12856,13 +12834,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/split-on-first": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/split-string": {
      "version": "3.1.0",
      "dev": true,
@ -13054,13 +13025,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/strict-uri-encode": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/string_decoder": {
      "version": "1.1.1",
      "dev": true,
@ -16898,12 +16862,13 @@
      }
    },
    "@keycloak/keycloak-admin-client": {
-      "version": "19.0.3",
+      "version": "21.0.0-dev.3",
+      "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-21.0.0-dev.3.tgz",
+      "integrity": "sha512-wFvxZXrVGiHgd3OCab4YWAwcinykPYhuNlO8BokyP6XClKKL5qCQgNm+iWxgDB/njUdY3ovqDBTnY9KUKI3qWA==",
      "requires": {
        "axios": "^0.27.2",
        "camelize-ts": "^2.1.1",
        "lodash-es": "^4.17.21",
-        "query-string": "^7.0.1",
        "url-join": "^5.0.0",
        "url-template": "^3.0.0"
      }
@ -18311,7 +18276,7 @@
        "@babel/preset-env": "^7.19.4",
        "@cypress/webpack-batteries-included-preprocessor": "^2.2.3",
        "@cypress/webpack-preprocessor": "^5.15.3",
-        "@keycloak/keycloak-admin-client": "^19.0.3",
+        "@keycloak/keycloak-admin-client": "^21.0.0-dev.3",
        "@octokit/rest": "^19.0.5",
        "@patternfly/patternfly": "^4.219.2",
        "@patternfly/react-code-editor": "^4.82.55",
@ -19725,7 +19690,8 @@
      "dev": true
    },
    "decode-uri-component": {
-      "version": "0.2.0"
+      "version": "0.2.0",
+      "dev": true
    },
    "decompress": {
      "version": "4.2.1",
@ -20742,9 +20708,6 @@
        "to-regex-range": "^5.0.1"
      }
    },
-    "filter-obj": {
-      "version": "1.1.0"
-    },
    "find-cache-dir": {
      "version": "3.3.2",
      "dev": true,
@ -22943,15 +22906,6 @@
      "version": "6.5.3",
      "dev": true
    },
-    "query-string": {
-      "version": "7.1.1",
-      "requires": {
-        "decode-uri-component": "^0.2.0",
-        "filter-obj": "^1.1.0",
-        "split-on-first": "^1.0.0",
-        "strict-uri-encode": "^2.0.0"
-      }
-    },
    "querystring": {
      "version": "0.2.0",
      "dev": true
@ -23686,9 +23640,6 @@
      "version": "1.4.8",
      "dev": true
    },
-    "split-on-first": {
-      "version": "1.1.0"
-    },
    "split-string": {
      "version": "3.1.0",
      "dev": true,
@ -23830,9 +23781,6 @@
      "version": "1.0.1",
      "dev": true
    },
-    "strict-uri-encode": {
-      "version": "2.0.0"
-    },
    "string_decoder": {
      "version": "1.1.1",
      "dev": true,