@camunda/camunda-composite-components 0.11.0 → 0.12.0

package/lib/esm/package.json

@@ -4,7 +4,7 @@
         "type": "git",
         "url": "git+https://github.com/camunda-cloud/camunda-composite-components.git"
     },
-    "version": "0.10.1-rc.2",
+    "version": "0.11.1-rc.1",
     "scripts": {
         "clean": "rimraf lib/",
         "build": "yarn clean && tsc",
@@ -34,7 +34,7 @@
         "@babel/preset-env": "7.25.7",
         "@babel/preset-react": "7.25.7",
         "@babel/preset-typescript": "7.25.7",
-        "@carbon/react": "1.55.0",
+        "@carbon/react": "1.66.0",
         "@mdx-js/react": "3.0.1",
         "@playwright/test": "1.45.2",
         "@semantic-release/changelog": "6.0.3",

package/lib/esm/src/components/c3-navigation/c3-navigation-appbar/c3-navigation-appbar.js

@@ -1,20 +1,116 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Close } from "@carbon/react/icons";
 import { useOnClickOutside } from "../helpers";
-import { HeaderGlobalAction, HeaderMenuItem, HeaderSideNavItems, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from "@carbon/react";
+import { FormLabel, HeaderGlobalAction, HeaderMenuItem, HeaderSideNavItems, Modal, SideNavItems, SideNavLink, SideNavMenu, SideNavMenuItem, } from "@carbon/react";
 import { C3AppMenuIcon } from "../../../assets/c3-icons";
 import { useC3Profile } from "../../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { useC3UserConfiguration } from "../../c3-user-configuration/c3-user-configuration-provider";
 import { APPS } from "../../../utils/camunda";
 import { NavWrapper, SideNav } from "./components";
+const getOrgLink = (app, orgId, domain) => {
+    switch (app) {
+        case "console": {
+            return `https://console.${domain}/org/${orgId}`;
+        }
+        case "modeler": {
+            return `https://modeler.${domain}/login?returnUrl=/org/${orgId}`;
+        }
+        default: {
+            return "#";
+        }
+    }
+};
+const OrgPickerModal = ({ isOpen, onCancel, orgs, activeOrg, loadingStatus, appToNavigateTo, domain, }) => {
+    const hasNoTeams = Object.values(orgs ?? {})?.every(({ org }) => {
+        return !org?.name;
+    });
+    const getClustersToRender = (clusters) => {
+        const hasAppReadPermission = activeOrg?.permissions?.cluster?.[appToNavigateTo]?.read;
+        const clustersToRender = clusters?.filter(({ status, endpoints }) => status[appToNavigateTo] === "Healthy" &&
+            endpoints[appToNavigateTo] &&
+            hasAppReadPermission);
+        return clustersToRender;
+    };
+    const hasNoTeamsWithClusters = Object.values(orgs ?? {})?.every(({ clusters }) => {
+        const isConsoleOrModeler = [APPS[0], APPS[1]].includes(appToNavigateTo);
+        return !isConsoleOrModeler && getClustersToRender(clusters).length === 0;
+    });
+    return (React.createElement(Modal, { danger: true, open: isOpen, modalHeading: "Select a team", onRequestClose: onCancel, passiveModal: true, loadingStatus: loadingStatus, size: "sm" },
+        React.createElement("div", { style: { marginLeft: "-1rem" } },
+            React.createElement(FormLabel, { style: {
+                    paddingTop: "15px",
+                    paddingLeft: "1rem",
+                } }, hasNoTeams
+                ? "No teams found"
+                : hasNoTeamsWithClusters
+                    ? "No teams with clusters found"
+                    : "Teams"),
+            React.createElement("div", { style: {
+                    marginTop: "-1rem",
+                } },
+                React.createElement(SideNavItems, null, Object.values(orgs ?? {})?.map(({ org, clusters }) => {
+                    const isConsoleOrModeler = [APPS[0], APPS[1]].includes(appToNavigateTo);
+                    const toOrg = getOrgLink(appToNavigateTo, org.uuid, domain ?? "");
+                    if (isConsoleOrModeler) {
+                        return (React.createElement(SideNavLink, { key: org?.uuid, href: toOrg }, org?.name));
+                    }
+                    const clustersToRender = getClustersToRender(clusters);
+                    if (clustersToRender.length === 0) {
+                        return null;
+                    }
+                    return (React.createElement(SideNavMenu, { key: org?.uuid, title: org?.name }, clustersToRender?.map((cluster) => {
+                        return (React.createElement(SideNavMenuItem, { key: cluster.uuid, href: cluster.endpoints[appToNavigateTo] }, cluster.name));
+                    })));
+                }))))));
+};
 export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar, }) => {
     const { currentApp, domain, analyticsTrack, currentClusterUuid } = useC3UserConfiguration();
-    const { clusters, activeOrg, isEnabled } = useC3Profile();
+    const { orgs, clusters, activeOrg, isEnabled, loadClustersById } = useC3Profile();
     const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen || false);
     const { setPanelRef: panelRef, setIconRef: iconRef } = useOnClickOutside(() => setAppBarOpen(false));
     const [appElements, setAppElements] = useState([]);
+    const [loadingStatus, setLoadingStatus] = useState("inactive");
+    const [clustersByOrgId, setClustersByOrgId] = useState(null);
+    const [appToNavigateTo, setAppToNavigateTo] = useState(APPS[0]);
     if (!appBar.elements && !isEnabled)
         console.warn("No app elements and user config provided. Please provide at least one of them.");
