@strapi/admin 4.2.0-alpha.5 → 4.2.0-alpha.8

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
@@ -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/translations/en.json

@@ -58,6 +58,21 @@
   "Auth.privacy-policy-agreement.policy": "privacy policy",
   "Auth.privacy-policy-agreement.terms": "terms",
   "Auth.reset-password.title": "Reset password",
+  "admin.pages.MarketPlacePage.helmet": "Marketplace - Plugins",
+  "admin.pages.MarketPlacePage.title": "Marketplace",
+  "admin.pages.MarketPlacePage.subtitle": "Get more out of Strapi",
+  "admin.pages.MarketPlacePage.plugin.info.text": "Learn more",
+  "admin.pages.MarketPlacePage.plugin.info.label": "Learn more about {pluginName}",
+  "admin.pages.MarketPlacePage.plugin.copy": "Copy install command",
+  "admin.pages.MarketPlacePage.plugin.copy.success": "Install command ready to be pasted in your terminal",
+  "admin.pages.MarketPlacePage.plugin.installed": "Installed",
+  "admin.pages.MarketPlacePage.plugin.info": "Learn more",
+  "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",
+  "admin.pages.MarketPlacePage.plugin.tooltip.verified": "Plugin verified by Strapi",
+  "admin.pages.MarketPlacePage.search.placeholder": "Search for a plugin",
+  "admin.pages.MarketPlacePage.search.clear": "Clear the plugin search",
+  "admin.pages.MarketPlacePage.search.empty": "No result for \"{target}\"",
+  "admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi": "Made by Strapi",
   "Content Manager": "Content Manager",
   "Content Type Builder": "Content-Types Builder",
   "Documentation": "Documentation",
@@ -133,10 +148,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",
@@ -227,18 +245,6 @@
   "Users.components.List.empty": "There is no users...",
   "Users.components.List.empty.withFilters": "There is no users with the applied filters...",
   "Users.components.List.empty.withSearch": "There is no users corresponding to the search ({search})...",
-  "admin.pages.MarketPlacePage.blog.link": "Read our blog post",
-  "admin.pages.MarketPlacePage.coming-soon.1": "A new way to make Strapi awesome.",
-  "admin.pages.MarketPlacePage.coming-soon.2": "Coming soon.",
-  "admin.pages.MarketPlacePage.content.subtitle": "The new marketplace will help you get more out of Strapi. We are working hard to offer the best experience to discover and install plugins.",
-  "admin.pages.MarketPlacePage.content.subtitle.published": "The web marketplace helps you get the most of Strapi. In addition, we are working hard to offer the best experience to discover and install plugins, directly from the app.",
-  "admin.pages.MarketPlacePage.helmet": "Marketplace - Plugins",
-  "admin.pages.MarketPlacePage.illustration": "marketplace illustration",
-  "admin.pages.MarketPlacePage.market.link": "Visit the web marketplace",
-  "admin.pages.MarketPlacePage.published": "Finally here.",
-  "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",
-  "admin.pages.MarketPlacePage.subtitle": "Get more out of Strapi",
-  "admin.pages.MarketPlacePage.title": "Marketplace",
   "anErrorOccurred": "Woops! Something went wrong. Please, try again.",
   "app.components.GuidedTour.skip": "Skip the tour",
   "app.components.GuidedTour.title": "3 steps to get started",
@@ -701,4 +707,4 @@
   "request.error.model.unknown": "This model doesn't exist",
   "skipToContent": "Skip to content",
   "submit": "Submit"
-}
+}