@strapi/admin 4.6.0-beta.0 → 4.6.0-beta.2

package/admin/src/content-manager/hooks/useDragAndDrop.js

@@ -12,6 +12,7 @@ import { useKeyboardDragAndDrop } from './useKeyboardDragAndDrop';
  *  item?: object,
  *  onStart?: () => void,
  *  onEnd?: () => void,
+ *  dropSensitivity?: 'regular' | 'immediate'
  * } & import('./useKeyboardDragAndDrop').UseKeyboardDragAndDropCallbacks}
  */
 
@@ -39,6 +40,7 @@ export const useDragAndDrop = (
     onDropItem,
     onCancel,
     onMoveItem,
+    dropSensitivity = 'regular',
   }
 ) => {
   const objectRef = useRef(null);
@@ -62,19 +64,21 @@ export const useDragAndDrop = (
         return;
       }
 
-      const hoverBoundingRect = objectRef.current.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+      if (dropSensitivity === 'regular') {
+        const hoverBoundingRect = objectRef.current.getBoundingClientRect();
+        const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+        const clientOffset = monitor.getClientOffset();
+        const hoverClientY = clientOffset.y - hoverBoundingRect.top;
 
-      // Dragging downwards
-      if (dragIndex < newInd && hoverClientY < hoverMiddleY) {
-        return;
-      }
+        // Dragging downwards
+        if (dragIndex < newInd && hoverClientY < hoverMiddleY) {
+          return;
+        }
 
-      // Dragging upwards
-      if (dragIndex > newInd && hoverClientY > hoverMiddleY) {
-        return;
+        // Dragging upwards
+        if (dragIndex > newInd && hoverClientY > hoverMiddleY) {
+          return;
+        }
       }
 
       // Time to actually perform the action
@@ -104,12 +108,22 @@ export const useDragAndDrop = (
       }
     },
     canDrag: active,
+    /**
+     * This is for useful when the item is in a virtualized list.
+     * However, if we don't have an ID then we want the libraries
+     * defaults to take care of this.
+     */
+    isDragging: item.id
+      ? (monitor) => {
+          return item.id === monitor.getItem().id;
+        }
+      : undefined,
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
   });
 
