@strapi/admin 4.2.0-beta.2 → 4.2.0

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

@@ -6,17 +6,16 @@
 
 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 { createRoute } from '../../utils';
-import { SET_APP_RUNTIME_STATUS } from '../App/constants';
 import Onboarding from './Onboarding';
+import { createRoute } from '../../utils';
+import GuidedTourModal from '../../components/GuidedTour/Modal';
 
 const CM = lazy(() =>
   import(/* webpackChunkName: "content-manager" */ '../../content-manager/pages/App')
@@ -41,20 +40,11 @@ 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(() => {
-    // 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 });
-    }
+    trackUsage('didAccessAuthenticatedAdministration');
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appStatus]);
+  }, []);
 };
 
 const Admin = () => {

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

@@ -12,8 +12,8 @@ import {
   request,
   useNotification,
   TrackingContext,
+  prefixFileUrlWithBackendUrl,
 } 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';
@@ -23,6 +23,7 @@ import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 import { getUID } from './utils';
 import routes from './utils/routes';
+import { useConfigurations } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
@@ -30,6 +31,7 @@ const AuthenticatedApp = lazy(() =>
 
 function App() {
   const toggleNotification = useNotification();
+  const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
 
@@ -39,8 +41,6 @@ function App() {
     );
   }, []);
 
-  const [telemetryProperties, setTelemetryProperties] = useState(null);
-
   useEffect(() => {
     const currentToken = auth.getToken();
 
@@ -69,18 +69,12 @@ function App() {
     const getData = async () => {
       try {
         const {
-          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`);
+          data: { hasAdmin, uuid, menuLogo },
+        } = await request('/admin/init', { method: 'GET' });
 
-          setTelemetryProperties(properties);
+        updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
 
+        if (uuid) {
           try {
             const deviceId = await getUID();
 
@@ -90,9 +84,6 @@ function App() {
                 event: 'didInitializeAdministration',
                 uuid,
                 deviceId,
-                properties: {
-                  ...properties,
-                },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -113,7 +104,7 @@ function App() {
     };
 
     getData();
-  }, [toggleNotification]);
+  }, [toggleNotification, updateProjectSettings]);
 
   const setHasAdmin = hasAdmin => setState(prev => ({ ...prev, hasAdmin }));
 
@@ -124,7 +115,7 @@ function App() {
   return (
     <Suspense fallback={<LoadingIndicatorPage />}>
       <SkipToContent>{formatMessage({ id: 'skipToContent' })}</SkipToContent>
-      <TrackingContext.Provider value={{ uuid, telemetryProperties }}>
+      <TrackingContext.Provider value={uuid}>
         <Switch>
           {authRoutes}
           <Route

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';

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,

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,

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,6 +26,7 @@ const ContentBlocks = () => {
         href="https://strapi.io/resource-center"
         target="_blank"
         rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonReadTheDocumentationSection')}
       >
         <ContentBox
           title={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,7 +167,7 @@ const SocialLinks = () => {
               })}
             </Typography>
           </Stack>
-          <Link href="https://feedback.strapi.io/" endIcon={<ExternalLink />}>
+          <Link href="https://feedback.strapi.io/" isExternal endIcon={<ExternalLink />}>
             {formatMessage({
               id: 'app.components.HomePage.roadmap',
               defaultMessage: 'See our road map',
@@ -184,6 +184,7 @@ const SocialLinks = () => {
                 startIcon={socialLink.icon}
                 variant="tertiary"
                 href={socialLink.link}
+                isExternal
               >
                 {socialLink.name}
               </LinkCustom>

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/{EmptyPluginSearch/EmptyPluginGrid.js → EmptyNpmPackageSearch/EmptyNpmPackageGrid.js}

@@ -9,7 +9,7 @@ const EmptyPluginCard = styled(Box)`
   opacity: 0.33;
 `;
 
-export const EmptyPluginGrid = () => {
+export const EmptyNpmPackageGrid = () => {
   return (
     <GridLayout>
       {Array(12)

package/admin/src/pages/MarketplacePage/components/{EmptyPluginSearch → EmptyNpmPackageSearch}/index.js

@@ -5,12 +5,12 @@ import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Icon } from '@strapi/design-system/Icon';
 import EmptyStateDocument from '@strapi/icons/EmptyDocuments';
-import { EmptyPluginGrid } from './EmptyPluginGrid';
+import { EmptyNpmPackageGrid } from './EmptyNpmPackageGrid';
 
-export const EmptyPluginSearch = ({ content }) => {
+const EmptyNpmPackageSearch = ({ content }) => {
   return (
     <Box position="relative">
-      <EmptyPluginGrid />
+      <EmptyNpmPackageGrid />
       <Box position="absolute" top={11} width="100%">
         <Flex alignItems="center" justifyContent="center" direction="column">
           <Icon as={EmptyStateDocument} color="" width="160px" height="88px" />
@@ -25,6 +25,8 @@ export const EmptyPluginSearch = ({ content }) => {
   );
 };
 
-EmptyPluginSearch.propTypes = {
+EmptyNpmPackageSearch.propTypes = {
   content: PropTypes.string.isRequired,
 };
+
+export default EmptyNpmPackageSearch;

package/admin/src/pages/MarketplacePage/components/{PluginCard → NpmPackageCard}/index.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
-import { LinkButton } from '@strapi/design-system/LinkButton';
+import { LinkButton } from '@strapi/design-system/v2/LinkButton';
 import { Flex } from '@strapi/design-system/Flex';
 import { Icon } from '@strapi/design-system/Icon';
 import { Tooltip } from '@strapi/design-system/Tooltip';
@@ -25,12 +25,18 @@ const EllipsisText = styled(Typography)`
   overflow: hidden;
 `;
 
-const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode }) => {
-  const { attributes } = plugin;
+const NpmPackageCard = ({
+  npmPackage,
+  installedPackageNames,
+  useYarn,
+  isInDevelopmentMode,
+  npmPackageType,
+}) => {
+  const { attributes } = npmPackage;
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
-  const isInstalled = installedPluginNames.includes(attributes.npmPackageName);
+  const isInstalled = installedPackageNames.includes(attributes.npmPackageName);
 
   const commandToCopy = useYarn
     ? `yarn add ${attributes.npmPackageName}`
@@ -41,14 +47,19 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
     defaultMessage: 'Made by Strapi',
   });
 
+  const npmPackageHref =
+    npmPackageType === 'provider'
+      ? attributes.npmPackageUrl
+      : `https://market.strapi.io/plugins/${attributes.slug}`;
+
   return (
     <Flex
       direction="column"
       justifyContent="space-between"
       paddingTop={4}
-      paddingRight={6}
+      paddingRight={4}
       paddingBottom={4}
-      paddingLeft={6}
+      paddingLeft={4}
       hasRadius
       background="neutral0"
       shadow="tableShadow"
@@ -107,7 +118,8 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
       <Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
         <LinkButton
           size="S"
-          href={`https://market.strapi.io/plugins/${attributes.slug}`}
+          href={npmPackageHref}
+          isExternal
           endIcon={<ExternalLink />}
           aria-label={formatMessage(
             {
@@ -134,12 +146,12 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
   );
 };
 
-PluginCard.defaultProps = {
+NpmPackageCard.defaultProps = {
   isInDevelopmentMode: false,
 };
 
-PluginCard.propTypes = {
-  plugin: PropTypes.shape({
+NpmPackageCard.propTypes = {
+  npmPackage: PropTypes.shape({
     id: PropTypes.string.isRequired,
     attributes: PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -152,12 +164,13 @@ PluginCard.propTypes = {
       developerName: PropTypes.string.isRequired,
       validated: PropTypes.bool.isRequired,
       madeByStrapi: PropTypes.bool.isRequired,
-      strapiCompatibility: PropTypes.oneOf(['v3', 'v4']).isRequired,
+      strapiCompatibility: PropTypes.oneOf(['v3', 'v4']),
     }).isRequired,
   }).isRequired,
-  installedPluginNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  installedPackageNames: PropTypes.arrayOf(PropTypes.string).isRequired,
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool,
+  npmPackageType: PropTypes.string.isRequired,
 };
 
-export default PluginCard;
+export default NpmPackageCard;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import NpmPackageCard from '../NpmPackageCard';
+
+const NpmPackagesGrid = ({
+  npmPackages,
+  installedPackageNames,
+  useYarn,
+  isInDevelopmentMode,
+  npmPackageType,
+}) => {
+  return (
+    <Grid gap={4}>
+      {npmPackages.map((npmPackage) => (
+        <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
+          <NpmPackageCard
+            npmPackage={npmPackage}
+            installedPackageNames={installedPackageNames}
+            useYarn={useYarn}
+            isInDevelopmentMode={isInDevelopmentMode}
+            npmPackageType={npmPackageType}
+          />
+        </GridItem>
+      ))}
+    </Grid>
+  );
+};
+
+NpmPackagesGrid.defaultProps = {
+  installedPackageNames: [],
+};
+
+NpmPackagesGrid.propTypes = {
+  npmPackages: PropTypes.array.isRequired,
+  installedPackageNames: PropTypes.arrayOf(PropTypes.string),
+  useYarn: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool.isRequired,
+  npmPackageType: PropTypes.string.isRequired,
+};
+
+export default NpmPackagesGrid;

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

@@ -2,14 +2,16 @@ 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 { LinkButton } from '@strapi/design-system/v2/LinkButton';
 import Upload from '@strapi/icons/Upload';
 import { useTracking } from '@strapi/helper-plugin';
 
-const PageHeader = ({ isOnline }) => {
+const PageHeader = ({ isOnline, npmPackageType }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
+  const tracking = npmPackageType === 'provider' ? 'didSubmitProvider' : 'didSubmitPlugin';
+
   return (
     <HeaderLayout
       title={formatMessage({
@@ -25,12 +27,13 @@ const PageHeader = ({ isOnline }) => {
           <LinkButton
             startIcon={<Upload />}
             variant="tertiary"
-            href="https://market.strapi.io/submit-plugin"
-            onClick={() => trackUsage('didSubmitPlugin')}
+            href={`https://market.strapi.io/submit-${npmPackageType}`}
+            onClick={() => trackUsage(tracking)}
+            isExternal
           >
             {formatMessage({
-              id: 'admin.pages.MarketPlacePage.submit.plugin.link',
-              defaultMessage: 'Submit your plugin',
+              id: `admin.pages.MarketPlacePage.submit.${npmPackageType}.link`,
+              defaultMessage: `Submit ${npmPackageType}`,
             })}
           </LinkButton>
         )
@@ -41,6 +44,11 @@ const PageHeader = ({ isOnline }) => {
 
 export default PageHeader;
 
+PageHeader.defaultProps = {
+  npmPackageType: 'plugin',
+};
+
 PageHeader.propTypes = {
   isOnline: PropTypes.bool.isRequired,
+  npmPackageType: PropTypes.string,
 };