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

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

@@ -3,16 +3,13 @@ import { Tag } from "@carbon/react";
 import { useC3Profile } from "../c3-user-configuration/c3-profile-provider/c3-profile-provider";
 export const C3ClusterTag = (props) => {
     const { clusters } = useC3Profile();
-    return "stage" in props ? (React.createElement(Tag, { style: props.style, type: getColorForStage(props.stage) }, props.stage)) : "clusterUuid" in props ? (generateFromInput(props.clusterUuid, clusters, props.style)) : (React.createElement(React.Fragment, null));
+    return "stage" in props ? (React.createElement(Tag, { type: getColorForStage(props.stage) }, props.stage)) : "clusterUuid" in props ? (generateFromInput(props.clusterUuid, clusters)) : (React.createElement(React.Fragment, null));
 };
-function generateFromInput(clusterUuid, allClusters, style) {
+function generateFromInput(clusterUuid, allClusters) {
     const foundCluster = allClusters?.find((cluster) => cluster.uuid === clusterUuid);
-    if (foundCluster &&
-        foundCluster.labels &&
-        foundCluster.labels.camunda &&
-        foundCluster.labels.camunda.length > 0) {
+    if (foundCluster?.labels?.camunda && foundCluster.labels.camunda.length > 0) {
         const label = foundCluster.labels.camunda[0];
-        return getColorForStage(label) ? (React.createElement(Tag, { style: style, type: getColorForStage(label) }, label)) : (React.createElement(React.Fragment, null));
+        return getColorForStage(label) ? (React.createElement(Tag, { type: getColorForStage(label) }, label)) : (React.createElement(React.Fragment, null));
     }
     return React.createElement(React.Fragment, null);
 }

package/lib/esm/components/c3-cluster-tag/c3-cluster-tag.types.d.ts

@@ -7,9 +7,7 @@ export declare const StageClusterLabels: {
 export type CamundaClusterStage = keyof typeof StageClusterLabels;
 export type CamundaClusterStageLabel = (typeof StageClusterLabels)[CamundaClusterStage];
 export type C3ClusterTagProps = {
-    style?: any;
-} & ({
     clusterUuid: string;
 } | {
     stage: CamundaClusterStage;
-});
+};

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

@@ -4,12 +4,11 @@ import { HelpCenter } from "./help-center";
 import { defaultHelpCenterConfig } from "./defaultHelpCenterConfig";
 import { C3OnboardingSurvey } from "../c3-onboarding-survey/c3-onboarding-survey";
 import { getClusters, getConfig, getOrg, updatePersona, } from "../../api/help-center";
-import { decodeJWT } from "../c3-user-configuration/authToken";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 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";
 export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequestClose, mixpanelTrack, onRequestOpen, theme, onPersonaChange, activeTab, }) => {
-    const { userToken, activeOrganizationId, handleTheme } = useC3UserConfiguration() || {};
+    const { userToken, decodedToken, activeOrganizationId, handleTheme } = useC3UserConfiguration() || {};
     const { theme: themeConfig, isEnabled } = useC3Profile();
     const themeHandlingEnabled = isEnabled && !!handleTheme && !!themeConfig;
     const themeRef = useRef();
@@ -45,7 +44,6 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequest
         setResolvedTheme(resolveTheme(newTheme || "light"));
     }, [theme, themeConfig, isOpen]);
     const fetchData = async () => {
-        const decodedToken = decodeJWT(userToken);
         if (!decodedToken)
             return;
         const { userId, meta, audience, persona } = decodedToken;
@@ -78,13 +76,14 @@ export const C3HelpCenter = ({ autoStartSurvey, origin, flags, isOpen, onRequest
     React.useEffect(() => {
         const tokenChanged = token !== userToken && !!userToken;
         const orgChanged = organizationId !== activeOrganizationId && !!activeOrganizationId;
+        const decodedTokenChanged = !tokenChanged && !orgChanged;
         if (tokenChanged)
             setToken(userToken);
         if (orgChanged)
             setOrganizationId(activeOrganizationId);
-        if (tokenChanged || orgChanged)
+        if (tokenChanged || decodedTokenChanged || orgChanged)
             fetchData();
-    }, [userToken, activeOrganizationId]);
+    }, [userToken, decodedToken, activeOrganizationId]);
     React.useEffect(() => {
         const tabs = helpCenterConfig.tabs;
         const firstTab = tabs[0].id;

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

@@ -30,6 +30,13 @@ const StyledToggletipContent = styled(ToggletipContent) `
 		color: var(--cds-link-hover-text-color);
 	}
 `;
+const ClusterTagWrapper = styled.div `
+	.cds--tag {
+		height: 1.5rem;
+		margin-top: 0.75rem;
+		padding: 0 1rem;
+	}
+`;
 export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, infoSideBar, infoButton, helpCenter, actionButtons, userSideBar, notificationSideBar, clusterUuid, }) => {
     const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINT_LG_WIDTH}`);
     const appBarElementsLength = appBar.elements?.length ?? 0;
@@ -80,11 +87,8 @@ export const C3Navigation = ({ app, appBar, forwardRef, navbar, orgSideBar, info
                                             padding: "0 1rem",
                                         }, type: tag.color }, tag.label));
                                 }),
-                            clusterUuid && (React.createElement(C3ClusterTag, { style: {
-                                    height: "1.5rem",
-                                    marginTop: "0.75rem",
-                                    padding: "0 1rem",
-                                }, clusterUuid: clusterUuid })),
+                            clusterUuid && (React.createElement(ClusterTagWrapper, null,
+                                React.createElement(C3ClusterTag, { clusterUuid: clusterUuid }))),
                             navbar.orgName && (React.createElement("div", { className: "bodyText", style: {
                                     fontSize: "14px",
                                     lineHeight: "3rem",

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

@@ -2,10 +2,9 @@ import React, { useState } from "react";
 import { OnboardingSurvey } from "./onboardingSurvey";
 import { defaultOnboardingConfig } from "./defaultOnboardingConfig";
 import { getOnboardingConfig, submitSurvey, updatePersona, } from "../../api/help-center";
-import { decodeJWT } from "../c3-user-configuration/authToken";
 import { useC3UserConfiguration } from "../c3-user-configuration/c3-user-configuration-provider";
 export const C3OnboardingSurvey = (props) => {
-    const { userToken, activeOrganizationId } = useC3UserConfiguration() || {};
+    const { userToken, decodedToken, activeOrganizationId } = useC3UserConfiguration() || {};
     const [persona, setPersona] = useState(props.persona);
     const [userId, setUserId] = useState("");
     const [token, setToken] = useState("");
@@ -18,7 +17,6 @@ export const C3OnboardingSurvey = (props) => {
             return;
         setToken(userToken);
         (async () => {
-            const decodedToken = decodeJWT(userToken);
             if (!decodedToken)
                 return;
             const { userId, meta, audience, persona } = decodedToken;

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

@@ -19,11 +19,12 @@ export type Meta = {
     email: string;
 };
 export declare const getMeta: (token: Token) => Meta | undefined;
-export declare const decodeJWT: (userToken: string) => {
-    audience?: string | string[] | undefined;
-    persona?: Persona | undefined;
+export type DecodedToken = {
+    audience?: string | string[];
+    persona?: Persona;
     decodedToken: Token;
-    userId?: string | undefined;
-    meta?: Meta | undefined;
-} | null;
+    userId?: string;
+    meta?: Meta;
+};
+export declare const decodeJWT: (userToken: string) => null | DecodedToken;
 export {};

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

@@ -3,7 +3,6 @@ import { C3UserConfigurationContext } from "../c3-user-configuration-provider";
 import { getUserTheme, updateTheme } from "../../../api/profile";
 import { CarbonThemeProvider, resolveTheme, } from "./carbon-theme-provider";
 import { getClusters } from "../../../api/help-center";
-import { decodeJWT } from "../authToken";
 export const defaultTheme = "light";
 export const C3ProfileContext = createContext({
     isEnabled: false,
@@ -13,13 +12,12 @@ export const C3ProfileContext = createContext({
     onThemeChange: () => undefined,
 });
 export const C3ProfileProvider = ({ children }) => {
-    const config = useContext(C3UserConfigurationContext);
+    const { decodedToken, ...config } = useContext(C3UserConfigurationContext);
     const isEnabled = !!config;
     const themeRef = useRef(getUserTheme(config.userToken) || defaultTheme);
     const [resolvedTheme, setResolvedTheme] = useState(defaultTheme);
     const [clusters, setClusters] = useState(null);
     useEffect(() => {
-        const decodedToken = decodeJWT(config?.userToken);
         if (!decodedToken)
             return;
         const { audience } = decodedToken;

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

@@ -1,5 +1,6 @@
 import React, { FC, ReactNode } from "react";
 import { Endpoints, Stage } from "../../api/endpoints.const";
+import { DecodedToken } from "./authToken";
 type C3UserConfigurationBase = {
     activeOrganizationId: string;
     userToken: string;
@@ -14,9 +15,12 @@ type C3UserConfigurationWithStage = C3UserConfigurationBase & {
     handleTheme?: boolean;
 };
 export type C3UserConfiguration = C3UserConfigurationWithEndpoints | C3UserConfigurationWithStage;
-export declare const C3UserConfigurationContext: React.Context<C3UserConfiguration>;
+export type C3UserConfigurationContextValue = C3UserConfiguration & {
+    decodedToken: DecodedToken | null;
+};
+export declare const C3UserConfigurationContext: React.Context<C3UserConfigurationContextValue>;
 declare const C3UserConfigurationProvider: FC<C3UserConfiguration & {
     children?: ReactNode;
 }>;
-export declare const useC3UserConfiguration: () => C3UserConfiguration;
+export declare const useC3UserConfiguration: () => C3UserConfigurationContextValue;
 export default C3UserConfigurationProvider;

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

@@ -1,12 +1,21 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { C3ProfileProvider } from "./c3-profile-provider/c3-profile-provider";
+import { decodeJWT } from "./authToken";
 export const C3UserConfigurationContext = React.createContext({
     stage: "dev",
     activeOrganizationId: "",
     userToken: "",
+    decodedToken: null,
     getNewUserToken: () => Promise.resolve(""),
 });
-const C3UserConfigurationProvider = ({ children, ...config }) => (React.createElement(C3UserConfigurationContext.Provider, { value: config },
-    React.createElement(C3ProfileProvider, null, children)));
+const C3UserConfigurationProvider = ({ children, ...config }) => {
+    const [decodedToken, setDecodedToken] = useState(null);
+    useEffect(() => {
+        if (config.userToken)
+            setDecodedToken(decodeJWT(config.userToken));
+    }, [config.userToken]);
+    return (React.createElement(C3UserConfigurationContext.Provider, { value: { ...config, decodedToken } },
+        React.createElement(C3ProfileProvider, null, children)));
+};
 export const useC3UserConfiguration = () => useContext(C3UserConfigurationContext);
 export default C3UserConfigurationProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.2.4-rc.0",
+	"version": "0.2.4-rc.2",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",