-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add application section, update translation files
- Loading branch information
1 parent
16cd6af
commit 73ec6c2
Showing
6 changed files
with
224 additions
and
90 deletions.
There are no files selected for viewing
11 changes: 8 additions & 3 deletions
11
opentrons-ai-client/src/assets/localization/en/create_protocol.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,13 @@ | ||
| { | ||
| "application_title": "Application", | ||
| "application_scientific_dropdown_label": "What's your scientific application?", | ||
| "application_scientific_dropdown_title": "What's your scientific application?", | ||
| "application_scientific_dropdown_placeholder": "Select an option", | ||
| "application_describe_label": "Describe what you are trying to do", | ||
| "application_describe_example": "Example: “The protocol performs automated liquid handling for Pierce BCA Protein Assay Kit to determine protein concentrations in various sample types, such as cell lysates and eluates of purification process.", | ||
| "basic_aliquoting": "Basic aliquoting", | ||
| "pcr": "PCR", | ||
| "other": "Other", | ||
| "application_other_title": "Other application", | ||
| "application_other_caption": "Example: “cherrypicking” or “serial dilution”", | ||
| "application_describe_title": "Describe what you are trying to do", | ||
| "application_describe_caption": "Example: “The protocol performs automated liquid handling for Pierce BCA Protein Assay Kit to determine protein concentrations in various sample types, such as cell lysates and eluates of purification process.", | ||
| "section_confirm_button": "Confirm" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
opentrons-ai-client/src/organisms/ApplicationSection/__tests__/ApplicationSection.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { fireEvent, renderHook, screen, waitFor } from '@testing-library/react' | ||
| import { describe, it, expect, beforeEach, vi } from 'vitest' | ||
| import { renderWithProviders } from '../../../__testing-utils__' | ||
| import { i18n } from '../../../i18n' | ||
| import { ApplicationSection } from '..' | ||
| import { FormProvider, useForm, useFormContext } from 'react-hook-form' | ||
|
|
||
| // TODO move to __testing-utils__ | ||
| const TestFormProviderComponent = () => { | ||
| const methods = useForm({ | ||
| defaultValues: {}, | ||
| }) | ||
|
|
||
| return ( | ||
| <FormProvider {...methods}> | ||
| <ApplicationSection /> | ||
| </FormProvider> | ||
| ) | ||
| } | ||
|
|
||
| const render = (): ReturnType<typeof renderWithProviders> => { | ||
| return renderWithProviders(<TestFormProviderComponent />, { | ||
| i18nInstance: i18n, | ||
| }) | ||
| } | ||
|
|
||
| describe('ApplicationSection', () => { | ||
| beforeEach(() => { | ||
| const { result } = renderHook(() => useFormContext()) | ||
| const methods = result.current | ||
| }) | ||
|
|
||
| it('should render scientific application dropdown, describe input and confirm button', () => { | ||
| render() | ||
|
|
||
| expect( | ||
| screen.getByText("What's your scientific application?") | ||
| ).toBeInTheDocument() | ||
| expect( | ||
| screen.getByText('Describe what you are trying to do') | ||
| ).toBeInTheDocument() | ||
| expect(screen.getByText('Confirm')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should not render other application dropdown if Other option is not selected', () => { | ||
| render() | ||
|
|
||
| expect(screen.queryByText('Other application')).not.toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should render other application dropdown if Other option is selected', () => { | ||
| render() | ||
|
|
||
| const applicationDropdown = screen.getByText('Select an option') | ||
| fireEvent.click(applicationDropdown) | ||
|
|
||
| const otherOption = screen.getByText('Other') | ||
| fireEvent.click(otherOption) | ||
|
|
||
| expect(screen.getByText('Other application')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should enable confirm button when all fields are filled', async () => { | ||
| render() | ||
|
|
||
| const applicationDropdown = screen.getByText('Select an option') | ||
| fireEvent.click(applicationDropdown) | ||
|
|
||
| const basicAliquotingOption = screen.getByText('Basic aliquoting') | ||
| fireEvent.click(basicAliquotingOption) | ||
|
|
||
| const describeInput = screen.getByRole('textbox') | ||
| fireEvent.change(describeInput, { target: { value: 'Test description' } }) | ||
|
|
||
| const confirmButton = screen.getByRole('button') | ||
| await waitFor(() => expect(confirmButton).toBeEnabled()) | ||
| }) | ||
|
|
||
| it('should disable confirm button when all fields are not filled', () => { | ||
| render() | ||
|
|
||
| const confirmButton = screen.getByRole('button') | ||
| expect(confirmButton).toBeDisabled() | ||
| }) | ||
| }) |
83 changes: 83 additions & 0 deletions
83
opentrons-ai-client/src/organisms/ApplicationSection/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { | ||
| DIRECTION_COLUMN, | ||
| DISPLAY_FLEX, | ||
| Flex, | ||
| JUSTIFY_FLEX_END, | ||
| LargeButton, | ||
| SPACING, | ||
| } from '@opentrons/components' | ||
| import { useFormContext } from 'react-hook-form' | ||
| import { useTranslation } from 'react-i18next' | ||
| import styled from 'styled-components' | ||
| import { ControlledDropdownMenu } from '../../atoms/ControlledDropdownMenu' | ||
| import { ControlledInputField } from '../../atoms/ControlledInputField' | ||
|
|
||
| export const BASIC_ALIQUOTING = 'basic_aliquoting' | ||
| export const PCR = 'pcr' | ||
| export const OTHER = 'other' | ||
| export const APPLICATION_SCIENTIFIC_APPLICATION = | ||
| 'application.scientificApplication' | ||
| export const APPLICATION_OTHER_APPLICATION = 'application.otherApplication' | ||
| export const APPLICATION_DESCRIBE = 'application.describe' | ||
|
|
||
| export function ApplicationSection(): JSX.Element | null { | ||
| const { t } = useTranslation('create_protocol') | ||
| const { | ||
| watch, | ||
| formState: { isValid }, | ||
| } = useFormContext() | ||
|
|
||
| const options = [ | ||
| { name: t(BASIC_ALIQUOTING), value: BASIC_ALIQUOTING }, | ||
| { name: t(PCR), value: PCR }, | ||
| { name: t(OTHER), value: OTHER }, | ||
| ] | ||
|
|
||
| const isOtherSelected = watch(APPLICATION_SCIENTIFIC_APPLICATION) === OTHER | ||
|
|
||
| return ( | ||
| <Flex | ||
| flexDirection={DIRECTION_COLUMN} | ||
| height="100%" | ||
| gap={SPACING.spacing16} | ||
| > | ||
| <ControlledDropdownMenu | ||
| width="100%" | ||
| dropdownType="neutral" | ||
| name={APPLICATION_SCIENTIFIC_APPLICATION} | ||
| title={t('application_scientific_dropdown_title')} | ||
| options={options} | ||
| placeholder={t('application_scientific_dropdown_placeholder')} | ||
| rules={{ required: true }} | ||
| /> | ||
|
|
||
| {isOtherSelected && ( | ||
| <ControlledInputField | ||
| name={APPLICATION_OTHER_APPLICATION} | ||
| title={t('application_other_title')} | ||
| caption={t('application_other_caption')} | ||
| rules={{ required: isOtherSelected, minLength: 3 }} | ||
| /> | ||
| )} | ||
|
|
||
| <ControlledInputField | ||
| name={APPLICATION_DESCRIBE} | ||
| title={t('application_describe_title')} | ||
| caption={t('application_describe_caption')} | ||
| rules={{ required: true, minLength: 3 }} | ||
| /> | ||
|
|
||
| <ButtonContainer> | ||
| <LargeButton | ||
| disabled={!isValid} | ||
| buttonText={t('section_confirm_button')} | ||
| ></LargeButton> | ||
| </ButtonContainer> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| const ButtonContainer = styled.div` | ||
| display: ${DISPLAY_FLEX}; | ||
| justify-content: ${JUSTIFY_FLEX_END}; | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters