feat: add form field list for translation #7778
Conversation
Datadog ReportBranch report: ✅ 0 Failed, 3074 Passed, 1 Skipped, 7m 30.41s Total Time |
* feat: add fields in model to represent translations for form fields * feat: add shared types to represent form field translations * fix: use unicode locales
* feat: add settings tab and toggle for multi lang feature * feat: add fields to joi validations * fix: refactor code to address comments * fix: failing tests * feat: add tooltip over icons * feat: add chromatic tests
siddarth2824
force-pushed
the
feat/add-form-field-list-for-translation
branch
from
0df2d1e
to
cbe1239
Compare
siddarth2824
force-pushed
the
feat/multi-lang-feature
branch
from
49cf0dd
to
169a45b
Compare
| @@ -165,7 +165,9 @@ export const AppRouter = (): JSX.Element => { | |||
| > | |||
| <Route index element={<CreatePage />} /> | |||
| <Route path={ADMINFORM_SETTINGS_SUBROUTE} element={<SettingsPage />}> | |||
| <Route path={':settingsTab'} element={<SettingsPage />} /> | |||
| <Route path={':settingsTab'} element={<SettingsPage />}> | |||
| <Route path={':language'} element={<SettingsPage />} /> | |||
There was a problem hiding this comment.
Possible to use frontend/src/features/admin-form/settings/SettingsPage.tsx::tabConfig to manage the deeplink for language? -- since language seemed to be a subpath of SettingsPage
| {!language ? <MultiLanguageSection /> : null} | ||
| {language ? <TranslationListSection language={language} /> : null} |
There was a problem hiding this comment.
| {!language ? <MultiLanguageSection /> : null} | |
| {language ? <TranslationListSection language={language} /> : null} | |
| {language ? <TranslationListSection language={language} /> : <MultiLanguageSection />} |
| const handleLanguageTranslationEditClick = useCallback( | ||
| (language: Language) => { | ||
| navigate( | ||
| `${ADMINFORM_ROUTE}/${formId}/settings/multi-language/${language.toString()}`, |
There was a problem hiding this comment.
-
Possible to move this to
frontend/src/features/public-form/utils/urls.tssince this might be a little complex and we might want to have some type-safety on thelanguagevariable. -
Looking at the
multi-languagepath again, I feel that we could use/languageinstead of/multi-languagesince we're manipulating the "language" settings.
| @@ -109,7 +122,9 @@ const LanguageTranslationRow = ({ | |||
| colorScheme="secondary" | |||
| aria-label={`Add ${unicodeLocale} translations`} | |||
| // TODO: Will add redirection to translation section in next PR | |||
There was a problem hiding this comment.
I suppose this comment can now be removed 😆
| // check if translation row is not disabled | ||
| if (!isTranslationRowDisabled) | ||
| navigate( | ||
| `${ADMINFORM_ROUTE}/${formId}/settings/multi-language/${language}`, |
There was a problem hiding this comment.
To share the url function with comments above.
Changes
Before & After Screenshots