chore: pr feedback

strapi · May 10, 2024 · f4e57ad · f4e57ad
1 parent 1fc9670
commit f4e57ad
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 60 deletions.
diff --git a/packages/plugins/i18n/admin/src/components/BulkLocaleActionModal.tsx b/packages/plugins/i18n/admin/src/components/BulkLocaleActionModal.tsx
@@ -7,7 +7,6 @@ import { Modules } from '@strapi/types';
 import { stringify } from 'qs';
 import { type MessageDescriptor, useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
 
 import { Locale } from '../../../shared/contracts/locales';
 import { getTranslation } from '../utils/getTranslation';
@@ -21,10 +20,6 @@ type Status = Modules.Documents.Params.PublicationStatus.Kind | 'modified';
  * EntryValidationText
  * -----------------------------------------------------------------------------------------------*/
 
-const TypographyMaxWidth = styled(Typography)`
-  max-width: 300px;
-`;
-
 interface EntryValidationTextProps {
   status: Status;
   validationErrors?: Record<string, MessageDescriptor>;
@@ -59,10 +54,16 @@ const EntryValidationText = ({ status = 'draft', validationErrors }: EntryValida
     return (
       <Flex gap={2}>
         <CrossCircle fill="danger600" />
-        <Tooltip description={validationErrorsMessages}>
-          <TypographyMaxWidth textColor="danger600" variant="omega" fontWeight="semiBold" ellipsis>
+        <Tooltip label={validationErrorsMessages}>
+          <Typography
+            maxWidth={'30rem'}
+            textColor="danger600"
+            variant="omega"
+            fontWeight="semiBold"
+            ellipsis
+          >
             {validationErrorsMessages}
-          </TypographyMaxWidth>
+          </Typography>
         </Tooltip>
       </Flex>
     );
@@ -143,7 +144,7 @@ const BulkLocaleActionModal = ({
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
 
-  const selectedRows: LocaleStatus[] = useTable<LocaleStatus[]>(
+  const selectedRows = useTable<LocaleStatus[]>(
     'BulkLocaleActionModal',
     (state) => state.selectedRows
   );
@@ -253,9 +254,10 @@ const BulkLocaleActionModal = ({
                           name: locale,
                         }
                       )}
-                      icon={<Pencil />}
                       borderWidth={0}
-                    />
+                    >
+                      <Pencil />
+                    </IconButton>
                   </Table.Cell>
                 </Table.Row>
               );

diff --git a/packages/plugins/i18n/admin/src/components/CMHeaderActions.tsx b/packages/plugins/i18n/admin/src/components/CMHeaderActions.tsx
@@ -308,51 +308,56 @@ const BulkLocalePublishAction: DocumentActionComponent = ({
     },
   ];
 
+  // Extract the rows for the bulk locale publish modal and any validation
+  // errors per locale
   const [rows, validationErrors] = React.useMemo(() => {
     if (!document || !documentMeta?.availableLocales) {
+      // If we don't have a document or available locales, we return empty rows
+      // and no validation errors
       return [[], {}];
     }
 
+    // Build the rows for the bulk locale publish modal by combining the current
+    // document with all the available locales from the document meta
     const rowsFromMeta: LocaleStatus[] = documentMeta?.availableLocales.map((doc) => {
       const { locale, status } = doc;
 
       return { locale, status };
     });
     rowsFromMeta.unshift({
-      locale: document?.locale ?? '',
-      status: document?.status ?? 'draft',
+      locale: document.locale,
+      status: document.status,
     });
 
+    // Build the validation errors for each locale.
     const allDocuments = [document, ...(documentMeta?.availableLocales ?? [])];
-
-    const errors: Record<
-      Modules.Documents.Params.Locale.StringNotation,
-      Record<string, MessageDescriptor>
-    > = {};
-
-    allDocuments.map((document) => {
+    const errors = allDocuments.reduce<
+      Record<Modules.Documents.Params.Locale.StringNotation, Record<string, MessageDescriptor>>
+    >((errs, document) => {
       if (!document) {
-        return document;
+        return errs;
       }
 
+      // Validate each locale entry via the useDocument validate function and store any errors in a dictionary
       const validation = validate(document as Modules.Documents.AnyDocument);
       if (validation !== null) {
-        errors[document.locale] = validation;
+        errs[document.locale] = validation;
       }
-
-      return document;
-    });
+      return errs;
+    }, {});
 
     return [rowsFromMeta, errors];
   }, [document, documentMeta?.availableLocales, validate]);
 
-  const localesToPublish = selectedRows
-    .filter(
-      (selectedRow) =>
-        selectedRow.status !== 'published' &&
-        !Object.keys(validationErrors || {}).includes(selectedRow.locale)
-    )
-    .map((selectedRow) => selectedRow.locale);
+  const localesToPublish = selectedRows.reduce((acc, selectedRow) => {
+    if (
+      selectedRow.status !== 'published' &&
+      !Object.keys(validationErrors).includes(selectedRow.locale)
+    ) {
+      acc.push(selectedRow.locale);
+    }
+    return acc;
+  }, []);
 
   const {
     data: draftRelationsCount = 0,
@@ -394,34 +399,16 @@ const BulkLocalePublishAction: DocumentActionComponent = ({
   // enabled and we can publish the current locale.
 
   const publish = async () => {
-    try {
-      const bulkPublishRes = await publishManyAction({
-        model,
-        documentIds: [documentId],
-        params: {
-          ...params,
-          locale: localesToPublish,
-        },
-      });
-
-      if ('error' in bulkPublishRes) {
-        toggleNotification({
-          type: 'danger',
-          message: formatAPIError(bulkPublishRes.error),
-        });
-        return;
-      }
+    await publishManyAction({
+      model,
+      documentIds: [documentId],
+      params: {
+        ...params,
+        locale: localesToPublish,
+      },
+    });
 
-      setSelectedRows([]);
-    } catch (error) {
-      toggleNotification({
-        type: 'danger',
-        message: formatMessage({
-          id: 'notification.error',
-          defaultMessage: 'An error occurred',
-        }),
-      });
-    }
+    setSelectedRows([]);
   };
 
   const handleAction = async () => {
@@ -461,7 +448,7 @@ const BulkLocalePublishAction: DocumentActionComponent = ({
         }),
         content: (
           <Flex direction="column" alignItems="center" gap={2}>
-            <WarningCircle width="24px" height="24px" fill="danger600" />
+            <WarningCircle width="2.4rem" height="2.4rem" fill="danger600" />
             <Typography textAlign="center">
               {formatMessage({
                 id: 'content-manager.actions.discard.dialog.body',