@strapi/admin 4.2.0-alpha.O → 4.2.0-beta.2

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

@@ -50,6 +50,7 @@ const getSelectStyles = theme => {
         width: '100%',
         marginTop: theme.spaces[1],
         backgroundColor: theme.colors.neutral0,
+        color: theme.colors.neutral800,
         borderRadius: '4px !important',
         borderTopLeftRadius: '4px !important',
         borderTopRightRadius: '4px !important',
@@ -77,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/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

@@ -59,8 +59,8 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
         'relation',
         'component',
         'boolean',
-        'date',
         'media',
+        'password',
         'richtext',
         'timestamp',
       ].includes(type) && !!type
@@ -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/EditView/index.js

@@ -364,194 +364,6 @@ const EditView = ({
       }}
     </DataManagementWrapper>
   );
-
-  // return (
-  //   <DataManagementWrapper allLayoutData={layout} slug={slug} id={id} origin={origin}>
-  //     {({
-  // componentsDataStructure,
-  // contentTypeDataStructure,
-  // data,
-  // isCreatingEntry,
-  // isLoadingForData,
-  // onDelete,
-  // onDeleteSucceeded,
-  // onPost,
-  // onPublish,
-  // onPut,
-  // onUnpublish,
-  // redirectionLink,
-  // status,
-  //     }) => {
-  // return (
-  //   <EditViewDataManagerProvider
-  //     allowedActions={allowedActions}
-  //     allLayoutData={layout}
-  //     createActionAllowedFields={createActionAllowedFields}
-  //     componentsDataStructure={componentsDataStructure}
-  //     contentTypeDataStructure={contentTypeDataStructure}
-  //     from={redirectionLink}
-  //     initialValues={data}
-  //     isCreatingEntry={isCreatingEntry}
-  //     isLoadingForData={isLoadingForData}
-  //     isSingleType={isSingleType}
-  //     onPost={onPost}
-  //     onPublish={onPublish}
-  //     onPut={onPut}
-  //     onUnpublish={onUnpublish}
-  //     readActionAllowedFields={readActionAllowedFields}
-  //     redirectToPreviousPage={goBack}
-  //     slug={slug}
-  //     status={status}
-  //     updateActionAllowedFields={updateActionAllowedFields}
-  //   >
-  //           <Container className="container-fluid">
-  //             <Header allowedActions={allowedActions} />
-  //             <div className="row" style={{ paddingTop: 3 }}>
-  //               <div className="col-md-12 col-lg-9" style={{ marginBottom: 13 }}>
-  //                 {formattedContentTypeLayout.map((block, blockIndex) => {
-  //                   if (isDynamicZone(block)) {
-  //                     const {
-  //                       0: {
-  //                         0: { name, fieldSchema, metadatas, labelIcon },
-  //                       },
-  //                     } = block;
-  //                     const baselineAlignementSize = blockIndex === 0 ? '3px' : '0';
-
-  //                     return (
-  //                       <BaselineAlignment key={blockIndex} top size={baselineAlignementSize}>
-  // <DynamicZone
-  //   name={name}
-  //   fieldSchema={fieldSchema}
-  //   labelIcon={labelIcon}
-  //   metadatas={metadatas}
-  // />
-  //                       </BaselineAlignment>
-  //                     );
-  //                   }
-
-  //                   return (
-  //                     <FormWrapper key={blockIndex}>
-  //                       {block.map((fieldsBlock, fieldsBlockIndex) => {
-  //                         return (
-  //                           <div className="row" key={fieldsBlockIndex}>
-  //                             {fieldsBlock.map(
-  //                               ({ name, size, fieldSchema, labelIcon, metadatas }, fieldIndex) => {
-  //                                 const isComponent = fieldSchema.type === 'component';
-
-  //                                 if (isComponent) {
-  //                                   const { component, max, min, repeatable = false } = fieldSchema;
-  //                                   const componentUid = fieldSchema.component;
-
-  //                                   return (
-  //                                     <FieldComponent
-  //                                       key={componentUid}
-  //                                       componentUid={component}
-  //                                       labelIcon={labelIcon}
-  //                                       isRepeatable={repeatable}
-  //                                       label={metadatas.label}
-  //                                       max={max}
-  //                                       min={min}
-  //                                       name={name}
-  //                                     />
-  //                                   );
-  //                                 }
-
-  //                                 return (
-  //                                   <div className={`col-${size}`} key={name}>
-  //                                     <Inputs
-  //                                       autoFocus={
-  //                                         blockIndex === 0 &&
-  //                                         fieldsBlockIndex === 0 &&
-  //                                         fieldIndex === 0
-  //                                       }
-  //                                       fieldSchema={fieldSchema}
-  //                                       keys={name}
-  //                                       labelIcon={labelIcon}
-  //                                       metadatas={metadatas}
-  //                                     />
-  //                                   </div>
-  //                                 );
-  //                               }
-  //                             )}
-  //                           </div>
-  //                         );
-  //                       })}
-  //                     </FormWrapper>
-  //                   );
-  //                 })}
-  //               </div>
-  //               <div className="col-md-12 col-lg-3">
-  //                 <InformationCard />
-  //                 <Padded size="smd" top />
-  //                 {currentContentTypeLayoutData.layouts.editRelations.length > 0 && (
-  //                   <SubWrapper style={{ padding: '0 20px 1px', marginBottom: '25px' }}>
-  //                     <div style={{ paddingTop: '22px' }}>
-  //                       {currentContentTypeLayoutData.layouts.editRelations.map(
-  //                         ({ name, fieldSchema, labelIcon, metadatas, queryInfos }) => {
-  //                           return (
-  //                             <SelectWrapper
-  // {...fieldSchema}
-  // {...metadatas}
-  // key={name}
-  // labelIcon={labelIcon}
-  // name={name}
-  // relationsType={fieldSchema.relationType}
-  // queryInfos={queryInfos}
-  //                             />
-  //                           );
-  //                         }
-  //                       )}
-  //                     </div>
-  //                   </SubWrapper>
-  //                 )}
-  //                 <LinkWrapper>
-  //                   <ul>
-  // <CheckPermissions permissions={configurationPermissions}>
-  //   <LiLink
-  //     message={{
-  //       id: 'app.links.configure-view',
-  //     }}
-  //     icon="layout"
-  //     url={configurationsURL}
-  //     onClick={() => {
-  //       // trackUsage('willEditContentTypeLayoutFromEditView');
-  //     }}
-  //   />
-  // </CheckPermissions>
-  //                     {slug !== 'strapi::administrator' && (
-  //                       <CheckPermissions permissions={ctbPermissions}>
-  //                         <LiLink
-  //                           message={{
-  //                             id: getTrad('containers.Edit.Link.Fields'),
-  //                           }}
-  // onClick={() => {
-  //   trackUsage('willEditEditLayout');
-  // }}
-  //                           icon="fa-cog"
-  //                           url={`/plugins/content-type-builder/content-types/${slug}`}
-  //                         />
-  //                       </CheckPermissions>
-  //                     )}
-  //                     {/*  TODO add DOCUMENTATION */}
-  //                     <InjectionZone area="contentManager.editView.right-links" slug={slug} />
-
-  // {allowedActions.canDelete && (
-  //   <DeleteLink
-  //     isCreatingEntry={isCreatingEntry}
-  //     onDelete={onDelete}
-  //     onDeleteSucceeded={onDeleteSucceeded}
-  //   />
-  // )}
-  //                   </ul>
-  //                 </LinkWrapper>
-  //               </div>
-  //             </div>
-  //           </Container>
-  //         </EditViewDataManagerProvider>
-  //       );
-  //     }}
-  //   </DataManagementWrapper>
-  // );
 };
 
 EditView.defaultProps = {

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;
     }
   });