-  const handleKeyDown = useKeyboardDragAndDrop(index, {
+  const handleKeyDown = useKeyboardDragAndDrop(active, index, {
     onGrabItem,
     onDropItem,
     onCancel,

package/admin/src/content-manager/hooks/useKeyboardDragAndDrop.js

@@ -17,9 +17,13 @@ import { useState } from 'react';
  *
  * @internal - You should use `useDragAndDrop` instead.
  *
- * @type {(index: number, callbacks: UseKeyboardDragAndDropCallbacks) => (event: React.KeyboardEvent<HTMLButtonElement>) => void}
+ * @type {(active: boolean, index: number, callbacks: UseKeyboardDragAndDropCallbacks) => (event: React.KeyboardEvent<HTMLButtonElement>) => void}
  */
-export const useKeyboardDragAndDrop = (index, { onCancel, onDropItem, onGrabItem, onMoveItem }) => {
+export const useKeyboardDragAndDrop = (
+  active,
+  index,
+  { onCancel, onDropItem, onGrabItem, onMoveItem }
+) => {
   const [isSelected, setIsSelected] = useState(false);
   /**
    * @type {(movement: 'UP' | 'DOWN') => void})}
@@ -64,6 +68,10 @@ export const useKeyboardDragAndDrop = (index, { onCancel, onDropItem, onGrabItem
    * @type {React.KeyboardEventHandler<HTMLButtonElement>}
    */
   const handleKeyDown = (e) => {
+    if (!active) {
+      return;
+    }
+
     if (e.key === 'Tab' && !isSelected) {
       return;
     }

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -5,9 +5,12 @@ import { axiosInstance } from '../../../core/utils';
 
 import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 
-export const useRelation = (cacheKey, { name, relation, search }) => {
+import { useCallbackRef } from '../useCallbackRef';
+
+export const useRelation = (cacheKey, { relation, search }) => {
   const [searchParams, setSearchParams] = useState({});
   const [currentPage, setCurrentPage] = useState(0);
+
   /**
    * This runs in `useInfiniteQuery` to actually fetch the data
    */
@@ -44,7 +47,7 @@ export const useRelation = (cacheKey, { name, relation, search }) => {
     }
   };
 
-  const { onLoad: onLoadRelationsCallback, normalizeArguments = {} } = relation;
+  const { onLoad: onLoadRelations, normalizeArguments = {} } = relation;
 
   const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
     cacheTime: 0,
@@ -120,19 +123,19 @@ export const useRelation = (cacheKey, { name, relation, search }) => {
     }
   }, [pageGoal, currentPage, fetchNextPage, hasNextPage, status]);
 
+  const onLoadRelationsCallback = useCallbackRef(onLoadRelations);
+
   useEffect(() => {
     if (status === 'success' && data && data.pages?.at(-1)?.results && onLoadRelationsCallback) {
       // everytime we fetch, we normalize prior to adding to redux
       const normalizedResults = normalizeRelations(data.pages.at(-1).results, normalizeArguments);
 
       // this is loadRelation from EditViewDataManagerProvider
-      onLoadRelationsCallback({
-        target: { name, value: normalizedResults },
-      });
+      onLoadRelationsCallback(normalizedResults);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status, onLoadRelationsCallback, name, data]);
+  }, [status, onLoadRelationsCallback, data]);
 
   const searchRes = useInfiniteQuery(
     ['relation', cacheKey, 'search', JSON.stringify(searchParams)],

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -22,7 +22,9 @@ import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
 const matchByTitle = (links, search) =>
-  matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] });
+  search
+    ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] })
+    : sortBy(links, (object) => object.title.toLowerCase());
 
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
@@ -52,9 +54,7 @@ const LeftMenu = () => {
         defaultMessage: 'Collection Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlCollectionTypeLinks, search), (object) =>
-        object.title.toLowerCase()
-      ),
+      links: matchByTitle(intlCollectionTypeLinks, search),
     },
     {
       id: 'singleTypes',
@@ -63,9 +63,7 @@ const LeftMenu = () => {
         defaultMessage: 'Single Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlSingleTypeLinks, search), (object) =>
-        object.title.toLowerCase()
-      ),
+      links: matchByTitle(intlSingleTypeLinks, search),
     },
   ];
 

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -1,43 +1,31 @@
 import React from 'react';
-import get from 'lodash/get';
-import PropTypes from 'prop-types';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Box, Flex, Typography, Stack } from '@strapi/design-system';
+
+import { ComponentIcon } from '../../../components/ComponentIcon';
 import useLayoutDnd from '../../../hooks/useLayoutDnd';
 
-const CustomFlex = styled(Flex)`
-  border-radius: 50%;
-  svg {
-    & > * {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-    width: 12px;
-    height: 12px;
-  }
-`;
 const CustomLink = styled(Flex)`
   text-decoration: none;
+
+  &:focus,
   &:hover {
     ${({ theme }) => `
-      background: ${theme.colors.primary100};
-      svg {
-        & > * {
-          fill: ${theme.colors.primary600};
-        }
-      }
+      background-color: ${theme.colors.primary100};
+      border-color: ${theme.colors.primary200};
+
       ${Typography} {
           color: ${theme.colors.primary600};
       }
-      ${CustomFlex} {
-        background: ${theme.colors.primary200};
-      }
-      border-color: ${theme.colors.primary200};
     `}
+
+    /* > ComponentIcon */
+    > div:first-child {
+      background: ${({ theme }) => theme.colors.primary200};
+      color: ${({ theme }) => theme.colors.primary600};
+    }
   }
 `;
 
