fix(RHINENG-9058): fixed action button alignment (#731)

* fix(rhineng-9058): fixed action button alignment * fixed lint issue * fixed tests
RedHatInsights · Apr 25, 2024 · a4ee09c · a4ee09c
1 parent b0f97b4
commit a4ee09c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 62 deletions.
diff --git a/src/Components/Cluster/Cluster.cy.js b/src/Components/Cluster/Cluster.cy.js
@@ -15,7 +15,7 @@ import {
 import { TAB_BUTTON } from '@redhat-cloud-services/frontend-components-utilities';
 
 // selectors
-const CLUSTER_HEADER = '#cluster-header';
+const CLUSTER_HEADER = '#cluster-header-title';
 const BREADCRUMBS = 'nav[class=pf-v5-c-breadcrumb]';
 const RULES_TABLE = '#cluster-recs-list-table';
 const FILTER_CHIPS = 'li[class=pf-v5-c-chip-group__list-item]';

diff --git a/src/Components/ClusterHeader/ClusterHeader.js b/src/Components/ClusterHeader/ClusterHeader.js
@@ -6,8 +6,8 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
-  Grid,
-  GridItem,
+  Flex,
+  FlexItem,
   MenuToggle,
   Stack,
   StackItem,
@@ -50,65 +50,65 @@ export const ClusterHeader = ({ clusterId, clusterData, clusterInfo }) => {
   ];
 
   return (
-    <Grid id="cluster-header" md={12} hasGutter>
-      <GridItem span={8}>
-        <Title
-          size="2xl"
-          headingLevel="h1"
-          id="cluster-header-title"
-          ouiaId="cluster-name"
-        >
-          {isUninitializedInfo || isFetchingInfo ? (
-            <Skeleton size="sm" />
-          ) : (
-            info?.display_name || clusterId
-          )}
-        </Title>
-      </GridItem>
-      <GridItem span={4} id="cluster-header-dropdown">
-        <Dropdown
-          popperProps={{
-            position: 'right',
-          }}
-          onOpenChange={(isOpen) => setIsOpen(isOpen)}
-          autoFocus={false}
-          isOpen={isOpen}
-          toggle={(toggleRef) => (
-            <MenuToggle
-              ref={toggleRef}
-              id="toggle-id-2"
-              onClick={() => setIsOpen(!isOpen)}
-            >
-              {intl.formatMessage(messages.dropDownActionSingleCluster)}
-            </MenuToggle>
-          )}
-        >
-          <DropdownList>{dropDownItems}</DropdownList>
-        </Dropdown>
-      </GridItem>
-      <GridItem>
-        <Stack>
-          <StackItem id="cluster-header-uuid">
-            <span>UUID:</span> <span>{clusterId}</span>
-          </StackItem>
-          <StackItem id="cluster-header-last-seen">
-            <span>{intl.formatMessage(messages.lastSeen)}: </span>
-            <span>
-              {isUninitializedCluster || isFetchingCluster ? (
-                <OneLineLoader />
-              ) : cluster?.report?.meta?.last_checked_at ? (
-                <DateFormat
-                  date={cluster?.report?.meta?.last_checked_at}
-                  type="exact"
-                />
-              ) : (
-                intl.formatMessage(messages.unknown)
-              )}
-            </span>
-          </StackItem>
-        </Stack>
-      </GridItem>
-    </Grid>
+    <Stack hasGutter>
+      <Flex
+        justifyContent={{ default: 'justifyContentSpaceBetween' }}
+        flexWrap={{ default: 'nowrap' }}
+      >
+        <FlexItem>
+          <Title
+            size="2xl"
+            headingLevel="h1"
+            id="cluster-header-title"
+            ouiaId="cluster-name"
+          >
+            {isUninitializedInfo || isFetchingInfo ? (
+              <Skeleton size="sm" />
+            ) : (
+              info?.display_name || clusterId
+            )}
+          </Title>
+        </FlexItem>
+        <FlexItem>
+          <Dropdown
+            onOpenChange={(isOpen) => setIsOpen(isOpen)}
+            autoFocus={false}
+            isOpen={isOpen}
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                id="toggle-id-2"
+                onClick={() => setIsOpen(!isOpen)}
+              >
+                {intl.formatMessage(messages.dropDownActionSingleCluster)}
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{dropDownItems}</DropdownList>
+          </Dropdown>
+        </FlexItem>
+      </Flex>
+      <Stack>
+        <StackItem id="cluster-header-uuid">
+          <span>UUID:</span> <span>{clusterId}</span>
+        </StackItem>
+        <StackItem id="cluster-header-last-seen">
+          <span>{intl.formatMessage(messages.lastSeen)}: </span>
+          <span>
+            {isUninitializedCluster || isFetchingCluster ? (
+              <OneLineLoader />
+            ) : cluster?.report?.meta?.last_checked_at ? (
+              <DateFormat
+                date={cluster?.report?.meta?.last_checked_at}
+                type="exact"
+              />
+            ) : (
+              intl.formatMessage(messages.unknown)
+            )}
+          </span>
+        </StackItem>
+      </Stack>
+    </Stack>
   );
 };