@strapi/admin 4.1.6-alpha.0 → 4.1.7

package/admin/src/hooks/useMenu/reducer.js

@@ -10,7 +10,7 @@ const initialState = {
     {
       icon: Puzzle,
       intlLabel: {
-        id: 'app.components.LeftMenuLinkContainer.listPlugins',
+        id: 'global.plugins',
         defaultMessage: 'Plugins',
       },
       to: '/list-plugins',
@@ -19,7 +19,7 @@ const initialState = {
     {
       icon: ShoppingCart,
       intlLabel: {
-        id: 'app.components.LeftMenuLinkContainer.installNewPlugin',
+        id: 'global.marketplace',
         defaultMessage: 'Marketplace',
       },
       to: '/marketplace',
@@ -28,7 +28,7 @@ const initialState = {
     {
       icon: Cog,
       intlLabel: {
-        id: 'app.components.LeftMenuLinkContainer.settings',
+        id: 'global.settings',
         defaultMessage: 'Settings',
       },
       to: '/settings',

package/admin/src/hooks/useReleaseNotification/index.js

@@ -15,7 +15,7 @@ const useReleaseNotification = () => {
         link: {
           url: `https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`,
           label: {
-            id: 'notification.version.update.link',
+            id: 'global.see-more',
           },
         },
         blockTransition: true,

package/admin/src/hooks/useSettingsMenu/init.js

@@ -25,14 +25,14 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
       links: [
         {
-          intlLabel: { id: 'Settings.permissions.menu.link.roles.label', defaultMessage: 'Roles' },
+          intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
           to: '/settings/roles',
           id: 'roles',
           isDisplayed: false,
           permissions: adminPermissions.settings.roles.main,
         },
         {
-          intlLabel: { id: 'Settings.permissions.menu.link.users.label' },
+          intlLabel: { id: 'global.users' },
           // Init the search params directly
           to: '/settings/users?pageSize=10&page=1&sort=firstname',
           id: 'users',

package/admin/src/hooks/useThemeToggle/index.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ThemeToggleContext } from '../../contexts';
+
+const useThemeToggle = () => {
+  const context = useContext(ThemeToggleContext);
+
+  return context;
+};
+
+export default useThemeToggle;

package/admin/src/layouts/UnauthenticatedLayout/index.js

@@ -40,7 +40,7 @@ const UnauthenticatedLayout = ({ children }) => {
           <LocaleToggle />
         </Box>
       </Flex>
-      <Box paddingTop={11} paddingBottom={11}>
+      <Box paddingTop={2} paddingBottom={11}>
         {children}
       </Box>
     </div>

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

@@ -21,7 +21,7 @@ const Button = styled.button`
   box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   border-radius: 50%;
   svg {
-    color: ${({ theme }) => theme.colors.neutral0};
+    color: ${({ theme }) => theme.colors.buttonNeutral0};
   }
 `;
 
@@ -75,7 +75,7 @@ const Onboarding = () => {
     {
       icon: 'book',
       label: formatMessage({
-        id: 'app.components.LeftMenuFooter.documentation',
+        id: 'global.documentation',
         defaultMessage: 'Documentation',
       }),
       destination: 'https://docs.strapi.io',

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -107,7 +107,7 @@ const Login = ({ onSubmit, schema, children }) => {
                   onChange={handleChange}
                   value={values.password}
                   label={formatMessage({
-                    id: 'Auth.form.password.label',
+                    id: 'global.password',
                     defaultMessage: 'Password',
                   })}
                   name="password"

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -143,7 +143,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       <Typography as="h1" variant="alpha">
                         {formatMessage({
                           id: 'Auth.form.welcome.title',
-                          defaultMessage: 'Welcome!',
+                          defaultMessage: 'Welcome to Strapi!',
                         })}
                       </Typography>
                     </Box>
@@ -152,12 +152,12 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         {formatMessage({
                           id: 'Auth.form.register.subtitle',
                           defaultMessage:
-                            'Your credentials are only used to authenticate yourself on the admin panel. All saved data will be stored in your own database.',
+                            'Credentials are only used to authenticate in Strapi. All saved data will be stored in your database.',
                         })}
                       </Typography>
                     </CenteredBox>
                   </Column>
-                  <Stack spacing={7}>
+                  <Stack spacing={6}>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput
@@ -227,11 +227,11 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       hint={formatMessage({
                         id: 'Auth.form.password.hint',
                         defaultMessage:
-                          'Password must contain at least 8 characters, 1 uppercase, 1 lowercase and 1 number',
+                          'Must be at least 8 characters, 1 uppercase, 1 lowercase & 1 number',
                       })}
                       required
                       label={formatMessage({
-                        id: 'Auth.form.password.label',
+                        id: 'global.password',
                         defaultMessage: 'Password',
                       })}
                       type={passwordShown ? 'text' : 'password'}
@@ -284,7 +284,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         {
                           id: 'Auth.form.register.news.label',
                           defaultMessage:
-                            'Keep me updated about the new features and upcoming improvements (by doing this you accept the {terms} and the {policy}).',
+                            'Keep me updated about new features & upcoming improvements (by doing this you accept the {terms} and the {policy}).',
                         },
                         {
                           terms: (

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -53,7 +53,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   <Box paddingTop={6} paddingBottom={7}>
                     <Typography as="h1" variant="alpha">
                       {formatMessage({
-                        id: 'Auth.reset-password.title',
+                        id: 'global.reset-password',
                         defaultMessage: 'Reset password',
                       })}
                     </Typography>
@@ -114,7 +114,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                     })}
                     required
                     label={formatMessage({
-                      id: 'Auth.form.password.label',
+                      id: 'global.password',
                       defaultMessage: 'Password',
                     })}
                     type={passwordShown ? 'text' : 'password'}
@@ -161,7 +161,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   />
                   <Button fullwidth type="submit">
                     {formatMessage({
-                      id: 'Auth.form.button.reset-password',
+                      id: 'global.change-password',
                       defaultMessage: 'Change password',
                     })}
                   </Button>

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -24,7 +24,7 @@ const ContentBlocks = () => {
       >
         <ContentBox
           title={formatMessage({
-            id: 'app.components.BlockLink.documentation',
+            id: 'global.documentation',
             defaultMessage: 'Documentation',
           })}
           subtitle={formatMessage({

package/admin/src/pages/InstalledPluginsPage/Plugins.js

@@ -14,7 +14,7 @@ const Plugins = () => {
   useFocusWhenNavigate();
 
   const title = formatMessage({
-    id: 'app.components.ListPluginsPage.title',
+    id: 'global.plugins',
     defaultMessage: 'Plugins',
   });
 
@@ -61,7 +61,7 @@ const Plugins = () => {
                 <Th>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.roles.list.header.name',
+                      id: 'global.name',
                       defaultMessage: 'Name',
                     })}
                   </Typography>
@@ -69,7 +69,7 @@ const Plugins = () => {
                 <Th>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.roles.list.header.description',
+                      id: 'global.description',
                       defaultMessage: 'description',
                     })}
                   </Typography>

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

@@ -8,7 +8,7 @@ import Plugins from './Plugins';
 const InstalledPluginsPage = () => {
   const { formatMessage } = useIntl();
   const title = formatMessage({
-    id: 'app.components.ListPluginsPage.title',
+    id: 'global.plugins',
     defaultMessage: 'Plugins',
   });
 

package/admin/src/pages/MarketplacePage/components/PluginCard/InstallPluginButton.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useNotification, useTracking } from '@strapi/helper-plugin';
+import { Box } from '@strapi/design-system/Box';
+import { Icon } from '@strapi/design-system/Icon';
+import { Typography } from '@strapi/design-system/Typography';
+import Check from '@strapi/icons/Check';
+import Duplicate from '@strapi/icons/Duplicate';
+import { Button } from '@strapi/design-system/Button';
+
+const InstallPluginButton = ({ isInstalled, isInDevelopmentMode, commandToCopy }) => {
+  const toggleNotification = useNotification();
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  // Already installed
+  if (isInstalled) {
+    return (
+      <Box paddingLeft={4}>
+        <Icon as={Check} marginRight={2} width={12} height={12} color="success600" />
+        <Typography variant="omega" textColor="success600" fontWeight="bold">
+          {formatMessage({
+            id: 'admin.pages.MarketPlacePage.plugin.installed',
+            defaultMessage: 'Installed',
+          })}
+        </Typography>
+      </Box>
+    );
+  }
+
+  // In development, show install button
+  if (isInDevelopmentMode) {
+    return (
+      <CopyToClipboard
+        onCopy={() => {
+          trackUsage('willInstallPlugin');
+          toggleNotification({
+            type: 'success',
+            message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+          });
+        }}
+        text={commandToCopy}
+      >
+        <Button size="S" startIcon={<Duplicate />} variant="secondary">
+          {formatMessage({
+            id: 'admin.pages.MarketPlacePage.plugin.copy',
+            defaultMessage: 'Copy install command',
+          })}
+        </Button>
+      </CopyToClipboard>
+    );
+  }
+
+  // Not in development and plugin not installed already. Show nothing
+  return null;
+};
+
+InstallPluginButton.propTypes = {
+  isInstalled: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool.isRequired,
+  commandToCopy: PropTypes.string.isRequired,
+};
+
+export default InstallPluginButton;

package/admin/src/pages/MarketplacePage/components/PluginCard/index.js

@@ -5,18 +5,15 @@ import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
-import { Button } from '@strapi/design-system/Button';
 import { LinkButton } from '@strapi/design-system/LinkButton';
 import { Flex } from '@strapi/design-system/Flex';
 import { Icon } from '@strapi/design-system/Icon';
 import { Tooltip } from '@strapi/design-system/Tooltip';
 import ExternalLink from '@strapi/icons/ExternalLink';
-import Duplicate from '@strapi/icons/Duplicate';
-import Check from '@strapi/icons/Check';
 import CheckCircle from '@strapi/icons/CheckCircle';
-import { useNotification, useTracking } from '@strapi/helper-plugin';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useTracking } from '@strapi/helper-plugin';
 import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg';
+import InstallPluginButton from './InstallPluginButton';
 
 // Custom component to have an ellipsis after the 2nd line
 const EllipsisText = styled(Typography)`
@@ -28,10 +25,9 @@ const EllipsisText = styled(Typography)`
   overflow: hidden;
 `;
 
-const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
+const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode }) => {
   const { attributes } = plugin;
   const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
 
   const isInstalled = installedPluginNames.includes(attributes.npmPackageName);
@@ -128,40 +124,20 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
             defaultMessage: 'Learn more',
           })}
         </LinkButton>
-        {isInstalled ? (
-          <Box paddingLeft={4}>
-            <Icon as={Check} marginRight={2} width={12} height={12} color="success600" />
-            <Typography variant="omega" textColor="success600" fontWeight="bold">
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.plugin.installed',
-                defaultMessage: 'Installed',
-              })}
-            </Typography>
-          </Box>
-        ) : (
-          <CopyToClipboard
-            onCopy={() => {
-              trackUsage('willInstallPlugin');
-              toggleNotification({
-                type: 'success',
-                message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
-              });
-            }}
-            text={commandToCopy}
-          >
-            <Button size="S" startIcon={<Duplicate />} variant="secondary">
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.plugin.copy',
-                defaultMessage: 'Copy install command',
-              })}
-            </Button>
-          </CopyToClipboard>
-        )}
+        <InstallPluginButton
+          isInstalled={isInstalled}
+          isInDevelopmentMode={isInDevelopmentMode}
+          commandToCopy={commandToCopy}
+        />
       </Stack>
     </Flex>
   );
 };
 
+PluginCard.defaultProps = {
+  isInDevelopmentMode: false,
+};
+
 PluginCard.propTypes = {
   plugin: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -181,6 +157,7 @@ PluginCard.propTypes = {
   }).isRequired,
   installedPluginNames: PropTypes.arrayOf(PropTypes.string).isRequired,
   useYarn: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool,
 };
 
 export default PluginCard;

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

@@ -10,6 +10,7 @@ import {
   useTracking,
   LoadingIndicatorPage,
   useNotification,
+  useAppInfos,
 } from '@strapi/helper-plugin';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
@@ -46,11 +47,12 @@ const MarketPlacePage = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
+  const { autoReload: isInDevelopmentMode } = useAppInfos();
 
   useFocusWhenNavigate();
 
   const marketplaceTitle = formatMessage({
-    id: 'admin.pages.MarketPlacePage.title',
+    id: 'global.marketplace',
     defaultMessage: 'Marketplace',
   });
 
@@ -101,6 +103,19 @@ const MarketPlacePage = () => {
     trackUsageRef.current('didGoToMarketplace');
   }, []);
 
+  useEffect(() => {
+    if (!isInDevelopmentMode) {
+      toggleNotification({
+        type: 'info',
+        message: {
+          id: 'admin.pages.MarketPlacePage.production',
+          defaultMessage: 'Manage plugins from the development environment',
+        },
+        blockTransition: true,
+      });
+    }
+  }, [toggleNotification, isInDevelopmentMode]);
+
   if (hasFailed) {
     return (
       <Layout>
@@ -137,7 +152,7 @@ const MarketPlacePage = () => {
         />
         <HeaderLayout
           title={formatMessage({
-            id: 'admin.pages.MarketPlacePage.title',
+            id: 'global.marketplace',
             defaultMessage: 'Marketplace',
           })}
           subtitle={formatMessage({
@@ -198,6 +213,7 @@ const MarketPlacePage = () => {
                     plugin={plugin}
                     installedPluginNames={installedPluginNames}
                     useYarn={appInfoResponse.data.useYarn}
+                    isInDevelopmentMode={isInDevelopmentMode}
                   />
                 </GridItem>
               ))}

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>