Clean code

packages/strapi-admin/admin/src/app.js

@@ -9,9 +9,7 @@ import '@babel/polyfill';
 import 'sanitize.css/sanitize.css';
 
 // Third party css library needed
-// Currently unable to bundle them
 
-// import 'react-select/dist/react-select.css';
 import 'react-datetime/css/react-datetime.css';
 
 import './styles/main.scss';

packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss

@@ -7,15 +7,12 @@
 
 .buttonContainer {
   width: 100%;
-  // width: 358px;
   height: 34px;
   text-align: center;
   background-color: #fafafb;
-  // border: 1px solid #E3E9F3;
   border-top: 0;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
-
   color: #333740;
   font-size: 12px;
   font-weight: 700;

packages/strapi-helper-plugin/lib/src/components/InputFileDetails/styles.scss

@@ -101,11 +101,4 @@
     margin-right: 7px;
     color: #b3b5b9;
   }
-  // margin-right: 8px;
-  // &:before {
-  //   content: '\F08E';
-  //   display: block;
-  //   font-family: 'FontAwesome';
-  //   font-size: 11px;
-  // }
 }

packages/strapi-helper-plugin/lib/src/components/ListWrapper/index.js

@@ -13,8 +13,6 @@ const ListWrapper = styled.div`
     overflow-x: scroll;
   }
   .list-button {
-    // padding: 1rem 3rem 2.5rem 3rem;
-
     padding: 1.4rem 3rem 2.5rem 3rem;
 
     button {

packages/strapi-plugin-content-manager/admin/src/components/AddDropdown/components.js

@@ -36,7 +36,6 @@ const Wrapper = styled.div`
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        // width: calc(100% - 18px);
         text-align: center;
         margin-bottom: 0;
         margin-top: -1px;

packages/strapi-plugin-content-manager/admin/src/components/FieldForm/index.js

