@strapi/admin 4.6.1 → 4.9.0-alpha.0

package/admin/src/pages/Admin/Onboarding/index.js

@@ -1,92 +1,91 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Box, Flex, FocusTrap, Typography, Icon, Stack } from '@strapi/design-system';
-import { Book, Cross, Information, Question } from '@strapi/icons';
-import { pxToRem } from '@strapi/helper-plugin';
-
-import { useConfigurations } from '../../../hooks';
-
-const OnboardingWrapper = styled(Box)`
-  position: fixed;
-  bottom: ${({ theme }) => theme.spaces[2]};
-  right: ${({ theme }) => theme.spaces[2]};
-`;
-
-const Button = styled(Box)`
-  width: ${({ theme }) => theme.spaces[8]};
-  height: ${({ theme }) => theme.spaces[8]};
-  background: ${({ theme }) => theme.colors.primary600};
-  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  FocusTrap,
+  Icon,
+  Portal,
+  PopoverPrimitives,
+  Stack,
+  Typography,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Cross, Play, Question } from '@strapi/icons';
+
+import onboardingPreview from '../../../assets/images/onboarding-preview.png';
+import { VIDEO_LINKS, DOCUMENTATION_LINKS, WATCH_MORE } from './constants';
+
+// TODO: use new Button props derived from Box props with next DS release
+const HelperButton = styled(Button)`
   border-radius: 50%;
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.buttonNeutral0};
-  }
+  padding: ${({ theme }) => theme.spaces[3]};
+  /* Resetting 2rem height defined by Button component */
+  height: 100%;
 `;
 
-const LinksWrapper = styled(Box)`
-  bottom: ${({ theme }) => `${theme.spaces[9]}`};
-  min-width: ${200 / 16}rem;
-  position: absolute;
-  right: 0;
+const IconWrapper = styled(Flex)`
+  transform: translate(-50%, -50%);
 `;
 
-const StyledLink = styled(Flex)`
+const VideoLinkWrapper = styled(Flex)`
   text-decoration: none;
 
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
+  :focus-visible {
+    outline-offset: ${({ theme }) => `-${theme.spaces[1]}`};
   }
 
