@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

package/admin/src/content-manager/pages/ListView/reducer.js

@@ -8,27 +8,14 @@ import {
   GET_DATA,
   GET_DATA_SUCCEEDED,
   RESET_PROPS,
-  ON_CHANGE_BULK,
-  ON_CHANGE_BULK_SELECT_ALL,
-  ON_DELETE_DATA_ERROR,
-  ON_DELETE_DATA_SUCCEEDED,
-  ON_DELETE_SEVERAL_DATA_SUCCEEDED,
-  TOGGLE_MODAL_DELETE,
-  TOGGLE_MODAL_DELETE_ALL,
   ON_CHANGE_LIST_HEADERS,
   ON_RESET_LIST_HEADERS,
   SET_LIST_LAYOUT,
-  SET_MODAL_LOADING_STATE,
 } from './constants';
 
 export const initialState = {
   data: [],
-  didDeleteData: false,
-  entriesToDelete: [],
   isLoading: true,
-  showModalConfirmButtonLoading: false,
-  showWarningDelete: false,
-  showWarningDeleteAll: false,
   contentType: {},
   initialDisplayedHeaders: [],
   displayedHeaders: [],
@@ -56,30 +43,6 @@ const listViewReducer = (state = initialState, action) =>
         drafState.isLoading = false;
         break;
       }
-      case ON_CHANGE_BULK: {
-        const hasElement = state.entriesToDelete.some(el => el === action.name);
-
-        if (hasElement) {
-          drafState.entriesToDelete = drafState.entriesToDelete.filter(el => el !== action.name);
-          break;
-        }
-
-        drafState.entriesToDelete.push(action.name);
-        break;
-      }
-      case ON_CHANGE_BULK_SELECT_ALL: {
-        if (state.entriesToDelete.length > 0) {
-          drafState.entriesToDelete = [];
-
-          break;
-        }
-
-        drafState.data.forEach(value => {
-          drafState.entriesToDelete.push(value.id.toString());
-        });
-
-        break;
-      }
 
       case ON_CHANGE_LIST_HEADERS: {
         const {
@@ -115,21 +78,6 @@ const listViewReducer = (state = initialState, action) =>
 
         break;
       }
-      case ON_DELETE_DATA_SUCCEEDED: {
-        drafState.didDeleteData = true;
-        drafState.showWarningDelete = false;
-        break;
-      }
-      case ON_DELETE_DATA_ERROR: {
-        drafState.didDeleteData = false;
-        drafState.showWarningDelete = false;
-        break;
-      }
-      case ON_DELETE_SEVERAL_DATA_SUCCEEDED: {
-        drafState.didDeleteData = true;
-        drafState.showWarningDeleteAll = false;
-        break;
-      }
       case ON_RESET_LIST_HEADERS: {
         drafState.displayedHeaders = state.initialDisplayedHeaders;
         break;
@@ -137,34 +85,6 @@ const listViewReducer = (state = initialState, action) =>
       case RESET_PROPS: {
         return initialState;
       }
-      case SET_MODAL_LOADING_STATE: {
-        drafState.showModalConfirmButtonLoading = true;
-        break;
-      }
-      case TOGGLE_MODAL_DELETE: {
-        drafState.showModalConfirmButtonLoading = false;
-
-        // Only change this value when the modal is opening
-        if (!state.showWarningDelete) {
-          drafState.didDeleteData = false;
-        }
-
-        drafState.entriesToDelete = [];
-        drafState.showWarningDelete = !state.showWarningDelete;
-
-        break;
-      }
-      case TOGGLE_MODAL_DELETE_ALL: {
-        drafState.showModalConfirmButtonLoading = false;
-
-        // Only change this value when the modal is closing
-        if (!state.showWarningDeleteAll) {
-          drafState.didDeleteData = false;
-        }
-
-        drafState.showWarningDeleteAll = !state.showWarningDeleteAll;
-        break;
-      }
       case SET_LIST_LAYOUT: {
         const { contentType, displayedHeaders } = action;
 

package/admin/src/content-manager/pages/ListView/selectors.js

@@ -19,5 +19,11 @@ const makeSelectListView = () =>
     return substate;
   });
 
+const selectDisplayedHeaders = state => {
+  const { displayedHeaders } = state['content-manager_listView'];
+
+  return displayedHeaders;
+};
+
 export default makeSelectListView;
-export { listViewDomain };
+export { listViewDomain, selectDisplayedHeaders };

package/admin/src/content-manager/pages/ListView/utils/index.js

@@ -1,3 +1,3 @@
-export { default as getAllAllowedHeaders } from './getAllAllowedHeaders';
-export { default as getFirstSortableHeader } from './getFirstSortableHeader';
+// export { default as getAllAllowedHeaders } from './getAllAllowedHeaders';
+// export { default as getFirstSortableHeader } from './getFirstSortableHeader';
 export { default as buildQueryString } from './buildQueryString';

package/admin/src/content-manager/pages/ListViewLayoutManager/Permissions.js

@@ -1,12 +1,13 @@
 import React, { memo, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useRBAC, LoadingIndicatorPage } from '@strapi/helper-plugin';
-import isEqual from 'react-fast-compare';
+import { useRBAC, LoadingIndicatorPage, difference } from '@strapi/helper-plugin';
+
 import ListView from '../ListView';
 import { generatePermissionsObject } from '../../utils';
 
 const Permissions = props => {
   const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]);
