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

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

@@ -1,127 +1,257 @@
-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 { 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 { useQuery } from 'react-query';
+import matchSorter from 'match-sorter';
+import {
+  AnErrorOccurred,
+  CheckPagePermissions,
+  useFocusWhenNavigate,
+  useTracking,
+  LoadingIndicatorPage,
+  useNotification,
+  useAppInfos,
+} from '@strapi/helper-plugin';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
+import { Searchbar } from '@strapi/design-system/Searchbar';
+import { Box } from '@strapi/design-system/Box';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 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 { Flex } from '@strapi/design-system/Flex';
 
-const Img = styled.img`
-  width: ${190 / 16}rem;
-`;
+import PluginCard from './components/PluginCard';
+import { EmptyPluginSearch } from './components/EmptyPluginSearch';
+import PageHeader from './components/PageHeader';
+import { fetchAppInformation } from './utils/api';
+import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
+import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
+import adminPermissions from '../../permissions';
+import offlineCloud from '../../assets/images/icon_offline-cloud.svg';
+import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
+import MissingPluginBanner from './components/MissingPluginBanner';
 
-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('');
+  const { autoReload: isInDevelopmentMode } = useAppInfos();
+  const isOnline = useNavigatorOnLine();
+
+  useFocusWhenNavigate();
+
+  const marketplaceTitle = formatMessage({
+    id: 'global.marketplace',
+    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}>
+  useEffect(() => {
+    if (!isInDevelopmentMode) {
+      toggleNotification({
+        type: 'info',
+        message: {
+          id: 'admin.pages.MarketPlacePage.production',
+          defaultMessage: 'Manage plugins from the development environment',
+        },
+        blockTransition: true,
+      });
+    }
+  }, [toggleNotification, isInDevelopmentMode]);
+
+  if (!isOnline) {
+    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">
+          <PageHeader isOnline={isOnline} />
+          <Flex
+            width="100%"
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            style={{ paddingTop: '120px' }}
+          >
+            <Box paddingBottom={2}>
+              <Typography textColor="neutral700" variant="alpha">
                 {formatMessage({
-                  id: 'admin.pages.MarketPlacePage.coming-soon.1',
-                  defaultMessage: 'A new way to make Strapi awesome.',
+                  id: 'admin.pages.MarketPlacePage.offline.title',
+                  defaultMessage: 'You are offline',
                 })}
               </Typography>
-              <Typography variant="alpha" textColor="primary700">
+            </Box>
+            <Box paddingBottom={6}>
+              <Typography textColor="neutral700" variant="epsilon">
                 {formatMessage({
-                  id: 'admin.pages.MarketPlacePage.published',
-                  defaultMessage: 'Finally here.',
+                  id: 'admin.pages.MarketPlacePage.offline.subtitle',
+                  defaultMessage:
+                    'You need to be connected to the Internet to access Strapi Market.',
                 })}
               </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>
+            </Box>
+            <img src={offlineCloud} alt="offline" style={{ width: '88px', height: '88px' }} />
+          </Flex>
         </Main>
       </Layout>
-    </CheckPagePermissions>
+    );
+  }
+
+  if (hasFailed) {
+    return (
+      <Layout>
+        <ContentLayout>
+          <Box paddingTop={8}>
+            <AnErrorOccurred />
+          </Box>
+        </ContentLayout>
+      </Layout>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Layout>
+        <Main aria-busy>
+          <LoadingIndicatorPage />
+        </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',
+          })}
+        />
+        <PageHeader isOnline={isOnline} />
+        <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}
+                    isInDevelopmentMode={isInDevelopmentMode}
+                  />
+                </GridItem>
+              ))}
+            </Grid>
+          )}
+          <Box paddingTop={7}>
+            <MissingPluginBanner />
+          </Box>
+        </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/pages/ProfilePage/index.js

