New design edit view group field

examples/getstarted/api/article/models/Article.settings.json

@@ -22,7 +22,8 @@
       "type": "text"
     },
     "published": {
-      "type": "boolean"
+      "type": "boolean",
+      "default": true
     },
     "json": {
       "type": "json"
@@ -39,6 +40,10 @@
     },
     "content": {
       "type": "richtext"
+    },
+    "tags": {
+      "collection": "tag",
+      "via": "articles"
     }
   }
 }

examples/getstarted/api/recipe/config/routes.json

@@ -0,0 +1,52 @@
+{
+  "routes": [
+    {
+      "method": "GET",
+      "path": "/recipes",
+      "handler": "Recipe.find",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "GET",
+      "path": "/recipes/count",
+      "handler": "Recipe.count",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "GET",
+      "path": "/recipes/:id",
+      "handler": "Recipe.findOne",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "POST",
+      "path": "/recipes",
+      "handler": "Recipe.create",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "PUT",
+      "path": "/recipes/:id",
+      "handler": "Recipe.update",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "DELETE",
+      "path": "/recipes/:id",
+      "handler": "Recipe.delete",
+      "config": {
+        "policies": []
+      }
+    }
+  ]
+}

examples/getstarted/api/recipe/controllers/Recipe.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/**
+ * Read the documentation (https://strapi.io/documentation/3.0.0-beta.x/guides/controllers.html#core-controllers)
+ * to customize this controller
+ */
+
+module.exports = {};

examples/getstarted/api/recipe/models/Recipe.js

@@ -0,0 +1,44 @@
+'use strict';
+
+/**
+ * Lifecycle callbacks for the `Recipe` model.
+ */
+
+module.exports = {
+  // Before saving a value.
+  // Fired before an `insert` or `update` query.
+  // beforeSave: async (model, attrs, options) => {},
+  // After saving a value.
+  // Fired after an `insert` or `update` query.
+  // afterSave: async (model, response, options) => {},
+  // Before fetching a value.
+  // Fired before a `fetch` operation.
+  // beforeFetch: async (model, columns, options) => {},
+  // After fetching a value.
+  // Fired after a `fetch` operation.
+  // afterFetch: async (model, response, options) => {},
+  // Before fetching all values.
+  // Fired before a `fetchAll` operation.
+  // beforeFetchAll: async (model, columns, options) => {},
+  // After fetching all values.
+  // Fired after a `fetchAll` operation.
+  // afterFetchAll: async (model, response, options) => {},
+  // Before creating a value.
+  // Fired before an `insert` query.
+  // beforeCreate: async (model, attrs, options) => {},
+  // After creating a value.
+  // Fired after an `insert` query.
+  // afterCreate: async (model, attrs, options) => {},
+  // Before updating a value.
+  // Fired before an `update` query.
+  // beforeUpdate: async (model, attrs, options) => {},
+  // After updating a value.
+  // Fired after an `update` query.
+  // afterUpdate: async (model, attrs, options) => {},
+  // Before destroying a value.
+  // Fired before a `delete` query.
+  // beforeDestroy: async (model, attrs, options) => {},
+  // After destroying a value.
+  // Fired after a `delete` query.
+  // afterDestroy: async (model, attrs, options) => {}
+};

examples/getstarted/api/recipe/models/Recipe.settings.json

@@ -0,0 +1,40 @@
+{
+  "connection": "default",
+  "collectionName": "recipes",
+  "info": {
+    "name": "recipe",
+    "description": ""
+  },
+  "options": {
+    "increments": true,
+    "timestamps": [
+      "created_at",
+      "updated_at"
+    ],
+    "comment": ""
+  },
+  "attributes": {
+    "name": {
+      "type": "string"
+    },
+    "description": {
+      "type": "text"
+    },
+    "ingredients": {
+      "group": "ingredient",
+      "required": true,
+      "repeatable": true,
+      "type": "group"
+    },
+    "tools": {
+      "group": "ingredient",
+      "required": true,
+      "repeatable": true,
+      "type": "group"
+    },
+    "mainIngredient": {
+      "group": "ingredient",
+      "type": "group"
+    }
+  }
+}

