Do not nest components in UserCredentials (#27775)

Signed-off-by: Jon Koops <jonkoops@gmail.com>

js/apps/admin-ui/src/user/UserCredentials.tsx

@@ -53,6 +53,56 @@ type ExpandableCredentialRepresentation = {
   isExpanded: boolean;
 };
 
+type UserLabelEdit = {
+  status: boolean;
+  rowKey: string;
+};
+
+type UserCredentialsRowProps = {
+  credential: CredentialRepresentation;
+  userId: string;
+  toggleDelete: (credential: CredentialRepresentation) => void;
+  resetPassword: () => void;
+  isUserLabelEdit?: UserLabelEdit;
+  setIsUserLabelEdit: (isUserLabelEdit: UserLabelEdit) => void;
+  refresh: () => void;
+};
+
+const UserCredentialsRow = ({
+  credential,
+  userId,
+  toggleDelete,
+  resetPassword,
+  isUserLabelEdit,
+  setIsUserLabelEdit,
+  refresh,
+}: UserCredentialsRowProps) => (
+  <CredentialRow
+    key={credential.id}
+    credential={credential}
+    toggleDelete={() => toggleDelete(credential)}
+    resetPassword={resetPassword}
+  >
+    <InlineLabelEdit
+      credential={credential}
+      userId={userId}
+      isEditable={
+        (isUserLabelEdit?.status && isUserLabelEdit.rowKey === credential.id) ||
+        false
+      }
+      toggle={() => {
+        setIsUserLabelEdit({
+          status: !isUserLabelEdit?.status,
+          rowKey: credential.id!,
+        });
+        if (isUserLabelEdit?.status) {
+          refresh();
+        }
+      }}
+    />
+  </CredentialRow>
+);
+
 export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
   const { t } = useTranslation();
   const { addAlert, addError } = useAlerts();
@@ -69,10 +119,7 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
   const [selectedCredential, setSelectedCredential] =
     useState<CredentialRepresentation>({});
   const [isResetPassword, setIsResetPassword] = useState(false);
-  const [isUserLabelEdit, setIsUserLabelEdit] = useState<{
+  const [isUserLabelEdit, setIsUserLabelEdit] = useState<UserLabelEdit>();
-    status: boolean;
-    rowKey: string;
-  }>();
 
   const bodyRef = useRef<HTMLTableSectionElement>(null);
   const [state, setState] = useState({
@@ -141,37 +188,6 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
     },
   });
 
-  const Row = ({ credential }: { credential: CredentialRepresentation }) => (
-    <CredentialRow
-      key={credential.id}
-      credential={credential}
-      toggleDelete={() => {
-        setSelectedCredential(credential);
-        toggleDeleteDialog();
-      }}
-      resetPassword={resetPassword}
-    >
-      <InlineLabelEdit
-        credential={credential}
-        userId={user.id!}
-        isEditable={
-          (isUserLabelEdit?.status &&
-            isUserLabelEdit.rowKey === credential.id) ||
-          false
-        }
-        toggle={() => {
-          setIsUserLabelEdit({
-            status: !isUserLabelEdit?.status,
-            rowKey: credential.id!,
-          });
-          if (isUserLabelEdit?.status) {
-            refresh();
-          }
-        }}
-      />
-    </CredentialRow>
-  );
-
   const itemOrder = useMemo(
     () =>
       groupedUserCredentials.flatMap((groupedCredential) => [
@@ -339,6 +355,11 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
     }
   };
 
+  const onToggleDelete = (credential: CredentialRepresentation) => {
+    setSelectedCredential(credential);
+    toggleDeleteDialog();
+  };
+
   const useFederatedCredentials = user.federationLink || user.origin;
   const [credentialTypes, setCredentialTypes] = useState<string[]>([]);
 
@@ -480,7 +501,16 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
                     </Td>
                     {groupedCredential.value.length <= 1 &&
                       groupedCredential.value.map((credential) => (
-                        <Row key={credential.id} credential={credential} />
+                        <UserCredentialsRow
+                          key={credential.id}
+                          credential={credential}
+                          userId={user.id!}
+                          toggleDelete={onToggleDelete}
+                          resetPassword={resetPassword}
+                          isUserLabelEdit={isUserLabelEdit}
+                          setIsUserLabelEdit={setIsUserLabelEdit}
+                          refresh={refresh}
+                        />
                       ))}
                   </Tr>
                   {groupedCredential.isExpanded &&
@@ -508,7 +538,15 @@ export const UserCredentials = ({ user, setUser }: UserCredentialsProps) => {
                         >
                           {toUpperCase(credential.type!)}
                         </Td>
-                        <Row credential={credential} />
+                        <UserCredentialsRow
+                          credential={credential}
+                          userId={user.id!}
+                          toggleDelete={onToggleDelete}
+                          resetPassword={resetPassword}
+                          isUserLabelEdit={isUserLabelEdit}
+                          setIsUserLabelEdit={setIsUserLabelEdit}
+                          refresh={refresh}
+                        />
                       </Tr>
                     ))}
                 </Fragment>