@camunda/camunda-composite-components 0.2.17-rc.8 → 0.2.18-rc.0

package/lib/esm/components/c3-cluster-tag/c3-cluster-tag.js

@@ -6,7 +6,7 @@ export const C3ClusterTag = (props) => {
     return "stage" in props ? (React.createElement(Tag, { type: getColorForStage(props.stage) }, props.stage)) : "clusterUuid" in props ? (generateFromInput({
         clusterUuid: props.clusterUuid,
         allClusters: clusters,
-        conditionalRendering: props.conditionalRendering || ((_) => true),
+        conditionalRendering: props.conditionalRendering || (() => true),
     })) : (React.createElement(React.Fragment, null));
 };
 function generateFromInput(props) {

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-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/story-helpers.d.ts

@@ -15,7 +15,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

@@ -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.17-rc.8",
+	"version": "0.2.18-rc.0",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -52,27 +52,27 @@
 		"@types/react": "18.2.21",
 		"@types/react-dom": "18.2.7",
 		"@types/styled-components": "5.1.27",
-		"@typescript-eslint/eslint-plugin": "5.62.0",
-		"@typescript-eslint/parser": "5.62.0",
+		"@typescript-eslint/eslint-plugin": "6.7.5",
+		"@typescript-eslint/parser": "6.7.5",
 		"axe-playwright": "1.2.3",
 		"babel-loader": "9.1.3",
 		"copyfiles": "2.4.1",
 		"css-loader": "6.8.1",
-		"eslint": "8.47.0",
-		"eslint-config-prettier": "8.10.0",
-		"eslint-import-resolver-typescript": "3.6.0",
+		"eslint": "8.51.0",
+		"eslint-config-prettier": "9.0.0",
+		"eslint-import-resolver-typescript": "3.6.1",
 		"eslint-plugin-import": "2.28.1",
-		"eslint-plugin-prettier": "4.2.1",
+		"eslint-plugin-prettier": "5.0.1",
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"eslint-plugin-storybook": "0.6.14",
 		"event-source-polyfill": "1.0.31",
 		"husky": "8.0.3",
 		"mixpanel-browser": "2.47.0",
-		"prettier": "2.8.8",
+		"prettier": "3.0.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"rimraf": "3.0.2",
+		"rimraf": "5.0.5",
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
 		"serve": "14.2.1",
@@ -102,5 +102,5 @@
 	],
 	"author": "Camunda",
 	"license": "Apache-2.0",
-	"packageManager": "yarn@3.6.2"
+	"packageManager": "yarn@3.6.4"
 }