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

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

@@ -2,7 +2,7 @@ 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';
 
@@ -27,6 +27,7 @@ const PageHeader = ({ isOnline }) => {
             variant="tertiary"
             href="https://market.strapi.io/submit-plugin"
             onClick={() => trackUsage('didSubmitPlugin')}
+            isExternal
           >
             {formatMessage({
               id: 'admin.pages.MarketPlacePage.submit.plugin.link',

package/admin/src/pages/MarketplacePage/components/PluginCard/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';
@@ -46,9 +46,9 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
       direction="column"
       justifyContent="space-between"
       paddingTop={4}
-      paddingRight={6}
+      paddingRight={4}
       paddingBottom={4}
-      paddingLeft={6}
+      paddingLeft={4}
       hasRadius
       background="neutral0"
       shadow="tableShadow"
@@ -108,6 +108,7 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
         <LinkButton
           size="S"
           href={`https://market.strapi.io/plugins/${attributes.slug}`}
+          isExternal
           endIcon={<ExternalLink />}
           aria-label={formatMessage(
             {

package/admin/src/pages/NotFoundPage/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/SettingsPage/components/SettingsNav/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
 import {
   SubNav,
   SubNavHeader,
   SubNavSection,
   SubNavSections,
   SubNavLink,
-} from '@strapi/design-system/SubNav';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
+} from '@strapi/design-system/v2/SubNav';
 import { getSectionsToDisplay } from '../../utils';
 
 const SettingsNav = ({ menu }) => {
@@ -41,7 +42,7 @@ const SettingsNav = ({ menu }) => {
         {sections.map(section => (
           <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
             {section.links.map(link => (
-              <SubNavLink withBullet={link.hasNotification} to={link.to} key={link.id}>
+              <SubNavLink as={NavLink} withBullet={link.hasNotification} to={link.to} key={link.id}>
                 {formatMessage(link.intlLabel)}
               </SubNavLink>
             ))}

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

@@ -8,13 +8,13 @@ import {
   useNotification,
   useTracking,
   useGuidedTour,
+  Link,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
 import Check from '@strapi/icons/Check';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
-import { Link } from '@strapi/design-system/Link';
 import { Formik } from 'formik';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Pencil from '@strapi/icons/Pencil';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Link } from '@strapi/design-system/Link';
+import { Link } from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 

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

@@ -10,11 +10,11 @@ import {
   DynamicTable,
   useTracking,
   useGuidedTour,
+  LinkButton,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
-import { LinkButton } from '@strapi/design-system/LinkButton';
 import Plus from '@strapi/icons/Plus';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';

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

@@ -8,7 +8,7 @@ import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Typography } from '@strapi/design-system/Typography';
 
 import { Stack } from '@strapi/design-system/Stack';
-import { Link } from '@strapi/design-system/Link';
+import { Link } from '@strapi/design-system/v2/Link';
 import ExternalLink from '@strapi/icons/ExternalLink';
 
 const ApplicationInfosPage = () => {
@@ -65,6 +65,7 @@ const ApplicationInfosPage = () => {
                         ? 'https://discord.strapi.io'
                         : 'https://support.strapi.io/support/home'
                     }
+                    isExternal
                     endIcon={<ExternalLink />}
                   >
                     {formatMessage({
@@ -96,6 +97,7 @@ const ApplicationInfosPage = () => {
                   {shouldUpdateStrapi && (
                     <Link
                       href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                      isExternal
                       endIcon={<ExternalLink />}
                     >
                       {formatMessage({
@@ -106,7 +108,11 @@ const ApplicationInfosPage = () => {
                   )}
                 </GridItem>
                 <GridItem col={6} s={12}>
-                  <Link href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
+                  <Link
+                    href="https://strapi.io/pricing-self-hosted"
+                    isExternal
+                    endIcon={<ExternalLink />}
+                  >
                     {formatMessage({
                       id: 'Settings.application.link-pricing',
                       defaultMessage: 'See all pricing plans',

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

@@ -6,6 +6,7 @@ import {
   useTracking,
   LoadingIndicatorPage,
   SettingsPageTitle,
+  Link,
 } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
@@ -13,7 +14,6 @@ import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Stack } from '@strapi/design-system/Stack';
 import { Formik } from 'formik';
-import { Link } from '@strapi/design-system/Link';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import get from 'lodash/get';
 import { useIntl } from 'react-intl';

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

@@ -15,6 +15,7 @@ import {
   useNotification,
   useOverlayBlocker,
   LoadingIndicatorPage,
+  Link,
 } from '@strapi/helper-plugin';
 import { useQuery } from 'react-query';
 import { Formik } from 'formik';
@@ -22,7 +23,6 @@ import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
-import { Link } from '@strapi/design-system/Link';
 import { Typography } from '@strapi/design-system/Typography';
 import { Main } from '@strapi/design-system/Main';
 import { Stack } from '@strapi/design-system/Stack';

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js

@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Form } from '@strapi/helper-plugin';
+import { Form, Link } from '@strapi/helper-plugin';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Check from '@strapi/icons/Check';
 import Publish from '@strapi/icons/Play';
 import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
-import { Link } from '@strapi/design-system/Link';
 import { Stack } from '@strapi/design-system/Stack';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Grid, GridItem } from '@strapi/design-system/Grid';

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

@@ -17,6 +17,7 @@ import {
   ConfirmDialog,
   onRowClick,
   stopPropagation,
+  LinkButton,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, Layout, ContentLayout, ActionLayout } from '@strapi/design-system/Layout';
 import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
@@ -30,7 +31,6 @@ import { Button } from '@strapi/design-system/Button';
 import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 import { Switch } from '@strapi/design-system/Switch';
 import { Main } from '@strapi/design-system/Main';
-import { LinkButton } from '@strapi/design-system/LinkButton';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Box } from '@strapi/design-system/Box';
 import Plus from '@strapi/icons/Plus';