+
   const { isLoading, allowedActions } = useRBAC(viewPermissions, props.permissions);
 
   if (isLoading) {
@@ -26,4 +27,16 @@ Permissions.propTypes = {
 };
 
 // This avoids the components to rerender on params change causing multiple requests to be fired
-export default memo(Permissions, isEqual);
+export default memo(Permissions, (prev, next) => {
+  const differenceBetweenRerenders = difference(prev, next);
+  // Here the submenu is using a navlink which doesn't support the state
+  // When we navigate from the EV to the LV using the menu the state is lost at some point
+  // and this causes the component to rerender twice and firing requests twice
+  // this hack prevents this
+  // TODO at some point we will need to refacto the LV and migrate to react-query
+  const propNamesThatHaveChanged = Object.keys(differenceBetweenRerenders).filter(
+    propName => propName !== 'state'
+  );
+
+  return propNamesThatHaveChanged.length > 0;
+});

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

@@ -1,68 +1,51 @@
 import React from 'react';
-import { Button, Padded, Text } from '@buffetjs/core';
-import { useHistory } from 'react-router';
-import { BaselineAlignment, CheckPermissions } from '@strapi/helper-plugin';
+import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { Main } from '@strapi/parts/Main';
+import { LinkButton } from '@strapi/parts/LinkButton';
+import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
+import { EmptyStateLayout } from '@strapi/parts/EmptyStateLayout';
+import AddIcon from '@strapi/icons/AddIcon';
+import EmptyStateDocument from '@strapi/icons/EmptyStateDocument';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 import { getTrad } from '../../utils';
-import Container from '../../components/Container';
-// TODO change pic when DS ready
-import Oops from './oops.png';
-
-const Block = styled.div`
-  padding: 48px 10px 50px 10px;
-  background: #ffffff;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px #e3e9f3;
-  margin-bottom: 17px;
-  text-align: center;
-`;
-
-const Img = styled.img`
-  max-height: 77px;
-`;
 
 const NoContentType = () => {
   const { formatMessage } = useIntl();
-  const { push } = useHistory();
-
-  const handleClick = () => {
-    // TODO change url when CTB ready
-    push(
-      '/plugins/content-type-builder/content-types/plugin::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
-    );
-  };
+  useFocusWhenNavigate();
 
   return (
-    <Container>
-      <Block>
-        <Img src={Oops} />
-        <div>
-          <Padded top size="md">
-            <BaselineAlignment top size="5px" />
-            <Text>
+    <Main>
+      <HeaderLayout
+        title={formatMessage({
+          id: getTrad('header.name'),
+          defaultMessage: 'Content',
+        })}
+      />
+      <ContentLayout>
+        <EmptyStateLayout
+          action={
+            <LinkButton
+              variant="secondary"
+              startIcon={<AddIcon />}
+              to="/plugins/content-type-builder/content-types/plugin::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null"
+            >
               {formatMessage({
-                id: getTrad('pages.NoContentType.text'),
-                defaultMessage:
-                  "You don't have any content yet, we recommend you to create your first Content-Type.",
+                id: 'app.components.HomePage.create',
+                defaultMessage: 'Create your first Content-type',
               })}
-            </Text>
-          </Padded>
-          <CheckPermissions
-            permissions={[{ action: 'plugin::content-type-builder.read', subject: null }]}
-          >
-            <BaselineAlignment top size="14px">
-              <Button color="primary" type="button" onClick={handleClick}>
-                {formatMessage({
-                  id: 'pages.NoContentType.button',
-                  defaultMessage: 'Create your first Content-Type',
-                })}
-              </Button>
-            </BaselineAlignment>
-          </CheckPermissions>
-        </div>
-      </Block>
-    </Container>
+            </LinkButton>
+          }
+          content={formatMessage({
+            id: 'content-manager.pages.NoContentType.text',
+            defaultMessage:
+              "You don't have any content yet, we recommend you to create your first Content-Type.",
+          })}
+          hasRadius
+          icon={<EmptyStateDocument width="10rem" />}
+          shadow="tableShadow"
+        />
+      </ContentLayout>
+    </Main>
   );
 };
 

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useFocusWhenNavigate, NoPermissions as NoPermissionsCompo } from '@strapi/helper-plugin';
+import { Main } from '@strapi/parts/Main';
+import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils';
+
+const NoPermissions = () => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+
+  return (
+    <Main>
+      <HeaderLayout
+        title={formatMessage({
+          id: getTrad('header.name'),
+          defaultMessage: 'Content',
+        })}
+      />
+      <ContentLayout>
+        <NoPermissionsCompo />
+      </ContentLayout>
+    </Main>
+  );
+};
+
+export default NoPermissions;

