feat: Upgrade tolgee integrations

tolgee · Mar 24, 2022 · d1640fb · d1640fb
1 parent 2c71070
commit d1640fb
Show file tree

Hide file tree

Showing 19 changed files with 68 additions and 111 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches: [ main, release ]
   pull_request:
+
 jobs:
   backend-build:
     name: Build backend 🏗️
@@ -351,16 +352,3 @@ jobs:
 
       - name: Run ktlint
         run: ./gradlew ktlint
-
-  cleanup:
-    if: always()
-    needs: [ e2e, backend-test ]
-    name: Delete artifacts 🧹
-    runs-on: ubuntu-latest
-    steps:
-      - uses: geekyeggo/delete-artifact@v1
-        with:
-          name: |
-            e2e_deps
-            webapp
-            backend
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -12,9 +12,9 @@
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@openreplay/tracker": "3.4.17",
     "@sentry/browser": "^6.10.0",
-    "@tolgee/react": "^3.3.0",
-    "@tolgee/socketio-client": "^3.0.0",
-    "@tolgee/ui": "^3.3.0",
+    "@tolgee/react": "^4.2.1",
+    "@tolgee/socketio-client": "^4.0.0",
+    "@tolgee/ui": "^4.2.1",
     "clsx": "^1.1.1",
     "codemirror": "^5.62.0",
     "formik": "^2.2.9",

diff --git a/webapp/src/component/common/buttons/FabAddButtonLink.tsx b/webapp/src/component/common/buttons/FabAddButtonLink.tsx
@@ -12,7 +12,7 @@ export function FabAddButtonLink(props: { to: string }) {
       <Fab
         color="primary"
         data-cy="global-plus-button"
-        aria-label={t('button_add_aria_label', undefined, true)}
+        aria-label={t('button_add_aria_label')}
         component={Link}
         {...props}
       >

diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx
@@ -246,8 +246,6 @@ ReactDOM.render(
         fr: () => import('./i18n/fr.json'),
       }}
       loadingFallback={<FullPageLoading />}
-      availableLanguages={['en', 'cs', 'es', 'fr']}
-      wrapperMode="invisible"
     >
       <ThemeProvider theme={theme}>
         <CssBaseline />

