From a083dadce90825446d26b610ba24ccdf701cf68e Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Fri, 25 Mar 2022 17:44:19 +0100
Subject: [PATCH 01/11] add offline layout

---
 .../src/assets/images/icon_offline-cloud.svg  |  5 ++
 .../admin/src/pages/MarketplacePage/index.js  | 78 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 packages/core/admin/admin/src/assets/images/icon_offline-cloud.svg

diff --git a/packages/core/admin/admin/src/assets/images/icon_offline-cloud.svg b/packages/core/admin/admin/src/assets/images/icon_offline-cloud.svg
new file mode 100644
index 0000000000..bed9d93484
--- /dev/null
+++ b/packages/core/admin/admin/src/assets/images/icon_offline-cloud.svg
@@ -0,0 +1,5 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="87" height="87" rx="43.5" fill="#F0F0FF"/>
+<path d="M34.0469 39.2969H30C27.4479 39.2969 25.2604 40.2448 23.4375 42.1406C21.6146 43.9635 20.7031 46.151 20.7031 48.7031C20.7031 51.2552 21.6146 53.4427 23.4375 55.2656C25.2604 57.0885 27.4479 58 30 58H52.75L34.0469 39.2969ZM23 28.25L25.9531 25.2969L65 64.3438L62.0469 67.2969L57.3438 62.7031H30C26.1354 62.7031 22.8177 61.3542 20.0469 58.6562C17.349 55.8854 16 52.5677 16 48.7031C16 44.9115 17.3125 41.6667 19.9375 38.9688C22.5625 36.2708 25.7344 34.849 29.4531 34.7031L23 28.25ZM61.1719 39.4062C64.1615 39.625 66.7135 40.8646 68.8281 43.125C70.9427 45.3125 72 47.9375 72 51C72 55.0104 70.3594 58.1823 67.0781 60.5156L63.6875 57.125C66.0938 55.8125 67.2969 53.7708 67.2969 51C67.2969 49.1042 66.6042 47.4635 65.2188 46.0781C63.8333 44.6927 62.1927 44 60.2969 44H56.7969V42.7969C56.7969 39.224 55.5573 36.1979 53.0781 33.7188C50.599 31.2396 47.5729 30 44 30C41.9583 30 39.9896 30.474 38.0938 31.4219L34.5938 28.0312C37.4375 26.2083 40.5729 25.2969 44 25.2969C47.9375 25.2969 51.5833 26.6823 54.9375 29.4531C58.3646 32.224 60.4427 35.5417 61.1719 39.4062Z" fill="#4945FF"/>
+<rect x="0.5" y="0.5" width="87" height="87" rx="43.5" stroke="#D9D8FF"/>
+</svg>
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 1cd90c9959..e522ed282b 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -19,6 +19,8 @@ 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 { Typography } from '@strapi/design-system/Typography';
+import { Flex } from '@strapi/design-system/Flex';
 import Upload from '@strapi/icons/Upload';
 
 import PluginCard from './components/PluginCard';
@@ -27,6 +29,7 @@ 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';
 
 const matchSearch = (plugins, search) => {
   return matchSorter(plugins, search, {
@@ -40,6 +43,30 @@ const matchSearch = (plugins, search) => {
   });
 };
 
+const getOnLineStatus = () =>
+  typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
+    ? navigator.onLine
+    : true;
+
+const useNavigatorOnLine = () => {
+  const [status, setStatus] = React.useState(getOnLineStatus());
+
+  const setOnline = () => setStatus(true);
+  const setOffline = () => setStatus(false);
+
+  useEffect(() => {
+    window.addEventListener('online', setOnline);
+    window.addEventListener('offline', setOffline);
+
+    return () => {
+      window.removeEventListener('online', setOnline);
+      window.removeEventListener('offline', setOffline);
+    };
+  }, []);
+
+  return status;
+};
+
 const MarketPlacePage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -48,6 +75,7 @@ const MarketPlacePage = () => {
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
   const { autoReload: isInDevelopmentMode } = useAppInfos();
+  const isOnline = useNavigatorOnLine();
 
   useFocusWhenNavigate();
 
@@ -116,6 +144,56 @@ const MarketPlacePage = () => {
     }
   }, [toggleNotification, isInDevelopmentMode]);
 
