@strapi/admin 4.1.6-alpha.1 → 4.1.8

package/admin/src/content-manager/pages/ListView/selectors.js

@@ -15,12 +15,9 @@ const listViewDomain = () => state => state['content-manager_listView'] || initi
  */
 
 const makeSelectListView = () =>
-  createSelector(
-    listViewDomain(),
-    substate => {
-      return substate;
-    }
-  );
+  createSelector(listViewDomain(), substate => {
+    return substate;
+  });
 
 const selectDisplayedHeaders = state => {
   const { displayedHeaders } = state['content-manager_listView'];

package/admin/src/content-manager/testUtils/data.js

@@ -140,7 +140,11 @@ const testData = {
       id: 1,
       name: 'name',
       subcomponotrepeatable: { id: 4, name: 'name' },
-      subrepeatable: [{ id: 1, name: 'name' }, { id: 2, name: 'name' }, { id: 3, name: 'name' }],
+      subrepeatable: [
+        { id: 1, name: 'name' },
+        { id: 2, name: 'name' },
+        { id: 3, name: 'name' },
+      ],
     },
     repeatable: [
       {

package/admin/src/content-manager/utils/isFieldTypeNumber.js

@@ -0,0 +1,3 @@
+export default function isFieldTypeNumber(type) {
+  return ['integer', 'biginteger', 'decimal', 'float', 'number'].includes(type);
+}

package/admin/src/hooks/useNavigatorOnLine/index.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * For more details about this hook see:
+ * https://www.30secondsofcode.org/react/s/use-navigator-on-line
+ */
+const useNavigatorOnLine = () => {
+  const onlineStatus =
+    typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
+      ? navigator.onLine
+      : true;
+
+  const [isOnline, setIsOnline] = useState(onlineStatus);
+
+  const setOnline = () => setIsOnline(true);
+  const setOffline = () => setIsOnline(false);
+
+  useEffect(() => {
+    window.addEventListener('online', setOnline);
+    window.addEventListener('offline', setOffline);
+
+    return () => {
+      window.removeEventListener('online', setOnline);
+      window.removeEventListener('offline', setOffline);
+    };
+  }, []);
+
+  return isOnline;
+};
+
+export default useNavigatorOnLine;

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

@@ -13,20 +13,24 @@ import {
   useAppInfos,
 } from '@strapi/helper-plugin';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+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 { LinkButton } from '@strapi/design-system/LinkButton';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import Upload from '@strapi/icons/Upload';
+import { Typography } from '@strapi/design-system/Typography';
+import { Flex } from '@strapi/design-system/Flex';
 
 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 matchSearch = (plugins, search) => {
   return matchSorter(plugins, search, {
@@ -48,6 +52,7 @@ const MarketPlacePage = () => {
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
   const { autoReload: isInDevelopmentMode } = useAppInfos();
+  const isOnline = useNavigatorOnLine();
 
   useFocusWhenNavigate();
 
@@ -116,6 +121,42 @@ const MarketPlacePage = () => {
     }
   }, [toggleNotification, isInDevelopmentMode]);
 
+  if (!isOnline) {
+    return (
+      <Layout>
+        <Main>
+          <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.offline.title',
+                  defaultMessage: 'You are offline',
+                })}
+              </Typography>
+            </Box>
+            <Box paddingBottom={6}>
+              <Typography textColor="neutral700" variant="epsilon">
+                {formatMessage({
+                  id: 'admin.pages.MarketPlacePage.offline.subtitle',
+                  defaultMessage:
+                    'You need to be connected to the Internet to access Strapi Market.',
+                })}
+              </Typography>
+            </Box>
+            <img src={offlineCloud} alt="offline" style={{ width: '88px', height: '88px' }} />
+          </Flex>
+        </Main>
+      </Layout>
+    );
+  }
+
   if (hasFailed) {
     return (
       <Layout>
@@ -150,29 +191,7 @@ const MarketPlacePage = () => {
             defaultMessage: 'Marketplace - Plugins',
           })}
         />
-        <HeaderLayout
-          title={formatMessage({
-            id: 'global.marketplace',
-            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>
-          }
-        />
+        <PageHeader isOnline={isOnline} />
         <ContentLayout>
           <Box width="25%" paddingBottom={4}>
             <Searchbar
@@ -219,6 +238,9 @@ const MarketPlacePage = () => {
               ))}
             </Grid>
           )}
+          <Box paddingTop={7}>
+            <MissingPluginBanner />
+          </Box>
         </ContentLayout>
       </Main>
     </Layout>