package/admin/src/core/utils/axiosInstance.js

@@ -3,7 +3,6 @@ import { auth } from '@strapi/helper-plugin';
 
 const instance = axios.create({
   baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
-  timeout: 1000,
 });
 
 instance.interceptors.request.use(
@@ -21,4 +20,17 @@ instance.interceptors.request.use(
   }
 );
 
+instance.interceptors.response.use(
+  response => response,
+  error => {
+    // whatever you want to do with the error
+    if (error?.response?.status === 401) {
+      auth.clearAppStorage();
+      window.location.reload();
+    }
+
+    throw error;
+  }
+);
+
 export default instance;

package/admin/src/core/utils/createHook.js

@@ -1,3 +1,5 @@
+// TODO: refacto this file to avoid eslint issues
+/* eslint-disable no-unused-vars */
 /* eslint-disable no-await-in-loop */
 /* eslint-disable no-restricted-syntax */
 const createHook = () => {

package/admin/src/hooks/index.js

@@ -5,7 +5,6 @@ export { default as useFetchPluginsFromMarketPlace } from './useFetchPluginsFrom
 export { default as useFetchRole } from './useFetchRole';
 export { default as useMenu } from './useMenu';
 export { default as useRolesList } from './useRolesList';
-export { default as useSettingsHeaderSearchContext } from './useSettingsHeaderSearchContext';
 export { default as useSettingsMenu } from './useSettingsMenu';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';

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

@@ -1,6 +1,7 @@
-import { useEffect, useReducer } from 'react';
-import { request, useNotification } from '@strapi/helper-plugin';
-import { get } from 'lodash';
+import { useEffect, useReducer, useCallback } from 'react';
+import { useNotification } from '@strapi/helper-plugin';
+import get from 'lodash/get';
+import { axiosInstance } from '../../core/utils';
 import init from './init';
 import reducer, { initialState } from './reducer';
 
@@ -17,13 +18,15 @@ const useRolesList = (shouldFetchData = true) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shouldFetchData]);
 
-  const fetchRolesList = async () => {
+  const fetchRolesList = useCallback(async () => {
     try {
       dispatch({
         type: 'GET_DATA',
       });
 
-      const { data } = await request('/admin/roles', { method: 'GET' });
+      const {
+        data: { data },
+      } = await axiosInstance.get('/admin/roles');
 
       dispatch({
         type: 'GET_DATA_SUCCEEDED',
@@ -43,7 +46,7 @@ const useRolesList = (shouldFetchData = true) => {
         });
       }
     }
-  };
+  }, [toggleNotification]);
 
   return { roles, isLoading, getData: fetchRolesList };
 };

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

@@ -1,16 +1,16 @@
 import { useEffect, useReducer } from 'react';
