@strapi/admin 4.2.0-beta.3 → 4.3.0-beta.1

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

@@ -0,0 +1,51 @@
+import React, { useReducer, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { ConfigurationsContext } from '../../contexts';
+import reducer, { initialState } from './reducer';
+
+const ConfigurationsProvider = ({
+  children,
+  authLogo,
+  menuLogo: defaultMenuLogo,
+  showReleaseNotification,
+  showTutorials,
+}) => {
+  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState);
+
+  const updateProjectSettings = ({ menuLogo }) => {
+    return dispatch({
+      type: 'UPDATE_PROJECT_SETTINGS',
+      values: {
+        menuLogo: menuLogo || defaultMenuLogo,
+      },
+    });
+  };
+
+  const updateProjectSettingsRef = useRef(updateProjectSettings);
+
+  return (
+    <ConfigurationsContext.Provider
+      value={{
+        logos: {
+          menu: { custom: menuLogo, default: defaultMenuLogo },
+          auth: { custom: null, default: authLogo },
+        },
+        updateProjectSettings: updateProjectSettingsRef.current,
+        showReleaseNotification,
+        showTutorials,
+      }}
+    >
+      {children}
+    </ConfigurationsContext.Provider>
+  );
+};
+
+ConfigurationsProvider.propTypes = {
+  authLogo: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired,
+  menuLogo: PropTypes.string.isRequired,
+  showReleaseNotification: PropTypes.bool.isRequired,
+  showTutorials: PropTypes.bool.isRequired,
+};
+
+export default ConfigurationsProvider;

package/admin/src/components/ConfigurationsProvider/reducer.js