examples/getstarted/api/recipe/services/Recipe.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/**
+ * Read the documentation (https://strapi.io/documentation/3.0.0-beta.x/guides/services.html#core-services)
+ * to customize this service
+ */
+
+module.exports = {};

examples/getstarted/api/tag/config/routes.json

@@ -0,0 +1,52 @@
+{
+  "routes": [
+    {
+      "method": "GET",
+      "path": "/tags",
+      "handler": "Tag.find",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "GET",
+      "path": "/tags/count",
+      "handler": "Tag.count",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "GET",
+      "path": "/tags/:id",
+      "handler": "Tag.findOne",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "POST",
+      "path": "/tags",
+      "handler": "Tag.create",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "PUT",
+      "path": "/tags/:id",
+      "handler": "Tag.update",
+      "config": {
+        "policies": []
+      }
+    },
+    {
+      "method": "DELETE",
+      "path": "/tags/:id",
+      "handler": "Tag.delete",
+      "config": {
+        "policies": []
+      }
+    }
+  ]
+}

examples/getstarted/api/tag/controllers/Tag.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/**
+ * Read the documentation (https://strapi.io/documentation/3.0.0-beta.x/guides/controllers.html#core-controllers)
+ * to customize this controller
+ */
+
+module.exports = {};

examples/getstarted/api/tag/models/Tag.js

@@ -0,0 +1,44 @@
+'use strict';
+
+/**
+ * Lifecycle callbacks for the `Tag` model.
+ */
+
+module.exports = {
+  // Before saving a value.
+  // Fired before an `insert` or `update` query.
+  // beforeSave: async (model, attrs, options) => {},
+  // After saving a value.
+  // Fired after an `insert` or `update` query.
+  // afterSave: async (model, response, options) => {},
+  // Before fetching a value.
+  // Fired before a `fetch` operation.
+  // beforeFetch: async (model, columns, options) => {},
+  // After fetching a value.
+  // Fired after a `fetch` operation.
+  // afterFetch: async (model, response, options) => {},
+  // Before fetching all values.
+  // Fired before a `fetchAll` operation.
+  // beforeFetchAll: async (model, columns, options) => {},
+  // After fetching all values.
+  // Fired after a `fetchAll` operation.
+  // afterFetchAll: async (model, response, options) => {},
+  // Before creating a value.
+  // Fired before an `insert` query.
+  // beforeCreate: async (model, attrs, options) => {},
+  // After creating a value.
+  // Fired after an `insert` query.
+  // afterCreate: async (model, attrs, options) => {},
+  // Before updating a value.
+  // Fired before an `update` query.
+  // beforeUpdate: async (model, attrs, options) => {},
+  // After updating a value.
+  // Fired after an `update` query.
+  // afterUpdate: async (model, attrs, options) => {},
+  // Before destroying a value.
+  // Fired before a `delete` query.
+  // beforeDestroy: async (model, attrs, options) => {},
+  // After destroying a value.
+  // Fired after a `delete` query.
+  // afterDestroy: async (model, attrs, options) => {}
+};

examples/getstarted/api/tag/models/Tag.settings.json

@@ -0,0 +1,23 @@
+{
+  "connection": "default",
+  "collectionName": "tags",
+  "info": {
+    "name": "tag",
+    "description": ""
+  },
+  "options": {
+    "increments": true,
+    "timestamps": true,
+    "comment": ""
+  },
+  "attributes": {
+    "name": {
+      "type": "string"
+    },
+    "articles": {
+      "collection": "article",
+      "dominant": true,
+      "via": "tags"
+    }
+  }
+}

examples/getstarted/api/tag/services/Tag.js

@@ -0,0 +1,8 @@
+'use strict';
+
+/**
+ * Read the documentation (https://strapi.io/documentation/3.0.0-beta.x/guides/services.html#core-services)
+ * to customize this service
+ */
+
+module.exports = {};

examples/getstarted/groups/ingredient.json

