From b4b124e62fa4b352a8e6f4978d4ba69235904285 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 12 Apr 2024 04:18:59 -0400 Subject: [PATCH 1/6] feat(opentrons-ai-client): add sidebar component add sidebar component, its test and its stories close AUTH-208 --- .storybook/main.js | 1 + .storybook/preview.jsx | 2 +- components/src/styles/flexbox.ts | 1 + opentrons-ai-client/src/App.tsx | 1 + .../src/assets/images/opentrons_logo.svg | 51 ++++++++++++ .../localization/en/protocol_generator.json | 4 +- opentrons-ai-client/src/main.tsx | 9 ++- .../src/molecules/Sidebar/SideBar.stories.tsx | 21 +++++ .../Sidebar/__tests__/SideBar.test.tsx | 41 ++++++++++ .../src/molecules/Sidebar/index.tsx | 80 +++++++++++++++++++ opentrons-ai-client/src/molecules/index.ts | 1 + 11 files changed, 207 insertions(+), 5 deletions(-) create mode 100644 opentrons-ai-client/src/assets/images/opentrons_logo.svg create mode 100644 opentrons-ai-client/src/molecules/Sidebar/SideBar.stories.tsx create mode 100644 opentrons-ai-client/src/molecules/Sidebar/__tests__/SideBar.test.tsx create mode 100644 opentrons-ai-client/src/molecules/Sidebar/index.tsx create mode 100644 opentrons-ai-client/src/molecules/index.ts diff --git a/.storybook/main.js b/.storybook/main.js index e9fc91cdf48..985486d5d4e 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -2,6 +2,7 @@ module.exports = { stories: [ '../components/**/*.stories.@(js|jsx|ts|tsx)', '../app/**/*.stories.@(js|jsx|ts|tsx)', + '../opentrons-ai-client/**/*.stories.@(js|jsx|ts|tsx)', ], addons: [ diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index d8537e57827..32864c9abcb 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -20,7 +20,7 @@ export const parameters = { options: { storySort: { method: 'alphabetical', - order: ['Design Tokens', 'Library', 'App', 'ODD'], + order: ['Design Tokens', 'Library', 'App', 'ODD', 'AI'], }, }, } diff --git a/components/src/styles/flexbox.ts b/components/src/styles/flexbox.ts index bc588372e96..2c36936b200 100644 --- a/components/src/styles/flexbox.ts +++ b/components/src/styles/flexbox.ts @@ -1,6 +1,7 @@ export const FLEX_NONE = 'none' export const FLEX_AUTO = 'auto' export const FLEX_MIN_CONTENT = 'min-content' +export const FLEX_MAX_CONTENT = 'max-content' export const ALIGN_NORMAL = 'normal' export const ALIGN_START = 'start' diff --git a/opentrons-ai-client/src/App.tsx b/opentrons-ai-client/src/App.tsx index f31fbd35940..410bf7fe222 100644 --- a/opentrons-ai-client/src/App.tsx +++ b/opentrons-ai-client/src/App.tsx @@ -1,5 +1,6 @@ import React from 'react' import { Flex, StyledText } from '@opentrons/components' + export function App(): JSX.Element { return ( diff --git a/opentrons-ai-client/src/assets/images/opentrons_logo.svg b/opentrons-ai-client/src/assets/images/opentrons_logo.svg new file mode 100644 index 00000000000..b183d161e81 --- /dev/null +++ b/opentrons-ai-client/src/assets/images/opentrons_logo.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json index c8ac35504bb..f14be729359 100644 --- a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json +++ b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json @@ -7,15 +7,15 @@ "modules": "Modules: Thermocycler or Temperature Module.", "opentronsai_asks_you": "OpentronsAI asks you to provide it!", "ot2_pipettes": "OT-2 pipettes: Include volume, number of channels, and generation.", - "prc_flex": "PRC (Flex)", + "prc_flex": "PCR (Flex)", "prc": "PCR", "reagent_transfer_flex": "Reagent Transfer (Flex)", "reagent_transfer": "Reagent Transfer", "robot": "Robot: OT-2.", "sidebar_body": "Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.", "sidebar_header": "Use natural language to generate protocols with OpentronsAI powered by OpenAI", - "stuck": "Stuck? Try these example prompts to get started.", "tipracks_and_labware": "Tip racks and labware: Use names from the Opentrons Labware Library.", + "try_example_prompts": "Stuck? Try these example prompts to get started.", "type_your_prompt": "Type your prompt...", "well_allocations": "Well allocations: Describe where liquids should go in labware.", "what_if_you": "What if you don’t provide all of those pieces of information?", diff --git a/opentrons-ai-client/src/main.tsx b/opentrons-ai-client/src/main.tsx index 466bd35e081..bf46623695e 100644 --- a/opentrons-ai-client/src/main.tsx +++ b/opentrons-ai-client/src/main.tsx @@ -1,12 +1,17 @@ import React from 'react' import ReactDOM from 'react-dom/client' +import { I18nextProvider } from 'react-i18next' + +import { i18n } from './i18n' import { App } from './App' const rootElement = document.getElementById('root') -if (rootElement) { +if (rootElement != null) { ReactDOM.createRoot(rootElement).render( - + + + ) } else { diff --git a/opentrons-ai-client/src/molecules/Sidebar/SideBar.stories.tsx b/opentrons-ai-client/src/molecules/Sidebar/SideBar.stories.tsx new file mode 100644 index 00000000000..529c37054d0 --- /dev/null +++ b/opentrons-ai-client/src/molecules/Sidebar/SideBar.stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' +import { I18nextProvider } from 'react-i18next' +import { i18n } from '../../i18n' +import { SideBar as SideBarComponent } from './index' + +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + title: 'AI/molecules/SideBar', + component: SideBarComponent, + decorators: [ + Story => ( + + + + ), + ], +} +export default meta +type Story = StoryObj +export const SideBar: Story = {} diff --git a/opentrons-ai-client/src/molecules/Sidebar/__tests__/SideBar.test.tsx b/opentrons-ai-client/src/molecules/Sidebar/__tests__/SideBar.test.tsx new file mode 100644 index 00000000000..a39c3572286 --- /dev/null +++ b/opentrons-ai-client/src/molecules/Sidebar/__tests__/SideBar.test.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import { screen } from '@testing-library/react' +import { describe, it, expect } from 'vitest' + +import { renderWithProviders } from '../../../__testing-utils__' +import { i18n } from '../../../i18n' + +import { SideBar } from '../index' + +const LOGO_FILE_NAME = + '/opentrons-ai-client/src/assets/images/opentrons_logo.svg' + +const render = (): ReturnType => { + return renderWithProviders(, { + i18nInstance: i18n, + }) +} + +describe('SideBar', () => { + it('should render logo and text', () => { + render() + const image = screen.getByRole('img') + expect(image.getAttribute('src')).toEqual(LOGO_FILE_NAME) + screen.getByText( + 'Use natural language to generate protocols with OpentronsAI powered by OpenAI' + ) + screen.getByText( + 'Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.' + ) + screen.getByText('Stuck? Try these example prompts to get started.') + }) + + it('should render buttons', () => { + render() + screen.getByRole('button', { name: 'PCR' }) + screen.getByRole('button', { name: 'PCR (Flex)' }) + screen.getByRole('button', { name: 'Reagent Transfer' }) + screen.getByRole('button', { name: 'Reagent Transfer (Flex)' }) + }) + it.todo('should call a mock function when clicking a button') +}) diff --git a/opentrons-ai-client/src/molecules/Sidebar/index.tsx b/opentrons-ai-client/src/molecules/Sidebar/index.tsx new file mode 100644 index 00000000000..760245e9b46 --- /dev/null +++ b/opentrons-ai-client/src/molecules/Sidebar/index.tsx @@ -0,0 +1,80 @@ +import React from 'react' +import styled, { css } from 'styled-components' +import { useTranslation } from 'react-i18next' +import { + COLORS, + DIRECTION_COLUMN, + Flex, + PrimaryButton, + SPACING, + StyledText, + TYPOGRAPHY, + WRAP, +} from '@opentrons/components' +import LOGO_PATH from '../../assets/images/opentrons_logo.svg' + +const IMAGE_ALT = 'Opentrons logo' + +export function SideBar(): JSX.Element { + const { t } = useTranslation('protocol_generator') + return ( + + {/* logo */} + + {IMAGE_ALT} + + + {/* body text */} + + {t('sidebar_header')} + {t('sidebar_body')} + + + {/* buttons */} + + + {t('try_example_prompts')} + + + + {/* ToDo(kk:04/11/2024) add a button component */} + {t('reagent_transfer')} + {t('reagent_transfer_flex')} + {t('prc')} + {t('prc_flex')} + + + + ) +} + +const HEADER_TEXT_STYLE = css` + font-size: ${TYPOGRAPHY.fontSize32}; + line-height: ${TYPOGRAPHY.lineHeight42}; + font-weight: ${TYPOGRAPHY.fontWeightBold}; + color: ${COLORS.white}; +` +const BODY_TEXT_STYLE = css` + font-size: ${TYPOGRAPHY.fontSize20}; + line-height: ${TYPOGRAPHY.lineHeight24}; + font-weight: ${TYPOGRAPHY.fontWeightRegular}; + color: ${COLORS.white}; +` +const BUTTON_GUIDE_TEXT_STYLE = css` + font-size: ${TYPOGRAPHY.fontSize20}; + line-height: ${TYPOGRAPHY.lineHeight24}; + font-weight: ${TYPOGRAPHY.fontWeightSemiBold}; + color: ${COLORS.white}; +` + +const PromptButton = styled(PrimaryButton)` + border-radius: 2rem; + white-space: nowrap; +` diff --git a/opentrons-ai-client/src/molecules/index.ts b/opentrons-ai-client/src/molecules/index.ts new file mode 100644 index 00000000000..9130e6335e4 --- /dev/null +++ b/opentrons-ai-client/src/molecules/index.ts @@ -0,0 +1 @@ +export * from './Sidebar' From 661d1e2078de4ca89a4d272ee342de0a8c92333d Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 12 Apr 2024 04:21:55 -0400 Subject: [PATCH 2/6] rename component name --- .../src/assets/localization/en/protocol_generator.json | 4 ++-- .../SidePanel.stories.tsx} | 10 +++++----- .../__tests__/SideSidePanel.test.tsx} | 6 +++--- .../src/molecules/{Sidebar => SidePanel}/index.tsx | 8 +++++--- 4 files changed, 15 insertions(+), 13 deletions(-) rename opentrons-ai-client/src/molecules/{Sidebar/SideBar.stories.tsx => SidePanel/SidePanel.stories.tsx} (60%) rename opentrons-ai-client/src/molecules/{Sidebar/__tests__/SideBar.test.tsx => SidePanel/__tests__/SideSidePanel.test.tsx} (92%) rename opentrons-ai-client/src/molecules/{Sidebar => SidePanel}/index.tsx (90%) diff --git a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json index f14be729359..412dfffb9c3 100644 --- a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json +++ b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json @@ -12,8 +12,8 @@ "reagent_transfer_flex": "Reagent Transfer (Flex)", "reagent_transfer": "Reagent Transfer", "robot": "Robot: OT-2.", - "sidebar_body": "Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.", - "sidebar_header": "Use natural language to generate protocols with OpentronsAI powered by OpenAI", + "side_panel_body": "Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.", + "side_panel_header": "Use natural language to generate protocols with OpentronsAI powered by OpenAI", "tipracks_and_labware": "Tip racks and labware: Use names from the Opentrons Labware Library.", "try_example_prompts": "Stuck? Try these example prompts to get started.", "type_your_prompt": "Type your prompt...", diff --git a/opentrons-ai-client/src/molecules/Sidebar/SideBar.stories.tsx b/opentrons-ai-client/src/molecules/SidePanel/SidePanel.stories.tsx similarity index 60% rename from opentrons-ai-client/src/molecules/Sidebar/SideBar.stories.tsx rename to opentrons-ai-client/src/molecules/SidePanel/SidePanel.stories.tsx index 529c37054d0..4ccd15539fb 100644 --- a/opentrons-ai-client/src/molecules/Sidebar/SideBar.stories.tsx +++ b/opentrons-ai-client/src/molecules/SidePanel/SidePanel.stories.tsx @@ -1,13 +1,13 @@ import React from 'react' import { I18nextProvider } from 'react-i18next' import { i18n } from '../../i18n' -import { SideBar as SideBarComponent } from './index' +import { SidePanel as SidePanelComponent } from './index' import type { Meta, StoryObj } from '@storybook/react' -const meta: Meta = { +const meta: Meta = { title: 'AI/molecules/SideBar', - component: SideBarComponent, + component: SidePanelComponent, decorators: [ Story => ( @@ -17,5 +17,5 @@ const meta: Meta = { ], } export default meta -type Story = StoryObj -export const SideBar: Story = {} +type Story = StoryObj +export const SidePanel: Story = {} diff --git a/opentrons-ai-client/src/molecules/Sidebar/__tests__/SideBar.test.tsx b/opentrons-ai-client/src/molecules/SidePanel/__tests__/SideSidePanel.test.tsx similarity index 92% rename from opentrons-ai-client/src/molecules/Sidebar/__tests__/SideBar.test.tsx rename to opentrons-ai-client/src/molecules/SidePanel/__tests__/SideSidePanel.test.tsx index a39c3572286..66fa063694e 100644 --- a/opentrons-ai-client/src/molecules/Sidebar/__tests__/SideBar.test.tsx +++ b/opentrons-ai-client/src/molecules/SidePanel/__tests__/SideSidePanel.test.tsx @@ -5,18 +5,18 @@ import { describe, it, expect } from 'vitest' import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' -import { SideBar } from '../index' +import { SidePanel } from '../index' const LOGO_FILE_NAME = '/opentrons-ai-client/src/assets/images/opentrons_logo.svg' const render = (): ReturnType => { - return renderWithProviders(, { + return renderWithProviders(, { i18nInstance: i18n, }) } -describe('SideBar', () => { +describe('SidePanel', () => { it('should render logo and text', () => { render() const image = screen.getByRole('img') diff --git a/opentrons-ai-client/src/molecules/Sidebar/index.tsx b/opentrons-ai-client/src/molecules/SidePanel/index.tsx similarity index 90% rename from opentrons-ai-client/src/molecules/Sidebar/index.tsx rename to opentrons-ai-client/src/molecules/SidePanel/index.tsx index 760245e9b46..b392c043af6 100644 --- a/opentrons-ai-client/src/molecules/Sidebar/index.tsx +++ b/opentrons-ai-client/src/molecules/SidePanel/index.tsx @@ -15,7 +15,7 @@ import LOGO_PATH from '../../assets/images/opentrons_logo.svg' const IMAGE_ALT = 'Opentrons logo' -export function SideBar(): JSX.Element { +export function SidePanel(): JSX.Element { const { t } = useTranslation('protocol_generator') return ( - {t('sidebar_header')} - {t('sidebar_body')} + + {t('side_panel_header')} + + {t('side_panel_body')} {/* buttons */} From cac565e51789774b3cb6a205d4dfa209020ce84f Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 12 Apr 2024 04:36:45 -0400 Subject: [PATCH 3/6] add feedback form link --- .../localization/en/protocol_generator.json | 2 ++ .../molecules/SidePanel/SidePanel.stories.tsx | 2 +- ...eSidePanel.test.tsx => SidePanel.test.tsx} | 0 .../src/molecules/SidePanel/index.tsx | 23 ++++++++++++++++++- opentrons-ai-client/src/molecules/index.ts | 2 +- 5 files changed, 26 insertions(+), 3 deletions(-) rename opentrons-ai-client/src/molecules/SidePanel/__tests__/{SideSidePanel.test.tsx => SidePanel.test.tsx} (100%) diff --git a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json index 412dfffb9c3..f19455ad47e 100644 --- a/opentrons-ai-client/src/assets/localization/en/protocol_generator.json +++ b/opentrons-ai-client/src/assets/localization/en/protocol_generator.json @@ -2,6 +2,7 @@ "api": "API: An API level is 2.15", "application": "Application: Your protocol's name, describing what it does.", "commands": "Commands: List the protocol's steps, specifying quantities in microliters and giving exact source and destination locations.", + "got_feedback": "Got feedback? We love to hear it.", "make_sure_your_prompt": "Make sure your prompt includes the following:", "metadata": "Metadata: Three pieces of information.", "modules": "Modules: Thermocycler or Temperature Module.", @@ -12,6 +13,7 @@ "reagent_transfer_flex": "Reagent Transfer (Flex)", "reagent_transfer": "Reagent Transfer", "robot": "Robot: OT-2.", + "share_your_thoughts": "Share your thoughts here", "side_panel_body": "Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.", "side_panel_header": "Use natural language to generate protocols with OpentronsAI powered by OpenAI", "tipracks_and_labware": "Tip racks and labware: Use names from the Opentrons Labware Library.", diff --git a/opentrons-ai-client/src/molecules/SidePanel/SidePanel.stories.tsx b/opentrons-ai-client/src/molecules/SidePanel/SidePanel.stories.tsx index 4ccd15539fb..1c1d30b7548 100644 --- a/opentrons-ai-client/src/molecules/SidePanel/SidePanel.stories.tsx +++ b/opentrons-ai-client/src/molecules/SidePanel/SidePanel.stories.tsx @@ -6,7 +6,7 @@ import { SidePanel as SidePanelComponent } from './index' import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { - title: 'AI/molecules/SideBar', + title: 'AI/molecules/SidePanel', component: SidePanelComponent, decorators: [ Story => ( diff --git a/opentrons-ai-client/src/molecules/SidePanel/__tests__/SideSidePanel.test.tsx b/opentrons-ai-client/src/molecules/SidePanel/__tests__/SidePanel.test.tsx similarity index 100% rename from opentrons-ai-client/src/molecules/SidePanel/__tests__/SideSidePanel.test.tsx rename to opentrons-ai-client/src/molecules/SidePanel/__tests__/SidePanel.test.tsx diff --git a/opentrons-ai-client/src/molecules/SidePanel/index.tsx b/opentrons-ai-client/src/molecules/SidePanel/index.tsx index b392c043af6..ff87a3429e5 100644 --- a/opentrons-ai-client/src/molecules/SidePanel/index.tsx +++ b/opentrons-ai-client/src/molecules/SidePanel/index.tsx @@ -5,6 +5,7 @@ import { COLORS, DIRECTION_COLUMN, Flex, + Link, PrimaryButton, SPACING, StyledText, @@ -14,7 +15,7 @@ import { import LOGO_PATH from '../../assets/images/opentrons_logo.svg' const IMAGE_ALT = 'Opentrons logo' - +const FEEDBACK_FORM_LINK = '' export function SidePanel(): JSX.Element { const { t } = useTranslation('protocol_generator') return ( @@ -53,6 +54,18 @@ export function SidePanel(): JSX.Element { {t('prc_flex')} + + + {t('got_feedback')} + + + {t('share_your_thoughts')} + + ) } @@ -80,3 +93,11 @@ const PromptButton = styled(PrimaryButton)` border-radius: 2rem; white-space: nowrap; ` + +const FeedbackLink = styled(Link)` + font-size: ${TYPOGRAPHY.fontSize20}; + line-height: ${TYPOGRAPHY.lineHeight24}; + font-weight: ${TYPOGRAPHY.fontWeightBold}; + color: ${COLORS.white}; + text-decoration: ${TYPOGRAPHY.textDecorationUnderline}; +` diff --git a/opentrons-ai-client/src/molecules/index.ts b/opentrons-ai-client/src/molecules/index.ts index 9130e6335e4..80fcd68f91a 100644 --- a/opentrons-ai-client/src/molecules/index.ts +++ b/opentrons-ai-client/src/molecules/index.ts @@ -1 +1 @@ -export * from './Sidebar' +export * from './SidePanel' From 7cbda0fa54b7aeeb8bdb2364c6e3872eda7405c0 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 12 Apr 2024 09:34:47 -0400 Subject: [PATCH 4/6] Update README.md --- opentrons-ai-client/README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/opentrons-ai-client/README.md b/opentrons-ai-client/README.md index c2ff2908418..d4c80c2bb23 100644 --- a/opentrons-ai-client/README.md +++ b/opentrons-ai-client/README.md @@ -2,8 +2,6 @@ [![JavaScript Style Guide][style-guide-badge]][style-guide] -[Download][] | [Support][] - ## Overview The Opentrons AI application helps you to create a protocol with natural language. @@ -31,7 +29,7 @@ The UI stack is built using: Some important directories: -- `opentrons-ai-server` — Opentrons AI application's server +- [opentrons-ai-server][] — Opentrons AI application's server ## Copy management @@ -62,3 +60,4 @@ TBD [babel]: https://babeljs.io/ [vite]: https://vitejs.dev/ [bundle-analyzer]: https://github.com/webpack-contrib/webpack-bundle-analyzer +[opentrons-ai-server]: https://github.com/Opentrons/opentrons/tree/edge/opentrons-ai-server From 58c1d81b75428d32ff575de852ce8d6d92338384 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 12 Apr 2024 10:22:19 -0400 Subject: [PATCH 5/6] add feedback form link --- .../src/molecules/SidePanel/__tests__/SidePanel.test.tsx | 7 +++++++ opentrons-ai-client/src/molecules/SidePanel/index.tsx | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/opentrons-ai-client/src/molecules/SidePanel/__tests__/SidePanel.test.tsx b/opentrons-ai-client/src/molecules/SidePanel/__tests__/SidePanel.test.tsx index 66fa063694e..56cb50f73fc 100644 --- a/opentrons-ai-client/src/molecules/SidePanel/__tests__/SidePanel.test.tsx +++ b/opentrons-ai-client/src/molecules/SidePanel/__tests__/SidePanel.test.tsx @@ -10,6 +10,8 @@ import { SidePanel } from '../index' const LOGO_FILE_NAME = '/opentrons-ai-client/src/assets/images/opentrons_logo.svg' +const FEEDBACK_FORM_LINK = 'https://opentrons-ai-beta.paperform.co/' + const render = (): ReturnType => { return renderWithProviders(, { i18nInstance: i18n, @@ -28,6 +30,11 @@ describe('SidePanel', () => { 'Write a prompt in natural language to generate a Reagent Transfer or a PCR protocol for the OT-2 or Opentrons Flex using the Opentrons Python Protocol API.' ) screen.getByText('Stuck? Try these example prompts to get started.') + screen.getByText('Got feedback? We love to hear it.') + const link = screen.getByRole('link', { + name: 'Share your thoughts here', + }) + expect(link).toHaveAttribute('href', FEEDBACK_FORM_LINK) }) it('should render buttons', () => { diff --git a/opentrons-ai-client/src/molecules/SidePanel/index.tsx b/opentrons-ai-client/src/molecules/SidePanel/index.tsx index ff87a3429e5..536c0709a8b 100644 --- a/opentrons-ai-client/src/molecules/SidePanel/index.tsx +++ b/opentrons-ai-client/src/molecules/SidePanel/index.tsx @@ -15,7 +15,7 @@ import { import LOGO_PATH from '../../assets/images/opentrons_logo.svg' const IMAGE_ALT = 'Opentrons logo' -const FEEDBACK_FORM_LINK = '' +const FEEDBACK_FORM_LINK = 'https://opentrons-ai-beta.paperform.co/' export function SidePanel(): JSX.Element { const { t } = useTranslation('protocol_generator') return ( From df16e18514f3001b88972da7d9bf15bb014ab2a8 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 12 Apr 2024 10:23:17 -0400 Subject: [PATCH 6/6] Update App.tsx --- opentrons-ai-client/src/App.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/opentrons-ai-client/src/App.tsx b/opentrons-ai-client/src/App.tsx index 410bf7fe222..f31fbd35940 100644 --- a/opentrons-ai-client/src/App.tsx +++ b/opentrons-ai-client/src/App.tsx @@ -1,6 +1,5 @@ import React from 'react' import { Flex, StyledText } from '@opentrons/components' - export function App(): JSX.Element { return (