feat(web): translation management variants preview #5202
Conversation
| cy.intercept('GET', '**/v1/environments').as('environments'); | ||
| cy.intercept('GET', '**/v1/organizations').as('organizations'); | ||
| cy.intercept('GET', '**/v1/environments/me').as('environments-me'); | ||
| cy.intercept('GET', '**/v1/notification-groups').as('notification-groups'); | ||
| cy.intercept('GET', '**/v1/changes/count').as('changes-count'); | ||
| cy.intercept('GET', '**/v1/integrations/active').as('active-integrations'); | ||
| cy.intercept('GET', '**/v1/users/me').as('me'); |
There was a problem hiding this comment.
it was failing to start the tests this way locally for me
| @@ -314,7 +314,7 @@ describe('Workflow Editor - Variants', function () { | |||
| fillEditorContent(channel, true); | |||
| goBack(); | |||
|
|
|||
| cy.getByTestId('editor-sidebar-add-variant').should('be.visible').click(); | |||
| cy.getByTestId('variant-sidebar-add-variant').should('be.visible').click(); | |||
There was a problem hiding this comment.
extracted a separate sidebar for variants preview, and gave a different test ids
| @@ -162,7 +162,7 @@ function App() { | |||
| <Route path="providers" element={<ProvidersPage />} /> | |||
| <Route path=":channel/:stepUuid" element={<ChannelStepEditor />} /> | |||
| <Route path=":channel/:stepUuid/preview" element={<ChannelPreview />} /> | |||
| <Route path=":channel/:stepUuid/variants" element={<VariantsPage />} /> | |||
| <Route path=":channel/:stepUuid/variants/:variantUuid/preview" element={<VariantsPage />} /> | |||
There was a problem hiding this comment.
the new preview variants route
|
|
||
| type ResultType = { content: string }; | ||
|
|
||
| export const usePreviewChat = (options: UseMutationOptions<ResultType, IResponseError, PayloadType> = {}) => { |
There was a problem hiding this comment.
refactored a little the preview chat and extracted this to a separate hook
| const PreviewContainer = styled.div` | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| height: 100%; | ||
| margin: 0; | ||
| margin-bottom: 1.5rem; | ||
| gap: 1.5rem; | ||
| `; | ||
|
|
||
| const JSONContainer = styled.div` | ||
| min-width: 28rem; | ||
| height: 100%; | ||
| background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B17 : colors.B98)}; | ||
| border-radius: 7; | ||
| `; |
There was a problem hiding this comment.
I also did a little refactoring here. Use custom styled components instead of the Mantine grid components as it had many unnecessary styles that were breaking the layout.
| onErrorDown: () => void; | ||
| } | ||
|
|
||
| export const VariantsListErrors: React.FC<IVariantsListErrorsProps> = ({ |
There was a problem hiding this comment.
this is the code that was there before but extracted into a separate component
|
|
||
| const variantsCreatePath = '/variants/create'; | ||
|
|
||
| export const VariantsListSidebarActions = () => { |
There was a problem hiding this comment.
these are the actions shown in the variants preview header, extracted from the existing code
| useEffect(() => { | ||
| if (allErrors.errors.length > 0) { | ||
| const errorIndex = 0; | ||
| const firstError = allErrors.errors[errorIndex]; | ||
| setErrorState({ | ||
| ...firstError, | ||
| errorIndex, | ||
| }); | ||
| } else { | ||
| setErrorState(null); | ||
| } | ||
| }, [allErrors]); |
There was a problem hiding this comment.
the first variant error from all errors is set
| const handleErrorNavigation = (direction: 'up' | 'down') => { | ||
| if (!errorState || !hasErrors) { | ||
| return; | ||
| } | ||
|
|
||
| const { errorIndex } = errorState; | ||
| const nextErrorIndex = direction === 'up' ? errorIndex - 1 : errorIndex + 1; | ||
|
|
||
| if (nextErrorIndex < 0 || nextErrorIndex >= allErrors.errors.length) { | ||
| return; | ||
| } | ||
|
|
||
| const error = allErrors.errors[nextErrorIndex]; | ||
|
|
||
| setErrorState({ | ||
| variantIndex: error.variantIndex, | ||
| errorMessage: error.errorMessage, | ||
| itemType: error.itemType, | ||
| errorIndex: nextErrorIndex, | ||
| errorType: error.errorType, | ||
| }); | ||
|
|
||
| const isRootError = error?.itemType === ItemTypeEnum.ROOT; | ||
| if (isRootError) { | ||
| navigateToVariantPreview({ variantUuid: stepUuid }); | ||
| } else if (typeof error.variantIndex !== 'undefined') { | ||
| const variant = variants[error.variantIndex]; | ||
| navigateToVariantPreview({ variantUuid: variant.uuid }); | ||
| } | ||
| }; |
There was a problem hiding this comment.
navigation logic through the errors
| const isNotStepEditorPath = pathname !== stepEditorPath; | ||
| const isStepWithNoVariant = isStepExists && !isVariantExists; | ||
| if (isStepWithNoVariant && isNotStepEditorPath) { |
There was a problem hiding this comment.
fixed the issue with double navigation, when clicking on the workflow node card
| if (!locale) return; | ||
|
|
||
| getChatPreview({ | ||
| content: templateContent, | ||
| payload: processedVariables, | ||
| locale, | ||
| }); |
There was a problem hiding this comment.
Missing the disabled prop and to parse the payload. Otherwise the variables in the editor will not show a value in the preview
…v-2993-reusable-in-app-preview-component
…-buttons-preview-for-in-app feat: implement cta and avatar
…-use-default-locale-of-the-organization-as-fallback
…e-organization-as-fallback feat: add fallback lng
…component Nv 2993 reusable in app preview component
…o nv-3416-variants-preview # Conflicts: # .source
…o nv-3416-variants-preview
ainouzgali
merged commit 91ee23b
into
translation-management-beta
What change does this PR introduce?
Implemented the new Variants Preview component.
All the design changes were approved by Nikolay and the difference is:
Why was this change needed?
Other information (Screenshots)
Screen.Recording.2024-02-16.at.15.12.19.mov
Screen.Recording.2024-02-16.at.15.10.39.mov
Screen.Recording.2024-02-16.at.15.10.02.mov
Screen.Recording.2024-02-16.at.15.09.29.mov