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

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: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
+export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
     const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen } = useC3HelpCenter();
-    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, mixPanelTrack: configMixpanelTrack, } = useC3UserConfiguration() || {};
+    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, } = useC3UserConfiguration() || {};
     const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
@@ -20,14 +20,6 @@ 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") {
@@ -100,7 +92,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,7 +49,6 @@ export type Tab = {
 };
 export type Organization = {
     uuid: string;
-    name: string;
     salesPlan?: {
         type: string;
     };

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

@@ -73,9 +73,6 @@ 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 &&
@@ -176,7 +173,11 @@ 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)),
+                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 ?? "" })))),
         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,21 +10,19 @@ 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?: CamundaOrg;
+        activeOrganization?: {
+            activeLabel: string;
+            otherLabel: string;
+            orgName: string;
+            action: {
+                label: string;
+                onClick: () => void;
+            };
+        };
     };
-    switchToOrg?: (orgId: string) => void;
 };
 export type C3NavigationInfoSideBarProps = C3NavigationSideBarBaseProps & {
     type: "info";

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

@@ -4,47 +4,15 @@ 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, switchToOrg, elements, ...sideBarProps } = sideBar;
+    const { customElements, ...sideBarProps } = sideBar;
+    const activeOrganization = customElements?.activeOrganization;
     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 }) }, (customElements?.activeOrganization || activeOrg) && (React.createElement(React.Fragment, null,
+        }, icon: React.createElement(Enterprise, { size: 20 }) }, activeOrganization && (React.createElement(React.Fragment, null,
         React.createElement("div", { style: {
                 padding: "1rem",
                 paddingTop: "1.5rem",
@@ -67,11 +35,12 @@ const C3OrgSidebar = ({ sideBar }) => {
                         overflow: "hidden",
                         whiteSpace: "nowrap",
                     }, title: activeOrganization.orgName }, activeOrganization.orgName)),
-            isCustomized ? (React.createElement(Button, { size: "md", kind: "ghost", onClick: () => {
+            React.createElement(Button, { size: "md", kind: "ghost", key: "org-management", onClick: () => {
                     activeOrganization.action.onClick();
-                    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)))),
+                    if (sideBar.closeOnClick !== false) {
+                        setIsOpen(false);
+                    }
+                }, 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,8 +15,7 @@ export declare function createInfoSideBarProps(options: {
 }): C3NavigationProps["infoSideBar"];
 export declare function createOrgSideBarProps(options: {
     isOpen: boolean;
-    orgCount?: number;
-    useConfig?: boolean;
+    orgCount: number;
 }): C3NavigationProps["orgSideBar"];
 export declare function createUserSideBarProps(options: {
     isOpen: boolean;

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

@@ -125,45 +125,36 @@ export function createInfoSideBarProps(options) {
 }
 export function createOrgSideBarProps(options) {
     const elements = [];
-    if (options.orgCount !== undefined) {
-        for (let i = 0; i < options.orgCount; i++) {
-            elements.push({
-                key: `org-${i}`,
-                label: `Organization ${i}`,
-            });
-        }
+    for (let i = 0; i < options.orgCount; i++) {
+        elements.push({
+            key: `org-${i}`,
+            label: `Organization ${i}`,
+        });
     }
     return {
         isOpen: options.isOpen,
-        customElements: options.useConfig
-            ? undefined
-            : {
-                activeOrganization: {
-                    activeLabel: "Active Organization",
-                    otherLabel: "Other Organization",
-                    orgName: "Camunda",
-                    action: {
-                        label: "Manage",
-                        onClick: () => console.log("Manage organization"),
-                    },
+        customElements: {
+            activeOrganization: {
+                activeLabel: "Active Organization",
+                otherLabel: "Other Organization",
+                orgName: "Camunda",
+                action: {
+                    label: "Manage",
+                    onClick: () => console.log("Manage organization"),
                 },
             },
-        elements: options.useConfig ? undefined : elements,
-        bottomElements: options.useConfig
-            ? undefined
-            : [
-                {
-                    key: "createTrial",
-                    label: "Create new Trial Org",
-                    renderIcon: Add,
-                    onClick: () => {
-                        console.log("clicked");
-                    },
+        },
+        elements,
+        bottomElements: [
+            {
+                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 { MixPanelTrack } from "../c3-user-configuration/c3-user-configuration-provider";
+import { Dict } from "mixpanel-browser";
 export type C3OnboardingSurveyProps = {
     onRequestClose: () => void;
     onRequestSkip: () => void;
     personaCallback: (persona: Persona) => void;
     theme: "light" | "dark";
-    mixpanelTrack?: MixPanelTrack;
+    mixpanelTrack?: (event: string, data: Dict | undefined) => void;
     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,11 +37,7 @@ export const C3ProfileProvider = ({ children }) => {
             setActiveOrg(res?.find((org) => org.uuid === config.activeOrganizationId) || null);
         });
         loadClusters();
-    }, [
-        config?.activeOrganizationId,
-        JSON.stringify(decodedToken),
-        decodedAudience,
-    ]);
+    }, [config?.activeOrganizationId, decodedToken, decodedAudience]);
     useEffect(() => {
         const updateSystemTheme = ({ matches }) => {
             if (themeRef.current === "system")

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

@@ -1,13 +1,10 @@
 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;
@@ -21,8 +18,6 @@ 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,30 +9,19 @@ export const C3UserConfigurationContext = React.createContext({
     decodedToken: null,
     decodedAudience: null,
     getNewUserToken: () => Promise.resolve(""),
-    setActiveOrgId: () => undefined,
 });
-const C3UserConfigurationProvider = ({ children, activeOrganizationId, ...config }) => {
+const C3UserConfigurationProvider = ({ children, ...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,
-            activeOrganizationId: activeOrgId,
-            setActiveOrgId,
-            decodedToken,
-            decodedAudience,
-        } },
+    return (React.createElement(C3UserConfigurationContext.Provider, { value: { ...config, 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.0",
+	"version": "0.2.18-rc.2",
 	"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.0",
-		"@babel/preset-env": "7.22.20",
+		"@babel/core": "7.23.2",
+		"@babel/preset-env": "7.23.2",
 		"@babel/preset-react": "7.22.15",
-		"@babel/preset-typescript": "7.23.0",
+		"@babel/preset-typescript": "7.23.2",
 		"@carbon/react": "1.37.0",
 		"@mdx-js/react": "2.3.0",
 		"@playwright/test": "1.37.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/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/preset-scss": "1.0.3",
-		"@storybook/react": "7.4.6",
-		"@storybook/react-webpack5": "7.4.6",
+		"@storybook/react": "7.5.1",
+		"@storybook/react-webpack5": "7.5.1",
 		"@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.14",
+		"eslint-plugin-storybook": "0.6.15",
 		"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.4.6",
+		"storybook": "7.5.1",
 		"style-loader": "3.3.3",
 		"styled-components": "6.0.7",
 		"typescript": "5.2.2",