+    const isMemberOfTeam = useCallback((orgUuid) => orgs?.some(({ uuid }) => uuid === orgUuid) || false, [orgs]);
+    const getClustersForSuperOrg = useCallback(async () => {
+        const updatedClusterByOrgId = {};
+        await Promise.all(activeOrg?.childOrganizations
+            ?.filter((team) => isMemberOfTeam(team.uuid))
+            .map((org) => loadClustersById(org.uuid)?.then(({ result }) => {
+            updatedClusterByOrgId[org.uuid] = {
+                org,
+                clusters: result ?? [],
+            };
+        })) ?? []);
+        setClustersByOrgId(updatedClusterByOrgId);
+    }, [activeOrg, isMemberOfTeam]);
+    const handleSuperOrg = useCallback(() => {
+        if (!activeOrg?.uuid) {
+            return;
+        }
+        setIsOrgPickerModalOpen(true);
+        if (clustersByOrgId) {
+            return;
+        }
+        setLoadingStatus("active");
+        getClustersForSuperOrg()
+            .catch((error) => console.error(error))
+            .finally(() => {
+            setLoadingStatus("finished");
+        });
+    }, [clustersByOrgId, activeOrg, getClustersForSuperOrg]);
+    useEffect(() => {
+        if (activeOrg?.isSuperOrg) {
+            getClustersForSuperOrg()
+                .catch((error) => console.error(error))
+                .finally(() => {
+                setLoadingStatus("finished");
+            });
+        }
+    }, [activeOrg, getClustersForSuperOrg]);
     useEffect(() => {
         if (appBar.elements)
             return;
@@ -76,12 +172,24 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
                     }
                 }
             }
-            if (element.href || element.routeProps || element.subElements)
+            if (element.href || element.routeProps || element.subElements) {
+                if (activeOrg.isSuperOrg) {
+                    element.href = "#";
+                    element.routeProps = null;
+                    element.onClick = () => {
+                        setAppToNavigateTo(app);
+                        handleSuperOrg();
+                        // probs want to track?
+                        // analyticsTrack?.(`${app}:open`, { currentApp: app })
+                    };
+                }
                 defaultElements.push(element);
+            }
         }
         setAppElements(defaultElements);
