@strapi/admin 4.1.4-alpha.2 → 4.2.0-alpha.5

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

@@ -0,0 +1,185 @@
+/**
+ *
+ * PluginCard
+ *
+ */
+/* eslint-disable */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Button, PopUpWarning, CheckPermissions } from '@strapi/helper-plugin';
+import adminPermissions from '../../../permissions';
+import Wrapper from './Wrapper';
+
+/* eslint-disable react/no-unused-state */
+class PluginCard extends React.Component {
+  state = {
+    boostrapCol: 'col-lg-4',
+    showModalAutoReload: false,
+    showModalEnv: false,
+  };
+
+  componentDidMount() {
+    // Listen window resize.
+    window.addEventListener('resize', this.setBoostrapCol);
+    this.setBoostrapCol();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.setBoostrapCol);
+  }
+
+  setBoostrapCol = () => {
+    let boostrapCol = 'col-lg-4';
+
+    if (window.innerWidth > 1680) {
+      boostrapCol = 'col-lg-3';
+    }
+
+    if (window.innerWidth > 2300) {
+      boostrapCol = 'col-lg-2';
+    }
+
+    this.setState({ boostrapCol });
+  };
+
+  handleDownloadPlugin = e => {
+    const {
+      autoReload,
+      currentEnvironment,
+      downloadPlugin,
+      history: { push },
+      isAlreadyInstalled,
+      plugin: { id },
+    } = this.props;
+
+    if (!autoReload) {
+      this.setState({ showModalAutoReload: true });
+    } else if (currentEnvironment !== 'development') {
+      this.setState({ showModalEnv: true });
+    } else if (!isAlreadyInstalled) {
+      downloadPlugin(id);
+    } else {
+      push('/list-plugins');
+    }
+  };
+
+  render() {
+    const buttonClass = !this.props.isAlreadyInstalled ? 'primary' : 'secondary';
+    const buttonLabel = this.props.isAlreadyInstalled
+      ? 'app.components.PluginCard.Button.label.install'
+      : 'app.components.PluginCard.Button.label.download';
+
+    const settingsComponent = null;
+
+    const descriptions = {
+      short:
+        this.props.plugin.id === 'support-us' ? (
+          <FormattedMessage id={this.props.plugin.description.short} />
+        ) : (
+          this.props.plugin.description.short
+        ),
+      long:
+        this.props.plugin.id === 'support-us' ? (
+          <FormattedMessage
+            id={this.props.plugin.description.long || this.props.plugin.description.short}
+          />
+        ) : (
+          this.props.plugin.description.long || this.props.plugin.description.short
+        ),
+    };
+
+    return (
+      <Wrapper className={this.state.boostrapCol}>
+        <div className="wrapper">
+          <div className="cardTitle">
+            <div className="frame">
+              <span className="helper" />
+              <img src={this.props.plugin.logo} alt="icon" />
+            </div>
+            <div
+              onClick={e => {
+                // FIXME: dead link as we are changing the naming. Would be better to use a url comming from the api call directly
+                window.open(
+                  `https://github.com/strapi/strapi/tree/master/packages/strapi-plugin-${this.props.plugin.id}`,
+                  '_blank'
+                );
+              }}
+            >
+              {this.props.plugin.name} <i className="fa fa-external-link-alt" />
+            </div>
+          </div>
+          <div className="cardDescription">{descriptions.long}</div>
+          <div className="cardFooter" onClick={e => e.stopPropagation()}>
+            <div className="cardFooterButton">
+              <CheckPermissions permissions={adminPermissions.marketplace.install}>
+                <Button
+                  className={`${buttonClass} button`}
+                  label={buttonLabel}
+                  type="button"
+                  onClick={this.handleDownloadPlugin}
+                />
+              </CheckPermissions>
+            </div>
+            {this.props.isAlreadyInstalled ? (
+              settingsComponent
+            ) : (
+              <div className="compatible">
+                <i className={`fa fa-${this.props.plugin.isCompatible ? 'check' : 'times'}`} />
+                <FormattedMessage
+                  id={`app.components.PluginCard.compatible${
+                    this.props.plugin.id === 'support-us' ? 'Community' : ''
+                  }`}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        <PopUpWarning
+          content={{
+            message: 'app.components.PluginCard.PopUpWarning.install.impossible.autoReload.needed',
+            title: 'app.components.PluginCard.PopUpWarning.install.impossible.title',
+            confirm: 'app.components.PluginCard.PopUpWarning.install.impossible.confirm',
+          }}
+          isOpen={this.state.showModalAutoReload}
+          onlyConfirmButton
+          onConfirm={() => this.setState({ showModalAutoReload: false })}
+          popUpWarningType="warning"
+        />
+        <PopUpWarning
+          content={{
+            message: 'app.components.PluginCard.PopUpWarning.install.impossible.environment',
+            title: 'app.components.PluginCard.PopUpWarning.install.impossible.title',
+            confirm: 'app.components.PluginCard.PopUpWarning.install.impossible.confirm',
+          }}
+          isOpen={this.state.showModalEnv}
+          onlyConfirmButton
+          onConfirm={() => this.setState({ showModalEnv: false })}
+          popUpWarningType="warning"
+        />
+      </Wrapper>
+    );
+  }
+}
+
+PluginCard.defaultProps = {
+  isAlreadyInstalled: false,
+  plugin: {
+    description: '',
+    id: '',
+    name: '',
+    price: 0,
+    ratings: 5,
+  },
+};
+
+PluginCard.propTypes = {
+  currentEnvironment: PropTypes.string.isRequired,
+  downloadPlugin: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
+  isAlreadyInstalled: PropTypes.bool,
+  plugin: PropTypes.object,
+};
+
+export default PluginCard;

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div``;
+
+export default Wrapper;

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

@@ -1,219 +1,127 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
-import { useQuery } from 'react-query';
-import matchSorter from 'match-sorter';
-import {
-  AnErrorOccurred,
-  CheckPagePermissions,
-  useFocusWhenNavigate,
-  useTracking,
-  LoadingIndicatorPage,
-  useNotification,
-} from '@strapi/helper-plugin';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { pxToRem, CheckPagePermissions, useTracking } from '@strapi/helper-plugin';
 import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Searchbar } from '@strapi/design-system/Searchbar';
