From 51b0eec6859cd2dd1aafdb9add1113ed5fe50147 Mon Sep 17 00:00:00 2001
From: Stan Silvert <ssilvert@redhat.com>
Date: Tue, 2 May 2023 17:09:44 -0400
Subject: [PATCH] Fix custom userFed that doesn't implement
 CredentialInputUpdater (#20062)

* Fix custom userFed that doesn't implement CredentialInputUpdater
Fixes #19491

* Cleanup from Jon's review

* Specify dependency

* Revert "Specify dependency"

This reverts commit a52d5d993aa1f9cf4503e6101eb49c20b27b38fc.
---
 js/apps/admin-ui/src/user/UserCredentials.tsx | 101 +++++++++++++-----
 .../user-credentials/FederatedCredentials.tsx |  78 --------------
 2 files changed, 75 insertions(+), 104 deletions(-)
 delete mode 100644 js/apps/admin-ui/src/user/user-credentials/FederatedCredentials.tsx

diff --git a/js/apps/admin-ui/src/user/UserCredentials.tsx b/js/apps/admin-ui/src/user/UserCredentials.tsx
index 2ed8535b30..eee6284060 100644
--- a/js/apps/admin-ui/src/user/UserCredentials.tsx
+++ b/js/apps/admin-ui/src/user/UserCredentials.tsx
@@ -35,9 +35,10 @@ import { InlineLabelEdit } from "./user-credentials/InlineLabelEdit";
 import styles from "@patternfly/react-styles/css/components/Table/table";
 import { CredentialRow } from "./user-credentials/CredentialRow";
 import { toUpperCase } from "../util";
+import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
+import { FederatedUserLink } from "./FederatedUserLink";
 
 import "./user-credentials.css";
-import { FederatedCredentials } from "./user-credentials/FederatedCredentials";
 
 type UserCredentialsProps = {
   user: UserRepresentation;
@@ -329,6 +330,26 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
     }
   };
 
+  const useFederatedCredentials = user.federationLink || user.origin;
+  const [credentialTypes, setCredentialTypes] = useState<string[]>([]);
+
+  useFetch(
+    () => adminClient.users.getUserStorageCredentialTypes({ id: user.id! }),
+    setCredentialTypes,
+    []
+  );
+
+  if (!credentialTypes) {
+    return <KeycloakSpinner />;
+  }
+
+  const hasCredentialTypes = credentialTypes.length > 0;
+  const noCredentials = groupedUserCredentials.length === 0;
+  const noFederatedCredentials =
+    !user.credentials || user.credentials.length === 0;
+  const emptyState =
+    noCredentials && noFederatedCredentials && !hasCredentialTypes;
+
   return (
     <>
       {isOpen && (
@@ -346,7 +367,7 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
         />
       )}
       <DeleteConfirm />
-      {user.email && (
+      {user.email && !emptyState && (
         <Button
           className="kc-resetCredentialBtn-header"
           variant="primary"
@@ -372,7 +393,7 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
           <Divider />
         </>
       )}
-      {groupedUserCredentials.length !== 0 && (
+      {groupedUserCredentials.length !== 0 && !hasCredentialTypes && (
         <PageSection variant={PageSectionVariants.light}>
           <TableComposable variant={"compact"}>
             <Thead>
@@ -485,30 +506,58 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
           </TableComposable>
         </PageSection>
       )}
-      {(user.federationLink || user.origin) && (
-        <FederatedCredentials user={user} onSetPassword={toggleModal} />
+      {useFederatedCredentials && hasCredentialTypes && (
+        <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>
+                    <FederatedUserLink user={user} />
+                  </Td>
+                  {credential === "password" && (
+                    <Td modifier="fitContent">
+                      <Button variant="secondary" onClick={toggleModal}>
+                        {t("setPassword")}
+                      </Button>
+                    </Td>
+                  )}
+                </Tr>
+              ))}
+            </Tbody>
+          </TableComposable>
+        </PageSection>
+      )}
+      {emptyState && (
+        <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
+          }
+        />
       )}
-      {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
-            }
-          />
-        )}
     </>
   );
 };
diff --git a/js/apps/admin-ui/src/user/user-credentials/FederatedCredentials.tsx b/js/apps/admin-ui/src/user/user-credentials/FederatedCredentials.tsx
deleted file mode 100644
index fa99594e76..0000000000
--- a/js/apps/admin-ui/src/user/user-credentials/FederatedCredentials.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  Button,
-  PageSection,
-  PageSectionVariants,
-} from "@patternfly/react-core";
-import {
-  TableComposable,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@patternfly/react-table";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
-import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
-import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
-import { FederatedUserLink } from "../FederatedUserLink";
-
-type FederatedCredentialsProps = {
-  user: UserRepresentation;
-  onSetPassword: () => void;
-};
-
-export const FederatedCredentials = ({
-  user,
-  onSetPassword,
-}: FederatedCredentialsProps) => {
-  const { t } = useTranslation("users");
-  const { adminClient } = useAdminClient();
-
-  const [credentialTypes, setCredentialTypes] = useState<string[]>();
-
-  useFetch(
-    () => adminClient.users.getUserStorageCredentialTypes({ id: user.id! }),
-    setCredentialTypes,
-    []
-  );
-
-  if (!credentialTypes) {
-    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>
-                <FederatedUserLink user={user} />
-              </Td>
-              {credential === "password" && (
-                <Td modifier="fitContent">
-                  <Button variant="secondary" onClick={onSetPassword}>
-                    {t("setPassword")}
-                  </Button>
-                </Td>
-              )}
-            </Tr>
-          ))}
-        </Tbody>
-      </TableComposable>
-    </PageSection>
-  );
-};