@strapi/admin 4.14.2 → 4.14.4

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,16 @@
+module.exports = {
+  root: true,
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.jsx'],
+      extends: ['custom/front'],
+      rules: {
+        'import/extensions': 'off',
+      },
+    },
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: ['custom/front/typescript'],
+    },
+  ],
+};

package/admin/custom.d.ts

@@ -0,0 +1,8 @@
+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 {}
+}

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

@@ -18,13 +18,9 @@ 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;
 

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/{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/PrivateRoute.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { auth } from '@strapi/helper-plugin';
+import { Redirect, Route, useLocation } from 'react-router-dom';
+
+type PropsOf<T> = T extends React.ComponentType<infer P> ? P : object;
+
+type PrivateRouteProps<TComponent extends React.ElementType> = {
+  component: TComponent;
+  path: string;
+} & PropsOf<TComponent>;
+
+const PrivateRoute = <TComponent extends React.ElementType>({
+  component: Component,
+  path,
+  ...rest
+}: PrivateRouteProps<TComponent>) => {
+  const { pathname, search } = useLocation();
+
+  return (
+    <Route
+      path={path}
+      render={(props) =>
+        auth.getToken() !== null ? (
+          <Component {...rest} {...props} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: '/auth/login',
+              search:
+                pathname !== '/'
+                  ? `?redirectTo=${encodeURIComponent(`${pathname}${search}`)}`
+                  : undefined,
+            }}
+          />
+        )
+      }
+    />
+  );
+};
+
+export { PrivateRoute };

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

@@ -16,8 +16,8 @@ import { AdminContext } from '../../contexts';
 import ConfigurationsProvider from '../ConfigurationsProvider';
 import GuidedTour from '../GuidedTour';
 import LanguageProvider from '../LanguageProvider';
-import Theme from '../Theme';
-import ThemeToggleProvider from '../ThemeToggleProvider';
+import { Theme } from '../Theme';
+import { ThemeToggleProvider } from '../ThemeToggleProvider';
 
 const queryClient = new QueryClient({
   defaultOptions: {

package/admin/src/components/Theme.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { DesignSystemProvider } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { createGlobalStyle } from 'styled-components';
+
+import { useThemeToggle } from '../hooks/useThemeToggle';
+
+interface ThemeProps {
+  children: React.ReactNode;
+}
+
+const Theme = ({ children }: ThemeProps) => {
+  const { currentTheme, themes } = useThemeToggle();
+  const { locale } = useIntl();
+
+  return (
+    <DesignSystemProvider
+      locale={locale}
+      /**
+       * TODO: could we make this neater i.e. by setting up the context to throw
+       * if it can't find it, that way the type is always fully defined and we're
+       * not checking it all the time...
+       */
+      theme={currentTheme && themes ? themes[currentTheme] : themes?.light}
+    >
+      {children}
+      <GlobalStyle />
+    </DesignSystemProvider>
+  );
+};
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+
+export { Theme };

package/admin/src/components/ThemeToggleProvider.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import { DefaultTheme } from 'styled-components';
+
+import { ThemeToggleContext, ThemeName } from '../contexts/themeToggle';
+
+const THEME_KEY = 'STRAPI_THEME';
+
+const getDefaultTheme = () => {
+  const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  const persistedTheme = localStorage.getItem(THEME_KEY) as ThemeName | null;
+
+  if (!persistedTheme) {
+    localStorage.setItem(THEME_KEY, browserTheme);
+  }
+
+  return persistedTheme || browserTheme;
+};
+
+interface ThemeToggleProviderProps {
+  children: React.ReactNode;
+  themes: {
+    light: DefaultTheme;
+    dark: DefaultTheme;
+  };
+}
+
+const ThemeToggleProvider = ({ children, themes }: ThemeToggleProviderProps) => {
+  const [currentTheme, setCurrentTheme] = React.useState(getDefaultTheme());
+
+  const handleChangeTheme = React.useCallback(
+    (nextTheme: ThemeName) => {
+      setCurrentTheme(nextTheme);
+      localStorage.setItem(THEME_KEY, nextTheme);
+    },
+    [setCurrentTheme]
+  );
+
+  const themeValues = React.useMemo(() => {
+    return {
+      currentTheme,
+      onChangeTheme: handleChangeTheme,
+      themes,
+    };
+  }, [currentTheme, handleChangeTheme, themes]);
+
+  return <ThemeToggleContext.Provider value={themeValues}>{children}</ThemeToggleContext.Provider>;
+};
+
+export { ThemeToggleProvider };

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

@@ -1,8 +1,6 @@
-import React from 'react';
-
 import styled from 'styled-components';
 
-import { useConfigurations } from '../../hooks';
+import { useConfigurations } from '../hooks/useConfigurations';
 
 const Img = styled.img`
   height: ${72 / 16}rem;
@@ -16,4 +14,4 @@ const Logo = () => {
   return <Img src={auth?.custom ?? auth.default} aria-hidden alt="" />;
 };
 
-export default Logo;
+export { Logo };

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

@@ -13,6 +13,7 @@ const getEditorStyle = (theme) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spaces[2],
+  height: '100%',
 });
 
 const baseRenderLeaf = (props, modifiers) => {
@@ -37,7 +38,7 @@ const baseRenderElement = (props, blocks) => {
   return block.renderElement(props);
 };
 
-const BlocksInput = ({ readOnly }) => {
+const BlocksInput = ({ disabled, placeholder }) => {
   const theme = useTheme();
   const editor = useSlate();
 
@@ -62,16 +63,29 @@ const BlocksInput = ({ readOnly }) => {
     }
   };
 
+  const handleBackspaceEvent = (event) => {
+    const selectedNode = editor.children[editor.selection.anchor.path[0]];
+    const selectedBlock = Object.values(blocks).find((block) => block.matchNode(selectedNode));
+
+    if (selectedBlock.handleBackspaceKey) {
+      selectedBlock.handleBackspaceKey(editor, event);
+    }
+  };
+
   const handleKeyDown = (event) => {
     if (event.key === 'Enter') {
       event.preventDefault();
       handleEnter();
     }
+    if (event.key === 'Backspace') {
+      handleBackspaceEvent(event);
+    }
   };
 
   return (
     <Editable
-      readOnly={readOnly}
+      readOnly={disabled}
+      placeholder={placeholder}
       style={getEditorStyle(theme)}
       renderElement={renderElement}
       renderLeaf={renderLeaf}
@@ -80,8 +94,13 @@ const BlocksInput = ({ readOnly }) => {
   );
 };
 
+BlocksInput.defaultProps = {
+  placeholder: null,
+};
+
 BlocksInput.propTypes = {
-  readOnly: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  placeholder: PropTypes.string,
 };
 
 export default BlocksInput;