@camunda/camunda-composite-components 0.2.18-rc.2 → 0.2.18-rc.3

package/lib/esm/components/c3-help-center/c3-help-center.js

@@ -8,9 +8,9 @@ import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configu
 import { defaultTheme, useC3Profile, } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carbon-theme-provider";
 import { useC3HelpCenter } from "./c3-help-center-provider";
-export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
     const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen } = useC3HelpCenter();
-    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, } = useC3UserConfiguration() || {};
+    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, mixPanelTrack: configMixpanelTrack, } = useC3UserConfiguration() || {};
     const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
@@ -20,6 +20,14 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
     const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
     const [email, setEmail] = useState("");
     const [showSurvey, setShowSurvey] = useState(autoStartSurvey);
+    const mixpanelTrack = (event, data) => {
+        if (customMixpanelTrack) {
+            customMixpanelTrack(event, data);
+        }
+        else if (configMixpanelTrack) {
+            configMixpanelTrack(event, data);
+        }
+    };
     useEffect(() => {
         const updateResolvedTheme = ({ matches }) => {
             if (themeRef.current === "system") {
@@ -92,7 +100,7 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
                 });
                 setPersona({ wasShown: true });
             }
-            mixpanelTrack?.(`helpcenter:open`, {
+            mixpanelTrack?.("helpcenter:open", {
                 to: activeTab ?? firstTab,
                 from: origin,
             });

package/lib/esm/components/c3-help-center/c3-help-center.types.d.ts

@@ -49,6 +49,7 @@ export type Tab = {
 };
 export type Organization = {
     uuid: string;
+    name: string;
     salesPlan?: {
         type: string;
     };

package/lib/esm/components/c3-help-center/help-center.js

@@ -73,6 +73,9 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
     }, [showTabId]);
     if (activeTab === "feedback") {
         header = "Share your feedback";
+        content = (React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
+                header = head;
+            }, salesPlanType: organization?.salesPlan?.type ?? "" }));
     }
     else if (activeTab === "recommendations" &&
         Object.keys(tabTiles).length === 0 &&
@@ -173,11 +176,7 @@ export const HelpCenter = ({ configuration, persona, email, audience, flags = []
                             }))),
                         React.createElement("div", { style: { position: "absolute", bottom: "20px" } }, configuration.links.map((link) => (React.createElement(SideNavMenuItem, { key: link.label.split(" ").join("-").toLowerCase(), href: link.link, target: "_blank" },
                             React.createElement("span", { className: "cds--link" }, link.label))))))),
