@strapi/admin 4.1.5 → 4.1.6

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

@@ -9,12 +9,13 @@ import {
   useNotification,
   useOverlayBlocker,
   auth,
+  useTracking,
 } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { Formik } from 'formik';
+import upperFirst from 'lodash/upperFirst';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import pick from 'lodash/pick';
-import omit from 'lodash/omit';
 import { Helmet } from 'react-helmet';
 import { Main } from '@strapi/design-system/Main';
 import { Typography } from '@strapi/design-system/Typography';
@@ -31,10 +32,15 @@ import Eye from '@strapi/icons/Eye';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Check from '@strapi/icons/Check';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
+import { useThemeToggle } from '../../hooks';
 import { fetchUser, putUser } from './utils/api';
 import schema from './utils/schema';
 import { getFullName } from '../../utils';
 
+const DocumentationLink = styled.a`
+  color: ${({ theme }) => theme.colors.primary600};
+`;
+
 const PasswordInput = styled(TextInput)`
   ::-ms-reveal {
     display: none;
@@ -59,9 +65,11 @@ const ProfilePage = () => {
   const { setUserDisplayName } = useAppInfos();
   const queryClient = useQueryClient();
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const { notifyStatus } = useNotifyAT();
+  const { currentTheme, themes: allApplicationThemes, onChangeTheme } = useThemeToggle();
   useFocusWhenNavigate();
 
   const { status, data } = useQuery('user', () => fetchUser(), {
@@ -83,14 +91,18 @@ const ProfilePage = () => {
 
   const isLoading = status !== 'success';
 
-  const submitMutation = useMutation(body => putUser(omit(body, 'confirmPassword')), {
+  const submitMutation = useMutation(body => putUser(body), {
     onSuccess: async data => {
       await queryClient.invalidateQueries('user');
 
-      auth.setUserInfo(data);
+      auth.setUserInfo(
+        pick(data, ['email', 'firstname', 'lastname', 'username', 'preferedLanguage'])
+      );
       const userDisplayName = data.username || getFullName(data.firstname, data.lastname);
       setUserDisplayName(userDisplayName);
       changeLocale(data.preferedLanguage);
+      onChangeTheme(data.currentTheme);
+      trackUsage('didChangeMode', { newMode: data.currentTheme });
 
       toggleNotification({
         type: 'success',
@@ -128,9 +140,16 @@ const ProfilePage = () => {
     );
   };
 
-  const fieldsToPick = ['email', 'firstname', 'lastname', 'username', 'preferedLanguage'];
+  const fieldsToPick = [
+    'currentTheme',
+    'email',
+    'firstname',
+    'lastname',
+    'username',
+    'preferedLanguage',
+  ];
 
-  const initialData = pick(data, fieldsToPick);
+  const initialData = pick({ ...data, currentTheme }, fieldsToPick);
 
   if (isLoading) {
     return (
@@ -154,6 +173,10 @@ const ProfilePage = () => {
     );
   }
 
+  const themesToDisplay = Object.keys(allApplicationThemes).filter(
+    themeName => allApplicationThemes[themeName]
+  );
+
   return (
     <Main aria-busy={isSubmittingForm}>
       <Helmet
@@ -176,7 +199,7 @@ const ProfilePage = () => {
                 title={data.username || getFullName(data.firstname, data.lastname)}
                 primaryAction={
                   <Button startIcon={<Check />} loading={isSubmitting} type="submit">
-                    {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                    {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>
                 }
               />
@@ -195,7 +218,7 @@ const ProfilePage = () => {
                       <Stack spacing={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
-                            id: 'Settings.profile.form.section.profile.title',
+                            id: 'global.profile',
                             defaultMessage: 'Profile',
                           })}
                         </Typography>
@@ -266,7 +289,7 @@ const ProfilePage = () => {
                       <Stack spacing={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
-                            id: 'Settings.profile.form.section.password.title',
+                            id: 'global.change-password',
                             defaultMessage: 'Change password',
                           })}
                         </Typography>
@@ -329,7 +352,7 @@ const ProfilePage = () => {
                               onChange={handleChange}
                               value={values.password || ''}
                               label={formatMessage({
-                                id: 'Auth.form.password.label',
+                                id: 'global.password',
                                 defaultMessage: 'Password',
                               })}
                               name="password"
@@ -424,20 +447,20 @@ const ProfilePage = () => {
                                 id:
                                   'Settings.profile.form.section.experience.interfaceLanguageHelp',
                                 defaultMessage:
-                                  'Selection will change the interface language only for you. Please refer to this {documentation} to make other languages available for your team.',
+                                  'Preference changes will apply only to you. More information is available {here}.',
                               },
                               {
-                                documentation: (
-                                  <a
+                                here: (
+                                  <DocumentationLink
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
                                   >
                                     {formatMessage({
                                       id: 'Settings.profile.form.section.experience.documentation',
-                                      defaultMessage: 'documentation',
+                                      defaultMessage: 'here',
                                     })}
-                                  </a>
+                                  </DocumentationLink>
                                 ),
                               }
                             )}
@@ -451,7 +474,7 @@ const ProfilePage = () => {
                                 defaultMessage: 'Interface language',
                               })}
                               placeholder={formatMessage({
-                                id: 'components.Select.placeholder',
+                                id: 'global.select',
                                 defaultMessage: 'Select',
                               })}
                               hint={formatMessage({
@@ -487,6 +510,47 @@ const ProfilePage = () => {
                               })}
                             </Select>
                           </GridItem>
+                          <GridItem s={12} col={6}>
+                            <Select
+                              label={formatMessage({
+                                id: 'Settings.profile.form.section.experience.mode.label',
+                                defaultMessage: 'Interface mode',
+                              })}
+                              placeholder={formatMessage({
+                                id: 'components.Select.placeholder',
+                                defaultMessage: 'Select',
+                              })}
+                              hint={formatMessage({
+                                id: 'Settings.profile.form.section.experience.mode.hint',
+                                defaultMessage: 'Displays your interface in the chosen mode.',
+                              })}
+                              value={values.currentTheme}
+                              onChange={e => {
+                                handleChange({
+                                  target: { name: 'currentTheme', value: e },
+                                });
+                              }}
+                            >
+                              {themesToDisplay.map(theme => {
+                                const label = formatMessage(
+                                  {
+                                    id:
+                                      'Settings.profile.form.section.experience.mode.option-label',
+                                    defaultMessage: '{name} mode',
+                                  },
+                                  {
+                                    name: upperFirst(theme),
+                                  }
+                                );
+
+                                return (
+                                  <Option value={theme} key={theme}>
+                                    {label}
+                                  </Option>
+                                );
+                              })}
+                            </Select>
+                          </GridItem>
                         </Grid>
                       </Stack>
                     </Box>

package/admin/src/pages/ProfilePage/utils/api.js

@@ -1,3 +1,4 @@
+import omit from 'lodash/omit';
 import { axiosInstance } from '../../../core/utils';
 
 const fetchUser = async () => {
@@ -7,9 +8,10 @@ const fetchUser = async () => {
 };
 
 const putUser = async body => {
-  const { data } = await axiosInstance.put('/admin/users/me', body);
+  const dataToSend = omit(body, ['confirmPassword', 'currentTheme']);
+  const { data } = await axiosInstance.put('/admin/users/me', dataToSend);
 
-  return data.data;
+  return { ...data.data, currentTheme: body.currentTheme };
 };
 
 export { fetchUser, putUser };

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

@@ -30,7 +30,7 @@ const SettingsNav = ({ menu }) => {
   });
 
   const label = formatMessage({
-    id: 'app.components.LeftMenuLinkContainer.settings',
+    id: 'global.settings',
     defaultMessage: 'Settings',
   });
 

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

@@ -47,7 +47,7 @@ function SettingsPage() {
   }
 
   const settingTitle = formatMessage({
-    id: 'app.components.LeftMenuLinkContainer.settings',
+    id: 'global.settings',
     defaultMessage: 'Settings',
   });
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/LoadingView/index.js

@@ -21,7 +21,7 @@ const LoadingView = ({ apiTokenName }) => {
       <HeaderLayout
         primaryAction={
           <Button disabled startIcon={<Check />} type="button" size="L">
-            {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+            {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
           </Button>
         }
         title={

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -159,7 +159,7 @@ const ApiTokenCreateView = () => {
                     size="L"
                   >
                     {formatMessage({
-                      id: 'app.components.Button.save',
+                      id: 'global.save',
                       defaultMessage: 'Save',
                     })}
                   </Button>
@@ -167,7 +167,7 @@ const ApiTokenCreateView = () => {
                 navigationAction={
                   <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
                     {formatMessage({
-                      id: 'app.components.go-back',
+                      id: 'global.back',
                       defaultMessage: 'Back',
                     })}
                   </Link>
@@ -188,7 +188,7 @@ const ApiTokenCreateView = () => {
                     <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
-                          id: 'Settings.apiTokens.details',
+                          id: 'global.details',
                           defaultMessage: 'Details',
                         })}
                       </Typography>

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DeleteButton/index.js

@@ -19,7 +19,7 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
         }}
         label={formatMessage(
           {
-            id: 'app.component.table.delete',
+            id: 'global.delete-target',
             defaultMessage: 'Delete {target}',
           },
           { target: `${tokenName}` }

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -45,7 +45,7 @@ const ApplicationInfosPage = () => {
             <Stack spacing={5}>
               <Typography variant="delta" as="h3">
                 {formatMessage({
-                  id: 'Settings.application.details',
+                  id: 'global.details',
                   defaultMessage: 'Details',
                 })}
               </Typography>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsButton/index.js

@@ -31,7 +31,7 @@ const ConditionsButton = ({ onClick, className, hasConditions, variant }) => {
     <Wrapper hasConditions={hasConditions} className={className}>
       <Button variant={variant} startIcon={<Cog />} onClick={onClick}>
         {formatMessage({
-          id: 'app.components.LeftMenuLinkContainer.settings',
+          id: 'global.settings',
           defaultMessage: 'Settings',
         })}
       </Button>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js

@@ -24,7 +24,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                   {role
                     ? role.name
                     : formatMessage({
-                        id: 'Settings.roles.form.title',
+                        id: 'global.details',
                         defaultMessage: 'Details',
                       })}
                 </Typography>
@@ -58,7 +58,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                 name="name"
                 error={errors.name && formatMessage({ id: errors.name })}
                 label={formatMessage({
-                  id: 'Settings.roles.form.input.name',
+                  id: 'global.name',
                   defaultMessage: 'Name',
                 })}
                 onChange={onChange}
@@ -70,7 +70,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
               <Textarea
                 disabled={disabled}
                 label={formatMessage({
-                  id: 'Settings.roles.form.input.description',
+                  id: 'global.description',
                   defaultMessage: 'Description',
                 })}
                 name="description"

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -117,7 +117,7 @@ const EditPage = () => {
                       size="L"
                     >
                       {formatMessage({
-                        id: 'app.components.Button.save',
+                        id: 'global.save',
                         defaultMessage: 'Save',
                       })}
                     </Button>
@@ -134,7 +134,7 @@ const EditPage = () => {
                 navigationAction={
                   <Link startIcon={<ArrowLeft />} to="/settings/roles">
                     {formatMessage({
-                      id: 'app.components.go-back',
+                      id: 'global.back',
                       defaultMessage: 'Back',
                     })}
                   </Link>

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js

@@ -69,7 +69,7 @@ const useRoleActions = () => {
       },
       {
         onClick: handleToggle,
-        label: formatMessage({ id: 'app.utils.delete', defaultMessage: 'Delete' }),
+        label: formatMessage({ id: 'global.delete', defaultMessage: 'Delete' }),
         icon: <Trash />,
       },
     ],
@@ -114,7 +114,7 @@ const RoleListPage = () => {
           </Button>
         }
         title={formatMessage({
-          id: 'Settings.roles.title',
+          id: 'global.roles',
           defaultMessage: 'roles',
         })}
         subtitle={formatMessage({
@@ -140,7 +140,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.name',
+                    id: 'global.name',
                     defaultMessage: 'Name',
                   })}
                 </Typography>
@@ -148,7 +148,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.description',
+                    id: 'global.description',
                     defaultMessage: 'Description',
                   })}
                 </Typography>
@@ -156,7 +156,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.users',
+                    id: 'global.users',
                     defaultMessage: 'Users',
                   })}
                 </Typography>
@@ -164,7 +164,7 @@ const RoleListPage = () => {
               <Th>
                 <VisuallyHidden>
                   {formatMessage({
-                    id: 'Settings.roles.list.header.actions',
+                    id: 'global.actions',
                     defaultMessage: 'Actions',
                   })}
                 </VisuallyHidden>

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -142,14 +142,14 @@ const EditPage = ({ canUpdate }) => {
         <HeaderLayout
           primaryAction={
             <Button disabled startIcon={<Check />} type="button" size="L">
-              {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+              {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
             </Button>
           }
           title={title}
           navigationAction={
             <Link startIcon={<ArrowLeft />} to="/settings/users?pageSize=10&page=1&sort=firstname">
               {formatMessage({
-                id: 'app.components.go-back',
+                id: 'global.back',
                 defaultMessage: 'Back',
               })}
             </Link>
@@ -183,7 +183,7 @@ const EditPage = ({ canUpdate }) => {
                     type="submit"
                     size="L"
                   >
-                    {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                    {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>
                 }
                 title={title}
@@ -193,7 +193,7 @@ const EditPage = ({ canUpdate }) => {
                     to="/settings/users?pageSize=10&page=1&sort=firstname"
                   >
                     {formatMessage({
-                      id: 'app.components.go-back',
+                      id: 'global.back',
                       defaultMessage: 'Back',
                     })}
                   </Link>
@@ -253,7 +253,7 @@ const EditPage = ({ canUpdate }) => {
                     <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
-                          id: 'app.components.Users.ModalCreateBody.block-title.login',
+                          id: 'global.roles',
                           defaultMessage: "User's role",
                         })}
                       </Typography>

package/admin/src/pages/SettingsPage/pages/Users/EditPage/utils/layout.js

@@ -72,7 +72,7 @@ const layout = [
   [
     {
       intlLabel: {
-        id: 'Auth.form.password.label',
+        id: 'global.password',
         defaultMessage: 'Password',
       },
       name: 'password',

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -89,7 +89,7 @@ const TableRows = ({
                       <IconButton
                         onClick={() => onClickDelete(data.id)}
                         label={formatMessage(
-                          { id: 'app.component.table.delete', defaultMessage: 'Delete {target}' },
+                          { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
                           { target: getFullName(data.firstname, data.lastname) }
                         )}
                         noBorder

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -146,7 +146,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                   <Box>
                     <Typography variant="beta" as="h2">
                       {formatMessage({
-                        id: 'app.components.Users.ModalCreateBody.block-title.login',
+                        id: 'global.roles',
                         defaultMessage: "User's role",
                       })}
                     </Typography>

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/stepper.js

@@ -8,7 +8,7 @@ const stepper = {
     next: 'magic-link',
   },
   'magic-link': {
-    buttonSubmitLabel: { id: 'form.button.finish', defaultMessage: 'Finish' },
+    buttonSubmitLabel: { id: 'global.finish', defaultMessage: 'Finish' },
     isDisabled: true,
     next: null,
   },

package/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -39,7 +39,7 @@ const ListPage = () => {
   const queryName = ['users', search];
 
   const title = formatMessage({
-    id: 'Settings.permissions.users.listview.header.title',
+    id: 'global.users',
     defaultMessage: 'Users',
   });
 

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js

@@ -68,7 +68,7 @@ const WebhookForm = ({
                 </Button>
                 <Button startIcon={<Check />} onClick={handleSubmit} type="submit" size="L">
                   {formatMessage({
-                    id: 'app.components.Button.save',
+                    id: 'global.save',
                     defaultMessage: 'Save',
                   })}
                 </Button>
@@ -85,7 +85,7 @@ const WebhookForm = ({
             navigationAction={
               <Link startIcon={<ArrowLeft />} to="/settings/webhooks">
                 {formatMessage({
-                  id: 'app.components.go-back',
+                  id: 'global.back',
                   defaultMessage: 'Back',
                 })}
               </Link>
@@ -111,7 +111,7 @@ const WebhookForm = ({
                         name="name"
                         error={errors.name && formatMessage({ id: errors.name })}
                         label={formatMessage({
-                          id: 'Settings.webhooks.form.name',
+                          id: 'global.name',
                           defaultMessage: 'Name',
                         })}
                         required

package/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js

@@ -282,7 +282,7 @@ const ListView = () => {
                   variant="danger-light"
                 >
                   {formatMessage({
-                    id: 'Settings.webhooks.events.delete',
+                    id: 'global.delete',
                     defaultMessage: 'Delete',
                   })}
                 </Button>
@@ -318,7 +318,7 @@ const ListView = () => {
                       <Th>
                         <BaseCheckbox
                           aria-label={formatMessage({
-                            id: 'Settings.webhooks.list.all-entries.select',
+                            id: 'global.select-all-entries',
                             defaultMessage: 'Select all entries',
                           })}
                           indeterminate={
@@ -331,7 +331,7 @@ const ListView = () => {
                       <Th width="20%">
                         <Typography variant="sigma" textColor="neutral600">
                           {formatMessage({
-                            id: 'Settings.webhooks.form.name',
+                            id: 'global.name',
                             defaultMessage: 'Name',
                           })}
                         </Typography>
@@ -374,7 +374,7 @@ const ListView = () => {
                         <Td {...stopPropagation}>
                           <BaseCheckbox
                             aria-label={`${formatMessage({
-                              id: 'Settings.webhooks.list.select',
+                              id: 'global.select',
                               defaultMessage: 'Select',
                             })} ${webhook.name}`}
                             value={webhooksToDelete?.includes(webhook.id)}
@@ -395,11 +395,11 @@ const ListView = () => {
                           <Flex {...stopPropagation}>
                             <Switch
                               onLabel={formatMessage({
-                                id: 'Settings.webhooks.enabled',
+                                id: 'global.enabled',
                                 defaultMessage: 'Enabled',
                               })}
                               offLabel={formatMessage({
-                                id: 'Settings.webhooks.disabled',
+                                id: 'global.disabled',
                                 defaultMessage: 'Disabled',
                               })}
                               label={`${webhook.name} ${formatMessage({
@@ -431,7 +431,7 @@ const ListView = () => {
                               <IconButton
                                 onClick={() => handleDeleteClick(webhook.id)}
                                 label={formatMessage({
-                                  id: 'Settings.webhooks.events.delete',
+                                  id: 'global.delete',
                                   defaultMessage: 'Delete',
                                 })}
                                 icon={<Trash />}

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

@@ -41,7 +41,7 @@ export const options = [
   },
   {
     intlLabel: {
-      id: 'Usecase.content-manager',
+      id: 'global.content-manager',
       defaultMessage: 'Content Manager',
     },
     value: 'content_manager',
@@ -150,7 +150,7 @@ const UseCasePage = () => {
                 />
               )}
               <Button type="submit" size="L" fullWidth disabled={!role}>
-                {formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })}
+                {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
               </Button>
             </Stack>
           </form>