feat(RHINENG-10513): Replace groups with workspaces (#2213)

* feat(RHINENG-10513): Replace groups with workspaces This PR implements the feature flag for workspaces. If the feature flag is on, then "Workspace" will show up in place of "Group". This PR only implements this change in regards to customer-facing use of the word "Group". To test the flag, either turn the flag on, or open src/Utilities/hooks/useWorkspaceFeatureFlag.js and set the value to true. * Update src/components/InventoryGroupDetail/GroupDetailInfo.js Co-authored-by: Muslimjon <[email protected]> * Update src/components/InventoryGroupDetail/GroupDetailInfo.js Co-authored-by: Muslimjon <[email protected]> * Update src/components/InventoryGroups/Modals/ModalSchemas/schemes.js Co-authored-by: Muslimjon <[email protected]> * Update src/components/InventoryGroupDetail/GroupDetailInfo.js * update routes according to chrome service backend * fix(featureflag): Update feature flag operators --------- Co-authored-by: Michael Johnson <[email protected]> Co-authored-by: Adonis Puente <[email protected]> Co-authored-by: Muslimjon <[email protected]> Co-authored-by: Aleksandr Voznesenskii <[email protected]> Co-authored-by: Adonis Puente <[email protected]>
RedHatInsights · Jun 25, 2024 · 5bf1278 · 5bf1278
1 parent 9319177
commit 5bf1278
Show file tree

Hide file tree

Showing 43 changed files with 740 additions and 324 deletions.
diff --git a/cypress/support/interceptors.js b/cypress/support/interceptors.js
@@ -291,6 +291,40 @@ export const featureFlagsInterceptors = {
       },
     }).as('getEdgeFeatureFlag');
   },