-                content,
-                React.createElement("div", { style: { display: activeTab === "feedback" ? "block" : "none" } },
-                    React.createElement(Feedback, { audience: audience, theme: theme, mixpanelTrack: mixpanelTrack, setHeader: (head) => {
-                            header = head;
-                        }, salesPlanType: organization?.salesPlan?.type ?? "" })))),
+                content)),
         persona.complete && activeTab === "recommendations" && (React.createElement(ModalFooter, { style: {
                 height: "62px",
                 paddingRight: "16px",

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

@@ -10,19 +10,21 @@ export type C3NavigationSideBarBaseProps = {
     elements?: C3NavigationElementProps[];
     bottomElements?: C3NavigationElementProps[];
 };
+export type CamundaOrg = {
+    activeLabel: string;
+    otherLabel: string;
+    orgName: string;
+    action: {
+        label: string;
+        onClick: () => void;
+    };
+};
 export type C3NavigationOrgSideBarProps = C3NavigationSideBarBaseProps & {
     type: "org";
     customElements?: {
-        activeOrganization?: {
-            activeLabel: string;
-            otherLabel: string;
-            orgName: string;
-            action: {
-                label: string;
-                onClick: () => void;
-            };
-        };
+        activeOrganization?: CamundaOrg;
     };
+    switchToOrg?: (orgId: string) => void;
 };
 export type C3NavigationInfoSideBarProps = C3NavigationSideBarBaseProps & {
     type: "info";

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

@@ -4,15 +4,47 @@ import { Enterprise } from "@carbon/react/icons";
 import C3NavigationSideBar from "./c3-navigation-sidebar";
 import { SwitcherDivider } from "./components";
 import { useOrgSidebarState } from "./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";
 const C3OrgSidebar = ({ sideBar }) => {
-    const { customElements, ...sideBarProps } = sideBar;
-    const activeOrganization = customElements?.activeOrganization;
+    const { customElements, switchToOrg, elements, ...sideBarProps } = sideBar;
     const { isOpen, setIsOpen } = useOrgSidebarState();
+    const { decodedAudience, setActiveOrgId, mixPanelTrack } = useC3UserConfiguration();
+    const { activeOrg, orgs } = useC3Profile();
+    const isCustomized = Boolean(customElements?.activeOrganization);
+    const onManageOrg = () => {
+        if (!isCustomized) {
+            mixPanelTrack?.("navBar:orgSettings:click", { orgId: activeOrg?.uuid });
+        }
+        if (sideBar.closeOnClick !== false)
+            setIsOpen(false);
+    };
+    const activeOrganization = customElements?.activeOrganization || {
+        activeLabel: "Active Organization",
+        orgName: activeOrg?.name || "",
+        action: {
+            onClick: onManageOrg,
+            label: "Manage",
+        },
+        otherLabel: "Other Organizations",
+    };
+    const switchOrg = (orgId) => {
+        setActiveOrgId(orgId);
+        mixPanelTrack?.("navBar:orgSwitch:click", { orgId });
+        switchToOrg?.(orgId);
+        setIsOpen(false);
+    };
+    const orgElements = orgs?.map((org) => ({
+        key: org.uuid,
+        label: org.name,
+        onClick: () => switchOrg(org.uuid),
+    }));
     const itemTabIndex = isOpen ? undefined : -1;
     return (React.createElement(C3NavigationSideBar, { sideBar: {
             ...sideBarProps,
+            elements: elements || orgElements,
             ariaLabel: sideBarProps.ariaLabel || "Organization Sidebars",
-        }, icon: React.createElement(Enterprise, { size: 20 }) }, activeOrganization && (React.createElement(React.Fragment, null,
+        }, icon: React.createElement(Enterprise, { size: 20 }) }, (customElements?.activeOrganization || activeOrg) && (React.createElement(React.Fragment, null,
         React.createElement("div", { style: {
                 padding: "1rem",
                 paddingTop: "1.5rem",
@@ -35,12 +67,11 @@ const C3OrgSidebar = ({ sideBar }) => {
                         overflow: "hidden",
                         whiteSpace: "nowrap",
                     }, title: activeOrganization.orgName }, activeOrganization.orgName)),
-            React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
+            isCustomized ? (React.createElement(Button, { size: "md", kind: "ghost", onClick: () => {
                     activeOrganization.action.onClick();
-                    if (sideBar.closeOnClick !== false) {
-                        setIsOpen(false);
-                    }
-                }, tabIndex: itemTabIndex }, activeOrganization.action.label)),
+                    onManageOrg();
+                }, tabIndex: itemTabIndex }, activeOrganization.action?.label)) : (activeOrg?.uuid &&
+                decodedAudience && (React.createElement(Button, { as: "a", size: "md", kind: "ghost", key: "org-management", href: `https://console.${decodedAudience}/org/${activeOrg?.uuid}/management`, onClick: onManageOrg, tabIndex: itemTabIndex }, activeOrganization.action?.label)))),
         sideBar.elements && sideBar.elements.length > 0 && (React.createElement(React.Fragment, null,
             React.createElement(SwitcherDivider, null),
             React.createElement(FormLabel, { style: {

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

@@ -14,6 +14,7 @@ import { C3SidebarStateProvider } from "./c3-navigation-sidebar/c3-sidebar-state
 import { C3HelpCenter } from "../c3-help-center/c3-help-center";
 import { C3ClusterTag } from "../c3-cluster-tag/c3-cluster-tag";
 import { useC3HelpCenter } from "../c3-help-center/c3-help-center-provider";
+import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 /**
  * UI SHELL
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
@@ -40,9 +41,11 @@ const ClusterTagWrapper = styled.div `
 `;
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
     const { setIsHelpCenterOpen, isHelpCenterOpen } = useC3HelpCenter();
+    const { activeOrg } = useC3Profile();
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
     const displayAppBar = appBarElementsLength > 0 || (!isLargeScreen && navbar.elements.length > 0);
+    const orgName = activeOrg?.name || navbar.orgName;
     if (app.prefix)
         console.warn("The `prefix` prop is deprecated and will be removed in a future release. It has been replaced with a Camunda icon.");
     return (React.createElement(C3SidebarStateProvider, { isNotificationSidebarOpen: notificationSideBar?.isOpen, isOrgSidebarOpen: orgSideBar?.isOpen, isInfoSidebarOpen: infoSideBar?.isOpen, isUserSidebarOpen: userSideBar?.isOpen },
@@ -90,14 +93,14 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                 }),
                             clusterUuid && (React.createElement(ClusterTagWrapper, null,
                                 React.createElement(C3ClusterTag, { clusterUuid: clusterUuid, conditionalRendering: options?.conditionalTagRendering }))),
-                            navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
+                            orgName && (React.createElement("div", { className: "bodyText", style: {
                                     fontSize: "14px",
                                     lineHeight: "3rem",
                                     textOverflow: "ellipsis",
                                     whiteSpace: "nowrap",
                                     overflow: "hidden",
                                     maxWidth: "150px",
-                                } }, navbar.orgName))),
+                                } }, orgName))),
                         actionButtons && React.createElement(C3ActionButtons, { elements: actionButtons }),
                         notificationSideBar && (React.createElement(C3NotificationSidebar, { sideBar: {
                                 ...notificationSideBar,

package/lib/esm/components/c3-navigation/story-helpers.d.ts

@@ -6,8 +6,9 @@ export declare function createAppBarProps(options?: {
     isOpen?: boolean;
     elements?: Array<C3NavigationElementProps>;
 }): C3NavigationProps["appBar"];
-export declare function createNavBarBarProps(options?: {
+export declare function createNavBarBarProps({ orgName, elements, }?: {
     elements?: C3NavigationNavBarProps["elements"];
+    orgName?: string;
 }): C3NavigationNavBarProps;
 export declare function createInfoSideBarProps(options: {
     isOpen: boolean;
@@ -15,7 +16,8 @@ export declare function createInfoSideBarProps(options: {
 }): C3NavigationProps["infoSideBar"];
 export declare function createOrgSideBarProps(options: {
     isOpen: boolean;
-    orgCount: number;
+    orgCount?: number;
+    useConfig?: boolean;
 }): C3NavigationProps["orgSideBar"];
 export declare function createUserSideBarProps(options: {
     isOpen: boolean;

package/lib/esm/components/c3-navigation/story-helpers.js

@@ -61,9 +61,9 @@ export function createAppBarProps(options = {}) {
         elementClicked: (element) => console.log(`event coming from the appBarProps: ${element} has been clicked`),
     };
 }
-export function createNavBarBarProps(options = {}) {
+export function createNavBarBarProps({ orgName = "Camunda", elements = undefined, } = {}) {
     return {
-        elements: options?.elements ?? [
+        elements: elements ?? [
             {
                 key: "dashboard",
                 label: "Dashboard",
@@ -79,7 +79,7 @@ export function createNavBarBarProps(options = {}) {
                 },
             },
         ],
-        orgName: "Camunda",
+        orgName,
         tags: [
             {
                 key: "stage",
@@ -125,36 +125,45 @@ export function createInfoSideBarProps(options) {
 }
 export function createOrgSideBarProps(options) {
     const elements = [];
-    for (let i = 0; i < options.orgCount; i++) {
-        elements.push({
-            key: `org-${i}`,
-            label: `Organization ${i}`,
-        });
+    if (options.orgCount !== undefined) {
+        for (let i = 0; i < options.orgCount; i++) {
+            elements.push({
+                key: `org-${i}`,
+                label: `Organization ${i}`,
+            });
+        }
     }
     return {
         isOpen: options.isOpen,
-        customElements: {
-            activeOrganization: {
-                activeLabel: "Active Organization",
-                otherLabel: "Other Organization",
-                orgName: "Camunda",
-                action: {
-                    label: "Manage",
-                    onClick: () => console.log("Manage organization"),
+        customElements: options.useConfig
+            ? undefined
+            : {
+                activeOrganization: {
+                    activeLabel: "Active Organization",
+                    otherLabel: "Other Organization",
+                    orgName: "Camunda",
+                    action: {
+                        label: "Manage",
+                        onClick: () => console.log("Manage organization"),
+                    },
                 },
             },
-        },
-        elements,
-        bottomElements: [
-            {
-                key: "createTrial",
-                label: "Create new Trial Org",
-                renderIcon: Add,
-                onClick: () => {
-                    console.log("clicked");
+        elements: options.useConfig ? undefined : elements,
+        bottomElements: options.useConfig
+            ? undefined
+            : [
+                {
+                    key: "createTrial",
+                    label: "Create new Trial Org",
+                    renderIcon: Add,
+                    onClick: () => {
+                        console.log("clicked");
+                    },
                 },
-            },
-        ],
+            ],
+        switchToOrg: options.useConfig
+            ? (orgId) => console.log("Switch to org: ", orgId)
+            : undefined,
     };
 }
 export function createUserSideBarProps(options) {

package/lib/esm/components/c3-onboarding-survey/c3-onboarding-survey.d.ts

@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { Persona } from "../c3-help-center/c3-help-center.types";
-import { Dict } from "mixpanel-browser";
+import { MixPanelTrack } from "../c3-user-configuration/c3-user-configuration-provider";
 export type C3OnboardingSurveyProps = {
     onRequestClose: () => void;
     onRequestSkip: () => void;
     personaCallback: (persona: Persona) => void;
     theme: "light" | "dark";
-    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
+    mixpanelTrack?: MixPanelTrack;
     origin: "console" | "webmodeler" | "operate" | "tasklist" | "optimize";
     modal: boolean;
     persona: Persona | undefined;

package/lib/esm/components/c3-onboarding-survey/c3-onboarding-survey.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { OnboardingSurvey } from "./onboardingSurvey";
 import { defaultOnboardingConfig } from "./defaultOnboardingConfig";
 import { getOnboardingConfig, submitSurvey, updatePersona, } from "../../api/help-center";
-import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
+import { useC3UserConfiguration, } from "../c3-user-configuration/c3-user-configuration-provider";
 export const C3OnboardingSurvey = (props) => {
     const { userToken, decodedToken, activeOrganizationId, decodedAudience } = useC3UserConfiguration() || {};
     const [persona, setPersona] = useState(props.persona);

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

@@ -37,7 +37,11 @@ export const C3ProfileProvider = ({ children }) => {
             setActiveOrg(res?.find((org) => org.uuid === config.activeOrganizationId) || null);
         });
         loadClusters();
-    }, [config?.activeOrganizationId, decodedToken, decodedAudience]);
+    }, [
+        config?.activeOrganizationId,
+        JSON.stringify(decodedToken),
+        decodedAudience,
+    ]);
     useEffect(() => {
         const updateSystemTheme = ({ matches }) => {
             if (themeRef.current === "system")

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

@@ -1,10 +1,13 @@
 import React, { FC, ReactNode } from "react";
 import { Endpoints, Stage } from "../../api/endpoints.const";
 import { DecodedToken } from "./authToken";
+import { Dict } from "mixpanel-browser";
+export type MixPanelTrack = (event: string, data?: Dict) => void;
 type C3UserConfigurationBase = {
     activeOrganizationId: string;
     userToken: string;
     getNewUserToken: () => Promise<string>;
+    mixPanelTrack?: MixPanelTrack;
 };
 type C3UserConfigurationWithEndpoints = C3UserConfigurationBase & {
     endpoints: Endpoints;
@@ -18,6 +21,8 @@ export type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfi
 export type C3UserConfigurationContextValue = C3UserConfiguration & {
     decodedToken: DecodedToken | null;
     decodedAudience: string | null;
+    setActiveOrgId: (newOrg: string) => void;
+    mixPanelTrack?: MixPanelTrack;
 };
 export declare const C3UserConfigurationContext: React.Context<C3UserConfigurationContextValue>;
 declare const C3UserConfigurationProvider: FC<C3UserConfiguration & {

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

@@ -9,19 +9,30 @@ export const C3UserConfigurationContext = React.createContext({
     decodedToken: null,
     decodedAudience: null,
     getNewUserToken: () => Promise.resolve(""),
+    setActiveOrgId: () => undefined,
 });
-const C3UserConfigurationProvider = ({ children, ...config }) => {
+const C3UserConfigurationProvider = ({ children, activeOrganizationId, ...config }) => {
     const [decodedToken, setDecodedToken] = useState(null);
     const [decodedAudience, setDecodedAudience] = useState(null);
+    const [activeOrgId, setActiveOrgId] = useState(activeOrganizationId);
     useEffect(() => {
         if (config.userToken)
             setDecodedToken(decodeJWT(config.userToken));
     }, [config.userToken]);
+    useEffect(() => {
+        setActiveOrgId(activeOrganizationId);
+    }, [activeOrganizationId]);
     useEffect(() => {
         const { audience } = decodedToken || {};
         setDecodedAudience((typeof audience === "string" ? audience : audience?.[0]) || null);
     }, [decodedToken]);
-    return (React.createElement(C3UserConfigurationContext.Provider, { value: { ...config, decodedToken, decodedAudience } },
+    return (React.createElement(C3UserConfigurationContext.Provider, { value: {
+            ...config,
+            activeOrganizationId: activeOrgId,
+            setActiveOrgId,
+            decodedToken,
+            decodedAudience,
+        } },
         React.createElement(C3ProfileProvider, null,
             React.createElement(C3HelpCenterProvider, null, children))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.2.18-rc.2",
+	"version": "0.2.18-rc.3",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -26,23 +26,23 @@
 		"test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
 	},
 	"devDependencies": {
-		"@babel/core": "7.23.2",
-		"@babel/preset-env": "7.23.2",
+		"@babel/core": "7.23.0",
+		"@babel/preset-env": "7.22.20",
 		"@babel/preset-react": "7.22.15",
-		"@babel/preset-typescript": "7.23.2",
+		"@babel/preset-typescript": "7.23.0",
 		"@carbon/react": "1.37.0",
 		"@mdx-js/react": "2.3.0",
 		"@playwright/test": "1.37.1",
-		"@storybook/addon-a11y": "7.5.1",
-		"@storybook/addon-actions": "7.5.1",
-		"@storybook/addon-docs": "7.5.1",
-		"@storybook/addon-essentials": "7.5.1",
-		"@storybook/addon-interactions": "7.5.1",
-		"@storybook/addon-links": "7.5.1",
-		"@storybook/blocks": "7.5.1",
+		"@storybook/addon-a11y": "7.4.6",
+		"@storybook/addon-actions": "7.4.6",
+		"@storybook/addon-docs": "7.4.6",
+		"@storybook/addon-essentials": "7.4.6",
+		"@storybook/addon-interactions": "7.4.6",
+		"@storybook/addon-links": "7.4.6",
+		"@storybook/blocks": "7.4.6",
 		"@storybook/preset-scss": "1.0.3",
-		"@storybook/react": "7.5.1",
-		"@storybook/react-webpack5": "7.5.1",
+		"@storybook/react": "7.4.6",
+		"@storybook/react-webpack5": "7.4.6",
 		"@storybook/test-runner": "0.13.0",
 		"@storybook/testing-library": "0.2.2",
 		"@types/carbon-components-react": "7.55.3",
@@ -65,7 +65,7 @@
 		"eslint-plugin-prettier": "5.0.1",
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
-		"eslint-plugin-storybook": "0.6.15",
+		"eslint-plugin-storybook": "0.6.14",
 		"event-source-polyfill": "1.0.31",
 		"husky": "8.0.3",
 		"mixpanel-browser": "2.47.0",
@@ -76,7 +76,7 @@
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
 		"serve": "14.2.1",
-		"storybook": "7.5.1",
+		"storybook": "7.4.6",
 		"style-loader": "3.3.3",
 		"styled-components": "6.0.7",
 		"typescript": "5.2.2",