@@ -61,19 +49,11 @@ const DynamicZoneList = ({ components }) => {
           as={Link}
           to={`/content-manager/components/${componentUid}/configurations/edit`}
         >
-          <CustomFlex
-            width={`${32 / 16}rem`}
-            height={`${32 / 16}rem`}
-            background="neutral150"
-            justifyContent="center"
-            alignItems="center"
-            padding={2}
-          >
-            <FontAwesomeIcon icon={get(componentLayouts, [componentUid, 'info', 'icon'], '')} />
-          </CustomFlex>
+          <ComponentIcon />
+
           <Box paddingTop={1}>
             <Typography fontSize={1} textColor="neutral600" fontWeight="bold">
-              {get(componentLayouts, [componentUid, 'info', 'displayName'], '')}
+              {componentLayouts?.[componentUid]?.info?.displayName ?? ''}
             </Typography>
           </Box>
         </CustomLink>

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -74,7 +74,7 @@ const Header = ({
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
           </Button>
         )}
-        <Button disabled={!didChangeData} isLoading={status === 'submit-pending'} type="submit">
+        <Button disabled={!didChangeData} loading={status === 'submit-pending'} type="submit">
           {formatMessage({
             id: getTrad('containers.Edit.submit'),
             defaultMessage: 'Save',

package/admin/src/content-manager/pages/ListSettingsView/index.js

@@ -5,6 +5,7 @@ import isEqual from 'lodash/isEqual';
 import upperFirst from 'lodash/upperFirst';
 import pick from 'lodash/pick';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
@@ -35,12 +36,12 @@ const ListSettingsView = ({ layout, slug }) => {
 
   const [showWarningSubmit, setWarningSubmit] = useState(false);
   const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
-  const [isModalFormOpen, setIsModalFormOpen] = useState(false);
-  const toggleModalForm = () => setIsModalFormOpen((prevState) => !prevState);
   const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, layout)
   );
   const { fieldToEdit, fieldForm, initialData, modifiedData } = reducerState;
+  const isModalFormOpen = !isEmpty(fieldForm);
+
   const { attributes } = layout;
   const displayedFields = modifiedData.layouts.list;
 
@@ -110,19 +111,16 @@ const ListSettingsView = ({ layout, slug }) => {
       type: 'SET_FIELD_TO_EDIT',
       fieldToEdit,
     });
-    toggleModalForm();
   };
 
   const handleCloseModal = () => {
     dispatch({
       type: 'UNSET_FIELD_TO_EDIT',
     });
-    toggleModalForm();
   };
 
   const handleSubmitFieldEdit = (e) => {
     e.preventDefault();
-    toggleModalForm();
     dispatch({
       type: 'SUBMIT_FIELD_FORM',
     });

package/admin/src/content-manager/utils/getMaxTempKey.js

@@ -3,10 +3,12 @@ const getMaxTempKey = (arr) => {
     return -1;
   }
 
-  return Math.max.apply(
+  const maxTempKey = Math.max.apply(
     Math,
-    arr.map((o) => o.__temp_key__ ?? o.id)
+    arr.map((o) => o.__temp_key__ ?? 0)
   );
+
+  return Number.isNaN(maxTempKey) ? -1 : maxTempKey;
 };
 
 export default getMaxTempKey;

package/admin/src/content-manager/utils/paths.js

@@ -0,0 +1,37 @@
+/**
+ * This file is for all helpers related to `paths` in the CM.
+ */
+import { get } from 'lodash';
+
+/**
+ * This is typically used in circumstances where there are re-orderable pieces e.g. Dynamic Zones
+ * or Repeatable fields. It finds the _original_ location of the initial data using `__temp_key__` values
+ * which are added to the fields in the `INIT_FORM` reducer to give array data a stable (when you add
+ * a new item they wont have a server ID).
+ */
+export const getInitialDataPathUsingTempKeys = (initialData, modifiedData) => (currentPath) => {
+  const splitPath = currentPath.split('.');
+
+  return splitPath.reduce((acc, currentValue, index) => {
+    const initialDataParent = get(initialData, acc);
+    const modifiedDataTempKey = get(modifiedData, [
+      ...splitPath.slice(0, index),
+      currentValue,
+      '__temp_key__',
+    ]);
+
+    if (Array.isArray(initialDataParent) && typeof modifiedDataTempKey === 'number') {
+      const initialDataIndex = initialDataParent.findIndex(
+        (entry) => entry.__temp_key__ === modifiedDataTempKey
+      );
+
+      acc.push(initialDataIndex.toString());
+
+      return acc;
+    }
+
+    acc.push(currentValue);
+
+    return acc;
+  }, []);
+};

package/admin/src/hooks/index.js

@@ -10,4 +10,3 @@ export { default as usePermissionsDataManager } from './usePermissionsDataManage
 export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useThemeToggle } from './useThemeToggle';
 export { default as useRegenerate } from './useRegenerate';
-export { default as useFetchClient } from './useFetchClient';

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

@@ -24,6 +24,13 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
       id: 'permissions',
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
       links: [
+        {
+          intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
+          to: '/settings/audit-logs?pageSize=50&page=1&sort=date:DESC',
+          id: 'auditLogs',
+          isDisplayed: false,
+          permissions: adminPermissions.settings.auditLogs.main,
+        },
         {
           intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
           to: '/settings/roles',

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

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
-import { FocusTrap } from '@strapi/design-system/FocusTrap';
+import { Box, Flex, FocusTrap, Typography, Icon, Stack } from '@strapi/design-system';
+import { Book, Cross, Information, Question } from '@strapi/icons';
+import { pxToRem } from '@strapi/helper-plugin';
+
 import { useConfigurations } from '../../../hooks';
 
 const OnboardingWrapper = styled(Box)`
@@ -14,52 +13,44 @@ const OnboardingWrapper = styled(Box)`
   right: ${({ theme }) => theme.spaces[2]};
 `;
 
-const Button = styled.button`
+const Button = styled(Box)`
   width: ${({ theme }) => theme.spaces[8]};
   height: ${({ theme }) => theme.spaces[8]};
   background: ${({ theme }) => theme.colors.primary600};
   box-shadow: ${({ theme }) => theme.shadows.tableShadow};
   border-radius: 50%;
-  svg {
-    color: ${({ theme }) => theme.colors.buttonNeutral0};
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.buttonNeutral0};
   }
 `;
 
 const LinksWrapper = styled(Box)`
-  position: absolute;
   bottom: ${({ theme }) => `${theme.spaces[9]}`};
+  min-width: ${200 / 16}rem;
+  position: absolute;
   right: 0;
-  width: ${200 / 16}rem;
 `;
 
-const StyledLink = styled.a`
-  display: flex;
-  align-items: center;
+const StyledLink = styled(Flex)`
   text-decoration: none;
-  padding: ${({ theme }) => theme.spaces[2]};
-  padding-left: ${({ theme }) => theme.spaces[5]};
 
-  svg {
-    color: ${({ theme }) => theme.colors.neutral600};
-    margin-right: ${({ theme }) => theme.spaces[2]};
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
   }
 
+  &:focus,
   &:hover {
     background: ${({ theme }) => theme.colors.neutral100};
-    color: ${({ theme }) => theme.colors.neutral500};
 
-    svg {
-      color: ${({ theme }) => theme.colors.neutral700};
+    svg path {
+      fill: ${({ theme }) => theme.colors.neutral700};
     }
 
     ${[Typography]} {
       color: ${({ theme }) => theme.colors.neutral700};
     }
   }
-
-  ${[Typography]} {
-    color: ${({ theme }) => theme.colors.neutral600};
-  }
 `;
 
 const Onboarding = () => {
@@ -71,9 +62,9 @@ const Onboarding = () => {
     return null;
   }
 
-  const staticLinks = [
+  const STATIC_LINKS = [
     {
-      icon: 'book',
+      Icon: <Book />,
       label: formatMessage({
         id: 'global.documentation',
         defaultMessage: 'Documentation',
@@ -81,7 +72,7 @@ const Onboarding = () => {
       destination: 'https://docs.strapi.io',
     },
     {
-      icon: 'file',
+      Icon: <Information />,
       label: formatMessage({ id: 'app.static.links.cheatsheet', defaultMessage: 'CheatSheet' }),
       destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
     },
@@ -94,37 +85,44 @@ const Onboarding = () => {
   return (
     <OnboardingWrapper as="aside">
       <Button
+        as="button"
         id="onboarding"
-        aria-label={formatMessage({
-          id: 'app.components.Onboarding.help.button',
-          defaultMessage: 'Help button',
-        })}
+        aria-label={formatMessage(
+          isOpen
+            ? {
+                id: 'app.components.Onboarding.help.button-close',
+                defaultMessage: 'Close help menu',
+              }
+            : {
+                id: 'app.components.Onboarding.help.button',
+                defaultMessage: 'Open help menu',
+              }
+        )}
         onClick={handleClick}
       >
-        {!isOpen && <FontAwesomeIcon icon={faQuestion} />}
-        {isOpen && <FontAwesomeIcon icon={faTimes} />}
+        <Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
       </Button>
 
       {/* FIX ME - replace with popover when overflow popover is fixed 
        + when v4 mockups for onboarding component are ready */}
       {isOpen && (
         <FocusTrap onEscape={handleClick}>
-          <LinksWrapper
-            background="neutral0"
-            hasRadius
-            shadow="tableShadow"
-            paddingBottom={2}
-            paddingTop={2}
-          >
-            {staticLinks.map((link) => (
+          <LinksWrapper background="neutral0" hasRadius shadow="tableShadow" padding={2}>
+            {STATIC_LINKS.map((link) => (
               <StyledLink
+                as="a"
                 key={link.label}
                 rel="nofollow noreferrer noopener"
                 target="_blank"
                 href={link.destination}
+                padding={2}
+                hasRadius
+                alignItems="center"
               >
-                <FontAwesomeIcon icon={link.icon} />
-                <Typography>{link.label}</Typography>
+                <Stack horizontal spacing={2}>
+                  {link.Icon}
+                  <Typography color="neutral600">{link.label}</Typography>
+                </Stack>
               </StyledLink>
             ))}
           </LinksWrapper>

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

@@ -14,6 +14,7 @@ import {
   TrackingProvider,
   prefixFileUrlWithBackendUrl,
   useAppInfos,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system/Main';
@@ -35,8 +36,12 @@ function App() {
   const toggleNotification = useNotification();
   const { updateProjectSettings } = useConfigurations();
   const { formatMessage } = useIntl();
-  const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
+  const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
+    isLoading: true,
+    hasAdmin: false,
+  });
   const appInfo = useAppInfos();
+  const { get } = useFetchClient();
 
   const authRoutes = useMemo(() => {
     return makeUniqueRoutes(
@@ -80,27 +85,29 @@ function App() {
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
         updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
+        const deviceId = await getUID();
 
         if (uuid) {
           const {
             data: { data: properties },
-          } = await axios.get(`${strapi.backendURL}/admin/telemetry-properties`);
+          } = await get(`/admin/telemetry-properties`, {
+            // NOTE: needed because the interceptors of the fetchClient redirect to /login when receive a 401 and it would end up in an infinite loop when the user doesn't have a session.
+            validateStatus: (status) => status < 500,
+          });
 
           setTelemetryProperties(properties);
 
           try {
-            const deviceId = await getUID();
-
-            await fetch('https://analytics.strapi.io/track', {
+            await fetch('https://analytics.strapi.io/api/v2/track', {
               method: 'POST',
               body: JSON.stringify({
+                // This event is anonymous
                 event: 'didInitializeAdministration',
-                uuid,
+                userId: '',
                 deviceId,
-                properties: {
-                  ...properties,
-                  environment: appInfo.currentEnvironment,
-                },
+                eventPropeties: {},
+                userProperties: { environment: appInfo.currentEnvironment },
+                groupProperties: { ...properties, projectId: uuid },
               }),
               headers: {
                 'Content-Type': 'application/json',
@@ -111,7 +118,7 @@ function App() {
           }
         }
 
-        setState({ isLoading: false, hasAdmin, uuid });
+        setState({ isLoading: false, hasAdmin, uuid, deviceId });
       } catch (err) {
         toggleNotification({
           type: 'warning',
@@ -130,8 +137,9 @@ function App() {
     () => ({
       uuid,
       telemetryProperties,
+      deviceId,
     }),
-    [uuid, telemetryProperties]
+    [uuid, telemetryProperties, deviceId]
   );
 
   if (isLoading) {

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

@@ -268,7 +268,7 @@ const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) =>
                       required
                       label={formatMessage({
                         id: 'Auth.form.confirmPassword.label',
-                        defaultMessage: 'Confirmation Password',
+                        defaultMessage: 'Confirm Password',
                       })}
                       type={confirmPasswordShown ? 'text' : 'password'}
                     />

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

@@ -154,7 +154,7 @@ const ForgotPassword = ({ onSubmit, schema }) => {
                     required
                     label={formatMessage({
                       id: 'Auth.form.confirmPassword.label',
-                      defaultMessage: 'Confirmation Password',
+                      defaultMessage: 'Confirm Password',
                     })}
                     type={confirmPasswordShown ? 'text' : 'password'}
                   />

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

@@ -458,7 +458,7 @@ const ProfilePage = () => {
                                     href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
                                   >
                                     {formatMessage({
-                                      id: 'Settings.profile.form.section.experience.documentation',
+                                      id: 'Settings.profile.form.section.experience.here',
                                       defaultMessage: 'here',
                                     })}
                                   </DocumentationLink>