@strapi/admin 4.1.4 → 4.1.6-alpha.1

package/admin/src/StrapiApp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { lightTheme } from '@strapi/design-system/themes';
+import { lightTheme, darkTheme } from '@strapi/design-system/themes';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
@@ -13,7 +13,6 @@ import App from './pages/App';
 import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
 import MenuLogo from './assets/images/logo_strapi_menu.png';
 import Providers from './components/Providers';
-import Theme from './components/Theme';
 import languageNativeNames from './translations/languageNativeNames';
 import {
   INJECT_COLUMN_IN_TABLE,
@@ -34,7 +33,7 @@ class StrapiApp {
       locales: ['en'],
       menuLogo: MenuLogo,
       notifications: { releases: true },
-      theme: lightTheme,
+      themes: { light: lightTheme, dark: darkTheme },
       translations: {},
       tutorials: true,
     };
@@ -226,7 +225,7 @@ class StrapiApp {
     }
 
     if (this.customConfigurations?.theme) {
-      this.configurations.theme = merge(this.configurations.theme, this.customConfigurations.theme);
+      merge(this.configurations.themes.light, this.customConfigurations.theme);
     }
 
     if (this.customConfigurations?.notifications?.releases !== undefined) {
@@ -427,44 +426,43 @@ class StrapiApp {
     } = this.library;
 
     return (
-      <Theme theme={this.configurations.theme}>
-        <Providers
-          authLogo={this.configurations.authLogo}
-          components={components}
-          fields={fields}
-          localeNames={localeNames}
-          getAdminInjectedComponents={this.getAdminInjectedComponents}
-          getPlugin={this.getPlugin}
-          messages={this.configurations.translations}
-          menu={this.menu}
-          menuLogo={this.configurations.menuLogo}
-          plugins={this.plugins}
-          runHookParallel={this.runHookParallel}
-          runHookWaterfall={(name, initialValue, async = false) => {
-            return this.runHookWaterfall(name, initialValue, async, store);
-          }}
-          runHookSeries={this.runHookSeries}
-          settings={this.settings}
-          showTutorials={this.configurations.tutorials}
-          showReleaseNotification={this.configurations.notifications.releases}
-          store={store}
-        >
-          <>
-            <Helmet
-              link={[
-                {
-                  rel: 'icon',
-                  type: 'image/png',
-                  href: this.configurations.head.favicon,
-                },
-              ]}
-            />
-            <BrowserRouter basename={basename}>
-              <App store={store} />
-            </BrowserRouter>
-          </>
-        </Providers>
-      </Theme>
+      <Providers
+        authLogo={this.configurations.authLogo}
+        components={components}
+        fields={fields}
+        localeNames={localeNames}
+        getAdminInjectedComponents={this.getAdminInjectedComponents}
+        getPlugin={this.getPlugin}
+        messages={this.configurations.translations}
+        menu={this.menu}
+        menuLogo={this.configurations.menuLogo}
+        plugins={this.plugins}
+        runHookParallel={this.runHookParallel}
+        runHookWaterfall={(name, initialValue, async = false) => {
+          return this.runHookWaterfall(name, initialValue, async, store);
+        }}
+        runHookSeries={this.runHookSeries}
+        themes={this.configurations.themes}
+        settings={this.settings}
+        showTutorials={this.configurations.tutorials}
+        showReleaseNotification={this.configurations.notifications.releases}
+        store={store}
+      >
+        <>
+          <Helmet
+            link={[
+              {
+                rel: 'icon',
+                type: 'image/png',
+                href: this.configurations.head.favicon,
+              },
+            ]}
+          />
+          <BrowserRouter basename={basename}>
+            <App store={store} />
+          </BrowserRouter>
+        </>
+      </Providers>
     );
   }
 }

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -21,7 +21,7 @@ const fetchStrapiLatestRelease = async toggleNotification => {
         link: {
           url: `https://github.com/strapi/strapi/releases/tag/${tag_name}`,
           label: {
-            id: 'notification.version.update.link',
+            id: 'global.see-more',
           },
         },
         blockTransition: true,

package/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -78,7 +78,7 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
                 rel="noopener noreferrer nofollow"
               >
                 {formatMessage({
-                  id: 'app.components.BlockLink.documentation',
+                  id: 'global.documentation',
                   defaultMessage: 'Read the documentation',
                 })}
               </Link>

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -38,9 +38,9 @@ const GuidedTourHomepage = () => {
   const activeSection = enrichedSections.find(section => !section.isDone)?.key;
 
   const handleSkip = () => {
-    setSkipped(true)
+    setSkipped(true);
     trackUsage('didSkipGuidedtour');
-  }
+  };
 
   return (
     <Box

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -17,7 +17,7 @@ const ModalWrapper = styled(Flex)`
   z-index: 4;
   inset: 0;
   /* this is theme.colors.neutral800 with opacity */
-  background: ${({ theme }) => `${theme.colors.neutral800}33`};
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
 `;
 
 const Modal = ({ onClose, onSkip, children, hideSkip }) => {

package/admin/src/components/LeftMenu/index.js

@@ -100,7 +100,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
 
       <NavSections>
         <NavLink to="/content-manager" icon={<Write />}>
-          {formatMessage({ id: 'content-manager.plugin.name', defaultMessage: 'Content manager' })}
+          {formatMessage({ id: 'global.content-manager', defaultMessage: 'Content manager' })}
         </NavLink>
 
         {pluginsSectionLinks.length > 0 ? (
@@ -160,7 +160,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                 <Typography>
                   {formatMessage({
-                    id: 'app.components.LeftMenu.profile',
+                    id: 'global.profile',
                     defaultMessage: 'Profile',
                   })}
                 </Typography>

package/admin/src/components/Providers/index.js

@@ -9,6 +9,8 @@ import GuidedTour from '../GuidedTour';
 import AutoReloadOverlayBlockerProvider from '../AutoReloadOverlayBlockerProvider';
 import Notifications from '../Notifications';
 import OverlayBlocker from '../OverlayBlocker';
+import ThemeToggleProvider from '../ThemeToggleProvider';
+import Theme from '../Theme';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -36,41 +38,45 @@ const Providers = ({
   settings,
   showReleaseNotification,
   showTutorials,
-
   store,
+  themes,
 }) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <Provider store={store}>
-        <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-          <ConfigurationsContext.Provider
-            value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
-          >
-            <StrapiAppProvider
-              getPlugin={getPlugin}
-              menu={menu}
-              plugins={plugins}
-              runHookParallel={runHookParallel}
-              runHookWaterfall={runHookWaterfall}
-              runHookSeries={runHookSeries}
-              settings={settings}
-            >
-              <LibraryProvider components={components} fields={fields}>
-                <LanguageProvider messages={messages} localeNames={localeNames}>
-                  <AutoReloadOverlayBlockerProvider>
-                    <OverlayBlocker>
-                      <GuidedTour>
-                        <Notifications>{children}</Notifications>
-                      </GuidedTour>
-                    </OverlayBlocker>
-                  </AutoReloadOverlayBlockerProvider>
-                </LanguageProvider>
-              </LibraryProvider>
-            </StrapiAppProvider>
-          </ConfigurationsContext.Provider>
-        </AdminContext.Provider>
-      </Provider>
-    </QueryClientProvider>
+    <ThemeToggleProvider themes={themes}>
+      <Theme>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={store}>
+            <AdminContext.Provider value={{ getAdminInjectedComponents }}>
+              <ConfigurationsContext.Provider
+                value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
+              >
+                <StrapiAppProvider
+                  getPlugin={getPlugin}
+                  menu={menu}
+                  plugins={plugins}
+                  runHookParallel={runHookParallel}
+                  runHookWaterfall={runHookWaterfall}
+                  runHookSeries={runHookSeries}
+                  settings={settings}
+                >
+                  <LibraryProvider components={components} fields={fields}>
+                    <LanguageProvider messages={messages} localeNames={localeNames}>
+                      <AutoReloadOverlayBlockerProvider>
+                        <OverlayBlocker>
+                          <GuidedTour>
+                            <Notifications>{children}</Notifications>
+                          </GuidedTour>
+                        </OverlayBlocker>
+                      </AutoReloadOverlayBlockerProvider>
+                    </LanguageProvider>
+                  </LibraryProvider>
+                </StrapiAppProvider>
+              </ConfigurationsContext.Provider>
+            </AdminContext.Provider>
+          </Provider>
+        </QueryClientProvider>
+      </Theme>
+    </ThemeToggleProvider>
   );
 };
 
@@ -104,6 +110,33 @@ Providers.propTypes = {
   showReleaseNotification: PropTypes.bool.isRequired,
   showTutorials: PropTypes.bool.isRequired,
   store: PropTypes.object.isRequired,
+  themes: PropTypes.shape({
+    light: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    dark: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    custom: PropTypes.object,
+  }).isRequired,
 };
 
 export default Providers;

package/admin/src/components/Theme/index.js

@@ -1,23 +1,22 @@
 import React from 'react';
 import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
 import PropTypes from 'prop-types';
-import { lightTheme } from '@strapi/design-system/themes';
+import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';
 
-const Theme = ({ children, theme }) => (
-  <ThemeProvider theme={theme}>
-    {children}
-    <GlobalStyle />
-  </ThemeProvider>
-);
+const Theme = ({ children }) => {
+  const { currentTheme, themes } = useThemeToggle();
 
-Theme.propTypes = {
-  children: PropTypes.element.isRequired,
-  theme: PropTypes.object,
+  return (
+    <ThemeProvider theme={themes[currentTheme] || themes.light}>
+      {children}
+      <GlobalStyle />
+    </ThemeProvider>
+  );
 };
 
-Theme.defaultProps = {
-  theme: lightTheme,
+Theme.propTypes = {
+  children: PropTypes.element.isRequired,
 };
 
 export default Theme;

package/admin/src/components/ThemeToggleProvider/index.js

@@ -0,0 +1,66 @@
+/**
+ *
+ * ThemeToggleProvider
+ *
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeToggleContext } from '../../contexts';
+
+const THEME_KEY = 'STRAPI_THEME';
+
+const getDefaultTheme = () => {
+  const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  const persistedTheme = localStorage.getItem(THEME_KEY);
+
+  return persistedTheme || browserTheme;
+};
+
+const ThemeToggleProvider = ({ children, themes }) => {
+  const [currentTheme, setCurrentTheme] = useState(getDefaultTheme());
+
+  const handleChangeTheme = nextTheme => {
+    setCurrentTheme(nextTheme);
+    localStorage.setItem(THEME_KEY, nextTheme);
+  };
+
+  return (
+    <ThemeToggleContext.Provider value={{ currentTheme, onChangeTheme: handleChangeTheme, themes }}>
+      {children}
+    </ThemeToggleContext.Provider>
+  );
+};
+
+ThemeToggleProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  themes: PropTypes.shape({
+    light: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    dark: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    custom: PropTypes.object,
+  }).isRequired,
+};
+
+export default ThemeToggleProvider;

package/admin/src/content-manager/components/ComponentInitializer/index.js

@@ -57,10 +57,13 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">
-          {formatMessage({
-            id: error.id,
-            defaultMessage: error.id,
-          })}
+          {formatMessage(
+            {
+              id: error.id,
+              defaultMessage: error.id,
+            },
+            { ...error.values }
+          )}
         </Typography>
       )}
     </>
@@ -75,6 +78,8 @@ ComponentInitializer.defaultProps = {
 ComponentInitializer.propTypes = {
   error: PropTypes.shape({
     id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+    values: PropTypes.object,
   }),
   isReadOnly: PropTypes.bool,
   onClick: PropTypes.func.isRequired,

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from 'react-query';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
+import { Box } from '@strapi/design-system/Box';
+import { Badge } from '@strapi/design-system/Badge';
+import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { Loader } from '@strapi/design-system/Loader';
+import styled from 'styled-components';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { stopPropagation } from '@strapi/helper-plugin';
+import CellValue from '../CellValue';
+import { axiosInstance } from '../../../../../core/utils';
+import { getRequestUrl, getTrad } from '../../../../utils';
+
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+const fetchRelation = async (endPoint, notifyStatus) => {
+  const {
+    data: { results, pagination },
+  } = await axiosInstance.get(endPoint);
+
+  notifyStatus();
+
+  return { results, pagination };
+};
+
+const RelationMultiple = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) => {
+  const { formatMessage } = useIntl();
+  const { notifyStatus } = useNotifyAT();
+  const requestURL = getRequestUrl(`${queryInfos.endPoint}/${rowId}/${name.split('.')[0]}`);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const Label = (
+    <>
+      <Badge>{value.count}</Badge>{' '}
+      {formatMessage(
+        {
+          id: 'content-manager.containers.ListPage.items',
+          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+        },
+        { number: value.count }
+      )}
+    </>
+  );
+
+  const notify = () => {
+    const message = formatMessage({
+      id: getTrad('DynamicTable.relation-loaded'),
+      defaultMessage: 'Relations have been loaded',
+    });
+    notifyStatus(message);
+  };
+
+  const { data, status } = useQuery(
+    [fieldSchema.targetModel, rowId],
+    () => fetchRelation(requestURL, notify),
+    {
+      enabled: isOpen,
+      staleTime: 0,
+    }
+  );
+
+  return (
+    <Box {...stopPropagation}>
+      <SimpleMenu
+        label={Label}
+        size="S"
+        onOpen={() => setIsOpen(true)}
+        onClose={() => setIsOpen(false)}
+      >
+        {status !== 'success' && (
+          <MenuItem aria-disabled>
+            <Loader small>
+              {formatMessage({
+                id: getTrad('DynamicTable.relation-loading'),
+                defaultMessage: 'Relations are loading',
+              })}
+            </Loader>
+          </MenuItem>
+        )}
+
+        {status === 'success' && (
+          <>
+            {data?.results.map(entry => (
+              <MenuItem key={entry.id} aria-disabled>
+                <TypographyMaxWidth ellipsis>
+                  <CellValue
+                    type={metadatas.mainField.schema.type}
+                    value={entry[metadatas.mainField.name] || entry.id}
+                  />
+                </TypographyMaxWidth>
+              </MenuItem>
+            ))}
+
+            {data?.pagination.total > 10 && (
+              <MenuItem
+                aria-disabled
+                aria-label={formatMessage({
+                  id: getTrad('DynamicTable.relation-more'),
+                  defaultMessage: 'This relation contains more entities than displayed',
+                })}
+              >
+                <Typography>...</Typography>
+              </MenuItem>
+            )}
+          </>
+        )}
+      </SimpleMenu>
+    </Box>
+  );
+};
+
+RelationMultiple.propTypes = {
+  fieldSchema: PropTypes.shape({
+    relation: PropTypes.string,
+    targetModel: PropTypes.string,
+    type: PropTypes.string.isRequired,
+  }).isRequired,
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      schema: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired,
+    }),
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  queryInfos: PropTypes.shape({ endPoint: PropTypes.string.isRequired }).isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export default RelationMultiple;

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationSingle/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@strapi/design-system/Typography';
+import styled from 'styled-components';
+import CellValue from '../CellValue';
+
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+const RelationSingle = ({ metadatas, value }) => {
+  return (
+    <TypographyMaxWidth textColor="neutral800" ellipsis>
+      <CellValue
+        type={metadatas.mainField.schema.type}
+        value={value[metadatas.mainField.name] || value.id}
+      />
+    </TypographyMaxWidth>
+  );
+};
+
+RelationSingle.propTypes = {
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      schema: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired,
+    }),
+  }).isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export default RelationSingle;

package/admin/src/content-manager/components/DynamicTable/CellContent/RepeatableComponent/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { Badge } from '@strapi/design-system/Badge';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { stopPropagation } from '@strapi/helper-plugin';
+
+import CellValue from '../CellValue';
+
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+const RepeatableComponentCell = ({ value, metadatas }) => {
+  const { formatMessage } = useIntl();
+  const {
+    mainField: { type: mainFieldType, name: mainFieldName },
+  } = metadatas;
+
+  const Label = (
+    <>
+      <Badge>{value.length}</Badge>{' '}
+      {formatMessage(
+        {
+          id: 'content-manager.containers.ListPage.items',
+          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+        },
+        { number: value.length }
+      )}
+    </>
+  );
+
+  return (
+    <Box {...stopPropagation}>
+      <SimpleMenu label={Label} size="S">
+        {value.map(item => (
+          <MenuItem key={item.id} aria-disabled>
+            <TypographyMaxWidth ellipsis>
+              <CellValue type={mainFieldType} value={item[mainFieldName] || item.id} />
+            </TypographyMaxWidth>
+          </MenuItem>
+        ))}
+      </SimpleMenu>
+    </Box>
+  );
+};
+
+RepeatableComponentCell.propTypes = {
+  metadatas: PropTypes.shape({
+    mainField: PropTypes.shape({
+      name: PropTypes.string,
+      type: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  }).isRequired,
+  value: PropTypes.array.isRequired,
+};
+
+export default RepeatableComponentCell;