+  if (!isOnline) {
+    return (
+      <Layout>
+        <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>
+          }
+        />
+
+        <Flex
+          width="100%"
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+          paddingTop={11}
+        >
+          <Box paddingTop={8} paddingBottom={1}>
+            <Typography textColor="neutral700" variant="alpha">
+              You are offline
+            </Typography>
+          </Box>
+          <Box paddingBottom={3}>
+            <Typography textColor="neutral700" variant="epsilon">
+              You need to be connected to the Internet to access Strapi Market.
+            </Typography>
+          </Box>
+          <Box as="img" src={offlineCloud} alt="offline" width={11} height={11} />
+        </Flex>
+      </Layout>
+    );
+  }
+
   if (hasFailed) {
     return (
       <Layout>

From 4d90bd850af86cbd064d6853563e166ec94def31 Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Tue, 29 Mar 2022 16:25:46 +0200
Subject: [PATCH 02/11] use dumb header component

---
 .../components/MarketplacePageHeader/index.js | 39 ++++++++
 .../hooks/use-navigator-on-line.js            | 27 ++++++
 .../admin/src/pages/MarketplacePage/index.js  | 91 +++----------------
 .../core/admin/admin/src/translations/en.json |  2 +
 4 files changed, 82 insertions(+), 77 deletions(-)
 create mode 100644 packages/core/admin/admin/src/pages/MarketplacePage/components/MarketplacePageHeader/index.js
 create mode 100644 packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/MarketplacePageHeader/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/MarketplacePageHeader/index.js
new file mode 100644
index 0000000000..eea1947371
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/MarketplacePageHeader/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+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 MarketplacePageHeader = () => {
+  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={
+        <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 MarketplacePageHeader;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js b/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js
new file mode 100644
index 0000000000..4ed729ffb7
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+const getOnLineStatus = () =>
+  typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
+    ? navigator.onLine
+    : true;
+
+const useNavigatorOnLine = () => {
+  const [isOnline, setIsOnline] = useState(getOnLineStatus());
+
+  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;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index e522ed282b..b58f02d11b 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -13,23 +13,23 @@ 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 { Typography } from '@strapi/design-system/Typography';
 import { Flex } from '@strapi/design-system/Flex';
-import Upload from '@strapi/icons/Upload';
 
 import PluginCard from './components/PluginCard';
 import { EmptyPluginSearch } from './components/EmptyPluginSearch';
+import MarketplacePageHeader from './components/MarketplacePageHeader';
 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/use-navigator-on-line';
 
 const matchSearch = (plugins, search) => {
   return matchSorter(plugins, search, {
@@ -43,30 +43,6 @@ const matchSearch = (plugins, search) => {
   });
 };
 
-const getOnLineStatus = () =>
-  typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
-    ? navigator.onLine
-    : true;
-
-const useNavigatorOnLine = () => {
-  const [status, setStatus] = React.useState(getOnLineStatus());
-
-  const setOnline = () => setStatus(true);
-  const setOffline = () => setStatus(false);
-
-  useEffect(() => {
-    window.addEventListener('online', setOnline);
-    window.addEventListener('offline', setOffline);
-
-    return () => {
-      window.removeEventListener('online', setOnline);
-      window.removeEventListener('offline', setOffline);
-    };
-  }, []);
-
-  return status;
-};
-
 const MarketPlacePage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -147,30 +123,7 @@ const MarketPlacePage = () => {
   if (!isOnline) {
     return (
       <Layout>
-        <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>
-          }
-        />
-
+        <MarketplacePageHeader />
         <Flex
           width="100%"
           direction="column"
@@ -178,14 +131,20 @@ const MarketPlacePage = () => {
           justifyContent="center"
           paddingTop={11}
         >
-          <Box paddingTop={8} paddingBottom={1}>
+          <Box paddingTop={11} paddingBottom={1}>
             <Typography textColor="neutral700" variant="alpha">
-              You are offline
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.offline.title',
+                defaultMessage: 'You are offline',
+              })}
             </Typography>
           </Box>
           <Box paddingBottom={3}>
             <Typography textColor="neutral700" variant="epsilon">
-              You need to be connected to the Internet to access Strapi Market.
+              {formatMessage({
+                id: 'admin.pages.MarketPlacePage.offline.subtitle',
+                defaultMessage: 'You need to be connected to the Internet to access Strapi Market.',
+              })}
             </Typography>
           </Box>
           <Box as="img" src={offlineCloud} alt="offline" width={11} height={11} />
@@ -228,29 +187,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>
-          }
-        />
+        <MarketplacePageHeader />
         <ContentLayout>
           <Box width="25%" paddingBottom={4}>
             <Searchbar
diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json
index 6543ca481e..6eaac3de9a 100644
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/packages/core/admin/admin/src/translations/en.json
@@ -205,6 +205,8 @@
   "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.helmet": "Marketplace - Plugins",
+  "admin.pages.MarketPlacePage.offline.title": "You are offline",
+  "admin.pages.MarketPlacePage.offline.subtitle": "You need to be connected to the Internet to access Strapi Market.",
   "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.info": "Learn more",

From fc59c6e2ea0c9b7c451bf2a80ab848595ccf9adf Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Tue, 29 Mar 2022 17:06:54 +0200
Subject: [PATCH 03/11] rename component

---
 .../{MarketplacePageHeader => PageHeader}/index.js          | 4 ++--
 .../core/admin/admin/src/pages/MarketplacePage/index.js     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/core/admin/admin/src/pages/MarketplacePage/components/{MarketplacePageHeader => PageHeader}/index.js (93%)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/MarketplacePageHeader/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js
similarity index 93%
rename from packages/core/admin/admin/src/pages/MarketplacePage/components/MarketplacePageHeader/index.js
rename to packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js
index eea1947371..1130723133 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/MarketplacePageHeader/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js
@@ -5,7 +5,7 @@ import { LinkButton } from '@strapi/design-system/LinkButton';
 import Upload from '@strapi/icons/Upload';
 import { useTracking } from '@strapi/helper-plugin';
 
-const MarketplacePageHeader = () => {
+const PageHeader = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
@@ -36,4 +36,4 @@ const MarketplacePageHeader = () => {
   );
 };
 
-export default MarketplacePageHeader;
+export default PageHeader;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index b58f02d11b..4f1598b892 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -23,7 +23,7 @@ import { Flex } from '@strapi/design-system/Flex';
 
 import PluginCard from './components/PluginCard';
 import { EmptyPluginSearch } from './components/EmptyPluginSearch';
-import MarketplacePageHeader from './components/MarketplacePageHeader';
+import PageHeader from './components/PageHeader';
 import { fetchAppInformation } from './utils/api';
 import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
 import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
@@ -123,7 +123,7 @@ const MarketPlacePage = () => {
   if (!isOnline) {
     return (
       <Layout>
-        <MarketplacePageHeader />
+        <PageHeader />
         <Flex
           width="100%"
           direction="column"
@@ -187,7 +187,7 @@ const MarketPlacePage = () => {
             defaultMessage: 'Marketplace - Plugins',
           })}
         />
-        <MarketplacePageHeader />
+        <PageHeader />
         <ContentLayout>
           <Box width="25%" paddingBottom={4}>
             <Searchbar

From ef8091821f3bb94cf85db0a203637915e227645f Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Tue, 29 Mar 2022 17:21:06 +0200
Subject: [PATCH 04/11] replace function with variable

---
 .../MarketplacePage/hooks/use-navigator-on-line.js   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js b/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js
index 4ed729ffb7..101f910e1b 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js
@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 
-const getOnLineStatus = () =>
-  typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
-    ? navigator.onLine
-    : true;
-
 const useNavigatorOnLine = () => {
-  const [isOnline, setIsOnline] = useState(getOnLineStatus());
+  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);

From b5ff5834301b45de05574ad68d4676b6f65cae8b Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Wed, 30 Mar 2022 10:45:10 +0200
Subject: [PATCH 05/11] move useNavigatorOnLine hook

---
 .../MarketplacePage => }/hooks/use-navigator-on-line.js       | 4 ++++
 packages/core/admin/admin/src/pages/MarketplacePage/index.js  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)
 rename packages/core/admin/admin/src/{pages/MarketplacePage => }/hooks/use-navigator-on-line.js (86%)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js b/packages/core/admin/admin/src/hooks/use-navigator-on-line.js
similarity index 86%
rename from packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js
rename to packages/core/admin/admin/src/hooks/use-navigator-on-line.js
index 101f910e1b..f2fed9c827 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/hooks/use-navigator-on-line.js
+++ b/packages/core/admin/admin/src/hooks/use-navigator-on-line.js
@@ -1,5 +1,9 @@
 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'
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 4f1598b892..e61e50fd89 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -29,7 +29,7 @@ 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/use-navigator-on-line';
+import useNavigatorOnLine from '../../hooks/use-navigator-on-line';
 
 const matchSearch = (plugins, search) => {
   return matchSorter(plugins, search, {

From 9dba223ec67c6d86198b5307ed415ca453b96209 Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Wed, 30 Mar 2022 18:22:11 +0200
Subject: [PATCH 06/11] add custom styles

---
 .../admin/admin/src/pages/MarketplacePage/index.js  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index e61e50fd89..510f8ea8a9 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -129,9 +129,9 @@ const MarketPlacePage = () => {
           direction="column"
           alignItems="center"
           justifyContent="center"
-          paddingTop={11}
+          style={{ paddingTop: '120px' }}
         >
-          <Box paddingTop={11} paddingBottom={1}>
+          <Box paddingBottom={2}>
             <Typography textColor="neutral700" variant="alpha">
               {formatMessage({
                 id: 'admin.pages.MarketPlacePage.offline.title',
@@ -139,7 +139,7 @@ const MarketPlacePage = () => {
               })}
             </Typography>
           </Box>
-          <Box paddingBottom={3}>
+          <Box paddingBottom={6}>
             <Typography textColor="neutral700" variant="epsilon">
               {formatMessage({
                 id: 'admin.pages.MarketPlacePage.offline.subtitle',
@@ -147,7 +147,12 @@ const MarketPlacePage = () => {
               })}
             </Typography>
           </Box>
-          <Box as="img" src={offlineCloud} alt="offline" width={11} height={11} />
+          <Box
+            as="img"
+            src={offlineCloud}
+            alt="offline"
+            style={{ width: '88px', height: '88px' }}
+          />
         </Flex>
       </Layout>
     );

From a30e8052e720feba73f851b2415d621c8f93352b Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Thu, 31 Mar 2022 14:54:46 +0200
Subject: [PATCH 07/11] add tests

---
 .../index.js}                                 |  0
 .../useNavigatorOnLine/tests/index.test.js    | 48 +++++++++++++++++++
 .../admin/src/pages/MarketplacePage/index.js  |  2 +-
 .../pages/MarketplacePage/tests/index.test.js | 21 +++++++-
 4 files changed, 69 insertions(+), 2 deletions(-)
 rename packages/core/admin/admin/src/hooks/{use-navigator-on-line.js => useNavigatorOnLine/index.js} (100%)
 create mode 100644 packages/core/admin/admin/src/hooks/useNavigatorOnLine/tests/index.test.js

diff --git a/packages/core/admin/admin/src/hooks/use-navigator-on-line.js b/packages/core/admin/admin/src/hooks/useNavigatorOnLine/index.js
similarity index 100%
rename from packages/core/admin/admin/src/hooks/use-navigator-on-line.js
rename to packages/core/admin/admin/src/hooks/useNavigatorOnLine/index.js
diff --git a/packages/core/admin/admin/src/hooks/useNavigatorOnLine/tests/index.test.js b/packages/core/admin/admin/src/hooks/useNavigatorOnLine/tests/index.test.js
new file mode 100644
index 0000000000..16a84eadb4
--- /dev/null
+++ b/packages/core/admin/admin/src/hooks/useNavigatorOnLine/tests/index.test.js
@@ -0,0 +1,48 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useNavigatorOnLine from '../index';
+
+describe('useNavigatorOnLine', () => {
+  it('returns the online state', () => {
+    jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(true);
+    const { result } = renderHook(() => useNavigatorOnLine());
+
+    expect(result.current).toEqual(true);
+  });
+
+  it('returns the offline state', () => {
+    jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(false);
+    const { result } = renderHook(() => useNavigatorOnLine());
+
+    expect(result.current).toEqual(false);
+  });
+
+  it('listens for network change online', async () => {
+    // Initialize an offline state
+    jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(false);
+    const { result, waitForNextUpdate } = renderHook(() => useNavigatorOnLine());
+
+    await act(async () => {
+      // Simulate a change from offline to online
+      window.dispatchEvent(new window.Event('online'));
+
+      await waitForNextUpdate();
+    });
+
+    expect(result.current).toEqual(true);
+  });
+
+  it('listens for network change offline', async () => {
+    // Initialize an online state
+    jest.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(true);
+    const { result, waitForNextUpdate } = renderHook(() => useNavigatorOnLine());
+
+    await act(async () => {
+      // Simulate a change from online to offline
+      window.dispatchEvent(new window.Event('offline'));
+
+      await waitForNextUpdate();
+    });
+
+    expect(result.current).toEqual(false);
+  });
+});
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 510f8ea8a9..c55b41620d 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -29,7 +29,7 @@ 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/use-navigator-on-line';
+import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
 
 const matchSearch = (plugins, search) => {
   return matchSorter(plugins, search, {
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
index 2025221a37..0ac25f591d 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
@@ -11,11 +11,14 @@ import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { useTracking, useAppInfos } from '@strapi/helper-plugin';
+import useNavigatorOnLine from '../../../hooks/useNavigatorOnLine';
 import MarketPlacePage from '../index';
 import server from './server';
 
 const toggleNotification = jest.fn();
 
+jest.mock('../../../hooks/use-navigator-on-line', () => jest.fn(() => true));
+
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: jest.fn(() => {
@@ -1533,7 +1536,7 @@ describe('Marketplace page', () => {
     expect(noResult).toBeVisible();
   });
 
-  it('handles production environment', async () => {
+  it('handles production environment', () => {
     // Simulate production environment
     useAppInfos.mockImplementation(() => ({ autoReload: false }));
     const { queryByText } = render(App);
@@ -1547,9 +1550,25 @@ describe('Marketplace page', () => {
       },
       blockTransition: true,
     });
+
     expect(toggleNotification).toHaveBeenCalledTimes(1);
 
     // Should not show install buttons
     expect(queryByText(/copy install command/i)).not.toBeInTheDocument();
   });
+
+  it('shows an online layout', () => {
+    render(App);
+    const offlineText = screen.queryByText('You are offline');
+
+    expect(offlineText).toEqual(null);
+  });
+
+  it('shows the offline layout', () => {
+    useNavigatorOnLine.mockReturnValueOnce(false);
+    render(App);
+    const offlineText = screen.getByText('You are offline');
+
+    expect(offlineText).toBeVisible();
+  });
 });

From 4362e3ba18f9289895105d1c6f379872f1077559 Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Thu, 31 Mar 2022 15:01:13 +0200
Subject: [PATCH 08/11] replace box with img

---
 packages/core/admin/admin/src/pages/MarketplacePage/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index c55b41620d..634961d628 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -147,7 +147,7 @@ const MarketPlacePage = () => {
               })}
             </Typography>
           </Box>
-          <Box
+          <img
             as="img"
             src={offlineCloud}
             alt="offline"

From 119ebb46b82233eb71f9d5d76c04cbee17555398 Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Thu, 31 Mar 2022 15:01:31 +0200
Subject: [PATCH 09/11] fix path to hook

---
 .../admin/admin/src/pages/MarketplacePage/tests/index.test.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
index 0ac25f591d..539b28c0d8 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
@@ -17,7 +17,7 @@ import server from './server';
 
 const toggleNotification = jest.fn();
 
-jest.mock('../../../hooks/use-navigator-on-line', () => jest.fn(() => true));
+jest.mock('../../../hooks/useNavigatorOnLine', () => jest.fn(() => true));
 
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),

From 18ee563584dabc0d74b81e3a0af935927cf919e3 Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Thu, 31 Mar 2022 16:12:02 +0200
Subject: [PATCH 10/11] add Main component and remove as

---
 .../admin/src/pages/MarketplacePage/index.js  | 60 +++++++++----------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 634961d628..cf0b04f5bc 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -123,37 +123,35 @@ const MarketPlacePage = () => {
   if (!isOnline) {
     return (
       <Layout>
-        <PageHeader />
-        <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
-            as="img"
-            src={offlineCloud}
-            alt="offline"
-            style={{ width: '88px', height: '88px' }}
-          />
-        </Flex>
+        <Main>
+          <PageHeader />
+          <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>
     );
   }

From bf2851fe9f309ffc3929d6fa77f6ad17dd49a712 Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Fri, 1 Apr 2022 16:10:31 +0200
Subject: [PATCH 11/11] hide submit button when offline

---
 .../components/PageHeader/index.js            | 31 ++++++++++++-------
 .../admin/src/pages/MarketplacePage/index.js  |  4 +--
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js
index 1130723133..b68e862098 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js
@@ -1,11 +1,12 @@
 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 = () => {
+const PageHeader = ({ isOnline }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
@@ -20,20 +21,26 @@ const PageHeader = () => {
         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>
+        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,
+};
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 2cb5a3e8be..8ba4657f86 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -125,7 +125,7 @@ const MarketPlacePage = () => {
     return (
       <Layout>
         <Main>
-          <PageHeader />
+          <PageHeader isOnline={isOnline} />
           <Flex
             width="100%"
             direction="column"
@@ -191,7 +191,7 @@ const MarketPlacePage = () => {
             defaultMessage: 'Marketplace - Plugins',
           })}
         />
-        <PageHeader />
+        <PageHeader isOnline={isOnline} />
         <ContentLayout>
           <Box width="25%" paddingBottom={4}>
             <Searchbar