Merge pull request #4313 from Shenali-SJ/breadcrumb-revamp

Revamp the breadcrumb in the super organization and sub organizations
wso2 · Oct 26, 2023 · 41f31b5 · 41f31b5
2 parents 9ded199 + b50f0fc
commit 41f31b5
Show file tree

Hide file tree

Showing 3 changed files with 255 additions and 248 deletions.
diff --git a/.changeset/thick-seas-wait.md b/.changeset/thick-seas-wait.md
@@ -0,0 +1,5 @@
+---
+"@wso2is/console": patch
+---
+
+Revamp the breadcrumb
diff --git a/.../features/organizations/components/organization-switch/organization-switch-breadcrumb.tsx b/.../features/organizations/components/organization-switch/organization-switch-breadcrumb.tsx
@@ -75,6 +75,11 @@ export const OrganizationSwitchBreadcrumb: FunctionComponent<OrganizationSwitchD
         shouldSendRequest
     );
 
+    const isSubOrg: boolean = window[ "AppUtils" ].getConfig().organizationName;
+
+    const isShowSwitcher: boolean = 
+        organizationConfigs?.showOrganizationDropdown || isSubOrg;
+
     useEffect(() => {
         if (!error) {
             return;
@@ -173,22 +178,15 @@ export const OrganizationSwitchBreadcrumb: FunctionComponent<OrganizationSwitchD
         ) : (
             <>
                 {
-                    !organizationConfigs.showSwitcherInTenants
-                        ? (
+                    organizationConfigs?.showSwitcherInTenants ? (
+                        breadcrumbList.length <= 4 && (
                             <Icon
                                 key={ index }
                                 name={ isDropDownOpen ? "angle up" : "angle down" }
                                 className="separator-icon organization-breadcrumb-icon"
                             />
-                        ) : (
-                            breadcrumbList.length <= 4 && (
-                                <Icon
-                                    key={ index }
-                                    name={ isDropDownOpen ? "angle up" : "angle down" }
-                                    className="separator-icon organization-breadcrumb-icon"
-                                />
-                            )
                         )
+                    ) : null
                 }
             </>
         );
@@ -204,7 +202,7 @@ export const OrganizationSwitchBreadcrumb: FunctionComponent<OrganizationSwitchD
                 <>
                     { breadcrumbList?.map(
                         (breadcrumb: BreadcrumbItem, index: number) => {
-                            if (index === 0 && !organizationConfigs.showSwitcherInTenants) {
+                            if (index === 0) {
                                 return (
                                     <>
                                         { generateSuperBreadcrumbItem(breadcrumb) }
@@ -289,7 +287,7 @@ export const OrganizationSwitchBreadcrumb: FunctionComponent<OrganizationSwitchD
                         className="breadcrumb-dropdown breadcrumb"
                         data-componentid={ `${ componentId }-breadcrumb-ellipsis` }
                     >
-                        <Dropdown.Menu>
+                        <Dropdown.Menu open={ false }>
                             { (breadcrumbList && breadcrumbList?.length > 0) && breadcrumbList?.map(
                                 (breadcrumb: BreadcrumbItem, index: number) => {
                                     if (
@@ -368,16 +366,18 @@ export const OrganizationSwitchBreadcrumb: FunctionComponent<OrganizationSwitchD
         );
     };
 
-    return (
-        <TenantDropdown 
-            dropdownTrigger={ triggerOrganizationDropdown() } 
-            disable={ 
-                organizationConfigs.showSwitcherInTenants
-                    ? breadcrumbList?.length > 4
-                    : false
-            } 
-        />
-    );
+    if (isShowSwitcher) {
+        return (
+            <TenantDropdown 
+                dropdownTrigger={ triggerOrganizationDropdown() } 
+                disable={ 
+                    organizationConfigs.showSwitcherInTenants
+                        ? breadcrumbList?.length > 4
+                        : isShowSwitcher ?? false
+                } 
+            />
+        );
+    }
 };
 
 OrganizationSwitchBreadcrumb.defaultProps = {