feat: add create user group to user group list

RedHatInsights · Nov 19, 2024 · 63c2c1f · 63c2c1f
1 parent 372b976
commit 63c2c1f
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 29 deletions.
diff --git a/src/Messages.js b/src/Messages.js
@@ -2391,4 +2391,9 @@ export default defineMessages({
     description: 'confirm button for deleting role',
     defaultMessage: 'Delete role',
   },
+  createUserGroup: {
+    id: 'createUserGroup',
+    description: 'create user group button label',
+    defaultMessage: 'Create user group'
+  },
 });
diff --git a/src/smart-components/access-management/UserGroupsTable.tsx b/src/smart-components/access-management/UserGroupsTable.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useMemo, useState, Fragment } from 'react';
+import React, { useEffect, useCallback, useMemo, useState, Fragment, useContext } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useDataViewSelection, useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
@@ -18,6 +18,7 @@ import { Group } from '../../redux/reducers/group-reducer';
 import { DataViewTrObject, DataViewState, EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view';
 import { SearchIcon } from '@patternfly/react-icons';
 import { ResponsiveAction, ResponsiveActions, SkeletonTable, WarningModal } from '@patternfly/react-component-groups';
+import AddGroupWizard from '../group/add-group/add-group-wizard';
 
 const COLUMNS: string[] = ['User group name', 'Description', 'Users', 'Service accounts', 'Roles', 'Workspaces', 'Last modified'];
 
@@ -47,6 +48,7 @@ const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
   focusedGroup,
 }) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
+  const [isAddGroupWizardOpen, setIsAddGroupWizardOpen] = React.useState(false);
   const [currentGroups, setCurrentGroups] = React.useState<Group[]>([]);
   const dispatch = useDispatch();
   const [activeState, setActiveState] = useState<DataViewState | undefined>(DataViewState.loading);
