@strapi/admin 4.14.4 → 4.14.6

package/admin/src/content-manager/components/BlocksEditor/hooks/useBlocksStore.js

@@ -37,6 +37,10 @@ import styled, { css } from 'styled-components';
 import { composeRefs } from '../../../utils';
 import { editLink, removeLink } from '../utils/links';
 
+const StyledBaseLink = styled(BaseLink)`
+  text-decoration: none;
+`;
+
 const H1 = styled(Typography).attrs({ as: 'h1' })`
   font-size: ${42 / 16}rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
@@ -67,33 +71,6 @@ const H6 = styled(Typography).attrs({ as: 'h6' })`
   line-height: ${({ theme }) => theme.lineHeights[1]};
 `;
 
-const Heading = ({ attributes, children, element }) => {
-  switch (element.level) {
-    case 1:
-      return <H1 {...attributes}>{children}</H1>;
-    case 2:
-      return <H2 {...attributes}>{children}</H2>;
-    case 3:
-      return <H3 {...attributes}>{children}</H3>;
-    case 4:
-      return <H4 {...attributes}>{children}</H4>;
-    case 5:
-      return <H5 {...attributes}>{children}</H5>;
-    case 6:
-      return <H6 {...attributes}>{children}</H6>;
-    default: // do nothing
-      return null;
-  }
-};
-
-Heading.propTypes = {
-  attributes: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-  element: PropTypes.shape({
-    level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
-  }).isRequired,
-};
-
 const CodeBlock = styled.pre.attrs({ role: 'code' })`
   border-radius: ${({ theme }) => theme.borderRadius};
   background-color: ${({ theme }) => theme.colors.neutral100};
@@ -113,8 +90,9 @@ const CodeBlock = styled.pre.attrs({ role: 'code' })`
 const Blockquote = styled.blockquote.attrs({ role: 'blockquote' })`
   margin: ${({ theme }) => `${theme.spaces[4]} 0`};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
-  border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral150}`};
+  border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral200}`};
   padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};
+  color: ${({ theme }) => theme.colors.neutral600};
 `;
 
 const listStyle = css`
@@ -227,8 +205,18 @@ const handleEnterKeyOnList = (editor) => {
     // Move the selection to the newly created paragraph
     Transforms.select(editor, createdParagraphPath);
   } else {
-    // Otherwise just create a new list item by splitting the current one
-    Transforms.splitNodes(editor, { always: true });
+    // Check if the cursor is at the end of the list item
+    const isNodeEnd = Editor.isEnd(editor, editor.selection.anchor, currentListItemPath);
+
+    if (isNodeEnd) {
+      // If there was nothing after the cursor, create a fresh new list item,
+      // in order to avoid carrying over the modifiers from the previous list item
+      Transforms.insertNodes(editor, { type: 'list-item', children: [{ type: 'text', text: '' }] });
+    } else {
+      // If there is something after the cursor, split the current list item,
+      // so that we keep the content and the modifiers
+      Transforms.splitNodes(editor);
+    }
   }
 };
 
