@strapi/admin 4.5.0 → 4.5.1

package/admin/src/content-manager/components/DynamicZone/index.js

@@ -1,24 +1,22 @@
-import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
 import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
+
 import { getTrad } from '../../utils';
+
 import connect from './utils/connect';
 import select from './utils/select';
-import AddComponentButton from './components/AddComponentButton';
-import DzLabel from './components/DzLabel';
-import Component from './components/Component';
 
+import DynamicZoneComponent from './components/DynamicComponent';
+import AddComponentButton from './components/AddComponentButton';
+import DynamicZoneLabel from './components/DynamicZoneLabel';
 import ComponentPicker from './components/ComponentPicker';
-import { useContentTypeLayout } from '../../hooks';
 
-/* eslint-disable react/no-array-index-key */
-
-const createCollapses = (arrayLength) =>
-  Array.from({ length: arrayLength }).map(() => ({ isOpen: false }));
+import { useContentTypeLayout } from '../../hooks';
 
 const DynamicZone = ({
   name,
@@ -36,39 +34,16 @@ const DynamicZone = ({
   fieldSchema,
   metadatas,
 }) => {
+  const [addComponentIsOpen, setAddComponentIsOpen] = useState(false);
+
   const toggleNotification = useNotification();
-  const [isOpen, setIsOpen] = useState(false);
-  const [shouldOpenAddedComponent, setShouldOpenAddedComponent] = useState(false);
   const { getComponentLayout, components } = useContentTypeLayout();
+
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
   const intlDescription = metadatas.description
     ? { id: metadatas.description, defaultMessage: metadatas.description }
     : null;
 
-  const [componentCollapses, setComponentsCollapses] = useState(
-    createCollapses(dynamicDisplayedComponentsLength)
-  );
-
-  useEffect(() => {
-    setComponentsCollapses(createCollapses(dynamicDisplayedComponentsLength));
-  }, [dynamicDisplayedComponentsLength]);
-
-  useEffect(() => {
-    if (shouldOpenAddedComponent) {
-      setComponentsCollapses((prev) =>
-        prev.map((collapse, index) => {
-          if (index === prev.length - 1) {
-            return { ...collapse, isOpen: true };
-          }
-
-          return collapse;
-        })
-      );
-
-      setShouldOpenAddedComponent(false);
-    }
-  }, [shouldOpenAddedComponent]);
-
   // We cannot use the default props here
   const { max = Infinity, min = -Infinity } = fieldSchema;
   const dynamicZoneErrors = useMemo(() => {
@@ -79,8 +54,6 @@ const DynamicZone = ({
       .map((key) => formErrors[key]);
   }, [formErrors, name]);
 
-  const dynamicZoneAvailableComponents = useMemo(() => fieldSchema.components || [], [fieldSchema]);
-
   const missingComponentNumber = min - dynamicDisplayedComponentsLength;
   const hasError = dynamicZoneErrors.length > 0;
 
@@ -90,21 +63,17 @@ const DynamicZone = ({
   const hasMaxError =
     hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
 
-  const handleAddComponent = useCallback(
-    (componentUid) => {
-      setIsOpen(false);
+  const handleAddComponent = (componentUid) => {
+    setAddComponentIsOpen(false);
 
-      const componentLayoutData = getComponentLayout(componentUid);
+    const componentLayoutData = getComponentLayout(componentUid);
 
-      addComponentToDynamicZone(name, componentLayoutData, components, hasError);
-      setShouldOpenAddedComponent(true);
-    },
-    [addComponentToDynamicZone, hasError, name, components, getComponentLayout]
-  );
+    addComponentToDynamicZone(name, componentLayoutData, components, hasError);
+  };
 
   const handleClickOpenPicker = () => {
     if (dynamicDisplayedComponentsLength < max) {
-      setIsOpen((prev) => !prev);
+      setAddComponentIsOpen((prev) => !prev);
     } else {
       toggleNotification({
         type: 'info',
@@ -113,68 +82,19 @@ const DynamicZone = ({
     }
   };
 
-  const handleToggleComponent = (indexToToggle) => {
-    setComponentsCollapses((prev) =>
-      prev.map(({ isOpen }, index) => {
-        if (index === indexToToggle) {
-          return { isOpen: !isOpen };
-        }
-
-        return { isOpen };
-      })
-    );
-  };
-
-  const handleMoveComponentDown = (name, currentIndex) => {
-    moveComponentDown(name, currentIndex);
-    setComponentsCollapses((prev) => {
-      return prev.map(({ isOpen }, index, refArray) => {
-        if (index === currentIndex + 1) {
-          return { isOpen: refArray[currentIndex].isOpen };
-        }
-
-        if (index === currentIndex) {
-          return { isOpen: refArray[index + 1].isOpen };
-        }
-
-        return { isOpen };
-      });
-    });
+  const handleMoveComponentDown = (name, componentIndex) => () => {
+    moveComponentDown(name, componentIndex);
   };
 
-  const handleMoveComponentUp = (name, currentIndex) => {
-    moveComponentUp(name, currentIndex);
-    setComponentsCollapses((prev) => {
-      return prev.map(({ isOpen }, index, refArray) => {
-        if (index === currentIndex - 1) {
-          return { isOpen: refArray[currentIndex].isOpen };
-        }
-
-        if (index === currentIndex) {
-          return { isOpen: refArray[index - 1].isOpen };
-        }
-
-        return { isOpen };
-      });
-    });
+  const handleMoveComponentUp = (name, componentIndex) => () => {
+    moveComponentUp(name, componentIndex);
   };
 
-  const handleRemoveComponent = (name, currentIndex) => {
+  const handleRemoveComponent = (name, currentIndex) => () => {
     removeComponentFromDynamicZone(name, currentIndex);
   };
 
-  if (!isFieldAllowed && isCreatingEntry) {
-    return (
-      <NotAllowedInput
-        description={intlDescription}
-        intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
-        labelAction={labelAction}
-        name={name}
-      />
-    );
-  }
-
-  if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
+  if (!isFieldAllowed && (isCreatingEntry || (!isFieldReadable && !isCreatingEntry))) {
     return (
       <NotAllowedInput
         description={intlDescription}
@@ -189,7 +109,7 @@ const DynamicZone = ({
     <Stack spacing={6}>
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
-          <DzLabel
+          <DynamicZoneLabel
             intlDescription={intlDescription}
             label={metadatas.label}
             labelAction={labelAction}
@@ -198,26 +118,21 @@ const DynamicZone = ({
             required={fieldSchema.required || false}
           />
           {dynamicDisplayedComponents.map((componentUid, index) => {
-            const showDownIcon =
-              isFieldAllowed &&
-              dynamicDisplayedComponentsLength > 0 &&
-              index < dynamicDisplayedComponentsLength - 1;
-            const showUpIcon = isFieldAllowed && dynamicDisplayedComponentsLength > 0 && index > 0;
-            const isOpen = componentCollapses[index]?.isOpen || false;
+            const showDownIcon = isFieldAllowed && index < dynamicDisplayedComponentsLength - 1;
+            const showUpIcon = isFieldAllowed && index > 0;
 
             return (
-              <Component
+              <DynamicZoneComponent
                 componentUid={componentUid}
                 formErrors={formErrors}
+                // eslint-disable-next-line react/no-array-index-key
                 key={index}
                 index={index}
-                isOpen={isOpen}
                 isFieldAllowed={isFieldAllowed}
-                moveComponentDown={handleMoveComponentDown}
-                moveComponentUp={handleMoveComponentUp}
-                onToggle={handleToggleComponent}
+                onMoveComponentDownClick={handleMoveComponentDown(name, index)}
+                onMoveComponentUpClick={handleMoveComponentUp(name, index)}
                 name={name}
-                removeComponentFromDynamicZone={handleRemoveComponent}
+                onRemoveComponentClick={handleRemoveComponent(name, index)}
                 showDownIcon={showDownIcon}
                 showUpIcon={showUpIcon}
               />
@@ -233,13 +148,13 @@ const DynamicZone = ({
         isDisabled={!isFieldAllowed}
         label={metadatas.label}
         missingComponentNumber={missingComponentNumber}
-        isOpen={isOpen}
+        isOpen={addComponentIsOpen}
         name={name}
         onClick={handleClickOpenPicker}
       />
       <ComponentPicker
-        isOpen={isOpen}
-        components={dynamicZoneAvailableComponents}
+        isOpen={addComponentIsOpen}
+        components={fieldSchema.components ?? []}
         onClickAddComponent={handleAddComponent}
       />
     </Stack>

package/admin/src/pages/HomePage/index.js

@@ -32,7 +32,7 @@ const LogoContainer = styled(Box)`
 `;
 
 const HomePage = () => {
-  // // Temporary until we develop the menu API
+  // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
 

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js

@@ -9,6 +9,7 @@ const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, cust
 
   return (
     <Select
+      data-testid={`${message}-button`}
       aria-label={message}
       placeholder={message}
       size="M"
@@ -20,7 +21,7 @@ const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, cust
     >
       {Object.entries(possibleFilters).map(([filterName, count]) => {
         return (
-          <Option key={filterName} value={filterName}>
+          <Option data-testid={`${filterName}-${count}`} key={filterName} value={filterName}>
             {computeFilterMessage(filterName, count)}
           </Option>
         );

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js

@@ -51,6 +51,7 @@ const NpmPackagesFilters = ({
         <ButtonToggle
           variant="tertiary"
           ref={buttonRef}
+          data-testid="filters-button"
           startIcon={<Filter />}
           onClick={handleToggle}
           size="S"

package/admin/src/translations/pt-BR.json

@@ -73,7 +73,7 @@
   "ResetPasswordToken": "Redefinir o token de senha",
   "Role": "Função",
   "Roles & Permissions": "Funções e Permissões",
-  "Roles.ListPage.notification.delete-all-not-allowed": "Algumass funções não puderam ser removidos por estarem associadas a alguns usuários",
+  "Roles.ListPage.notification.delete-all-not-allowed": "Algumas funções não puderam ser removidos por estarem associadas a alguns usuários",
   "Roles.ListPage.notification.delete-not-allowed": "A função não pode ser removida se ainda estiver associada a algum usuário",
   "Roles.RoleRow.select-all": "Selecione {name} para ações em massa",
   "Roles.RoleRow.user-count": "{number, plural, =0 {#  user} um {#  user} outros {# users}}",
@@ -153,7 +153,7 @@
   "Settings.profile.form.section.experience.clear.select": "Limpar a linguagem da interface selecionada",
   "Settings.profile.form.section.experience.here": "aqui",
   "Settings.profile.form.section.experience.interfaceLanguage": "Linguagem da interface",
-  "Settings.profile.form.section.experience.interfaceLanguage.hint": "Somente sua interface será exibida com a lingaugem selecionada.",
+  "Settings.profile.form.section.experience.interfaceLanguage.hint": "Somente sua interface será exibida com a linguagem selecionada.",
   "Settings.profile.form.section.experience.interfaceLanguageHelp": "A nova linguagem seleciona só será exibida a você. Por favor, leia essa {documentation} para disponibilizar outras linguagens para sua equipe.",
   "Settings.profile.form.section.experience.mode.label": "Modo de interface",
   "Settings.profile.form.section.experience.mode.hint": "Selecione o modo de interface que você deseja usar",
@@ -212,7 +212,7 @@
   "Settings.webhooks.trigger.cancel": "Cancelar disparo",
   "Settings.webhooks.trigger.pending": "Pendente…",
   "Settings.webhooks.trigger.save": "Por favor salve para disparar",
-  "Settings.webhooks.trigger.success": "Successo!",
+  "Settings.webhooks.trigger.success": "Sucesso!",
   "Settings.webhooks.trigger.success.label": "Disparo realizado com sucesso",
   "Settings.webhooks.trigger.test": "Disparo de teste",
   "Settings.webhooks.trigger.title": "Salvar antes do Disparo",
@@ -235,7 +235,7 @@
   "admin.pages.MarketPlacePage.helmet": "Loja - Extensões",
   "admin.pages.MarketPlacePage.offline.title": "Você está offline",
   "admin.pages.MarketPlacePage.offline.subtitle": "Você precisa estar online para ver as extensões",
-  "admin.pages.MarketPlacePage.plugins": "Extenções",
+  "admin.pages.MarketPlacePage.plugins": "Extensões",
   "admin.pages.MarketPlacePage.plugin.copy": "Copiar comando de instalação",
   "admin.pages.MarketPlacePage.plugin.copy.success": "Comando de instalação pronto para ser colado em seu terminal",
   "admin.pages.MarketPlacePage.plugin.info": "Saber mais",
@@ -249,10 +249,10 @@
   "admin.pages.MarketPlacePage.search.empty": "Sem resultado para \"{target}\"",
   "admin.pages.MarketPlacePage.search.placeholder": "Pesquisar",
   "admin.pages.MarketPlacePage.submit.plugin.link": "Submeta sua extensão",
-  "admin.pages.MarketPlacePage.submit.provider.link": "Submit provider",
+  "admin.pages.MarketPlacePage.submit.provider.link": "Submeta provedor",
   "admin.pages.MarketPlacePage.subtitle": "Faça mais com o Strapi",
-  "admin.pages.MarketPlacePage.tab-group.label": "Plugins and Providers for Strapi",
-  "admin.pages.MarketPlacePage.missingPlugin.title": "Missing a plugin?",
+  "admin.pages.MarketPlacePage.tab-group.label": "Plugins e Provedores para Strapi",
+  "admin.pages.MarketPlacePage.missingPlugin.title": "Falta-lhe um plugin?",
   "admin.pages.MarketPlacePage.missingPlugin.description": "Diga-nos qual extensão você está procurando e informaremos nossos desenvolvedores de extensões da comunidade caso eles estejam em busca de inspiração!",
   "anErrorOccurred": "Ops! Algo deu errado. Por favor, tente novamente.",
   "app.component.CopyToClipboard.label": "Copiar pra área de transferência",
@@ -275,7 +275,7 @@
   "app.components.DownloadInfo.download": "Transferência em andamento...",
   "app.components.DownloadInfo.text": "Isto poderá levar alguns minutos. Obrigado pela sua paciência",
   "app.components.EmptyAttributes.title": "Ainda não existem campos",
-  "app.components.EmptyStateLayout.content-document": "Nenhum conteúdo encontrato",
+  "app.components.EmptyStateLayout.content-document": "Nenhum conteúdo encontrado",
   "app.components.EmptyStateLayout.content-permissions": "Você não tem permissão para acessar esse conteúdo",
   "app.components.GuidedTour.CM.create.content": "<p>Crie e gerencie todo o conteúdo aqui no Gerenciador de Conteúdos.</p><p>Ex: Levando ainda mais o exemplo do site do Blog, pode-se escrever um artigo, salvá-lo e publicá-lo como quiser.</p><p>💡 Dica rápida - Não se esqueça de clicar em publicar no conteúdo que você criar.</p>",
   "app.components.GuidedTour.CM.create.title": "⚡️ Crie seu primeiro conteúdo",
@@ -320,7 +320,7 @@
   "app.components.InputFileDetails.size": "Tamanho:",
   "app.components.InstallPluginPage.Download.description": "Pode demorar alguns segundos para baixar e instalar a extensão.",
   "app.components.InstallPluginPage.Download.title": "Baixando...",
-  "app.components.InstallPluginPage.description": "Extenda seu aplicativo sem esforço.",
+  "app.components.InstallPluginPage.description": "Estenda seu aplicativo sem esforço.",
   "app.components.LeftMenu.collapse": "Recolher barra de navegação",
   "app.components.LeftMenu.expand": "Expandir barra de navegação",
   "app.components.LeftMenu.general": "Geral",
@@ -334,7 +334,7 @@
   "app.components.LeftMenuLinkContainer.collectionTypes": "Tipos de coleção",
   "app.components.LeftMenuLinkContainer.configuration": "Configurações",
   "app.components.LeftMenuLinkContainer.general": "Geral",
-  "app.components.LeftMenuLinkContainer.noPluginsInstalled": "Nehuma extensão instalada ainda",
+  "app.components.LeftMenuLinkContainer.noPluginsInstalled": "Nenhuma extensão instalada ainda",
   "app.components.LeftMenuLinkContainer.plugins": "Extensões",
   "app.components.LeftMenuLinkContainer.singleTypes": "Tipos singulares",
   "app.components.ListPluginsPage.deletePlugin.description": "Pode demorar alguns segundos para desinstalar a extensão.",
@@ -357,9 +357,9 @@
   "app.components.PluginCard.PopUpWarning.install.impossible.autoReload.needed": "O recurso autoReload precisa estar ativado. Por favor, inicie seu aplicativo com `yarn develop`.",
   "app.components.PluginCard.PopUpWarning.install.impossible.confirm": "Eu compreendo!",
   "app.components.PluginCard.PopUpWarning.install.impossible.environment": "Por motivos de segurança, uma extensão só pode ser baixada no ambiente de desenvolvimento.",
-  "app.components.PluginCard.PopUpWarning.install.impossible.title": "Não é possivel baixar",
+  "app.components.PluginCard.PopUpWarning.install.impossible.title": "Não é possível baixar",
   "app.components.PluginCard.compatible": "Compatível com a sua aplicação",
-  "app.components.PluginCard.compatibleCommunity": "Compativel com a comunidade",
+  "app.components.PluginCard.compatibleCommunity": "Compatível com a comunidade",
   "app.components.PluginCard.more-details": "Mais detalhes",
   "app.components.ToggleCheckbox.off-label": "Desativado",
   "app.components.ToggleCheckbox.on-label": "Ativado",
@@ -527,7 +527,7 @@
   "content-manager.components.NotAllowedInput.text": "Sem permissão para ver esse campo",
   "content-manager.components.RepeatableComponent.error-message": "Um ou mais componentes contêm erros",
   "content-manager.components.Search.placeholder": "Buscar registro...",
-  "content-manager.components.Select.draft-info-title": "Estado: Rasunho",
+  "content-manager.components.Select.draft-info-title": "Estado: Rascunho",
   "content-manager.components.Select.publish-info-title": "Estado: Publicado",
   "content-manager.components.SettingsViewWrapper.pluginHeader.description.edit-settings": "Customizar visualização de edição.",
   "content-manager.components.SettingsViewWrapper.pluginHeader.description.list-settings": "Customizar visualização de lista.",
@@ -718,7 +718,7 @@
   "global.plugins.users-permissions": "Funções e permissões",
   "global.plugins.users-permissions.description": "Proteja sua API com um processo de autenticação completo baseado em JWT. Esta extensão também vem com uma estratégia de ACL que permite gerenciar as permissões entre os grupos de usuários.",
   "global.profile": "Perfil",
-  "global.prompt.unsaved": "Você tem certeza que deseja sair desta página? Todas as suas modificacões serão perdidas",
+  "global.prompt.unsaved": "Você tem certeza que deseja sair desta página? Todas as suas modificações serão perdidas",
   "global.reset-password": "Redefinir senha",
   "global.roles": "Funções",
   "global.save": "Salvar",