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

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

@@ -1,4 +1,4 @@
-import { Button, Link, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
+import { Button, Link, Loading, ModalBody, ModalFooter, ModalHeader, SideNav, SideNavItems, SideNavMenuItem, Stack, } from "@carbon/react";
 import { Undo } from "@carbon/react/icons";
 import React, { useState } from "react";
 import { Feedback } from "./tabs/feedback";
@@ -11,6 +11,8 @@ export const StyledModalHeader = styled(ModalHeader) `
 	${headings}
 `;
 export const StyledModalBody = styled(ModalBody) `
+	padding-left: 17rem;
+
 	${headings}
 
 	p {
@@ -23,12 +25,14 @@ export const HelpCenter = ({ configuration, organization, persona, email, audien
     const { userToken: token } = useC3UserConfiguration() || {};
     const [activeTab, setActiveTab] = useState(firstTab);
     const [tabTiles, setTabTiles] = useState({});
+    const [isLoadingTiles, setIsLoadingTiles] = useState(false);
     let header = "";
     let content = React.createElement(React.Fragment, null);
     React.useEffect(() => {
         ;
         (async () => {
             const tiles = {};
+            setIsLoadingTiles(true);
             for (const singleTab of tabs) {
                 if (token) {
                     tiles[singleTab.id] = await getTiles({
@@ -46,6 +50,7 @@ export const HelpCenter = ({ configuration, organization, persona, email, audien
                 }
             }
             setTabTiles(tiles);
+            setIsLoadingTiles(false);
         })();
     }, [token, persona, audience, organization, clusters, tabs]);
     React.useEffect(() => {
@@ -57,11 +62,16 @@ export const HelpCenter = ({ configuration, organization, persona, email, audien
                 header = head;
             }, salesPlanType: organization?.organizationToSalesPlan?.salesPlan?.salesPlanType ?? "" }));
     }
+    else if (activeTab === "recommendations" &&
+        Object.keys(tabTiles).length === 0 &&
+        isLoadingTiles) {
+        header = "Your recommendations";
+        content = React.createElement(Loading, { style: { marginLeft: "17rem" } });
+    }
     else if (activeTab === "recommendations" &&
         Object.keys(tabTiles).length === 0) {
         header = "";
         content = (React.createElement("div", { style: {
-                paddingLeft: "256px",
                 height: "100%",
                 display: "flex",
                 justifyContent: "center",

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

@@ -84,7 +84,6 @@ export const Feedback = (props) => {
     if (submitted) {
         props.setHeader("");
         return (React.createElement("div", { style: {
-                paddingLeft: "256px",
                 height: "100%",
                 display: "flex",
                 justifyContent: "center",
@@ -113,7 +112,7 @@ export const Feedback = (props) => {
                                         setSubmitted(false);
                                     } }, "Share additional feedback"))))))));
     }
-    return (React.createElement("div", { style: { paddingLeft: "256px" } },
+    return (React.createElement("div", null,
         React.createElement(Stack, { gap: 6 },
             React.createElement("p", null, "We actively use this information to fix problems and improve your experience with our products."),
             !orgIsEnterPriseOrPaidCC && (React.createElement("div", null,

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

@@ -6,7 +6,7 @@ export const TAB_TYPES = {
     Column: "column",
 };
 export const TabContent = ({ onboarding, type, origin, tiles, mixpanelTrack }) => {
-    return (React.createElement("div", { style: { paddingLeft: "256px" } },
+    return (React.createElement("div", null,
         React.createElement(Stack, null,
             onboarding && onboarding?.complete !== true && (React.createElement(ActionableNotification, { kind: "info", inline: true, lowContrast: false, hideCloseButton: true, style: { maxWidth: "100%" }, actionButtonLabel: "Resume Survey", onActionButtonClick: onboarding.resumeSurvey, title: "Complete the new user survey to see more recommendations", subtitle: "" })),
             React.createElement("div", { style: {

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

@@ -10,6 +10,7 @@ export const C3OnboardingSurvey = (props) => {
     const [token, setToken] = useState("");
     const [audience, setAudience] = useState("");
     const [onboardConfig, setOnboardConfig] = useState(defaultOnboardingConfig);
+    const [isLoadingConfig, setIsLoadingConfig] = useState(false);
     const [givenName, setGivenName] = useState("");
     const [email, setEmail] = useState("");
     React.useEffect(() => {
@@ -34,11 +35,13 @@ export const C3OnboardingSurvey = (props) => {
                 setUserId(userId);
             setOnboardConfig(defaultOnboardingConfig);
             if (decodedAudience) {
+                setIsLoadingConfig(true);
                 const config = await getOnboardingConfig({
                     audience: decodedAudience,
                     camundaAuth: { token: userToken },
                 });
                 setOnboardConfig(config);
+                setIsLoadingConfig(false);
             }
         })();
     }, [userToken]);
@@ -90,5 +93,5 @@ export const C3OnboardingSurvey = (props) => {
         setPersona(newPersona);
         props.personaCallback(newPersona);
     };
-    return (React.createElement(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboardConfig, modal: props.modal, origin: props.origin }));
+    return (React.createElement(OnboardingSurvey, { appTheme: props.theme, userFirstName: givenName, persona: persona, syncPersona: syncPersona, setPersona: setPersona, mixpanelTrack: props.mixpanelTrack, onRequestClose: closeFn, onboardingConfiguration: onboardConfig, isLoadingConfig: isLoadingConfig, modal: props.modal, origin: props.origin }));
 };

package/lib/esm/components/c3-onboarding-survey/onboardingSurvey.d.ts

@@ -10,6 +10,7 @@ export declare const OnboardingSurvey: FC<{
     setPersona: (persona: Persona) => void;
     onRequestClose: (skip: boolean) => Promise<void>;
     onboardingConfiguration: OnboardingConfig;
+    isLoadingConfig: boolean;
     modal: boolean;
     origin: string;
     mixpanelTrack?: (event: string, data: Dict | undefined) => void;

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

@@ -1,10 +1,10 @@
-import { ProgressIndicator, ProgressStep, Stack } from "@carbon/react";
+import { Loading, ProgressIndicator, ProgressStep, Stack } from "@carbon/react";
 import React, { useState } from "react";
 import { OnboardingModal } from "./onboardingModal";
 import { OnboardingPage } from "./onboardingPage";
 import { OnboardingStep } from "./step";
 import { Body01 } from "../styles";
-export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona, setPersona, mixpanelTrack, onRequestClose, onboardingConfiguration, modal, origin, }) => {
+export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona, setPersona, mixpanelTrack, onRequestClose, onboardingConfiguration, isLoadingConfig, modal, origin, }) => {
     const [step, setStep] = useState(persona?.nextStep ?? 0);
     const [isDoingAsyncWork, setIsDoingAsyncWork] = useState(false);
     React.useEffect(() => {
@@ -119,11 +119,7 @@ export const OnboardingSurvey = ({ appTheme, persona, userFirstName, syncPersona
     const content = (React.createElement(React.Fragment, null,
         React.createElement(Body01, null, "Get personalized next steps and educational content by answering this 1-minute survey."),
         React.createElement(Stack, { gap: 8 },
-            React.createElement(ProgressIndicator, { currentIndex: step, spaceEqually: true, onChange: tryStepTo }, (() => {
-                return onboardingConfiguration.steps.map((currentStep, index) => {
-                    return (React.createElement(ProgressStep, { label: `Step ${index + 1}`, secondaryLabel: currentStep.title, key: `onboarding-step-${index}`, disabled: step !== index }));
-                });
-            })()),
+            React.createElement(ProgressIndicator, { currentIndex: step, spaceEqually: true, onChange: tryStepTo }, isLoadingConfig ? (React.createElement(Loading, null)) : (onboardingConfiguration.steps.map((currentStep, index) => (React.createElement(ProgressStep, { label: `Step ${index + 1}`, secondaryLabel: currentStep.title, key: `onboarding-step-${index}`, disabled: step !== index }))))),
             React.createElement(OnboardingStep, { theme: theme, generic: generic, setGeneric: setGeneric, config: onboardingConfiguration.steps[step] }))));
     if (modal) {
         return (React.createElement(OnboardingModal, { isDoingAsyncWork: isDoingAsyncWork, heading: `Welcome to Camunda 8, ${userFirstName}!`, headingLabel: "", primaryButtonText: "Next", primaryButtonDisabled: !nextEnabled(step), secondaryButtonText: step === 0 ? undefined : "Previous", tertiaryButtonText: step === 0 ? "Skip customization" : undefined, loadingText: "Loading", theme: theme, onPrimary: stepForward, onRequestClose: onRequestClose, onSecondary: secondaryButtonAction, onTertiary: step === 0 ? secondaryButtonAction : undefined }, content));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.2.4-rc.2",
+	"version": "0.2.5-rc.0",
 	"scripts": {
 		"clean": "rimraf lib/",
 		"build": "yarn clean && tsc",
@@ -26,10 +26,10 @@
 		"test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
 	},
 	"devDependencies": {
-		"@babel/core": "7.22.11",
-		"@babel/preset-env": "7.22.14",
-		"@babel/preset-react": "7.22.5",
-		"@babel/preset-typescript": "7.22.11",
+		"@babel/core": "7.22.15",
+		"@babel/preset-env": "7.22.15",
+		"@babel/preset-react": "7.22.15",
+		"@babel/preset-typescript": "7.22.15",
 		"@carbon/react": "1.37.0",
 		"@mdx-js/react": "2.3.0",
 		"@playwright/test": "1.37.1",