+  workspacesSuccessful: () => {
+    cy.intercept('GET', '/feature_flags*', {
+      statusCode: 200,
+      body: {
+        toggles: [
+          {
+            name: 'platform.rbac.groups-to-workspaces-rename',
+            enabled: true,
+            variant: {
+              name: 'disabled',
+              enabled: true,
+            },
+          },
+        ],
+      },
+    }).as('getWorkspacesFeatureFlag');
+  },
+  workspacesDisabled: () => {
+    cy.intercept('GET', '/feature_flags*', {
+      statusCode: 200,
+      body: {
+        toggles: [
+          {
+            name: 'platform.rbac.groups-to-workspaces-rename',
+            enabled: false,
+            variant: {
+              name: 'disabled',
+              enabled: false,
+            },
+          },
+        ],
+      },
+    }).as('getWorkspacesFeatureFlag');
+  },
 };
 
 export const edgeInterceptors = {

diff --git a/src/Routes.js b/src/Routes.js
@@ -41,6 +41,8 @@ export const routes = {
   update: '/:inventoryId/update',
   edgeInventory: '/manage-edge-inventory',
   staleness: '/staleness-and-deletion',
+  workspace: '/workspace',
+  workspaceDetail: '/workspace/:groupId',
 };
 
 export const AccountStatContext = createContext({
@@ -104,6 +106,14 @@ export const Routes = () => {
       path: '/groups/:groupId',
       element: <InventoryOrEdgeGroupDetailsView />,
     },
+    {
+      path: '/workspace',
+      element: <InventoryOrEdgeView />,
+    },
+    {
+      path: '/workspace/:groupId',
+      element: <InventoryOrEdgeGroupDetailsView />,
+    },
     {
       path: '/:inventoryId/update',
       element: <EdgeInventoryUpdate />,
@@ -151,7 +161,11 @@ export const Routes = () => {
     </Suspense>
   ) : (
     <AccountStatContext.Provider
-      value={{ hasConventionalSystems, hasEdgeDevices, hasBootcImages }}
+      value={{
+        hasConventionalSystems,
+        hasEdgeDevices,
+        hasBootcImages,
+      }}
     >
       {element}
     </AccountStatContext.Provider>

diff --git a/src/Utilities/hooks/useWorkspaceFeatureFlag.js b/src/Utilities/hooks/useWorkspaceFeatureFlag.js
@@ -0,0 +1,6 @@
+import useFeatureFlag from '../useFeatureFlag';
+
+const useWorkspaceFeatureFlag = () =>
+  useFeatureFlag('platform.rbac.groups-to-workspaces-rename');
+
+export default useWorkspaceFeatureFlag;
diff --git a/src/Utilities/useFeatureFlag.js b/src/Utilities/useFeatureFlag.js
@@ -3,5 +3,5 @@ import { useFlag, useFlagsStatus } from '@unleash/proxy-client-react';
 export default (flag) => {
   const { flagsReady } = useFlagsStatus();
   const isFlagEnabled = useFlag(flag);
-  return flagsReady ? isFlagEnabled : false;
+  return flagsReady ? isFlagEnabled : undefined;
 };
diff --git a/src/components/GroupSystems/GroupImmutableSystems.js b/src/components/GroupSystems/GroupImmutableSystems.js
@@ -9,6 +9,7 @@ import RemoveHostsFromGroupModal from '../InventoryGroups/Modals/RemoveHostsFrom
 import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
 import {
   NO_MODIFY_GROUP_TOOLTIP_MESSAGE,
+  NO_MODIFY_WORKSPACE_TOOLTIP_MESSAGE,
   REQUIRED_PERMISSIONS_TO_MODIFY_GROUP,
 } from '../../constants';
 import {
@@ -30,6 +31,7 @@ import {
 import { edgeColumns } from '../ImmutableDevices/columns';
 import { mergeArraysByKey } from '@redhat-cloud-services/frontend-components-utilities/helpers';
 import { hybridInventoryTabKeys } from '../../Utilities/constants';
+import useWorkspaceFeatureFlag from '../../Utilities/hooks/useWorkspaceFeatureFlag';
 export const prepareColumns = (
   initialColumns,
   hideGroupColumn,
@@ -53,7 +55,7 @@ export const prepareColumns = (
     </div>
   );
 
-  // map columns to the speicifc order
+  // map columns to the specific order
   return [
     'display_name',
     'groups',
@@ -70,6 +72,13 @@ export const prepareColumns = (
 
 const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
   const dispatch = useDispatch();
+  const isWorkspaceEnabled = useWorkspaceFeatureFlag();
+  const noAccessTooltip = isWorkspaceEnabled
+    ? NO_MODIFY_WORKSPACE_TOOLTIP_MESSAGE
+    : NO_MODIFY_GROUP_TOOLTIP_MESSAGE;
+  const removeLabel = isWorkspaceEnabled
+    ? 'Remove from workspace'
+    : 'Remove from group';
   const mergeColumns = (inventoryColumns) => {
     const filteredColumns = inventoryColumns.filter(
       (column) => column.key !== 'groups'
@@ -258,13 +267,13 @@ const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
                     requiredPermissions={REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(
                       groupId
                     )}
-                    noAccessTooltip={NO_MODIFY_GROUP_TOOLTIP_MESSAGE}
+                    noAccessTooltip={noAccessTooltip}
                     onClick={() => {
                       setCurrentSystem([row]);
                       setRemoveHostsFromGroupModalOpen(true);
                     }}
                   >
-                    Remove from group
+                    {removeLabel}
                   </ActionDropdownItem>
                 ),
               },
@@ -277,7 +286,7 @@ const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
                     requiredPermissions={REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(
                       groupId
                     )}
-                    noAccessTooltip={NO_MODIFY_GROUP_TOOLTIP_MESSAGE}
+                    noAccessTooltip={noAccessTooltip}
                     onClick={() => {
                       setCurrentSystem([row]);
                       navigate(`/insights/inventory/${row.id}/update`);
@@ -298,7 +307,7 @@ const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
                     requiredPermissions={REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(
                       groupId
                     )}
-                    noAccessTooltip={NO_MODIFY_GROUP_TOOLTIP_MESSAGE}
+                    noAccessTooltip={noAccessTooltip}
                     onClick={() => {
                       dispatch(clearEntitiesAction());
                       setAddToGroupModalOpen(true);
@@ -311,7 +320,7 @@ const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
                     requiredPermissions={REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(
                       groupId
                     )}
-                    noAccessTooltip={NO_MODIFY_GROUP_TOOLTIP_MESSAGE}
+                    noAccessTooltip={noAccessTooltip}
                     key="update-systems-button"
                     onClick={() => {
                       setupdateDevice(true);
@@ -325,12 +334,12 @@ const GroupImmutableSystems = ({ groupName, groupId, ...props }) => {
                 </div>,
               ],
               {
-                label: 'Remove from group',
+                label: removeLabel,
                 props: {
                   isAriaDisabled: !canModify || calculateSelected() === 0,
                   ...(!canModify && {
                     tooltipProps: {
-                      content: NO_MODIFY_GROUP_TOOLTIP_MESSAGE,
+                      content: noAccessTooltip,
                     },
                   }),
                 },

diff --git a/src/components/GroupSystems/GroupSystems.js b/src/components/GroupSystems/GroupSystems.js
@@ -9,6 +9,7 @@ import RemoveHostsFromGroupModal from '../InventoryGroups/Modals/RemoveHostsFrom
 import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
 import {
   NO_MODIFY_GROUP_TOOLTIP_MESSAGE,
+  NO_MODIFY_WORKSPACE_TOOLTIP_MESSAGE,
   REQUIRED_PERMISSIONS_TO_MODIFY_GROUP,
   getSearchParams,
 } from '../../constants';
@@ -24,6 +25,7 @@ import useGlobalFilter from '../filters/useGlobalFilter';
 import { hybridInventoryTabKeys } from '../../Utilities/constants';
 import useOnRefresh from '../filters/useOnRefresh';
 import { generateFilter } from '../../Utilities/constants';
+import useWorkspaceFeatureFlag from '../../Utilities/hooks/useWorkspaceFeatureFlag';
 
 export const prepareColumns = (
   initialColumns,
@@ -101,6 +103,13 @@ const GroupSystems = ({ groupName, groupId }) => {
   );
 
   const [searchParams] = useSearchParams();
+  const isWorkspaceEnabled = useWorkspaceFeatureFlag();
+  const noAccessTooltip = isWorkspaceEnabled
+    ? NO_MODIFY_WORKSPACE_TOOLTIP_MESSAGE
+    : NO_MODIFY_GROUP_TOOLTIP_MESSAGE;
+  const removeLabel = isWorkspaceEnabled
+    ? 'Remove from workspace'
+    : 'Remove from group';
 
   useEffect(() => {
     const { page, perPage } = getSearchParams(searchParams);
@@ -205,13 +214,13 @@ const GroupSystems = ({ groupName, groupId }) => {
                     requiredPermissions={REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(
                       groupId
                     )}
-                    noAccessTooltip={NO_MODIFY_GROUP_TOOLTIP_MESSAGE}
+                    noAccessTooltip={noAccessTooltip}
                     onClick={() => {
                       setCurrentSystem([row]);
                       setRemoveHostsFromGroupModalOpen(true);
                     }}
                   >
-                    Remove from group
+                    {removeLabel}
                   </ActionDropdownItem>
                 ),
               },
@@ -224,7 +233,7 @@ const GroupSystems = ({ groupName, groupId }) => {
                 requiredPermissions={REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(
                   groupId
                 )}
-                noAccessTooltip={NO_MODIFY_GROUP_TOOLTIP_MESSAGE}
+                noAccessTooltip={noAccessTooltip}
                 onClick={() => {
                   dispatch(clearEntitiesAction());
                   setAddToGroupModalOpen(true);
@@ -234,12 +243,12 @@ const GroupSystems = ({ groupName, groupId }) => {
                 Add systems
               </ActionButton>,
               {
-                label: 'Remove from group',
+                label: removeLabel,
                 props: {
                   isAriaDisabled: !canModify || calculateSelected() === 0,
                   ...(!canModify && {
                     tooltipProps: {
-                      content: NO_MODIFY_GROUP_TOOLTIP_MESSAGE,
+                      content: noAccessTooltip,
                     },
                   }),
                 },

diff --git a/src/components/GroupsTable/GroupsTable.js b/src/components/GroupsTable/GroupsTable.js
@@ -25,12 +25,15 @@ import { Link } from 'react-router-dom';
 import {
   GENERAL_GROUPS_WRITE_PERMISSION,
   NO_MODIFY_GROUPS_TOOLTIP_MESSAGE,
+  NO_MODIFY_WORKSPACES_TOOLTIP_MESSAGE,
   NO_MODIFY_GROUP_TOOLTIP_MESSAGE,
+  NO_MODIFY_WORKSPACE_TOOLTIP_MESSAGE,
   REQUIRED_PERMISSIONS_TO_MODIFY_GROUP,
   TABLE_DEFAULT_PAGINATION,
 } from '../../constants';
 import { fetchGroups } from '../../store/inventory-actions';
 import useFetchBatched from '../../Utilities/hooks/useFetchBatched';
+import useWorkspaceFeatureFlag from '../../Utilities/hooks/useWorkspaceFeatureFlag';
 import DeleteGroupModal from '../InventoryGroups/Modals/DeleteGroupModal';
 import RenameGroupModal from '../InventoryGroups/Modals/RenameGroupModal';
 import { getGroups } from '../InventoryGroups/utils/api';
@@ -122,6 +125,7 @@ const GroupsTable = ({ onCreateGroupClick }) => {
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const groups = useMemo(() => data?.results || [], [data]);
   const { fetchBatched } = useFetchBatched();
+  const isWorkspaceEnabled = useWorkspaceFeatureFlag();
   const loadingState = uninitialized || loading;
 
   const fetchData = useCallback(
@@ -321,7 +325,11 @@ const GroupsTable = ({ onCreateGroupClick }) => {
           requiredPermissions={REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(
             rowData?.groupId
           )}
-          noAccessTooltip={NO_MODIFY_GROUP_TOOLTIP_MESSAGE}
+          noAccessTooltip={
+            isWorkspaceEnabled
+              ? NO_MODIFY_WORKSPACE_TOOLTIP_MESSAGE
+              : NO_MODIFY_GROUP_TOOLTIP_MESSAGE
+          }
           onClick={() => {
             setSelectedGroup({
               id: rowData?.groupId,
@@ -330,7 +338,7 @@ const GroupsTable = ({ onCreateGroupClick }) => {
             setRenameModalOpen(true);
           }}
         >
-          Rename group
+          {isWorkspaceEnabled ? 'Rename workspace' : 'Rename group'}
         </ActionDropdownItem>
       ),
     },
@@ -340,7 +348,11 @@ const GroupsTable = ({ onCreateGroupClick }) => {
           requiredPermissions={REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(
             rowData?.groupId
           )}
-          noAccessTooltip={NO_MODIFY_GROUP_TOOLTIP_MESSAGE}
+          noAccessTooltip={
+            isWorkspaceEnabled
+              ? NO_MODIFY_WORKSPACE_TOOLTIP_MESSAGE
+              : NO_MODIFY_GROUP_TOOLTIP_MESSAGE
+          }
           onClick={() => {
             setSelectedGroup({
               id: rowData?.groupId,
@@ -349,7 +361,7 @@ const GroupsTable = ({ onCreateGroupClick }) => {
             setDeleteModalOpen(true);
           }}
         >
-          Delete group
+          {isWorkspaceEnabled ? 'Delete workspace' : 'Delete group'}
         </ActionDropdownItem>
       ),
     },
@@ -456,24 +468,38 @@ const GroupsTable = ({ onCreateGroupClick }) => {
             <ActionButton
               key="create-group-btn"
               requiredPermissions={[GENERAL_GROUPS_WRITE_PERMISSION]}
-              noAccessTooltip={NO_MODIFY_GROUPS_TOOLTIP_MESSAGE}
+              noAccessTooltip={
+                isWorkspaceEnabled
+                  ? NO_MODIFY_WORKSPACES_TOOLTIP_MESSAGE
+                  : NO_MODIFY_GROUPS_TOOLTIP_MESSAGE
+              }
               onClick={onCreateGroupClick}
               ouiaId="CreateGroupButton"
             >
-              Create group
+              {isWorkspaceEnabled ? 'Create workspace' : 'Create group'}
             </ActionButton>,
             {
               label: (
                 <ActionDropdownItem
                   requiredPermissions={selectedIds.flatMap((id) =>
                     REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(id)
                   )}
-                  noAccessTooltip={NO_MODIFY_GROUPS_TOOLTIP_MESSAGE}
+                  noAccessTooltip={
+                    isWorkspaceEnabled
+                      ? NO_MODIFY_WORKSPACES_TOOLTIP_MESSAGE
+                      : NO_MODIFY_GROUPS_TOOLTIP_MESSAGE
+                  }
                   onClick={() => setDeleteModalOpen(true)}
                   isAriaDisabled={selectedIds.length === 0}
                   checkAll
                 >
-                  {selectedIds.length > 1 ? 'Delete groups' : 'Delete group'}
+                  {selectedIds.length > 1
+                    ? isWorkspaceEnabled
+                      ? 'Delete workspaces'
+                      : 'Delete groups'
+                    : isWorkspaceEnabled
+                    ? 'Delete workspace'
+                    : 'Delete group'}
                 </ActionDropdownItem>
               ),
             },