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

package/admin/src/StrapiApp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { lightTheme, darkTheme } from '@strapi/design-system/themes';
+import { lightTheme } from '@strapi/design-system/themes';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
@@ -13,6 +13,7 @@ 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,
@@ -33,7 +34,7 @@ class StrapiApp {
       locales: ['en'],
       menuLogo: MenuLogo,
       notifications: { releases: true },
-      themes: { light: lightTheme, dark: darkTheme },
+      theme: lightTheme,
       translations: {},
       tutorials: true,
     };
@@ -225,7 +226,7 @@ class StrapiApp {
     }
 
     if (this.customConfigurations?.theme) {
-      merge(this.configurations.themes.light, this.customConfigurations.theme);
+      this.configurations.theme = merge(this.configurations.theme, this.customConfigurations.theme);
     }
 
     if (this.customConfigurations?.notifications?.releases !== undefined) {
@@ -426,43 +427,44 @@ class StrapiApp {
     } = this.library;
 
     return (
-      <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>
+      <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>
     );
   }
 }

package/admin/src/app.js

@@ -1,6 +1,9 @@
+const config = {
+  locales: ['fr'],
+};
+const bootstrap = () => {};
+
 export default {
-  config: {
-    locales: ['fr'],
-  },
-  bootstrap() {},
+  config,
+  bootstrap,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useGuidedTour } from '@strapi/helper-plugin';
+import { useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { Stack } from '@strapi/design-system/Stack';
 import { Flex } from '@strapi/design-system/Flex';
@@ -14,12 +14,17 @@ import layout from '../layout';
 const GuidedTourHomepage = () => {
   const { guidedTourState, setSkipped } = useGuidedTour();
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
 
   const sections = Object.entries(layout).map(([key, val]) => ({
     key,
     title: val.home.title,
     content: (
-      <LinkButton to={val.home.cta.target} endIcon={<ArrowRight />}>
+      <LinkButton
+        onClick={() => trackUsage(val.home.trackingEvent)}
+        to={val.home.cta.target}
+        endIcon={<ArrowRight />}
+      >
         {formatMessage(val.home.cta.title)}
       </LinkButton>
     ),
@@ -32,6 +37,11 @@ const GuidedTourHomepage = () => {
 
   const activeSection = enrichedSections.find(section => !section.isDone)?.key;
 
+  const handleSkip = () => {
+    setSkipped(true);
+    trackUsage('didSkipGuidedtour');
+  };
+
   return (
     <Box
       hasRadius
@@ -52,7 +62,7 @@ const GuidedTourHomepage = () => {
         <StepperHomepage sections={sections} currentSectionKey={activeSection} />
       </Stack>
       <Flex justifyContent="flex-end">
-        <Button variant="tertiary" onClick={() => setSkipped(true)}>
+        <Button variant="tertiary" onClick={handleSkip}>
           {formatMessage({ id: 'app.components.GuidedTour.skip', defaultMessage: 'Skip the tour' })}
         </Button>
       </Flex>

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}1F`};
+  background: ${({ theme }) => `${theme.colors.neutral800}33`};
 `;
 
 const Modal = ({ onClose, onSkip, children, hideSkip }) => {

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useReducer } from 'react';
 import at from 'lodash/at';
-import { useGuidedTour } from '@strapi/helper-plugin';
+import { useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import layout from '../layout';
 import Modal from './components/Modal';
 import reducer, { initialState } from './reducer';
@@ -20,6 +20,7 @@ const GuidedTourModal = () => {
     { stepContent, sectionIndex, stepIndex, hasSectionAfter, hasStepAfter },
     dispatch,
   ] = useReducer(reducer, initialState);
+  const { trackUsage } = useTracking();
 
   useEffect(() => {
     if (!currentStep) {
@@ -56,6 +57,7 @@ const GuidedTourModal = () => {
 
   const handleCtaClick = () => {
     setStepState(currentStep, true);
+    trackUsage(stepContent.trackingEvent);
 
     setCurrentStep(null);
   };
@@ -63,6 +65,7 @@ const GuidedTourModal = () => {
   const handleSkip = () => {
     setSkipped(true);
     setCurrentStep(null);
+    trackUsage('didSkipGuidedtour');
   };
 
   if (isVisible && stepContent) {

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

@@ -13,6 +13,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/plugins/content-type-builder',
       },
+      trackingEvent: 'didClickGuidedTourHomepageContentTypeBuilder',
     },
     create: {
       title: {
@@ -31,6 +32,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep1CollectionType',
     },
     success: {
       title: {
@@ -49,6 +51,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/content-manager',
       },
+      trackingEvent: 'didCreateGuidedTourCollectionType',
     },
   },
   contentManager: {
@@ -65,6 +68,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/content-manager',
       },
+      trackingEvent: 'didClickGuidedTourHomepageContentManager',
     },
     create: {
       title: {
@@ -83,6 +87,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep2ContentManager',
     },
     success: {
       title: {
@@ -101,6 +106,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/settings/api-tokens',
       },
+      trackingEvent: 'didCreateGuidedTourEntry',
     },
   },
   apiTokens: {
@@ -117,6 +123,7 @@ const layout = {
         type: 'REDIRECT',
         target: '/settings/api-tokens',
       },
+      trackingEvent: 'didClickGuidedTourHomepageApiTokens',
     },
     create: {
       title: {
@@ -135,6 +142,7 @@ const layout = {
         },
         type: 'CLOSE',
       },
+      trackingEvent: 'didClickGuidedTourStep3ApiTokens',
     },
     success: {
       title: {
@@ -146,6 +154,7 @@ const layout = {
         defaultMessage:
           "<p>See content in action by making an HTTP request:</p><ul><li><p>To this URL: <light>https://'<'YOUR_DOMAIN'>'/api/'<'YOUR_CT'>'</light></p></li><li><p>With the header: <light>Authorization: bearer '<'YOUR_API_TOKEN'>'</light></p></li></ul><p>For more ways to interact with content, see the <documentationLink>documentation</documentationLink>.</p>",
       },
+      trackingEvent: 'didGenerateGuidedTourApiTokens',
     },
   },
 };

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

@@ -9,8 +9,6 @@ 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: {
@@ -38,45 +36,41 @@ const Providers = ({
   settings,
   showReleaseNotification,
   showTutorials,
+
   store,
-  themes,
 }) => {
   return (
-    <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>
+    <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>
   );
 };
 
@@ -110,33 +104,6 @@ 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,22 +1,23 @@
 import React from 'react';
 import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
 import PropTypes from 'prop-types';
-import { useThemeToggle } from '../../hooks';
+import { lightTheme } from '@strapi/design-system/themes';
 import GlobalStyle from '../GlobalStyle';
 
-const Theme = ({ children }) => {
-  const { currentTheme, themes } = useThemeToggle();
-
-  return (
-    <ThemeProvider theme={themes[currentTheme] || themes.light}>
-      {children}
-      <GlobalStyle />
-    </ThemeProvider>
-  );
-};
+const Theme = ({ children, theme }) => (
+  <ThemeProvider theme={theme}>
+    {children}
+    <GlobalStyle />
+  </ThemeProvider>
+);
 
 Theme.propTypes = {
   children: PropTypes.element.isRequired,
+  theme: PropTypes.object,
+};
+
+Theme.defaultProps = {
+  theme: lightTheme,
 };
 
 export default Theme;

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

@@ -224,6 +224,8 @@ function Inputs({
       attribute={fieldSchema}
       autoComplete="new-password"
       intlLabel={{ id: label, defaultMessage: label }}
+      // in case the default value of the boolean is null, attribute.default doesn't exist
+      isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
       description={description ? { id: description, defaultMessage: description } : null}
       disabled={shouldDisableField}
       error={errorId}
@@ -279,7 +281,4 @@ Inputs.propTypes = {
 
 const Memoized = memo(Inputs, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -49,8 +49,6 @@ 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',
@@ -78,7 +76,7 @@ const getSelectStyles = theme => {
       return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
     },
     placeholder: base => ({ ...base, marginLeft: 0 }),
-    singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),
+    singleValue: base => ({ ...base, marginLeft: 0 }),
     valueContainer: base => ({
       ...base,
       padding: 0,

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

@@ -29,8 +29,7 @@ export const EditorStylesContainer = styled.div`
 
   .CodeMirror-scrollbar-filler,
   .CodeMirror-gutter-filler {
-    /* The little square between H and V scrollbars */
-    background-color: ${({ theme }) => `${theme.colors.neutral0}`};
+    background-color: white; /* The little square between H and V scrollbars */
   }
 
   /* GUTTER */
@@ -159,7 +158,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     position: relative;
     overflow: hidden;
-    background: ${({ theme }) => `${theme.colors.neutral0}`};
+    background: white;
   }
 
   .CodeMirror-scroll {
@@ -293,7 +292,6 @@ 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/index.js

@@ -1,4 +1,3 @@
 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

@@ -9,4 +9,3 @@ 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/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.buttonNeutral0};
+    color: ${({ theme }) => theme.colors.neutral0};
   }
 `;
 

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

@@ -174,6 +174,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         if (isUserSuperAdmin) {
           persistStateToLocaleStorage.setSkipped(false);
           setSkipped(false);
+          trackUsage('didLaunchGuidedtour');
         }
       }
 

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

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