@strapi/admin 4.2.0-beta.0 → 4.2.0-beta.3

package/admin/src/hooks/useSettingsMenu/init.js

@@ -25,14 +25,14 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
       links: [
         {
-          intlLabel: { id: 'Settings.permissions.menu.link.roles.label', defaultMessage: 'Roles' },
+          intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
           to: '/settings/roles',
           id: 'roles',
           isDisplayed: false,
           permissions: adminPermissions.settings.roles.main,
         },
         {
-          intlLabel: { id: 'Settings.permissions.menu.link.users.label' },
+          intlLabel: { id: 'global.users' },
           // Init the search params directly
           to: '/settings/users?pageSize=10&page=1&sort=firstname',
           id: 'users',

package/admin/src/layouts/UnauthenticatedLayout/index.js

@@ -40,7 +40,7 @@ const UnauthenticatedLayout = ({ children }) => {
           <LocaleToggle />
         </Box>
       </Flex>
-      <Box paddingTop={11} paddingBottom={11}>
+      <Box paddingTop={2} paddingBottom={11}>
         {children}
       </Box>
     </div>

package/admin/src/pages/Admin/Onboarding/index.js

@@ -75,7 +75,7 @@ const Onboarding = () => {
     {
       icon: 'book',
       label: formatMessage({
-        id: 'app.components.LeftMenuFooter.documentation',
+        id: 'global.documentation',
         defaultMessage: 'Documentation',
       }),
       destination: 'https://docs.strapi.io',

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

@@ -6,16 +6,17 @@
 
 import React, { Suspense, useEffect, useMemo, lazy } from 'react';
 import { Switch, Route } from 'react-router-dom';
-// Components from @strapi/helper-plugin
 import { useTracking, LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
+import { useDispatch, useSelector } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import GuidedTourModal from '../../components/GuidedTour/Modal';
 import LeftMenu from '../../components/LeftMenu';
 import AppLayout from '../../layouts/AppLayout';
 import { useMenu } from '../../hooks';
-import Onboarding from './Onboarding';
 import { createRoute } from '../../utils';
-import GuidedTourModal from '../../components/GuidedTour/Modal';
+import { SET_APP_RUNTIME_STATUS } from '../App/constants';
+import Onboarding from './Onboarding';
 
 const CM = lazy(() =>
   import(/* webpackChunkName: "content-manager" */ '../../content-manager/pages/App')
@@ -40,11 +41,20 @@ const SettingsPage = lazy(() =>
 // Simple hook easier for testing
 const useTrackUsage = () => {
   const { trackUsage } = useTracking();
+  const dispatch = useDispatch();
+  const appStatus = useSelector(state => state.admin_app.status);
 
   useEffect(() => {
-    trackUsage('didAccessAuthenticatedAdministration');
+    // Make sure the event is only send once after accessing the admin panel
+    // and not at runtime for example when regenerating the permissions with the ctb
+    // or with i18n
+    if (appStatus === 'init') {
+      trackUsage('didAccessAuthenticatedAdministration');
+
+      dispatch({ type: SET_APP_RUNTIME_STATUS });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [appStatus]);
 };
 
 const Admin = () => {

package/admin/src/pages/App/constants.js

@@ -0,0 +1 @@
+export const SET_APP_RUNTIME_STATUS = 'StrapiAdmin/APP/SET_APP_RUNTIME_STATUS';

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

@@ -13,6 +13,7 @@ import {
   useNotification,
   TrackingContext,
 } from '@strapi/helper-plugin';
+import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system/Main';
 import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
@@ -38,6 +39,8 @@ function App() {
     );
   }, []);
 
+  const [telemetryProperties, setTelemetryProperties] = useState(null);
+
   useEffect(() => {
     const currentToken = auth.getToken();
 
@@ -66,10 +69,18 @@ function App() {
     const getData = async () => {
       try {
         const {
-          data: { hasAdmin, uuid },
-        } = await request('/admin/init', { method: 'GET' });
+          data: {
+            data: { hasAdmin, uuid },
+          },
+        } = await axios.get(`${strapi.backendURL}/admin/init`);
 
         if (uuid) {
+          const {
+            data: { data: properties },
+          } = await axios.get(`${strapi.backendURL}/admin/telemetry-properties`);
+
+          setTelemetryProperties(properties);
+
           try {
             const deviceId = await getUID();
 
@@ -79,6 +90,9 @@ function App() {
                 event: 'didInitializeAdministration',
                 uuid,
                 deviceId,
+                properties: {
+                  ...properties,
+                },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -110,7 +124,7 @@ function App() {
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
       <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
-      <TrackingContext.Provider value={uuid}>
+      <TrackingContext.Provider value={{ uuid, telemetryProperties }}>
         <Switch>
           {authRoutes}
           <Route

package/admin/src/pages/App/reducer.js

@@ -0,0 +1,22 @@
+import produce from 'immer';
+import { SET_APP_RUNTIME_STATUS } from './constants';
+
+const initialState = {
+  status: 'init',
+};
+
+const reducer = (state = initialState, action) =>
+  /* eslint-disable-next-line consistent-return */
+  produce(state, draftState => {
+    switch (action.type) {
+      case SET_APP_RUNTIME_STATUS: {
+        draftState.status = 'runtime';
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export { initialState };
+export default reducer;

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Form } from '@strapi/helper-plugin';
+import { Form, Link } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Typography } from '@strapi/design-system/Typography';

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { Link } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Typography } from '@strapi/design-system/Typography';
 import UnauthenticatedLayout, {
   Column,

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -1,16 +1,15 @@
 import React, { useState } from 'react';
+import { Form, Link } from '@strapi/helper-plugin';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Typography } from '@strapi/design-system/Typography';
-import { Form } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -107,7 +106,7 @@ const Login = ({ onSubmit, schema, children }) => {
                   onChange={handleChange}
                   value={values.password}
                   label={formatMessage({
-                    id: 'Auth.form.password.label',
+                    id: 'global.password',
                     defaultMessage: 'Password',
                   })}
                   name="password"

package/admin/src/pages/AuthPage/components/Oops/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { useQuery } from '@strapi/helper-plugin';
+import { useQuery, Link } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Typography } from '@strapi/design-system/Typography';
 import UnauthenticatedLayout, {
   Column,

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -3,11 +3,22 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import axios from 'axios';
+import {
+  Form,
+  useQuery,
+  useNotification,
+  useTracking,
+  getYupInnerErrors,
+  Link,
+} from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Checkbox } from '@strapi/design-system/Checkbox';
@@ -15,17 +26,6 @@ import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Typography } from '@strapi/design-system/Typography';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
-import {
-  Form,
-  useQuery,
-  useNotification,
-  useTracking,
-  getYupInnerErrors,
-} from '@strapi/helper-plugin';
-import { useHistory } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { Formik } from 'formik';
-import axios from 'axios';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,
@@ -143,7 +143,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       <Typography as="h1" variant="alpha">
                         {formatMessage({
                           id: 'Auth.form.welcome.title',
-                          defaultMessage: 'Welcome!',
+                          defaultMessage: 'Welcome to Strapi!',
                         })}
                       </Typography>
                     </Box>
@@ -152,12 +152,12 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         {formatMessage({
                           id: 'Auth.form.register.subtitle',
                           defaultMessage:
-                            'Your credentials are only used to authenticate yourself on the admin panel. All saved data will be stored in your own database.',
+                            'Credentials are only used to authenticate in Strapi. All saved data will be stored in your database.',
                         })}
                       </Typography>
                     </CenteredBox>
                   </Column>
-                  <Stack spacing={7}>
+                  <Stack spacing={6}>
                     <Grid gap={4}>
                       <GridItem col={6}>
                         <TextInput
@@ -227,11 +227,11 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       hint={formatMessage({
                         id: 'Auth.form.password.hint',
                         defaultMessage:
-                          'Password must contain at least 8 characters, 1 uppercase, 1 lowercase and 1 number',
+                          'Must be at least 8 characters, 1 uppercase, 1 lowercase & 1 number',
                       })}
                       required
                       label={formatMessage({
-                        id: 'Auth.form.password.label',
+                        id: 'global.password',
                         defaultMessage: 'Password',
                       })}
                       type={passwordShown ? 'text' : 'password'}
@@ -284,7 +284,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                         {
                           id: 'Auth.form.register.news.label',
                           defaultMessage:
-                            'Keep me updated about the new features and upcoming improvements (by doing this you accept the {terms} and the {policy}).',
+                            'Keep me updated about new features & upcoming improvements (by doing this you accept the {terms} and the {policy}).',
                         },
                         {
                           terms: (

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -1,19 +1,18 @@
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Form } from '@strapi/helper-plugin';
+import styled from 'styled-components';
+import { Formik } from 'formik';
+import { Form, Link } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Typography } from '@strapi/design-system/Typography';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
-import styled from 'styled-components';
-import { Formik } from 'formik';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,
@@ -53,7 +52,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   <Box paddingTop={6} paddingBottom={7}>
                     <Typography as="h1" variant="alpha">
                       {formatMessage({
-                        id: 'Auth.reset-password.title',
+                        id: 'global.reset-password',
                         defaultMessage: 'Reset password',
                       })}
                     </Typography>
@@ -114,7 +113,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                     })}
                     required
                     label={formatMessage({
-                      id: 'Auth.form.password.label',
+                      id: 'global.password',
                       defaultMessage: 'Password',
                     })}
                     type={passwordShown ? 'text' : 'password'}
@@ -161,7 +160,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                   />
                   <Button fullwidth type="submit">
                     {formatMessage({
-                      id: 'Auth.form.button.reset-password',
+                      id: 'global.change-password',
                       defaultMessage: 'Change password',
                     })}
                   </Button>

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+import { ContentBox, useTracking } from '@strapi/helper-plugin';
 import { Stack } from '@strapi/design-system/Stack';
 import InformationSquare from '@strapi/icons/InformationSquare';
 import CodeSquare from '@strapi/icons/CodeSquare';
 import PlaySquare from '@strapi/icons/PlaySquare';
 import FeatherSquare from '@strapi/icons/FeatherSquare';
-import { ContentBox } from '@strapi/helper-plugin';
 
 const BlockLink = styled.a`
   text-decoration: none;
@@ -14,6 +14,11 @@ const BlockLink = styled.a`
 
 const ContentBlocks = () => {
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  const handleClick = eventName => {
+    trackUsage(eventName);
+  };
 
   return (
     <Stack spacing={5}>
@@ -21,10 +26,11 @@ const ContentBlocks = () => {
         href="https://strapi.io/resource-center"
         target="_blank"
         rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonReadTheDocumentationSection')}
       >
         <ContentBox
           title={formatMessage({
-            id: 'app.components.BlockLink.documentation',
+            id: 'global.documentation',
             defaultMessage: 'Documentation',
           })}
           subtitle={formatMessage({
@@ -39,6 +45,7 @@ const ContentBlocks = () => {
         href="https://strapi.io/starters"
         target="_blank"
         rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonCodeExampleSection')}
       >
         <ContentBox
           title={formatMessage({
@@ -57,6 +64,7 @@ const ContentBlocks = () => {
         href="https://strapi.io/blog/categories/tutorials"
         target="_blank"
         rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonTutorialSection')}
       >
         <ContentBox
           title={formatMessage({
@@ -71,7 +79,12 @@ const ContentBlocks = () => {
           iconBackground="secondary100"
         />
       </BlockLink>
-      <BlockLink href="https://strapi.io/blog" target="_blank" rel="noopener noreferrer nofollow">
+      <BlockLink
+        href="https://strapi.io/blog"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonBlogSection')}
+      >
         <ContentBox
           title={formatMessage({
             id: 'app.components.BlockLink.blog',

package/admin/src/pages/HomePage/HomeHeader.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
-import { Link } from '@strapi/design-system/Link';
+import { Link } from '@strapi/design-system/v2/Link';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
@@ -49,7 +49,7 @@ const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
                 })}
           </WordWrap>
           {hasCreatedContentType ? (
-            <Link href="https://strapi.io/blog">
+            <Link isExternal href="https://strapi.io/blog">
               {formatMessage({
                 id: 'app.components.HomePage.button.blog',
                 defaultMessage: 'See more on the blog',

package/admin/src/pages/HomePage/SocialLinks.js

@@ -10,8 +10,8 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { LinkButton } from '@strapi/design-system/LinkButton';
-import { Link } from '@strapi/design-system/Link';
+import { LinkButton } from '@strapi/design-system/v2/LinkButton';
+import { Link } from '@strapi/design-system/v2/Link';
 import ExternalLink from '@strapi/icons/ExternalLink';
 import Github from '@strapi/icons/Github';
 import Discord from '@strapi/icons/Discord';
@@ -167,10 +167,7 @@ const SocialLinks = () => {
               })}
             </Typography>
           </Stack>
-          <Link
-            href="https://portal.productboard.com/strapi/1-roadmap/tabs/2-under-consideration"
-            endIcon={<ExternalLink />}
-          >
+          <Link href="https://feedback.strapi.io/" isExternal endIcon={<ExternalLink />}>
             {formatMessage({
               id: 'app.components.HomePage.roadmap',
               defaultMessage: 'See our road map',
@@ -187,6 +184,7 @@ const SocialLinks = () => {
                 startIcon={socialLink.icon}
                 variant="tertiary"
                 href={socialLink.link}
+                isExternal
               >
                 {socialLink.name}
               </LinkCustom>

package/admin/src/pages/InstalledPluginsPage/Plugins.js

@@ -14,7 +14,7 @@ const Plugins = () => {
   useFocusWhenNavigate();
 
   const title = formatMessage({
-    id: 'app.components.ListPluginsPage.title',
+    id: 'global.plugins',
     defaultMessage: 'Plugins',
   });
 
@@ -61,7 +61,7 @@ const Plugins = () => {
                 <Th>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.roles.list.header.name',
+                      id: 'global.name',
                       defaultMessage: 'Name',
                     })}
                   </Typography>
@@ -69,7 +69,7 @@ const Plugins = () => {
                 <Th>
                   <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.roles.list.header.description',
+                      id: 'global.description',
                       defaultMessage: 'description',
                     })}
                   </Typography>

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

@@ -8,7 +8,7 @@ import Plugins from './Plugins';
 const InstalledPluginsPage = () => {
   const { formatMessage } = useIntl();
   const title = formatMessage({
-    id: 'app.components.ListPluginsPage.title',
+    id: 'global.plugins',
     defaultMessage: 'Plugins',
   });
 

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

@@ -5,9 +5,8 @@
  *
  */
 import React from 'react';
-import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { useFocusWhenNavigate, LinkButton } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
-import { LinkButton } from '@strapi/design-system/LinkButton';
 import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
 import EmptyPictures from '@strapi/icons/EmptyPictures';

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,47 @@
+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/v2/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')}
+            isExternal
+          >
+            {formatMessage({
+              id: 'admin.pages.MarketPlacePage.submit.plugin.link',
+              defaultMessage: 'Submit your plugin',
+            })}
+          </LinkButton>
+        )
+      }
+    />
+  );
+};
+
+export default PageHeader;
+
+PageHeader.propTypes = {
+  isOnline: PropTypes.bool.isRequired,
+};