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

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

@@ -1,127 +1,219 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
-import { pxToRem, CheckPagePermissions, useTracking } from '@strapi/helper-plugin';
+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 } from '@strapi/design-system/Layout';
-import { Flex } from '@strapi/design-system/Flex';
+import { Main } from '@strapi/design-system/Main';
+import { Searchbar } from '@strapi/design-system/Searchbar';
 import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
 import { LinkButton } from '@strapi/design-system/LinkButton';
-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 CenterTypography = styled(Typography)`
-  text-align: center;
-`;
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import Upload from '@strapi/icons/Upload';
 
-const Img = styled.img`
-  width: ${190 / 16}rem;
-`;
+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 adminPermissions from '../../permissions';
 
-const StackCentered = styled(Stack)`
-  align-items: center;
-`;
+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 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(() => {
-    trackUsage('didGoToMarketplace');
-  }, [trackUsage]);
+    trackUsageRef.current('didGoToMarketplace');
+  }, []);
 
-  return (
-    <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
+  if (hasFailed) {
+    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',
-            })}
-          />
-          <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>
+        <ContentLayout>
+          <Box paddingTop={8}>
+            <AnErrorOccurred />
+          </Box>
+        </ContentLayout>
+      </Layout>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Layout>
+        <Main aria-busy>
+          <LoadingIndicatorPage />
         </Main>
       </Layout>
-    </CheckPagePermissions>
+    );
+  }
+
+  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>
   );
 };
 
-export default MarketPlacePage;
+const ProtectedMarketPlace = () => (
+  <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
+    <MarketPlacePage />
+  </CheckPagePermissions>
+);
+
+export { MarketPlacePage };
+export default ProtectedMarketPlace;

package/admin/src/pages/MarketplacePage/utils/api.js

@@ -0,0 +1,9 @@
+import { axiosInstance } from '../../../core/utils';
+
+const fetchAppInformation = async () => {
+  const { data } = await axiosInstance.get('/admin/information');
+
+  return data;
+};
+
+export { fetchAppInformation };

package/admin/src/translations/en.json

@@ -58,6 +58,21 @@
   "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",
@@ -230,18 +245,6 @@
   "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 +360,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 +707,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",

package/admin/src/translations/vi.json

@@ -1,15 +1,24 @@
 {
   "Analytics": "Phân Tích",
+  "Auth.components.Oops.text": "Tài khoản của bạn đã bị khoá",
+  "Auth.components.Oops.text.admin": "Nếu có sự nhầm lẫn, hãy liên hệ người quản trị",
   "Auth.form.button.forgot-password": "Gửi Email",
+  "Auth.form.button.go-home": "QUAY VỀ TRANG CHỦ",
   "Auth.form.button.login": "Đăng nhập",
+  "Auth.form.button.login.providers.error": "Không thể kết nối bạn với dịch vụ đã chọn.",
+  "Auth.form.button.login.providers.see-more": "Xem thêm",
+  "Auth.form.button.login.strapi": "Đăng nhập với Strapi",
+  "Auth.form.button.password-recovery": "Khôi phục mật khẩu",
   "Auth.form.button.register": "Sẵn sàng để bắt đầu",
   "Auth.form.button.reset-password": "Đổi mật khẩu",
+  "Auth.form.confirmPassword.label": "Nhập lại mật khẩu",
+  "Auth.form.currentPassword.label": "Mật khẩu hiện tại",
   "Auth.form.email.label": "Email",
   "Auth.form.email.placeholder": "kai@doe.com",
-  "Auth.form.error.blocked": "Tài khoản của bạn bị khóa bởi người quản trị",
+  "Auth.form.error.blocked": "Tài khoản của bạn bị khóa bởi người quản trị.",
   "Auth.form.error.code.provide": "Mã sai đã được cung cấp.",
   "Auth.form.error.confirmed": "Email của tài khoản của bạn chưa được xác nhận.",
-  "Auth.form.error.email.invalid": "Eemail sai.",
+  "Auth.form.error.email.invalid": "Email sai.",
   "Auth.form.error.email.provide": "Vui lòng cung cấp tên đăng nhập hoặc email.",
   "Auth.form.error.email.taken": "Email đã được dùng.",
   "Auth.form.error.invalid": "Định danh hoặc mật khẩu sai.",
@@ -21,18 +30,35 @@
   "Auth.form.error.ratelimit": "Thử quá nhiều lần, vui lòng thử lại trong một phút",
   "Auth.form.error.user.not-exist": "Email này chưa tồn tại.",
   "Auth.form.error.username.taken": "Tên đăng nhập đã bị lấy.",
+  "Auth.form.firstname.label": "Họ",
+  "Auth.form.firstname.placeholder": "v.d. Kai",
   "Auth.form.forgot-password.email.label": "Nhập email của bạn",
   "Auth.form.forgot-password.email.label.success": "Email đã gửi thành công đến",
+  "Auth.form.lastname.label": "Tên",
+  "Auth.form.lastname.placeholder": "v.d. Doe",
+  "Auth.form.password.hide-password": "Ẩn mật khẩu",
+  "Auth.form.password.hint": "Mật khẩu phải chứa ít nhất 8 ký tự, 1 viết hoa, 1 viết thường, và 1 số",
   "Auth.form.password.label": "Mật khẩu",
+  "Auth.form.password.show-password": "Hiển thị password",
   "Auth.form.register.news.label": "Cập nhật cho tôi về chức năng mới và những cải thiện sắp tới (thông qua việc này bạn đã chấp nhận {terms} và {policy}).",
+  "Auth.form.register.subtitle": "Thông tin của bạn chỉ được sử dụng để đăng nhập vào trang quản trị. Tất cả các dữ liệu được lưu ở cơ sở dữ liệu của bạn.",
   "Auth.form.rememberMe.label": "Nhớ tôi",
   "Auth.form.username.label": "Tên đăng nhập",
   "Auth.form.username.placeholder": "Kai Doe",
-  "Auth.link.forgot-password": "Quên mật khẩu của bạn?",
+  "Auth.form.welcome.subtitle": "Đăng nhập vào tài khoản Strapi của bạn",
+  "Auth.form.welcome.title": "Chào mừng!",
+  "Auth.link.forgot-password": "Quên mật khẩu?",
   "Auth.link.ready": "Sẵn sàng đăng nhập?",
+  "Auth.link.signin": "Đăng nhập",
+  "Auth.link.signin.account": "Đã có tài khoản?",
+  "Auth.login.sso.divider": "Hoặc đăng nhập với",
+  "Auth.login.sso.loading": "Đang tải các dịch vụ cung cấp...",
+  "Auth.login.sso.subtitle": "Đăng nhập qua SSO",
   "Auth.privacy-policy-agreement.policy": "chính sách bảo mật",
   "Auth.privacy-policy-agreement.terms": "các điều khoản",
+  "Auth.reset-password.title": "Đặt lại mật khẩu",
   "Content Manager": "Quản Lý Nội Dung",
+  "Documentation": "Tài liệu",
   "Email": "Email",
   "Files Upload": "Tải Tâp Tin Lên",
   "HomePage.helmet.title": "Trang chủ",
@@ -257,4 +283,4 @@
   "notification.error.layout": "Không thể khôi phục",
   "notification.form.error.fields": "Bảng nhập liệu có vài lỗi",
   "request.error.model.unknown": "Cấu trúc này không tồn tại"
-}
+}