@@ -225,6 +227,14 @@ const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
 
   return (
     <Fragment>
+      {isAddGroupWizardOpen && (
+        <AddGroupWizard
+          pagination={{ limit: 20 }}
+          filters={{}}
+          enableRoles={false}
+          setIsWizardOpen={setIsAddGroupWizardOpen}
+        />
+      )}
       {isDeleteModalOpen && (
         <WarningModal
           ouiaId={`${ouiaId}-remove-user-modal`}
@@ -266,6 +276,9 @@ const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
           }
           actions={
             <ResponsiveActions breakpoint="lg" ouiaId={`${ouiaId}-actions-dropdown`}>
+              <ResponsiveAction isPinned isPersistent onClick={() => setIsAddGroupWizardOpen(true)}>
+                {intl.formatMessage(messages.createUserGroup)}
+              </ResponsiveAction>
               <ResponsiveAction
                 isDisabled={selected.length === 0 || selected.some(isRowSystemOrPlatformDefault)}
                 onClick={() => console.log('EDIT USER GROUP')}

diff --git a/src/smart-components/group/add-group/add-group-wizard.js b/src/smart-components/group/add-group/add-group-wizard.js
@@ -58,14 +58,14 @@ export const onCancel = (emptyCallback, nonEmptyCallback, setGroupData) => (form
   }
 };
 
-const AddGroupWizard = ({ postMethod, pagination, filters, orderBy }) => {
+const AddGroupWizard = ({ postMethod, pagination, filters, orderBy, enableRoles = true, setIsWizardOpen }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
   const container = useRef(document.createElement('div'));
   const { isBeta } = useChrome();
   const enableServiceAccounts =
     (isBeta() && useFlag('platform.rbac.group-service-accounts')) || (!isBeta() && useFlag('platform.rbac.group-service-accounts.stable'));
-  const schema = useRef(schemaBuilder(container.current, enableServiceAccounts));
+  const schema = useRef(schemaBuilder(container.current, enableServiceAccounts, enableRoles));
   const navigate = useAppNavigate();
   const [groupData, setGroupData] = useState({});
   const [wizardContextValue, setWizardContextValue] = useState({
@@ -84,10 +84,12 @@ const AddGroupWizard = ({ postMethod, pagination, filters, orderBy }) => {
         description: intl.formatMessage(messages.addingGroupCanceledDescription),
       })
     );
-    navigate({
-      pathname: paths.groups.link,
-      search: createQueryParams({ page: 1, per_page: pagination.limit, ...filters }),
-    });
+    setIsWizardOpen
+      ? setIsWizardOpen(false)
+      : navigate({
+          pathname: paths.groups.link,
+          search: createQueryParams({ page: 1, per_page: pagination.limit, ...filters }),
+        });
   };
 
   const setWizardError = (error) => setWizardContextValue((prev) => ({ ...prev, error }));
@@ -102,7 +104,7 @@ const AddGroupWizard = ({ postMethod, pagination, filters, orderBy }) => {
       name: formData['group-name'],
       description: formData['group-description'],
       user_list: formData['users-list'].map((user) => ({ username: user.label })),
-      roles_list: formData['roles-list'].map((role) => role.uuid),
+      roles_list: enableRoles ? formData['roles-list'].map((role) => role.uuid) : [],
     };
     dispatch(addGroup(groupData)).then(({ value }) => {
       setWizardContextValue((prev) => ({
@@ -124,10 +126,12 @@ const AddGroupWizard = ({ postMethod, pagination, filters, orderBy }) => {
   const onClose = () => {
     setWizardContextValue((prev) => ({ ...prev, success: false, hideForm: false }));
     postMethod({ limit: pagination.limit, offset: 0, orderBy, filters: {} });
-    navigate({
-      pathname: paths.groups.link,
-      search: createQueryParams({ page: 1, per_page: pagination.limit }),
-    });
+    setIsWizardOpen
+      ? setIsWizardOpen(false)
+      : navigate({
+          pathname: paths.groups.link,
+          search: createQueryParams({ page: 1, per_page: pagination.limit }),
+        });
   };
 
   return (
@@ -189,6 +193,8 @@ AddGroupWizard.propTypes = {
   }).isRequired,
   filters: PropTypes.object.isRequired,
   orderBy: PropTypes.string,
+  enableRoles: PropTypes.bool.isRequired,
+  setIsWizardOpen: PropTypes.func,
 };
 
 export default AddGroupWizard;
diff --git a/src/smart-components/group/add-group/schema.js b/src/smart-components/group/add-group/schema.js
@@ -9,7 +9,7 @@ import { createIntl, createIntlCache } from 'react-intl';
 import messages from '../../../Messages';
 import providerMessages from '../../../locales/data.json';
 
-export const schemaBuilder = (container, enableServiceAccounts) => {
+export const schemaBuilder = (container, enableServiceAccounts, enableRoles) => {
   const cache = createIntlCache();
   const intl = createIntl({ locale, messages: providerMessages }, cache);
   return {
@@ -26,7 +26,7 @@ export const schemaBuilder = (container, enableServiceAccounts) => {
         fields: [
           {
             name: 'name-and-description',
-            nextStep: 'add-roles',
+            nextStep: enableRoles ? 'add-roles' : 'add-users',
             title: intl.formatMessage(messages.nameAndDescription),
             fields: [
               {
@@ -51,7 +51,7 @@ export const schemaBuilder = (container, enableServiceAccounts) => {
               },
             ],
           },
-          {
+          ...(enableRoles ? [{
             name: 'add-roles',
             nextStep: 'add-users',
             title: intl.formatMessage(messages.addRoles),
@@ -61,7 +61,7 @@ export const schemaBuilder = (container, enableServiceAccounts) => {
                 name: 'roles-list',
               },
             ],
-          },
+          }] : []),
           {
             name: 'add-users',
             nextStep: enableServiceAccounts ? 'add-service-accounts' : 'review',

diff --git a/src/smart-components/group/add-group/summary-content.js b/src/smart-components/group/add-group/summary-content.js
@@ -47,20 +47,22 @@ const SummaryContent = () => {
                   <Text component={TextVariants.p}>{description}</Text>
                 </GridItem>
               </Grid>
-              <Grid>
-                <GridItem md={3}>
-                  <Text component={TextVariants.h4} className="rbac-bold-text">
-                    {intl.formatMessage(messages.roles)}
-                  </Text>
-                </GridItem>
-                <GridItem md={9}>
-                  {selectedRoles.map((role, index) => (
-                    <Text className="pf-v5-u-mb-0" key={index}>
-                      {role.label}
+              {selectedRoles && (
+                <Grid>
+                  <GridItem md={3}>
+                    <Text component={TextVariants.h4} className="rbac-bold-text">
+                      {intl.formatMessage(messages.roles)}
                     </Text>
-                  ))}
-                </GridItem>
-              </Grid>
+                  </GridItem>
+                  <GridItem md={9}>
+                    {selectedRoles.map((role, index) => (
+                      <Text className="pf-v5-u-mb-0" key={index}>
+                        {role.label}
+                      </Text>
+                    ))}
+                  </GridItem>
+                </Grid>
+              )}
               <Grid>
                 <GridItem md={3}>
                   <Text component={TextVariants.h4} className="rbac-bold-text">