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

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

@@ -12,7 +12,6 @@ import {
   useNotification,
   useAppInfos,
 } from '@strapi/helper-plugin';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Searchbar } from '@strapi/design-system/Searchbar';
@@ -20,20 +19,22 @@ import { Box } from '@strapi/design-system/Box';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Typography } from '@strapi/design-system/Typography';
 import { Flex } from '@strapi/design-system/Flex';
+import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
 
-import PluginCard from './components/PluginCard';
-import { EmptyPluginSearch } from './components/EmptyPluginSearch';
+import EmptyNpmPackageSearch from './components/EmptyNpmPackageSearch';
 import PageHeader from './components/PageHeader';
 import { fetchAppInformation } from './utils/api';
 import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
+import useFetchMarketplaceProviders from '../../hooks/useFetchMarketplaceProviders';
 import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
 import adminPermissions from '../../permissions';
 import offlineCloud from '../../assets/images/icon_offline-cloud.svg';
 import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
 import MissingPluginBanner from './components/MissingPluginBanner';
+import NpmPackagesGrid from './components/NpmPackagesGrid';
 
-const matchSearch = (plugins, search) => {
-  return matchSorter(plugins, search, {
+const matchSearch = (npmPackages, search) => {
+  return matchSorter(npmPackages, search, {
     keys: [
       {
         threshold: matchSorter.rankings.WORD_STARTS_WITH,
@@ -51,6 +52,7 @@ const MarketPlacePage = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
+  const [npmPackageType, setNpmPackageType] = useState('plugin');
   const { autoReload: isInDevelopmentMode } = useAppInfos();
   const isOnline = useNavigatorOnLine();
 
@@ -78,6 +80,11 @@ const MarketPlacePage = () => {
     data: marketplacePluginsResponse,
   } = useFetchMarketplacePlugins(notifyMarketplaceLoad);
 
+  const {
+    status: marketplaceProvidersStatus,
+    data: marketplaceProvidersResponse,
+  } = useFetchMarketplaceProviders(notifyMarketplaceLoad);
+
   const {
     status: installedPluginsStatus,
     data: installedPluginsResponse,
@@ -96,13 +103,19 @@ const MarketPlacePage = () => {
     }
   );
 
-  const isLoading = [marketplacePluginsStatus, installedPluginsStatus, appInfoStatus].includes(
-    'loading'
-  );
+  const isLoading = [
+    marketplacePluginsStatus,
+    marketplaceProvidersStatus,
+    installedPluginsStatus,
+    appInfoStatus,
+  ].includes('loading');
 
-  const hasFailed = [marketplacePluginsStatus, installedPluginsStatus, appInfoStatus].includes(
-    'error'
-  );
+  const hasFailed = [
+    marketplacePluginsStatus,
+    marketplaceProvidersStatus,
+    installedPluginsStatus,
+    appInfoStatus,
+  ].includes('error');
 
   useEffect(() => {
     trackUsageRef.current('didGoToMarketplace');
@@ -179,7 +192,23 @@ const MarketPlacePage = () => {
     );
   }
 
-  const searchResults = matchSearch(marketplacePluginsResponse.data, searchQuery);
+  // Search for plugins and providers that match the search query
+  const pluginSearchResults = matchSearch(marketplacePluginsResponse.data, searchQuery);
+  const providerSearchResults = matchSearch(marketplaceProvidersResponse.data, searchQuery);
+  const emptySearchMessage = formatMessage(
+    {
+      id: 'admin.pages.MarketPlacePage.search.empty',
+      defaultMessage: 'No result for "{target}"',
+    },
+    { target: searchQuery }
+  );
+
+  const handleTabChange = selected => {
+    const packageType = selected === 0 ? 'plugin' : 'provider';
+    setNpmPackageType(packageType);
+  };
+
+  // Check if plugins are installed already
   const installedPluginNames = installedPluginsResponse.plugins.map(plugin => plugin.packageName);
 
   return (
@@ -191,7 +220,7 @@ const MarketPlacePage = () => {
             defaultMessage: 'Marketplace - Plugins',
           })}
         />
-        <PageHeader isOnline={isOnline} />
+        <PageHeader isOnline={isOnline} npmPackageType={npmPackageType} />
         <ContentLayout>
           <Box width="25%" paddingBottom={4}>
             <Searchbar
@@ -201,43 +230,76 @@ const MarketPlacePage = () => {
               onChange={e => setSearchQuery(e.target.value)}
               clearLabel={formatMessage({
                 id: 'admin.pages.MarketPlacePage.search.clear',
-                defaultMessage: 'Clear the plugin search',
+                defaultMessage: 'Clear the search',
               })}
               placeholder={formatMessage({
                 id: 'admin.pages.MarketPlacePage.search.placeholder',
-                defaultMessage: 'Search for a plugin',
+                defaultMessage: 'Search',
               })}
             >
               {formatMessage({
                 id: 'admin.pages.MarketPlacePage.search.placeholder',
-                defaultMessage: 'Search for a plugin',
+                defaultMessage: 'Search',
               })}
             </Searchbar>
           </Box>
-          {searchQuery.length > 0 && !searchResults.length ? (
-            <EmptyPluginSearch
-              content={formatMessage(
-                {
-                  id: 'admin.pages.MarketPlacePage.search.empty',
-                  defaultMessage: 'No result for "{target}"',
-                },
-                { target: searchQuery }
-              )}
-            />
-          ) : (
-            <Grid gap={4}>
-              {searchResults.map(plugin => (
-                <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={plugin.id}>
-                  <PluginCard
-                    plugin={plugin}
-                    installedPluginNames={installedPluginNames}
+          <TabGroup
+            label={formatMessage({
+              id: 'admin.pages.MarketPlacePage.tab-group.label',
+              defaultMessage: 'Plugins and Providers for Strapi',
+            })}
+            id="tabs"
+            variant="simple"
+            onTabChange={handleTabChange}
+          >
+            <Box paddingBottom={4}>
+              <Tabs>
+                <Tab>
+                  {formatMessage({
+                    id: 'admin.pages.MarketPlacePage.plugins',
+                    defaultMessage: 'Plugins',
+                  })}{' '}
+                  ({pluginSearchResults.length})
+                </Tab>
+                <Tab>
+                  {formatMessage({
+                    id: 'admin.pages.MarketPlacePage.providers',
+                    defaultMessage: 'Providers',
+                  })}{' '}
+                  ({providerSearchResults.length})
+                </Tab>
+              </Tabs>
+            </Box>
+            <TabPanels>
+              {/* Plugins panel */}
+              <TabPanel>
+                {searchQuery.length > 0 && !pluginSearchResults.length ? (
+                  <EmptyNpmPackageSearch content={emptySearchMessage} />
+                ) : (
+                  <NpmPackagesGrid
+                    npmPackages={pluginSearchResults}
+                    installedPackageNames={installedPluginNames}
+                    useYarn={appInfoResponse.data.useYarn}
+                    isInDevelopmentMode={isInDevelopmentMode}
+                    npmPackageType="plugin"
+                  />
+                )}
+              </TabPanel>
+              {/* Providers panel */}
+              <TabPanel>
+                {searchQuery.length > 0 && !providerSearchResults.length ? (
+                  <EmptyNpmPackageSearch content={emptySearchMessage} />
+                ) : (
+                  <NpmPackagesGrid
+                    npmPackages={providerSearchResults}
                     useYarn={appInfoResponse.data.useYarn}
                     isInDevelopmentMode={isInDevelopmentMode}
+                    npmPackageType="provider"
                   />
-                </GridItem>
-              ))}
-            </Grid>
-          )}
+                )}
+              </TabPanel>
+            </TabPanels>
+          </TabGroup>
           <Box paddingTop={7}>
             <MissingPluginBanner />
           </Box>

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/index.js

@@ -0,0 +1,85 @@
+import React, { useReducer, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useTracking } from '@strapi/helper-plugin';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import LogoInput from '../LogoInput';
+import { useConfigurations } from '../../../../../../hooks';
+import reducer, { initialState } from './reducer';
+import init from './init';
+
+const Form = forwardRef(({ projectSettingsStored }, ref) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const {
+    logos: { menu },
+  } = useConfigurations();
+  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, projectSettingsStored)
+  );
+
+  const handleChangeMenuLogo = asset => {
+    dispatch({
+      type: 'SET_CUSTOM_MENU_LOGO',
+      value: asset,
+    });
+  };
+
+  const handleResetMenuLogo = () => {
+    trackUsage('didClickResetLogo');
+
+    dispatch({
+      type: 'RESET_CUSTOM_MENU_LOGO',
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    getValues: () => ({ menuLogo: menuLogo.submit }),
+  }));
+
+  return (
+    <Box
+      hasRadius
+      background="neutral0"
+      shadow="tableShadow"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingRight={7}
+      paddingLeft={7}
+    >
+      <Typography variant="delta" as="h3">
+        {formatMessage({
+          id: 'Settings.application.customization',
+          defaultMessage: 'Customization',
+        })}
+      </Typography>
+      <Grid paddingTop={4}>
+        <GridItem col={6} s={12}>
+          <LogoInput
+            onChangeLogo={handleChangeMenuLogo}
+            customLogo={menuLogo.display}
+            defaultLogo={menu.default}
+            onResetMenuLogo={handleResetMenuLogo}
+          />
+        </GridItem>
+      </Grid>
+    </Box>
+  );
+});
+
+Form.defaultProps = {
+  projectSettingsStored: null,
+};
+
+Form.propTypes = {
+  projectSettingsStored: PropTypes.shape({
+    menuLogo: PropTypes.shape({
+      url: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  }),
+};
+
+export default Form;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/init.js

@@ -0,0 +1,13 @@
+import merge from 'lodash/merge';
+
+const init = (initialState, projectSettingsStored) => {
+  const copyInitialState = merge(initialState, {
+    menuLogo: {
+      display: projectSettingsStored.menuLogo,
+    },
+  });
+
+  return copyInitialState;
+};
+
+export default init;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/reducer.js

@@ -0,0 +1,43 @@
+/* eslint-disable consistent-return */
+/*
+ *
+ * ApplicationInfosPage Form reducer
+ *
+ */
+
+import produce from 'immer';
+
+const initialState = {
+  menuLogo: {
+    display: null,
+    submit: {
+      rawFile: null,
+      isReset: false,
+    },
+  },
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'SET_CUSTOM_MENU_LOGO': {
+        draftState.menuLogo.display = action.value;
+        draftState.menuLogo.submit.rawFile = action.value.rawFile;
+        break;
+      }
+      case 'RESET_CUSTOM_MENU_LOGO': {
+        draftState.menuLogo.display = null;
+        draftState.menuLogo.submit = {
+          rawFile: null,
+          isReset: true,
+        };
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js

@@ -0,0 +1,118 @@
+import React, { useReducer } from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { CarouselInput, CarouselSlide, CarouselActions } from '@strapi/design-system/CarouselInput';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Box } from '@strapi/design-system/Box';
+import Plus from '@strapi/icons/Plus';
+import Refresh from '@strapi/icons/Refresh';
+import reducer, { initialState } from './reducer';
+import LogoModalStepper from '../LogoModalStepper';
+import { SIZE, DIMENSION } from '../../utils/constants';
+import stepper from './stepper';
+
+const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) => {
+  const [{ currentStep }, dispatch] = useReducer(reducer, initialState);
+  const { Component, next, prev, modalTitle } = stepper[currentStep] || {};
+  const { formatMessage } = useIntl();
+
+  const goTo = to => {
+    dispatch({
+      type: 'GO_TO',
+      to,
+    });
+  };
+
+  return (
+    <>
+      <CarouselInput
+        label={formatMessage({
+          id: 'Settings.application.customization.carousel.title',
+          defaultMessage: 'Logo',
+        })}
+        selectedSlide={0}
+        hint={formatMessage(
+          {
+            id: 'Settings.application.customization.carousel-hint',
+            defaultMessage:
+              'Change the admin panel logo (Max dimension: {dimension}x{dimension}, Max file size: {size}KB)',
+          },
+          { size: SIZE, dimension: DIMENSION }
+        )}
+        // Carousel is used here for a single media,
+        // we don't need previous and next labels but these props are required
+        previousLabel=""
+        nextLabel=""
+        onNext={() => {}}
+        onPrevious={() => {}}
+        secondaryLabel={customLogo?.name || 'logo.png'}
+        actions={
+          <CarouselActions>
+            <IconButton
+              onClick={() => goTo(customLogo ? 'pending' : 'upload')}
+              label={formatMessage({
+                id: 'Settings.application.customization.carousel.change-action',
+                defaultMessage: 'Change logo',
+              })}
+              icon={<Plus />}
+            />
+            {customLogo && (
+              <IconButton
+                onClick={onResetMenuLogo}
+                label={formatMessage({
+                  id: 'Settings.application.customization.carousel.reset-action',
+                  defaultMessage: 'Reset logo',
+                })}
+                icon={<Refresh />}
+              />
+            )}
+          </CarouselActions>
+        }
+      >
+        <CarouselSlide
+          label={formatMessage({
+            id: 'Settings.application.customization.carousel-slide.label',
+            defaultMessage: 'Logo slide',
+          })}
+        >
+          <Box
+            maxHeight="40%"
+            maxWidth="40%"
+            as="img"
+            src={customLogo?.url || defaultLogo}
+            alt={formatMessage({
+              id: 'Settings.application.customization.carousel.title',
+              defaultMessage: 'Logo',
+            })}
+          />
+        </CarouselSlide>
+      </CarouselInput>
+      <LogoModalStepper
+        Component={Component}
+        currentStep={currentStep}
+        onChangeLogo={onChangeLogo}
+        customLogo={customLogo}
+        goTo={goTo}
+        next={next}
+        prev={prev}
+        modalTitle={modalTitle}
+      />
+    </>
+  );
+};
+
+LogoInput.defaultProps = {
+  customLogo: null,
+};
+
+LogoInput.propTypes = {
+  customLogo: PropTypes.shape({
+    url: PropTypes.string,
+    name: PropTypes.string,
+  }),
+  defaultLogo: PropTypes.string.isRequired,
+  onChangeLogo: PropTypes.func.isRequired,
+  onResetMenuLogo: PropTypes.func.isRequired,
+};
+
+export default LogoInput;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/reducer.js

@@ -0,0 +1,28 @@
+/* eslint-disable consistent-return */
+/*
+ *
+ * LogoInput reducer
+ *
+ */
+
+import produce from 'immer';
+
+const initialState = {
+  currentStep: undefined,
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GO_TO': {
+        draftState.currentStep = action.to;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/stepper.js

@@ -0,0 +1,25 @@
+import AddLogoDialog from '../LogoModalStepper/AddLogoDialog';
+import PendingLogoDialog from '../LogoModalStepper/PendingLogoDialog';
+
+const stepper = {
+  upload: {
+    Component: AddLogoDialog,
+    modalTitle: {
+      id: 'Settings.application.customization.modal.upload',
+      defaultMessage: 'Upload logo',
+    },
+    next: 'pending',
+    prev: null,
+  },
+  pending: {
+    Component: PendingLogoDialog,
+    modalTitle: {
+      id: 'Settings.application.customization.modal.pending',
+      defaultMessage: 'Pending logo',
+    },
+    next: null,
+    prev: 'upload',
+  },
+};
+
+export default stepper;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
+import { Box } from '@strapi/design-system/Box';
+import { Divider } from '@strapi/design-system/Divider';
+import FromComputerForm from './FromComputerForm';
+import FromUrlForm from './FromUrlForm';
+
+const AddLogoDialog = ({ setLocalImage, goTo, next, onClose }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <TabGroup
+      label={formatMessage({
+        id: 'Settings.application.customization.modal.tab.label',
+        defaultMessage: 'How do you want to upload your assets?',
+      })}
+      variant="simple"
+    >
+      <Box paddingLeft={8} paddingRight={8}>
+        <Tabs>
+          <Tab>
+            {formatMessage({
+              id: 'Settings.application.customization.modal.upload.from-computer',
+              defaultMessage: 'From computer',
+            })}
+          </Tab>
+          <Tab>
+            {formatMessage({
+              id: 'Settings.application.customization.modal.upload.from-url',
+              defaultMessage: 'From url',
+            })}
+          </Tab>
+        </Tabs>
+
+        <Divider />
+      </Box>
+      <TabPanels>
+        <TabPanel>
+          <FromComputerForm
+            onClose={onClose}
+            setLocalImage={setLocalImage}
+            goTo={goTo}
+            next={next}
+          />
+        </TabPanel>
+        <TabPanel>
+          <FromUrlForm onClose={onClose} setLocalImage={setLocalImage} goTo={goTo} next={next} />
+        </TabPanel>
+      </TabPanels>
+    </TabGroup>
+  );
+};
+
+AddLogoDialog.defaultProps = {
+  next: null,
+};
+
+AddLogoDialog.propTypes = {
+  goTo: PropTypes.func.isRequired,
+  next: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  setLocalImage: PropTypes.func.isRequired,
+};
+
+export default AddLogoDialog;