diff --git a/webapp/src/views/projects/DashboardProjectListItem.tsx b/webapp/src/views/projects/DashboardProjectListItem.tsx
@@ -198,9 +198,7 @@ const DashboardProjectListItem = (
       </div>
       <div className={classes.controls}>
         <Box width="100%" display="flex" justifyContent="flex-end">
-          <Tooltip
-            title={t('project_list_translations_button', undefined, true)}
-          >
+          <Tooltip title={t('project_list_translations_button')}>
             <IconButton
               onClick={stopBubble()}
               aria-label={t('project_list_translations_button')}

diff --git a/webapp/src/views/projects/ProjectListItemMenu.tsx b/webapp/src/views/projects/ProjectListItemMenu.tsx
@@ -34,7 +34,7 @@ export const ProjectListItemMenu: FC<{
 
   return (
     <>
-      <Tooltip title={t('project_list_more_button', undefined, true)}>
+      <Tooltip title={t('project_list_more_button')}>
         <IconButton
           onClick={(e) => {
             e.stopPropagation();

diff --git a/webapp/src/views/projects/ProjectListView.tsx b/webapp/src/views/projects/ProjectListView.tsx
@@ -46,7 +46,7 @@ export const ProjectListView = () => {
     <DashboardPage>
       <BaseView
         title={<T>projects_title</T>}
-        windowTitle={t('projects_title', undefined, true)}
+        windowTitle={t('projects_title')}
         onSearch={setSearch}
         containerMaxWidth="lg"
         addLinkTo={LINKS.PROJECT_ADD.build()}

diff --git a/webapp/src/views/projects/integrate/IntegrateView.tsx b/webapp/src/views/projects/integrate/IntegrateView.tsx
@@ -30,7 +30,7 @@ export const IntegrateView: FunctionComponent = () => {
 
   return (
     <BaseView
-      windowTitle={t('project_integrate_title', undefined, true)}
+      windowTitle={t('project_integrate_title')}
       navigation={[
         [
           project.name,

diff --git a/webapp/src/views/projects/languages/AutoTranslations/AutoTranslations.tsx b/webapp/src/views/projects/languages/AutoTranslations/AutoTranslations.tsx
@@ -83,22 +83,21 @@ export const AutoTranslations: React.FC<Props> = ({ mtEnabled }) => {
               <FormControlLabel
                 name="usingTranslationMemory"
                 data-cy="languages-auto-translation-memory"
-                label={t({
-                  key: 'project_languages_new_keys_translation_memory_switch',
-                  defaultValue: 'Enable translation memory',
-                })}
+                label={t(
+                  'project_languages_new_keys_translation_memory_switch',
+                  'Enable translation memory'
+                )}
                 checked={form.values.usingTranslationMemory}
                 onChange={form.handleChange}
                 control={<Checkbox />}
               />
               <FormControlLabel
                 name="usingMachineTranslation"
                 data-cy="languages-auto-machine-translation"
-                label={t({
-                  key: 'project_languages_new_keys_machine_translations_switch',
-                  defaultValue:
-                    'Enable machine translation with primary provider',
-                })}
+                label={t(
+                  'project_languages_new_keys_machine_translations_switch',
+                  'Enable machine translation with primary provider'
+                )}
                 checked={form.values.usingMachineTranslation}
                 onChange={form.handleChange}
                 control={<Checkbox />}

diff --git a/webapp/src/views/projects/languages/MachineTranslation/LanguageRow.tsx b/webapp/src/views/projects/languages/MachineTranslation/LanguageRow.tsx
@@ -43,15 +43,9 @@ export const LanguageRow: React.FC<Props> = ({ lang, providers, disabled }) => {
   const getProviderName = (provider) => {
     switch (provider) {
       case 'default':
-        return t({
-          key: 'project_languages_default_provider_short',
-          defaultValue: 'Default',
-        });
+        return t('project_languages_default_provider_short', 'Default');
       case 'none':
-        return t({
-          key: 'project_languages_primary_none',
-          defaultValue: 'None',
-        });
+        return t('project_languages_primary_none', 'None');
       case 'GOOGLE':
         return 'Google';
       default:
@@ -67,10 +61,7 @@ export const LanguageRow: React.FC<Props> = ({ lang, providers, disabled }) => {
         {lang ? (
           <LanguageItem language={lang} />
         ) : (
-          t({
-            key: 'project_languages_default_providers',
-            defaultValue: 'Default providers',
-          })
+          t('project_languages_default_providers', 'Default providers')
         )}
       </div>
       {providers.map((provider) => (

diff --git a/webapp/src/views/projects/languages/MachineTranslation/SettingsForm.tsx b/webapp/src/views/projects/languages/MachineTranslation/SettingsForm.tsx
@@ -44,12 +44,7 @@ export const SettingsForm = ({ providers, expanded, languages }: Props) => {
       <div className={clsx(tableClasses.topRow, tableClasses.centered)}>
         <Tooltip title={t('project_languages_primary_provider_hint')}>
           <div className={classes.primaryProvider}>
-            <div>
-              {t({
-                key: 'project_languages_primary_provider',
-                defaultValue: 'Primary',
-              })}
-            </div>
+            <div>{t('project_languages_primary_provider', 'Primary')}</div>
             <Help className={classes.helpIcon} />
           </div>
         </Tooltip>

diff --git a/webapp/src/views/projects/languages/ProjectLanguagesView.tsx b/webapp/src/views/projects/languages/ProjectLanguagesView.tsx
@@ -28,7 +28,7 @@ export const ProjectLanguagesView = () => {
           }),
         ],
       ]}
-      windowTitle={t('languages_title', undefined, true)}
+      windowTitle={t('languages_title')}
     >
       <ProjectSettingsLanguages />
     </BaseView>

diff --git a/webapp/src/views/projects/translations/Filters/useAvailableFilters.tsx b/webapp/src/views/projects/translations/Filters/useAvailableFilters.tsx
@@ -40,7 +40,7 @@ export const useAvailableFilters = (
       type: 'tags',
       options: [
         {
-          label: t('translations_filters_heading_tags', undefined, true),
+          label: t('translations_filters_heading_tags'),
           value: null,
           submenu:
             tags.data?._embedded?.tags?.map((val) => {

diff --git a/webapp/src/views/projects/translations/TranslationTools/TranslationMemory.tsx b/webapp/src/views/projects/translations/TranslationTools/TranslationMemory.tsx
@@ -116,10 +116,7 @@ export const TranslationMemory: React.FC<Props> = ({ data, operationsRef }) => {
       ) : (
         <TabMessage
           type="placeholder"
-          message={t({
-            key: 'translation_tools_nothing_found',
-            defaultValue: 'Nothing found',
-          })}
+          message={t('translation_tools_nothing_found', 'Nothing found')}
         />
       )}
     </div>

diff --git a/webapp/src/views/projects/translations/TranslationTools/TranslationTools.tsx b/webapp/src/views/projects/translations/TranslationTools/TranslationTools.tsx
@@ -64,10 +64,10 @@ const TranslationTools = React.memo(function TranslationTools({
     <div className={classes.container}>
       <div className={classes.grid} style={{ width, gridTemplateColumns }}>
         <ToolsTab
-          title={t({
-            key: 'translation_tools_translation_memory',
-            defaultValue: 'Translation memory',
-          })}
+          title={t(
+            'translation_tools_translation_memory',
+            'Translation memory'
+          )}
           icon={<TranslationMemoryIcon fontSize="small" color="inherit" />}
           badgeNumber={
             data.memory?.data?._embedded?.translationMemoryItems?.length
@@ -82,10 +82,10 @@ const TranslationTools = React.memo(function TranslationTools({
 
         {mtEnabled && (
           <ToolsTab
-            title={t({
-              key: 'translation_tools_machine_translation',
-              defaultValue: 'Machine translation',
-            })}
+            title={t(
+              'translation_tools_machine_translation',
+              'Machine translation'
+            )}
             icon={<MachineTranslationIcon fontSize="small" color="inherit" />}
             badgeNumber={
               Object.keys(data.machine?.data?.machineTranslations || {}).length

diff --git a/webapp/src/views/projects/translations/TranslationsToolbar.tsx b/webapp/src/views/projects/translations/TranslationsToolbar.tsx
@@ -131,7 +131,7 @@ export const TranslationsToolbar: React.FC<Props> = ({ width }) => {
           <div className={classes.stretcher}>{counterContent}</div>
         </div>
         <div className={classes.divider} />
-        <Tooltip title={t('translations_toolbar_to_top', undefined, true)}>
+        <Tooltip title={t('translations_toolbar_to_top')}>
           <IconButton
             data-cy="translations-toolbar-to-top"
             onClick={handleScrollUp}

diff --git a/webapp/src/views/projects/translations/comments/Comment.tsx b/webapp/src/views/projects/translations/comments/Comment.tsx
@@ -170,12 +170,7 @@ export const Comment: React.FC<Props> = ({ data, onDelete, onChangeState }) => {
         )}
       </div>
       {data.state === 'NEEDS_RESOLUTION' && onChangeState && (
-        <Tooltip
-          title={t({
-            key: 'translations_comments_resolve',
-            defaultValue: 'Resolve',
-          })}
-        >
+        <Tooltip title={t('translations_comments_resolve', 'Resolve')}>
           <div className={clsx(classes.resolveButton, classes.hoverVisible)}>
             <SmallActionButton
               onClick={handleResolve}
@@ -199,10 +194,7 @@ export const Comment: React.FC<Props> = ({ data, onDelete, onChangeState }) => {
               onClick={handleUnresolved}
               data-cy="comment-menu-needs-resolution"
             >
-              {t({
-                key: 'translations_comments_needs_resolution',
-                defaultValue: 'Not resolved',
-              })}
+              {t('translations_comments_needs_resolution', 'Not resolved')}
             </MenuItem>
           )}
           {onDelete && (

diff --git a/webapp/src/views/projects/translations/context/services/useSelectionService.ts b/webapp/src/views/projects/translations/context/services/useSelectionService.ts
@@ -36,9 +36,8 @@ export const useSelectionService = ({ translations }: Props) => {
     return new Promise<void>((resolve, reject) =>
       confirmation({
         title: t('translations_delete_selected'),
-        message: t({
-          key: 'translations_key_delete_confirmation_text',
-          parameters: { count: String(selection.length) },
+        message: t('translations_key_delete_confirmation_text', {
+          count: String(selection.length),
         }),
         onConfirm() {
           deleteKeys.mutate(