Fixed small layout issue and set default label of password (#2286)

src/user/UserCredentials.tsx

@@ -24,11 +24,12 @@ import type CredentialRepresentation from "@keycloak/keycloak-admin-client/lib/d
 import { ResetPasswordDialog } from "./user-credentials/ResetPasswordDialog";
 import { ResetCredentialDialog } from "./user-credentials/ResetCredentialDialog";
 import { InlineLabelEdit } from "./user-credentials/InlineLabelEdit";
-import "./user-credentials.css";
 import styles from "@patternfly/react-styles/css/components/Table/table";
 import { CredentialRow } from "./user-credentials/CredentialRow";
 import { toUpperCase } from "../util";
 
+import "./user-credentials.css";
+
 type UserCredentialsProps = {
   user: UserRepresentation;
 };
@@ -394,12 +395,15 @@ export const UserCredentials = ({ user }: UserCredentialsProps) => {
                 <Fragment key={groupedCredential.key}>
                   <Tr
                     id={groupedCredential.value.map(({ id }) => id).toString()}
-                    draggable
+                    draggable={groupedUserCredentials.length > 1}
                     onDrop={onDrop}
                     onDragEnd={onDragEnd}
                     onDragStart={onDragStart}
                   >
                     <Td
+                      className={
+                        groupedUserCredentials.length === 1 ? "one-row" : ""
+                      }
                       draggableRow={{
                         id: `draggable-row-${groupedCredential.value.map(
                           ({ id }) => id

src/user/messages.ts

@@ -124,6 +124,7 @@ export default {
       "This user does not have any credentials. You can set password for this user.",
     setPassword: "Set password",
     setPasswordFor: "Set password for {{username}}",
+    defaultPasswordLabel: "My password",
     save: "Save",
     cancel: "Cancel",
     savePasswordSuccess: "The password has been set successfully.",

src/user/user-credentials.css

@@ -75,4 +75,8 @@
 
 tr.kc-table-header th {
   padding-top: 0px !important;
+}
+
+td.one-row button svg {
+  color: var(--pf-c-button--disabled--Color);
 }

src/user/user-credentials/CredentialRow.tsx

@@ -77,7 +77,7 @@ export const CredentialRow = ({
         </Button>
       </Td>
       {credential.type === "password" ? (
-        <Td>
+        <Td isActionCell>
           <Button
             variant="secondary"
             data-testid="resetPasswordBtn"
@@ -89,7 +89,7 @@ export const CredentialRow = ({
       ) : (
         <Td />
       )}
-      <Td>
+      <Td isActionCell>
         <Dropdown
           isPlain
           position={DropdownPosition.right}

src/user/user-credentials/InlineLabelEdit.tsx

@@ -54,7 +54,11 @@ export const InlineLabelEdit = ({
   };
 
   return (
-    <Form isHorizontal className="kc-form-userLabel">
+    <Form
+      isHorizontal
+      className="kc-form-userLabel"
+      onSubmit={handleSubmit(saveUserLabel)}
+    >
       <FormGroup fieldId="kc-userLabel" className="kc-userLabel-row">
         <div className="kc-form-group-userLabel">
           {isEditable ? (
@@ -73,9 +77,7 @@ export const InlineLabelEdit = ({
                   data-testid="editUserLabelAcceptBtn"
                   variant="link"
                   className="kc-editUserLabelAcceptBtn"
-                  onClick={() => {
-                    handleSubmit(saveUserLabel)();
-                  }}
+                  type="submit"
                   icon={<CheckIcon />}
                 />
                 <Button

src/user/user-credentials/ResetPasswordDialog.tsx

@@ -93,6 +93,16 @@ export const ResetPasswordDialog = ({
           value: password,
         },
       });
+      const { id } = (
+        await adminClient.users.getCredentials({ id: user.id! })
+      ).find((c) => c.type === "password")!;
+      await adminClient.users.updateCredentialLabel(
+        {
+          id: user.id!,
+          credentialId: id!,
+        },
+        t("defaultPasswordLabel")
+      );
       addAlert(
         isResetPassword
           ? t("resetCredentialsSuccess")