@strapi/admin 4.4.0-beta.3 → 4.4.0-rc.0

package/admin/src/StrapiApp.js

@@ -22,6 +22,7 @@ import {
 } from './exposedHooks';
 import injectionZones from './injectionZones';
 import favicon from './favicon.ico';
+import localStorageKey from './components/LanguageProvider/utils/localStorageKey';
 
 class StrapiApp {
   constructor({ adminConfig, appPlugins, library, middlewares, reducers }) {
@@ -449,6 +450,7 @@ class StrapiApp {
                 href: this.configurations.head.favicon,
               },
             ]}
+            htmlAttributes={{ lang: localStorage.getItem(localStorageKey) || 'en' }}
           />
           <BrowserRouter basename={basename}>
             <App store={store} />

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

@@ -65,11 +65,11 @@ const AuthenticatedApp = () => {
     if (userRoles) {
       const isUserSuperAdmin = userRoles.find(({ code }) => code === 'strapi-super-admin');
 
-      if (isUserSuperAdmin) {
+      if (isUserSuperAdmin && appInfos?.autoReload) {
         setGuidedTourVisibilityRef.current(true);
       }
     }
-  }, [userRoles]);
+  }, [userRoles, appInfos]);
 
   // We don't need to wait for the release query to be fetched before rendering the plugins
   // however, we need the appInfos and the permissions

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

