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

package/README.md

@@ -1,14 +1,26 @@
 # Camunda Composite Components
 
-Camunda Composite Components (also known as **C3**) is the main software artifact of the [Design System Team](https://confluence.camunda.com/display/HAN/Design+System).
+Camunda Composite Components (also known as **C3**) is the main software
+artifact of the
+[Design System Team](https://confluence.camunda.com/display/HAN/Design+System).
 
-We have a dedicated slack channel for everyone having questions, comments, bug reports or concerns about this repository: [#camunda-composite-components](https://app.slack.com/client/T0PM0P1SA/C049YH1C202/thread/C03NF7FH17G-1671730364.608129). For more general questions towards the Design System team, please use [#ask-cds](https://app.slack.com/client/T0PM0P1SA/C04FUEGLG8N).
+We have a dedicated slack channel for everyone having questions, comments, bug
+reports or concerns about this repository:
+[#camunda-composite-components](https://app.slack.com/client/T0PM0P1SA/C049YH1C202/thread/C03NF7FH17G-1671730364.608129).
+For more general questions towards the Design System team, please use
+[#ask-cds](https://app.slack.com/client/T0PM0P1SA/C04FUEGLG8N).
 
-If you like the idea of having a repository for your own composite components - how about you do your own **Camunda Custom Composite Components**? Just go over [here](https://github.com/camunda-cloud/c4-starter), fork it, lezgo! A list of C4-Adopters can be found <a href="#c4list">here</a>.
+If you like the idea of having a repository for your own composite components -
+how about you do your own **Camunda Custom Composite Components**? Just go over
+[here](https://github.com/camunda-cloud/c4-starter), fork it, lezgo! A list of
+C4-Adopters can be found <a href="#c4list">here</a>.
 
 ## Storybook
 
-A live view of the `main` branch can be found [here](https://camunda-composite-components.pages.dev/). When opening a PR, a version of storybook with the changes is deployed automatically and can be accessed by clicking on the link in the PR.
+A live view of the `main` branch can be found
+[here](https://camunda-composite-components.pages.dev/). When opening a PR, a
+version of storybook with the changes is deployed automatically and can be
+accessed by clicking on the link in the PR.
 
 ## Dev
 
@@ -25,9 +37,13 @@ yarn build
 
 ## Release
 
-Simply run our [release workflow](https://github.com/camunda-cloud/camunda-composite-components/actions/workflows/release.yml) in the GitHub Actions tab. This will create a new release, publish the package to npm and update the changelog automatically.
+Simply run our
+[release workflow](https://github.com/camunda-cloud/camunda-composite-components/actions/workflows/release.yml)
+in the GitHub Actions tab. This will create a new release, publish the package
+to npm and update the changelog automatically.
 
-Pushing to `main` will update the storybook available under [cloudflare page](https://camunda-composite-components.pages.dev/).
+Pushing to `main` will update the storybook available under
+[cloudflare page](https://camunda-composite-components.pages.dev/).
 
 ## Usage
 
@@ -53,18 +69,24 @@ return (
 
 ## <a name="c4list"></a> (incomplete) List of adopters of C3+C4
 
-- [Console team](https://confluence.camunda.com/display/HAN/Console+Team) started this, their C4 repo can be found [here](https://github.com/camunda-cloud/camunda-cloud-management-apps/tree/main/packages/c4)
-- [Identity team](https://github.com/camunda/team-identity): [c4-identity](https://github.com/camunda-cloud/c4-identity)
+- [Console team](https://confluence.camunda.com/display/HAN/Console+Team)
+  started this, their C4 repo can be found
+  [here](https://github.com/camunda-cloud/camunda-cloud-management-apps/tree/main/packages/c4)
+- [Identity team](https://github.com/camunda/team-identity):
+  [c4-identity](https://github.com/camunda-cloud/c4-identity)
 
 ## Testing
 
 ### Visual regression tests (VRT)
 
-We use [Playwright](https://playwright.dev/docs/intro) screenshot tests to be aware of any visual changes introduced by dependency updates or changes in the component code.
+We use [Playwright](https://playwright.dev/docs/intro) screenshot tests to be
+aware of any visual changes introduced by dependency updates or changes in the
+component code.
 
 #### Running VRT locally
 
-We run VRT inside a docker container to avoid different results caused by different platforms. Simply run:
+We run VRT inside a docker container to avoid different results caused by
+different platforms. Simply run:
 
 ```shell
 yarn start:docker-storybook
@@ -83,30 +105,39 @@ The commands above will:
 3. Serve storybook within the docker container.
 4. Run the visual regression tests within the docker container.
 
-When developing, it might not always be helpful to run all of these steps at once. You can find more granular scripts in the [package.json](package.json).
+When developing, it might not always be helpful to run all of these steps at
+once. You can find more granular scripts in the [package.json](package.json).
 
 #### Running VRT in the CI
 
-There is a `Visual regression tests` workflow that is triggered automatically on push. You can also trigger it manually in the `Actions` tab.
+There is a `Visual regression tests` workflow that is triggered automatically on
+push. You can also trigger it manually in the `Actions` tab.
 
-If the workflow fails, you can find the test report by navigating to the workflow run summary, then scrolling down to the `Artifacts` section.
-Click on the artifact called `Playwright report` to download it, go to your downloads folder, then open the `index.html` file of the test report in your browser to view the report.
+If the workflow fails, you can find the test report by navigating to the
+workflow run summary, then scrolling down to the `Artifacts` section. Click on
+the artifact called `Playwright report` to download it, go to your downloads
+folder, then open the `index.html` file of the test report in your browser to
+view the report.
 
 #### How to deal with failing tests
 
 When a VRT fails, this can have two reasons:
 
-1. A change was introduced unknowingly. In this case, have a look at the test report and check if the change was intended. If it is, proceed with 2.
-2. You made a change to the UI on purpose. In this case you need to update the screenshot as follows.
+1. A change was introduced unknowingly. In this case, have a look at the test
+   report and check if the change was intended. If it is, proceed with 2.
+2. You made a change to the UI on purpose. In this case you need to update the
+   screenshot as follows.
 
-Make sure you have the `c3-visual-regression` docker container running, or start it like described [here](#running-vrt-locally).
-Then, have a look at the test report:
+Make sure you have the `c3-visual-regression` docker container running, or start
+it like described [here](#running-vrt-locally). Then, have a look at the test
+report:
 
 ```shell
 yarn report:visual-regression
 ```
 
-Double-check that you don't apply any unwanted changes by looking at the difference that is highlighted in the failed test's report.
+Double-check that you don't apply any unwanted changes by looking at the
+difference that is highlighted in the failed test's report.
 
 To update all screenshots, run:
 
@@ -114,4 +145,5 @@ To update all screenshots, run:
 yarn update:visual-regression:docker
 ```
 
-The tests should now pass locally and in the CI. Commit and push the updated screenshot(s).
+The tests should now pass locally and in the CI. Commit and push the updated
+screenshot(s).

package/lib/esm/package.json

@@ -4,7 +4,7 @@
         "type": "git",
         "url": "https://github.com/camunda-cloud/camunda-composite-components.git"
     },
-    "version": "0.4.1",
+    "version": "0.4.2-rc.1",
     "scripts": {
         "clean": "rimraf lib/",
         "build": "yarn clean && tsc",
@@ -39,16 +39,16 @@
         "@playwright/test": "1.41.2",
         "@semantic-release/changelog": "6.0.3",
         "@semantic-release/git": "10.0.1",
-        "@storybook/addon-a11y": "7.6.10",
-        "@storybook/addon-actions": "7.6.10",
-        "@storybook/addon-docs": "7.6.10",
-        "@storybook/addon-essentials": "7.6.10",
-        "@storybook/addon-interactions": "7.6.10",
-        "@storybook/addon-links": "7.6.10",
-        "@storybook/blocks": "7.6.10",
+        "@storybook/addon-a11y": "7.6.11",
+        "@storybook/addon-actions": "7.6.11",
+        "@storybook/addon-docs": "7.6.11",
+        "@storybook/addon-essentials": "7.6.11",
+        "@storybook/addon-interactions": "7.6.11",
+        "@storybook/addon-links": "7.6.11",
+        "@storybook/blocks": "7.6.11",
         "@storybook/preset-scss": "1.0.3",
-        "@storybook/react": "7.6.10",
-        "@storybook/react-webpack5": "7.6.10",
+        "@storybook/react": "7.6.11",
+        "@storybook/react-webpack5": "7.6.11",
         "@storybook/test-runner": "0.16.0",
         "@storybook/testing-library": "0.2.2",
         "@types/carbon-components-react": "7.55.10",
@@ -84,7 +84,7 @@
         "sass-loader": "13.3.3",
         "semantic-release": "23.0.0",
         "serve": "14.2.1",
-        "storybook": "7.6.10",
+        "storybook": "7.6.11",
         "style-loader": "3.3.4",
         "styled-components": "6.1.8",
         "typescript": "5.3.3",

package/lib/esm/src/components/c3-app-teaser/c3-app-teaser.js

@@ -8,9 +8,10 @@ export const teaserApps = ["tasklist", "operate", "optimize"];
 const base64Src = (src) => `data:image/jpeg;base64,${src}`;
 export const C3AppTeaser = ({ appName: app, hasTrialExpired, canUpgradePlan, canCreateCluster, redirectToCheckout, redirectToCreateCluster, }) => {
     const appName = app ? getReadableAppName(app) : "";
-    const { activeOrganizationId, decodedAudience } = useC3UserConfiguration();
+    const { activeOrganizationId, decodedAudience, analyticsTrack } = useC3UserConfiguration();
     const onClickCta = () => {
         if (hasTrialExpired) {
+            analyticsTrack?.("checkout:open", { appTeaser: appName });
             if (redirectToCheckout) {
                 redirectToCheckout();
             }
@@ -19,6 +20,7 @@ export const C3AppTeaser = ({ appName: app, hasTrialExpired, canUpgradePlan, can
             }
         }
         else {
+            analyticsTrack?.("clusters:create:open", { appTeaser: appName });
             if (redirectToCreateCluster) {
                 redirectToCreateCluster();
             }

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

@@ -3,7 +3,7 @@ import { Persona } from "./c3-help-center.types";
 import { Dict } from "mixpanel-browser";
 import { Theme } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 export interface C3HelpCenterProps {
-    origin: "console" | "webmodeler" | "operate" | "tasklist" | "optimize";
+    origin?: "console" | "webmodeler" | "operate" | "tasklist" | "optimize";
     theme?: Theme;
     flags?: string[];
     activeTab?: string;

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

@@ -10,7 +10,7 @@ import { resolveTheme, } from "../c3-user-configuration/c3-profile-provider/carb
 import { useC3HelpCenter } from "./c3-help-center-provider";
 export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, mixpanelTrack: customMixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
     const { isHelpCenterOpen: isOpen, setIsHelpCenterOpen, setShowHintOnClose, } = useC3HelpCenter();
-    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, analyticsTrack, } = useC3UserConfiguration();
+    const { userToken, decodedToken, activeOrganizationId, handleTheme, decodedAudience, analyticsTrack, currentApp, } = useC3UserConfiguration();
     const { theme: themeConfig, isEnabled, reloadClusters } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
@@ -20,6 +20,9 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
     const [helpCenterConfig, setHelpCenterConfig] = useState(defaultHelpCenterConfig);
     const [email, setEmail] = useState("");
     const [showSurvey, setShowSurvey] = useState(autoStartSurvey);
+    if (!origin && !currentApp)
+        console.warn("No app provided to the help center. Please provide the `currentApp` prop to the `C3UserConfigurationProvider`.");
+    const hostApp = origin || currentApp === "modeler" ? "webmodeler" : currentApp || "console";
     const mixpanelTrack = (event, data) => {
         if (customMixpanelTrack) {
             customMixpanelTrack(event, data);
@@ -195,5 +198,5 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, onRequestClose, m
         }, 400);
     };
     return (React.createElement(Layer, null,
-        React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, showSurvey || !persona?.wasShown ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: origin, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || "", flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: origin, initialTab: activeTab })))));
+        React.createElement(ComposedModal, { open: isOpen, size: "lg", onClose: closeFn, className: "help-center", "aria-label": "HelpCenter" }, showSurvey || !persona?.wasShown ? (React.createElement(C3OnboardingSurvey, { personaCallback: personaCallback, persona: persona, mixpanelTrack: mixpanelTrack, onRequestClose: closeFn, onRequestSkip: onRequestSkipSurvey, theme: resolvedTheme, origin: hostApp, modal: true })) : (React.createElement(HelpCenter, { configuration: helpCenterConfig, persona: persona, audience: decodedAudience || "", flags: flags, onRequestResumeSurvey: onRequestResumeSurvey, onRequestRetakeSurvey: onRequestRetakeSurvey, onRequestClose: closeFn, mixpanelTrack: mixpanelTrack, email: email, theme: resolvedTheme, origin: hostApp, initialTab: activeTab })))));
 };

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

@@ -9,44 +9,45 @@ import { APPS } from "../../../utils/camunda";
 import { NavWrapper, SideNav } from "./components";
 export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
     const { currentApp, decodedAudience, analyticsTrack } = useC3UserConfiguration();
-    const { clusters, activeOrg } = useC3Profile();
+    const { clusters, activeOrg, isEnabled } = useC3Profile();
     const [appBarOpen, setAppBarOpen] = useState(appBar.isOpen);
     const [panelRef, iconRef] = useOnClickOutside(() => setAppBarOpen(false));
     const [appElements, setAppElements] = useState([]);
-    if ((!appBar.elements && !appBar.appTeaser) ||
-        (appBar.appTeaser && Object.keys(appBar.appTeaser).length === 0))
-        console.warn("No app elements or app teaser pages provided. Please provide at least one of them.");
+    if (!appBar.elements && !isEnabled)
+        console.warn("No app elements and user config provided. Please provide at least one of them.");
     useEffect(() => {
         if (appBar.elements)
             return;
         const defaultElements = [];
         APPS.forEach((app) => {
-            if (!decodedAudience || !currentApp)
+            if (!decodedAudience || !currentApp || !activeOrg?.uuid)
                 return;
             const element = {
                 key: app,
                 label: app.charAt(0).toUpperCase() + app.slice(1),
                 active: currentApp === app,
+                href: currentApp === app ? "#" : undefined,
+                onClick: currentApp === app ? () => false : undefined,
             };
             if (app === "console") {
-                element.href = `https://console.${decodedAudience}/${activeOrg?.uuid}`;
+                if (currentApp !== "console")
+                    element.href = `https://console.${decodedAudience}/org/${activeOrg?.uuid}`;
             }
             else if (app === "modeler") {
-                const hasPermission = activeOrg?.permissions.org.webide.read;
-                if (hasPermission) {
-                    element.href =
-                        currentApp === "modeler"
-                            ? ""
-                            : `https://modeler.${decodedAudience}/org/${activeOrg?.uuid}`;
+                const hasPermission = activeOrg?.permissions?.org?.webide?.read;
+                if (hasPermission && currentApp !== "modeler") {
+                    element.href = `https://modeler.${decodedAudience}/login?returnUrl=/org/${activeOrg?.uuid}`;
                 }
             }
             else {
-                const hasAppReadPermission = activeOrg?.permissions.cluster[app]?.read;
+                const hasAppReadPermission = activeOrg?.permissions?.cluster?.[app]?.read;
                 const clustersToRender = clusters?.filter(({ status, urls }) => status[app] === "Healthy" && urls[app] && hasAppReadPermission);
                 if (clustersToRender?.length === 1) {
-                    element.href = clustersToRender?.[0].urls[app];
+                    if (currentApp !== app)
+                        element.href = clustersToRender?.[0].urls[app];
                 }
                 else if (clustersToRender && clustersToRender.length > 1) {
+                    element.onClick = undefined;
                     element.subElements = clustersToRender.map((cluster, index) => ({
                         key: `${app}-${cluster.uuid}-${index}`,
                         label: cluster.name,
@@ -58,8 +59,11 @@ export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
                     }));
                 }
                 else if (hasAppReadPermission) {
-                    if (appBar.appTeaser?.[app]?.routeProps) {
-                        element.routeProps = appBar.appTeaser?.[app]?.routeProps;
+                    if (appBar.appTeaserRouteProps?.[app]) {
+                        element.routeProps = appBar.appTeaserRouteProps?.[app];
+                    }
+                    else {
+                        element.href = `https://${currentApp}.${decodedAudience}/org/${activeOrg?.uuid}/appTeaser/${app}`;
                     }
                 }
             }
@@ -67,7 +71,7 @@ export const C3NavigationAppBar = ({ appBar, forwardRef, navbar, }) => {
                 defaultElements.push(element);
         });
         setAppElements(defaultElements);
-    }, [JSON.stringify(clusters)]);
+    }, [JSON.stringify(clusters), currentApp]);
     const appBarElements = appBar.elements || (clusters ? appElements : null);
     return (React.createElement(React.Fragment, null,
         React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": "Camunda components", isActive: appBarOpen, onClick: () => {

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

@@ -56,15 +56,13 @@ export type C3NavigationNotificationsSideBarProps = C3NavigationSideBarBaseProps
     type: "notifications";
     onLinkClick?: (meta: Notification["meta"]) => void;
 };
-type AppTeaserRoute = {
-    routeProps: any;
-};
+type AppTeaserRouteProps = any;
 export type C3NavigationAppBarProps = C3NavigationSideBarBaseProps & {
     type: "app";
-    appTeaser?: {
-        operate?: AppTeaserRoute;
-        tasklist?: AppTeaserRoute;
-        optimize?: AppTeaserRoute;
+    appTeaserRouteProps?: {
+        operate?: AppTeaserRouteProps;
+        tasklist?: AppTeaserRouteProps;
+        optimize?: AppTeaserRouteProps;
     };
 };
 export type C3NavigationSideBarProps = {

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

@@ -46,7 +46,7 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
     const displayAppBar = appBarElementsLength > 0 ||
-        appBar.appTeaser ||
+        appBar.appTeaserRouteProps ||
         (!isLargeScreen && navbar.elements.length > 0);
     const orgName = activeOrg?.name || navbar.orgName;
     if (app.prefix)

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

@@ -13,7 +13,7 @@ export function createAppProps() {
 export function createAppBarProps(options = {}) {
     return {
         isOpen: Boolean(options?.isOpen),
-        appTeaser: options.useElementsFromConfig
+        appTeaserRouteProps: options.useElementsFromConfig
             ? {
                 operate: {
                     routeProps: {

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

@@ -9,14 +9,13 @@ type C3UserConfigurationBase = {
     getNewUserToken: () => Promise<string>;
     analyticsTrack?: MixPanelTrack;
     currentApp?: "console" | "modeler" | "tasklist" | "operate" | "optimize";
+    handleTheme?: boolean;
 };
 type C3UserConfigurationWithEndpoints = C3UserConfigurationBase & {
     endpoints: Endpoints;
-    handleTheme?: never;
 };
 type C3UserConfigurationWithStage = C3UserConfigurationBase & {
     stage: Stage;
-    handleTheme?: boolean;
 };
 export type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfigurationWithStage;
 export type C3UserConfigurationContextValue = C3UserConfiguration & {

package/package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "https://github.com/camunda-cloud/camunda-composite-components.git"
 	},
-	"version": "0.4.2-rc.0",
+	"version": "0.4.2-rc.2",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -39,16 +39,16 @@
 		"@playwright/test": "1.41.2",
 		"@semantic-release/changelog": "6.0.3",
 		"@semantic-release/git": "10.0.1",
-		"@storybook/addon-a11y": "7.6.10",
-		"@storybook/addon-actions": "7.6.10",
-		"@storybook/addon-docs": "7.6.10",
-		"@storybook/addon-essentials": "7.6.10",
-		"@storybook/addon-interactions": "7.6.10",
-		"@storybook/addon-links": "7.6.10",
-		"@storybook/blocks": "7.6.10",
+		"@storybook/addon-a11y": "7.6.11",
+		"@storybook/addon-actions": "7.6.11",
+		"@storybook/addon-docs": "7.6.11",
+		"@storybook/addon-essentials": "7.6.11",
+		"@storybook/addon-interactions": "7.6.11",
+		"@storybook/addon-links": "7.6.11",
+		"@storybook/blocks": "7.6.11",
 		"@storybook/preset-scss": "1.0.3",
-		"@storybook/react": "7.6.10",
-		"@storybook/react-webpack5": "7.6.10",
+		"@storybook/react": "7.6.11",
+		"@storybook/react-webpack5": "7.6.11",
 		"@storybook/test-runner": "0.16.0",
 		"@storybook/testing-library": "0.2.2",
 		"@types/carbon-components-react": "7.55.10",
@@ -84,7 +84,7 @@
 		"sass-loader": "13.3.3",
 		"semantic-release": "23.0.0",
 		"serve": "14.2.1",
-		"storybook": "7.6.10",
+		"storybook": "7.6.11",
 		"style-loader": "3.3.4",
 		"styled-components": "6.1.8",
 		"typescript": "5.3.3",