feat: show active org in org list page (#6382)

* feat: use isActive prop to show active status

* feat: style active status element

* fix: prettier

* chore: fix typo

Author: blegesse-w

src/identity/components/OrganizationListTab/OrgList.tsx

@@ -113,6 +113,7 @@ export const OrgList: FC<Props> = ({
           regionCode={org.regionCode}
           regionName={org.regionName}
           provisioningStatus={org.provisioningStatus}
+          isActive={org.isActive}
         />
       ))}
     </>

src/identity/components/OrganizationListTab/OrganizationCard.scss

@@ -50,3 +50,14 @@
     color: $cf-white;
   }
 }
+
+.account--organizations-tab-active-org {
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 5px;
+  color: $c-rainforest;
+  display: inline-block;
+  left: 14px;
+  margin-top: 6px;
+  position: absolute;
+}

src/identity/components/OrganizationListTab/OrganizationCard.tsx

@@ -15,6 +15,7 @@ import './OrganizationCard.scss'
 
 interface OrgCardProps {
   name: string
+  isActive: boolean
   provider: string
   provisioningStatus?: string
   regionCode: string
@@ -34,6 +35,7 @@ const tooltipContent = (
 
 export const OrganizationCard: FC<OrgCardProps> = ({
   name,
+  isActive,
   provider,
   provisioningStatus,
   regionCode,
@@ -52,6 +54,9 @@ export const OrganizationCard: FC<OrgCardProps> = ({
       justifyContent={JustifyContent.SpaceBetween}
       testID="account--organizations-tab-orgs-card"
     >
+      {isActive && (
+        <span className="account--organizations-tab-active-org"></span>
+      )}
       <ResourceCard.Name
         name={name}
         className="account--organizations-tab-orgs-card-orgname"