-    }, [JSON.stringify(clusters), currentApp, domain]);
-    const appBarElements = appBar.elements || (clusters ? appElements : null);
+    }, [clusters, currentApp, domain, handleSuperOrg, getClustersForSuperOrg]);
+    const appBarElements = appBar.elements || (clusters || clustersByOrgId ? appElements : null);
+    const [isOrgPickerModalOpen, setIsOrgPickerModalOpen] = useState(false);
     return (React.createElement(React.Fragment, null,
         React.createElement(HeaderGlobalAction
         // eslint-disable-next-line
@@ -95,6 +203,9 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
             /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
             /* @ts-ignore */
             leaveDelayMs: 100 }, appBarOpen ? React.createElement(Close, { size: 20 }) : React.createElement(C3AppMenuIcon, { size: 20 })),
+        React.createElement(OrgPickerModal, { activeOrg: activeOrg, appToNavigateTo: appToNavigateTo, isOpen: isOrgPickerModalOpen, orgs: clustersByOrgId, onCancel: () => {
+                setIsOrgPickerModalOpen(false);
+            }, loadingStatus: loadingStatus, domain: domain }),
         React.createElement(NavWrapper, null,
             React.createElement(SideNav, { ref: panelRef, "aria-label": appBar.ariaLabel || "Side Navigation", expanded: appBarOpen, isPersistent: false },
                 React.createElement(SideNavItems, null,

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar-element.js

@@ -1,4 +1,4 @@
-import { Button } from "@carbon/react";
+import { Button, SideNavLink } from "@carbon/react";
 import React, { useEffect, useRef, useState } from "react";
 import { SwitcherDivider } from "./components";
 import styled from "styled-components";
@@ -7,6 +7,10 @@ const Row = styled.div `
 	justify-content: start;
 	align-items: center;
 
+	li {
+		list-style-type: none;
+	}
+
 	.cds--switcher__item:nth-child(1) {
 		margin-block-start: 0;
 	}
@@ -22,7 +26,8 @@ const Row = styled.div `
 const C3NavigationSidebarElement = (props) => {
     const sideBarElementRef = useRef(null);
     const [isOverflown, setIsOverflown] = useState(false);
-    const { overflowMenu } = props.element;
+    const { overflowMenu, isActive, isNavLink } = props.element;
+    const Element = isNavLink ? SideNavLink : Button;
     const handleSetIsOverflown = () => {
         const element = sideBarElementRef.current;
         setIsOverflown(element ? element.offsetWidth < element.scrollWidth : false);
@@ -35,7 +40,7 @@ const C3NavigationSidebarElement = (props) => {
     return (React.createElement(React.Fragment, null,
         props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
         React.createElement(Row, null,
-            React.createElement(Button, { style: {
+            React.createElement(Element, { style: {
                     width: overflowMenu
                         ? `calc(14rem - ${props.scrollBarWidth}px)`
                         : `calc(16rem - ${props.scrollBarWidth}px)`,
@@ -43,14 +48,14 @@ const C3NavigationSidebarElement = (props) => {
                         (!("elements" in props.sideBar) || !props.sideBar.elements)
                         ? { marginTop: "1.5rem" }
                         : {}),
-                }, size: "sm", kind: props.element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
+                }, size: "sm", kind: props.element.kind ?? "ghost", className: `cds--switcher__item ${isActive ? "cds--side-nav__item--active" : ""}`, onClick: () => {
                     if (props.element.onClick) {
                         props.element.onClick();
                     }
                     if (props.sideBar.closeOnClick !== false) {
                         props.setSideBarOpen(false);
                     }
-                }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon },
+                }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon, isActive: isNavLink ? isActive : undefined },
                 React.createElement("span", { ref: sideBarElementRef, title: isOverflown ? props.element.label : "", style: {
                         overflow: "hidden",
                         textOverflow: "ellipsis",

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types.d.ts

@@ -18,6 +18,7 @@ export type CamundaOrg = {
         label: string;
         onClick: () => void;
     };
+    teamsLabel?: string;
 };
 export type C3NavigationOrgSideBarProps = C3NavigationSideBarBaseProps & {
     type: "org";
@@ -26,6 +27,8 @@ export type C3NavigationOrgSideBarProps = C3NavigationSideBarBaseProps & {
     };
     switchToOrg?: (orgId: string) => void;
     manageOrg?: (orgId: string) => void;
+    manageSuperorg?: (orgId: string) => void;
+    manageTeam?: (orgId: string, teamId: string) => void;
 };
 export type C3NavigationInfoSideBarProps = C3NavigationSideBarBaseProps & {
     type: "info";

package/lib/esm/src/components/c3-navigation/c3-navigation-sidebar/c3-notification-sidebar.js

@@ -43,7 +43,7 @@ const EmptyStateDescription = styled(NotificationDescription) `
 `;
 export const C3NotificationSidebar = ({ sideBar }) => {
     const { onLinkClick } = sideBar;
-    const { notifications, markAsRead, dismiss, markAllAsRead, dismissAll, analytics, enabled, } = useContext(C3NotificationContext);
+    const { notifications, isFetching, markAsRead, dismiss, markAllAsRead, dismissAll, analytics, enabled, } = useContext(C3NotificationContext);
     const [unreadNotifications, setUnreadNotifications] = useState([]);
     const hasUnreadNotifications = notifications?.some(({ state }) => state === "new");
     const { isOpen } = useNotificationSidebarState();
@@ -86,7 +86,7 @@ export const C3NotificationSidebar = ({ sideBar }) => {
             ...sideBar,
             ariaLabel: sideBar.ariaLabel || "Notification Sidebar",
             callbacks: { beforeOpening, afterClosing },
-        }, icon: hasUnreadNotifications ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, "aria-label": "Notifications" })) },
+        }, icon: hasUnreadNotifications && !isFetching ? (React.createElement(C3NotificationsUnreadIcon, { size: 20 })) : (React.createElement(NotificationIcon, { size: 20, "aria-label": "Notifications" })) },
         React.createElement(PanelHeader, null,
             React.createElement(PanelTitle, null, "Notifications"),
             notifications.length > 0 && (

package/lib/esm/src/components/c3-navigation/c3-navigation.js

@@ -17,6 +17,7 @@ import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { HelpCenterHint } from "../c3-help-center/help-center-hint";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
+import { OrgName } from "./c3-org-name";
 import { Time, Warning } from "@carbon/react/icons";
 /**
  * UI SHELL
@@ -172,7 +173,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                                 marginTop: "0.75rem",
                                             } },
                                             React.createElement(Toggletip, null,
-                                                React.createElement(ToggletipButton, { label: buttonLabel },
+                                                React.createElement(ToggletipButton, { as: "span", label: buttonLabel },
                                                     React.createElement(Tag, { type: tag.color, renderIcon: tag.renderIcon, style: {
                                                             margin: "0",
                                                             cursor: "pointer",
@@ -192,14 +193,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                 }),
                             (clusterUuid || currentClusterUuid) && (React.createElement(ClusterTagWrapper, null,
                                 React.createElement(C3ClusterTag, { clusterUuid: clusterUuid || currentClusterUuid || "", conditionalRendering: options?.conditionalTagRendering }))),
-                            orgName && (React.createElement("div", { className: "bodyText", style: {
-                                    fontSize: "14px",
-                                    lineHeight: "3rem",
-                                    textOverflow: "ellipsis",
-                                    whiteSpace: "nowrap",
-                                    overflow: "hidden",
-                                    maxWidth: "150px",
-                                } }, orgName))),
+                            orgName && (React.createElement(OrgName, { orgName: orgName, isSuperOrg: activeOrg?.isSuperOrg, activeSuperOrg: activeOrg?.superOrganization?.name }))),
                         actionButtons && React.createElement(C3ActionButtons, { elements: actionButtons }),
                         notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: {
                                 ...notificationSideBar,

package/lib/esm/src/components/c3-navigation/c3-navigation.types.d.ts

@@ -26,6 +26,7 @@ export interface C3NavigationElementProps {
     subElements?: C3NavigationElementProps[];
     preceedingDivider?: boolean;
     overflowMenu?: React.ReactNode;
+    isNavLink?: boolean;
 }
 export interface C3NavigationNavBarProps {
     elements: Array<{

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-provider.d.ts

@@ -14,6 +14,7 @@ export type LinkProps = {
 };
 export type C3NotificationContextValue = {
     enabled: boolean;
+    isFetching: boolean;
     notifications: Notification[];
     markAsRead: (notification: Notification) => void;
     markAllAsRead: (notifications: Notification[]) => void;

package/lib/esm/src/components/c3-navigation/c3-notification-provider/c3-notification-provider.js

@@ -1,8 +1,9 @@
-import React, { useContext, useEffect, useState, } from "react";
+import React, { useContext, useEffect, useRef, useState, } from "react";
 import { NotificationService, } from "../../../api/notifications";
 import { C3UserConfigurationContext } from "../../c3-user-configuration/c3-user-configuration-provider";
 export const C3NotificationContext = React.createContext({
     enabled: false,
+    isFetching: true,
     notifications: [],
     markAsRead: () => undefined,
     markAllAsRead: () => undefined,
@@ -12,44 +13,46 @@ export const C3NotificationContext = React.createContext({
 });
 const C3NotificationProvider = ({ children, }) => {
     const [notifications, setNotifications] = useState([]);
-    const [isFetched, setFetched] = useState(false);
-    const [activeOrganizationId, setActiveOrganizationId] = useState("");
-    const [isEventStreamAvailable, setEventStreamAvailable] = useState(false);
+    const [isFetching, setIsFetching] = useState(true);
+    const isFetched = useRef(false);
+    const isEventStreamAvailable = useRef(false);
+    const activeOrganizationId = useRef("");
     const config = useContext(C3UserConfigurationContext);
     const enabled = !!config && !!config.activeOrganizationId && !!config.userToken;
     // if the organization changes, we need to reset the state
-    if (enabled && config.activeOrganizationId !== activeOrganizationId) {
-        setActiveOrganizationId(config.activeOrganizationId);
-        setFetched(false);
-        setNotifications([]);
+    if (enabled && config.activeOrganizationId !== activeOrganizationId.current) {
+        isFetched.current = false;
     }
-    if (enabled && !isFetched && config.userToken) {
-        NotificationService.getNotifications(config).then(({ result }) => {
-            if (result)
-                setNotifications(result);
-            setFetched(true);
-        });
-    }
-    if (enabled && isFetched && !isEventStreamAvailable) {
-        setEventStreamAvailable(true);
+    if (enabled && isFetched.current && !isEventStreamAvailable.current) {
+        isEventStreamAvailable.current = true;
         NotificationService.notificationsStream(config, (notification) => {
-            if (notification.orgId === activeOrganizationId) {
-                setNotifications(NotificationService.updateNotifications(notifications, notification));
+            if (notification.orgId === config.activeOrganizationId) {
+                setNotifications((currentNotifications) => NotificationService.updateNotifications(currentNotifications, notification));
             }
         });
     }
     useEffect(() => {
-        if (enabled && config.userToken) {
-            NotificationService.getNotifications(config).then(({ result }) => {
+        const orgHasChanged = activeOrganizationId.current !== config.activeOrganizationId;
+        if (enabled && !isFetched.current && config.userToken && orgHasChanged) {
+            setIsFetching(true);
+            NotificationService.getNotifications(config)
+                .then(({ result }) => {
                 if (result)
                     setNotifications(result);
-                setFetched(true);
+                isFetched.current = true;
+                activeOrganizationId.current = config.activeOrganizationId;
+            })
+                .catch(() => {
+                // ignore
+            })
+                .finally(() => {
+                setIsFetching(false);
             });
         }
-    }, [config?.userToken]);
+    }, [config?.userToken, enabled, isFetched, config.activeOrganizationId]);
     const changeState = (newState, { uuid, state }) => {
         if (enabled && state !== newState) {
-            setNotifications(NotificationService.updateNotificationState(notifications, uuid, newState));
+            setNotifications((currentNotifications) => NotificationService.updateNotificationState(currentNotifications, uuid, newState));
             NotificationService.changeState(config, uuid, newState);
         }
     };
@@ -90,6 +93,7 @@ const C3NotificationProvider = ({ children, }) => {
             dismiss,
             dismissAll,
             analytics,
+            isFetching,
         } }, children));
 };
 export function withNotifications(Component) {

package/lib/esm/src/components/c3-navigation/c3-org-name.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+export declare const OrgName: FC<{
+    orgName: string;
+    isSuperOrg?: boolean;
+    activeSuperOrg?: string;
+}>;

package/lib/esm/src/components/c3-navigation/c3-org-name.js

@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+import { body01, label01 } from "../styles";
+const OrgNameWrapper = styled.div `
+	display: flex;
+	padding-right: var(--12-px-075-rem-spacing-04, 12px);
+	align-items: center;
+	gap: var(--16-px-1-rem-spacing-05, 16px);
+	align-self: stretch;
+`;
+const SuperOrgWrapper = styled.div `
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+	gap: var(--0-px-0-rem-spacing-00, 0px);
+`;
+const SuperOrgName = styled.div `
+	color: var(--cds-text-secondary, #c6c6c6);
+	${label01}
+`;
+const TeamName = styled.div `
+	color: var(--cds-text-primary, #f4f4f4);
+	text-align: right;
+	${body01}
+`;
+const SingleOrgName = styled.div `
+	font-size: 14px;
+	line-height: 3rem;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	max-width: 150px;
+`;
+export const OrgName = ({ orgName, isSuperOrg, activeSuperOrg }) => (React.createElement(OrgNameWrapper, null, activeSuperOrg && !isSuperOrg ? (React.createElement(SuperOrgWrapper, { title: orgName },
+    React.createElement(SuperOrgName, null, activeSuperOrg),
+    React.createElement(TeamName, null, orgName))) : (React.createElement(SingleOrgName, { className: "bodyText", title: orgName }, orgName))));

package/lib/esm/src/components/c3-navigation/c3-org-sidebar/c3-org-sidebar.js

@@ -1,50 +1,85 @@
 import React, { useState } from "react";
-import { Button, FormLabel } from "@carbon/react";
+import { Button, FormLabel, TreeNode, TreeView, } from "@carbon/react";
 import { Enterprise } from "@carbon/react/icons";
 import C3NavigationSideBar from "../c3-navigation-sidebar/c3-navigation-sidebar";
 import { SwitcherDivider } from "../c3-navigation-sidebar/components";
 import { useOrgSidebarState } from "../c3-navigation-sidebar/c3-sidebar-state-provider";
 import { useC3Profile } from "../../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { useC3UserConfiguration } from "../../c3-user-configuration/c3-user-configuration-provider";
-import { ActiveOrgName, ActiveOrgNameWrapper, ActiveOrgWrapper, ActiveOrgWrapperCustom, ConfirmLeaveModal, ManageOrgOverflowMenu, } from "./components";
+import { ActiveOrgName, ActiveOrgNameWrapper, ActiveOrgWrapper, ActiveOrgWrapperCustom, ConfirmLeaveModal, ManageOrgOverflowMenu, OrgListWrapper, } from "./components";
 import { leaveOrganization } from "../../../api/organizations";
+function renderTree({ nodes, expanded, withIcons = false }) {
+    if (!nodes) {
+        return;
+    }
+    return nodes.map(({ children, renderIcon, isExpanded, isDisabled, ...nodeProps }) => (React.createElement(TreeNode, { key: nodeProps.id, renderIcon: withIcons ? renderIcon : null, isExpanded: expanded ?? isExpanded, ...(isDisabled && {
+            style: { cursor: "not-allowed" },
+            "aria-disabled": "true",
+        }), ...nodeProps }, renderTree({ nodes: children, expanded, withIcons }))));
+}
 const C3OrgSidebar = ({ sideBar }) => {
-    const { customElements, switchToOrg, manageOrg, elements, ...sideBarProps } = sideBar;
+    const { customElements, switchToOrg, manageOrg, manageSuperorg, manageTeam, ...sideBarProps } = sideBar;
     const { isOpen, setIsOpen, scrollBarWidth } = useOrgSidebarState();
     const { userToken, decodedAudience, domain, analyticsTrack, setActiveOrgId } = useC3UserConfiguration();
     const { activeOrg, orgs, removeOrg } = useC3Profile();
+    const superOrgs = orgs?.filter((org) => org.isSuperOrg) || [];
+    const hasSuperOrgs = superOrgs?.length;
+    const isSuperOrgAdmin = activeOrg?.isSuperOrg
+        ? activeOrg?.permissions?.org?.settings?.read
+        : false;
+    const teams = activeOrg?.childOrganizations?.filter(({ uuid }) => activeOrg?.isSuperOrg &&
+        orgs?.some((org) => org.uuid === uuid) &&
+        activeOrg?.uuid !== uuid);
     const isCustomized = Boolean(customElements?.activeOrganization);
     const [isConfirmLeaveModalOpen, setIsConfirmLeaveModalOpen] = useState(false);
     const [orgToLeave, setOrgToLeave] = useState(null);
     const [loadingStatus, setLoadingStatus] = useState("inactive");
     const isLastOrg = orgs?.length === 1;
-    const canUserLeaveOrg = (orgPermissions) => (!orgPermissions.org?.users?.owner?.update &&
+    const isMemberOfTeam = (orgUuid) => orgs?.some(({ uuid }) => uuid === orgUuid) || false;
+    const canUserLeaveOrg = (org) => (((isSuperOrgAdmin && isMemberOfTeam(org.uuid)) || !isSuperOrgAdmin) &&
+        !org.permissions?.org?.users?.owner?.update &&
         orgs?.length &&
         orgs.length > 1) ||
         false;
-    const canUserManageOrg = (orgPermissions) => orgPermissions.org?.settings?.read || false;
+    const canUserManageOrg = (org) => (isSuperOrgAdmin && !org.permissions) ||
+        org.permissions?.org?.settings?.read ||
+        false;
     const onManageCustomOrg = () => {
         if (sideBar.closeOnClick !== false)
             setIsOpen(false);
     };
-    const onManageOrg = (orgId) => {
+    const canSwitchToOrg = (orgId) => orgs?.some((org) => org.uuid === orgId);
+    const onManageOrg = ({ uuid, isSuperOrg }) => {
         setIsOpen(false);
         analyticsTrack?.("navBar:orgSettings:click", { orgId: activeOrg?.uuid });
-        if (manageOrg) {
-            manageOrg(orgId);
+        const isTeam = teams?.some((team) => team.uuid === uuid);
+        if (isSuperOrg && manageSuperorg) {
+            manageSuperorg(uuid);
+        }
+        else if (isSuperOrgAdmin && isTeam && manageTeam && activeOrg) {
+            manageTeam(activeOrg?.uuid, uuid);
+        }
+        else if (manageOrg) {
+            manageOrg(uuid);
         }
         else {
-            window.location.href = `https://console.${domain}/org/${orgId}/management`;
+            window.location.href =
+                isSuperOrgAdmin &&
+                    !isSuperOrg &&
+                    teams?.some((team) => team.uuid === uuid)
+                    ? `https://console.${domain}/org/${activeOrg?.uuid}/team/${uuid}`
+                    : `https://console.${domain}/org/${uuid}/${isSuperOrg ? "team" : "management"}`;
         }
     };
     const activeOrganization = customElements?.activeOrganization || {
-        activeLabel: "Active organization",
+        activeLabel: hasSuperOrgs ? "Organization" : "Active organization",
         orgName: activeOrg?.name || "",
         action: {
             onClick: onManageCustomOrg,
             label: "Manage",
         },
-        otherLabel: "Other organizations",
+        otherLabel: "",
+        teamsLabel: "Teams",
     };
     const switchOrg = (orgId, track) => {
         setActiveOrgId(orgId);
@@ -53,17 +88,6 @@ const C3OrgSidebar = ({ sideBar }) => {
         switchToOrg?.(orgId);
         setIsOpen(false);
     };
-    const orgElements = orgs
-        ?.filter(({ uuid }) => uuid !== activeOrg?.uuid)
-        .map((org) => ({
-        key: org.uuid,
-        label: org.name,
-        onClick: () => switchOrg(org.uuid, true),
-        overflowMenu: (React.createElement(ManageOrgOverflowMenu, { canManage: canUserManageOrg(org.permissions), canLeave: canUserLeaveOrg(org.permissions), isLastOrg: isLastOrg, orgName: org.name, onManage: () => onManageOrg(org.uuid), onRequestToLeave: () => {
-                setOrgToLeave(org);
-                setIsConfirmLeaveModalOpen(true);
-            } })),
-    }));
     const confirmLeaveOrg = async () => {
         if (orgToLeave && decodedAudience && userToken) {
             setLoadingStatus("active");
@@ -85,9 +109,27 @@ const C3OrgSidebar = ({ sideBar }) => {
         }
     };
     const itemTabIndex = isOpen ? undefined : -1;
+    const groupedBySuperOrg = orgs?.reduce((acc, curr) => {
+        const superOrgUuid = curr?.superOrganization?.uuid;
+        if (!superOrgUuid) {
+            acc[curr.uuid] = acc[curr.uuid] ?? {
+                ...curr,
+                childOrganizations: {},
+            };
+            return acc;
+        }
+        acc[superOrgUuid] = acc[superOrgUuid] ?? {
+            ...curr?.superOrganization,
+            childOrganizations: {},
+        };
+        acc[superOrgUuid].childOrganizations[curr.uuid] = {
+            ...curr,
+            childOrganizations: {},
+        };
+        return acc;
+    }, {}) ?? {};
     return (React.createElement(C3NavigationSideBar, { sideBar: {
             ...sideBarProps,
-            elements: elements || orgElements,
             ariaLabel: sideBarProps.ariaLabel || "Organization Sidebars",
         }, icon: React.createElement(Enterprise, { size: 20 }) }, (customElements?.activeOrganization || activeOrg) && (React.createElement(React.Fragment, null,
         isCustomized ? (React.createElement(ActiveOrgWrapperCustom, null,
@@ -105,7 +147,7 @@ const C3OrgSidebar = ({ sideBar }) => {
             React.createElement(FormLabel, null, activeOrganization.activeLabel),
             React.createElement(ActiveOrgNameWrapper, null,
                 React.createElement(ActiveOrgName, { className: "textPrimary", title: activeOrganization.orgName }, activeOrganization.orgName),
-                activeOrg?.uuid && domain && (React.createElement(ManageOrgOverflowMenu, { canManage: canUserManageOrg(activeOrg?.permissions), canLeave: canUserLeaveOrg(activeOrg?.permissions), orgName: activeOrg?.name || "", isLastOrg: isLastOrg, onManage: () => onManageOrg(activeOrg?.uuid), onRequestToLeave: () => {
+                activeOrg?.uuid && domain && (React.createElement(ManageOrgOverflowMenu, { canManage: canUserManageOrg(activeOrg), canLeave: canUserLeaveOrg(activeOrg), isLastOrg: isLastOrg, isOrgMember: isMemberOfTeam(activeOrg.uuid), orgName: activeOrg.name, onManage: () => onManageOrg(activeOrg), onRequestToLeave: () => {
                         setOrgToLeave(activeOrg);
                         setIsConfirmLeaveModalOpen(true);
                     } }))),
@@ -113,13 +155,41 @@ const C3OrgSidebar = ({ sideBar }) => {
                     setIsConfirmLeaveModalOpen(false);
                     setOrgToLeave(null);
                 }, loadingStatus: loadingStatus }))),
-        ((sideBar.elements && sideBar.elements.length > 0) ||
-            (orgElements && orgElements.length > 0)) && (React.createElement(React.Fragment, null,
-            React.createElement(SwitcherDivider, null),
-            React.createElement(FormLabel, { style: {
-                    paddingTop: "15px",
-                    paddingLeft: "1rem",
-                    paddingBottom: ".25rem",
-                } }, activeOrganization.otherLabel)))))));
+        React.createElement(SwitcherDivider, null),
+        React.createElement(OrgListWrapper, null,
+            React.createElement(TreeView, { label: "All organizations", ...(activeOrg?.uuid ? { selected: [activeOrg?.uuid] } : {}) }, renderTree({
+                nodes: Object.values(groupedBySuperOrg)?.map((element) => {
+                    const userTeams = Object.values(element?.childOrganizations)?.filter((child) => isMemberOfTeam(child.uuid));
+                    const defaultIsExpanded = (activeOrg?.uuid === element.uuid ||
+                        !isMemberOfTeam(element.uuid) ||
+                        userTeams?.some((team) => activeOrg?.uuid === team.uuid)) ??
+                        false;
+                    return {
+                        children: userTeams?.length > 0
+                            ? userTeams.map((team) => {
+                                return {
+                                    id: team.uuid,
+                                    label: team.name,
+                                    isExpanded: false,
+                                    value: team.uuid,
+                                    renderIcon: null,
+                                    onSelect: canSwitchToOrg(team.uuid)
+                                        ? () => switchOrg(team.uuid, true)
+                                        : undefined,
+                                };
+                            })
+                            : null,
+                        id: element.uuid,
+                        label: element.name,
+                        value: element.uuid,
+                        renderIcon: null,
+                        isExpanded: defaultIsExpanded,
+                        isDisabled: !isMemberOfTeam(element.uuid),
+                        onSelect: canSwitchToOrg(element.uuid)
+                            ? () => switchOrg(element.uuid, true)
+                            : undefined,
+                    };
+                }),
+            })))))));
 };
 export default C3OrgSidebar;

package/lib/esm/src/components/c3-navigation/c3-org-sidebar/components.d.ts

@@ -1,9 +1,14 @@
 import React, { FC } from "react";
 import { ModalProps } from "@carbon/react/es/components/Modal/Modal";
+import { DropdownProps } from "@carbon/react/lib/components/Dropdown/Dropdown";
+import { Organization } from "../../../utils/camunda.types";
 export declare const ActiveOrgWrapperCustom: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const ActiveOrgWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $scrollBarWidth: number;
 }>>;
+export declare const ActiveSuperorgWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $scrollBarWidth: number;
+}>>;
 export declare const ActiveOrgNameWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const ActiveOrgName: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isCustomized?: boolean | undefined;
@@ -19,7 +24,12 @@ export declare const ManageOrgOverflowMenu: FC<{
     canManage: boolean;
     canLeave: boolean;
     isLastOrg?: boolean;
+    isOrgMember: boolean;
     orgName: string;
     onManage: () => void;
     onRequestToLeave: () => void;
 }>;
+export declare const StyledDropdown: FC<DropdownProps<Organization> & {
+    $scrollBarWidth: number;
+}>;
+export declare const OrgListWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/esm/src/components/c3-navigation/c3-org-sidebar/components.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Modal, OverflowMenu, OverflowMenuItem, Popover, PopoverContent, } from "@carbon/react";
+import { Dropdown, Modal, OverflowMenu, OverflowMenuItem, Popover, PopoverContent, } from "@carbon/react";
 import styled from "styled-components";
 export const ActiveOrgWrapperCustom = styled.div `
 	padding: 1.5rem 1rem 15px;
@@ -11,6 +11,16 @@ export const ActiveOrgWrapper = styled.div `
 	padding: 15px 0 0.5rem 1rem;
 	width: ${({ $scrollBarWidth }) => `calc(16rem - ${$scrollBarWidth}px)`};
 `;
+export const ActiveSuperorgWrapper = styled.div `
+	padding: 24px 0 0.5rem 0;
+	width: ${({ $scrollBarWidth }) => `calc(16rem - ${$scrollBarWidth}px)`};
+	display: flex;
+	flex-direction: column;
+
+	label {
+		padding-left: 1rem;
+	}
+`;
 export const ActiveOrgNameWrapper = styled.div `
 	display: flex;
 	align-items: center;
@@ -47,18 +57,34 @@ const StyledOverflowMenu = styled(OverflowMenu) `
 		width: 165px;
 	}
 `;
-export const ManageOrgOverflowMenu = ({ canManage, canLeave, isLastOrg, onManage, onRequestToLeave, orgName, }) => {
+export const ManageOrgOverflowMenu = ({ canManage, canLeave, isLastOrg, isOrgMember, onManage, onRequestToLeave, orgName, }) => {
     const [isPopoverShown, setIsPopoverShown] = React.useState(false);
     const leaveMenuItem = (React.createElement(OverflowMenuItem, { itemText: "Leave organization", disabled: !canLeave, onClick: onRequestToLeave, onMouseOver: () => setIsPopoverShown(true), onMouseLeave: () => setIsPopoverShown(false), "aria-label": `Leave organization - ${orgName}` }));
-    const popoverLabel = isLastOrg
-        ? "You need to be a member of at least one organization. Join a different organization first if you wish to leave."
-        : "Owners cannot leave an organization directly. Assign another user as an owner if you wish to leave.";
+    const popoverLabel = !isOrgMember
+        ? "You are not a member of this team. You can only leave teams you are a member of."
+        : isLastOrg
+            ? "You need to be a member of at least one organization. Join a different organization first if you wish to leave."
+            : "Owners cannot leave an organization directly. Assign another user as an owner if you wish to leave.";
     return (React.createElement(StyledOverflowMenu, { size: "sm", flipped: true, "aria-label": "Organization options menu", 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
         align: "top-right", "data-floating-menu-container": "cds--header-panel" },
         canManage && (React.createElement(OverflowMenuItem, { itemText: "Manage organization", onClick: onManage, "aria-label": `Manage organization - ${orgName}` })),
         canLeave ? (leaveMenuItem) : (React.createElement(PopoverWrapper, { open: isPopoverShown, label: popoverLabel, align: "bottom-right" },
             leaveMenuItem,
             React.createElement(PopoverContent, null, popoverLabel)))));
 };
+export const StyledDropdown = styled(Dropdown) `
+	grid-gap: 0;
+
+	div {
+		max-width: calc(173px - ${({ $scrollBarWidth }) => $scrollBarWidth || 0}px);
+	}
+
+	.cds--list-box__menu {
+		max-inline-size: none;
+		min-inline-size: unset;
+	}
+`;
+export const OrgListWrapper = styled.div `
+	padding: 1rem 1rem 15px;
+`;

package/lib/esm/src/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.d.ts

@@ -1,6 +1,7 @@
 import React, { FC, PropsWithChildren } from "react";
 import { ResolvedTheme } from "./carbon-theme-provider";
 import { Cluster, Organization } from "../../../utils/camunda.types";
+import { RequestResponse } from "../../../api/api";
 export type Theme = "light" | "dark" | "system";
 export declare const defaultTheme: "light";
 export type C3ProfileContextValue = {
@@ -14,6 +15,7 @@ export type C3ProfileContextValue = {
     reloadClusters: () => void;
     resolvedTheme: ResolvedTheme;
     onThemeChange: (newTheme: Theme) => void;
+    loadClustersById: (orgId: string) => Promise<RequestResponse<Cluster[] | null>> | undefined;
 };
 export declare const C3ProfileContext: React.Context<C3ProfileContextValue>;
 export declare const C3ProfileProvider: FC<PropsWithChildren>;

package/lib/esm/src/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.js

@@ -14,6 +14,7 @@ export const C3ProfileContext = createContext({
     reloadClusters: () => undefined,
     resolvedTheme: defaultTheme,
     onThemeChange: () => undefined,
+    loadClustersById: () => undefined,
 });
 export const C3ProfileProvider = ({ children }) => {
     const { decodedToken, decodedAudience, analyticsTrack, ...config } = useContext(C3UserConfigurationContext);
@@ -26,10 +27,15 @@ export const C3ProfileProvider = ({ children }) => {
     const isConfigValid = !!(config.userToken &&
         config.activeOrganizationId &&
         decodedAudience);
+    const loadClustersById = (orgId) => {
+        if (!isConfigValid)
+            return;
+        return getClusters(decodedAudience, config.userToken, orgId);
+    };
     const loadClusters = () => {
         if (!isConfigValid)
             return;
-        getClusters(decodedAudience, config.userToken, config.activeOrganizationId).then(({ result }) => {
+        loadClustersById(config.activeOrganizationId)?.then(({ result }) => {
             if (result)
                 setClusters(result);
         });
@@ -39,7 +45,8 @@ export const C3ProfileProvider = ({ children }) => {
             return;
         getOrgs(decodedAudience, config.userToken).then(({ result: res }) => {
             setOrgs(res?.sort(({ name: a }, { name: b }) => a.localeCompare(b)) || null);
-            setActiveOrg(res?.find((org) => org.uuid === config.activeOrganizationId) || null);
+            const newActiveOrg = res?.find((org) => org.uuid === config.activeOrganizationId) || null;
+            setActiveOrg(newActiveOrg);
         });
     };
     const removeOrg = (orgId) => {
@@ -58,11 +65,7 @@ export const C3ProfileProvider = ({ children }) => {
             }
         }
         loadClusters();
-    }, [
-        config?.activeOrganizationId,
-        JSON.stringify(decodedToken),
-        decodedAudience,
-    ]);
+    }, [config?.activeOrganizationId, decodedToken, decodedAudience]);
     useEffect(() => {
         const updateSystemTheme = ({ matches }) => {
             if (themeRef.current === "system")
@@ -108,6 +111,7 @@ export const C3ProfileProvider = ({ children }) => {
             reloadClusters: loadClusters,
             removeOrg,
             onThemeChange,
+            loadClustersById,
         } }, content));
 };
 export const useC3Profile = () => useContext(C3ProfileContext);

package/lib/esm/src/components/styles.d.ts

@@ -9,5 +9,6 @@ export declare const body02: import("styled-components").RuleSet<object>;
 export declare const Body02: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
 export declare const body01: import("styled-components").RuleSet<object>;
 export declare const Body01: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
+export declare const label01: import("styled-components").RuleSet<object>;
 export declare const fontMapping: import("styled-components").RuleSet<object>;
 export declare const DefaultStyleWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/esm/src/components/styles.js

@@ -53,6 +53,12 @@ export const body01 = css `
 export const Body01 = styled.p `
 	${body01}
 `;
+export const label01 = css `
+	font-size: var(--cds-label-01-font-size);
+	font-weight: var(--cds-label-01-font-weight);
+	letter-spacing: var(--cds-label-01-letter-spacing);
+	line-height: var(--cds-label-01-line-height);
+`;
 export const fontMapping = css `
 	h1 {
 		${heading04}

package/lib/esm/src/utils/camunda.types.d.ts

@@ -32,6 +32,9 @@ export type Organization = {
         salesPlan: string;
         trialStateExpired: boolean;
     };
+    isSuperOrg?: boolean;
+    childOrganizations?: Organization[];
+    superOrganization?: Organization;
 };
 export type Cluster = {
     uuid: string;

package/package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "git+https://github.com/camunda-cloud/camunda-composite-components.git"
 	},
-	"version": "0.11.0",
+	"version": "0.12.0",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -34,7 +34,7 @@
 		"@babel/preset-env": "7.25.7",
 		"@babel/preset-react": "7.25.7",
 		"@babel/preset-typescript": "7.25.7",
-		"@carbon/react": "1.55.0",
+		"@carbon/react": "1.66.0",
 		"@mdx-js/react": "3.0.1",
 		"@playwright/test": "1.45.2",
 		"@semantic-release/changelog": "6.0.3",