@strapi/admin 4.1.3 → 4.2.0-alpha.0

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
@@ -182,7 +205,7 @@ const ProfilePage = () => {
               />
               <Box paddingBottom={10}>
                 <ContentLayout>
-                  <Stack size={6}>
+                  <Stack spacing={6}>
                     <Box
                       background="neutral0"
                       hasRadius
@@ -192,7 +215,7 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack size={4}>
+                      <Stack spacing={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'Settings.profile.form.section.profile.title',
@@ -263,7 +286,7 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack size={4}>
+                      <Stack spacing={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'Settings.profile.form.section.password.title',
@@ -410,8 +433,8 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack size={4}>
-                        <Stack size={1}>
+                      <Stack spacing={4}>
+                        <Stack spacing={1}>
                           <Typography variant="delta" as="h2">
                             {formatMessage({
                               id: 'Settings.profile.form.section.experience.title',
@@ -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>
                                 ),
                               }
                             )}
@@ -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

@@ -29,7 +29,10 @@ const SettingsNav = ({ menu }) => {
     };
   });
 
-  const label = formatMessage({ id: 'app.components.LeftMenuLinkContainer.settings' });
+  const label = formatMessage({
+    id: 'app.components.LeftMenuLinkContainer.settings',
+    defaultMessage: 'Settings',
+  });
 
   return (
     <SubNav ariaLabel={label}>

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

@@ -174,7 +174,7 @@ const ApiTokenCreateView = () => {
                 }
               />
               <ContentLayout>
-                <Stack size={6}>
+                <Stack spacing={6}>
                   {Boolean(apiToken?.name) && <HeaderContentBox apiToken={apiToken.accessKey} />}
                   <Box
                     background="neutral0"
@@ -185,7 +185,7 @@ const ApiTokenCreateView = () => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'Settings.apiTokens.details',

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

@@ -42,7 +42,7 @@ const ApplicationInfosPage = () => {
             paddingRight={6}
             paddingLeft={6}
           >
-            <Stack size={5}>
+            <Stack spacing={5}>
               <Typography variant="delta" as="h3">
                 {formatMessage({
                   id: 'Settings.application.details',

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

@@ -89,7 +89,7 @@ const ConditionsModal = ({ actions, headerBreadCrumbs, isFormDisabled, onClosed,
         </Breadcrumbs>
       </ModalHeader>
       <Box padding={8}>
-        <Stack size={6}>
+        <Stack spacing={6}>
           <Typography variant="beta" as="h2">
             {formatMessage({
               id: 'Settings.permissions.conditions.define-conditions',

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

@@ -33,10 +33,10 @@ const GlobalActions = ({ actions, isFormDisabled, kind }) => {
 
   return (
     <Box paddingBottom={4} paddingTop={6} style={{ paddingLeft: firstRowWidth }}>
-      <Stack horizontal size={0}>
+      <Stack horizontal spacing={0}>
         {displayedActions.map(({ label, actionId }) => {
           return (
-            <CenteredStack key={actionId} size={3}>
+            <CenteredStack key={actionId} spacing={3}>
               <Typography variant="sigma" textColor="neutral500">
                 {formatMessage({
                   id: `Settings.roles.form.permissions.${label.toLowerCase()}`,

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

@@ -30,7 +30,7 @@ const PermissionRow = ({
   return (
     <Accordion
       expanded={isOpen}
-      toggle={handleClick}
+      onToggle={handleClick}
       id={`accordion-${name}`}
       variant={isWhite ? 'primary' : 'secondary'}
     >

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

@@ -16,7 +16,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
   return (
     <>
       <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
-        <Stack size={4}>
+        <Stack spacing={4}>
           <Flex justifyContent="space-between">
             <Box>
               <Box>

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

@@ -109,7 +109,7 @@ const EditPage = () => {
             <>
               <HeaderLayout
                 primaryAction={
-                  <Stack horizontal size={2}>
+                  <Stack horizontal spacing={2}>
                     <Button
                       disabled={role.code === 'strapi-super-admin'}
                       onClick={handleSubmit}
@@ -141,7 +141,7 @@ const EditPage = () => {
                 }
               />
               <ContentLayout>
-                <Stack size={6}>
+                <Stack spacing={6}>
                   <RoleForm
                     isLoading={isRoleLoading}
                     disabled={isFormDisabled}

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

@@ -205,7 +205,7 @@ const EditPage = ({ canUpdate }) => {
                     <MagicLink registrationToken={data.registrationToken} />
                   </Box>
                 )}
-                <Stack size={7}>
+                <Stack spacing={7}>
                   <Box
                     background="neutral0"
                     hasRadius
@@ -215,7 +215,7 @@ const EditPage = ({ canUpdate }) => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'app.components.Users.ModalCreateBody.block-title.details',
@@ -250,7 +250,7 @@ const EditPage = ({ canUpdate }) => {
                     paddingLeft={7}
                     paddingRight={7}
                   >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
                           id: 'app.components.Users.ModalCreateBody.block-title.login',

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

@@ -112,7 +112,7 @@ const ModalForm = ({ queryName, onToggle }) => {
           return (
             <Form>
               <ModalBody>
-                <Stack size={6}>
+                <Stack spacing={6}>
                   {currentStep !== 'create' && <MagicLink registrationToken={registrationToken} />}
                   <Box>
                     <Typography variant="beta" as="h2">
@@ -122,7 +122,7 @@ const ModalForm = ({ queryName, onToggle }) => {
                       })}
                     </Typography>
                     <Box paddingTop={4}>
-                      <Stack size={1}>
+                      <Stack spacing={1}>
                         <Grid gap={5}>
                           {layout.map(row => {
                             return row.map(input => {

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

@@ -99,7 +99,7 @@ const EventInput = ({ isDraftAndPublish }) => {
   };
 
   return (
-    <Stack size={1}>
+    <Stack spacing={1}>
       <FieldLabel>
         {formatMessage({
           id: 'Settings.webhooks.form.events',

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

@@ -17,7 +17,7 @@ const HeadersInput = () => {
   const { values, errors } = useFormikContext();
 
   return (
-    <Stack size={1}>
+    <Stack spacing={1}>
       <FieldLabel>
         {formatMessage({
           id: 'Settings.webhooks.form.headers',

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

@@ -29,7 +29,7 @@ const Status = ({ isPending, statusCode }) => {
 
   if (isPending) {
     return (
-      <Stack horizontal size={2} style={{ alignItems: 'center' }}>
+      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
         <Icon as={Loader} />
         <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.pending', defaultMessage: 'pending' })}
@@ -40,7 +40,7 @@ const Status = ({ isPending, statusCode }) => {
 
   if (statusCode >= 200 && statusCode < 300) {
     return (
-      <Stack horizontal size={2} style={{ alignItems: 'center' }}>
+      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
         <Icon as={Check} color="success700" />
         <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.success', defaultMessage: 'success' })}
@@ -51,7 +51,7 @@ const Status = ({ isPending, statusCode }) => {
 
   if (statusCode >= 300) {
     return (
-      <Stack horizontal size={2} style={{ alignItems: 'center' }}>
+      <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
         <Icon as={Cross} color="danger700" />
         <Typography>
           {formatMessage({ id: 'Settings.error', defaultMessage: 'error' })} {statusCode}
@@ -115,7 +115,7 @@ const CancelButton = ({ onCancel }) => {
   return (
     <Flex justifyContent="flex-end">
       <button onClick={onCancel} type="button">
-        <Stack horizontal size={2} style={{ alignItems: 'center' }}>
+        <Stack horizontal spacing={2} style={{ alignItems: 'center' }}>
           <Typography textColor="neutral400">
             {formatMessage({ id: 'Settings.webhooks.trigger.cancel', defaultMessage: 'cancel' })}
           </Typography>

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

@@ -50,7 +50,7 @@ const WebhookForm = ({
         <Form noValidate>
           <HeaderLayout
             primaryAction={
-              <Stack horizontal size={2}>
+              <Stack horizontal spacing={2}>
                 <Button
                   onClick={() => {
                     triggerWebhook();
@@ -92,7 +92,7 @@ const WebhookForm = ({
             }
           />
           <ContentLayout>
-            <Stack size={4}>
+            <Stack spacing={4}>
               {showTriggerResponse && (
                 <div className="trigger-wrapper">
                   <TriggerContainer
@@ -103,7 +103,7 @@ const WebhookForm = ({
                 </div>
               )}
               <Box background="neutral0" padding={8} shadow="filterShadow" hasRadius>
-                <Stack size={6}>
+                <Stack spacing={6}>
                   <Grid gap={6}>
                     <GridItem col={6}>
                       <Field

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

@@ -413,7 +413,7 @@ const ListView = () => {
                           </Flex>
                         </Td>
                         <Td>
-                          <Stack horizontal size={1} {...stopPropagation}>
+                          <Stack horizontal spacing={1} {...stopPropagation}>
                             {canUpdate && (
                               <IconButton
                                 onClick={() => {

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

@@ -121,7 +121,7 @@ const UseCasePage = () => {
                 </TypographyCenter>
               </Box>
             </Flex>
-            <Stack size={6}>
+            <Stack spacing={6}>
               <Select
                 id="usecase"
                 data-testid="usecase"

package/admin/src/translations/en.json

@@ -133,10 +133,13 @@
   "Settings.permissions.users.tabs.label": "Tabs Permissions",
   "Settings.profile.form.notify.data.loaded": "Your profile data has been loaded",
   "Settings.profile.form.section.experience.clear.select": "Clear the interface language selected",
-  "Settings.profile.form.section.experience.documentation": "documentation",
+  "Settings.profile.form.section.experience.here": "here",
   "Settings.profile.form.section.experience.interfaceLanguage": "Interface language",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "This will only display your own interface in the chosen language.",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Selection will change the interface language only for you. Please refer to this {documentation} to make other languages available for your team.",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Preference changes will apply only to you. More information is available {here}.",
+  "Settings.profile.form.section.experience.mode.label": "Interface mode",
+  "Settings.profile.form.section.experience.mode.hint": "Displays your interface in the chosen mode.",
+  "Settings.profile.form.section.experience.mode.option-label": "{name} mode",
   "Settings.profile.form.section.experience.title": "Experience",
   "Settings.profile.form.section.helmet.title": "User profile",
   "Settings.profile.form.section.password.title": "Change password",