@@ -0,0 +1,28 @@
+/* eslint-disable consistent-return */
+/*
+ *
+ * ConfigurationsProvider reducer
+ *
+ */
+
+import produce from 'immer';
+
+const initialState = {
+  menuLogo: null,
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'UPDATE_PROJECT_SETTINGS': {
+        Object.assign(draftState, action.values);
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

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

@@ -53,7 +53,9 @@ const LinkUser = styled(RouterNavLink)`
 const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const buttonRef = useRef();
   const [userLinksVisible, setUserLinksVisible] = useState(false);
-  const { menuLogo } = useConfigurations();
+  const {
+    logos: { menu },
+  } = useConfigurations();
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
   const { userDisplayName } = useAppInfos();
   const { formatMessage } = useIntl();
@@ -94,7 +96,15 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
           defaultMessage: 'Workplace',
         })}
         title={menuTitle}
-        icon={<img src={menuLogo} alt={menuTitle} />}
+        icon={
+          <img
+            src={menu.custom || menu.default}
+            alt={formatMessage({
+              id: 'app.components.LeftMenu.logo.alt',
+              defaultMessage: 'Application logo',
+            })}
+          />
+        }
       />
 
       <Divider />

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

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { QueryClientProvider, QueryClient } from 'react-query';
 import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
 import { Provider } from 'react-redux';
-import { AdminContext, ConfigurationsContext } from '../../contexts';
+import { AdminContext } from '../../contexts';
+import ConfigurationsProvider from '../ConfigurationsProvider';
 import LanguageProvider from '../LanguageProvider';
 import GuidedTour from '../GuidedTour';
 import AutoReloadOverlayBlockerProvider from '../AutoReloadOverlayBlockerProvider';
@@ -47,8 +48,11 @@ const Providers = ({
         <QueryClientProvider client={queryClient}>
           <Provider store={store}>
             <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-              <ConfigurationsContext.Provider
-                value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
+              <ConfigurationsProvider
+                authLogo={authLogo}
+                menuLogo={menuLogo}
+                showReleaseNotification={showReleaseNotification}
+                showTutorials={showTutorials}
               >
                 <StrapiAppProvider
                   getPlugin={getPlugin}
@@ -71,7 +75,7 @@ const Providers = ({
                     </LanguageProvider>
                   </LibraryProvider>
                 </StrapiAppProvider>
-              </ConfigurationsContext.Provider>
+              </ConfigurationsProvider>
             </AdminContext.Provider>
           </Provider>
         </QueryClientProvider>

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

@@ -7,9 +7,11 @@ const Img = styled.img`
 `;
 
 const Logo = () => {
-  const { authLogo } = useConfigurations();
+  const {
+    logos: { auth },
+  } = useConfigurations();
 
-  return <Img src={authLogo} aria-hidden alt="" />;
+  return <Img src={auth.default} aria-hidden alt="" />;
 };
 
 export default Logo;

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

@@ -15,12 +15,12 @@ import {
   useOverlayBlocker,
   useTracking,
   getYupInnerErrors,
+  getAPIInnerErrors,
 } from '@strapi/helper-plugin';
 
 import { getTrad, removeKeyInObject } from '../../utils';
 import reducer, { initialState } from './reducer';
 import { cleanData, createYupSchema } from './utils';
-import { getAPIInnerError } from './utils/getAPIInnerError';
 
 const EditViewDataManagerProvider = ({
   allLayoutData,
@@ -316,7 +316,7 @@ const EditViewDataManagerProvider = ({
       } catch (err) {
         errors = {
           ...errors,
-          ...getAPIInnerError(err),
+          ...getAPIInnerErrors(err),
         };
       }
 
@@ -352,7 +352,7 @@ const EditViewDataManagerProvider = ({
     } catch (err) {
       errors = {
         ...errors,
-        ...getAPIInnerError(err),
+        ...getAPIInnerErrors(err),
       };
     }
 

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

@@ -2,7 +2,8 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
-import Select, { createFilter } from 'react-select';
+import { createFilter } from 'react-select';
+import { ReactSelect as Select } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
@@ -24,7 +25,6 @@ function SelectMany({
   options,
   placeholder,
   searchToPersist,
-  styles,
   targetModel,
   value,
   description,
@@ -72,7 +72,6 @@ function SelectMany({
         placeholder={formatMessage(
           placeholder || { id: 'global.select', defaultMessage: 'Select...' }
         )}
-        styles={styles}
         value={[]}
       />
       <Box paddingTop={3} style={{ overflow: 'auto' }}>
@@ -138,7 +137,6 @@ SelectMany.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
   }),
   searchToPersist: PropTypes.string,
-  styles: PropTypes.object.isRequired,
   targetModel: PropTypes.string.isRequired,
   value: PropTypes.array,
   description: PropTypes.string,

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

@@ -2,7 +2,7 @@ import React, { useCallback, useState, useEffect, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
-import { useTheme } from 'styled-components';
+import { Stack } from '@strapi/design-system/Stack';
 import findIndex from 'lodash/findIndex';
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
@@ -16,18 +16,13 @@ import {
 } from '@strapi/helper-plugin';
 import { stringify } from 'qs';
 import axios from 'axios';
-import { Stack } from '@strapi/design-system/Stack';
 import { axiosInstance } from '../../../core/utils';
 import { getTrad } from '../../utils';
 import Label from './Label';
 import SelectOne from '../SelectOne';
 import SelectMany from '../SelectMany';
-import ClearIndicator from './ClearIndicator';
-import DropdownIndicator from './DropdownIndicator';
-import IndicatorSeparator from './IndicatorSeparator';
 import Option from './Option';
 import { connect, select } from './utils';
-import getSelectStyles from './utils/getSelectStyles';
 
 const initialPaginationState = {
   contains: '',
@@ -77,7 +72,6 @@ function SelectWrapper({
     onRemoveRelation,
   } = useCMEditViewDataManager();
   const { pathname } = useLocation();
-  const theme = useTheme();
 
   const value = get(modifiedData, name, null);
   const [state, setState] = useState(initialPaginationState);
@@ -278,8 +272,6 @@ function SelectWrapper({
     return <NotAllowedInput intlLabel={intlLabel} labelAction={labelAction} />;
   }
 
-  const styles = getSelectStyles(theme);
-
   return (
     <Stack spacing={1}>
       <Label
@@ -293,9 +285,6 @@ function SelectWrapper({
       <Component
         addRelation={handleAddRelation}
         components={{
-          ClearIndicator,
-          DropdownIndicator,
-          IndicatorSeparator,
           Option,
         }}
         displayNavigationLink={shouldDisplayRelationLink}
@@ -315,7 +304,6 @@ function SelectWrapper({
         onRemove={onRemoveRelation}
         placeholder={placeholder}
         searchToPersist={searchToPersist}
-        styles={styles}
         targetModel={targetModel}
         value={value}
         description={description}

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

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

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

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
+
+const fetchMarketplacePlugins = async () => {
+  const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`);
+
+  return data;
+};
+
+export { fetchMarketplacePlugins };

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

