@strapi/admin 4.1.10-beta.0 → 4.1.10

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/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

@@ -1,76 +1,26 @@
-import React, { useRef } from 'react';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
+import React from 'react';
 import { useIntl } from 'react-intl';
-import {
-  useAppInfos,
-  SettingsPageTitle,
-  useFocusWhenNavigate,
-  CheckPermissions,
-  useNotification,
-  useTracking,
-} from '@strapi/helper-plugin';
+import { useAppInfos, SettingsPageTitle, useFocusWhenNavigate } from '@strapi/helper-plugin';
 import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Box } from '@strapi/design-system/Box';
 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 { Button } from '@strapi/design-system/Button';
+import { Link } from '@strapi/design-system/v2/Link';
 import ExternalLink from '@strapi/icons/ExternalLink';
-import Check from '@strapi/icons/Check';
-import { useConfigurations } from '../../../../hooks';
-import Form from './components/Form';
-import { fetchProjectSettings, postProjectSettings } from './utils/api';
-import getFormData from './utils/getFormData';
-
-const permissions = [{ action: 'admin::project-settings.update', subject: null }];
 
 const ApplicationInfosPage = () => {
-  const inputsRef = useRef();
-  const toggleNotification = useNotification();
-  const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
-  const queryClient = useQueryClient();
   useFocusWhenNavigate();
   const appInfos = useAppInfos();
   const { shouldUpdateStrapi, latestStrapiReleaseTag, strapiVersion } = appInfos;
-  const { updateProjectSettings } = useConfigurations();
-
-  const { data } = useQuery('project-settings', fetchProjectSettings);
 
   const currentPlan = appInfos.communityEdition
     ? 'app.components.UpgradePlanModal.text-ce'
     : 'app.components.UpgradePlanModal.text-ee';
 
-  const submitMutation = useMutation(body => postProjectSettings(body), {
-    onSuccess: async ({ menuLogo }) => {
-      await queryClient.invalidateQueries('project-settings', { refetchActive: true });
-      updateProjectSettings({ menuLogo: menuLogo?.url });
-    },
-  });
-
-  const handleSubmit = () => {
-    const inputValues = inputsRef.current.getValues();
-    const formData = getFormData(inputValues);
-
-    submitMutation.mutate(formData, {
-      onSuccess: () => {
-        const { menuLogo } = inputValues;
-
-        if (menuLogo.rawFile) {
-          trackUsage('didChangeLogo');
-        }
-      },
-      onError: () => {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occurred' },
-        });
-      },
-    });
-  };
-
   return (
     <Layout>
       <SettingsPageTitle name="Application" />
@@ -81,113 +31,107 @@ const ApplicationInfosPage = () => {
             id: 'Settings.application.description',
             defaultMessage: 'Administration panel’s global information',
           })}