-import { hasPermissions, useRBACProvider, useStrapiApp } from '@strapi/helper-plugin';
+import { hasPermissions, useRBACProvider, useStrapiApp, useAppInfos } from '@strapi/helper-plugin';
 
 import reducer, { initialState } from './reducer';
 import init from './init';
 
 const useSettingsMenu = (noCheck = false) => {
   const { allPermissions: permissions } = useRBACProvider();
-
+  const { shouldUpdateStrapi } = useAppInfos();
   const { settings } = useStrapiApp();
 
   const [{ isLoading, menu }, dispatch] = useReducer(reducer, initialState, () =>
-    init(initialState, settings)
+    init(initialState, { settings, shouldUpdateStrapi })
   );
 
   useEffect(() => {

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

@@ -4,11 +4,15 @@ import adminPermissions from '../../permissions';
 import formatLinks from './utils/formatLinks';
 import globalLinks from './utils/globalLinks';
 
-const init = (initialState, settings) => {
+const init = (initialState, { settings, shouldUpdateStrapi }) => {
   // Retrieve the links that will be injected into the global section
   const pluginsGlobalLinks = settings.global.links;
   // Sort the links by name
-  const sortedGlobalLinks = sortLinks([...pluginsGlobalLinks, ...globalLinks]);
+  const sortedGlobalLinks = sortLinks([...pluginsGlobalLinks, ...globalLinks]).map(link => ({
+    ...link,
+    hasNotification: link.id === 'application-infos' && shouldUpdateStrapi,
+  }));
+
   const otherSections = Object.values(omit(settings, 'global'));
 
   const menu = [

package/admin/src/hooks/useSettingsMenu/utils/defaultGlobalLinks.js

@@ -1,6 +1,13 @@
 import adminPermissions from '../../../permissions';
 
 const defaultGlobalLinks = [
+  {
+    intlLabel: { id: 'Settings.application.title', defaultMessage: 'Application' },
+    to: '/settings/application-infos',
+    id: 'application-infos',
+    isDisplayed: false,
+    permissions: [],
+  },
   {
     intlLabel: { id: 'Settings.webhooks.title', defaultMessage: 'Webhooks' },
     to: '/settings/webhooks',

package/admin/src/layouts/AppLayout/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { SkipToContent } from '@strapi/parts/Main';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+
+const FlexBox = styled(Box)`
+  flex: 1;
+`;
+
+const AppLayout = ({ children, sideNav }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box background="neutral100">
+      <SkipToContent>
+        {formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
+      </SkipToContent>
+      <Row alignItems="flex-start">
+        {sideNav}
+        <FlexBox>{children}</FlexBox>
+      </Row>
+    </Box>
+  );
+};
+
+AppLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+  sideNav: PropTypes.node.isRequired,
+};
+
+export default AppLayout;

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -0,0 +1,27 @@
+/*
+ *
+ * LanguageToggle
+ *
+ */
+
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { SimpleMenu, MenuItem } from '@strapi/parts/SimpleMenu';
+import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
+
+const LocaleToggle = () => {
+  const { changeLocale, localeNames } = useLocalesProvider();
+  const { locale } = useIntl();
+
+  return (
+    <SimpleMenu label={localeNames[locale]}>
+      {Object.keys(localeNames).map(lang => (
+        <MenuItem onClick={() => changeLocale(lang)} key={lang}>
+          {localeNames[lang]}
+        </MenuItem>
+      ))}
+    </SimpleMenu>
+  );
+};
+
+export default LocaleToggle;

package/admin/src/layouts/UnauthenticatedLayout/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import LocaleToggle from './LocaleToggle';
+
+const Wrapper = styled(Box)`
+  margin: 0 auto;
+  width: 552px;
+`;
+
+export const Column = styled(Row)`
+  flex-direction: column;
+`;
+
+export const LayoutContent = ({ children }) => (
+  <Wrapper
+    shadow="tableShadow"
+    hasRadius
+    paddingTop={9}
+    paddingBottom={9}
+    paddingLeft={10}
+    paddingRight={10}
+    background="neutral0"
+    justifyContent="center"
+  >
+    {children}
+  </Wrapper>
+);
+LayoutContent.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+const UnauthenticatedLayout = ({ children }) => {
+  return (
+    <div>
+      <Row as="header" justifyContent="flex-end">
+        <Box paddingTop={6} paddingRight={8}>
+          <LocaleToggle />
+        </Box>
+      </Row>
+      <Box paddingTop={11} paddingBottom={11}>
+        {children}
+      </Box>
+    </div>
+  );
+};
+
+UnauthenticatedLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default UnauthenticatedLayout;