refactor(batch-update): improve layout and localization

add margins to batch-update dialog, translate all text
Fekide · Jun 3, 2023 · 01b987e · 01b987e
1 parent 3184891
commit 01b987e
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 75 deletions.
diff --git a/plugin/admin/src/components/BatchUpdateTable/Table.js b/plugin/admin/src/components/BatchUpdateTable/Table.js
@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import { Table, Tbody, Thead, Th, Tr } from '@strapi/design-system/Table'
-import { Button, Flex, Typography } from '@strapi/design-system'
+import { Typography } from '@strapi/design-system'
 import PropTypes from 'prop-types'
 import { useIntl } from 'react-intl'
 import useCollection from '../../Hooks/useCollection'
@@ -9,83 +9,49 @@ import BatchUpdateRow from './BatchUpdateRows'
 
 const BatchUpdateTable = ({
   updates,
-  dismissUpdates,
-  refetch,
   selectedUpdateIDs,
   setSelectedUpdateIDs,
 }) => {
   const { formatMessage } = useIntl()
   const { locales } = useCollection()
 
-  const dismissSelected = () => {
-    dismissUpdates(selectedUpdateIDs).then(() => {
-      setSelectedUpdateIDs([])
-      refetch()
-    })
-  }
-
   return (
-    <>
-      <Table rowCount={updates.length + 1} colCount={locales.length + 2}>
-        <Thead>
-          <Tr>
-            <Th>
-              <Typography variant="sigma">IDs</Typography>
-            </Th>
+    <Table rowCount={updates.length + 1} colCount={locales.length + 2}>
+      <Thead>
+        <Tr>
+          <Th>
+            <Typography variant="sigma">IDs</Typography>
+          </Th>
 
-            <Th>
-              <Typography variant="sigma">
-                {formatMessage({
-                  id: getTrad(`batch-update.select`),
-                  defaultMessage: 'select',
-                })}
-              </Typography>
-            </Th>
+          <Th>
+            <Typography variant="sigma">
+              {formatMessage({
+                id: getTrad(`batch-update.select`),
+                defaultMessage: 'select',
+              })}
+            </Typography>
+          </Th>
 
-            {locales.map((locale) => (
-              <Th key={locale.code}>
-                <Typography variant="sigma">{locale.name}</Typography>
-              </Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {updates.map((entry, index) => (
-            <BatchUpdateRow
-              key={entry.id}
-              entry={entry}
-              selectedIDs={selectedUpdateIDs}
-              setSelectedIDs={setSelectedUpdateIDs}
-              locales={locales}
-              index={index}
-            />
+          {locales.map((locale) => (
+            <Th key={locale.code}>
+              <Typography variant="sigma">{locale.name}</Typography>
+            </Th>
           ))}
-        </Tbody>
-      </Table>
-      <Flex>
-        <Button
-          onClick={() =>
-            setSelectedUpdateIDs(updates.map((update) => update.id))
-          }
-          variant="secondary"
-        >
-          {formatMessage({
-            id: getTrad(`batch-update.select-all`),
-            defaultMessage: 'select all',
-          })}
-        </Button>
-        <Button
-          onClick={() => dismissSelected()}
-          variant="danger"
-          disabled={selectedUpdateIDs.length === 0}
-        >
-          {formatMessage({
-            id: getTrad(`batch-update.dismiss`),
-            defaultMessage: 'dismiss selected',
-          })}
-        </Button>
-      </Flex>
-    </>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {updates.map((entry, index) => (
+          <BatchUpdateRow
+            key={entry.id}
+            entry={entry}
+            selectedIDs={selectedUpdateIDs}
+            setSelectedIDs={setSelectedUpdateIDs}
+            locales={locales}
+            index={index}
+          />
+        ))}
+      </Tbody>
+    </Table>
   )
 }
 
@@ -100,8 +66,6 @@ BatchUpdateTable.propTypes = {
       }),
     })
   ),
-  dismissUpdates: PropTypes.func,
-  refetch: PropTypes.func,
   selectedUpdateIDs: PropTypes.array,
   setSelectedUpdateIDs: PropTypes.func,
 }

diff --git a/plugin/admin/src/components/Collection/CollectionRow.js b/plugin/admin/src/components/Collection/CollectionRow.js
@@ -161,7 +161,11 @@ const CollectionRow = ({ entry, locales, onAction, updateCount, index }) => {
               onClick={() => onAction('update')}
               data-cy={`${entry.contentType}.update`}
             >
-              {updateCount} translations may be out of date
+              {updateCount}{' '}
+              {formatMessage({
+                id: getTrad('batch-update.out-of-date'),
+                defaultMessage: 'translations may be out of date',
+              })}
             </Button>
           )}
         </Typography>