@@ -0,0 +1,26 @@
+{
+  "info": {
+    "name": "ingredient",
+    "description": ""
+  },
+  "connection": "default",
+  "collectionName": "groups_ingredients",
+  "attributes": {
+    "name": {
+      "type": "string",
+      "required": true
+    },
+    "quantity": {
+      "type": "integer"
+    },
+    "pictures": {
+      "collection": "file",
+      "via": "related",
+      "plugin": "upload",
+      "required": false
+    },
+    "price": {
+      "type": "decimal"
+    }
+  }
+}

examples/getstarted/groups/tool.json

@@ -0,0 +1,13 @@
+{
+  "info": {
+    "name": "tool",
+    "description": ""
+  },
+  "connection": "default",
+  "collectionName": "groups_tools",
+  "attributes": {
+    "name": {
+      "type": "string"
+    }
+  }
+}

packages/strapi-plugin-content-manager/admin/src/assets/images/grab_icon_blue.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="8px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
+    <title>Icon grab Copy</title>
+    <desc>Created with Sketch.</desc>
+    <g id="CM" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="CM-/-018---Content-manager-MULTIPLE-GROUPS-Copy-3" transform="translate(-1002.000000, -639.000000)" fill="#AED4FB">
+            <g id="Ingredients" transform="translate(271.000000, 576.000000)">
+                <g id="Flour-Copy" transform="translate(20.000000, 50.000000)">
+                    <g id="Dropdown-OPEN">
+                        <g id="Icon-grab-Copy" transform="translate(711.790795, 13.000000)">
+                            <rect id="Rectangle-4" x="0" y="0" width="2.0167364" height="2"></rect>
+                            <rect id="Rectangle-4" x="3.0251046" y="0" width="2.0167364" height="2"></rect>
+                            <rect id="Rectangle-4" x="0" y="3" width="2.0167364" height="2"></rect>
+                            <rect id="Rectangle-4" x="3.0251046" y="3" width="2.0167364" height="2"></rect>
+                            <rect id="Rectangle-4" x="0" y="6" width="2.0167364" height="2"></rect>
+                            <rect id="Rectangle-4" x="3.0251046" y="6" width="2.0167364" height="2"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

packages/strapi-plugin-content-manager/admin/src/assets/images/grab_icon_error.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
+    <title>Icon grab</title>
+    <desc>Created with Sketch.</desc>
+    <g id="CM" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="CM-/-018---Content-manager-MULTIPLE-GROUPS-Copy-3" transform="translate(-1003.000000, -1134.000000)" fill="#FAA684">
+            <g id="Ingredients" transform="translate(271.000000, 576.000000)">
+                <g id="Milk" transform="translate(20.000000, 545.000000)">
+                    <g id="Icon-grab" transform="translate(712.000000, 13.222222)">
+                        <rect id="Rectangle-4" x="0" y="0" width="2" height="1.88888889"></rect>
+                        <rect id="Rectangle-4" x="3" y="0" width="2" height="1.88888889"></rect>
+                        <rect id="Rectangle-4" x="0" y="2.83333333" width="2" height="1.88888889"></rect>
+                        <rect id="Rectangle-4" x="3" y="2.83333333" width="2" height="1.88888889"></rect>
+                        <rect id="Rectangle-4" x="0" y="5.66666667" width="2" height="1.88888889"></rect>
+                        <rect id="Rectangle-4" x="3" y="5.66666667" width="2" height="1.88888889"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -6,18 +6,27 @@ import { DragSource, DropTarget } from 'react-dnd';
 import { Collapse } from 'reactstrap';
 
 import pluginId from '../../pluginId';
-
 import ItemTypes from '../../utils/ItemTypes';
 import Grab from '../../assets/images/grab_icon.svg';
 import Logo from '../../assets/images/caret_top.svg';
+import GrabBlue from '../../assets/images/grab_icon_blue.svg';
+import GrabError from '../../assets/images/grab_icon_error.svg';
 
