@strapi/admin 4.1.6-alpha.0 → 4.1.7

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

@@ -42,10 +42,7 @@ function Inputs({
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
   const type = fieldSchema.type;
-
-  const errorId = useMemo(() => {
-    return get(formErrors, [keys, 'id'], null);
-  }, [formErrors, keys]);
+  const error = get(formErrors, [keys], null);
 
   const fieldName = useMemo(() => {
     return getFieldName(keys);
@@ -160,10 +157,10 @@ function Inputs({
     return disabled;
   }, [disabled, isCreatingEntry, isUserAllowedToEditField, isUserAllowedToReadField]);
 
-  const options = useMemo(() => generateOptions(fieldSchema.enum || [], isRequired), [
-    fieldSchema,
-    isRequired,
-  ]);
+  const options = useMemo(
+    () => generateOptions(fieldSchema.enum || [], isRequired),
+    [fieldSchema, isRequired]
+  );
 
   const { label, description, placeholder, visible } = metadatas;
 
@@ -177,7 +174,7 @@ function Inputs({
         description={description ? { id: description, defaultMessage: description } : null}
         intlLabel={{ id: label, defaultMessage: label }}
         labelAction={labelAction}
-        error={errorId}
+        error={error && formatMessage(error)}
         name={keys}
         required={isRequired}
       />
@@ -215,6 +212,7 @@ function Inputs({
         }
         queryInfos={queryInfos}
         value={value}
+        error={error && formatMessage(error)}
       />
     );
   }
@@ -228,7 +226,7 @@ function Inputs({
       isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
       description={description ? { id: description, defaultMessage: description } : null}
       disabled={shouldDisableField}
-      error={errorId}
+      error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
       customInputs={{

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

@@ -207,9 +207,6 @@ RepeatableComponent.propTypes = {
 
 const Memoized = memo(RepeatableComponent);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);
 
 export { RepeatableComponent };

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

@@ -70,7 +70,7 @@ function SelectMany({
         onMenuOpen={onMenuOpen}
         onMenuScrollToBottom={onMenuScrollToBottom}
         placeholder={formatMessage(
-          placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+          placeholder || { id: 'global.select', defaultMessage: 'Select...' }
         )}
         styles={styles}
         value={[]}

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

@@ -46,7 +46,7 @@ function SelectOne({
         onMenuOpen={onMenuOpen}
         onMenuScrollToBottom={onMenuScrollToBottom}
         placeholder={formatMessage(
-          placeholder || { id: 'components.Select.placeholder', defaultMessage: 'Select...' }
+          placeholder || { id: 'global.select', defaultMessage: 'Select...' }
         )}
         styles={styles}
         value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -49,6 +49,8 @@ const getSelectStyles = theme => {
         ...base,
         width: '100%',
         marginTop: theme.spaces[1],
+        backgroundColor: theme.colors.neutral0,
+        color: theme.colors.neutral800,
         borderRadius: '4px !important',
         borderTopLeftRadius: '4px !important',
         borderTopRightRadius: '4px !important',
@@ -76,7 +78,7 @@ const getSelectStyles = theme => {
       return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
     },
     placeholder: base => ({ ...base, marginLeft: 0 }),
-    singleValue: base => ({ ...base, marginLeft: 0 }),
+    singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),
     valueContainer: base => ({
       ...base,
       padding: 0,

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

@@ -144,8 +144,6 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const displayErrors = useCallback(
     err => {
       const errorPayload = err.response.payload;
-      console.error(errorPayload);
-
       let errorMessage = get(errorPayload, ['message'], 'Bad Request');
 
       // TODO handle errors correctly when back-end ready
@@ -178,10 +176,12 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       } catch (err) {
         trackUsageRef.current('didNotDeleteEntry', { error: err, ...trackerProperty });
 
+        displayErrors(err);
+
         return Promise.reject(err);
       }
     },
-    [slug, toggleNotification, searchToSend]
+    [slug, displayErrors, toggleNotification, searchToSend]
   );
 
   const onDeleteSucceeded = useCallback(() => {
@@ -211,12 +211,16 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         setIsCreatingEntry(false);
 
         dispatch(setStatus('resolved'));
+
+        return Promise.resolve(data);
       } catch (err) {
         trackUsageRef.current('didNotCreateEntry', { error: err, trackerProperty });
 
         displayErrors(err);
 
         dispatch(setStatus('resolved'));
+
+        return Promise.reject(err);
       }
     },
     [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification, setCurrentStep]
@@ -239,10 +243,14 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       dispatch(submitSucceeded(cleanReceivedData(data)));
 
       dispatch(setStatus('resolved'));
+
+      return Promise.resolve(data);
     } catch (err) {
       displayErrors(err);
 
       dispatch(setStatus('resolved'));
+
+      return Promise.reject(err);
     }
   }, [cleanReceivedData, displayErrors, slug, searchToSend, dispatch, toggleNotification]);
 
@@ -267,12 +275,16 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         dispatch(submitSucceeded(cleanReceivedData(data)));
 
         dispatch(setStatus('resolved'));
+
+        return Promise.resolve(data);
       } catch (err) {
         displayErrors(err);
 
         trackUsageRef.current('didNotEditEntry', { error: err, trackerProperty });
 
         dispatch(setStatus('resolved'));
+
+        return Promise.reject(err);
       }
     },
     [cleanReceivedData, displayErrors, slug, dispatch, rawQuery, toggleNotification]

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -29,7 +29,8 @@ export const EditorStylesContainer = styled.div`
 
   .CodeMirror-scrollbar-filler,
   .CodeMirror-gutter-filler {
-    background-color: white; /* The little square between H and V scrollbars */
+    /* The little square between H and V scrollbars */
+    background-color: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   /* GUTTER */
@@ -158,7 +159,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     position: relative;
     overflow: hidden;
-    background: white;
+    background: ${({ theme }) => `${theme.colors.neutral0}`};
   }
 
   .CodeMirror-scroll {
@@ -292,6 +293,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror-cursor {
     position: absolute;
     pointer-events: none;
+    border-color: ${({ theme }) => `${theme.colors.neutral800}`};
   }
   .CodeMirror-measure pre {
     position: static;

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

@@ -118,7 +118,6 @@ const Wysiwyg = ({
       )
     : '';
 
-  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
   const label = intlLabel.id
     ? formatMessage(
         { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
@@ -157,7 +156,7 @@ const Wysiwyg = ({
             disabled={disabled}
             isExpandMode={isExpandMode}
             editorRef={editorRef}
-            error={errorMessage}
+            error={error}
             isPreviewMode={isPreviewMode}
             name={name}
             onChange={onChange}
@@ -171,10 +170,10 @@ const Wysiwyg = ({
         <Hint description={description} name={name} error={error} />
       </Stack>
 
-      {errorMessage && (
+      {error && (
         <Box paddingTop={1}>
           <Typography variant="pi" textColor="danger600" data-strapi-field-error>
-            {errorMessage}
+            {error}
           </Typography>
         </Box>
       )}

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -40,7 +40,7 @@ const formatLayouts = (initialData, models) => {
   const formattedCTEditLayout = formatLayoutWithMetas(data.contentType, null, models);
   const ctUid = data.contentType.uid;
   const formattedEditRelationsLayout = formatEditRelationsLayoutWithMetas(data.contentType, models);
-  const formattedListLayout = formatListLayoutWithMetas(data.contentType, models);
+  const formattedListLayout = formatListLayoutWithMetas(data.contentType, data.components);
 
   set(data, ['contentType', 'layouts', 'edit'], formattedCTEditLayout);
   set(data, ['contentType', 'layouts', 'editRelations'], formattedEditRelationsLayout);
@@ -146,7 +146,7 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
   return formatted;
 };
 
-const formatListLayoutWithMetas = contentTypeConfiguration => {
+const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
   const formatted = contentTypeConfiguration.layouts.list.reduce((acc, current) => {
     const fieldSchema = get(contentTypeConfiguration, ['attributes', current], {});
     const metadatas = get(contentTypeConfiguration, ['metadatas', current, 'list'], {});
@@ -164,6 +164,27 @@ const formatListLayoutWithMetas = contentTypeConfiguration => {
       return acc;
     }
 
+    if (type === 'component') {
+      const component = components[fieldSchema.component];
+      const mainFieldName = component.settings.mainField;
+      const mainFieldAttribute = component.attributes[mainFieldName];
+
+      acc.push({
+        key: `__${current}_key__`,
+        name: current,
+        fieldSchema,
+        metadatas: {
+          ...metadatas,
+          mainField: {
+            ...mainFieldAttribute,
+            name: mainFieldName,
+          },
+        },
+      });
+
+      return acc;
+    }
+
     acc.push({ key: `__${current}_key__`, name: current, fieldSchema, metadatas });
 
     return acc;

package/admin/src/content-manager/pages/EditSettingsView/components/FieldButtonContent.js

@@ -44,7 +44,7 @@ const FieldButtonContent = ({ attribute, onEditField, onDeleteField, children })
           <CustomIconButton
             label={formatMessage(
               {
-                id: getTrad('app.component.table.delete'),
+                id: 'global.delete-target',
                 defaultMessage: `Delete {target}`,
               },
               {

package/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -72,7 +72,7 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) =>
           }
           endActions={
             <Button type="submit">
-              {formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })}
+              {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
             </Button>
           }
         />

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -11,7 +11,12 @@ import { makeSelectModelAndComponentSchemas } from '../../App/selectors';
 import getTrad from '../../../utils/getTrad';
 import GenericInput from './GenericInput';
 
-const FIELD_SIZES = [[4, '33%'], [6, '50%'], [8, '66%'], [12, '100%']];
+const FIELD_SIZES = [
+  [4, '33%'],
+  [6, '50%'],
+  [8, '66%'],
+  [12, '100%'],
+];
 
 const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
 

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

@@ -250,7 +250,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                 to="/"
               >
                 {formatMessage({
-                  id: 'app.components.go-back',
+                  id: 'global.back',
                   defaultMessage: 'Back',
                 })}
               </Link>
@@ -261,7 +261,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                 startIcon={<Check />}
                 type="submit"
               >
-                {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
               </Button>
             }
           />

package/admin/src/content-manager/pages/EditSettingsView/utils/layout.js

@@ -28,7 +28,13 @@ const formatLayout = arr => {
 
         return acc2;
       }, []);
-      const rowId = acc.length === 0 ? 0 : Math.max.apply(Math, acc.map(o => o.rowId)) + 1;
+      const rowId =
+        acc.length === 0
+          ? 0
+          : Math.max.apply(
+              Math,
+              acc.map(o => o.rowId)
+            ) + 1;
 
       const currentRowSize = getRowSize(currentRow);
 

package/admin/src/content-manager/pages/EditView/DeleteLink/index.js

@@ -71,7 +71,4 @@ DeleteLink.propTypes = {
 
 const Memoized = memo(DeleteLink, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

package/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/index.js

@@ -88,8 +88,5 @@ DraftAndPublishBadge.propTypes = {
   isPublished: PropTypes.bool.isRequired,
 };
 
-export default connect(
-  DraftAndPublishBadge,
-  select
-);
+export default connect(DraftAndPublishBadge, select);
 export { DraftAndPublishBadge };

package/admin/src/content-manager/pages/EditView/Header/index.js

@@ -172,7 +172,7 @@ const Header = ({
             to="/"
           >
             {formatMessage({
-              id: 'app.components.HeaderLayout.link.go-back',
+              id: 'global.back',
               defaultMessage: 'Back',
             })}
           </Link>

package/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js

@@ -113,7 +113,7 @@ const EditFieldForm = ({
           }
           endActions={
             <Button type="submit">
-              {formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })}
+              {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}
             </Button>
           }
         />

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

@@ -191,7 +191,7 @@ const ListSettingsView = ({ layout, slug }) => {
           <HeaderLayout
             navigationAction={
               <Link startIcon={<ArrowLeft />} to={goBackUrl} id="go-back">
-                {formatMessage({ id: 'app.components.go-back', defaultMessage: 'Back' })}
+                {formatMessage({ id: 'global.back', defaultMessage: 'Back' })}
               </Link>
             }
             primaryAction={
@@ -201,7 +201,7 @@ const ListSettingsView = ({ layout, slug }) => {
                 disabled={isEqual(modifiedData, initialData)}
                 type="submit"
               >
-                {formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
+                {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
               </Button>
             }
             subtitle={formatMessage({

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

@@ -21,11 +21,12 @@ export function resetProps() {
   return { type: RESET_PROPS };
 }
 
-export const setLayout = contentType => {
+export const setLayout = ({ components, contentType }) => {
   const { layouts } = contentType;
 
   return {
     contentType,
+    components,
     displayedHeaders: layouts.list,
     type: SET_LIST_LAYOUT,
   };

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

@@ -267,7 +267,7 @@ function ListView({
         navigationAction={
           <Link startIcon={<ArrowLeft />} to="/content-manager/">
             {formatMessage({
-              id: 'app.components.HeaderLayout.link.go-back',
+              id: 'global.back',
               defaultMessage: 'Back',
             })}
           </Link>
@@ -388,9 +388,6 @@ export function mapDispatchToProps(dispatch) {
     dispatch
   );
 }
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps
-);
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
 
 export default compose(withConnect)(memo(ListView, isEqual));

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

@@ -4,6 +4,7 @@
  */
 
 import produce from 'immer';
+import get from 'lodash/get';
 import {
   GET_DATA,
   GET_DATA_SUCCEEDED,
@@ -17,6 +18,7 @@ export const initialState = {
   data: [],
   isLoading: true,
   contentType: {},
+  components: [],
   initialDisplayedHeaders: [],
   displayedHeaders: [],
   pagination: {
@@ -26,21 +28,22 @@ export const initialState = {
 
 const listViewReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, drafState => {
+  produce(state, draftState => {
     switch (action.type) {
       case GET_DATA: {
         return {
           ...initialState,
           contentType: state.contentType,
+          components: state.components,
           initialDisplayedHeaders: state.initialDisplayedHeaders,
           displayedHeaders: state.displayedHeaders,
         };
       }
 
       case GET_DATA_SUCCEEDED: {
-        drafState.pagination = action.pagination;
-        drafState.data = action.data;
-        drafState.isLoading = false;
+        draftState.pagination = action.pagination;
+        draftState.data = action.data;
+        draftState.isLoading = false;
         break;
       }
 
@@ -59,19 +62,49 @@ const listViewReducer = (state = initialState, action) =>
             key: `__${name}_key__`,
           };
 
-          if (attributes[name].type === 'relation') {
-            drafState.displayedHeaders.push({
-              ...header,
-              queryInfos: {
-                defaultParams: {},
-                endPoint: `collection-types/${uid}`,
-              },
-            });
-          } else {
-            drafState.displayedHeaders.push(header);
+          switch (attributes[name].type) {
+            case 'component': {
+              const componentName = attributes[name].component;
+              const mainFieldName = get(
+                state,
+                ['components', componentName, 'settings', 'mainField'],
+                null
+              );
+              const mainFieldAttribute = get(state, [
+                'components',
+                componentName,
+                'attributes',
+                mainFieldName,
+              ]);
+
+              draftState.displayedHeaders.push({
+                ...header,
+                metadatas: {
+                  ...metas,
+                  mainField: {
+                    ...mainFieldAttribute,
+                    name: mainFieldName,
+                  },
+                },
+              });
+              break;
+            }
+
+            case 'relation':
+              draftState.displayedHeaders.push({
+                ...header,
+                queryInfos: {
+                  defaultParams: {},
+                  endPoint: `collection-types/${uid}`,
+                },
+              });
+              break;
+
+            default:
+              draftState.displayedHeaders.push(header);
           }
         } else {
-          drafState.displayedHeaders = state.displayedHeaders.filter(
+          draftState.displayedHeaders = state.displayedHeaders.filter(
             header => header.name !== name
           );
         }
@@ -79,23 +112,24 @@ const listViewReducer = (state = initialState, action) =>
         break;
       }
       case ON_RESET_LIST_HEADERS: {
-        drafState.displayedHeaders = state.initialDisplayedHeaders;
+        draftState.displayedHeaders = state.initialDisplayedHeaders;
         break;
       }
       case RESET_PROPS: {
         return initialState;
       }
       case SET_LIST_LAYOUT: {
-        const { contentType, displayedHeaders } = action;
+        const { contentType, components, displayedHeaders } = action;
 
-        drafState.contentType = contentType;
-        drafState.displayedHeaders = displayedHeaders;
-        drafState.initialDisplayedHeaders = displayedHeaders;
+        draftState.contentType = contentType;
+        draftState.components = components;
+        draftState.displayedHeaders = displayedHeaders;
+        draftState.initialDisplayedHeaders = displayedHeaders;
 
         break;
       }
       default:
-        return drafState;
+        return draftState;
     }
   });
 

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

@@ -15,12 +15,9 @@ const listViewDomain = () => state => state['content-manager_listView'] || initi
  */
 
 const makeSelectListView = () =>
-  createSelector(
-    listViewDomain(),
-    substate => {
-      return substate;
-    }
-  );
+  createSelector(listViewDomain(), substate => {
+    return substate;
+  });
 
 const selectDisplayedHeaders = state => {
   const { displayedHeaders } = state['content-manager_listView'];

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

@@ -21,7 +21,7 @@ const ListViewLayout = ({ layout, ...props }) => {
   }, [rawQuery, replace, redirectionLink]);
 
   useEffect(() => {
-    dispatch(setLayout(layout.contentType));
+    dispatch(setLayout(layout));
   }, [dispatch, layout]);
 
   useEffect(() => {

package/admin/src/content-manager/testUtils/data.js

@@ -140,7 +140,11 @@ const testData = {
       id: 1,
       name: 'name',
       subcomponotrepeatable: { id: 4, name: 'name' },
-      subrepeatable: [{ id: 1, name: 'name' }, { id: 2, name: 'name' }, { id: 3, name: 'name' }],
+      subrepeatable: [
+        { id: 1, name: 'name' },
+        { id: 2, name: 'name' },
+        { id: 3, name: 'name' },
+      ],
     },
     repeatable: [
       {

package/admin/src/content-manager/utils/checkIfAttributeIsDisplayable.js

@@ -7,7 +7,7 @@ const checkIfAttributeIsDisplayable = attribute => {
     return !toLower(attribute.relationType).includes('morph');
   }
 
-  return !['json', 'component', 'dynamiczone', 'richtext', 'password'].includes(type) && !!type;
+  return !['json', 'dynamiczone', 'richtext', 'password'].includes(type) && !!type;
 };
 
 export default checkIfAttributeIsDisplayable;

package/admin/src/content-manager/utils/isFieldTypeNumber.js

@@ -0,0 +1,3 @@
+export default function isFieldTypeNumber(type) {
+  return ['integer', 'biginteger', 'decimal', 'float', 'number'].includes(type);
+}

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

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ThemeToggleContext = createContext({});
+
+export default ThemeToggleContext;

package/admin/src/contexts/index.js

@@ -1,3 +1,4 @@
 export { default as AdminContext } from './Admin';
 export { default as ConfigurationsContext } from './Configurations';
 export { default as PermissionsDataManagerContext } from './PermisssionsDataManagerContext';
+export { default as ThemeToggleContext } from './ThemeToggle';

package/admin/src/hooks/index.js

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