feat: add storage type to org profile page (#6460)

* feat: add storage type to org profile page

* chore: remove unnecessary selector and defaults from org profile page

* chore: add capitalization

* chore: fix variable names for storage typing

* chore: remove toLowerCase

Author: wdoconnell

cypress/e2e/cloud/about.test.ts

@@ -1,4 +1,5 @@
 import {makeQuartzUseIDPEOrgID} from 'cypress/support/Utils'
+import {Organization} from 'src/client'
 
 const deleteOrgsFeatureFlags = {
   createDeleteOrgs: true,
@@ -7,6 +8,15 @@ const deleteOrgsFeatureFlags = {
 // This variable stores the current IDPE orgid and syncs it with the quartz-mock orgid.
 let idpeOrgID: string
 
+const spoofStorageType = (storageType: Organization['defaultStorageType']) => {
+  cy.intercept('GET', 'api/v2/orgs', req => {
+    req.continue(res => {
+      res.body.orgs[0].defaultStorageType = storageType
+      res.send(res)
+    })
+  })
+}
+
 const getOrgCreationAllowance = (allowanceFixture: string) => {
   cy.intercept('GET', 'api/v2/quartz/allowances/orgs/create', {
     fixture: allowanceFixture,
@@ -203,6 +213,35 @@ const upgradeAccount = () => {
     .contains('Your account upgrade inquiry has been submitted.')
 }
 
+describe('Storage types', () => {
+  it('identifies the storage type as iox in an iox org', () => {
+    spoofStorageType('iox')
+    setupTest({
+      accountType: 'pay_as_you_go',
+      canCreateOrgs: true,
+      orgHasOtherUsers: false,
+    })
+
+    cy.getByTestID('org-profile--labeled-data').within(() => {
+      cy.getByTestID('heading').contains('Storage Type')
+      cy.contains('IOx')
+    })
+  })
+
+  it('identifies the storage type as tsm in a tsm org', () => {
+    spoofStorageType('tsm')
+    setupTest({
+      accountType: 'contract',
+      canCreateOrgs: false,
+      orgHasOtherUsers: true,
+    })
+    cy.getByTestID('org-profile--labeled-data').within(() => {
+      cy.getByTestID('heading').contains('Storage Type')
+      cy.contains('TSM')
+    })
+  })
+})
+
 describe('Free account', () => {
   it('displays a `must remove users` warning if trying to delete an org with multiple users in a multi-org free account', () => {
     setupTest({

package.json

@@ -53,7 +53,7 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=00a445641ae596ea69e9cb74fd774bf92b9a2175 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=19b89d0e168edb6a27f801c6161f89ead6600401 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-local-cloud": "export REMOTE=../openapi/ && yarn generate-meta-cloud",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",

src/organizations/components/OrgProfileTab/index.tsx

@@ -46,9 +46,11 @@ const OrgProfileTab: FC = () => {
   const me = useSelector(getMe)
   const org = useSelector(getOrg)
   const quartzOrg = useSelector(selectCurrentOrg)
-  const dispatch = useDispatch()
+  const storageType = org?.defaultStorageType
   const {users} = useContext(UsersContext)
 
+  const dispatch = useDispatch()
+
   // Data about the user's organization is intentionally re-fetched when this component mounts again.
   const [orgDetailsStatus, setOrgDetailsStatus] = useState(
     RemoteDataState.NotStarted
@@ -81,6 +83,14 @@ const OrgProfileTab: FC = () => {
   const allowSelfRemoval = users.length > 1
   const showLeaveOrgButton = isFlagEnabled('createDeleteOrgs')
   const hasFetchedOrgDetails = orgDetailsStatus === RemoteDataState.Done
+  const hasFetchedStorageType = Boolean(storageType)
+
+  const storageTypeMap = {
+    iox: 'IOx',
+    tsm: 'TSM',
+  }
+
+  const formattedStorageType = storageTypeMap[storageType] || storageType
 
   const OrgProfile = () => (
     <FlexBox.Child
@@ -107,6 +117,9 @@ const OrgProfileTab: FC = () => {
             <LabeledData label="Cloud Provider" src={quartzOrg.provider} />
             <LabeledData label="Region" src={quartzOrg.regionCode} />
             <LabeledData label="Location" src={quartzOrg.regionName} />
+            {hasFetchedStorageType && (
+              <LabeledData label="Storage Type" src={formattedStorageType} />
+            )}
           </FlexBox>
           <CopyableLabeledData
             id="clusterUrl"

src/organizations/selectors/index.ts

@@ -4,12 +4,8 @@ import {get} from 'lodash'
 // Types
 import {AppState, Organization} from 'src/types'
 
-interface OrganizationWithStorageType extends Organization {
-  defaultStorageType?: string
-}
-
 export const isOrgIOx = (state: AppState): boolean => {
-  const org: OrganizationWithStorageType = getOrg(state)
+  const org: Organization = getOrg(state)
 
   return Boolean(
     org &&