+import { Flex } from '@strapi/design-system/Flex';
 import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
 import { LinkButton } from '@strapi/design-system/LinkButton';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import Upload from '@strapi/icons/Upload';
-
-import PluginCard from './components/PluginCard';
-import { EmptyPluginSearch } from './components/EmptyPluginSearch';
-import { fetchAppInformation } from './utils/api';
-import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
-import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
+import { Main } from '@strapi/design-system/Main';
+import { Typography } from '@strapi/design-system/Typography';
+import ExternalLink from '@strapi/icons/ExternalLink';
 import adminPermissions from '../../permissions';
+import MarketplacePicture from './assets/marketplace-coming-soon.png';
 
-const matchSearch = (plugins, search) => {
-  return matchSorter(plugins, search, {
-    keys: [
-      {
-        threshold: matchSorter.rankings.WORD_STARTS_WITH,
-        key: 'attributes.name',
-      },
-      { threshold: matchSorter.rankings.WORD_STARTS_WITH, key: 'attributes.description' },
-    ],
-  });
-};
+const CenterTypography = styled(Typography)`
+  text-align: center;
+`;
+
+const Img = styled.img`
+  width: ${190 / 16}rem;
+`;
+
+const StackCentered = styled(Stack)`
+  align-items: center;
+`;
 
 const MarketPlacePage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
