@strapi/admin 4.14.3 → 4.14.5

package/.eslintrc.js

@@ -2,8 +2,11 @@ module.exports = {
   root: true,
   overrides: [
     {
-      files: ['admin/**/*', 'ee/admin/**/*'],
+      files: ['ee/admin/**/*'],
       extends: ['custom/front'],
+      rules: {
+        'import/extensions': 'off',
+      },
     },
     {
       files: ['**/*'],

package/admin/.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  root: true,
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.jsx'],
+      extends: ['custom/front'],
+      rules: {
+        'import/extensions': 'off',
+      },
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: ['custom/front/typescript'],
+    },
+    {
+      files: ['./tests/*', '**/*.test.*'],
+      env: {
+        jest: true,
+      },
+      rules: {
+        /**
+         * So we can do `import { render } from '@tests/utils'`
+         */
+        'import/no-unresolved': 'off',
+      },
+    },
+  ],
+};

package/admin/custom.d.ts

@@ -0,0 +1,28 @@
+export {};
+
+import { StrapiTheme } from '@strapi/design-system';
+
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends StrapiTheme {}
+}
+
+declare global {
+  interface Window {
+    strapi: {
+      backendURL: string;
+      isEE: boolean;
+      features: {
+        SSO: 'sso';
+        AUDIT_LOGS: 'audit-logs';
+        REVIEW_WORKFLOWS: 'review-workflows';
+        isEnabled: (featureName?: string) => boolean;
+      };
+      flags: {
+        nps?: boolean;
+      };
+      projectType: 'Community' | 'Enterprise';
+      telemetryDisabled: boolean;
+    };
+  }
+}

package/admin/src/StrapiApp.js

@@ -9,7 +9,7 @@ import { Helmet } from 'react-helmet';
 import { BrowserRouter } from 'react-router-dom';
 
 import Logo from './assets/images/logo-strapi-2022.svg';
-import localStorageKey from './components/LanguageProvider/utils/localStorageKey';
+import { LANGUAGE_LOCAL_STORAGE_KEY } from './components/LanguageProvider';
 import Providers from './components/Providers';
 import { customFields, Plugin } from './core/apis';
 import configureStore from './core/store/configureStore';
@@ -454,21 +454,19 @@ class StrapiApp {
         showReleaseNotification={this.configurations.notifications.releases}
         store={store}
       >
-        <>
-          <Helmet
-            link={[
-              {
-                rel: 'icon',
-                type: 'image/png',
-                href: this.configurations.head.favicon,
-              },
-            ]}
-            htmlAttributes={{ lang: localStorage.getItem(localStorageKey) || 'en' }}
-          />
-          <BrowserRouter basename={basename}>
-            <App store={store} />
-          </BrowserRouter>
-        </>
+        <Helmet
+          link={[
+            {
+              rel: 'icon',
+              type: 'image/png',
+              href: this.configurations.head.favicon,
+            },
+          ]}
+          htmlAttributes={{ lang: localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY) || 'en' }}
+        />
+        <BrowserRouter basename={basename}>
+          <App store={store} />
+        </BrowserRouter>
       </Providers>
     );
   }

package/admin/src/components/AuthenticatedApp/index.js

@@ -12,19 +12,15 @@ import { useQueries } from 'react-query';
 //  TODO: DS add loader
 
 import packageJSON from '../../../../package.json';
-import { useConfigurations } from '../../hooks';
+import { useConfiguration } from '../../hooks/useConfiguration';
 import { getFullName, hashAdminUserEmail } from '../../utils';
-import NpsSurvey from '../NpsSurvey';
-import PluginsInitializer from '../PluginsInitializer';
+import { NpsSurvey } from '../NpsSurvey';
+import { PluginsInitializer } from '../PluginsInitializer';
 import RBACProvider from '../RBACProvider';
 
-import {
-  fetchAppInfo,
-  fetchCurrentUserPermissions,
-  fetchStrapiLatestRelease,
-  fetchUserRoles,
-} from './utils/api';
-import checkLatestStrapiVersion from './utils/checkLatestStrapiVersion';
+import { fetchAppInfo, fetchCurrentUserPermissions, fetchUserRoles } from './utils/api';
+import { checkLatestStrapiVersion } from './utils/checkLatestStrapiVersion';
+import { fetchStrapiLatestRelease } from './utils/fetchStrapiLatestRelease';
 
 const strapiVersion = packageJSON.version;
 
