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

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/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/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';

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/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/InstalledPluginsPage/Plugins.js

@@ -1,26 +1,24 @@
 import React from 'react';
-import { useQuery } from 'react-query';
 import { useIntl } from 'react-intl';
-import { LoadingIndicatorPage, useNotification, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { LoadingIndicatorPage, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Typography } from '@strapi/design-system/Typography';
 import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
-import { fetchPlugins } from './utils/api';
+import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
 
 const Plugins = () => {
   const { formatMessage } = useIntl();
-  useFocusWhenNavigate();
   const { notifyStatus } = useNotifyAT();
-  const toggleNotification = useNotification();
+  useFocusWhenNavigate();
 
   const title = formatMessage({
     id: 'app.components.ListPluginsPage.title',
     defaultMessage: 'Plugins',
   });
 
-  const notifyLoad = () => {
+  const notifyPluginPageLoad = () => {
     notifyStatus(
       formatMessage(
         {
@@ -32,14 +30,7 @@ const Plugins = () => {
     );
   };
 
-  const { status, data } = useQuery('list-plugins', () => fetchPlugins(notifyLoad), {
-    onError: () => {
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error', defaultMessage: 'An error occured' },
-      });
-    },
-  });
+  const { status, data } = useFetchInstalledPlugins(notifyPluginPageLoad);
 
   const isLoading = status !== 'success' && status !== 'error';
 

package/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/EmptyPluginGrid.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+import { GridLayout } from '@strapi/design-system/Layout';
+
+const EmptyPluginCard = styled(Box)`
+  background: ${({ theme }) =>
+    `linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};
+  opacity: 0.33;
+`;
+
+export const EmptyPluginGrid = () => {
+  return (
+    <GridLayout>
+      {Array(12)
+        .fill(null)
+        .map((_, idx) => (
+          <EmptyPluginCard
+            // eslint-disable-next-line react/no-array-index-key
+            key={`empty-plugin-card-${idx}`}
+            height="234px"
+            hasRadius
+          />
+        ))}
+    </GridLayout>
+  );
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@strapi/design-system/Typography';
+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';
+
+export const EmptyPluginSearch = ({ content }) => {
+  return (
+    <Box position="relative">
+      <EmptyPluginGrid />
+      <Box position="absolute" top={11} width="100%">
+        <Flex alignItems="center" justifyContent="center" direction="column">
+          <Icon as={EmptyStateDocument} color="" width="160px" height="88px" />
+          <Box paddingTop={6}>
+            <Typography variant="delta" as="p" textColor="neutral600">
+              {content}
+            </Typography>
+          </Box>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+EmptyPluginSearch.propTypes = {
+  content: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
+import { Button } from '@strapi/design-system/Button';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import { Flex } from '@strapi/design-system/Flex';
+import { Icon } from '@strapi/design-system/Icon';
+import { Tooltip } from '@strapi/design-system/Tooltip';
+import ExternalLink from '@strapi/icons/ExternalLink';
+import Duplicate from '@strapi/icons/Duplicate';
+import Check from '@strapi/icons/Check';
+import CheckCircle from '@strapi/icons/CheckCircle';
+import { useNotification, useTracking } from '@strapi/helper-plugin';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg';
+
+// Custom component to have an ellipsis after the 2nd line
+const EllipsisText = styled(Typography)`
+  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
+  overflow: hidden;
+`;
+
+const PluginCard = ({ plugin, installedPluginNames, useYarn }) => {
+  const { attributes } = plugin;
+  const { formatMessage } = useIntl();
+  const toggleNotification = useNotification();
+  const { trackUsage } = useTracking();
+
+  const isInstalled = installedPluginNames.includes(attributes.npmPackageName);
+
+  const commandToCopy = useYarn
+    ? `yarn add ${attributes.npmPackageName}`
+    : `npm install ${attributes.npmPackageName}`;
+
+  const madeByStrapiMessage = formatMessage({
+    id: 'admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi',
+    defaultMessage: 'Made by Strapi',
+  });
+
+  return (
+    <Flex
+      direction="column"
+      justifyContent="space-between"
+      paddingTop={4}
+      paddingRight={6}
+      paddingBottom={4}
+      paddingLeft={6}
+      hasRadius
+      background="neutral0"
+      shadow="tableShadow"
+      height="100%"
+      alignItems="normal"
+    >
+      <Box>
+        <Box
+          as="img"
+          src={attributes.logo.url}
+          alt={`${attributes.name} logo`}
+          hasRadius
+          width={11}
+          height={11}
+        />
+        <Box paddingTop={4}>
+          <Typography as="h3" variant="delta">
+            <Flex alignItems="center">
+              {attributes.name}
+              {attributes.validated && !attributes.madeByStrapi && (
+                <Tooltip
+                  description={formatMessage({
+                    id: 'admin.pages.MarketPlacePage.plugin.tooltip.verified',
+                    defaultMessage: 'Plugin verified by Strapi',
+                  })}
+                >
+                  <Flex>
+                    <Icon as={CheckCircle} marginLeft={2} color="success600" />
+                  </Flex>
+                </Tooltip>
+              )}
+              {attributes.madeByStrapi && (
+                <Tooltip description={madeByStrapiMessage}>
+                  <Flex>
+                    <Box
+                      as="img"
+                      src={madeByStrapiIcon}
+                      alt={madeByStrapiMessage}
+                      marginLeft={1}
+                      width={6}
+                      height="auto"
+                    />
+                  </Flex>
+                </Tooltip>
+              )}
+            </Flex>
+          </Typography>
+        </Box>
+        <Box paddingTop={2}>
+          <EllipsisText as="p" variant="omega" textColor="neutral600">
+            {attributes.description}
+          </EllipsisText>
+        </Box>
+      </Box>
+
+      <Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
+        <LinkButton
+          size="S"
+          href={`https://market.strapi.io/plugins/${attributes.slug}`}
+          endIcon={<ExternalLink />}
+          aria-label={formatMessage(
+            {
+              id: 'admin.pages.MarketPlacePage.plugin.info.label',
+              defaultMessage: 'Learn more about {pluginName}',
+            },
+            { pluginName: attributes.name }
+          )}
+          variant="tertiary"
+          onClick={() => trackUsage('didPluginLearnMore')}
+        >
+          {formatMessage({
+            id: 'admin.pages.MarketPlacePage.plugin.info.text',
+            defaultMessage: 'Learn more',
+          })}
+        </LinkButton>
+        {isInstalled ? (
+          <Box paddingLeft={4}>
+            <Icon as={Check} marginRight={2} width={12} height={12} color="success600" />
+            <Typography variant="omega" textColor="success600" fontWeight="bold">
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.plugin.installed',
+                defaultMessage: 'Installed',
+              })}
+            </Typography>
+          </Box>
+        ) : (
+          <CopyToClipboard
+            onCopy={() => {
+              trackUsage('willInstallPlugin');
+              toggleNotification({
+                type: 'success',
+                message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+              });
+            }}
+            text={commandToCopy}
+          >
+            <Button size="S" startIcon={<Duplicate />} variant="secondary">
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.plugin.copy',
+                defaultMessage: 'Copy install command',
+              })}
+            </Button>
+          </CopyToClipboard>
+        )}
+      </Stack>
+    </Flex>
+  );
+};
+
+PluginCard.propTypes = {
+  plugin: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    attributes: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      slug: PropTypes.string.isRequired,
+      npmPackageName: PropTypes.string.isRequired,
+      npmPackageUrl: PropTypes.string.isRequired,
+      repositoryUrl: PropTypes.string.isRequired,
+      logo: PropTypes.object.isRequired,
+      developerName: PropTypes.string.isRequired,
+      validated: PropTypes.bool.isRequired,
+      madeByStrapi: PropTypes.bool.isRequired,
+      strapiCompatibility: PropTypes.oneOf(['v3', 'v4']).isRequired,
+    }).isRequired,
+  }).isRequired,
+  installedPluginNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  useYarn: PropTypes.bool.isRequired,
+};
+
+export default PluginCard;