feat(Operator Page): add overlay title to organization details overlay (#6475)

* feat: add org details header to overlay

* feat: show iox org cardinality as N/A

* fix: add "IOx" to cardinality limit

* fix: update iox cardinality limit field type to text

* chore: revert code showing cardinality for iox

* chore: rearrange operator page org overlay

* fix: prettier

* test: update orgID test

* test: use correct testID to reference orgID element

Author: blegesse-w

cypress/e2e/cloud/operator.test.ts

@@ -196,7 +196,7 @@ describe('Operator Page', () => {
     })
 
     cy.getByTestID('overlay--container').should('be.visible')
-    cy.getByTestID('overlay--header').contains('678')
+    cy.getByTestID('org-overlay-orgID').contains('678')
 
     cy.getByTestID('limits-rate.readKBs--input').clear().type('666')
 
@@ -244,7 +244,7 @@ describe('Operator Page', () => {
     })
 
     cy.getByTestID('overlay--container').should('be.visible')
-    cy.getByTestID('overlay--header').contains('678')
+    cy.getByTestID('org-overlay-orgID').contains('678')
 
     cy.getByTestID('limits-rate.readKBs--input')
       .invoke('attr', 'value')

src/operator/LimitsField.tsx

@@ -20,7 +20,9 @@ interface Props {
 const LimitsField: FC<Props> = ({type, name, limits, onChangeLimits}) => {
   const [hasFocus, setHasFocus] = useState(false)
   const {hasWritePermissions} = useContext(OperatorContext)
+
   const value = get(limits, name, '')
+
   const formatted_value =
     type === InputType.Number
       ? Intl.NumberFormat(navigator.language).format(value)

src/operator/OrgOverlay.scss

@@ -13,3 +13,8 @@
     padding: $cf-space-2xs $cf-space-s;
   }
 }
+
+.org-overlay-detail--text {
+  font-weight: 700;
+  font-size: 16px;
+}

src/operator/OrgOverlay.tsx

@@ -57,6 +57,7 @@ const OrgOverlay: FC = () => {
   const history = useHistory()
   const canReactivateOrg =
     hasWritePermissions && organization?.state === 'suspended'
+
   const isIOx =
     organization?.storageType &&
     organization.storageType.toLowerCase() === 'iox'
@@ -98,8 +99,8 @@ const OrgOverlay: FC = () => {
     >
       <Overlay.Container maxWidth={1000}>
         <Overlay.Header
-          title={orgID}
-          className="overlay-header--color overlay-header--title"
+          title="Organization Details"
+          className="overlay-header--color"
           onDismiss={() => history.goBack()}
         />
         <SpinnerContainer
@@ -110,13 +111,20 @@ const OrgOverlay: FC = () => {
             <Panel.Body>
               <Grid>
                 <Grid.Row>
-                  <Grid.Column widthMD={Columns.Four}>
-                    <label>Organization Name</label>
-                    <p>{organization?.name ?? ''}</p>
+                  <Grid.Column
+                    widthMD={Columns.Four}
+                    testID="org-overlay-orgID"
+                  >
+                    <label className="org-overlay-detail--text">
+                      Organization ID
+                    </label>
+                    <p>{orgID}</p>
                   </Grid.Column>
                   <Grid.Column widthMD={Columns.Four}>
-                    <label>Account Type</label>
-                    <p>{organization?.account?.type ?? ''}</p>
+                    <label className="org-overlay-detail--text">
+                      Organization Name
+                    </label>
+                    <p>{organization?.name ?? ''}</p>
                   </Grid.Column>
                   <Grid.Column widthMD={Columns.Four}>
                     <LinkButton
@@ -151,9 +159,17 @@ const OrgOverlay: FC = () => {
                 </Grid.Row>
                 <Grid.Row>
                   <Grid.Column widthMD={Columns.Four}>
-                    <label>Organization State</label>
+                    <label className="org-overlay-detail--text">
+                      Organization State
+                    </label>
                     <p>{organization?.state ?? ''}</p>
                   </Grid.Column>
+                  <Grid.Column widthMD={Columns.Four}>
+                    <label className="org-overlay-detail--text">
+                      Account Type
+                    </label>
+                    <p>{organization?.account?.type ?? ''}</p>
+                  </Grid.Column>
                 </Grid.Row>
                 <SpinnerContainer
                   loading={limitsStatus}