snackbar and bool render

Opentrons · Apr 2, 2024 · b8e109b · b8e109b
1 parent 701d579
commit b8e109b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 71 deletions.
diff --git a/app/src/organisms/ProtocolSetupParameters/ChooseEnum.tsx b/app/src/organisms/ProtocolSetupParameters/ChooseEnum.tsx
@@ -29,22 +29,16 @@ export function ChooseEnum({
   const { makeSnackbar } = useToaster()
 
   const { t } = useTranslation(['protocol_setup', 'shared'])
-  if (parameter.type !== 'bool' && parameter.type !== 'str') {
+  if (parameter.type !== 'str') {
     console.error(
-      `parameter type is expected to be boolean or string for parameter ${parameter.displayName}`
+      `parameter type is expected to be a string for parameter ${parameter.displayName}`
     )
   }
-  const options = parameter.type === 'str' ? parameter.choices : [true, false]
+  const options = parameter.type === 'str' ? parameter.choices : undefined
   const handleOnClick = (newValue: string | number | boolean): void => {
     setParameter(newValue, parameter.variableName)
   }
 
-  React.useEffect(() => {
-    if (rawValue === parameter.default) {
-      makeSnackbar(t('no_custom_values'))
-    }
-  }, [rawValue])
-
   return (
     <>
       <ChildNavigation
@@ -54,6 +48,7 @@ export function ChooseEnum({
         buttonText={t('restore_default')}
         onClickButton={() => {
           setParameter(parameter.default, parameter.variableName)
+          makeSnackbar(t('no_custom_values'))
         }}
       />
       <Flex
@@ -73,29 +68,14 @@ export function ChooseEnum({
         </StyledText>
 
         {options?.map(option => {
-          const isBoolean = option === true || option === false
           return (
             <RadioButton
-              key={`${isBoolean ? option : option.value}`}
-              data-testid={`${isBoolean ? option : option.value}`}
-              buttonLabel={
-                isBoolean
-                  ? option === true
-                    ? t('on')
-                    : t('off')
-                  : option.displayName
-              }
-              buttonValue={
-                isBoolean
-                  ? option === true
-                    ? 'true'
-                    : 'false'
-                  : `${option.value}`
-              }
-              onChange={() => handleOnClick(isBoolean ? option : option.value)}
-              isSelected={
-                isBoolean ? option === rawValue : option.value === rawValue
-              }
+              key={`${option.value}`}
+              data-testid={`${option.value}`}
+              buttonLabel={option.displayName}
+              buttonValue={`${option.value}`}
+              onChange={() => handleOnClick(option.value)}
+              isSelected={option.value === rawValue}
             />
           )
         })}

diff --git a/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx b/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx
@@ -18,41 +18,8 @@ describe('ChooseEnum', () => {
 
   beforeEach(() => {
     props = {
-      handleGoBack: vi.fn(),
-      parameter: {
-        displayName: 'Dry Run',
-        variableName: 'dry_run',
-        description: 'a dry run description',
-        type: 'bool',
-        default: false,
-        value: false,
-      },
       setParameter: vi.fn(),
-      rawValue: false,
-    }
-  })
-
-  it('should render the text and buttons work for a boolean param', () => {
-    render(props)
-    screen.getByText('Choose Dry Run')
-    const btn = screen.getByRole('button', { name: 'Restore default values' })
-    screen.getByText('On')
-    screen.getByText('Off')
-    const trueOption = screen.getByRole('label', { name: 'On' })
-    const falseOption = screen.getByRole('label', { name: 'Off' })
-    expect(falseOption).toHaveStyle(`background-color: ${COLORS.blue60}`)
-    expect(trueOption).toHaveStyle(`background-color: ${COLORS.blue40}`)
-    fireEvent.click(btn)
-    expect(props.setParameter).toHaveBeenCalled()
-  })
-  it('renders the back icon and calls the prop', () => {
-    render(props)
-    fireEvent.click(screen.getAllByRole('button')[0])
-    expect(props.handleGoBack).toHaveBeenCalled()
-  })
-  it('should render the text and buttons for choice param', () => {
-    props = {
-      ...props,
+      handleGoBack: vi.fn(),
       parameter: {
         displayName: 'Default Module Offsets',
         variableName: 'DEFAULT_OFFSETS',
@@ -77,6 +44,13 @@ describe('ChooseEnum', () => {
       },
       rawValue: '1',
     }
+  })
+  it('renders the back icon and calls the prop', () => {
+    render(props)
+    fireEvent.click(screen.getAllByRole('button')[0])
+    expect(props.handleGoBack).toHaveBeenCalled()
+  })
+  it('should render the text and buttons for choice param', () => {
     render(props)
     screen.getByText('no offsets')
     screen.getByText('temp offset')

diff --git a/app/src/organisms/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx b/app/src/organisms/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx
@@ -55,11 +55,18 @@ describe('ProtocolSetupParameters', () => {
     screen.getByText('Dry Run')
     screen.getByText('a dry run description')
   })
-  it('renders the ChooseEnum component when a boolean param is selected', () => {
+  it('renders the ChooseEnum component when a str param is selected', () => {
     render(props)
-    fireEvent.click(screen.getByText('Dry Run'))
+    fireEvent.click(screen.getByText('Default Module Offsets'))
     screen.getByText('mock ChooseEnum')
   })
+  it('renders the other setting when boolean param is selected', () => {
+    render(props)
+    screen.getByText('Off')
+    expect(screen.getAllByText('On')).toHaveLength(3)
+    fireEvent.click(screen.getByText('Dry Run'))
+    expect(screen.getAllByText('On')).toHaveLength(4)
+  })
   it('renders the back icon and calls useHistory', () => {
     render(props)
     fireEvent.click(screen.getAllByRole('button')[0])

diff --git a/app/src/organisms/ProtocolSetupParameters/index.tsx b/app/src/organisms/ProtocolSetupParameters/index.tsx
@@ -257,7 +257,14 @@ export function ProtocolSetupParameters({
                 hasIcon={!(parameter.type === 'bool')}
                 status="general"
                 title={parameter.displayName}
-                onClickSetupStep={() => setChooseValueScreen(parameter)}
+                onClickSetupStep={() =>
+                  parameter.type === 'bool'
+                    ? updateParameters(
+                        parameter.value === true ? false : true,
+                        parameter.variableName
+                      )
+                    : setChooseValueScreen(parameter)
+                }
                 detail={formatRunTimeParameterValue(parameter, t)}
                 description={parameter.description}
                 fontSize="h4"
@@ -268,10 +275,7 @@ export function ProtocolSetupParameters({
       </Flex>
     </>
   )
-  if (
-    chooseValueScreen != null &&
-    (chooseValueScreen.type === 'bool' || chooseValueScreen.type === 'str')
-  ) {
+  if (chooseValueScreen != null && chooseValueScreen.type === 'str') {
     children = (
       <ChooseEnum
         handleGoBack={() => setChooseValueScreen(null)}