@@ -35,7 +31,7 @@ const AuthenticatedApp = () => {
   const userName = get(userInfo, 'username') || getFullName(userInfo.firstname, userInfo.lastname);
   const [userDisplayName, setUserDisplayName] = useState(userName);
   const [userId, setUserId] = useState(null);
-  const { showReleaseNotification } = useConfigurations();
+  const { showReleaseNotification } = useConfiguration();
   const [
     { data: appInfos, status },
     { data: tagName, isLoading },

package/admin/src/components/AuthenticatedApp/utils/api.js

@@ -1,45 +1,7 @@
 import { getFetchClient } from '@strapi/helper-plugin';
 
-import packageJSON from '../../../../../package.json';
-
-import checkLatestStrapiVersion from './checkLatestStrapiVersion';
-
-const strapiVersion = packageJSON.version;
-const showUpdateNotif = !JSON.parse(localStorage.getItem('STRAPI_UPDATE_NOTIF'));
 const { get } = getFetchClient();
 
-const fetchStrapiLatestRelease = async (toggleNotification) => {
-  try {
-    const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
-
-    if (!res.ok) {
-      throw new Error('Failed to fetch latest Strapi version.');
-    }
-    const { tag_name } = await res.json();
-    const shouldUpdateStrapi = checkLatestStrapiVersion(strapiVersion, tag_name);
-
-    if (shouldUpdateStrapi && showUpdateNotif) {
-      toggleNotification({
-        type: 'info',
-        message: { id: 'notification.version.update.message' },
-        link: {
-          url: `https://github.com/strapi/strapi/releases/tag/${tag_name}`,
-          label: {
-            id: 'global.see-more',
-          },
-        },
-        blockTransition: true,
-        onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
-      });
-    }
-
-    return tag_name;
-  } catch (err) {
-    // Don't throw an error
-    return strapiVersion;
-  }
-};
-
 const fetchAppInfo = async () => {
   try {
     const { data, headers } = await get('/admin/information');
@@ -82,4 +44,4 @@ const fetchUserRoles = async () => {
   }
 };
 
-export { fetchAppInfo, fetchCurrentUserPermissions, fetchStrapiLatestRelease, fetchUserRoles };
+export { fetchAppInfo, fetchCurrentUserPermissions, fetchUserRoles };

package/admin/src/components/AuthenticatedApp/utils/checkLatestStrapiVersion.ts

@@ -0,0 +1,13 @@
+import lt from 'semver/functions/lt';
+import valid from 'semver/functions/valid';
+
+export const checkLatestStrapiVersion = (
+  currentPackageVersion: string,
+  latestPublishedVersion: string
+): boolean => {
+  if (!valid(currentPackageVersion) || !valid(latestPublishedVersion)) {
+    return false;
+  }
+
+  return lt(currentPackageVersion, latestPublishedVersion);
+};

package/admin/src/{hooks/useReleaseNotification/utils/api.js → components/AuthenticatedApp/utils/fetchStrapiLatestRelease.ts}

@@ -1,7 +1,8 @@
 import packageJSON from '../../../../../package.json';
 
 const strapiVersion = packageJSON.version;
-const fetchStrapiLatestRelease = async () => {
+
+export const fetchStrapiLatestRelease = async () => {
   try {
     const res = await fetch('https://api.github.com/repos/strapi/strapi/releases/latest');
 
@@ -16,5 +17,3 @@ const fetchStrapiLatestRelease = async () => {
     return strapiVersion;
   }
 };
-
-export default fetchStrapiLatestRelease;

package/admin/src/components/ConfigurationProvider.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import { ConfigurationContext, ConfigurationContextValue } from '../contexts/configuration';
+
+export interface ConfigurationProviderProps {
+  children: React.ReactNode;
+  authLogo: string;
+  menuLogo: string;
+  showReleaseNotification?: boolean;
+  showTutorials?: boolean;
+}
+
+type LogoKeys = keyof ConfigurationContextValue['logos'];
+
+const ConfigurationProvider = ({
+  children,
+  authLogo: defaultAuthLogo,
+  menuLogo: defaultMenuLogo,
+  showReleaseNotification = false,
+  showTutorials = false,
+}: ConfigurationProviderProps) => {
+  const [{ menuLogo, authLogo }, setLogos] = React.useState<{
+    [_Key in `${LogoKeys}Logo`]?: ConfigurationContextValue['logos'][LogoKeys]['custom'];
+  }>({
+    menuLogo: null,
+    authLogo: null,
+  });
+
+  const updateProjectSettings: ConfigurationContextValue['updateProjectSettings'] =
+    React.useCallback(
+      ({ menuLogo, authLogo }) => {
+        setLogos({
+          menuLogo: menuLogo || defaultMenuLogo,
+          authLogo: authLogo || defaultAuthLogo,
+        });
+      },
+      [defaultAuthLogo, defaultMenuLogo]
+    );
+
+  const configurationValue = React.useMemo(() => {
+    return {
+      logos: {
+        menu: { custom: menuLogo, default: defaultMenuLogo },
+        auth: { custom: authLogo, default: defaultAuthLogo },
+      },
+      updateProjectSettings,
+      showReleaseNotification,
+      showTutorials,
+    };
+  }, [
+    menuLogo,
+    defaultMenuLogo,
+    authLogo,
+    defaultAuthLogo,
+    updateProjectSettings,
+    showReleaseNotification,
+    showTutorials,
+  ]);
+
+  return (
+    <ConfigurationContext.Provider value={configurationValue}>
+      {children}
+    </ConfigurationContext.Provider>
+  );
+};
+
+export { ConfigurationProvider };

package/admin/src/components/{DragLayer/DragLayer.js → DragLayer.tsx}

@@ -1,11 +1,14 @@
 import * as React from 'react';
 
 import { Box } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { useDragLayer } from 'react-dnd';
-
-function getStyle(initialOffset, currentOffset, mouseOffset) {
-  if (!initialOffset || !currentOffset) {
+import { DragLayerMonitor, XYCoord, useDragLayer } from 'react-dnd';
+
+function getStyle(
+  initialOffset: XYCoord | null,
+  currentOffset: XYCoord | null,
+  mouseOffset: XYCoord | null
+) {
+  if (!initialOffset || !currentOffset || !mouseOffset) {
     return { display: 'none' };
   }
 
@@ -16,7 +19,14 @@ function getStyle(initialOffset, currentOffset, mouseOffset) {
   };
 }
 
-export function DragLayer({ renderItem }) {
+export interface DragLayerProps {
+  renderItem: (item: {
+    item: unknown;
+    type: ReturnType<DragLayerMonitor['getItemType']>;
+  }) => React.ReactNode;
+}
+
+const DragLayer = ({ renderItem }: DragLayerProps) => {
   const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(
     (monitor) => ({
       item: monitor.getItem(),
@@ -47,8 +57,6 @@ export function DragLayer({ renderItem }) {
       </Box>
     </Box>
   );
-}
-
-DragLayer.propTypes = {
-  renderItem: PropTypes.func.isRequired,
 };
+
+export { DragLayer };

package/admin/src/components/LanguageProvider.tsx

@@ -0,0 +1,129 @@
+/*
+ *
+ * LanguageProvider
+ *
+ * this component connects the redux state language locale to the
+ * IntlProvider component and i18n messages (loaded from `app/translations`)
+ */
+
+import * as React from 'react';
+
+import defaultsDeep from 'lodash/defaultsDeep';
+import { IntlProvider } from 'react-intl';
+
+/* -------------------------------------------------------------------------------------------------
+ * LocalesContext
+ * -----------------------------------------------------------------------------------------------*/
+
+interface LocalesContextValue {
+  changeLocale: (locale: keyof State['localeNames']) => void;
+  localeNames: Record<string, string>;
+}
+
+const LocalesContext = React.createContext<LocalesContextValue>({
+  changeLocale: () => {
+    throw new Error('LocalesContext: changeLocale() is not implemented');
+  },
+  localeNames: {},
+});
+
+const useLocales = () => React.useContext(LocalesContext);
+
+/* -------------------------------------------------------------------------------------------------
+ * LanguageProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+const LANGUAGE_LOCAL_STORAGE_KEY = 'strapi-admin-language';
+
+interface LanguageProviderProps {
+  children: React.ReactNode;
+  localeNames: Record<string, string>;
+  messages: Record<string, Record<string, string>>;
+}
+
+const LanguageProvider = ({ children, localeNames, messages }: LanguageProviderProps) => {
+  const [{ locale }, dispatch] = React.useReducer<React.Reducer<State, Action>, State>(
+    reducer,
+    initialState,
+    () => {
+      const languageFromLocaleStorage = window.localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY);
+      if (languageFromLocaleStorage && localeNames[languageFromLocaleStorage]) {
+        return {
+          locale: languageFromLocaleStorage,
+          localeNames,
+        };
+      } else {
+        return {
+          locale: 'en',
+          localeNames,
+        };
+      }
+    }
+  );
+
+  React.useEffect(() => {
+    // Set user language in local storage.
+    window.localStorage.setItem(LANGUAGE_LOCAL_STORAGE_KEY, locale);
+    document.documentElement.setAttribute('lang', locale);
+  }, [locale]);
+
+  const changeLocale = React.useCallback((locale: keyof State['localeNames']) => {
+    dispatch({
+      type: 'CHANGE_LOCALE',
+      locale,
+    });
+  }, []);
+
+  const appMessages = defaultsDeep(messages[locale], messages.en);
+
+  const contextValue = React.useMemo(
+    () => ({ changeLocale, localeNames }),
+    [changeLocale, localeNames]
+  );
+
+  return (
+    <IntlProvider locale={locale} defaultLocale="en" messages={appMessages} textComponent="span">
+      <LocalesContext.Provider value={contextValue}>{children}</LocalesContext.Provider>
+    </IntlProvider>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Reducer
+ * -----------------------------------------------------------------------------------------------*/
+
+interface State {
+  localeNames: Record<string, string>;
+  locale: keyof State['localeNames'];
+}
+
+const initialState: State = {
+  localeNames: { en: 'English' },
+  locale: 'en',
+};
+
+interface ChangeLocaleAction {
+  type: 'CHANGE_LOCALE';
+  locale: keyof State['localeNames'];
+}
+
+type Action = ChangeLocaleAction;
+
+const reducer = (state = initialState, action: Action) => {
+  switch (action.type) {
+    case 'CHANGE_LOCALE': {
+      const { locale } = action;
+
+      if (!state.localeNames[locale]) {
+        return state;
+      }
+
+      return { ...state, locale };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+export { LanguageProvider, useLocales, LANGUAGE_LOCAL_STORAGE_KEY };

package/admin/src/components/{LeftMenu/index.js → LeftMenu.tsx}

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import * as React from 'react';
 
 import { Box, Divider, Flex, FocusTrap, Typography } from '@strapi/design-system';
 import {
@@ -19,12 +19,12 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import { Exit, Write } from '@strapi/icons';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { NavLink as RouterNavLink, useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { useConfigurations } from '../../hooks';
+import { useConfiguration } from '../hooks/useConfiguration';
+import { Menu } from '../hooks/useMenu';
 
 const LinkUserWrapper = styled(Box)`
   width: ${150 / 16}rem;
@@ -33,7 +33,7 @@ const LinkUserWrapper = styled(Box)`
   left: ${({ theme }) => theme.spaces[5]};
 `;
 
-const LinkUser = styled(RouterNavLink)`
+const LinkUser = styled(RouterNavLink)<{ logout?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -54,12 +54,14 @@ const LinkUser = styled(RouterNavLink)`
   }
 `;
 
-const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
-  const buttonRef = useRef();
-  const [userLinksVisible, setUserLinksVisible] = useState(false);
+interface LeftMenuProps extends Pick<Menu, 'generalSectionLinks' | 'pluginsSectionLinks'> {}
+
+const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) => {
+  const navUserRef = React.useRef<HTMLDivElement>(null!);
+  const [userLinksVisible, setUserLinksVisible] = React.useState(false);
   const {
     logos: { menu },
-  } = useConfigurations();
+  } = useConfiguration();
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
   const { userDisplayName } = useAppInfo();
   const { formatMessage } = useIntl();
@@ -83,16 +85,19 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     history.push('/auth/login');
   };
 
-  const handleBlur = (e) => {
+  const handleBlur: React.FocusEventHandler = (e) => {
     if (
       !e.currentTarget.contains(e.relatedTarget) &&
+      /**
+       * TODO: can we replace this by just using the navUserRef?
+       */
       e.relatedTarget?.parentElement?.id !== 'main-nav-user-button'
     ) {
       setUserLinksVisible(false);
     }
   };
 
-  const handleClickOnLink = (destination = null) => {
+  const handleClickOnLink = (destination: string) => {
     trackUsage('willNavigate', { from: pathname, to: destination });
   };
 
@@ -126,6 +131,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
       <NavSections>
         <NavLink
           as={RouterNavLink}
+          // @ts-expect-error the props from the passed as prop are not inferred // joined together
           to="/content-manager"
           icon={<Write />}
           onClick={() => handleClickOnLink('/content-manager')}
@@ -146,6 +152,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               return (
                 <NavLink
                   as={RouterNavLink}
+                  // @ts-expect-error the props from the passed as prop are not inferred // joined together
                   to={link.to}
                   key={link.to}
                   icon={<Icon />}
@@ -172,8 +179,11 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                 <NavLink
                   as={RouterNavLink}
                   badgeContent={
-                    (link.notificationsCount > 0 && link.notificationsCount.toString()) || undefined
+                    link.notificationsCount && link.notificationsCount > 0
+                      ? link.notificationsCount.toString()
+                      : undefined
                   }
+                  // @ts-expect-error the props from the passed as prop are not inferred // joined together
                   to={link.to}
                   key={link.to}
                   icon={<LinkIcon />}
@@ -190,7 +200,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
       <NavFooter>
         <NavUser
           id="main-nav-user-button"
-          ref={buttonRef}
+          ref={navUserRef}
           onClick={handleToggleUserLinks}
           initials={initials}
         >
@@ -244,9 +254,4 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   );
 };
 
-LeftMenu.propTypes = {
-  generalSectionLinks: PropTypes.array.isRequired,
-  pluginsSectionLinks: PropTypes.array.isRequired,
-};
-
-export default LeftMenu;
+export { LeftMenu };