@@ -21,6 +21,7 @@ const LanguageProvider = ({ children, localeNames, messages }) => {
   useEffect(() => {
     // Set user language in local storage.
     window.localStorage.setItem(localStorageKey, locale);
+    document.documentElement.setAttribute('lang', locale);
   }, [locale]);
 
   const changeLocale = (locale) => {

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

@@ -4,7 +4,7 @@
  *
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeToggleContext } from '../../contexts';
 
@@ -14,22 +14,33 @@ const getDefaultTheme = () => {
   const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   const persistedTheme = localStorage.getItem(THEME_KEY);
 
+  if (!persistedTheme) {
+    localStorage.setItem(THEME_KEY, browserTheme);
+  }
+
   return persistedTheme || browserTheme;
 };
 
 const ThemeToggleProvider = ({ children, themes }) => {
   const [currentTheme, setCurrentTheme] = useState(getDefaultTheme());
 
-  const handleChangeTheme = (nextTheme) => {
-    setCurrentTheme(nextTheme);
-    localStorage.setItem(THEME_KEY, nextTheme);
-  };
-
-  return (
-    <ThemeToggleContext.Provider value={{ currentTheme, onChangeTheme: handleChangeTheme, themes }}>
-      {children}
-    </ThemeToggleContext.Provider>
+  const handleChangeTheme = useCallback(
+    (nextTheme) => {
+      setCurrentTheme(nextTheme);
+      localStorage.setItem(THEME_KEY, nextTheme);
+    },
+    [setCurrentTheme]
   );
+
+  const themeValues = useMemo(() => {
+    return {
+      currentTheme,
+      onChangeTheme: handleChangeTheme,
+      themes,
+    };
+  }, [currentTheme, handleChangeTheme, themes]);
+
+  return <ThemeToggleContext.Provider value={themeValues}>{children}</ThemeToggleContext.Provider>;
 };
 
 ThemeToggleProvider.propTypes = {

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

@@ -47,7 +47,7 @@ const DynamicTable = ({
             ...metadatas,
             label: formatMessage({
               id: getTrad(`containers.ListPage.table-headers.${header.name}`),
-              defaultMessage: header.name,
+              defaultMessage: metadatas.label,
             }),
           },
           name: sortFieldValue,
@@ -60,7 +60,7 @@ const DynamicTable = ({
           ...metadatas,
           label: formatMessage({
             id: getTrad(`containers.ListPage.table-headers.${header.name}`),
-            defaultMessage: header.name,
+            defaultMessage: metadatas.label,
           }),
         },
       };

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

@@ -79,6 +79,8 @@ class InputJSON extends React.Component {
     try {
       if (value === null) return this.codeMirror.setValue('');
 
+      if (value === 0) return this.codeMirror.setValue('0');
+
       return this.codeMirror.setValue(value);
     } catch (err) {
       return this.setState({ error: true });

package/admin/src/contexts/ApiTokenPermissions/index.js

@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const ApiTokenPermissionsContext = createContext({});
+
+const ApiTokenPermissionsContextProvider = ({ children, ...rest }) => {
+  return (
+    <ApiTokenPermissionsContext.Provider value={rest}>
+      {children}
+    </ApiTokenPermissionsContext.Provider>
+  );
+};
+
+const useApiTokenPermissionsContext = () => useContext(ApiTokenPermissionsContext);
+
+ApiTokenPermissionsContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export {
+  ApiTokenPermissionsContext,
+  ApiTokenPermissionsContextProvider,
+  useApiTokenPermissionsContext,
+};

package/admin/src/hooks/index.js

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

package/admin/src/hooks/useRegenerate/index.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { get } from 'lodash';
+import { useNotification } from '@strapi/helper-plugin';
+import { axiosInstance } from '../../core/utils';
+
+const useRegenerate = (id, onRegenerate) => {
+  const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
+  const toggleNotification = useNotification();
+
+  const regenerateData = async () => {
+    try {
+      const {
+        data: {
+          data: { accessKey },
+        },
+      } = await axiosInstance.post(`/admin/api-tokens/${id}/regenerate`);
+      setIsLoadingConfirmation(false);
+      onRegenerate(accessKey);
+    } catch (error) {
+      setIsLoadingConfirmation(false);
+      toggleNotification({
+        type: 'warning',
+        message: get(error, 'response.data.message', 'notification.error'),
+      });
+    }
+  };
+
+  return {
+    regenerateData,
+    isLoadingConfirmation,
+  };
+};
+
+export default useRegenerate;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/ActionBoundRoutes/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
+import { Stack } from '@strapi/design-system/Stack';
+import { GridItem } from '@strapi/design-system/Grid';
+import BoundRoute from '../BoundRoute';
+import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
+
+const ActionBoundRoutes = () => {
+  const {
+    value: { selectedAction, routes },
+  } = useApiTokenPermissionsContext();
+  const { formatMessage } = useIntl();
+  const actionSection = selectedAction?.split('.')[0];
+
+  return (
+    <GridItem
+      col={5}
+      background="neutral150"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingLeft={7}
+      paddingRight={7}
+      style={{ minHeight: '100%' }}
+    >
+      {selectedAction ? (
+        <Stack spacing={2}>
+          {routes[actionSection]?.map((route) => {
+            return route.config.auth?.scope?.includes(selectedAction) ||
+              route.handler === selectedAction ? (
+              <BoundRoute key={route.handler} route={route} />
+            ) : null;
+          })}
+        </Stack>
+      ) : (
+        <Stack spacing={2}>
+          <Typography variant="delta" as="h3">
+            {formatMessage({
+              id: 'Settings.apiTokens.createPage.permissions.header.title',
+              defaultMessage: 'Advanced settings',
+            })}
+          </Typography>
+          <Typography as="p" textColor="neutral600">
+            {formatMessage({
+              id: 'Settings.apiTokens.createPage.permissions.header.hint',
+              defaultMessage:
+                "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
+            })}
+          </Typography>
+        </Stack>
+      )}
+    </GridItem>
+  );
+};
+
+export default ActionBoundRoutes;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/BoundRoute/getMethodColor.js

@@ -0,0 +1,41 @@
+const getMethodColor = (verb) => {
+  switch (verb) {
+    case 'POST': {
+      return {
+        text: 'success600',
+        border: 'success200',
+        background: 'success100',
+      };
+    }
+    case 'GET': {
+      return {
+        text: 'secondary600',
+        border: 'secondary200',
+        background: 'secondary100',
+      };
+    }
+    case 'PUT': {
+      return {
+        text: 'warning600',
+        border: 'warning200',
+        background: 'warning100',
+      };
+    }
+    case 'DELETE': {
+      return {
+        text: 'danger600',
+        border: 'danger200',
+        background: 'danger100',
+      };
+    }
+    default: {
+      return {
+        text: 'neutral600',
+        border: 'neutral200',
+        background: 'neutral100',
+      };
+    }
+  }
+};
+
+export default getMethodColor;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/BoundRoute/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import map from 'lodash/map';
+import tail from 'lodash/tail';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import getMethodColor from './getMethodColor';
+
+const MethodBox = styled(Box)`
+  margin: -1px;
+  border-radius: ${({ theme }) => theme.spaces[1]} 0 0 ${({ theme }) => theme.spaces[1]};
+`;
+
+function BoundRoute({ route }) {
+  const { formatMessage } = useIntl();
+
+  const { method, handler: title, path } = route;
+  const formattedRoute = path ? tail(path.split('/')) : [];
+  const [controller = '', action = ''] = title ? title.split('.') : [];
+  const colors = getMethodColor(route.method);
+
+  return (
+    <Stack spacing={2}>
+      <Typography variant="delta" as="h3">
+        {formatMessage({
+          id: 'Settings.apiTokens.createPage.BoundRoute.title',
+          defaultMessage: 'Bound route to',
+        })}
+        &nbsp;
+        <span>{controller}</span>
+        <Typography variant="delta" textColor="primary600">
+          .{action}
+        </Typography>
+      </Typography>
+      <Stack horizontal hasRadius background="neutral0" borderColor="neutral200" spacing={0}>
+        <MethodBox background={colors.background} borderColor={colors.border} padding={2}>
+          <Typography fontWeight="bold" textColor={colors.text}>
+            {method}
+          </Typography>
+        </MethodBox>
+        <Box paddingLeft={2} paddingRight={2}>
+          {map(formattedRoute, (value) => (
+            <Typography key={value} textColor={value.includes(':') ? 'neutral600' : 'neutral900'}>
+              /{value}
+            </Typography>
+          ))}
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}
+
+BoundRoute.defaultProps = {
+  route: {
+    handler: 'Nocontroller.error',
+    method: 'GET',
+    path: '/there-is-no-path',
+  },
+};
+
+BoundRoute.propTypes = {
+  route: PropTypes.shape({
+    handler: PropTypes.string,
+    method: PropTypes.string,
+    path: PropTypes.string,
+  }),
+};
+
+export default BoundRoute;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/CollapsableContentType/CheckBoxWrapper.js

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+
+const activeCheckboxWrapperStyles = css`
+  background: ${(props) => props.theme.colors.primary100};
+  svg {
+    opacity: 1;
+  }
+`;
+
+const CheckboxWrapper = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  svg {
+    opacity: 0;
+    path {
+      fill: ${(props) => props.theme.colors.primary600};
+    }
+  }
+
+  /* Show active style both on hover and when the action is selected */
+  ${(props) => props.isActive && activeCheckboxWrapperStyles}
+  &:hover {
+    ${activeCheckboxWrapperStyles}
+  }
+`;
+
+export default CheckboxWrapper;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/CollapsableContentType/index.js

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import { capitalize } from 'lodash';
+import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
+import { Checkbox } from '@strapi/design-system/Checkbox';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Typography } from '@strapi/design-system/Typography';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import CogIcon from '@strapi/icons/Cog';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
+import CheckboxWrapper from './CheckBoxWrapper';
+
+const Border = styled.div`
+  flex: 1;
+  align-self: center;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+
+const CollapsableContentType = ({
+  controllers,
+  label,
+  orderNumber,
+  disabled,
+  onExpanded,
+  indexExpandendCollapsedContent,
+}) => {
+  const {
+    value: { onChangeSelectAll, onChange, selectedActions, setSelectedAction, selectedAction },
+  } = useApiTokenPermissionsContext();
+  const [expanded, setExpanded] = useState(false);
+
+  const handleExpandedAccordion = () => {
+    setExpanded((s) => !s);
+    onExpanded(orderNumber);
+  };
+
+  useEffect(() => {
+    if (
+      indexExpandendCollapsedContent !== null &&
+      indexExpandendCollapsedContent !== orderNumber &&
+      expanded
+    ) {
+      setExpanded(false);
+    }
+  }, [indexExpandendCollapsedContent, orderNumber, expanded]);
+
+  const isActionSelected = (actionId) => actionId === selectedAction;
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onToggle={handleExpandedAccordion}
+      variant={orderNumber % 2 ? 'primary' : 'secondary'}
+    >
+      <AccordionToggle title={capitalize(label)} />
+      <AccordionContent>
+        {controllers?.map((controller) => {
+          const allActionsSelected = controller.actions.every((action) =>
+            selectedActions.includes(action.actionId)
+          );
+
+          const someActionsSelected = controller.actions.some((action) =>
+            selectedActions.includes(action.actionId)
+          );
+
+          return (
+            <Box key={`${label}.${controller?.controller}`}>
+              <Flex justifyContent="space-between" alignItems="center" padding={4}>
+                <Box paddingRight={4}>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {controller?.controller}
+                  </Typography>
+                </Box>
+                <Border />
+                <Box paddingLeft={4}>
+                  <Checkbox
+                    value={allActionsSelected}
+                    indeterminate={!allActionsSelected && someActionsSelected}
+                    onValueChange={() => {
+                      onChangeSelectAll({ target: { value: [...controller.actions] } });
+                    }}
+                    disabled={disabled}
+                  >
+                    Select all
+                  </Checkbox>
+                </Box>
+              </Flex>
+              <Grid gap={4} padding={4}>
+                {controller?.actions &&
+                  controller?.actions.map((action) => {
+                    return (
+                      <GridItem col={6} key={action.actionId}>
+                        <CheckboxWrapper
+                          isActive={isActionSelected(action.actionId)}
+                          padding={2}
+                          hasRadius
+                        >
+                          <Checkbox
+                            value={selectedActions.includes(action.actionId)}
+                            name={action.actionId}
+                            onValueChange={() => {
+                              onChange({ target: { value: action.actionId } });
+                            }}
+                            disabled={disabled}
+                          >
+                            {action.action}
+                          </Checkbox>
+                          <button
+                            type="button"
+                            data-testid="action-cog"
+                            onClick={() =>
+                              setSelectedAction({ target: { value: action.actionId } })
+                            }
+                            style={{ display: 'inline-flex', alignItems: 'center' }}
+                          >
+                            <CogIcon />
+                          </button>
+                        </CheckboxWrapper>
+                      </GridItem>
+                    );
+                  })}
+              </Grid>
+            </Box>
+          );
+        })}
+      </AccordionContent>
+    </Accordion>
+  );
+};
+
+CollapsableContentType.defaultProps = {
+  controllers: [],
+  orderNumber: 0,
+  disabled: false,
+  onExpanded: () => null,
+  indexExpandendCollapsedContent: null,
+};
+
+CollapsableContentType.propTypes = {
+  controllers: PropTypes.array,
+  orderNumber: PropTypes.number,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  onExpanded: PropTypes.func,
+  indexExpandendCollapsedContent: PropTypes.number,
+};
+
+export default CollapsableContentType;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/ContenTypesSection/index.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import CollapsableContentType from '../CollapsableContentType';
+
+const ContentTypesSection = ({ section, ...props }) => {
+  const [indexExpandedCollpsedContent, setIndexExpandedCollpsedContent] = useState(null);
+  const handleExpandedCollpsedContentIndex = (index) => setIndexExpandedCollpsedContent(index);
+
+  return (
+    <Box padding={4} background="neutral0">
+      {section &&
+        section.map((api, index) => (
+          <CollapsableContentType
+            key={api.apiId}
+            label={api.label}
+            controllers={api.controllers}
+            orderNumber={index}
+            indexExpandendCollapsedContent={indexExpandedCollpsedContent}
+            onExpanded={handleExpandedCollpsedContentIndex}
+            name={api.apiId}
+            {...props}
+          />
+        ))}
+    </Box>
+  );
+};
+
+ContentTypesSection.defaultProps = {
+  section: null,
+};
+
+ContentTypesSection.propTypes = {
+  section: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default ContentTypesSection;