-  const { notifyStatus } = useNotifyAT();
-  const trackUsageRef = useRef(trackUsage);
-  const toggleNotification = useNotification();
-  const [searchQuery, setSearchQuery] = useState('');
-
-  useFocusWhenNavigate();
-
-  const marketplaceTitle = formatMessage({
-    id: 'admin.pages.MarketPlacePage.title',
-    defaultMessage: 'Marketplace',
-  });
-
-  const notifyMarketplaceLoad = () => {
-    notifyStatus(
-      formatMessage(
-        {
-          id: 'app.utils.notify.data-loaded',
-          defaultMessage: 'The {target} has loaded',
-        },
-        { target: marketplaceTitle }
-      )
-    );
-  };
-
-  const {
-    status: marketplacePluginsStatus,
-    data: marketplacePluginsResponse,
-  } = useFetchMarketplacePlugins(notifyMarketplaceLoad);
-
-  const {
-    status: installedPluginsStatus,
-    data: installedPluginsResponse,
-  } = useFetchInstalledPlugins();
-
-  const { data: appInfoResponse, status: appInfoStatus } = useQuery(
-    'app-information',
-    fetchAppInformation,
-    {
-      onError: () => {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occured' },
-        });
-      },
-    }
-  );
-
-  const isLoading = [marketplacePluginsStatus, installedPluginsStatus, appInfoStatus].includes(
-    'loading'
-  );
-
-  const hasFailed = [marketplacePluginsStatus, installedPluginsStatus, appInfoStatus].includes(
-    'error'
-  );
 
   useEffect(() => {
-    trackUsageRef.current('didGoToMarketplace');
-  }, []);
+    trackUsage('didGoToMarketplace');
+  }, [trackUsage]);
 