-          primaryAction={
-            <Button onClick={handleSubmit} startIcon={<Check />}>
-              {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
-            </Button>
-          }
         />
         <ContentLayout>
-          <Stack spacing={6}>
-            <Box
-              hasRadius
-              background="neutral0"
-              shadow="tableShadow"
-              paddingTop={6}
-              paddingBottom={6}
-              paddingRight={7}
-              paddingLeft={7}
-            >
-              <Stack spacing={5}>
-                <Typography variant="delta" as="h3">
-                  {formatMessage({
-                    id: 'global.details',
-                    defaultMessage: 'Details',
-                  })}
-                </Typography>
+          <Box
+            hasRadius
+            background="neutral0"
+            shadow="tableShadow"
+            paddingTop={7}
+            paddingBottom={7}
+            paddingRight={6}
+            paddingLeft={6}
+          >
+            <Stack spacing={5}>
+              <Typography variant="delta" as="h3">
+                {formatMessage({
+                  id: 'global.details',
+                  defaultMessage: 'Details',
+                })}
+              </Typography>
 
-                <Grid paddingTop={1}>
-                  <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({
-                        id: 'Settings.application.strapiVersion',
-                        defaultMessage: 'strapi version',
-                      })}
-                    </Typography>
-                    <Typography as="p">v{strapiVersion}</Typography>
+              <Grid paddingTop={1}>
+                <GridItem col={6} s={12}>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'Settings.application.strapiVersion',
+                      defaultMessage: 'strapi version',
+                    })}
+                  </Typography>
+                  <Typography as="p">v{strapiVersion}</Typography>
+                  <Link
+                    href={
+                      appInfos.communityEdition
+                        ? 'https://discord.strapi.io'
+                        : 'https://support.strapi.io/support/home'
+                    }
+                    isExternal
+                    endIcon={<ExternalLink />}
+                  >
+                    {formatMessage({
+                      id: 'Settings.application.get-help',
+                      defaultMessage: 'Get help',
+                    })}
+                  </Link>
+                </GridItem>
+                <GridItem col={6} s={12}>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({
+                      id: 'Settings.application.edition-title',
+                      defaultMessage: 'current plan',
+                    })}
+                  </Typography>
+                  <Typography as="p">
+                    {formatMessage({
+                      id: currentPlan,
+                      defaultMessage: `${
+                        appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
+                      }`,
+                    })}
+                  </Typography>
+                </GridItem>
+              </Grid>
+
+              <Grid paddingTop={1}>
+                <GridItem col={6} s={12}>
+                  {shouldUpdateStrapi && (
                     <Link
-                      href={
-                        appInfos.communityEdition
-                          ? 'https://discord.strapi.io'
-                          : 'https://support.strapi.io/support/home'
-                      }
+                      href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                      isExternal
                       endIcon={<ExternalLink />}
                     >
                       {formatMessage({
-                        id: 'Settings.application.get-help',
-                        defaultMessage: 'Get help',
-                      })}
-                    </Link>
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <Typography variant="sigma" textColor="neutral600">
-                      {formatMessage({
-                        id: 'Settings.application.edition-title',
-                        defaultMessage: 'current plan',
-                      })}
-                    </Typography>
-                    <Typography as="p">
-                      {formatMessage({
-                        id: currentPlan,
-                        defaultMessage: `${
-                          appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
-                        }`,
-                      })}
-                    </Typography>
-                  </GridItem>
-                </Grid>
-
-                <Grid paddingTop={1}>
-                  <GridItem col={6} s={12}>
-                    {shouldUpdateStrapi && (
-                      <Link
-                        href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
-                        endIcon={<ExternalLink />}
-                      >
-                        {formatMessage({
-                          id: 'Settings.application.link-upgrade',
-                          defaultMessage: 'Upgrade your admin panel',
-                        })}
-                      </Link>
-                    )}
-                  </GridItem>
-                  <GridItem col={6} s={12}>
-                    <Link href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
-                      {formatMessage({
-                        id: 'Settings.application.link-pricing',
-                        defaultMessage: 'See all pricing plans',
+                        id: 'Settings.application.link-upgrade',
+                        defaultMessage: 'Upgrade your admin panel',
                       })}
                     </Link>
-                  </GridItem>
-                </Grid>
-
-                <Box paddingTop={1}>
-                  <Typography variant="sigma" textColor="neutral600">
+                  )}
+                </GridItem>
+                <GridItem col={6} s={12}>
+                  <Link
+                    href="https://strapi.io/pricing-self-hosted"
+                    isExternal
+                    endIcon={<ExternalLink />}
+                  >
                     {formatMessage({
-                      id: 'Settings.application.node-version',
-                      defaultMessage: 'node version',
+                      id: 'Settings.application.link-pricing',
+                      defaultMessage: 'See all pricing plans',
                     })}
-                  </Typography>
-                  <Typography as="p">{appInfos.nodeVersion}</Typography>
-                </Box>
-              </Stack>
-            </Box>
-            {data && (
-              <CheckPermissions permissions={permissions}>
-                <Form ref={inputsRef} projectSettingsStored={data} />
-              </CheckPermissions>
-            )}
-          </Stack>
+                  </Link>
+                </GridItem>
+              </Grid>
+
+              <Box paddingTop={1}>
+                <Typography variant="sigma" textColor="neutral600">
+                  {formatMessage({
+                    id: 'Settings.application.node-version',
+                    defaultMessage: 'node version',
+                  })}
+                </Typography>
+                <Typography as="p">{appInfos.nodeVersion}</Typography>
+              </Box>
+            </Stack>
+          </Box>
         </ContentLayout>
       </Main>
     </Layout>

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