fixes

Author: lucasgoral

public/locales/en.json

@@ -270,7 +270,9 @@
     "summarize": "Summarize",
     "namespace": "Namespace",
     "region": "Region",
-    "success": "Success"
+    "success": "Success",
+    "displayName": "Display Name",
+    "name": "Name"
   },
   "buttons": {
     "viewResource": "View resource",
@@ -285,7 +287,7 @@
     "YAML": "YAML"
   },
   "createMCP": {
-    "titleText": "Success",
-    "subtitleText": "Your Managed Control plane is being created and will be ready in few minutes"
+    "titleText": "Managed Control Plane Created Successfully!",
+    "subtitleText": "Your Managed Control Plane is being set up. It will be ready to use in just a few minutes. You can safely close this window."
   }
 }

src/components/Members/EditMembers.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef, useState } from 'react';
+import { FC, useRef, useState, useCallback } from 'react';
 import {
   Button,
   FlexBox,
@@ -19,73 +19,83 @@ export interface EditMembersProps {
 }
 
 export const EditMembers: FC<EditMembersProps> = ({
-  members = [],
+  members,
   onMemberChanged,
   isValidationError = false,
 }) => {
-  const emailInput = useRef<InputDomRef>(null);
-  const [valueStateMessage, setValueStateMessage] = useState<string>('');
-  const [highlightEmail, setHighlightEmail] = useState<ValueState>('None');
-  const [role, setRole] = useState(MemberRoles.viewer);
+  const emailInputRef = useRef<InputDomRef>(null);
+  const [emailState, setEmailState] = useState<ValueState>('None');
+  const [emailMessage, setEmailMessage] = useState('');
+  const [selectedRole, setSelectedRole] = useState(MemberRoles.viewer);
   const { t } = useTranslation();
 
-  const addMember = () => {
-    setValueStateMessage('');
-    setHighlightEmail('None');
-    if (!emailInput.current) {
+  const handleAddMember = useCallback(() => {
+    setEmailState('None');
+    setEmailMessage('');
+    const input = emailInputRef.current;
+    const email = input?.value.trim() || '';
+    if (!email) {
+      setEmailState('Negative');
+      setEmailMessage(t('validationErrors.required'));
       return;
     }
-    // Check if the email is already in the list,  highlight as error
-    if (members.find((m) => m.name === emailInput.current!.value)) {
-      setValueStateMessage(t('validationErrors.userExists'));
-      setHighlightEmail('Negative');
+    if (members.some((m) => m.name === email)) {
+      setEmailState('Negative');
+      setEmailMessage(t('validationErrors.userExists'));
       return;
     }
-
-    const newMembers = [
+    onMemberChanged([
       ...members,
-      { name: emailInput.current.value, roles: [role], kind: 'User' },
-    ];
-    onMemberChanged(newMembers);
-    emailInput.current!.value = '';
-  };
-  const removeMember = (email: string) => {
-    const newMembers = members.filter((m) => m.name !== email);
-    onMemberChanged(newMembers);
-  };
+      { name: email, roles: [selectedRole], kind: 'User' },
+    ]);
+    if (input) input.value = '';
+  }, [members, onMemberChanged, selectedRole, t]);
+
+  const handleRemoveMember = useCallback(
+    (email: string) => {
+      onMemberChanged(members.filter((m) => m.name !== email));
+    },
+    [members, onMemberChanged],
+  );
+
+  const handleRoleChange = useCallback((role: MemberRoles) => {
+    setSelectedRole(role);
+  }, []);
 
-  const changeSelectedRole = (role: MemberRoles) => {
-    setRole(role);
-  };
+  const handleEmailInputChange = useCallback(() => {
+    setEmailState('None');
+    setEmailMessage('');
+  }, []);
 
   return (
-    <>
-      <div>
-        <FlexBox alignItems={'End'} gap={8}>
-          <FlexBox direction={'Column'}>
-            <Label for={'member-email-input'}>Email</Label>
-            <Input
-              ref={emailInput}
-              id="member-email-input"
-              type="Email"
-              valueState={highlightEmail}
-              valueStateMessage={<span>{valueStateMessage}</span>}
-              onChange={() => {
-                setHighlightEmail('None');
-              }}
-            />
-          </FlexBox>
-          <MemberRoleSelect value={role} onChange={changeSelectedRole} />
-          <Button data-testid="add-member-button" onClick={() => addMember()}>
-            {t('EditMembers.addButton')}
-          </Button>
+    <FlexBox direction="Column" gap={8}>
+      <FlexBox alignItems="End" gap={8}>
+        <FlexBox direction="Column">
+          <Label for="member-email-input">{t('common.members')}</Label>
+          <Input
+            ref={emailInputRef}
+            id="member-email-input"
+            type="Email"
+            valueState={emailState}
+            valueStateMessage={<span>{emailMessage}</span>}
+            data-testid="member-email-input"
+            onInput={handleEmailInputChange}
+          />
         </FlexBox>
-        <MemberTable
-          members={members}
-          isValidationError={isValidationError}
-          onDeleteMember={removeMember}
-        />
-      </div>
-    </>
+        <MemberRoleSelect value={selectedRole} onChange={handleRoleChange} />
+        <Button
+          data-testid="add-member-button"
+          design="Emphasized"
+          onClick={handleAddMember}
+        >
+          {t('EditMembers.addButton')}
+        </Button>
+      </FlexBox>
+      <MemberTable
+        members={members}
+        isValidationError={isValidationError}
+        onDeleteMember={handleRemoveMember}
+      />
+    </FlexBox>
   );
 };

src/components/Members/MemberTable.tsx

@@ -8,12 +8,25 @@ import { useTranslation } from 'react-i18next';
 import { FC } from 'react';
 import { Infobox } from '../Ui/Infobox/Infobox.tsx';
 
+type MemberTableRow = {
+  email: string;
+  role: string;
+};
+
 type MemberTableProps = {
   members: Member[];
   onDeleteMember?: (email: string) => void;
   isValidationError?: boolean;
 };
 
+type CellInstance = {
+  cell: {
+    row: {
+      original: MemberTableRow;
+    };
+  };
+};
+
 export const MemberTable: FC<MemberTableProps> = ({
   members,
   onDeleteMember,
@@ -37,43 +50,36 @@ export const MemberTable: FC<MemberTableProps> = ({
       Header: '',
       accessor: '.',
       width: 50,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      Cell: (instance: any) => (
+      Cell: (instance: CellInstance) => (
         <Button
           icon="delete"
           onClick={() => {
             const selectedMemberEmail = instance.cell.row.original.email;
-            if (onDeleteMember) {
-              onDeleteMember(selectedMemberEmail);
-            }
+            onDeleteMember(selectedMemberEmail);
           }}
         />
       ),
     });
   }
+
   if (members.length === 0) {
     return (
       <Infobox
-        size={'sm'}
+        size="sm"
         variant={isValidationError ? 'danger' : 'normal'}
-        id={'members-error'}
+        id="members-error"
       >
         {t('validationErrors.atLeastOneUser')}
       </Infobox>
     );
   }
+
+  const data: MemberTableRow[] = members.map((m) => ({
+    email: m.name,
+    role: m.roles.map((r) => MemberRolesDetailed[r].displayValue).join(', '),
+  }));
+
   return (
-    <AnalyticalTable
-      scaleWidthMode="Smart"
-      columns={columns}
-      data={members.map((m) => {
-        return {
-          email: m.name,
-          role: m.roles
-            .map((r) => MemberRolesDetailed[r].displayValue)
-            .join(', '),
-        };
-      })}
-    />
+    <AnalyticalTable scaleWidthMode="Smart" columns={columns} data={data} />
   );
 };