fix: more updates based on PR feedback

RedHatInsights · Oct 24, 2024 · de85942 · de85942
1 parent 7f6b7d0
commit de85942
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 18 deletions.
diff --git a/src/Messages.js b/src/Messages.js
@@ -2123,6 +2123,21 @@ export default defineMessages({
     description: 'Add to user group label',
     defaultMessage: 'Add to user group',
   },
+  usersAndUserGroupsEditUserGroup: {
+    id: 'usersAndUserGroupsEditUserGroup',
+    description: 'Edit user group label',
+    defaultMessage: 'Edit user group',
+  },
+  usersAndUserGroupsDeleteUserGroup: {
+    id: 'usersAndUserGroupsDeleteUserGroup',
+    description: 'Delete user group label',
+    defaultMessage: 'Delete user group',
+  },
+  usersAndUserGroupsRemoveFromGroup: {
+    id: 'usersAndUserGroupsAddToGroup',
+    description: 'Remove from user group label',
+    defaultMessage: 'Remove from user group',
+  },
   usersAndUserGroupsCancel: {
     id: 'usersAndUserGroupsCancel',
     description: 'Cancel add user label',
@@ -2153,6 +2168,12 @@ export default defineMessages({
     description: 'No isnt Org Admin label',
     defaultMessage: 'No',
   },
+  usersAndUserGroupsAddUserDescription: {
+    id: 'usersAndUserGroupsAddUserDescription',
+    description: 'Description within add user to user group modal',
+    defaultMessage:
+      'Select a user group to add {<b>{numUsers} {plural}</b>} to. These are all the user groups in your account. To manage user groups, go to user groups.}',
+  },
   assignedUserGroupsTooltipHeader: {
     id: 'assignedUserGroupsTooltipHeader',
     description: 'header for assigned user groups tooltip',

diff --git a/src/smart-components/access-management/AddUserGroupModal.tsx b/src/smart-components/access-management/AddUserGroupModal.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import UserGroupsTable from './UserGroupsTable';
 import { useDispatch } from 'react-redux';
 import { addMembersToGroup } from '../../redux/actions/group-actions';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import messages from '../../Messages';
 
 interface AddUserGroupModalProps {
@@ -41,13 +41,16 @@ export const AddUserGroupModal: React.FunctionComponent<AddUserGroupModalProps>
           {intl.formatMessage(messages['usersAndUserGroupsCancel'])}
         </Button>,
       ]}
-      ouiaId={'add-user-group-modal'}
+      ouiaId="add-user-group-modal"
     >
-      Select a user group to add{' '}
-      <span className="pf-v5-u-font-weight-bold">
-        {selectedUsers.length} user{selectedUsers.length > 1 && 's'}{' '}
-      </span>
-      to. These are all the user groups in your account. To manage user groups, go to user groups.
+      <FormattedMessage
+        {...messages['usersAndUserGroupsAddUserDescription']}
+        values={{
+          b: (text) => <b>{text}</b>,
+          count: selectedUsers.length,
+          plural: selectedUsers.length > 1 ? 'users' : 'user',
+        }}
+      />
       <UserGroupsTable
         defaultPerPage={10}
         useUrlParams={false}

diff --git a/src/smart-components/access-management/UserGroupsTable.tsx b/src/smart-components/access-management/UserGroupsTable.tsx
@@ -17,11 +17,6 @@ import messages from '../../Messages';
 
 const COLUMNS: string[] = ['User group name', 'Description', 'Users', 'Service accounts', 'Roles', 'Workspaces', 'Last modified'];
 
-const ROW_ACTIONS = [
-  { title: 'Edit user group', onClick: () => console.log('EDIT USER GROUP') },
-  { title: 'Delete user group', onClick: () => console.log('DELETE USER GROUP') },
-];
-
 const PER_PAGE_OPTIONS = [
   { title: '5', value: 5 },
   { title: '10', value: 10 },
@@ -48,6 +43,11 @@ const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
   const dispatch = useDispatch();
   const intl = useIntl();
 
+  const rowActions = [
+    { title: intl.formatMessage(messages['usersAndUserGroupsEditUserGroup']), onClick: () => console.log('EDIT USER GROUP') },
+    { title: intl.formatMessage(messages['usersAndUserGroupsDeleteUserGroup']), onClick: () => console.log('DELETE USER GROUP') },
+  ];
+
   const { groups, totalCount } = useSelector((state: RBACStore) => ({
     groups: state.groupReducer?.groups?.data || [],
     totalCount: state.groupReducer?.groups?.meta.count || 0,
@@ -125,7 +125,7 @@ const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
       group.workspaces || '?', // not currently in API
       formatDistanceToNow(new Date(group.modified), { addSuffix: true }),
       enableActions && {
-        cell: <ActionsColumn items={ROW_ACTIONS} />,
+        cell: <ActionsColumn items={rowActions} />,
         props: { isActionCell: true },
       },
     ],

diff --git a/src/smart-components/access-management/UsersTable.tsx b/src/smart-components/access-management/UsersTable.tsx
@@ -32,16 +32,16 @@ interface UsersTableProps {
 }
 
 const UsersTable: React.FunctionComponent<UsersTableProps> = ({ onAddUserClick }) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
   const rowActions = (user: UserProps) => {
     return [
-      { title: 'Add to user group', onClick: () => onAddUserClick([user]) },
-      { title: 'Remove from user group', onClick: () => console.log('REMOVE FROM USER GROUP') },
+      { title: intl.formatMessage(messages['usersAndUserGroupsAddToGroup']), onClick: () => onAddUserClick([user]) },
+      { title: intl.formatMessage(messages['usersAndUserGroupsRemoveFromGroup']), onClick: () => console.log('REMOVE FROM USER GROUP') },
     ];
   };
 
-  const dispatch = useDispatch();
-  const intl = useIntl();
-
   const { users, totalCount } = useSelector((state: RBACStore) => ({
     users: state.userReducer.users.data || [],
     totalCount: state.userReducer.users.meta.count,