Merge pull request #15895 from strapi/data-transfer/limit-token-name-length

No length limit on the name for the API token or transfer token

packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js

@@ -69,6 +69,7 @@ const FormHead = ({
           })}
         </Link>
       }
+      ellipsis
     />
   );
 };

packages/core/admin/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -63,8 +63,8 @@ const Table = ({
                 condition: canUpdate,
               })}
             >
-              <Td>
+              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" fontWeight="bold">
+                <Typography textColor="neutral800" fontWeight="bold" ellipsis>
                   {token.name}
                 </Typography>
               </Td>

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/tests/__snapshots__/index.test.js.snap

@@ -275,6 +275,10 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: #32324d;
 }
 
@@ -1824,6 +1828,10 @@ exports[`ADMIN | Pages | API TOKENS | EditView renders and matches the snapshot
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: #32324d;
 }
 

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js

@@ -2,7 +2,7 @@ import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
-  name: yup.string(translatedErrors.string).required(translatedErrors.required),
+  name: yup.string(translatedErrors.string).max(100).required(translatedErrors.required),
   type: yup
     .string(translatedErrors.string)
     .oneOf(['read-only', 'full-access', 'custom'])

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/tests/index.test.js

@@ -158,7 +158,7 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         cursor: pointer;
       }
 
-      .c36 {
+      .c35 {
         max-width: 15.625rem;
       }
 
@@ -255,9 +255,13 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
         color: #666687;
       }
 
-      .c35 {
+      .c36 {
         font-size: 0.875rem;
         line-height: 1.43;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-weight: 600;
         color: #32324d;
       }
@@ -919,19 +923,19 @@ describe('ADMIN | Pages | API TOKENS | ListPage', () => {
                     >
                       <td
                         aria-colindex="1"
-                        class="c25"
+                        class="c35 c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c35"
+                          class="c5 c36"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c36 c25"
+                        class="c35 c25"
                         role="gridcell"
                         tabindex="-1"
                       >

packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/tests/__snapshots__/index.test.js.snap

@@ -148,6 +148,10 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: #32324d;
 }
 
@@ -1121,6 +1125,10 @@ exports[`ADMIN | Pages | TRANSFER TOKENS | EditView renders and matches the snap
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: #32324d;
 }
 

packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/utils/schema.js

@@ -2,7 +2,7 @@ import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
-  name: yup.string(translatedErrors.string).required(translatedErrors.required),
+  name: yup.string(translatedErrors.string).max(100).required(translatedErrors.required),
   description: yup.string().nullable(),
   lifespan: yup.number().integer().min(0).nullable().defined(translatedErrors.required),
 });

packages/core/admin/admin/src/pages/SettingsPage/pages/TransferTokens/ListView/tests/index.test.js

@@ -158,7 +158,7 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         cursor: pointer;
       }
 
-      .c36 {
+      .c35 {
         max-width: 15.625rem;
       }
 
@@ -255,9 +255,13 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
         color: #666687;
       }
 
-      .c35 {
+      .c36 {
         font-size: 0.875rem;
         line-height: 1.43;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-weight: 600;
         color: #32324d;
       }
@@ -919,19 +923,19 @@ describe('ADMIN | Pages | TRANSFER TOKENS | ListPage', () => {
                     >
                       <td
                         aria-colindex="1"
-                        class="c25"
+                        class="c35 c25"
                         role="gridcell"
                         tabindex="-1"
                       >
                         <span
-                          class="c5 c35"
+                          class="c5 c36"
                         >
                           My super token
                         </span>
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c36 c25"
+                        class="c35 c25"
                         role="gridcell"
                         tabindex="-1"
                       >

packages/core/helper-plugin/lib/src/components/DateTimePicker/DateTimePicker.stories.mdx

@@ -4,20 +4,20 @@ import { useState } from 'react';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import DateTimePicker from './index';
 
-<Meta 
+<Meta
-  title="components/DateTimePicker" 
+  title="components/DateTimePicker"
   component={DateTimePicker}
   argTypes={{
     label: {
-      control: { 
+      control: {
-        type: 'text'
+        type: 'text',
-      }
+      },
     },
     value: {
       control: {
-        type: 'date'
+        type: 'date',
-      }
+      },
-    }
+    },
   }}
 />
 
@@ -37,7 +37,7 @@ Description...
         <DateTimePicker
           onClear={() => setValue(undefined)}
           value={value}
-          onChange={e => setValue(e)}
+          onChange={(e) => setValue(e)}
           label="Date time picker"
           hint="This is a super description"
         />
@@ -53,6 +53,7 @@ Description...
 <Canvas>
   <Story name="error">
     <DateTimePicker
+      label="Date time picker"
       hint="This is a super description"
       error="Very very very very very very very long error"
     />

packages/core/helper-plugin/lib/src/components/FilterPopoverURLQuery/FilterPopoverURLQuery.stories.mdx

@@ -4,6 +4,7 @@ import { useEffect, useState, useRef } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
 import { Button, Box, Main, Flex } from '@strapi/design-system';
 import useQueryParams from '../../hooks/useQueryParams';
+import useTracking from '../../hooks/useTracking';
 import FilterListURLQuery from '../FilterListURLQuery';
 import FilterPopoverURLQuery from './index';
 
@@ -51,6 +52,7 @@ import { FilterListURLQuery } from '@strapi/helper-plugin';
           metadatas: { label: 'city' },
         },
       ];
+      const { trackUsage } = useTracking();
       return (
         <Main>
           <Flex direction="column" alignItems="stretch" gap={6}>