@@ -320,7 +308,7 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
 
   return (
     <>
-      <BaseLink
+      <StyledBaseLink
         {...attributes}
         ref={composedRefs}
         href={element.url}
@@ -328,7 +316,7 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
         color="primary600"
       >
         {children}
-      </BaseLink>
+      </StyledBaseLink>
       {popoverOpen && (
         <Popover source={linkRef} onDismiss={handleDismiss} padding={4} contentEditable={false}>
           {isEditing ? (
@@ -382,9 +370,11 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
           ) : (
             <Flex direction="column" gap={4} alignItems="start" width="400px">
               <Typography>{elementText}</Typography>
-              <BaseLink href={element.url} target="_blank" color="primary600">
-                {element.url}
-              </BaseLink>
+              <Typography>
+                <StyledBaseLink href={element.url} target="_blank" color="primary600">
+                  {element.url}
+                </StyledBaseLink>
+              </Typography>
               <Flex justifyContent="end" width="100%" gap={2}>
                 <IconButton
                   icon={<Trash />}
@@ -461,13 +451,18 @@ export function useBlocksStore() {
          * after the cursor, while retaining all the children, modifiers etc.
          */
         Transforms.splitNodes(editor, {
-          /**
-           * Makes sure we always create a new node,
-           * even if there's nothing to the right of the cursor in the node.
-           */
+          // Makes sure we always create a new node,
+          // even if there's nothing to the right of the cursor in the node.
           always: true,
         });
 
+        // Check if the created node is empty (if there was no text after the cursor in the node)
+        // This lets us know if we need to carry over the modifiers from the previous node
+        const [, parentBlockPath] = Editor.above(editor, {
+          match: (n) => n.type !== 'text',
+        });
+        const isNodeEnd = Editor.isEnd(editor, editor.selection.anchor, parentBlockPath);
+
         /**
          * Delete and recreate the node that was created at the right of the cursor.
          * This is to avoid node pollution
@@ -481,12 +476,14 @@ export function useBlocksStore() {
         // Check if after the current position there is another node
         const hasNextNode = editor.children.length - anchorPathInitialPosition[0] > 1;
 
-        // Insert the new node at the right position. The next line after the editor selection if present or otherwise at the end of the editor.
+        // Insert the new node at the right position.
+        // The next line after the editor selection if present or otherwise at the end of the editor.
         Transforms.insertNodes(
           editor,
           {
             type: 'paragraph',
-            children: fragmentedNode.children,
+            // Don't carry over the modifiers from the previous node if there was no text after the cursor
+            children: isNodeEnd ? [{ type: 'text', text: '' }] : fragmentedNode.children,
           },
           {
             at: hasNextNode ? [anchorPathInitialPosition[0] + 1] : [editor.children.length],
@@ -503,7 +500,7 @@ export function useBlocksStore() {
       },
     },
     'heading-one': {
-      renderElement: (props) => <Heading {...props} />,
+      renderElement: (props) => <H1 {...props.attributes}>{props.children}</H1>,
       icon: HeadingOne,
       label: {
         id: 'components.Blocks.blocks.heading1',
@@ -517,7 +514,7 @@ export function useBlocksStore() {
       isInBlocksSelector: true,
     },
     'heading-two': {
-      renderElement: (props) => <Heading {...props} />,
+      renderElement: (props) => <H2 {...props.attributes}>{props.children}</H2>,
       icon: HeadingTwo,
       label: {
         id: 'components.Blocks.blocks.heading2',
@@ -531,7 +528,7 @@ export function useBlocksStore() {
       isInBlocksSelector: true,
     },
     'heading-three': {
-      renderElement: (props) => <Heading {...props} />,
+      renderElement: (props) => <H3 {...props.attributes}>{props.children}</H3>,
       icon: HeadingThree,
       label: {
         id: 'components.Blocks.blocks.heading3',
@@ -545,7 +542,7 @@ export function useBlocksStore() {
       isInBlocksSelector: true,
     },
     'heading-four': {
-      renderElement: (props) => <Heading {...props} />,
+      renderElement: (props) => <H4 {...props.attributes}>{props.children}</H4>,
       icon: HeadingFour,
       label: {
         id: 'components.Blocks.blocks.heading4',
@@ -559,7 +556,7 @@ export function useBlocksStore() {
       isInBlocksSelector: true,
     },
     'heading-five': {
-      renderElement: (props) => <Heading {...props} />,
+      renderElement: (props) => <H5 {...props.attributes}>{props.children}</H5>,
       icon: HeadingFive,
       label: {
         id: 'components.Blocks.blocks.heading5',
@@ -573,7 +570,7 @@ export function useBlocksStore() {
       isInBlocksSelector: true,
     },
     'heading-six': {
-      renderElement: (props) => <Heading {...props} />,
+      renderElement: (props) => <H6 {...props.attributes}>{props.children}</H6>,
       icon: HeadingSix,
       label: {
         id: 'components.Blocks.blocks.heading6',
@@ -690,6 +687,12 @@ export function useBlocksStore() {
         } else {
           // Otherwise insert a new line within the quote node
           Transforms.insertText(editor, '\n');
+
+          // If there's nothing after the cursor, disable modifiers
+          if (isNodeEnd) {
+            Editor.removeMark(editor, 'bold');
+            Editor.removeMark(editor, 'italic');
+          }
         }
       },
     },

package/admin/src/content-manager/components/BlocksEditor/hooks/useModifiersStore.js

@@ -4,27 +4,29 @@ import { Typography } from '@strapi/design-system';
 import { Bold, Italic, Underline, StrikeThrough, Code } from '@strapi/icons';
 import { Editor } from 'slate';
 import { useSlate } from 'slate-react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-const BoldText = styled(Typography).attrs({ fontWeight: 'bold' })`
+const stylesToInherit = css`
   font-size: inherit;
   color: inherit;
+  line-height: inherit;
+`;
+
+const BoldText = styled(Typography).attrs({ fontWeight: 'bold' })`
+  ${stylesToInherit}
 `;
 
 const ItalicText = styled(Typography)`
   font-style: italic;
-  font-size: inherit;
-  color: inherit;
+  ${stylesToInherit}
 `;
 
 const UnderlineText = styled(Typography).attrs({ textDecoration: 'underline' })`
-  font-size: inherit;
-  color: inherit;
+  ${stylesToInherit}
 `;
 
 const StrikeThroughText = styled(Typography).attrs({ textDecoration: 'line-through' })`
-  font-size: inherit;
-  color: inherit;
+  ${stylesToInherit}
 `;
 
 const InlineCode = styled.code`
@@ -70,7 +72,7 @@ export function useModifiersStore() {
    * @param {string} name - The name of the modifier to toggle
    */
   const baseHandleToggle = (name) => {
-    if (modifiers[name]) {
+    if (modifiers?.[name]) {
       Editor.removeMark(editor, name);
     } else {
       Editor.addMark(editor, name, true);

package/admin/src/content-manager/components/BlocksEditor/index.js

@@ -28,17 +28,6 @@ const EditorDivider = styled(Divider)`
   background: ${({ theme }) => theme.colors.neutral200};
 `;
 
-const Wrapper = styled(Box)`
-  width: 100%;
-  overflow: auto;
-  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
-  font-size: ${({ theme }) => theme.fontSizes[2]};
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  color: ${({ theme }) => theme.colors.neutral800};
-  line-height: ${({ theme }) => theme.lineHeights[6]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-`;
-
 /**
  * Images are void elements. They handle the rendering of their children instead of Slate.
  * See the Slate documentation for more information:
@@ -164,9 +153,7 @@ const BlocksEditor = React.forwardRef(
             <InputWrapper direction="column" alignItems="flex-start" height="512px">
               <BlocksToolbar disabled={disabled} />
               <EditorDivider width="100%" />
-              <Wrapper grow={1}>
-                <BlocksInput disabled={disabled} placeholder={formattedPlaceholder} />
-              </Wrapper>
+              <BlocksInput disabled={disabled} placeholder={formattedPlaceholder} />
             </InputWrapper>
           </Slate>
           <Hint hint={hint} name={name} error={error} />

package/admin/src/contexts/admin.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface AdminContextValue {
+  /**
+   * TODO: this should come from `StrapiApp['getAdminInjectedComponents']`
+   */
+  getAdminInjectedComponents: () => unknown;
+}
+
+const AdminContext = React.createContext<AdminContextValue>({
+  getAdminInjectedComponents() {
+    throw new Error('AdminContext: getAdminInjectedComponents() not implemented');
+  },
+});
+
+const useAdmin = () => React.useContext(AdminContext);
+
+export { AdminContext, useAdmin };

package/admin/src/contexts/configuration.ts

@@ -1,15 +1,25 @@
 import { createContext } from 'react';
 
-interface ConfigurationsContextValue {
+export interface ConfigurationContextValue {
   logos: {
-    auth: { custom?: string; default: string };
+    auth: { custom?: string | null; default: string };
+    menu: { custom?: string | null; default: string };
   };
+  showTutorials: boolean;
+  showReleaseNotification: boolean;
+  updateProjectSettings: (settings: { authLogo?: string; menuLogo?: string }) => void;
 }
 
-const ConfigurationsContext = createContext<ConfigurationsContextValue>({
+const ConfigurationContext = createContext<ConfigurationContextValue>({
   logos: {
     auth: { default: '' },
+    menu: { default: '' },
+  },
+  showTutorials: false,
+  showReleaseNotification: false,
+  updateProjectSettings: () => {
+    throw new Error('updateProjectSettings was not implemented');
   },
 });
 
-export { ConfigurationsContext };
+export { ConfigurationContext };

package/admin/src/hooks/__mocks__/useConfigurations.ts

@@ -1,4 +1,4 @@
-const useConfigurations = () => {
+const useConfiguration = () => {
   return {
     logos: {
       auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
@@ -6,4 +6,4 @@ const useConfigurations = () => {
   };
 };
 
-export { useConfigurations };
+export { useConfiguration };

package/admin/src/hooks/index.js

@@ -1,6 +1,3 @@
-export { useConfigurations } from './useConfigurations';
 export { useContentTypes } from './useContentTypes';
-export { default as useMenu } from './useMenu';
-export { default as usePermissionsDataManager } from './usePermissionsDataManager';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as useSettingsMenu } from './useSettingsMenu';

package/admin/src/hooks/{useAdminRoles/index.js → useAdminRoles.ts}

@@ -1,10 +1,18 @@
 import * as React from 'react';
 
 import { useCollator, useFetchClient } from '@strapi/helper-plugin';
+import { Entity } from '@strapi/types';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 
-export const useAdminRoles = (params = {}, queryOptions = {}) => {
+import { RoleEntity } from '../../../shared/entities';
+import { APIBaseParams, APIResponse } from '../types/adminAPI';
+
+export interface APIRolesQueryParams extends APIBaseParams {
+  id?: null | Entity.ID;
+}
+
+export const useAdminRoles = (params: APIRolesQueryParams = {}, queryOptions = {}) => {
   const { id = '', ...queryParams } = params;
 
   const { get } = useFetchClient();
@@ -15,9 +23,15 @@ export const useAdminRoles = (params = {}, queryOptions = {}) => {
   const { data, error, isError, isLoading, refetch } = useQuery(
     ['roles', id, queryParams],
     async () => {
-      const { data } = await get(`/admin/roles/${id ?? ''}`, {
-        params: queryParams,
-      });
+      /**
+       * TODO: can we infer if it's an array or not based on the appearance of `id`?
+       */
+      const { data } = await get<APIResponse<RoleEntity | RoleEntity[]>>(
+        `/admin/roles/${id ?? ''}`,
+        {
+          params: queryParams,
+        }
+      );
 
       return data;
     },
@@ -29,16 +43,18 @@ export const useAdminRoles = (params = {}, queryOptions = {}) => {
   // value, which later on triggers infinite loops if used in the
   // dependency arrays of other hooks
   const roles = React.useMemo(() => {
-    let roles = [];
+    let roles: RoleEntity[] = [];
 
-    if (id && data) {
-      roles = [data.data];
-    } else if (Array.isArray(data?.data)) {
-      roles = data.data;
+    if (data) {
+      if (Array.isArray(data.data)) {
+        roles = data.data;
+      } else {
+        roles = [data.data];
+      }
     }
 
     return [...roles].sort((a, b) => formatter.compare(a.name, b.name));
-  }, [data, id, formatter]);
+  }, [data, formatter]);
 
   return {
     roles,

package/admin/src/hooks/useAdminUsers.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { useFetchClient } from '@strapi/helper-plugin';
+import { Entity } from '@strapi/types';
+import { useQuery } from 'react-query';
+
+import { UserEntity } from '../../../shared/entities';
+import { APIBaseParams, APIResponsePagination, APIResponseUsersLegacy } from '../types/adminAPI';
+
+export interface APIUsersQueryParams extends APIBaseParams {
+  id?: null | Entity.ID;
+}
+
+export function useAdminUsers(params: APIUsersQueryParams = {}, queryOptions = {}) {
+  const { id = '', ...queryParams } = params;
+
+  const { get } = useFetchClient();
+
+  const { data, isError, isLoading, refetch } = useQuery(
+    ['users', id, queryParams],
+    async () => {
+      const {
+        data: { data },
+      } = await get<
+        APIResponseUsersLegacy<
+          UserEntity | { pagination: APIResponsePagination; results: UserEntity[] }
+        >
+      >(`/admin/users/${id}`, {
+        params: queryParams,
+      });
+
+      return data;
+    },
+    queryOptions
+  );
+
+  // the return value needs to be memoized, because intantiating
+  // an empty array as default value would lead to an unstable return
+  // value, which later on triggers infinite loops if used in the
+  // dependency arrays of other hooks
+  const users = React.useMemo(() => {
+    let users: UserEntity[] = [];
+
+    if (data) {
+      if ('results' in data) {
+        if (Array.isArray(data.results)) {
+          users = data.results;
+        }
+      } else {
+        users = [data];
+      }
+    }
+
+    return users;
+  }, [data]);
+
+  return {
+    users,
+    pagination: React.useMemo(() => (data && 'pagination' in data) ?? null, [data]),
+    isLoading,
+    isError,
+    refetch,
+  };
+}

package/admin/src/hooks/useConfiguration.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { ConfigurationContext } from '../contexts/configuration';
+
+export const useConfiguration = () => useContext(ConfigurationContext);

package/admin/src/hooks/{useEnterprise/useEnterprise.js → useEnterprise.ts}

@@ -6,17 +6,27 @@ function isEnterprise() {
   return window.strapi.isEE;
 }
 
-export function useEnterprise(
-  ceData,
-  eeCallback,
-  { defaultValue = null, combine = (ceData, eeData) => eeData, enabled = true } = {}
+export interface UseEnterpriseOptions<TCEData, TEEData, TCombinedData> {
+  defaultValue?: TCEData | TEEData | null;
+  combine?: (ceData: TCEData, eeData: TEEData) => TCEData | TEEData | TCombinedData;
+  enabled?: boolean;
+}
+
+export function useEnterprise<TCEData, TEEData, TCombinedData = unknown>(
+  ceData: TCEData,
+  eeCallback: () => Promise<TEEData>,
+  {
+    defaultValue = null,
+    combine = (ceData: TCEData, eeData: TEEData) => eeData,
+    enabled = true,
+  }: UseEnterpriseOptions<TCEData, TEEData, TCombinedData> = {}
 ) {
   const eeCallbackRef = useCallbackRef(eeCallback);
   const combineCallbackRef = useCallbackRef(combine);
 
   // We have to use a nested object here, because functions (e.g. Components)
   // can not be stored as value directly
-  const [{ data }, setData] = React.useState({
+  const [{ data }, setData] = React.useState<{ data: TCEData | TEEData | TCombinedData | null }>({
     data: isEnterprise() && enabled ? defaultValue : ceData,
   });
 

package/admin/src/hooks/useMenu.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+
+import {
+  Permission,
+  hasPermissions,
+  useAppInfo,
+  useRBACProvider,
+  useStrapiApp,
+  StrapiAppContextValue,
+} from '@strapi/helper-plugin';
+import { Cog, Puzzle, ShoppingCart } from '@strapi/icons';
+import cloneDeep from 'lodash/cloneDeep';
+import { useSelector } from 'react-redux';
+
+// @ts-expect-error - no types, yet.
+import { selectAdminPermissions } from '../pages/App/selectors';
+
+/* -------------------------------------------------------------------------------------------------
+ * useMenu
+ * -----------------------------------------------------------------------------------------------*/
+
+type MenuItem = StrapiAppContextValue['menu'][number];
+
+export interface Menu {
+  generalSectionLinks: MenuItem[];
+  pluginsSectionLinks: MenuItem[];
+  isLoading: boolean;
+}
+
+const useMenu = () => {
+  const { allPermissions: userPermissions } = useRBACProvider();
+  const { shouldUpdateStrapi } = useAppInfo();
+  const { menu } = useStrapiApp();
+  const permissions = useSelector(selectAdminPermissions);
+  const [menuWithUserPermissions, setMenuWithUserPermissions] = React.useState<Menu>({
+    generalSectionLinks: [
+      {
+        icon: Puzzle,
+        intlLabel: {
+          id: 'global.plugins',
+          defaultMessage: 'Plugins',
+        },
+        to: '/list-plugins',
+        // @ts-expect-error - we need the permissions type from the plugin
+        permissions: permissions.marketplace.main,
+      },
+      {
+        icon: ShoppingCart,
+        intlLabel: {
+          id: 'global.marketplace',
+          defaultMessage: 'Marketplace',
+        },
+        to: '/marketplace',
+        // @ts-expect-error - we need the permissions type from the plugin
+        permissions: permissions.marketplace.main,
+      },
+      {
+        icon: Cog,
+        intlLabel: {
+          id: 'global.settings',
+          defaultMessage: 'Settings',
+        },
+        to: '/settings',
+        // Permissions of this link are retrieved in the init phase
+        // using the settings menu
+        permissions: [],
+        notificationsCount: 0,
+      },
+    ],
+    pluginsSectionLinks: [],
+    isLoading: true,
+  });
+  const generalSectionLinksRef = React.useRef(menuWithUserPermissions.generalSectionLinks);
+
+  React.useEffect(() => {
+    async function applyMenuPermissions() {
+      const authorizedPluginSectionLinks = await getPluginSectionLinks(userPermissions, menu);
+
+      const authorizedGeneralSectionLinks = await getGeneralLinks(
+        userPermissions,
+        generalSectionLinksRef.current,
+        shouldUpdateStrapi
+      );
+
+      setMenuWithUserPermissions((state) => ({
+        ...state,
+        generalSectionLinks: authorizedGeneralSectionLinks,
+        pluginsSectionLinks: authorizedPluginSectionLinks,
+        isLoading: false,
+      }));
+    }
+
+    applyMenuPermissions();
+  }, [
+    setMenuWithUserPermissions,
+    generalSectionLinksRef,
+    userPermissions,
+    menu,
+    permissions,
+    shouldUpdateStrapi,
+  ]);
+
+  return menuWithUserPermissions;
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Utils
+ * -----------------------------------------------------------------------------------------------*/
+
+const getGeneralLinks = async (
+  userPermissions: Permission[],
+  generalSectionRawLinks: MenuItem[],
+  shouldUpdateStrapi: boolean = false
+) => {
+  const generalSectionLinksPermissions = await Promise.all(
+    generalSectionRawLinks.map(({ permissions }) => hasPermissions(userPermissions, permissions))
+  );
+
+  const authorizedGeneralSectionLinks = generalSectionRawLinks.filter(
+    (_, index) => generalSectionLinksPermissions[index]
+  );
+
+  const settingsLinkIndex = authorizedGeneralSectionLinks.findIndex(
+    (obj) => obj.to === '/settings'
+  );
+
+  if (settingsLinkIndex === -1) {
+    return [];
+  }
+
+  const authorizedGeneralLinksClone = cloneDeep(authorizedGeneralSectionLinks);
+
+  authorizedGeneralLinksClone[settingsLinkIndex].notificationsCount = shouldUpdateStrapi ? 1 : 0;
+
+  return authorizedGeneralLinksClone;
+};
+
+const getPluginSectionLinks = async (
+  userPermissions: Permission[],
+  pluginsSectionRawLinks: MenuItem[]
+) => {
+  const pluginSectionLinksPermissions = await Promise.all(
+    pluginsSectionRawLinks.map(({ permissions }) => hasPermissions(userPermissions, permissions))
+  );
+
+  const authorizedPluginSectionLinks = pluginsSectionRawLinks.filter(
+    (_, index) => pluginSectionLinksPermissions[index]
+  );
+
+  return authorizedPluginSectionLinks;
+};
+
+export { useMenu };