@@ -47,11 +47,10 @@ const FieldForm = ({
           {Object.keys(metadatas)
             .filter(meta => meta !== 'visible')
             .map(meta => {
-              if (formType === 'group' && meta !== 'label') {
+              if (
-                return null;
+                (formType === 'group' || formType === 'media') &&
-              }
+                meta !== 'label'
-
+              ) {
-              if (formType === 'media' && !['label'].includes(meta)) {
                 return null;
               }
 

packages/strapi-plugin-content-manager/admin/src/components/FieldItem/components.js

@@ -5,9 +5,9 @@ const InfoLabel = styled.div`
   top: 0;
   right: 40px;
   max-width: 80px;
+
   text-overflow: ellipsis;
   overflow: hidden;
-
   font-weight: 400;
   color: #007eff;
 `;
@@ -40,8 +40,8 @@ const Carret = styled.div`
     `;
   }}
   height: 30px;
-  margin-right: 3px;
   width: 2px;
+  margin-right: 3px;
   border-radius: 2px;
   background: #007eff;
 `;
@@ -75,11 +75,11 @@ const NameWrapper = styled.div`
   }
   .name {
     display: inline-block;
+    width: calc(100% - 18px);
     vertical-align: top;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width: calc(100% - 18px);
   }
 
   ${({ isHidden }) => {

packages/strapi-plugin-content-manager/admin/src/components/FieldsReorder/Item.js

@@ -77,10 +77,6 @@ const Item = ({
 
       moveRow(dragRow, targetRow);
 
-      // Note: we're mutating the monitor item here!
-      // Generally it's better to avoid mutations,
-      // but it's good here for the sake of performance
-      // to avoid expensive index searches.
       item.rowIndex = targetRow;
       item.itemIndex = hoverIndex;
 
@@ -116,7 +112,6 @@ const Item = ({
         Math.abs(monitor.getClientOffset().x - hoverBoundingRect.left) >
         hoverBoundingRect.width / 1.8
       ) {
-        // TODO ADD NEW LINE
         moveItem(dragIndex, hoverIndex + 1, dragRow, targetRow);
 
         item.itemIndex = hoverIndex + 1;
@@ -160,6 +155,8 @@ const Item = ({
     item: { type: ItemTypes.EDIT_FIELD, itemIndex, rowIndex, name, size },
   });
 
+  // Remove the default preview when the item is being dragged
+  // The preview is handled by the DragLayer
   useEffect(() => {
     preview(getEmptyImage(), { captureDraggingState: true });
   }, [preview]);

packages/strapi-plugin-content-manager/admin/src/components/Group/reducer.js

@@ -15,8 +15,6 @@ function reducer(state, action) {
         list.map(obj => obj.update('isOpen', () => false))
       );
     case 'OPEN_COLLAPSES_THAT_HAVE_ERRORS':
-      // TODO fix collapse open
-      // return state;
       return state
         .update('collapsesToOpen', () => fromJS(action.collapsesToOpen))
         .update('collapses', list => {

packages/strapi-plugin-content-manager/admin/src/components/SortableList/Item.js

@@ -87,7 +87,7 @@ const Item = ({ index, move, name, removeItem }) => {
       push={goTo}
       ref={ref}
       size={12}
-      style={{ marginBottom: 6 }}
+      style={{ marginBottom: 6, paddingLeft: 5, paddingRight: 5 }}
     />
   );
 };

packages/strapi-plugin-content-manager/admin/src/containers/SettingViewGroup/reducer.js

@@ -25,7 +25,7 @@ const getSize = type => {
 };
 
 const reducer = (state, action) => {
-  const layoutPath = ['modifiedData', 'layouts', 'edit'];
+  const layoutPathEdit = ['modifiedData', 'layouts', 'edit'];
   const { dragIndex, hoverIndex, dragRowIndex, hoverRowIndex } = action;
   const getFieldType = name =>
     state.getIn(['modifiedData', 'schema', 'attributes', name, 'type']);
@@ -39,10 +39,13 @@ const reducer = (state, action) => {
         .update('itemFormType', () => action.itemFormType)
         .update('modifiedData', () => fromJS(action.data));
     case 'MOVE_ROW':
-      return state.updateIn(layoutPath, list => {
+      return state.updateIn(layoutPathEdit, list => {
         return list
           .delete(dragRowIndex)
-          .insert(hoverRowIndex, state.getIn([...layoutPath, dragRowIndex]));
+          .insert(
+            hoverRowIndex,
+            state.getIn([...layoutPathEdit, dragRowIndex])
+          );
       });
     case 'ON_ADD_DATA': {
       const size = getSize(
@@ -54,9 +57,9 @@ const reducer = (state, action) => {
           'type',
         ])
       );
-      const listSize = state.getIn(layoutPath).size;
+      const listSize = state.getIn(layoutPathEdit).size;
       const newList = state
-        .getIn(layoutPath)
+        .getIn(layoutPathEdit)
         .updateIn([listSize - 1, 'rowContent'], list => {
           if (list) {
             return list.push({
@@ -70,7 +73,7 @@ const reducer = (state, action) => {
       const formattedList = formatLayout(newList.toJS());
 
       return state
-        .updateIn(layoutPath, () => fromJS(formattedList))
+        .updateIn(layoutPathEdit, () => fromJS(formattedList))
         .update('itemNameToSelect', () => action.name)
         .update('itemFormType', () => getFieldType(action.name) || '');
     }
@@ -81,7 +84,11 @@ const reducer = (state, action) => {
       );
 
     case 'REMOVE_FIELD': {
-      const row = state.getIn([...layoutPath, action.rowIndex, 'rowContent']);
+      const row = state.getIn([
+        ...layoutPathEdit,
+        action.rowIndex,
+        'rowContent',
+      ]);
       let newState;
       let fieldNameToDelete;
       // Delete the entire row if length is one or if lenght is equal to 2 and the second element is the hidden div used to make the dnd exp smoother
@@ -90,18 +97,18 @@ const reducer = (state, action) => {
         (row.size == 2 && row.getIn([1, 'name']) === '_TEMP_')
       ) {
         fieldNameToDelete = state.getIn([
-          ...layoutPath,
+          ...layoutPathEdit,
           action.rowIndex,
           'rowContent',
           0,
           'name',
         ]);
-        newState = state.updateIn(layoutPath, list =>
+        newState = state.updateIn(layoutPathEdit, list =>
           list.delete(action.rowIndex)
         );
       } else {
         fieldNameToDelete = state.getIn([
-          ...layoutPath,
+          ...layoutPathEdit,
           action.rowIndex,
           'rowContent',
           action.fieldIndex,
@@ -109,13 +116,13 @@ const reducer = (state, action) => {
         ]);
 
         newState = state.updateIn(
-          [...layoutPath, action.rowIndex, 'rowContent'],
+          [...layoutPathEdit, action.rowIndex, 'rowContent'],
           list => list.delete(action.fieldIndex)
         );
       }
 
       const updatedList = fromJS(
-        formatLayout(newState.getIn(layoutPath).toJS())
+        formatLayout(newState.getIn(layoutPathEdit).toJS())
       );
 
       if (state.get('itemNameToSelect') === fieldNameToDelete) {
@@ -123,39 +130,44 @@ const reducer = (state, action) => {
           updatedList.getIn([0, 'rowContent', 0, 'name']) || '';
 
         return state
-          .updateIn(layoutPath, () => updatedList)
+          .updateIn(layoutPathEdit, () => updatedList)
           .update('itemNameToSelect', () => firstField)
           .update('itemFormType', () => getFieldType(firstField) || '');
       }
 
-      return state.updateIn(layoutPath, () => updatedList);
+      return state.updateIn(layoutPathEdit, () => updatedList);
     }
     case 'REORDER_DIFF_ROW': {
       const newState = state
-        .updateIn([...layoutPath, dragRowIndex, 'rowContent'], list => {
+        .updateIn([...layoutPathEdit, dragRowIndex, 'rowContent'], list => {
           return list.remove(dragIndex);
         })
-        .updateIn([...layoutPath, hoverRowIndex, 'rowContent'], list => {
+        .updateIn([...layoutPathEdit, hoverRowIndex, 'rowContent'], list => {
           return list.insert(
             hoverIndex,
-            state.getIn([...layoutPath, dragRowIndex, 'rowContent', dragIndex])
+            state.getIn([
+              ...layoutPathEdit,
+              dragRowIndex,
+              'rowContent',
+              dragIndex,
+            ])
           );
         });
-      const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
+      const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
 
-      return state.updateIn(layoutPath, () => fromJS(updatedList));
+      return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
     }
     case 'REORDER_ROW': {
       const newState = state.updateIn(
-        [...layoutPath, dragRowIndex, 'rowContent'],
+        [...layoutPathEdit, dragRowIndex, 'rowContent'],
         list => {
           return list.delete(dragIndex).insert(hoverIndex, list.get(dragIndex));
         }
       );
 
-      const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
+      const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
 
-      return state.updateIn(layoutPath, () => fromJS(updatedList));
+      return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
     }
     case 'RESET':
       return state.update('modifiedData', () => state.get('initialData'));

packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js

@@ -57,8 +57,8 @@ const getSize = type => {
 };
 
 function settingViewModelReducer(state = initialState, action) {
-  const layoutPath = ['modifiedData', 'layouts', 'edit'];
+  const layoutPathEdit = ['modifiedData', 'layouts', 'edit'];
-  const relationPath = ['modifiedData', 'layouts', 'editRelations'];
+  const layoutPathRelations = ['modifiedData', 'layouts', 'editRelations'];
   const { dragIndex, hoverIndex, dragRowIndex, hoverRowIndex } = action;
   const getFieldType = name =>
     state.getIn(['modifiedData', 'schema', 'attributes', name, 'type']);
@@ -70,9 +70,7 @@ function settingViewModelReducer(state = initialState, action) {
       );
     case ADD_RELATION:
       return state
-        .updateIn(['modifiedData', 'layouts', 'editRelations'], list =>
+        .updateIn(layoutPathRelations, list => list.push(action.name))
-          list.push(action.name)
-        )
         .update('itemNameToSelect', () => action.name)
         .update('itemFormType', () => getFieldType(action.name));
     case GET_DATA_SUCCEEDED:
@@ -93,17 +91,20 @@ function settingViewModelReducer(state = initialState, action) {
           return action.overIndex;
         });
     case MOVE_RELATION: {
-      return state.updateIn(relationPath, list => {
+      return state.updateIn(layoutPathRelations, list => {
         return list
           .delete(dragIndex)
-          .insert(hoverIndex, state.getIn([...relationPath, dragIndex]));
+          .insert(hoverIndex, state.getIn([...layoutPathRelations, dragIndex]));
       });
     }
     case MOVE_ROW:
-      return state.updateIn(layoutPath, list => {
+      return state.updateIn(layoutPathEdit, list => {
         return list
           .delete(dragRowIndex)
-          .insert(hoverRowIndex, state.getIn([...layoutPath, dragRowIndex]));
+          .insert(
+            hoverRowIndex,
+            state.getIn([...layoutPathEdit, dragRowIndex])
+          );
       });
     case ON_ADD_DATA: {
       const size = getSize(
@@ -116,9 +117,9 @@ function settingViewModelReducer(state = initialState, action) {
         ])
       );
 
-      const listSize = state.getIn(layoutPath).size;
+      const listSize = state.getIn(layoutPathEdit).size;
       const newList = state
-        .getIn(layoutPath)
+        .getIn(layoutPathEdit)
         .updateIn([listSize - 1, 'rowContent'], list => {
           if (list) {
             return list.push({
@@ -132,7 +133,7 @@ function settingViewModelReducer(state = initialState, action) {
       const formattedList = formatLayout(newList.toJS());
 
       return state
-        .updateIn(layoutPath, () => fromJS(formattedList))
+        .updateIn(layoutPathEdit, () => fromJS(formattedList))
         .update('itemNameToSelect', () => action.name)
         .update('itemFormType', () => getFieldType(action.name));
     }
@@ -169,7 +170,11 @@ function settingViewModelReducer(state = initialState, action) {
         .update('modifiedData', () => state.get('initialData'))
         .update('listFieldToEditIndex', () => 0);
     case REMOVE_FIELD: {
-      const row = state.getIn([...layoutPath, action.rowIndex, 'rowContent']);
+      const row = state.getIn([
+        ...layoutPathEdit,
+        action.rowIndex,
+        'rowContent',
+      ]);
       let newState;
       let fieldName;
 
@@ -179,34 +184,30 @@ function settingViewModelReducer(state = initialState, action) {
         (row.size == 2 && row.getIn([1, 'name']) === '_TEMP_')
       ) {
         fieldName = state.getIn([
-          'modifiedData',
+          ...layoutPathEdit,
-          'layouts',
-          'edit',
           action.rowIndex,
           'rowContent',
           0,
           'name',
         ]);
-        newState = state.updateIn(layoutPath, list =>
+        newState = state.updateIn(layoutPathEdit, list =>
           list.delete(action.rowIndex)
         );
       } else {
         fieldName = state.getIn([
-          'modifiedData',
+          ...layoutPathEdit,
-          'layouts',
-          'edit',
           action.rowIndex,
           'rowContent',
           action.fieldIndex,
           'name',
         ]);
         newState = state.updateIn(
-          [...layoutPath, action.rowIndex, 'rowContent'],
+          [...layoutPathEdit, action.rowIndex, 'rowContent'],
           list => list.delete(action.fieldIndex)
         );
       }
       const updatedList = fromJS(
-        formatLayout(newState.getIn(layoutPath).toJS())
+        formatLayout(newState.getIn(layoutPathEdit).toJS())
       );
 
       if (state.get('itemNameToSelect') === fieldName) {
@@ -216,29 +217,35 @@ function settingViewModelReducer(state = initialState, action) {
           0,
           'name',
         ]);
-        const firstRelationFieldToSelect = state.getIn([...relationPath, 0]);
+        const firstRelationFieldToSelect = state.getIn([
+          ...layoutPathRelations,
+          0,
+        ]);
         const fieldToSelect =
           firstFieldEditToSelect || firstRelationFieldToSelect || '';
         const fieldToSelectType = getFieldType(fieldToSelect) || '';
 
         return state
-          .updateIn(layoutPath, () => updatedList)
+          .updateIn(layoutPathEdit, () => updatedList)
           .update('itemNameToSelect', () => fieldToSelect)
           .update('itemFormType', () => fieldToSelectType);
       }
 
-      return state.updateIn(layoutPath, () => updatedList);
+      return state.updateIn(layoutPathEdit, () => updatedList);
     }
     case REMOVE_RELATION: {
-      let newState = state.updateIn(relationPath, list =>
+      let newState = state.updateIn(layoutPathRelations, list =>
         list.delete(action.index)
       );
-      const fieldToDeleteName = state.getIn([...relationPath, action.index]);
+      const fieldToDeleteName = state.getIn([
+        ...layoutPathRelations,
+        action.index,
+      ]);
 
       if (state.get('itemNameToSelect') === fieldToDeleteName) {
-        const firstRelation = newState.getIn([...relationPath, 0]);
+        const firstRelation = newState.getIn([...layoutPathRelations, 0]);
         const firstEditField = newState.getIn([
-          ...layoutPath,
+          ...layoutPathEdit,
           '0',
           'rowContent',
           '0',
@@ -256,31 +263,36 @@ function settingViewModelReducer(state = initialState, action) {
     }
     case REORDER_DIFF_ROW: {
       const newState = state
-        .updateIn([...layoutPath, dragRowIndex, 'rowContent'], list => {
+        .updateIn([...layoutPathEdit, dragRowIndex, 'rowContent'], list => {
           return list.remove(dragIndex);
         })
-        .updateIn([...layoutPath, hoverRowIndex, 'rowContent'], list => {
+        .updateIn([...layoutPathEdit, hoverRowIndex, 'rowContent'], list => {
           return list.insert(
             hoverIndex,
-            state.getIn([...layoutPath, dragRowIndex, 'rowContent', dragIndex])
+            state.getIn([
+              ...layoutPathEdit,
+              dragRowIndex,
+              'rowContent',
+              dragIndex,
+            ])
           );
         });
 
-      const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
+      const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
 
-      return state.updateIn(layoutPath, () => fromJS(updatedList));
+      return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
     }
     case REORDER_ROW: {
       const newState = state.updateIn(
-        [...layoutPath, dragRowIndex, 'rowContent'],
+        [...layoutPathEdit, dragRowIndex, 'rowContent'],
         list => {
           return list.delete(dragIndex).insert(hoverIndex, list.get(dragIndex));
         }
       );
 
-      const updatedList = formatLayout(newState.getIn(layoutPath).toJS());
+      const updatedList = formatLayout(newState.getIn(layoutPathEdit).toJS());
 
-      return state.updateIn(layoutPath, () => fromJS(updatedList));
+      return state.updateIn(layoutPathEdit, () => fromJS(updatedList));
     }
     case RESET_PROPS:
       return initialState;