-  if (hasFailed) {
-    return (
-      <Layout>
-        <ContentLayout>
-          <Box paddingTop={8}>
-            <AnErrorOccurred />
-          </Box>
-        </ContentLayout>
-      </Layout>
-    );
-  }
-
-  if (isLoading) {
-    return (
+  return (
+    <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
       <Layout>
-        <Main aria-busy>
-          <LoadingIndicatorPage />
+        <Main>
+          <Helmet
+            title={formatMessage({
+              id: 'admin.pages.MarketPlacePage.helmet',
+              defaultMessage: 'Marketplace - Plugins',
+            })}
+          />
+          <HeaderLayout
+            title={formatMessage({
+              id: 'admin.pages.MarketPlacePage.title',
+              defaultMessage: 'Marketplace',
+            })}
+            subtitle={formatMessage({
+              id: 'admin.pages.MarketPlacePage.subtitle',
+              defaultMessage: 'Get more out of Strapi',
+            })}
+          />
+          <ContentLayout>
+            <StackCentered
+              spacing={0}
+              hasRadius
+              background="neutral0"
+              shadow="tableShadow"
+              paddingTop={10}
+              paddingBottom={10}
+            >
+              <Box paddingBottom={7}>
+                <Img
+                  alt={formatMessage({
+                    id: 'admin.pages.MarketPlacePage.illustration',
+                    defaultMessage: 'marketplace illustration',
+                  })}
+                  src={MarketplacePicture}
+                />
+              </Box>
+              <Typography variant="alpha">
+                {formatMessage({
+                  id: 'admin.pages.MarketPlacePage.coming-soon.1',
+                  defaultMessage: 'A new way to make Strapi awesome.',
+                })}
+              </Typography>
+              <Typography variant="alpha" textColor="primary700">
+                {formatMessage({
+                  id: 'admin.pages.MarketPlacePage.published',
+                  defaultMessage: 'Finally here.',
+                })}
+              </Typography>
+              <Flex maxWidth={pxToRem(620)} paddingTop={3}>
+                <CenterTypography variant="epsilon" textColor="neutral600">
+                  {formatMessage({
+                    id: 'admin.pages.MarketPlacePage.content.subtitle.published',
+                    defaultMessage:
+                      'The web marketplace helps you get the most of Strapi. In addition, we are working hard to offer the best experience to discover and install plugins, directly from the app.',
+                  })}
+                </CenterTypography>
+              </Flex>
+              <Stack paddingTop={6} horizontal spacing={2}>
+                <LinkButton
+                  href="https://market.strapi.io"
+                  size="L"
+                  variant="primary"
+                  endIcon={<ExternalLink />}
+                >
+                  {formatMessage({
+                    id: 'admin.pages.MarketPlacePage.submit.market.link',
+                    defaultMessage: 'Visit the web marketplace',
+                  })}
+                </LinkButton>
+                <LinkButton
+                  href="https://market.strapi.io/submit-plugin"
+                  size="L"
+                  variant="secondary"
+                >
+                  {formatMessage({
+                    id: 'admin.pages.MarketPlacePage.submit.plugin.link',
+                    defaultMessage: 'Submit your plugin',
+                  })}
+                </LinkButton>
+              </Stack>
+            </StackCentered>
+          </ContentLayout>
         </Main>
       </Layout>
-    );
-  }
-
-  const searchResults = matchSearch(marketplacePluginsResponse.data, searchQuery);
-  const installedPluginNames = installedPluginsResponse.plugins.map(plugin => plugin.packageName);
-
-  return (
-    <Layout>
-      <Main>
-        <Helmet
-          title={formatMessage({
-            id: 'admin.pages.MarketPlacePage.helmet',
-            defaultMessage: 'Marketplace - Plugins',
-          })}
-        />
-        <HeaderLayout
-          title={formatMessage({
-            id: 'admin.pages.MarketPlacePage.title',
-            defaultMessage: 'Marketplace',
-          })}
-          subtitle={formatMessage({
-            id: 'admin.pages.MarketPlacePage.subtitle',
-            defaultMessage: 'Get more out of Strapi',
-          })}
-          primaryAction={
-            <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>
-          }
-        />
-        <ContentLayout>
-          <Box width="25%" paddingBottom={4}>
-            <Searchbar
-              name="searchbar"
-              onClear={() => setSearchQuery('')}
-              value={searchQuery}
-              onChange={e => setSearchQuery(e.target.value)}
-              clearLabel={formatMessage({
-                id: 'admin.pages.MarketPlacePage.search.clear',
-                defaultMessage: 'Clear the plugin search',
-              })}
-              placeholder={formatMessage({
-                id: 'admin.pages.MarketPlacePage.search.placeholder',
-                defaultMessage: 'Search for a plugin',
-              })}
-            >
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.search.placeholder',
-                defaultMessage: 'Search for a plugin',
-              })}
-            </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}
-                    useYarn={appInfoResponse.data.useYarn}
-                  />
-                </GridItem>
-              ))}
-            </Grid>
-          )}
-        </ContentLayout>
-      </Main>
-    </Layout>
+    </CheckPagePermissions>
   );
 };
 
-const ProtectedMarketPlace = () => (
-  <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
-    <MarketPlacePage />
-  </CheckPagePermissions>
-);
-
-export { MarketPlacePage };
-export default ProtectedMarketPlace;
+export default MarketPlacePage;

package/admin/src/translations/en.json

@@ -58,21 +58,6 @@
   "Auth.privacy-policy-agreement.policy": "privacy policy",
   "Auth.privacy-policy-agreement.terms": "terms",
   "Auth.reset-password.title": "Reset password",
