Update data alerts modal (#514)

* Update Data Alerts Modal (Do not allow user to progress to next step if current step is not complete) * Update Steps.test.js
chatatechnologies · Oct 25, 2022 · df82a05 · df82a05
1 parent e18cc16
commit df82a05
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 21 deletions.
diff --git a/src/components/Notifications/DataAlertModal/DataAlertModal.js b/src/components/Notifications/DataAlertModal/DataAlertModal.js
@@ -47,16 +47,16 @@ class DataAlertModal extends React.Component {
 
   static defaultProps = {
     authentication: authenticationDefault,
-    onSave: () => {},
-    onErrorCallback: () => {},
+    onSave: () => { },
+    onErrorCallback: () => { },
     initialQuery: undefined,
     currentDataAlert: undefined,
     isVisible: false,
     allowDelete: true,
-    onClose: () => {},
+    onClose: () => { },
     isManagement: false,
-    onManagementCreateDataAlert: () => {},
-    onManagementDeleteDataAlert: () => {},
+    onManagementCreateDataAlert: () => { },
+    onManagementDeleteDataAlert: () => { },
     title: 'Create Data Alert',
     titleIcon: undefined,
     enableQueryValidation: true,
@@ -302,7 +302,7 @@ class DataAlertModal extends React.Component {
               isExpressionValidated: true,
             })
             if (this.stepsRef) {
-              this.stepsRef.nextStep()
+              setTimeout(() => this.stepsRef.nextStep(), 500)
             }
           })
           .catch((error) => {
@@ -386,7 +386,7 @@ class DataAlertModal extends React.Component {
     }
   }
 
-  renderNextBtn = (className, disabled, onclick = () => {}, text) => {
+  renderNextBtn = (className, disabled, onclick = () => { }, text) => {
     return (
       <Button
         className={className}
@@ -492,7 +492,7 @@ class DataAlertModal extends React.Component {
             : this.renderNextBtn(
               'first-step-next-btn',
               this.props.enableQueryValidation &&
-                  (!this.state.isExpressionValidated || !this.state.isExpressionValid),
+              (!this.state.isExpressionValidated || !this.state.isExpressionValid),
             )}
         </div>
       </div>
@@ -656,7 +656,7 @@ class DataAlertModal extends React.Component {
         >
           {this.props.isVisible && (
             <div className='notification-modal-content'>
-              <Steps ref={(r) => (this.stepsRef = r)} steps={steps} />
+              <Steps ref={(r) => (this.stepsRef = r)} steps={steps} isEditMode={!!this.props?.currentDataAlert?.id} />
             </div>
           )}
         </Modal>
@@ -678,4 +678,4 @@ class DataAlertModal extends React.Component {
   }
 }
 
-export default withTheme(DataAlertModal)
+export default withTheme(DataAlertModal)
diff --git a/src/components/Notifications/DataAlertModal/DataAlertModal.scss b/src/components/Notifications/DataAlertModal/DataAlertModal.scss
@@ -8,7 +8,7 @@
   .step-btn-container {
     text-align: right;
     display: flex;
-    min-height: 20px;
+    min-height: 30px;
   }
 }
 
@@ -33,4 +33,4 @@
 
 .react-autoql-data-alert-query-name-tooltip-icon {
   color: var(--react-autoql-info-color);
-}
+}
diff --git a/src/components/Steps/Steps.js b/src/components/Steps/Steps.js
@@ -15,12 +15,14 @@ export default class Steps extends React.Component {
     steps: PropTypes.arrayOf(PropTypes.shape({})),
     initialActiveStep: PropTypes.number,
     collapsible: PropTypes.bool,
+    isEditMode: PropTypes.bool,
   }
 
   static defaultProps = {
     steps: undefined,
     initialActiveStep: undefined,
     collapsible: true,
+    isEditMode: false,
   }
 
   state = {
@@ -69,6 +71,13 @@ export default class Steps extends React.Component {
 
   onStepTitleClick = (i, step) => {
     try {
+
+      let newActiveStep = i
+      // if current current step is not complete then block user from proceeding to the next step.
+      if (!this.props.isEditMode && newActiveStep > 0 && !this.props.steps?.[newActiveStep - 1]?.complete) {
+        return
+      }
+
       if (step && step.onClick) {
         step.onClick()
       }
@@ -77,8 +86,6 @@ export default class Steps extends React.Component {
         clearTimeout(this.autoHideTimeout)
       }
 
-      let newActiveStep = i
-
       // If there is an active step, explicitly set the height
       // at the moment of the click then back to 0
       const activeContentContainer = document.querySelector(
@@ -129,6 +136,17 @@ export default class Steps extends React.Component {
     return ''
   }
 
+  getIsStepTitleDisabled = (i, step) => {
+    if (i !== 0 &&
+      i !== this.state?.activeStep &&
+      !step?.complete &&
+      !this.props.steps?.[i - 1]?.complete
+    ) {
+      return ' disabled'
+    }
+    return ''
+  }
+
   render = () => {
     if (!this.props.steps || !this.props.steps.length) {
       return null
@@ -155,7 +173,9 @@ export default class Steps extends React.Component {
                     data-test={`react-autoql-step-title-${i}`}
                     onClick={() => this.onStepTitleClick(i, step)}
                   >
-                    <div className='react-autoql-step-title'>{step.title}</div>
+                    <div className={`react-autoql-step-title${this.getIsStepTitleDisabled(i, step)}`}>
+                      {step.title}
+                    </div>
                   </div>
                   <div
                     id={`react-autoql-step-content-${this.COMPONENT_KEY}-${i}`}

diff --git a/src/components/Steps/Steps.scss b/src/components/Steps/Steps.scss
@@ -12,6 +12,7 @@
 
   &.complete {
     border-color: var(--react-autoql-accent-color, #26a7df);
+
     .react-autoql-step-dot {
       border-color: var(--react-autoql-accent-color, #26a7df);
       background: var(--react-autoql-accent-color, #26a7df);
@@ -21,6 +22,7 @@
 
   &.error {
     border-color: var(--react-autoql-warning-color);
+
     .react-autoql-step-dot {
       border-color: var(--react-autoql-warning-color);
       background: var(--react-autoql-warning-color);
@@ -63,6 +65,11 @@
   font-size: 15px;
   line-height: 15px;
   padding-top: 2px;
+
+  &.disabled {
+    cursor: default;
+    color: var(--react-autoql-text-color-placeholder, lightgray);
+  }
 }
 
 .react-autoql-step-subtitle {
@@ -71,14 +78,16 @@
   padding-bottom: 6px;
   color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4));
 }
+
 .react-autoql-step-content {
   margin: 15px;
   margin-top: 0;
 }
+
 .react-autoql-step-content-container {
   transition-timing-function: ease;
   transition-property: height, opacity, margin;
   transition-duration: 0.5s;
 
   opacity: 1;
-}
+}
diff --git a/src/components/Steps/Steps.test.js b/src/components/Steps/Steps.test.js
@@ -56,21 +56,27 @@ describe('renders correctly', () => {
   })
 
   test('increments step when nextStep is called', () => {
-    const wrapper = setup()
+    const wrapper = setup({ steps: [{ complete: true }] })
     wrapper.instance().nextStep()
     expect(wrapper.state(['activeStep'])).toBe(1)
   })
 
+  test('Do no increment step when nextStep is called and current step is not complete', () => {
+    const wrapper = setup({ steps: [{ complete: false }] })
+    wrapper.instance().nextStep()
+    expect(wrapper.state(['activeStep'])).toBe(0)
+  })
+
   test('changes active step when title is clicked', () => {
-    const wrapper = setup()
+    const wrapper = setup({ steps: [{ complete: true }, { complete: true }] })
     const secondStepTitleElement = findByTestAttr(wrapper, 'react-autoql-step-title-1')
     secondStepTitleElement.simulate('click')
     expect(wrapper.state(['activeStep'])).toBe(1)
   })
 
   test('onStepClick prop is called when step is clicked', () => {
     const onClick = jest.fn()
-    const wrapper = setup({ steps: [{ onClick }, { onClick }] })
+    const wrapper = setup({ steps: [{ complete: true, onClick }, { complete: true, onClick }] })
     const secondStepTitleElement = findByTestAttr(wrapper, 'react-autoql-step-title-1')
     secondStepTitleElement.simulate('click')
     expect(onClick).toHaveBeenCalled()
@@ -89,10 +95,10 @@ describe('renders correctly', () => {
   })
 
   test('collapses on click when prop is set to true', () => {
-    const wrapper = setup({ collapsible: true })
+    const wrapper = setup({ collapsible: true, steps: [{ complete: true }, { complete: true }] })
     const secondStepTitleElement = findByTestAttr(wrapper, 'react-autoql-step-title-1')
     secondStepTitleElement.simulate('click')
     const stepContainer = findByTestAttr(wrapper, 'react-autoql-step-container-0')
     expect(stepContainer.hasClass('active')).toBe(false)
   })
-})
+})