-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(web): translation management variants preview #5202
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the new preview variants route
|
||
type ResultType = { content: string }; | ||
|
||
export const usePreviewChat = (options: UseMutationOptions<ResultType, IResponseError, PayloadType> = {}) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
navigation logic through the errors
const isNotStepEditorPath = pathname !== stepEditorPath; | ||
const isStepWithNoVariant = isStepExists && !isVariantExists; | ||
if (isStepWithNoVariant && isNotStepEditorPath) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
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