feat(identity): show deleted org status in orgs list (#6378)

* feat: styling for suspended org card

* feat: show provisioningStatus of org

* feat: tooltip for suspended org card

* fix: prettier

* fix: alphabetize and change suspended card color

* chore: alphabetize and clean up

Author: blegesse-w

src/identity/components/OrganizationListTab/OrgList.tsx

@@ -20,11 +20,11 @@ import {getSortedResources, SortTypes} from 'src/shared/utils/sort'
 
 // Types
 import {Sort} from '@influxdata/clockface'
-import {OrganizationSummaries} from 'src/client/unityRoutes'
+import {QuartzOrganization} from 'src/identity/apis/org'
 
 interface Props {
   currentPage: number
-  filteredOrgs: OrganizationSummaries
+  filteredOrgs: QuartzOrganization[]
   isAtOrgLimit: boolean
   pageHeight: number
   setTotalPages: (action: SetStateAction<number>) => void
@@ -112,6 +112,7 @@ export const OrgList: FC<Props> = ({
           provider={org.provider}
           regionCode={org.regionCode}
           regionName={org.regionName}
+          provisioningStatus={org.provisioningStatus}
         />
       ))}
     </>

src/identity/components/OrganizationListTab/OrganizationCard.scss

@@ -1,10 +1,20 @@
 @import '@influxdata/clockface/dist/variables.scss';
 
 .account--organizations-tab-orgs-card {
-  margin-top: $cf-space-3xs;
-  margin-bottom: $cf-space-3xs;
   background-color: $cf-grey-15;
   border-radius: 2px;
+  margin-bottom: $cf-space-3xs;
+  margin-top: $cf-space-3xs;
+}
+
+.account--organizations-tab-suspended-orgs-card {
+  background-color: #11121a;
+  border-radius: 2px;
+  margin-bottom: $cf-space-3xs;
+  margin-top: $cf-space-3xs;
+  div:not(:last-child) {
+    opacity: 0.5;
+  }
 }
 
 .account--organizations-tab-orgs-card-cluster-data {
@@ -18,13 +28,25 @@
 }
 
 .account-organizations-tab-orgs-card-location-data {
-  width: 240px;
+  width: 200px;
+}
+
+.account-organizations-tab-orgs-status--text {
+  color: $cf-white;
+}
+
+.account-organizations-tab-orgs-card-org-status {
+  width: 150px;
+  .cf-question-mark-tooltip {
+    background-color: $cf-white;
+    color: $cf-grey-5;
+  }
 }
 
 .account--organizations-tab-orgs-card-orgname {
   .cf-resource-name--text {
     font-size: $cf-text-base-1;
-    color: $cf-white;
     font-weight: $cf-font-weight--bold;
+    color: $cf-white;
   }
 }

src/identity/components/OrganizationListTab/OrganizationCard.tsx

@@ -3,28 +3,51 @@ import {
   FlexBox,
   FlexDirection,
   JustifyContent,
+  QuestionMarkTooltip,
   ResourceCard,
 } from '@influxdata/clockface'
 
+// Utils
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
 // Styles
 import './OrganizationCard.scss'
 
 interface OrgCardProps {
   name: string
   provider: string
+  provisioningStatus?: string
   regionCode: string
   regionName: string
 }
 
+const tooltipContent = (
+  <p>
+    Organizations can be reactivated within 7 days of deletion. Contact support
+    at{' '}
+    <SafeBlankLink href="mailto:support@influxdata.com">
+      support@influxdata.com
+    </SafeBlankLink>{' '}
+    to reactivate.
+  </p>
+)
+
 export const OrganizationCard: FC<OrgCardProps> = ({
   name,
   provider,
+  provisioningStatus,
   regionCode,
   regionName,
 }) => {
+  const isOrgSuspended = provisioningStatus === 'suspended'
+
   return (
     <ResourceCard
-      className="account--organizations-tab-orgs-card"
+      className={
+        isOrgSuspended
+          ? 'account--organizations-tab-suspended-orgs-card'
+          : 'account--organizations-tab-orgs-card'
+      }
       direction={FlexDirection.Row}
       justifyContent={JustifyContent.SpaceBetween}
       testID="account--organizations-tab-orgs-card"
@@ -43,6 +66,22 @@ export const OrganizationCard: FC<OrgCardProps> = ({
         <FlexBox className="account-organizations-tab-orgs-card-location-data">
           <b>Location:</b> &nbsp;{regionName}
         </FlexBox>
+        <FlexBox
+          justifyContent={JustifyContent.SpaceBetween}
+          className="account-organizations-tab-orgs-card-org-status"
+        >
+          {isOrgSuspended && (
+            <>
+              <b className="account-organizations-tab-orgs-status--text">
+                Deletion in progress
+              </b>
+              <QuestionMarkTooltip
+                diameter={15}
+                tooltipContents={tooltipContent}
+              />
+            </>
+          )}
+        </FlexBox>
       </ResourceCard.Meta>
     </ResourceCard>
   )