-  &:focus,
-  &:hover {
-    background: ${({ theme }) => theme.colors.neutral100};
+  :hover {
+    background: ${({ theme }) => theme.colors.primary100};
 
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral700};
+    /* Hover style for the number displayed */
+    ${Typography}:first-child {
+      color: ${({ theme }) => theme.colors.primary500};
     }
 
-    ${[Typography]} {
-      color: ${({ theme }) => theme.colors.neutral700};
+    /* Hover style for the label */
+    ${Typography}:nth-child(1) {
+      color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
 
+const Preview = styled.img`
+  width: ${({ theme }) => theme.spaces[10]};
+  height: ${({ theme }) => theme.spaces[8]};
+  /* Same overlay used in ModalLayout */
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
+  border-radius: ${({ theme }) => theme.borderRadius};
+`;
+
+const TypographyLineHeight = styled(Typography)`
+  /* line height of label and watch more to 1 so they can be better aligned visually */
+  line-height: 1;
+`;
+
+const TextLink = styled(TypographyLineHeight)`
+  text-decoration: none;
+
+  :hover {
+    text-decoration: underline;
+  }
+`;
+
 const Onboarding = () => {
+  const triggerRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const { formatMessage } = useIntl();
-  const { showTutorials } = useConfigurations();
-
-  if (!showTutorials) {
-    return null;
-  }
 
-  const STATIC_LINKS = [
-    {
-      Icon: <Book />,
-      label: formatMessage({
-        id: 'global.documentation',
-        defaultMessage: 'Documentation',
-      }),
-      destination: 'https://docs.strapi.io',
-    },
-    {
-      Icon: <Information />,
-      label: formatMessage({ id: 'app.static.links.cheatsheet', defaultMessage: 'CheatSheet' }),
-      destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
-    },
-  ];
-
-  const handleClick = () => {
+  const handlePopoverVisibility = () => {
     setIsOpen((prev) => !prev);
   };
 
   return (
-    <OnboardingWrapper as="aside">
-      <Button
-        as="button"
-        id="onboarding"
+    <Box as="aside" position="fixed" bottom={2} right={2}>
+      <HelperButton
         aria-label={formatMessage(
           isOpen
             ? {
@@ -98,37 +97,110 @@ const Onboarding = () => {
                 defaultMessage: 'Open help menu',
               }
         )}
-        onClick={handleClick}
+        onClick={handlePopoverVisibility}
+        ref={triggerRef}
       >
-        <Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
-      </Button>
+        <Icon as={isOpen ? Cross : Question} color="buttonNeutral0" />
+      </HelperButton>
 
-      {/* FIX ME - replace with popover when overflow popover is fixed 
-       + when v4 mockups for onboarding component are ready */}
       {isOpen && (
-        <FocusTrap onEscape={handleClick}>
-          <LinksWrapper background="neutral0" hasRadius shadow="tableShadow" padding={2}>
-            {STATIC_LINKS.map((link) => (
-              <StyledLink
-                as="a"
-                key={link.label}
-                rel="nofollow noreferrer noopener"
-                target="_blank"
-                href={link.destination}
-                padding={2}
-                hasRadius
-                alignItems="center"
+        <Portal>
+          <PopoverPrimitives.Content
+            padding={0}
+            source={triggerRef}
+            placement="top-end"
+            spacing={12}
+          >
+            <FocusTrap onEscape={handlePopoverVisibility}>
+              <Flex
+                justifyContent="space-between"
+                paddingBottom={5}
+                paddingRight={6}
+                paddingLeft={6}
+                paddingTop={6}
               >
-                <Stack horizontal spacing={2}>
-                  {link.Icon}
-                  <Typography color="neutral600">{link.label}</Typography>
-                </Stack>
-              </StyledLink>
-            ))}
-          </LinksWrapper>
-        </FocusTrap>
+                <TypographyLineHeight fontWeight="bold">
+                  {formatMessage({
+                    id: 'app.components.Onboarding.title',
+                    defaultMessage: 'Get started videos',
+                  })}
+                </TypographyLineHeight>
+                <TextLink
+                  as="a"
+                  href={WATCH_MORE.href}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  variant="pi"
+                  textColor="primary600"
+                >
+                  {formatMessage(WATCH_MORE.label)}
+                </TextLink>
+              </Flex>
+              <Divider />
+              {VIDEO_LINKS.map(({ href, duration, label }, index) => (
+                <VideoLinkWrapper
+                  as="a"
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  key={href}
+                  hasRadius
+                  paddingTop={4}
+                  paddingBottom={4}
+                  paddingLeft={6}
+                  paddingRight={11}
+                >
+                  <Box paddingRight={5}>
+                    <Typography textColor="neutral200" variant="alpha">
+                      {index + 1}
+                    </Typography>
+                  </Box>
+                  <Box position="relative">
+                    <Preview src={onboardingPreview} alt="" />
+                    <IconWrapper
+                      position="absolute"
+                      top="50%"
+                      left="50%"
+                      background="primary600"
+                      borderRadius="50%"
+                      justifyContent="center"
+                      width={6}
+                      height={6}
+                    >
+                      <Icon as={Play} color="buttonNeutral0" width={3} height={3} />
+                    </IconWrapper>
+                  </Box>
+                  <Flex direction="column" alignItems="start" paddingLeft={4}>
+                    <Typography fontWeight="bold">{formatMessage(label)}</Typography>
+                    <VisuallyHidden>:</VisuallyHidden>
+                    <Typography textColor="neutral600" variant="pi">
+                      {duration}
+                    </Typography>
+                  </Flex>
+                </VideoLinkWrapper>
+              ))}
+              <Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
+                {DOCUMENTATION_LINKS.map(({ label, href, icon }) => (
+                  <Stack horizontal spacing={3} key={href}>
+                    <Icon as={icon} color="primary600" />
+                    <TextLink
+                      as="a"
+                      href={href}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                      variant="sigma"
+                      textColor="primary700"
+                    >
+                      {formatMessage(label)}
+                    </TextLink>
+                  </Stack>
+                ))}
+              </Stack>
+            </FocusTrap>
+          </PopoverPrimitives.Content>
+        </Portal>
       )}
-    </OnboardingWrapper>
+    </Box>
   );
 };
 

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

@@ -10,10 +10,11 @@ import { useTracking, LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-
 import { useDispatch, useSelector } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+
 import GuidedTourModal from '../../components/GuidedTour/Modal';
 import LeftMenu from '../../components/LeftMenu';
 import AppLayout from '../../layouts/AppLayout';
-import { useMenu } from '../../hooks';
+import { useMenu, useConfigurations } from '../../hooks';
 import { createRoute } from '../../utils';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
 import Onboarding from './Onboarding';
@@ -65,6 +66,7 @@ const Admin = () => {
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();
+  const { showTutorials } = useConfigurations();
 
   const routes = useMemo(() => {
     return menu
@@ -106,7 +108,8 @@ const Admin = () => {
           </Switch>
         </Suspense>
         <GuidedTourModal />
-        <Onboarding />
+
+        {showTutorials && <Onboarding />}
       </AppLayout>
     </DndProvider>
   );

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+import { useTracking } from '@strapi/helper-plugin';
 import {
   SubNav,
   SubNavHeader,
@@ -13,6 +14,8 @@ import { getSectionsToDisplay } from '../../utils';
 
 const SettingsNav = ({ menu }) => {
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
 
   const filteredMenu = getSectionsToDisplay(menu);
 
@@ -35,6 +38,10 @@ const SettingsNav = ({ menu }) => {
     defaultMessage: 'Settings',
   });
 
+  const handleClickOnLink = (destination = null) => {
+    trackUsage('willNavigate', { from: pathname, to: destination });
+  };
+
   return (
     <SubNav ariaLabel={label}>
       <SubNavHeader label={label} />
@@ -42,7 +49,13 @@ const SettingsNav = ({ menu }) => {
         {sections.map((section) => (
           <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
             {section.links.map((link) => (
-              <SubNavLink as={NavLink} withBullet={link.hasNotification} to={link.to} key={link.id}>
+              <SubNavLink
+                as={NavLink}
+                withBullet={link.hasNotification}
+                to={link.to}
+                onClick={() => handleClickOnLink(link.to)}
+                key={link.id}
+              >
                 {formatMessage(link.intlLabel)}
               </SubNavLink>
             ))}

package/admin/src/pages/SettingsPage/pages/Users/components/MagicLink/MagicLinkWrapper.js

@@ -1,28 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IconButton } from '@strapi/design-system/IconButton';
+import { IconButton } from '@strapi/design-system';
 import { useNotification, ContentBox } from '@strapi/helper-plugin';
-import Duplicate from '@strapi/icons/Duplicate';
+import { Duplicate } from '@strapi/icons';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useIntl } from 'react-intl';
 
-// FIXME replace with parts when ready
-const Envelope = () => (
-  <svg xmlns="http://www.w3.org/2000/svg">
-    <text
-      transform="translate(-23 -9)"
-      fill="#4B515A"
-      fillRule="evenodd"
-      fontSize="32"
-      fontFamily="AppleColorEmoji, Apple Color Emoji"
-    >
-      <tspan x="23" y="36">
-        ✉️
-      </tspan>
-    </text>
-  </svg>
-);
-
 const MagicLinkWrapper = ({ children, target }) => {
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
@@ -46,7 +29,7 @@ const MagicLinkWrapper = ({ children, target }) => {
       title={target}
       titleEllipsis
       subtitle={children}
-      icon={<Envelope />}
+      icon={<span style={{ fontSize: 32 }}>✉️</span>}
       iconBackground="neutral100"
     />
   );

package/admin/src/permissions/defaultPermissions.js

@@ -21,23 +21,10 @@ const permissions = {
     ],
   },
   marketplace: {
-    main: [
-      { action: 'admin::marketplace.read', subject: null },
-      { action: 'admin::marketplace.plugins.install', subject: null },
-      { action: 'admin::marketplace.plugins.uninstall', subject: null },
-    ],
-    install: [{ action: 'admin::marketplace.plugins.install', subject: null }],
-    read: [
-      { action: 'admin::marketplace.read', subject: null },
-      { action: 'admin::marketplace.plugins.uninstall', subject: null },
-    ],
-    uninstall: [{ action: 'admin::marketplace.plugins.uninstall', subject: null }],
+    main: [{ action: 'admin::marketplace.read', subject: null }],
+    read: [{ action: 'admin::marketplace.read', subject: null }],
   },
   settings: {
-    auditLogs: {
-      main: [{ action: 'admin::audit-logs.read', subject: null }],
-      read: [{ action: 'admin::audit-logs.read', subject: null }],
-    },
     roles: {
       main: [
         { action: 'admin::roles.create', subject: null },

package/admin/src/translations/ar.json

@@ -90,10 +90,10 @@
   "components.Input.error.password.noMatch": "كلمات السر لا تتطابق",
   "components.Input.error.validation.email": "هذا ليس بريد الإكتروني",
   "components.Input.error.validation.json": "لا يتطابق مع صيغة JSON",
-  "components.Input.error.validation.max": "هذه القيمة عالية جدًا.",
-  "components.Input.error.validation.maxLength": "هذه القيمة طويلة جدًا.",
-  "components.Input.error.validation.min": "هذه القيمة قليلة جدًا.",
-  "components.Input.error.validation.minLength": "هذه القيمة قصيرة جدًا.",
+  "components.Input.error.validation.max": "هذه القيمة عالية جدًا {max}.",
+  "components.Input.error.validation.maxLength": "هذه القيمة طويلة جدًا {max}.",
+  "components.Input.error.validation.min": "هذه القيمة قليلة جدًا {min}.",
+  "components.Input.error.validation.minLength": "هذه القيمة قصيرة جدًا {min}.",
   "components.Input.error.validation.minSupMax": "لا يمكن أن تكون متفوقة",
   "components.Input.error.validation.regex": "هذه القمية لا تطابق regex.",
   "components.Input.error.validation.required": "هذه القيمة مطلوبة.",

package/admin/src/translations/ca.json

@@ -409,10 +409,10 @@
   "components.Input.error.validation.email": "Això no és un email",
   "components.Input.error.validation.json": "Això no coincideix amb el format JSON",
   "components.Input.error.validation.lowercase": "El valor ha de ser una cadena en minúscules",
-  "components.Input.error.validation.max": "El valor és massa alt.",
-  "components.Input.error.validation.maxLength": "El valor és massa llarg.",
-  "components.Input.error.validation.min": "El valor és massa baix.",
-  "components.Input.error.validation.minLength": "El valor és massa curt.",
+  "components.Input.error.validation.max": "El valor és massa alt {max}.",
+  "components.Input.error.validation.maxLength": "El valor és massa llarg {max}.",
+  "components.Input.error.validation.min": "El valor és massa baix {min}.",
+  "components.Input.error.validation.minLength": "El valor és massa curt {min}.",
   "components.Input.error.validation.minSupMax": "No pot ser superior",
   "components.Input.error.validation.regex": "El valor no coincideix amb el de regex.",
   "components.Input.error.validation.required": "Aquest valor és obligatori.",

package/admin/src/translations/cs.json

@@ -115,10 +115,10 @@
   "components.Input.error.password.noMatch": "Hesla se neshodují",
   "components.Input.error.validation.email": "Toto není e-mailová adresa",
   "components.Input.error.validation.json": "Toto se neshoduje s formátem JSON",
-  "components.Input.error.validation.max": "Hodnota je příliš vysoká.",
-  "components.Input.error.validation.maxLength": "Hodnota je příliš dlouhá.",
-  "components.Input.error.validation.min": "Hodnota je příliš nízká.",
-  "components.Input.error.validation.minLength": "Hodnota je příliš krátká.",
+  "components.Input.error.validation.max": "Hodnota je příliš vysoká {max}.",
+  "components.Input.error.validation.maxLength": "Hodnota je příliš dlouhá {max}.",
+  "components.Input.error.validation.min": "Hodnota je příliš nízká {min}.",
+  "components.Input.error.validation.minLength": "Hodnota je příliš krátká {min}.",
   "components.Input.error.validation.minSupMax": "Nemůže být nadřazený",
   "components.Input.error.validation.regex": "Hodnota neodpovídá požadovanému vzoru.",
   "components.Input.error.validation.required": "Tato hodnota je povinná.",

package/admin/src/translations/de.json

@@ -405,10 +405,10 @@
   "components.Input.error.validation.email": "Das ist keine gültige E-Mail-Adresse",
   "components.Input.error.validation.json": "Dies entspricht nicht dem JSON-Format.",
   "components.Input.error.validation.lowercase": "Dieser Wert muss kleingeschreiben sein.",
-  "components.Input.error.validation.max": "Dieser Wert ist zu hoch.",
-  "components.Input.error.validation.maxLength": "Dieser Wert ist zu lang.",
-  "components.Input.error.validation.min": "Dieser Wert ist zu niedrig.",
-  "components.Input.error.validation.minLength": "Dieser Wert ist zu kurz.",
+  "components.Input.error.validation.max": "Dieser Wert ist zu hoch {max}.",
+  "components.Input.error.validation.maxLength": "Dieser Wert ist zu lang {max}.",
+  "components.Input.error.validation.min": "Dieser Wert ist zu niedrig {min}.",
+  "components.Input.error.validation.minLength": "Dieser Wert ist zu kurz {min}.",
   "components.Input.error.validation.minSupMax": "Darf nicht höher sein",
   "components.Input.error.validation.regex": "Dieser Wert entspricht nicht dem RegEx.",
   "components.Input.error.validation.required": "Die Eingabe dieses Wertes ist erforderlich.",

package/admin/src/translations/dk.json

@@ -353,10 +353,10 @@
   "components.Input.error.password.noMatch": "Kodeord er ikke ens",
   "components.Input.error.validation.email": "Dette er ikke en e-mail",
   "components.Input.error.validation.json": "Dette matcher ikke JSON formatet",
-  "components.Input.error.validation.max": "Værdien er for høj.",
-  "components.Input.error.validation.maxLength": "Værdien er for lang.",
-  "components.Input.error.validation.min": "Værdien er for lav.",
-  "components.Input.error.validation.minLength": "Værdien er for kort.",
+  "components.Input.error.validation.max": "Værdien er for høj {max}.",
+  "components.Input.error.validation.maxLength": "Værdien er for lang {max}.",
+  "components.Input.error.validation.min": "Værdien er for lav {min}.",
+  "components.Input.error.validation.minLength": "Værdien er for kort {min}.",
   "components.Input.error.validation.minSupMax": "Kan ikke være højere",
   "components.Input.error.validation.regex": "Værdien matcher ikke regex.",
   "components.Input.error.validation.required": "Værdien er påkrævet.",

package/admin/src/translations/en.json

@@ -226,6 +226,11 @@
   "Settings.profile.form.section.experience.title": "Experience",
   "Settings.profile.form.section.helmet.title": "User profile",
   "Settings.profile.form.section.profile.page.title": "Profile page",
+  "Settings.review-workflows.page.title": "Review Workflows",
+  "Settings.review-workflows.page.subtitle": "{count, plural, one {# stage} other {# stages}}",
+  "Settings.review-workflows.page.isLoading": "Workflow is loading",
+  "Settings.review-workflows.page.delete.confirm.body": "All entries assigned to deleted stages will be moved to the first stage. Are you sure you want to save this?",
+  "Settings.review-workflows.stage.name.label": "Stage name",
   "Settings.roles.create.description": "Define the rights given to the role",
   "Settings.roles.create.title": "Create a role",
   "Settings.roles.created": "Role created",
@@ -433,7 +438,11 @@
   "app.components.Official": "Official",
   "app.components.Onboarding.help.button": "Help button",
   "app.components.Onboarding.label.completed": "% completed",
-  "app.components.Onboarding.title": "Get Started Videos",
+  "app.components.Onboarding.title": "Get started videos",
+  "app.components.Onboarding.link.more-videos": "Watch more videos",
+  "app.components.Onboarding.link.build-content": "Build a content architecture",
+  "app.components.Onboarding.link.manage-content": "Add & manage content",
+  "app.components.Onboarding.link.manage-media": "Manage media",
   "app.components.PluginCard.Button.label.download": "Download",
   "app.components.PluginCard.Button.label.install": "Already installed",
   "app.components.PluginCard.PopUpWarning.install.impossible.autoReload.needed": "The autoReload feature needs to be enabled. Please start your app with `yarn develop`.",
@@ -528,10 +537,10 @@
   "components.Input.error.validation.email": "Value is an invalid email",
   "components.Input.error.validation.json": "Value is invalid JSON",
   "components.Input.error.validation.lowercase": "The value must be a lowercase string",
-  "components.Input.error.validation.max": "Value is larger than the maximum",
-  "components.Input.error.validation.maxLength": "Value is longer than the maximum",
-  "components.Input.error.validation.min": "Value is smaller than the minimum",
-  "components.Input.error.validation.minLength": "Value is shorter than the minimum",
+  "components.Input.error.validation.max": "Value is larger than the maximum {max}",
+  "components.Input.error.validation.maxLength": "Value is longer than the maximum length {max}",
+  "components.Input.error.validation.min": "Value is smaller than the minimum {min}",
+  "components.Input.error.validation.minLength": "Value is shorter than the minimum length {min}",
   "components.Input.error.validation.minSupMax": "Value cannot be superior",
   "components.Input.error.validation.regex": "Value does not match the required pattern",
   "components.Input.error.validation.required": "Value is required",

package/admin/src/translations/es.json

@@ -353,10 +353,10 @@
   "components.Input.error.password.noMatch": "Las contraseñas no coinciden",
   "components.Input.error.validation.email": "Esto no es un email",
   "components.Input.error.validation.json": "Esto no coincide con el formato JSON",
-  "components.Input.error.validation.max": "El valor es demasiado alto.",
-  "components.Input.error.validation.maxLength": "El valor es demasiado largo.",
-  "components.Input.error.validation.min": "El valor es demasiado bajo.",
-  "components.Input.error.validation.minLength": "El valor es demasiado corto.",
+  "components.Input.error.validation.max": "El valor es demasiado alto {max}.",
+  "components.Input.error.validation.maxLength": "El valor es demasiado largo {max}.",
+  "components.Input.error.validation.min": "El valor es demasiado bajo {min}.",
+  "components.Input.error.validation.minLength": "El valor es demasiado corto {min}.",
   "components.Input.error.validation.minSupMax": "No puede ser superior",
   "components.Input.error.validation.regex": "El valor no coincide con el de regex.",
   "components.Input.error.validation.required": "Este valor es obligatorio.",

package/admin/src/translations/eu.json

@@ -489,10 +489,10 @@
   "components.Input.error.validation.email": "Posta elektroniko hau ez da baliozkoa.",
   "components.Input.error.validation.json": "Hau ez dator bat JSON formatuarekin",
   "components.Input.error.validation.lowercase": "Balioa minuskulazko kate bat izan behar da",
-  "components.Input.error.validation.max": "Balioa handiegia da.",
-  "components.Input.error.validation.maxLength": "Balioa luzeegia da.",
-  "components.Input.error.validation.min": "Balioa txikiegia da.",
-  "components.Input.error.validation.minLength": "Balioa laburregia da.",
+  "components.Input.error.validation.max": "Balioa handiegia da {max}.",
+  "components.Input.error.validation.maxLength": "Balioa luzeegia da {max}.",
+  "components.Input.error.validation.min": "Balioa txikiegia da {min}.",
+  "components.Input.error.validation.minLength": "Balioa laburregia da {min}.",
   "components.Input.error.validation.minSupMax": "Ezin da handiagoa izan.",
   "components.Input.error.validation.regex": "Balioa ez dator bat regex-arekin.",
   "components.Input.error.validation.required": "Balio hau beharrezkoa da.",

package/admin/src/translations/fr.json

@@ -353,10 +353,10 @@
   "components.Input.error.password.noMatch": "Le mot de passe ne correspond pas",
   "components.Input.error.validation.email": "Le format n'est pas de type e-mail",
   "components.Input.error.validation.json": "Le format JSON n'est pas respecté",
-  "components.Input.error.validation.max": "La valeur est trop grande.",
-  "components.Input.error.validation.maxLength": "La valeur est trop longue.",
-  "components.Input.error.validation.min": "La valeur est trop basse.",
-  "components.Input.error.validation.minLength": "La valeur est trop courte.",
+  "components.Input.error.validation.max": "La valeur est trop grande {max}.",
+  "components.Input.error.validation.maxLength": "La valeur est trop longue {max}.",
+  "components.Input.error.validation.min": "La valeur est trop basse {min}.",
+  "components.Input.error.validation.minLength": "La valeur est trop courte {min}.",
   "components.Input.error.validation.minSupMax": "Ne peut pas être plus grand.",
   "components.Input.error.validation.regex": "La valeur ne correspond pas au format attendu.",
   "components.Input.error.validation.required": "Ce champ est obligatoire.",

package/admin/src/translations/gu.json

@@ -328,10 +328,10 @@
   "components.Input.error.validation.email": "આ અમાન્ય ઈમેલ છે",
   "components.Input.error.validation.json": "આ JSON ફોર્મેટ સાથે મેળ ખાતું નથી",
   "components.Input.error.validation.lowercase": "મૂલ્ય લોઅરકેસ સ્ટ્રિંગ હોવી જોઈએ",
-  "components.Input.error.validation.max": "મૂલ્ય ખૂબ વધારે છે.",
-  "components.Input.error.validation.maxLength": "મૂલ્ય ખૂબ લાંબુ છે.",
-  "components.Input.error.validation.min": "મૂલ્ય ખૂબ ઓછું છે.",
-  "components.Input.error.validation.minLength": "મૂલ્ય ખૂબ ટૂંકું છે.",
+  "components.Input.error.validation.max": "મૂલ્ય ખૂબ વધારે છે {max}.",
+  "components.Input.error.validation.maxLength": "મૂલ્ય ખૂબ લાંબુ છે {max}.",
+  "components.Input.error.validation.min": "મૂલ્ય ખૂબ ઓછું છે {min}.",
+  "components.Input.error.validation.minLength": "મૂલ્ય ખૂબ ટૂંકું છે {min}.",
   "components.Input.error.validation.minSupMax": "બહેતર ન હોઈ શકે",
   "components.Input.error.validation.regex": "મૂલ્ય રેગેક્સ સાથે મેળ ખાતું નથી.",
   "components.Input.error.validation.required": "આ મૂલ્ય જરૂરી છે.",

package/admin/src/translations/he.json

@@ -256,10 +256,10 @@
   "components.Input.error.password.noMatch": "הסיסמאות לא תואמות",
   "components.Input.error.validation.email": "זה לא דוא\"ל",
   "components.Input.error.validation.json": "זה לא תואם לפורמט JSON",
-  "components.Input.error.validation.max": "הערך גבוה מדי.",
-  "components.Input.error.validation.maxLength": "הערך ארוך מדי.",
-  "components.Input.error.validation.min": "הערך נמוך מדי.",
-  "components.Input.error.validation.minLength": "הערך קצר מדי.",
+  "components.Input.error.validation.max": "הערך גבוה מדי {max}.",
+  "components.Input.error.validation.maxLength": "הערך ארוך מדי {max}.",
+  "components.Input.error.validation.min": "הערך נמוך מדי {min}.",
+  "components.Input.error.validation.minLength": "הערך קצר מדי {min}.",
   "components.Input.error.validation.minSupMax": "לא יכול להיות מעולה",
   "components.Input.error.validation.regex": "הערך אינו תואם את ה- regex.",
   "components.Input.error.validation.required": "ערך זה נדרש.",