@@ -199,7 +199,7 @@ const ProfilePage = () => {
                 title={data.username || getFullName(data.firstname, data.lastname)}
                 primaryAction={
                   <Button startIcon={<Check />} loading={isSubmitting} type="submit">
-                    {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                    {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>
                 }
               />
@@ -218,7 +218,7 @@ const ProfilePage = () => {
                       <Stack spacing={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
-                            id: 'Settings.profile.form.section.profile.title',
+                            id: 'global.profile',
                             defaultMessage: 'Profile',
                           })}
                         </Typography>
@@ -289,7 +289,7 @@ const ProfilePage = () => {
                       <Stack spacing={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
-                            id: 'Settings.profile.form.section.password.title',
+                            id: 'global.change-password',
                             defaultMessage: 'Change password',
                           })}
                         </Typography>
@@ -352,7 +352,7 @@ const ProfilePage = () => {
                               onChange={handleChange}
                               value={values.password || ''}
                               label={formatMessage({
-                                id: 'Auth.form.password.label',
+                                id: 'global.password',
                                 defaultMessage: 'Password',
                               })}
                               name="password"
@@ -474,7 +474,7 @@ const ProfilePage = () => {
                                 defaultMessage: 'Interface language',
                               })}
                               placeholder={formatMessage({
-                                id: 'components.Select.placeholder',
+                                id: 'global.select',
                                 defaultMessage: 'Select',
                               })}
                               hint={formatMessage({

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -30,7 +30,7 @@ const SettingsNav = ({ menu }) => {
   });
 
   const label = formatMessage({
-    id: 'app.components.LeftMenuLinkContainer.settings',
+    id: 'global.settings',
     defaultMessage: 'Settings',
   });
 

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

@@ -47,7 +47,7 @@ function SettingsPage() {
   }
 
   const settingTitle = formatMessage({
-    id: 'app.components.LeftMenuLinkContainer.settings',
+    id: 'global.settings',
     defaultMessage: 'Settings',
   });
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/LoadingView/index.js

@@ -21,7 +21,7 @@ const LoadingView = ({ apiTokenName }) => {
       <HeaderLayout
         primaryAction={
           <Button disabled startIcon={<Check />} type="button" size="L">
-            {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+            {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
           </Button>
         }
         title={

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -159,7 +159,7 @@ const ApiTokenCreateView = () => {
                     size="L"
                   >
                     {formatMessage({
-                      id: 'app.components.Button.save',
+                      id: 'global.save',
                       defaultMessage: 'Save',
                     })}
                   </Button>
@@ -167,7 +167,7 @@ const ApiTokenCreateView = () => {
                 navigationAction={
                   <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
                     {formatMessage({
-                      id: 'app.components.go-back',
+                      id: 'global.back',
                       defaultMessage: 'Back',
                     })}
                   </Link>
@@ -188,7 +188,7 @@ const ApiTokenCreateView = () => {
                     <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
-                          id: 'Settings.apiTokens.details',
+                          id: 'global.details',
                           defaultMessage: 'Details',
                         })}
                       </Typography>

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DeleteButton/index.js

@@ -19,7 +19,7 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
         }}
         label={formatMessage(
           {
-            id: 'app.component.table.delete',
+            id: 'global.delete-target',
             defaultMessage: 'Delete {target}',
           },
           { target: `${tokenName}` }

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js

@@ -45,7 +45,7 @@ const ApplicationInfosPage = () => {
             <Stack spacing={5}>
               <Typography variant="delta" as="h3">
                 {formatMessage({
-                  id: 'Settings.application.details',
+                  id: 'global.details',
                   defaultMessage: 'Details',
                 })}
               </Typography>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/ConditionsButton/index.js

@@ -31,7 +31,7 @@ const ConditionsButton = ({ onClick, className, hasConditions, variant }) => {
     <Wrapper hasConditions={hasConditions} className={className}>
       <Button variant={variant} startIcon={<Cog />} onClick={onClick}>
         {formatMessage({
-          id: 'app.components.LeftMenuLinkContainer.settings',
+          id: 'global.settings',
           defaultMessage: 'Settings',
         })}
       </Button>

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/components/RoleForm/index.js

@@ -24,7 +24,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                   {role
                     ? role.name
                     : formatMessage({
-                        id: 'Settings.roles.form.title',
+                        id: 'global.details',
                         defaultMessage: 'Details',
                       })}
                 </Typography>
@@ -58,7 +58,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
                 name="name"
                 error={errors.name && formatMessage({ id: errors.name })}
                 label={formatMessage({
-                  id: 'Settings.roles.form.input.name',
+                  id: 'global.name',
                   defaultMessage: 'Name',
                 })}
                 onChange={onChange}
@@ -70,7 +70,7 @@ const RoleForm = ({ disabled, role, values, errors, onChange, onBlur }) => {
               <Textarea
                 disabled={disabled}
                 label={formatMessage({
-                  id: 'Settings.roles.form.input.description',
+                  id: 'global.description',
                   defaultMessage: 'Description',
                 })}
                 name="description"

package/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js

@@ -117,7 +117,7 @@ const EditPage = () => {
                       size="L"
                     >
                       {formatMessage({
-                        id: 'app.components.Button.save',
+                        id: 'global.save',
                         defaultMessage: 'Save',
                       })}
                     </Button>
@@ -134,7 +134,7 @@ const EditPage = () => {
                 navigationAction={
                   <Link startIcon={<ArrowLeft />} to="/settings/roles">
                     {formatMessage({
-                      id: 'app.components.go-back',
+                      id: 'global.back',
                       defaultMessage: 'Back',
                     })}
                   </Link>

package/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js

@@ -69,7 +69,7 @@ const useRoleActions = () => {
       },
       {
         onClick: handleToggle,
-        label: formatMessage({ id: 'app.utils.delete', defaultMessage: 'Delete' }),
+        label: formatMessage({ id: 'global.delete', defaultMessage: 'Delete' }),
         icon: <Trash />,
       },
     ],
@@ -114,7 +114,7 @@ const RoleListPage = () => {
           </Button>
         }
         title={formatMessage({
-          id: 'Settings.roles.title',
+          id: 'global.roles',
           defaultMessage: 'roles',
         })}
         subtitle={formatMessage({
@@ -140,7 +140,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.name',
+                    id: 'global.name',
                     defaultMessage: 'Name',
                   })}
                 </Typography>
@@ -148,7 +148,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.description',
+                    id: 'global.description',
                     defaultMessage: 'Description',
                   })}
                 </Typography>
@@ -156,7 +156,7 @@ const RoleListPage = () => {
               <Th>
                 <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
-                    id: 'Settings.roles.list.header.users',
+                    id: 'global.users',
                     defaultMessage: 'Users',
                   })}
                 </Typography>
@@ -164,7 +164,7 @@ const RoleListPage = () => {
               <Th>
                 <VisuallyHidden>
                   {formatMessage({
-                    id: 'Settings.roles.list.header.actions',
+                    id: 'global.actions',
                     defaultMessage: 'Actions',
                   })}
                 </VisuallyHidden>

package/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js

@@ -142,14 +142,14 @@ const EditPage = ({ canUpdate }) => {
         <HeaderLayout
           primaryAction={
             <Button disabled startIcon={<Check />} type="button" size="L">
-              {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+              {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
             </Button>
           }
           title={title}
           navigationAction={
             <Link startIcon={<ArrowLeft />} to="/settings/users?pageSize=10&page=1&sort=firstname">
               {formatMessage({
-                id: 'app.components.go-back',
+                id: 'global.back',
                 defaultMessage: 'Back',
               })}
             </Link>
@@ -183,7 +183,7 @@ const EditPage = ({ canUpdate }) => {
                     type="submit"
                     size="L"
                   >
-                    {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                    {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
                   </Button>
                 }
                 title={title}
@@ -193,7 +193,7 @@ const EditPage = ({ canUpdate }) => {
                     to="/settings/users?pageSize=10&page=1&sort=firstname"
                   >
                     {formatMessage({
-                      id: 'app.components.go-back',
+                      id: 'global.back',
                       defaultMessage: 'Back',
                     })}
                   </Link>
@@ -253,7 +253,7 @@ const EditPage = ({ canUpdate }) => {
                     <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {formatMessage({
-                          id: 'app.components.Users.ModalCreateBody.block-title.login',
+                          id: 'global.roles',
                           defaultMessage: "User's role",
                         })}
                       </Typography>

package/admin/src/pages/SettingsPage/pages/Users/EditPage/utils/layout.js

@@ -72,7 +72,7 @@ const layout = [
   [
     {
       intlLabel: {
-        id: 'Auth.form.password.label',
+        id: 'global.password',
         defaultMessage: 'Password',
       },
       name: 'password',

package/admin/src/pages/SettingsPage/pages/Users/ListPage/DynamicTable/TableRows/index.js

@@ -89,7 +89,7 @@ const TableRows = ({
                       <IconButton
                         onClick={() => onClickDelete(data.id)}
                         label={formatMessage(
-                          { id: 'app.component.table.delete', defaultMessage: 'Delete {target}' },
+                          { id: 'global.delete-target', defaultMessage: 'Delete {target}' },
                           { target: getFullName(data.firstname, data.lastname) }
                         )}
                         noBorder