wa feedbacks

2026-05-23 17:08:34 +00:00 · 2025-03-21 20:32:48 +05:30 · 2025-03-21 20:32:48 +05:30 · 8c2c42701e
commit 8c2c42701e
parent c9fb1f3118
6 changed files with 232 additions and 59 deletions
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx
@ -139,6 +139,20 @@ export function Steps({ componentMeta, darkMode, ...restProps }) {
    return (
      <Popover className={`${darkMode && 'dark-theme theme-dark'}`} style={{ minWidth: '248px' }}>
        <Popover.Body>
+          <div className="field mb-3" data-cy={`input-and-label-column-name`}>
+            <label data-cy={`label-column-name`} className="font-weight-500 mb-1 font-size-12">
+              {'Id'}
+            </label>
+            <CodeHinter
+              type={'basic'}
+              initialValue={item?.id + ''}
+              theme={darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={'Option label'}
+              onChange={(value) => handleLabelChange('id', value, index)}
+            />
+          </div>
          <div className="field mb-3" data-cy={`input-and-label-column-name`}>
            <label data-cy={`label-column-name`} className="font-weight-500 mb-1 font-size-12">
              {'Label'}
--- a/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/steps.js
@ -31,7 +31,7 @@ export const stepsConfig = {
      validation: {
        schema: {
          type: 'array',
-          element: { type: 'object', object: { id: { type: 'number' } } },
+          element: { type: 'object' },
        },
        defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
      },
@ -97,12 +97,12 @@ export const stepsConfig = {
    {
      handle: 'setVisibility',
      displayName: 'Set visibility',
-      params: [
-        {
-          handle: 'option',
-          displayName: 'Option',
-        },
-      ],
+      params: [{ handle: 'visible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisabled',
+      displayName: 'Set disabled',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
    },
    {
      handle: 'resetSteps',
--- a/frontend/src/Editor/Components/Steps.jsx
+++ b/frontend/src/Editor/Components/Steps.jsx
@ -46,6 +46,22 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
    }
  };

+  useEffect(() => {
+    setExposedVariable('isVisible', isVisible);
+  }, [isVisible]);
+
+  useEffect(() => {
+    setIsVisible(visibility);
+  }, [visibility]);
+
+  useEffect(() => {
+    setExposedVariable('isDisabled', isDisabled);
+  }, [isDisabled]);
+
+  useEffect(() => {
+    setIsDisabled(!disabledState);
+  }, [disabledState]);
+
  useEffect(() => {
    setExposedVariable('setStep', (stepId) => setActiveStepId(stepId));
    setExposedVariable('setVisibility', (visibility) => setIsVisible(visibility));
@ -56,6 +72,10 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
    setExposedVariable('currentStepId', activeStepId);
  }, [activeStepId]);

+  useEffect(() => {
+    setActiveStepId(currentStepId);
+  }, [currentStepId]);
+
  useEffect(() => {
    setExposedVariable('steps', steps);
    setExposedVariable('setStepVisible', (stepId, visibility) => {
@ -87,27 +107,19 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
    });
  }, [JSON.stringify(steps), JSON.stringify(stepsArr)]);

-  useEffect(() => {
-    setExposedVariable('isVisible', isVisible);
-  }, [isVisible]);
-
-  useEffect(() => {
-    setIsVisible(visibility);
-  }, [visibility]);
-
-  useEffect(() => {
-    setExposedVariable('isDisabled', isDisabled);
-  }, [isDisabled]);
-
-  useEffect(() => {
-    setIsDisabled(!disabledState);
-  }, [disabledState]);
-
  return (
    isVisible && (
      <div
        className={`steps ${theme == 'numbers' && 'steps-counter '}`}
-        style={{ color: textColor, height, boxShadow, opacity: isDisabled ? 0.5 : 1 }}
+        style={{
+          color: textColor,
+          height,
+          boxShadow,
+          opacity: isDisabled ? 0.5 : 1,
+          ...(theme === 'plain' && {
+            alignItems: 'center',
+          }),
+        }}
        data-cy={dataCy}
      >
        {filteredSteps?.map((item, index) => {
--- a/frontend/src/Editor/WidgetManager/configs/steps.js
+++ b/frontend/src/Editor/WidgetManager/configs/steps.js
@ -4,9 +4,30 @@ export const stepsConfig = {
  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: 'Steps',
+      displayName: '',
+      showLabel: false,
      validation: {
        schema: {
          type: 'array',
@ -15,6 +36,27 @@ export const stepsConfig = {
        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',
@ -30,6 +72,7 @@ export const stepsConfig = {
        schema: { type: 'boolean' },
        defaultValue: false,
      },
+      section: 'additionalActions',
    },
  },
  defaultSize: {
@ -40,46 +83,132 @@ export const stepsConfig = {
    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: {
-    color: {
+    incompletedAccent: {
      type: 'color',
-      displayName: 'Color',
+      displayName: 'Incompleted accent',
      validation: {
        schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: '#E4E7EB',
      },
+      accordian: 'steps',
    },
-    textColor: {
+    incompletedLabel: {
      type: 'color',
-      displayName: 'Text color',
+      displayName: 'Incompleted label',
      validation: {
        schema: { type: 'string' },
-        defaultValue: '#000000',
+        defaultValue: '#1B1F24',
      },
+      accordian: 'steps',
    },
-    theme: {
-      type: 'select',
-      displayName: 'Theme',
+    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: [
-        { name: 'titles', value: 'titles' },
-        { name: 'numbers', value: 'numbers' },
-        { name: 'plain', value: 'plain' },
+        { displayName: 'Default', value: 'default' },
+        { displayName: 'None', value: 'none' },
      ],
-      validation: {
-        schema: { type: 'string' },
-        defaultValue: 'titles',
-      },
-    },
-    visibility: {
-      type: 'toggle',
-      displayName: 'Visibility',
-      validation: {
-        schema: { type: 'boolean' },
-        defaultValue: true,
-      },
+      accordian: 'container',
    },
  },
  exposedVariables: {
@ -92,17 +221,35 @@ export const stepsConfig = {
    },
    properties: {
      steps: {
-        value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1},{ name: 'step 2', tooltip: 'some tooltip', id: 2},{ name: 'step 3', tooltip: 'some tooltip', id: 3},{ name: 'step 4', tooltip: 'some tooltip', id: 4},{ name: 'step 5', tooltip: 'some tooltip', id: 5}]}}`,
+        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}}' },
-      theme: { value: 'titles' },
      color: { value: '' },
      textColor: { value: '' },
+      padding: { value: 'default' },
+      incompletedAccent: { value: '#E4E7EB' },
+      incompletedLabel: { value: '#1B1F24' },
+      completedAccent: { value: '#4368E3' },
+      completedLabel: { value: '#1B1F24' },
+      currentStepLabel: { value: '#1B1F24' },
    },
  },
 };
--- a/server/ee
+++ b/server/ee
@ -1 +1 @@
-Subproject commit 1da04eef696345ce9f35d42af92e5d6de992cd85
+Subproject commit 26447ec13d91119d001319ac940264bbc39a3b54
--- a/server/src/modules/apps/services/widget-config/steps.js
+++ b/server/src/modules/apps/services/widget-config/steps.js
@ -31,7 +31,7 @@ export const stepsConfig = {
      validation: {
        schema: {
          type: 'array',
-          element: { type: 'object', object: { id: { type: 'number' } } },
+          element: { type: 'object' },
        },
        defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
      },
@ -97,12 +97,12 @@ export const stepsConfig = {
    {
      handle: 'setVisibility',
      displayName: 'Set visibility',
-      params: [
-        {
-          handle: 'option',
-          displayName: 'Option',
-        },
-      ],
+      params: [{ handle: 'visible', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+    },
+    {
+      handle: 'setDisabled',
+      displayName: 'Set disabled',
+      params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }],
    },
    {
      handle: 'resetSteps',