-  "admin.pages.MarketPlacePage.helmet": "Marketplace - Plugins",
-  "admin.pages.MarketPlacePage.title": "Marketplace",
-  "admin.pages.MarketPlacePage.subtitle": "Get more out of Strapi",
-  "admin.pages.MarketPlacePage.plugin.info.text": "Learn more",
-  "admin.pages.MarketPlacePage.plugin.info.label": "Learn more about {pluginName}",
-  "admin.pages.MarketPlacePage.plugin.copy": "Copy install command",
-  "admin.pages.MarketPlacePage.plugin.copy.success": "Install command ready to be pasted in your terminal",
-  "admin.pages.MarketPlacePage.plugin.installed": "Installed",
-  "admin.pages.MarketPlacePage.plugin.info": "Learn more",
-  "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",
-  "admin.pages.MarketPlacePage.plugin.tooltip.verified": "Plugin verified by Strapi",
-  "admin.pages.MarketPlacePage.search.placeholder": "Search for a plugin",
-  "admin.pages.MarketPlacePage.search.clear": "Clear the plugin search",
-  "admin.pages.MarketPlacePage.search.empty": "No result for \"{target}\"",
-  "admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi": "Made by Strapi",
   "Content Manager": "Content Manager",
   "Content Type Builder": "Content-Types Builder",
   "Documentation": "Documentation",
@@ -242,6 +227,18 @@
   "Users.components.List.empty": "There is no users...",
   "Users.components.List.empty.withFilters": "There is no users with the applied filters...",
   "Users.components.List.empty.withSearch": "There is no users corresponding to the search ({search})...",
+  "admin.pages.MarketPlacePage.blog.link": "Read our blog post",
+  "admin.pages.MarketPlacePage.coming-soon.1": "A new way to make Strapi awesome.",
+  "admin.pages.MarketPlacePage.coming-soon.2": "Coming soon.",
+  "admin.pages.MarketPlacePage.content.subtitle": "The new marketplace will help you get more out of Strapi. We are working hard to offer the best experience to discover and install plugins.",
+  "admin.pages.MarketPlacePage.content.subtitle.published": "The web marketplace helps you get the most of Strapi. In addition, we are working hard to offer the best experience to discover and install plugins, directly from the app.",
+  "admin.pages.MarketPlacePage.helmet": "Marketplace - Plugins",
+  "admin.pages.MarketPlacePage.illustration": "marketplace illustration",
+  "admin.pages.MarketPlacePage.market.link": "Visit the web marketplace",
+  "admin.pages.MarketPlacePage.published": "Finally here.",
+  "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",
+  "admin.pages.MarketPlacePage.subtitle": "Get more out of Strapi",
+  "admin.pages.MarketPlacePage.title": "Marketplace",
   "anErrorOccurred": "Woops! Something went wrong. Please, try again.",
   "app.components.GuidedTour.skip": "Skip the tour",
   "app.components.GuidedTour.title": "3 steps to get started",
@@ -357,8 +354,8 @@
   "app.components.PluginCard.compatible": "Compatible with your app",
   "app.components.PluginCard.compatibleCommunity": "Compatible with the community",
   "app.components.PluginCard.more-details": "More details",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",
@@ -704,4 +701,4 @@
   "request.error.model.unknown": "This model doesn't exist",
   "skipToContent": "Skip to content",
   "submit": "Submit"
-}
+}

package/admin/src/translations/ja.json

@@ -315,8 +315,8 @@
   "app.components.PluginCard.compatible": "アプリとの互換性",
   "app.components.PluginCard.compatibleCommunity": "コミュニティとの互換性",
   "app.components.PluginCard.more-details": "詳細を見る",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",

package/admin/src/translations/ko.json

@@ -317,8 +317,8 @@
   "app.components.PluginCard.compatible": "이 애플리케이션에 호환됩니다.",
   "app.components.PluginCard.compatibleCommunity": "션뮤니티에 호환됩니다.",
   "app.components.PluginCard.more-details": "[더보기]",
-  "app.components.ToggleCheckbox.off-label": "Off",
-  "app.components.ToggleCheckbox.on-label": "On",
+  "app.components.ToggleCheckbox.off-label": "False",
+  "app.components.ToggleCheckbox.on-label": "True",
   "app.components.UpgradePlanModal.button": "Learn more",
   "app.components.UpgradePlanModal.limit-reached": "You have reached the limit",
   "app.components.UpgradePlanModal.text-ce": "Community Edition",