fix: fixed first render issues and removed unused configs

frontend/src/Editor/Components/Steps.jsx

@@ -18,14 +18,29 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
   const [activeStepId, setActiveStepId] = useState(currentStepId);
   const theme = properties.variant;
   const [progressBarWidth, setProgressBarWidth] = useState(0);
-  const [labelPadding, setLabelPadding] = useState(0);
+  const [containerPadding, setContainerPadding] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
+  const [filteredSteps, setFilteredSteps] = useState([]);
   const firstLabelRef = useRef(null);
   const lastLabelRef = useRef(null);
   const containerRef = useRef(null);
 
+  const currentStepIndex = filteredSteps.findIndex((step) => step.id == activeStepId);
+
+  useEffect(() => {
+    const sanitizedSteps = JSON.parse(JSON.stringify(steps || [])).map((step) => ({
+      ...step,
+      visible: 'visible' in step ? step.visible : true,
+      disabled: 'disabled' in step ? step.disabled : false,
+    }));
+    const newFilteredSteps = (sanitizedSteps || []).filter((step) => step.visible);
+    setFilteredSteps(newFilteredSteps);
+    setStepsArr(sanitizedSteps);
+  }, [JSON.stringify(steps)]);
+
   // Common function to calculate progress bar width and label padding
   const calculateProgressBarWidth = () => {
+    debugger;
     if (!containerRef.current || theme !== 'titles') return;
 
     const containerWidth = containerRef.current.offsetWidth;
@@ -37,7 +52,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
 
     if (filteredSteps.length === 1) {
       setProgressBarWidth(containerWidth);
-      setLabelPadding(0); // No padding needed for single step
+      setContainerPadding(0); // No padding needed for single step
       return;
     }
 
@@ -45,24 +60,22 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
     const progressBarWidth = (containerWidth - totalStepsWidth) / totalProgressBars;
     setProgressBarWidth(Math.min(progressBarWidth, (containerWidth - totalStepsWidth) / filteredSteps.length));
 
-    // Calculate label padding
+    // Calculate container padding
     if (firstLabelRef.current && lastLabelRef.current) {
-      // Step 1: Calculate individual label width
       const labelWidth = (containerWidth - (filteredSteps.length - 1) - 4) / filteredSteps.length;
 
-      // Step 2: Find max label length
       const firstLabelWidth = firstLabelRef.current.offsetWidth;
       const lastLabelWidth = lastLabelRef.current.offsetWidth;
       const maxLabelWidth = Math.max(firstLabelWidth, lastLabelWidth);
 
-      // Step 3: Calculate label padding
       const calculatedPadding = (maxLabelWidth / 2) - 1;
-      setLabelPadding(Math.max(2, calculatedPadding)); // Ensure minimum padding of 2px
+      setContainerPadding(Math.max(2, calculatedPadding)); // Ensure minimum padding of 2px
     }
   };
 
   // Add resize observer to track container width and calculate progress bar width
   useEffect(() => {
+    calculateProgressBarWidth();
     if (theme !== 'titles') return;
 
     const resizeObserver = new ResizeObserver((entries) => {
@@ -76,27 +89,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
     }
 
     return () => resizeObserver.disconnect();
-  }, [theme, JSON.stringify(steps)]);
+  }, [theme, JSON.stringify(steps), filteredSteps]);
-
-  // Recalculate measurements when steps change
-  useEffect(() => {
-    calculateProgressBarWidth();
-  }, [theme, JSON.stringify(steps)]);
-
-  // Filter visible steps and find current step index
-  const filteredSteps = (stepsArr || []).filter((step) => step.visible);
-  const currentStepIndex = filteredSteps.findIndex((step) => step.id == activeStepId);
-
-  // Sanitize steps data
-  useEffect(() => {
-    const sanitizedSteps = JSON.parse(JSON.stringify(steps || [])).map((step) => ({
-      ...step,
-      visible: 'visible' in step ? step.visible : true,
-      disabled: 'disabled' in step ? step.disabled : false,
-    }));
-    setStepsArr(sanitizedSteps);
-  }, [JSON.stringify(steps)]);
-
   // Dynamic styles for theming
   const dynamicStyle = {
     '--bgColor': styles.color,
@@ -169,7 +162,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
       style={{
         height,
         boxShadow,
-        padding: theme === 'titles' ? `0 ${labelPadding}px` : 0,
+        padding: theme === 'titles' ? `0 ${containerPadding}px` : 2,
         ...dynamicStyle
       }}
       data-cy={dataCy}
@@ -184,7 +177,7 @@ export const Steps = function Steps({ properties, styles, fireEvent, setExposedV
           const isLastStep = index === filteredSteps.length - 1;
 
           return (
-            <React.Fragment key={step.id}>
+            <React.Fragment key={index}> {/* using index as key to avoid issues due to duplicate step ids */}
               <ToolTip
                 show={!step.disabled && !isDisabled}
                 message={step.tooltip || ''}

frontend/src/Editor/WidgetManager/configs/index.js

@@ -47,7 +47,7 @@ import { verticalDividerConfig } from './verticalDivider';
 import { customComponentConfig } from './customComponent';
 import { buttonGroupConfig } from './buttonGroup';
 import { pdfConfig } from './pdf';
-import { stepsConfig } from './steps';
+// import { stepsConfig } from './steps';
 import { kanbanConfig } from './kanban';
 import { colorPickerConfig } from './colorPicker';
 import { treeSelectConfig } from './treeSelect';
@@ -106,7 +106,7 @@ export {
   customComponentConfig,
   buttonGroupConfig,
   pdfConfig,
-  stepsConfig,
+  // stepsConfig,
   kanbanConfig,
   kanbanBoardConfig, //!Depreciated
   colorPickerConfig,

frontend/src/Editor/WidgetManager/configs/steps.js

@@ -1,255 +0,0 @@
-export const stepsConfig = {
-  name: 'Steps',
-  displayName: 'Steps',
-  description: 'Step-by-step navigation aid',
-  component: 'Steps',
-  properties: {
-    variant: {
-      type: 'switch',
-      displayName: 'Variant',
-      validation: { schema: { type: 'string' }, defaultValue: 'titles' },
-      options: [
-        { displayName: 'Label', value: 'titles' },
-        { displayName: 'Numbers', value: 'numbers' },
-        { displayName: 'Plain', value: 'plain' },
-      ],
-      accordian: 'label',
-    },
-    schema: {
-      type: 'code',
-      displayName: 'Schema',
-      conditionallyRender: {
-        key: 'advanced',
-        value: true,
-      },
-      accordian: 'Options',
-    },
-    steps: {
-      type: 'code',
-      displayName: '',
-      showLabel: false,
-      validation: {
-        schema: {
-          type: 'array',
-          element: { type: 'object', object: { id: { type: 'number' } } },
-        },
-        defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
-      },
-    },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
-      validation: { schema: { type: 'boolean' }, defaultValue: true },
-      section: 'additionalActions',
-    },
-    // disabledState: {
-    //   type: 'toggle',
-    //   displayName: 'Disable',
-    //   validation: { schema: { type: 'boolean' }, defaultValue: true },
-    //   section: 'additionalActions',
-    // },
-    advanced: {
-      type: 'toggle',
-      displayName: 'Dynamic options',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
-      accordian: 'Options',
-    },
-    currentStep: {
-      type: 'code',
-      displayName: 'Current step',
-      validation: {
-        schema: { type: 'number' },
-        defaultValue: 1,
-      },
-    },
-    stepsSelectable: {
-      type: 'toggle',
-      displayName: 'Steps selectable',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: false,
-      },
-      section: 'additionalActions',
-    },
-  },
-  defaultSize: {
-    width: 22,
-    height: 38,
-  },
-  others: {
-    showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
-    showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
-  },
-  actions: [
-    {
-      handle: 'setStep',
-      displayName: 'Set step',
-      params: [
-        {
-          handle: 'option',
-          displayName: 'Option',
-        },
-      ],
-    },
-    {
-      handle: 'setVisibility',
-      displayName: 'Set visibility',
-      params: [
-        {
-          handle: 'option',
-          displayName: 'Option',
-        },
-      ],
-    },
-    {
-      handle: 'setDisabled',
-      displayName: 'Set disabled',
-      params: [
-        {
-          handle: 'option',
-          displayName: 'Option',
-        },
-      ],
-    },
-    {
-      handle: 'resetSteps',
-      displayName: 'Reset steps',
-      params: [],
-    },
-    {
-      handle: 'setStepVisible',
-      displayName: 'Set step visible',
-      params: [
-        {
-          handle: 'id',
-          displayName: 'Step id',
-        },
-        {
-          handle: 'visibility',
-          displayName: 'visibility',
-        },
-      ],
-    },
-    {
-      handle: 'setStepDisable',
-      displayName: 'Set step disable',
-      params: [
-        {
-          handle: 'id',
-          displayName: 'Step id',
-        },
-        {
-          handle: 'disabled',
-          displayName: 'disabled',
-        },
-      ],
-    },
-  ],
-  events: {
-    onSelect: { displayName: 'On select' },
-  },
-  styles: {
-    incompletedAccent: {
-      type: 'color',
-      displayName: 'Incompleted accent',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#E4E7EB',
-      },
-      accordian: 'steps',
-    },
-    incompletedLabel: {
-      type: 'color',
-      displayName: 'Incompleted label',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#1B1F24',
-      },
-      accordian: 'steps',
-    },
-    completedAccent: {
-      type: 'color',
-      displayName: 'Completed accent',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#4368E3',
-      },
-      accordian: 'steps',
-    },
-    completedLabel: {
-      type: 'color',
-      displayName: 'Completed label',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#FBFCFD',
-      },
-      accordian: 'steps',
-    },
-    currentStepLabel: {
-      type: 'color',
-      displayName: 'Current step label',
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: '#1B1F24',
-      },
-      accordian: 'steps',
-    },
-    padding: {
-      type: 'switch',
-      displayName: 'Padding',
-      validation: {
-        schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
-        defaultValue: 'default',
-      },
-      options: [
-        { displayName: 'Default', value: 'default' },
-        { displayName: 'None', value: 'none' },
-      ],
-      accordian: 'container',
-    },
-  },
-  exposedVariables: {
-    currentStepId: '3',
-  },
-  definition: {
-    others: {
-      showOnDesktop: { value: '{{true}}' },
-      showOnMobile: { value: '{{false}}' },
-    },
-    properties: {
-      steps: {
-        value: [
-          { name: 'step 1', tooltip: 'some tooltip', id: 1, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 2', tooltip: 'some tooltip', id: 2, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 3', tooltip: 'some tooltip', id: 3, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 4', tooltip: 'some tooltip', id: 4, visible: { value: true }, disabled: { value: false } },
-          { name: 'step 5', tooltip: 'some tooltip', id: 5, visible: { value: true }, disabled: { value: false } },
-        ],
-      },
-      schema: {
-        value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`,
-      },
-      variant: { value: 'titles' },
-      currentStep: { value: '{{3}}' },
-      stepsSelectable: { value: true },
-      advanced: { value: `{{false}}` },
-      // disabledState: { value: '{{false}}' },
-      visibility: { value: '{{true}}' },
-    },
-    events: [],
-    styles: {
-      visibility: { value: '{{true}}' },
-      color: { value: '' },
-      textColor: { value: '' },
-      padding: { value: 'default' },
-      incompletedAccent: { value: '#E4E7EB' },
-      incompletedLabel: { value: '#1B1F24' },
-      completedAccent: { value: '#4368E3' },
-      completedLabel: { value: '#1B1F24' },
-      currentStepLabel: { value: '#1B1F24' },
-    },
-  },
-};