@camunda/camunda-composite-components 0.19.0 → 0.20.0

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.19.0",
+    "version": "0.20.0",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"

package/lib/esm/src/api/endpoints.const.d.ts

@@ -12,6 +12,7 @@ export interface Endpoints {
 export declare const NOTIFICATIONS: Endpoint;
 export declare const ACCOUNTS: Endpoint;
 export declare const CONSOLE: Endpoint;
+export declare const STATUS: Endpoint;
 export type Stage = "dev" | "int" | "prod";
 export declare function getEndpoint(stage: Stage, endpoint: Endpoint): string;
 export declare function getEndpointByOptions(options: {

package/lib/esm/src/api/endpoints.const.js

@@ -16,6 +16,12 @@ export const CONSOLE = {
     int: "https://console.cloud.ultrawombat.com",
     prod: "https://console.cloud.camunda.io",
 };
+export const STATUS = {
+    id: "status",
+    dev: "https://camundaultrawombat.statuspage.io/",
+    int: "https://camundaultrawombat.statuspage.io/",
+    prod: "https://status.camunda.io",
+};
 export function getEndpoint(stage, endpoint) {
     switch (stage) {
         case "dev":

package/lib/esm/src/api/status.d.ts

@@ -0,0 +1,7 @@
+export declare class StatusService {
+    static camundaStatus(decodedAudience: string): Promise<{
+        error: boolean;
+        description: string;
+        endpoint: string;
+    }>;
+}

package/lib/esm/src/api/status.js

@@ -0,0 +1,41 @@
+import { request } from "./api";
+import { getEndpoint, STATUS } from "./endpoints.const";
+export class StatusService {
+    static async camundaStatus(decodedAudience) {
+        try {
+            let stage = "dev";
+            switch (decodedAudience) {
+                case "cloud.dev.ultrawombat.com":
+                    stage = "dev";
+                    break;
+                case "cloud.ultrawombat.com":
+                    stage = "int";
+                    break;
+                default:
+                    stage = "prod";
+                    break;
+            }
+            const endpoint = getEndpoint(stage, STATUS);
+            const resp = await request({
+                url: `${endpoint}/api/v2/status.json`,
+                method: "get",
+                type: "json",
+                responseType: "json",
+            });
+            let result = resp.result;
+            if (!resp.success ||
+                !result?.status.indicator ||
+                !result?.status.description) {
+                return { error: false, description: "", endpoint };
+            }
+            return {
+                error: result?.status.indicator === "major",
+                description: result?.status.description ?? "",
+                endpoint,
+            };
+        }
+        catch (_error) {
+            return { error: false, description: "", endpoint: STATUS.dev };
+        }
+    }
+}

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

@@ -1,39 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { C3AppTeaser } from "./c3-app-teaser";
 import { canCreateCluster, canUpgradePlan, isTrialExpired, } from "../../utils/camunda";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 import { Loading } from "@carbon/react";
-import { getStartingPrice } from "../../api/organizations";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 export const C3AppTeaserPage = ({ appName, redirectToClusters, redirectToCreateCluster, redirectToCheckout, }) => {
-    const { activeOrganizationId, decodedAudience, domain, analyticsTrack, userToken, } = useC3UserConfiguration();
+    const { activeOrganizationId, domain, analyticsTrack } = useC3UserConfiguration();
     const { activeOrg, clusters } = useC3Profile();
-    const [pricing, setPricing] = useState(null);
-    const [hasTrialExpired, setHasTrialExpired] = useState(false);
-    const [hasSleepingCluster, setHasSleepingCluster] = useState(false);
-    useEffect(() => {
-        if (!userToken || !decodedAudience)
-            return;
-        (async () => {
-            const { result } = await getStartingPrice({
-                token: userToken,
-                audience: decodedAudience,
-            });
-            if (result) {
-                setPricing(result);
-            }
-        })();
-    }, [userToken, decodedAudience]);
-    useEffect(() => {
-        if (activeOrg)
-            setHasTrialExpired(isTrialExpired(activeOrg));
-    }, [activeOrg]);
-    useEffect(() => {
-        if (clusters && appName) {
-            const sleepingCluster = clusters.find((c) => c.status[appName] === "Suspended");
-            setHasSleepingCluster(!!sleepingCluster);
-        }
-    }, [clusters, appName]);
+    const hasTrialExpired = (activeOrg && isTrialExpired(activeOrg)) ?? false;
+    const sleepingCluster = clusters && clusters.find((c) => c.status[appName] === "Suspended");
+    const hasSleepingCluster = (clusters && appName && !!sleepingCluster) ?? false;
     const onClickCta = () => {
         if (hasTrialExpired) {
             analyticsTrack?.("checkout:open", { appTeaser: appName });
@@ -63,5 +39,5 @@ export const C3AppTeaserPage = ({ appName, redirectToClusters, redirectToCreateC
             }
         }
     };
-    return activeOrg && appName ? (React.createElement(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: hasTrialExpired, hasSleepingCluster: hasSleepingCluster, onClickCta: onClickCta, pricing: pricing })) : (React.createElement(Loading, { withOverlay: true }));
+    return activeOrg && appName ? (React.createElement(C3AppTeaser, { appName: appName, canCreateCluster: canCreateCluster(activeOrg), canUpgradePlan: canUpgradePlan(activeOrg), hasTrialExpired: hasTrialExpired, hasSleepingCluster: hasSleepingCluster, onClickCta: onClickCta, pricing: null })) : (React.createElement(Loading, { withOverlay: true }));
 };

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

@@ -1,24 +1,24 @@
 import React from "react";
-import { Add, ArrowUp, Settings } from "@carbon/react/icons";
+import { Add, Settings } from "@carbon/react/icons";
 import { AppTeaserCards } from "./app-teaser-cards";
 import { getReadableAppName } from "../../utils/camunda";
 import { DefaultStyleWrapper } from "../styles";
 import { appTeaserCardsConfig } from "./app-teaser-cards-config";
 export const teaserApps = ["tasklist", "operate", "optimize"];
-export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster, canUpgradePlan, canCreateCluster, onClickCta, pricing, }) => {
+export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster, canUpgradePlan, canCreateCluster, onClickCta, }) => {
     const appName = app ? getReadableAppName(app) : "";
     const variants = {
         upgrade: {
             title: `Upgrade your plan${appName ? ` to use ${appName}` : ""}`,
             subtitle: `Creating a cluster and accessing the ${appName} app and features
 			are not available with the Modeling plan`,
-            ctaText: "Upgrade plan",
-            ctaIcon: ArrowUp,
+            ctaText: "Contact us",
+            ctaIcon: null,
             disabledMessage: "Contact your admin to upgrade",
         },
         manageClusters: {
             title: `Resume your cluster${appName ? ` to use ${appName}` : ""}`,
-            subtitle: `The ${appName} app requires an active 
+            subtitle: `The ${appName} app requires an active
 			cluster to run.`,
             ctaText: "Manage clusters",
             ctaIcon: Settings,
@@ -38,21 +38,8 @@ export const C3AppTeaser = ({ appName: app, hasTrialExpired, hasSleepingCluster,
         : hasSleepingCluster
             ? variants.manageClusters
             : variants.createClusters;
-    const currency = pricing?.currency === "€" ? "EUR" : pricing?.currency;
-    const locale = navigator.language || "en";
-    const price = pricing?.amount &&
-        currency &&
-        locale &&
-        Intl.NumberFormat(locale, {
-            style: "currency",
-            currency,
-            minimumFractionDigits: 0,
-            maximumFractionDigits: pricing.amount % 1 === 0 ? 0 : 2,
-        }).format(pricing.amount);
     return (React.createElement(DefaultStyleWrapper, null,
-        React.createElement(AppTeaserCards, { title: variant.title, subtitle: React.createElement(React.Fragment, null, variant.subtitle), subtext: hasTrialExpired && price
-                ? `Plans starting at ${price}${pricing.interval ? `/${pricing.interval}` : ""}`
-                : "", cta: {
+        React.createElement(AppTeaserCards, { title: variant.title, subtitle: React.createElement(React.Fragment, null, variant.subtitle), subtext: "", cta: {
                 action: onClickCta,
                 text: variant.ctaText,
                 renderIcon: variant.ctaIcon,

package/lib/esm/src/components/c3-data-table/c3-data-table.js

@@ -280,7 +280,7 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
         // ==== TOOLBAR ====
         const toolbarRows = [];
         if (toolbars && toolbars.length > 0) {
-            toolbars.forEach((toolbar) => {
+            toolbars.forEach((toolbar, index) => {
                 let toolbarComponent = null;
                 const toolbarComponents = [];
                 if (toolbar && toolbar.length > 0) {
@@ -325,7 +325,8 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                         }
                         else if (toolbarElement.type === "search") {
                             const searchElement = toolbarElement;
-                            const defaultValue = currentFilters.current.get(searchElement.id);
+                            const filterId = searchElement.id ?? searchElement.queryName;
+                            const defaultValue = currentFilters.current.get(filterId);
                             toolbarComponents.push(React.createElement(TableToolbarSearch, { key: searchElement.id, onFocus: (event, handleExpand) => {
                                     handleExpand(event, true);
                                     if (searchElement.queryName) {
@@ -337,16 +338,15 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                                     }
                                     updateFilterURLState(searchElement.queryName ?? searchElement.id, event.target.value);
                                 }, onChange: (event) => {
-                                    currentFilters.current.set(searchElement.id, {
-                                        searchTerm: event.target?.value ??
-                                            getQueryKey(searchElement.queryName ?? ""),
+                                    currentFilters.current.set(filterId, {
+                                        searchTerm: event.target?.value ?? defaultValue?.searchTerm,
                                     });
                                     updateFilteredData();
                                 } }));
                         }
                         else if (toolbarElement.type === "button") {
                             const buttonElement = toolbarElement;
-                            toolbarComponents.push(React.createElement(Button, { key: buttonElement.id, onClick: () => {
+                            toolbarComponents.push(React.createElement(Button, { id: buttonElement.id, key: buttonElement.id, onClick: () => {
                                     if (buttonElement.onClick) {
                                         buttonElement.onClick();
                                     }
@@ -355,7 +355,7 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                     }
                 }
                 if (toolbarComponents.length > 0) {
-                    toolbarComponent = (React.createElement(TableToolbar, { "aria-label": "data table toolbar", key: `toolbarcomponent-${id}` },
+                    toolbarComponent = (React.createElement(TableToolbar, { "aria-label": "data table toolbar", key: `toolbarcomponent-${id}-${index}` },
                         React.createElement(TableToolbarContent, null, toolbarComponents)));
                 }
                 toolbarRows.push(toolbarComponent);
@@ -372,12 +372,12 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                         if (action.icon) {
                             actionCell.push(React.createElement(Button, { key: action.id, "data-cy": action.id, kind: action.kind, disabled: action.disabled !== undefined
                                     ? action.disabled(row)
-                                    : undefined, iconDescription: action.label, hasIconOnly: true, renderIcon: action.icon, onClick: () => action.onClick(row) }));
+                                    : undefined, iconDescription: action.label, hasIconOnly: true, renderIcon: action.icon, onClick: (event) => action.onClick(row, event) }));
                         }
                         else {
                             actionCell.push(React.createElement(Button, { key: action.id, "data-cy": action.id, kind: action.kind, disabled: action.disabled !== undefined
                                     ? action.disabled(row)
-                                    : undefined, "aria-label": action.label, onClick: () => action.onClick(row) }, action.label));
+                                    : undefined, "aria-label": action.label, onClick: (event) => action.onClick(row, event) }, action.label));
                         }
                     }
                 }
@@ -386,7 +386,7 @@ export const C3DataTable = ({ data, headers, options, toolbar: singleToolbar, to
                     for (const action of actions.filter((action) => action.visible === undefined || action.visible(row))) {
                         overflowMenuItems.push(React.createElement(OverflowMenuItem, { key: action.id, itemText: action.label, isDelete: action.kind === "danger", disabled: action.disabled !== undefined
                                 ? action.disabled(row)
-                                : undefined, onClick: () => action.onClick(row), hasDivider: action.hasDivider }));
+                                : undefined, onClick: (event) => action.onClick(row, event), hasDivider: action.hasDivider }));
                     }
                     actionCell.push(React.createElement(OverflowMenu, { key: "overflow-menu", style: { float: "right", marginRight: "1rem" }, flipped: true }, overflowMenuItems));
                 }

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

@@ -63,7 +63,7 @@ export interface C3DataTableActionProps<T extends RowBaseProps> {
     disabled?: (row: T) => boolean;
     visible?: (row: T) => boolean;
     hasDivider?: boolean;
-    onClick: (row: T) => void;
+    onClick: (row: T, event?: any) => void;
 }
 export interface C3DataTableHeaderContentType<T extends RowBaseProps> {
     type: "text" | "code" | "link-button" | "link" | "wrapper";

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

@@ -23,7 +23,8 @@ const getOrgLink = (app, orgId, domain) => {
     }
 };
 const getClustersToRender = (clusters, activeOrg, appToNavigateTo) => {
-    return clusters?.filter(({ status, endpoints, generation }) => status[appToNavigateTo] === "Healthy" &&
+    return clusters?.filter(({ status, endpoints, generation }) => status[appToNavigateTo === "identity" ? "zeebe" : appToNavigateTo] ===
+        "Healthy" &&
         endpoints[appToNavigateTo] &&
         // either the user has appreadpermissions on this app
         (activeOrg?.permissions?.cluster?.[appToNavigateTo]?.read ||
@@ -105,6 +106,7 @@ export const C3NavigationAppBar = ({ app: appProps, appBar, forwardRef, navbar,
                                 console: "",
                                 modeler: "",
                                 identity: "",
+                                zeebe: "",
                             };
                             const affectedCluster = {
                                 uuid: clusterDto.uuid,

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

@@ -1,4 +1,4 @@
-import { Header, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, Stack as CarbonStack, Link, } from "@carbon/react";
+import { Header, HeaderGlobalBar, HeaderMenuItem, HeaderName, HeaderNavigation, SkipToContent, Tag, Toggletip, ToggletipButton, ToggletipContent, Stack as CarbonStack, Link, Callout, DefinitionTooltip, } from "@carbon/react";
 import React, { useState } from "react";
 import C3InfoSidebar from "./c3-navigation-sidebar/c3-info-sidebar";
 import { C3NotificationSidebar } from "./c3-navigation-sidebar/c3-notification-sidebar";
@@ -19,6 +19,7 @@ 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";
+import { StatusService } from "../../api/status";
 /**
  * UI SHELL
  * Docs: https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav
@@ -52,7 +53,7 @@ export const DAY = HOUR * 24;
 const LICENSE_EXPIRY = DAY * 30;
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, options, }) => {
     const { openHelpCenter } = useC3HelpCenter();
-    const { currentClusterUuid } = useC3UserConfiguration();
+    const { currentClusterUuid, decodedAudience } = useC3UserConfiguration();
     const { activeOrg } = useC3Profile();
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
@@ -70,6 +71,22 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
             expiresAt = navbar.licenseTag?.expiresAt;
         }
     }
+    const [camundaStatus, setCamundaStatus] = useState({ error: false, description: "", endpoint: "" });
+    const fetchStatus = async (audience) => {
+        let status = await StatusService.camundaStatus(audience);
+        setCamundaStatus(status);
+    };
+    React.useEffect(() => {
+        if (decodedAudience) {
+            fetchStatus(decodedAudience);
+        }
+        const interval = setInterval(() => {
+            if (decodedAudience) {
+                fetchStatus(decodedAudience);
+            }
+        }, 5 * MINUTE);
+        return () => clearInterval(interval);
+    }, [decodedAudience]);
     const tags = [
         ...(navbar.tags || []),
         ...(navbar.licenseTag?.show
@@ -211,5 +228,56 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                         ...userSideBar,
                         type: "user",
                     } })))),
+        (() => {
+            if (camundaStatus.error &&
+                camundaStatus.endpoint &&
+                options?.c8StatusBanner) {
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "cds--header", style: {
+                            position: "fixed",
+                            marginTop: "48px",
+                            zIndex: "7000",
+                        } },
+                        React.createElement(Callout, { title: "", kind: "error", lowContrast: true, style: { maxWidth: "100%" } },
+                            React.createElement("div", { style: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                    width: "100%",
+                                    position: "absolute",
+                                    paddingRight: "62px",
+                                } },
+                                React.createElement("div", { className: "cds--actionable-notification__title", dir: "auto", style: {
+                                        overflow: "hidden",
+                                        whiteSpace: "nowrap",
+                                        textWrap: "nowrap",
+                                    } }, "Service incident alert"),
+                                React.createElement(DefinitionTooltip, { "aria-describedby": "", definition: "We're aware of a live incident potentially impacting our SaaS product. Please check our status page for details.", align: "bottom", openOnHover: true, style: {
+                                        marginTop: "-1px",
+                                        width: "calc(100vw - 400px)",
+                                        borderBlockEnd: "none",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        textWrap: "nowrap",
+                                        whiteSpace: "nowrap",
+                                        fontSize: "14px",
+                                    } },
+                                    React.createElement("span", null, "We're aware of a live incident potentially impacting our SaaS product. Please check our status page for details.")),
+                                React.createElement(Link, { onClick: () => {
+                                        window.open(camundaStatus.endpoint, "_blank");
+                                    }, inline: true, style: {
+                                        cursor: "pointer",
+                                        color: "$link-primary",
+                                        marginLeft: "auto",
+                                        marginRight: 0,
+                                        textDecoration: "none",
+                                        overflow: "hidden",
+                                        whiteSpace: "nowrap",
+                                        textWrap: "nowrap",
+                                    } }, "Camunda status page")))),
+                    React.createElement("div", { style: { height: "48px" } })));
+            }
+            return React.createElement(React.Fragment, null);
+        })(),
         helpCenter && React.createElement(C3HelpCenter, { ...helpCenter })));
 };

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

@@ -79,6 +79,7 @@ export interface C3NavigationProps {
     clusterUuid?: string;
     options?: {
         conditionalTagRendering?: (stage: CamundaClusterStage) => boolean;
+        c8StatusBanner?: boolean;
     };
     toggleAppbar: (value: boolean) => void;
 }

package/lib/esm/src/components/c3-onboarding-survey/elements/dropdownSelect.js

@@ -7,10 +7,10 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
     const [suggestion, setSuggestion] = useState((selectedElement ?? "").split(" - ").length > 0
         ? (selectedElement ?? "").split(" - ")[1]
         : "");
-    const setElement = (input) => {
+    const setElement = (input, suggest) => {
         showSuggestion = input === exceptionValue;
         if (showSuggestion) {
-            setSelectedElement(`${input} - ${suggestion}`);
+            setSelectedElement(`${input} - ${suggest}`);
         }
         else {
             setSelectedElement(input);
@@ -22,7 +22,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
     const calculateSuggestion = (input) => {
         const rawElement = elementWithoutSuggestion() ?? "";
         setSuggestion(input);
-        setElement(rawElement);
+        setElement(rawElement, input);
     };
     const titleId = getTitleId(title);
     const exceptionTitleId = getTitleId(exceptionTitle);
@@ -45,7 +45,7 @@ export const DropdownSelect = ({ title, label, elements, selectedElement, setSel
                     React.createElement(Select, { key: `select-${Math.random() * 10000}`, id: `select-${Math.random() * 10000}`, size: "lg", defaultValue: elements[0].value, "aria-labelledby": titleId, labelText: "", onChange: (event) => {
                             const element = elements.find((e) => e.value === event.target.value);
                             if (element)
-                                setElement(element.value);
+                                setElement(element.value, "");
                         }, value: elementWithoutSuggestion() }, elements.map((e) => (React.createElement(SelectItem, { key: `selectItem-${Math.random() * 10000}`, id: `selectItem-${Math.random() * 10000}`, value: e.value, text: e.label })))),
                     (() => {
                         if (elementWithoutSuggestion() === exceptionValue) {

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

@@ -1,4 +1,5 @@
 export type CamundaApp = "console" | "modeler" | "tasklist" | "operate" | "optimize" | "identity";
+export type CamundaAppWithZeebe = CamundaApp | "zeebe";
 type CrudOrgSettings = {
     read: boolean;
     create: boolean;
@@ -40,7 +41,7 @@ export type Cluster = {
     uuid: string;
     name: string;
     status: {
-        [app in CamundaApp]: string;
+        [app in CamundaAppWithZeebe]: string;
     };
     endpoints: {
         [app in CamundaApp]: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"