ListView UI ip

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

@@ -94,7 +94,7 @@ const TableRow = styled.tr`
 
 const Icon = styled.i`
   position: absolute;
-  top: 3px;
+  top: 6px;
   right: -12px;
 
   ${({ isAsc }) => {

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

@@ -70,7 +70,7 @@ const Toggle = styled(DropdownToggle)`
         content: '\f0d7';
         display: inline-block;
         margin-top: -1px;
-        margin-left: 10px;
+        margin-left: 11px;
         font-family: FontAwesome;
         color: #323740;
         transition: transform 0.3s ease-out;

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

@@ -16,7 +16,7 @@ import RoundCTA from './RoundCTA';
 import Wrapper from './Wrapper';
 
 const DynamicZone = ({ max, min, name }) => {
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
   const {
     addComponentToDynamicZone,
     formErrors,
@@ -67,8 +67,12 @@ const DynamicZone = ({ max, min, name }) => {
   const hasError = dynamicZoneErrors.length > 0;
   const hasMinError =
     dynamicZoneErrors.length > 0 &&
-    get(dynamicZoneErrors, [0, 'id'], '').includes('min') &&
-    !isOpen;
+    get(dynamicZoneErrors, [0, 'id'], '').includes('min');
+
+  const hasRequiredError = hasError && !hasMinError;
+
+  console.log('error', name, hasError, dynamicZoneErrors);
+  console.log('min', hasMinError);
 
   return (
     <>
@@ -137,14 +141,14 @@ const DynamicZone = ({ max, min, name }) => {
             }
           }}
         />
-
+        {hasRequiredError && <div>Component is required</div>}
+        {hasMinError && <div> {missingComponentNumber} missing components</div>}
         <div className="info">
           <FormattedMessage
             id={`${pluginId}.components.DynamicZone.add-compo`}
             values={{ componentName: name }}
           />
         </div>
-        {hasMinError && <div> {missingComponentNumber} missing components</div>}
         <ComponentsPicker isOpen={isOpen}>
           <div>
             <p className="componentPickerTitle">

packages/strapi-plugin-content-manager/admin/src/containers/EditViewDataManagerProvider/utils/createDefaultForm.js

@@ -48,6 +48,13 @@ const createDefaultForm = (attributes, allComponentsSchema) => {
       }
     }
 
+    if (type === 'dynamiczone') {
+      console.log('dynamic', attribute, acc);
+      if (required === true) {
+        acc[current] = [];
+      }
+    }
+
     return acc;
   }, {});
 };

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

@@ -127,7 +127,13 @@ function ListView({
       Object.keys(getMetaDatas())
         .filter(
           key =>
-            !['json', 'component', 'relation', 'richtext'].includes(
+            ![
+              'json',
+              'component',
+              'dynamiczone',
+              'relation',
+              'richtext',
+            ].includes(
               get(
                 layouts,
                 [...contentTypePath, 'schema', 'attributes', key, 'type'],
@@ -142,6 +148,7 @@ function ListView({
       ['label', 'name']
     );
   };
+
   const getFirstSortableElement = (name = '') => {
     return get(
       getListLayout().filter(h => {