@strapi/admin 4.1.4-alpha.0 → 4.2.0-alpha.1

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

@@ -0,0 +1,148 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .wrapper {
+    position: relative;
+    min-height: 216px;
+    margin-bottom: 3.6rem;
+    padding: 1.2rem 1.5rem;
+    padding-bottom: 0;
+    background-color: #fff;
+    box-shadow: 0 2px 4px #e3e9f3;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cardTitle {
+    display: flex;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    > div:first-child {
+      margin-right: 14px;
+    }
+
+    > div:last-child {
+      height: 36px;
+      line-height: 36px;
+    }
+
+    i,
+    svg {
+      margin-left: 7px;
+      color: #b3b5b9;
+      font-size: 1rem;
+      vertical-align: baseline;
+      cursor: pointer;
+    }
+  }
+
+  .cardDescription {
+    height: 54px;
+    margin-top: 27px;
+    margin-bottom: 9px;
+    font-size: 13px;
+    font-weight: 400;
+
+    > span:last-child {
+      color: #1c5de7;
+    }
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .cardFooter {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 45px;
+    padding: 0.9rem 1.5rem 1rem;
+    background-color: #fafafb;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    cursor: initial;
+  }
+
+  .compatible {
+    margin-top: 3px;
+    color: #5a9e06;
+    font-size: 1.3rem;
+    font-style: italic;
+
+    > i,
+    > svg {
+      margin-right: 7px;
+      font-size: 12px;
+    }
+  }
+
+  .settings {
+    margin-top: 3px;
+    color: #323740;
+    font-size: 1.3rem;
+    font-weight: 500;
+    cursor: pointer;
+
+    > i,
+    > svg {
+      margin-right: 7px;
+      font-size: 11px;
+      vertical-align: inherit;
+    }
+  }
+
+  .button {
+    height: 26px;
+    min-width: 89px !important;
+    padding: 0 15px;
+    margin: 0;
+    border-radius: 2px !important;
+    line-height: 23px;
+    font-size: 13px;
+    cursor: pointer;
+    span {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .frame {
+    width: 70px;
+    height: 36px;
+    margin: auto 0;
+    text-align: center;
+    border: 1px solid #f3f3f7;
+    border-radius: 3px;
+    white-space: nowrap;
+    > img {
+      max-height: 36px;
+      vertical-align: middle;
+    }
+  }
+
+  .helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+  .primary {
+    background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
+    color: white;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+
+    &:active {
+      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .secondary {
+    border: 1px solid #dfe0e1;
+    font-weight: 600;
+  }
+`;
+
+export default Wrapper;

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,216 +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 { Layout, HeaderLayout, ContentLayout, ActionLayout } from '@strapi/design-system/Layout';
-import { Main } from '@strapi/design-system/Main';
-import { Searchbar } from '@strapi/design-system/Searchbar';
+import { pxToRem, CheckPagePermissions, useTracking } from '@strapi/helper-plugin';
+import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+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 Plus from '@strapi/icons/Plus';
-
-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>
-        <AnErrorOccurred />
-      </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={<Plus />}
-              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>
-          }
-        />
-        <ActionLayout
-          startActions={
-            <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>
-          }
-        />
-        <ContentLayout>
-          {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;