diff --git a/plugin/admin/src/components/Collection/CollectionTable.js b/plugin/admin/src/components/Collection/CollectionTable.js
@@ -291,7 +291,7 @@ const CollectionTable = () => {
                   </Stack>
                 )}
                 {action === 'update' && (
-                  <>
+                  <Stack spacing={2}>
                     <Select
                       label={formatMessage({
                         id: getTrad('batch-update.sourceLocale'),
@@ -313,12 +313,40 @@ const CollectionTable = () => {
                           update?.attributes?.contentType ===
                           collection.contentType
                       )}
-                      dismissUpdates={dismissUpdates}
-                      refetch={refetch}
                       selectedUpdateIDs={selectedUpdateIDs}
                       setSelectedUpdateIDs={setSelectedUpdateIDs}
                     />
-                  </>
+                    <Flex justifyContent="space-between">
+                      <Button
+                        onClick={() =>
+                          setSelectedUpdateIDs(
+                            updates.map((update) => update.id)
+                          )
+                        }
+                        variant="secondary"
+                      >
+                        {formatMessage({
+                          id: getTrad(`batch-update.select-all`),
+                          defaultMessage: 'select all',
+                        })}
+                      </Button>
+                      <Button
+                        onClick={() =>
+                          dismissUpdates(selectedUpdateIDs).then(() => {
+                            setSelectedUpdateIDs([])
+                            refetch()
+                          })
+                        }
+                        variant="danger"
+                        disabled={selectedUpdateIDs.length === 0}
+                      >
+                        {formatMessage({
+                          id: getTrad(`batch-update.dismiss`),
+                          defaultMessage: 'dismiss selected',
+                        })}
+                      </Button>
+                    </Flex>
+                  </Stack>
                 )}
               </Box>
             </Stack>

diff --git a/plugin/admin/src/translations/de.json b/plugin/admin/src/translations/de.json
@@ -29,6 +29,8 @@
   "batch-translate.dialog.cancel.submit-text": "Bestätigen",
   "batch-translate.dialog.pause.submit-text": "Pausieren",
   "batch-translate.dialog.resume.submit-text": "Fortsetzen",
+  "batch-translate.dialog.update.content": "Gruppen von Einträgen zur Neuübersetzung auswählen",
+  "batch-translate.dialog.update.submit-text": "ausgewählte Einträge neu übersetzen",
   "batch-translate.table.entries": "Einträge",
   "batch-translate.table.complete.true": "vollständig",
   "batch-translate.table.complete.false": "unvollständig",
@@ -47,6 +49,7 @@
   "batch-update.select": "auswählen",
   "batch-update.select-all": "alle auswählen",
   "batch-update.dismiss": "ausgewählte entfernen",
+  "batch-update.out-of-date": "Übersetzungen eventuell veraltet",
   "errors.unknown-error": "Unbekannter Fehler",
   "usage.title": "API Kontingent",
   "usage.failed-to-load": "Daten konnten nicht geladen werden",

diff --git a/plugin/admin/src/translations/en.json b/plugin/admin/src/translations/en.json
@@ -29,6 +29,8 @@
   "batch-translate.dialog.cancel.submit-text": "Confirm",
   "batch-translate.dialog.pause.submit-text": "Pause",
   "batch-translate.dialog.resume.submit-text": "Resume",
+  "batch-translate.dialog.update.content": "Select groups of entities to retranslate.",
+  "batch-translate.dialog.update.submit-text": "Update selected entities",
   "batch-translate.table.entries": "entries",
   "batch-translate.table.complete.true": "complete",
   "batch-translate.table.complete.false": "incomplete",
@@ -47,6 +49,7 @@
   "batch-update.select": "select",
   "batch-update.select-all": "select all",
   "batch-update.dismiss": "dismiss selected",
+  "batch-update.out-of-date": "translations may be outdated",
   "errors.unknown-error": "Unknown error",
   "usage.title": "API usage",
   "usage.failed-to-load": "failed to load usage data",

diff --git a/plugin/admin/src/translations/fr.json b/plugin/admin/src/translations/fr.json
@@ -29,6 +29,8 @@
   "batch-translate.dialog.cancel.submit-text": "Confirmer",
   "batch-translate.dialog.pause.submit-text": "Pause",
   "batch-translate.dialog.resume.submit-text": "Continue",
+  "batch-translate.dialog.update.content": "Sélectionner des groupes d'entités à retraduire",
+  "batch-translate.dialog.update.submit-text": "retraduire",
   "batch-translate.table.entries": "entités",
   "batch-translate.table.complete.true": "complet",
   "batch-translate.table.complete.false": "incomplet",
@@ -47,6 +49,7 @@
   "batch-update.select": "sélectionner",
   "batch-update.select-all": "tout sélectionner",
   "batch-update.dismiss": "rejeter sélectionné",
+  "batch-update.out-of-date": "les traductions peuvent être obsolètes",
   "errors.unknown-error": "Erreur inconnue",
   "usage.title": "Contingent de l'API",
   "usage.failed-to-load": "échec de la récupération des données",