@strapi/admin 4.2.0-alpha.O → 4.2.0-beta.2

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { ContentBox, useTracking } from '@strapi/helper-plugin';
+import GlassesSquare from '@strapi/icons/GlassesSquare';
+import ExternalLink from '@strapi/icons/ExternalLink';
+import { Icon } from '@strapi/design-system/Icon';
+
+const MissingPluginBanner = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <a
+      href="https://strapi.canny.io/plugin-requests"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      style={{ textDecoration: 'none' }}
+      onClick={() => trackUsage('didMissMarketplacePlugin')}
+    >
+      <ContentBox
+        title={formatMessage({
+          id: 'admin.pages.MarketPlacePage.missingPlugin.title',
+          defaultMessage: 'Documentation',
+        })}
+        subtitle={formatMessage({
+          id: 'admin.pages.MarketPlacePage.missingPlugin.description',
+          defaultMessage:
+            "Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration!",
+        })}
+        icon={<GlassesSquare />}
+        iconBackground="alternative100"
+        endAction={
+          <Icon as={ExternalLink} color="neutral600" width={3} height={3} marginLeft={2} />
+        }
+      />
+    </a>
+  );
+};
+
+export default MissingPluginBanner;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { HeaderLayout } from '@strapi/design-system/Layout';
+import { LinkButton } from '@strapi/design-system/LinkButton';
+import Upload from '@strapi/icons/Upload';
+import { useTracking } from '@strapi/helper-plugin';
+
+const PageHeader = ({ isOnline }) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <HeaderLayout
+      title={formatMessage({
+        id: 'global.marketplace',
+        defaultMessage: 'Marketplace',
+      })}
+      subtitle={formatMessage({
+        id: 'admin.pages.MarketPlacePage.subtitle',
+        defaultMessage: 'Get more out of Strapi',
+      })}
+      primaryAction={
+        isOnline && (
+          <LinkButton
+            startIcon={<Upload />}
+            variant="tertiary"
+            href="https://market.strapi.io/submit-plugin"
+            onClick={() => trackUsage('didSubmitPlugin')}
+          >
+            {formatMessage({
+              id: 'admin.pages.MarketPlacePage.submit.plugin.link',
+              defaultMessage: 'Submit your plugin',
+            })}
+          </LinkButton>
+        )
+      }
+    />
+  );
+};
+
+export default PageHeader;
+
+PageHeader.propTypes = {
+  isOnline: PropTypes.bool.isRequired,
+};

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useNotification, useTracking } from '@strapi/helper-plugin';
+import { Box } from '@strapi/design-system/Box';
+import { Icon } from '@strapi/design-system/Icon';
+import { Typography } from '@strapi/design-system/Typography';
+import Check from '@strapi/icons/Check';
+import Duplicate from '@strapi/icons/Duplicate';
+import { Button } from '@strapi/design-system/Button';
+
+const InstallPluginButton = ({ isInstalled, isInDevelopmentMode, commandToCopy }) => {
+  const toggleNotification = useNotification();
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  // Already installed
+  if (isInstalled) {
+    return (
+      <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>
+    );
+  }
+
+  // In development, show install button
+  if (isInDevelopmentMode) {
+    return (
+      <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>
+    );
+  }
+
+  // Not in development and plugin not installed already. Show nothing
+  return null;
+};
+
+InstallPluginButton.propTypes = {
+  isInstalled: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool.isRequired,
+  commandToCopy: PropTypes.string.isRequired,
+};
+
+export default InstallPluginButton;

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

@@ -0,0 +1,163 @@
+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 { 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 CheckCircle from '@strapi/icons/CheckCircle';
+import { useTracking } from '@strapi/helper-plugin';
+import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg';
+import InstallPluginButton from './InstallPluginButton';
+
+// 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, isInDevelopmentMode }) => {
+  const { attributes } = plugin;
+  const { formatMessage } = useIntl();
+  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>
+        <InstallPluginButton
+          isInstalled={isInstalled}
+          isInDevelopmentMode={isInDevelopmentMode}
+          commandToCopy={commandToCopy}
+        />
+      </Stack>
+    </Flex>
+  );
+};
+
+PluginCard.defaultProps = {
+  isInDevelopmentMode: false,
+};
+
+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,
+  isInDevelopmentMode: PropTypes.bool,
+};
+
+export default PluginCard;