@@ -12,6 +12,7 @@ import {
   request,
   useNotification,
   TrackingContext,
+  prefixFileUrlWithBackendUrl,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system/Main';
@@ -23,6 +24,7 @@ import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 import { getUID } from './utils';
 import routes from './utils/routes';
+import { useConfigurations } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
@@ -30,6 +32,7 @@ const AuthenticatedApp = lazy(() =>
 
 function App() {
   const toggleNotification = useNotification();
+  const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
 
@@ -70,10 +73,12 @@ function App() {
       try {
         const {
           data: {
-            data: { hasAdmin, uuid },
+            data: { hasAdmin, uuid, menuLogo },
           },
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
+        updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
+
         if (uuid) {
           const {
             data: { data: properties },
@@ -113,7 +118,7 @@ function App() {
     };
 
     getData();
-  }, [toggleNotification]);
+  }, [toggleNotification, updateProjectSettings]);
 
   const setHasAdmin = hasAdmin => setState(prev => ({ ...prev, hasAdmin }));
 

package/admin/src/pages/MarketplacePage/components/{EmptyPluginSearch/EmptyPluginGrid.js → EmptyNpmPackageSearch/EmptyNpmPackageGrid.js}

@@ -9,7 +9,7 @@ const EmptyPluginCard = styled(Box)`
   opacity: 0.33;
 `;
 
-export const EmptyPluginGrid = () => {
+export const EmptyNpmPackageGrid = () => {
   return (
     <GridLayout>
       {Array(12)

package/admin/src/pages/MarketplacePage/components/{EmptyPluginSearch → EmptyNpmPackageSearch}/index.js

@@ -5,12 +5,12 @@ import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Icon } from '@strapi/design-system/Icon';
 import EmptyStateDocument from '@strapi/icons/EmptyDocuments';
-import { EmptyPluginGrid } from './EmptyPluginGrid';
+import { EmptyNpmPackageGrid } from './EmptyNpmPackageGrid';
 
-export const EmptyPluginSearch = ({ content }) => {
+const EmptyNpmPackageSearch = ({ content }) => {
   return (
     <Box position="relative">
-      <EmptyPluginGrid />
+      <EmptyNpmPackageGrid />
       <Box position="absolute" top={11} width="100%">
         <Flex alignItems="center" justifyContent="center" direction="column">
           <Icon as={EmptyStateDocument} color="" width="160px" height="88px" />
@@ -25,6 +25,8 @@ export const EmptyPluginSearch = ({ content }) => {
   );
 };
 
-EmptyPluginSearch.propTypes = {
+EmptyNpmPackageSearch.propTypes = {
   content: PropTypes.string.isRequired,
 };
+
+export default EmptyNpmPackageSearch;

package/admin/src/pages/MarketplacePage/components/{PluginCard → NpmPackageCard}/index.js

@@ -25,12 +25,18 @@ const EllipsisText = styled(Typography)`
   overflow: hidden;
 `;
 
-const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode }) => {
-  const { attributes } = plugin;
+const NpmPackageCard = ({
+  npmPackage,
+  installedPackageNames,
+  useYarn,
+  isInDevelopmentMode,
+  npmPackageType,
+}) => {
+  const { attributes } = npmPackage;
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
-  const isInstalled = installedPluginNames.includes(attributes.npmPackageName);
+  const isInstalled = installedPackageNames.includes(attributes.npmPackageName);
 
   const commandToCopy = useYarn
     ? `yarn add ${attributes.npmPackageName}`
@@ -41,6 +47,11 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
     defaultMessage: 'Made by Strapi',
   });
 
+  const npmPackageHref =
+    npmPackageType === 'provider'
+      ? attributes.npmPackageUrl
+      : `https://market.strapi.io/plugins/${attributes.slug}`;
+
   return (
     <Flex
       direction="column"
@@ -107,7 +118,7 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
       <Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
         <LinkButton
           size="S"
-          href={`https://market.strapi.io/plugins/${attributes.slug}`}
+          href={npmPackageHref}
           isExternal
           endIcon={<ExternalLink />}
           aria-label={formatMessage(
@@ -135,12 +146,12 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
   );
 };
 
-PluginCard.defaultProps = {
+NpmPackageCard.defaultProps = {
   isInDevelopmentMode: false,
 };
 
-PluginCard.propTypes = {
-  plugin: PropTypes.shape({
+NpmPackageCard.propTypes = {
+  npmPackage: PropTypes.shape({
     id: PropTypes.string.isRequired,
     attributes: PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -153,12 +164,13 @@ PluginCard.propTypes = {
       developerName: PropTypes.string.isRequired,
       validated: PropTypes.bool.isRequired,
       madeByStrapi: PropTypes.bool.isRequired,
-      strapiCompatibility: PropTypes.oneOf(['v3', 'v4']).isRequired,
+      strapiCompatibility: PropTypes.oneOf(['v3', 'v4']),
     }).isRequired,
   }).isRequired,
-  installedPluginNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  installedPackageNames: PropTypes.arrayOf(PropTypes.string).isRequired,
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool,
+  npmPackageType: PropTypes.string.isRequired,
 };
 
-export default PluginCard;
+export default NpmPackageCard;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import NpmPackageCard from '../NpmPackageCard';
+
+const NpmPackagesGrid = ({
+  npmPackages,
+  installedPackageNames,
+  useYarn,
+  isInDevelopmentMode,
+  npmPackageType,
+}) => {
+  return (
+    <Grid gap={4}>
+      {npmPackages.map(npmPackage => (
+        <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
+          <NpmPackageCard
+            npmPackage={npmPackage}
+            installedPackageNames={installedPackageNames}
+            useYarn={useYarn}
+            isInDevelopmentMode={isInDevelopmentMode}
+            npmPackageType={npmPackageType}
+          />
+        </GridItem>
+      ))}
+    </Grid>
+  );
+};
+
+NpmPackagesGrid.defaultProps = {
+  installedPackageNames: [],
+};
+
+NpmPackagesGrid.propTypes = {
+  npmPackages: PropTypes.array.isRequired,
+  installedPackageNames: PropTypes.arrayOf(PropTypes.string),
+  useYarn: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool.isRequired,
+  npmPackageType: PropTypes.string.isRequired,
+};
+
+export default NpmPackagesGrid;

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

@@ -6,10 +6,12 @@ import { LinkButton } from '@strapi/design-system/v2/LinkButton';
 import Upload from '@strapi/icons/Upload';
 import { useTracking } from '@strapi/helper-plugin';
 
-const PageHeader = ({ isOnline }) => {
+const PageHeader = ({ isOnline, npmPackageType }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
+  const tracking = npmPackageType === 'provider' ? 'didSubmitProvider' : 'didSubmitPlugin';
+
   return (
     <HeaderLayout
       title={formatMessage({
@@ -25,13 +27,13 @@ const PageHeader = ({ isOnline }) => {
           <LinkButton
             startIcon={<Upload />}
             variant="tertiary"
-            href="https://market.strapi.io/submit-plugin"
-            onClick={() => trackUsage('didSubmitPlugin')}
+            href={`https://market.strapi.io/submit-${npmPackageType}`}
+            onClick={() => trackUsage(tracking)}
             isExternal
           >
             {formatMessage({
-              id: 'admin.pages.MarketPlacePage.submit.plugin.link',
-              defaultMessage: 'Submit your plugin',
+              id: `admin.pages.MarketPlacePage.submit.${npmPackageType}.link`,
+              defaultMessage: `Submit ${npmPackageType}`,
             })}
           </LinkButton>
         )
@@ -42,6 +44,11 @@ const PageHeader = ({ isOnline }) => {
 
 export default PageHeader;
 
+PageHeader.defaultProps = {
+  npmPackageType: 'plugin',
+};
+
 PageHeader.propTypes = {
   isOnline: PropTypes.bool.isRequired,
+  npmPackageType: PropTypes.string,
 };