-import { Flex, GroupCollapseWrapper, ImgWrapper } from './components';
+import {
+  Flex,
+  FormWrapper,
+  GroupCollapseWrapper,
+  ImgWrapper,
+} from './components';
 import Form from './Form';
 
 function GroupCollapse({
   connectDragSource,
   connectDropTarget,
+  doesPreviousFieldContainErrorsAndIsOpen,
+  hasErrors,
   isDragging,
+  isFirst,
   isOpen,
   layout,
   modifiedData,
@@ -43,12 +52,30 @@ function GroupCollapse({
   connectDragSource(ref);
   connectDropTarget(ref);
 
+  // TODO change when the error caret top is available
+  const logo = hasErrors ? Logo : Logo;
+  let grab = isOpen ? GrabBlue : Grab;
+
+  if (hasErrors) {
+    grab = GrabError;
+  }
+
   return (
     <Fragment>
-      <GroupCollapseWrapper onClick={onClick} ref={ref} style={{ opacity }}>
-        <Flex style={{ fontWeight: 500 }}>
-          <ImgWrapper isOpen={isOpen}>
-            <img src={Logo} alt="logo" />
+      <GroupCollapseWrapper
+        doesPreviousFieldContainErrorsAndIsOpen={
+          doesPreviousFieldContainErrorsAndIsOpen
+        }
+        hasErrors={hasErrors}
+        isFirst={isFirst}
+        isOpen={isOpen}
+        onClick={onClick}
+        ref={ref}
+        style={{ opacity }}
+      >
+        <Flex>
+          <ImgWrapper hasErrors={hasErrors} isOpen={isOpen}>
+            <img src={logo} alt="logo" />
           </ImgWrapper>
           <FormattedMessage
             id={`${pluginId}.containers.Edit.pluginHeader.title.new`}
@@ -66,17 +93,17 @@ function GroupCollapse({
           >
             <i className="fa fa-trash" />
           </button>
-          <button type="button" style={{ lineHeight: '32px' }}>
+          <button type="button" style={{ lineHeight: '36px' }}>
             <img
-              src={Grab}
+              src={grab}
               alt="grab icon"
               style={{ verticalAlign: 'unset' }}
             />
           </button>
         </Flex>
       </GroupCollapseWrapper>
-      <Collapse isOpen={isOpen}>
-        <div style={{ paddingTop: '25px' }}>
+      <Collapse isOpen={isOpen} style={{ backgroundColor: '#f5f5f5' }}>
+        <FormWrapper hasErrors={hasErrors} isOpen={isOpen}>
           {fields.map((fieldRow, key) => {
             return (
               <div className="row" key={key}>
@@ -97,7 +124,7 @@ function GroupCollapse({
               </div>
             );
           })}
-        </div>
+        </FormWrapper>
       </Collapse>
     </Fragment>
   );
@@ -105,8 +132,11 @@ function GroupCollapse({
 
 GroupCollapse.defaultProps = {
   addRelation: () => {},
+  doesPreviousFieldContainErrorsAndIsOpen: false,
+  hasErrors: false,
   isCreating: true,
   isDragging: false,
+  isFirst: false,
   isOpen: false,
   layout: {},
   move: () => {},
@@ -116,7 +146,10 @@ GroupCollapse.defaultProps = {
 GroupCollapse.propTypes = {
   connectDragSource: PropTypes.func.isRequired,
   connectDropTarget: PropTypes.func.isRequired,
+  doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
+  hasErrors: PropTypes.bool,
   isDragging: PropTypes.bool,
+  isFirst: PropTypes.bool,
   isOpen: PropTypes.bool,
   layout: PropTypes.object,
   modifiedData: PropTypes.object,

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

@@ -1,19 +1,30 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const Button = styled.div`
   width: 100%;
-  height: 34px;
+  height: 37px;
+  margin-bottom: 27px;
   text-align: center;
-  background-color: #fafafb;
-  border-radius: 2px;
+  border: 1px solid #e3e9f3;
+  border-top: 1px solid
+    ${({ doesPreviousFieldContainErrorsAndIsClosed }) =>
+      doesPreviousFieldContainErrorsAndIsClosed ? '#FFA784' : '#e3e9f3'};
+
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
+  ${({ withBorderRadius }) => {
+    if (withBorderRadius) {
+      return css`
+        border-radius: 2px;
+      `;
+    }
+  }}
 
-  color: #333740;
+  color: #007eff;
   font-size: 12px;
   font-weight: 700;
   -webkit-font-smoothing: antialiased;
-  line-height: 35px;
+  line-height: 37px;
   cursor: pointer;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -31,14 +42,70 @@ const Flex = styled.div`
 `;
 
 const GroupCollapseWrapper = styled(Flex)`
-  height: 34px;
-  margin-bottom: 2px;
-  padding: 0 20px;
+  height: 36px;
+  padding: 0 15px;
   justify-content: space-between;
-  line-height: 34px;
-  background-color: #ffffff;
+  border: 1px solid ${({ hasErrors, isOpen }) => {
+    if (hasErrors) {
+      return '#FFA784';
+    } else if (isOpen) {
+      return '#AED4FB';
+    } else {
+      return '#e3e9f3';
+    }
+  }}
+
+  ${({ doesPreviousFieldContainErrorsAndIsOpen }) => {
+    if (doesPreviousFieldContainErrorsAndIsOpen) {
+      return css`
+        border-top: 1px solid #ffa784;
+      `;
+    }
+  }}
+
+
+
+  ${({ isFirst }) => {
+    if (isFirst) {
+      return css`
+        border-top-right-radius: 2px;
+        border-top-left-radius: 2px;
+      `;
+    }
+  }}
+  border-bottom: 0;
+  line-height: 36px;
   font-size: 13px;
-  border-radius: 2px;
+  font-weight: 500;
+
+  background-color: ${({ hasErrors, isOpen }) => {
+    if (hasErrors && isOpen) {
+      return '#FFE9E0';
+    } else if (isOpen) {
+      return '#E6F0FB';
+    } else {
+      return '#ffffff';
+    }
+  }}
+
+  ${({ hasErrors, isOpen }) => {
+    if (hasErrors) {
+      return css`
+        color: #f64d0a;
+        font-weight: 600;
+      `;
+    }
+
+    if (isOpen) {
+      return css`
+        color: #007eff;
+        font-weight: 600;
+      `;
+    }
+  }}
+
+
+
   button,
   i,
   img {
@@ -47,6 +114,7 @@ const GroupCollapseWrapper = styled(Flex)`
       outline: 0;
     }
   }
+  webkit-font-smoothing: antialiased;
 `;
 
 const ImgWrapper = styled.div`
@@ -55,11 +123,35 @@ const ImgWrapper = styled.div`
   margin: auto;
   margin-right: 19px;
   border-radius: 50%;
-  background-color: #e3e9f3;
+  background-color: ${({ hasErrors, isOpen }) => {
+    if (hasErrors) {
+      return '#FAA684';
+    } else if (isOpen) {
+      return '#AED4FB';
+    } else {
+      return '#e3e9f3';
+    }
+  }}
   text-align: center;
   line-height: 21px;
 
   ${({ isOpen }) => !isOpen && 'transform: rotate(180deg)'}
 `;
 
-export { Button, Flex, GroupCollapseWrapper, ImgWrapper };
+const FormWrapper = styled.div`
+  padding-top: 27px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-top: 1px solid
+    ${({ hasErrors, isOpen }) => {
+      if (hasErrors) {
+        return '#ffa784';
+      } else if (isOpen) {
+        return '#AED4FB';
+      } else {
+        return '#e3e9f3';
+      }
+    }};
+`;
+
+export { Button, Flex, FormWrapper, GroupCollapseWrapper, ImgWrapper };

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

@@ -13,6 +13,7 @@ import reducer, { initialState } from './reducer';
 
 function Group({
   addField,
+  groupErrorKeys,
   isRepeatable,
   label,
   layout,
@@ -71,12 +72,18 @@ function Group({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [didCheckErrors]);
 
+  const groupValueLength = groupValue.length;
+
   return (
     <>
       <div className="row">
         <div
           className="col-12"
-          style={{ paddingTop: 0, marginTop: '-2px', paddingBottom: 15 }}
+          style={{
+            paddingTop: 0,
+            marginTop: '-2px',
+            paddingBottom: isRepeatable ? 7 : 14,
+          }}
         >
           <span
             style={{
@@ -84,127 +91,141 @@ function Group({
               fontWeight: 500,
             }}
           >
-            {label}
+            {label}&nbsp;
+            {isRepeatable && `(${groupValueLength})`}
           </span>
         </div>
       </div>
-      <div
-        className="row"
-        style={{
-          marginLeft: '-10px',
-          marginRight: '-10px',
-          marginBottom: '18px',
-          backgroundColor: '#f5f5f5',
-          padding: '0 20px 10px 10px',
-          paddingTop: isRepeatable ? '13px' : '20px',
-        }}
-      >
-        {!isRepeatable ? (
-          <div className="col-12">
-            {fields.map((fieldRow, key) => {
-              return (
-                <div className="row" key={key}>
-                  {fieldRow.map(field => {
-                    const keys = `${name}.${field.name}`;
+      {!isRepeatable ? (
+        <div
+          style={{
+            margin: '0 10px',
+            padding: '0 15px',
+            paddingTop: 21,
+            backgroundColor: '#f5f5f5',
+            marginBottom: 18,
+          }}
+        >
+          {fields.map((fieldRow, key) => {
+            return (
+              <div className="row" key={key}>
+                {fieldRow.map(field => {
+                  const keys = `${name}.${field.name}`;
 
-                    return (
-                      <Form
-                        key={keys}
-                        modifiedData={modifiedData}
-                        keys={keys}
-                        fieldName={field.name}
-                        layout={layout}
-                        onChange={onChange}
-                      />
-                    );
-                  })}
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <div className="col-12">
-            <div className="row">
-              {groupValue.map((field, index) => {
-                return (
-                  <div className="col-12" key={field._temp__id}>
-                    <GroupCollapse
-                      collapseAll={() => {
-                        dispatch({
-                          type: 'COLLAPSE_ALL',
-                        });
-                      }}
-                      onClick={() => {
-                        dispatch({
-                          type: 'TOGGLE_COLLAPSE',
-                          index,
-                        });
-                      }}
-                      findField={findField}
-                      groupName={name}
-                      isOpen={collapses[index].isOpen}
-                      id={field._temp__id}
-                      layout={layout}
+                  return (
+                    <Form
+                      key={keys}
                       modifiedData={modifiedData}
-                      move={move}
-                      name={`${name}.${index}`}
+                      keys={keys}
+                      fieldName={field.name}
+                      layout={layout}
                       onChange={onChange}
-                      removeField={e => {
-                        e.stopPropagation();
-
-                        if (groupValue.length - 1 < min) {
-                          strapi.notification.info(
-                            `${pluginId}.components.Group.notification.info.minimum-requirement`
-                          );
-                        }
-
-                        const shouldAddEmptyField = groupValue.length - 1 < min;
-
-                        dispatch({
-                          type: 'REMOVE_COLLAPSE',
-                          index,
-                          shouldAddEmptyField,
-                        });
-                        removeField(`${name}.${index}`, shouldAddEmptyField);
-                      }}
                     />
-                  </div>
-                );
-              })}
-
-              <div className="col-12">
-                <Button
-                  onClick={() => {
-                    if (groupValue.length < max) {
-                      addField(name);
-
-                      dispatch({
-                        type: 'ADD_NEW_FIELD',
-                      });
-                      return;
-                    }
-
-                    strapi.notification.info(
-                      `${pluginId}.components.Group.notification.info.maximum-requirement`
-                    );
-                  }}
-                >
-                  <i className="fa fa-plus" />
-                  <FormattedMessage
-                    id={`${pluginId}.containers.EditView.Group.add.new`}
-                  />
-                </Button>
+                  );
+                })}
               </div>
-            </div>
-          </div>
-        )}
-      </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div
+          style={{
+            margin: '0 10px',
+          }}
+        >
+          {groupValue.map((field, index) => {
+            const groupFieldName = `${name}.${index}`;
+            const doesPreviousFieldContainErrorsAndIsOpen =
+              groupErrorKeys.includes(`${name}.${index - 1}`) &&
+              index !== 0 &&
+              collapses[index - 1].isOpen === false;
+            const hasErrors = groupErrorKeys.includes(groupFieldName);
+
+            return (
+              <GroupCollapse
+                key={field._temp__id}
+                collapseAll={() => {
+                  dispatch({
+                    type: 'COLLAPSE_ALL',
+                  });
+                }}
+                doesPreviousFieldContainErrorsAndIsOpen={
+                  doesPreviousFieldContainErrorsAndIsOpen
+                }
+                onClick={() => {
+                  dispatch({
+                    type: 'TOGGLE_COLLAPSE',
+                    index,
+                  });
+                }}
+                findField={findField}
+                groupName={name}
+                hasErrors={hasErrors}
+                isFirst={index === 0}
+                isOpen={collapses[index].isOpen}
+                id={field._temp__id}
+                layout={layout}
+                modifiedData={modifiedData}
+                move={move}
+                name={groupFieldName}
+                onChange={onChange}
+                removeField={e => {
+                  e.stopPropagation();
+
+                  if (groupValue.length - 1 < min) {
+                    strapi.notification.info(
+                      `${pluginId}.components.Group.notification.info.minimum-requirement`
+                    );
+                  }
+
+                  const shouldAddEmptyField = groupValue.length - 1 < min;
+
+                  dispatch({
+                    type: 'REMOVE_COLLAPSE',
+                    index,
+                    shouldAddEmptyField,
+                  });
+                  removeField(`${name}.${index}`, shouldAddEmptyField);
+                }}
+              />
+            );
+          })}
+          <Button
+            doesPreviousFieldContainErrorsAndIsClosed={
+              groupValueLength > 0 &&
+              groupErrorKeys.includes(`${name}.${groupValueLength - 1}`) &&
+              collapses[groupValueLength - 1].isOpen === false
+            }
+            onClick={() => {
+              if (groupValue.length < max) {
+                addField(name);
+
+                dispatch({
+                  type: 'ADD_NEW_FIELD',
+                });
+                return;
+              }
+
+              strapi.notification.info(
+                `${pluginId}.components.Group.notification.info.maximum-requirement`
+              );
+            }}
+            withBorderRadius={groupValue.length === 0}
+          >
+            <i className="fa fa-plus" />
+            <FormattedMessage
+              id={`${pluginId}.containers.EditView.Group.add.new`}
+            />
+          </Button>
+        </div>
+      )}
     </>
   );
 }
 
 Group.defaultProps = {
   addRelation: () => {},
+  groupErrorKeys: [],
   groupValue: {},
   label: '',
   layout: {},
@@ -216,6 +237,7 @@ Group.defaultProps = {
 Group.propTypes = {
   addField: PropTypes.func.isRequired,
   addRelation: PropTypes.func,
+  groupErrorKeys: PropTypes.array,
   groupValue: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   isRepeatable: PropTypes.bool.isRequired,
   label: PropTypes.string,

packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/styles.scss

@@ -31,7 +31,7 @@
   min-height: 294px;
   max-height: 555px;
   padding: 20px 20px 0 20px;
-  font-size: 16px;
+  font-size: 13px;
   background-color: #fff;
   line-height: 18px !important;
   cursor: text;

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

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 const SubWrapper = styled.div`
   background: #ffffff;
+  // background: red;
   border-radius: 2px;
   box-shadow: 0 2px 4px #e3e9f3;
 `;

packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js

@@ -459,6 +459,15 @@ function EditView({
                   );
 
                   if (fieldsRow.length === 1 && group.type === 'group') {
+                    const groupErrorKeys = Object.keys(errors)
+                      .filter(errorKey => errorKey.includes(name))
+                      .map(errorKey =>
+                        errorKey
+                          .split('.')
+                          .slice(0, 2)
+                          .join('.')
+                      );
+
                     return (
                       <Group
                         {...group}
@@ -469,6 +478,7 @@ function EditView({
                             keys: keys.split('.'),
                           });
                         }}
+                        groupErrorKeys={groupErrorKeys}
                         groupValue={groupValue}
                         key={key}
                         isRepeatable={group.repeatable || false}

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

@@ -243,7 +243,7 @@ function SettingViewModel({
         );
       });
 
-      return ['id', ...options];
+      return options;
     }
 
     return input.selectOptions;