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

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/assets/images/icon_made-by-strapi.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="4" fill="#4945FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8075 7.625H9.03058V11.1792H12.2533C12.4977 11.1792 12.6958 11.3773 12.6958 11.6216V14.8444H16.25V8.06746C16.25 7.82309 16.0519 7.625 15.8075 7.625Z" fill="white"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M9.0308 7.625V11.1792H6.01073C5.81364 11.1792 5.71494 10.9409 5.8543 10.8015L9.0308 7.625ZM13.0735 18.0209C12.9342 18.1603 12.6959 18.0616 12.6959 17.8645V14.8444H16.25L13.0735 18.0209ZM12.4746 11.1792H9.03058V14.4019C9.03058 14.6463 9.22868 14.8444 9.47304 14.8444H12.6958V11.4004C12.6958 11.2782 12.5968 11.1792 12.4746 11.1792Z" fill="#DAD9FF"/>
+</svg>

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/PrivateRoute/index.js

@@ -8,28 +8,34 @@
  */
 
 import React, { memo } from 'react';
-import { Redirect, Route } from 'react-router-dom';
+import { Redirect, Route, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { auth } from '@strapi/helper-plugin';
 
 /* eslint-disable react/jsx-curly-newline */
 
-const PrivateRoute = ({ component: Component, path, ...rest }) => (
-  <Route
-    path={path}
-    render={props =>
-      auth.getToken() !== null ? (
-        <Component {...rest} {...props} />
-      ) : (
-        <Redirect
-          to={{
-            pathname: '/auth/login',
-          }}
-        />
-      )
-    }
-  />
-);
+const PrivateRoute = ({ component: Component, path, ...rest }) => {
+  const { pathname, search } = useLocation();
+
+  return (
+    <Route
+      path={path}
+      render={props =>
+        auth.getToken() !== null ? (
+          <Component {...rest} {...props} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: '/auth/login',
+              search:
+                pathname !== '/' && `?redirectTo=${encodeURIComponent(`${pathname}${search}`)}`,
+            }}
+          />
+        )
+      }
+    />
+  );
+};
 
 PrivateRoute.propTypes = {
   component: PropTypes.any.isRequired,

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/SelectWrapper/utils/getSelectStyles.js

@@ -49,6 +49,8 @@ const getSelectStyles = theme => {
         ...base,
         width: '100%',
         marginTop: theme.spaces[1],
+        backgroundColor: theme.colors.neutral0,
+        color: theme.colors.neutral800,
         borderRadius: '4px !important',
         borderTopLeftRadius: '4px !important',
         borderTopRightRadius: '4px !important',
@@ -76,7 +78,7 @@ const getSelectStyles = theme => {
       return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
     },
     placeholder: base => ({ ...base, marginLeft: 0 }),
-    singleValue: base => ({ ...base, marginLeft: 0 }),
+    singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),
     valueContainer: base => ({
       ...base,
       padding: 0,

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -29,7 +29,8 @@ export const EditorStylesContainer = styled.div`
 
   .CodeMirror-scrollbar-filler,
   .CodeMirror-gutter-filler {
-    background-color: white; /* The little square between H and V scrollbars */
+    /* The little square between H and V scrollbars */
+    background-color: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   /* GUTTER */
@@ -158,7 +159,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     position: relative;
     overflow: hidden;
-    background: white;
+    background: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   .CodeMirror-scroll {
@@ -292,6 +293,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror-cursor {
     position: absolute;
     pointer-events: none;
+    border-color: ${({ theme }) => `${theme.colors.neutral800}`};
   }
   .CodeMirror-measure pre {
     position: static;

package/admin/src/contexts/ThemeToggle/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeToggleContext = createContext({});
+
+export default ThemeToggleContext;

package/admin/src/contexts/index.js

@@ -1,3 +1,4 @@
 export { default as AdminContext } from './Admin';
 export { default as ConfigurationsContext } from './Configurations';
 export { default as PermissionsDataManagerContext } from './PermisssionsDataManagerContext';
+export { default as ThemeToggleContext } from './ThemeToggle';

package/admin/src/hooks/index.js

@@ -1,7 +1,6 @@
 export { default as useConfigurations } from './useConfigurations';
 export { default as useModels } from './useModels';
 export { default as useFetchPermissionsLayout } from './useFetchPermissionsLayout';
-export { default as useFetchPluginsFromMarketPlace } from './useFetchPluginsFromMarketPlace';
 export { default as useFetchRole } from './useFetchRole';
 export { default as useMenu } from './useMenu';
 export { default as useRolesList } from './useRolesList';
@@ -9,3 +8,4 @@ export { default as useSettingsMenu } from './useSettingsMenu';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
 export { default as useReleaseNotification } from './useReleaseNotification';
+export { default as useThemeToggle } from './useThemeToggle';

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

@@ -0,0 +1,23 @@
+import { useQuery } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchInstalledPlugins } from './utils/api';
+
+const useFetchInstalledPlugins = notifyLoad => {
+  const toggleNotification = useNotification();
+
+  return useQuery('list-installed-plugins', () => fetchInstalledPlugins(), {
+    onSuccess: () => {
+      if (notifyLoad) {
+        notifyLoad();
+      }
+    },
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+};
+
+export default useFetchInstalledPlugins;

package/admin/src/{pages/InstalledPluginsPage → hooks/useFetchInstalledPlugins}/utils/api.js

@@ -1,11 +1,9 @@
 import { axiosInstance } from '../../../core/utils';
 
-const fetchPlugins = async notify => {
+const fetchInstalledPlugins = async () => {
   const { data } = await axiosInstance.get('/admin/plugins');
 
-  notify();
-
   return data;
 };
 
-export { fetchPlugins };
+export { fetchInstalledPlugins };

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

@@ -0,0 +1,23 @@
+import { useQuery } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchMarketplacePlugins } from './utils/api';
+
+const useFetchMarketplacePlugins = notifyLoad => {
+  const toggleNotification = useNotification();
+
+  return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), {
+    onSuccess: () => {
+      if (notifyLoad) {
+        notifyLoad();
+      }
+    },
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+};
+
+export default useFetchMarketplacePlugins;

package/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
+
+const fetchMarketplacePlugins = async () => {
+  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`);
+
+  // Only keep v4 plugins
+  const filteredResponse = {
+    ...response,
+    data: response.data.filter(plugin => plugin.attributes.strapiCompatibility === 'v4'),
+  };
+
+  return filteredResponse;
+};
+
+export { fetchMarketplacePlugins };

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/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};
   }
 `;
 

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

@@ -14,7 +14,10 @@ import init from './init';
 import { initialState, reducer } from './reducer';
 
 const AuthPage = ({ hasAdmin, setHasAdmin }) => {
-  const { push } = useHistory();
+  const {
+    push,
+    location: { search },
+  } = useHistory();
   const { changeLocale } = useLocalesProvider();
   const { setSkipped } = useGuidedTour();
   const { trackUsage } = useTracking();
@@ -119,7 +122,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
       auth.setToken(token, body.rememberMe);
       auth.setUserInfo(user, body.rememberMe);
 
-      push('/');
+      redirectToPreviousLocation();
     } catch (err) {
       if (err.response) {
         const errorMessage = get(
@@ -190,8 +193,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         return;
       }
 
-      // Redirect to the homePage
-      push('/');
+      redirectToPreviousLocation();
     } catch (err) {
       trackUsage('didNotCreateFirstAdmin');
 
@@ -239,6 +241,12 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     }
   };
 
+  const redirectToPreviousLocation = () => {
+    const locationBeforeAuthenticated = decodeURIComponent(query.get('redirectTo'));
+    const redirectUrl = locationBeforeAuthenticated || '/';
+    push(redirectUrl);
+  };
+
   // Redirect the user to the login page if
   // the endpoint does not exist or
   // there is already an admin user oo
@@ -249,7 +257,16 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
 
   // Redirect the user to the register-admin if it is the first user
   if (!hasAdmin && authType !== 'register-admin') {
-    return <Redirect to="/auth/register-admin" />;
+    return (
+      <Redirect
+        to={{
+          pathname: '/auth/register-admin',
+          // Forward the `?redirectTo` from /auth/login
+          // /abc => /auth/login?redirectTo=%2Fabc => /auth/register-admin?redirectTo=%2Fabc
+          search,
+        }}
+      />
+    );
   }
 
   return (

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

@@ -30,9 +30,6 @@ const StyledReddit = styled(Reddit)`
   > path:first-child {
     fill: #ff4500;
   }
-  > path:last-child {
-    fill: ${({ theme }) => theme.colors.neutral0};
-  }
 `;
 const StyledStrapi = styled(Strapi)`
   > path:first-child {