update groups main infos on change

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

@@ -7,7 +7,10 @@
   },
   "options": {
     "increments": true,
-    "timestamps": ["created_at", "updated_at"],
+    "timestamps": [
+      "created_at",
+      "updated_at"
+    ],
     "comment": ""
   },
   "attributes": {
@@ -43,7 +46,10 @@
     },
     "enum": {
       "type": "enumeration",
-      "enum": ["morning,", "noon"]
+      "enum": [
+        "morning,",
+        "noon"
+      ]
     },
     "bool": {
       "type": "boolean"
@@ -92,4 +98,4 @@
       "type": "group"
     }
   }
-}
+}

examples/getstarted/groups/ingredients.json

@@ -1,6 +1,10 @@
 {
-  "collectionName": "group_ingredients",
+  "info": {
+    "name": "Ingredients",
+    "description": ""
+  },
   "connection": "default",
+  "collectionName": "group_ingredients",
   "attributes": {
     "name": {
       "type": "string",
@@ -20,7 +24,8 @@
     "pic": {
       "model": "file",
       "via": "related",
-      "plugin": "upload"
+      "plugin": "upload",
+      "required": false
     },
     "article": {
       "model": "article"

packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js

@@ -72,6 +72,7 @@ import {
   SUBMIT_TEMP_GROUP,
   SUBMIT_TEMP_GROUP_SUCCEEDED,
   UPDATE_TEMP_CONTENT_TYPE,
+  UPDATE_TEMP_GROUP,
   ON_CHANGE_EXISTING_CONTENT_TYPE_MAIN_INFOS,
   ON_CHANGE_EXISTING_GROUP_MAIN_INFOS,
 } from './constants';
@@ -671,6 +672,12 @@ export function updateTempContentType() {
   };
 }
 
+export function updateTempGroup() {
+  return {
+    type: UPDATE_TEMP_GROUP,
+  };
+}
+
 // utils
 export const buildModelAttributes = attributes => {
   const formattedAttributes = attributes.reduce((acc, current) => {

packages/strapi-plugin-content-type-builder/admin/src/containers/App/constants.js

@@ -113,3 +113,4 @@ export const SUBMIT_TEMP_GROUP_SUCCEEDED =
   'ContentTypeBuilder/App/SUBMIT_TEMP_GROUP_SUCCEEDED';
 export const UPDATE_TEMP_CONTENT_TYPE =
   'ContentTypeBuilder/App/UPDATE_TEMP_CONTENT_TYPE';
+export const UPDATE_TEMP_GROUP = 'ContentTypeBuilder/App/UPDATE_TEMP_GROUP';

packages/strapi-plugin-content-type-builder/admin/src/containers/App/index.js

@@ -50,6 +50,7 @@ import {
   setTemporaryAttribute,
   setTemporaryAttributeRelation,
   updateTempContentType,
+  updateTempGroup,
 } from './actions';
 
 import reducer from './reducer';
@@ -204,6 +205,7 @@ export class App extends React.Component {
       resetExistingGroupMainInfos,
       resetNewContentTypeMainInfos,
       updateTempContentType,
+      updateTempGroup,
     } = this.props;
 
     if (isLoading) {
@@ -248,7 +250,7 @@ export class App extends React.Component {
         push,
         resetExistingFeatureMainInfos: resetExistingGroupMainInfos,
         resetNewFeatureMainInfos: () => {},
-        updateTempFeature: () => {},
+        updateTempFeature: updateTempGroup,
       },
     ];
 
@@ -310,6 +312,7 @@ App.propTypes = {
   resetNewContentTypeMainInfos: PropTypes.func.isRequired,
   shouldRefetchData: PropTypes.bool,
   updateTempContentType: PropTypes.func.isRequired,
+  updateTempGroup: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = makeSelectApp();
@@ -343,6 +346,7 @@ export function mapDispatchToProps(dispatch) {
       setTemporaryAttribute,
       setTemporaryAttributeRelation,
       updateTempContentType,
+      updateTempGroup,
     },
     dispatch
   );

packages/strapi-plugin-content-type-builder/admin/src/containers/App/reducer.js

@@ -60,6 +60,7 @@ import {
   SUBMIT_TEMP_CONTENT_TYPE_SUCCEEDED,
   SUBMIT_TEMP_GROUP_SUCCEEDED,
   UPDATE_TEMP_CONTENT_TYPE,
+  UPDATE_TEMP_GROUP,
 } from './constants';
 
 export const initialState = fromJS({
@@ -909,6 +910,17 @@ function appReducer(state = initialState, action) {
           () => state.getIn(['newContentType', 'name'])
         )
         .update('newContentTypeClone', () => state.get('newContentType'));
+    case UPDATE_TEMP_GROUP:
+      return state
+        .updateIn(
+          [
+            'groups',
+            state.get('groups').findIndex(group => group.isTemporary === true),
+            'name',
+          ],
+          () => state.getIn(['newGroup', 'name'])
+        )
+        .update('newGroupClone', () => state.get('newGroup'));
     default:
       return state;
   }

packages/strapi-plugin-content-type-builder/admin/src/containers/App/tests/index.test.js

@@ -95,6 +95,7 @@ describe('<App />', () => {
       resetExistingGroupMainInfos: jest.fn(),
       resetNewContentTypeMainInfos: jest.fn(),
       updateTempContentType: jest.fn(),
+      updateTempGroup: jest.fn(),
     };
   });
 

packages/strapi-plugin-content-type-builder/admin/src/containers/App/tests/reducer.test.js

@@ -29,6 +29,7 @@ import {
   submitContentTypeSucceeded,
   submitTempContentTypeSucceeded,
   updateTempContentType,
+  updateTempGroup,
   setTemporaryAttributeRelation,
 } from '../actions';
 import appReducer, {

packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js

@@ -242,7 +242,7 @@ export class GroupPage extends React.Component {
     return !!source ? source : null;
   };
 
-  handleClickEditAttribute = (attributeName, type) => {
+  handleClickEditAttribute = async (attributeName, type) => {
     const { emitEvent } = this.context;
     const {
       canOpenModal,
@@ -265,6 +265,8 @@ export class GroupPage extends React.Component {
         this.getFeatureName()
       );
 
+      await this.wait();
+
       emitEvent('willEditFieldOfGroup');
 
       push({
@@ -388,12 +390,14 @@ export class GroupPage extends React.Component {
     return get(currentData, 'isTemporary', false);
   };
 
-  openAttributesModal = () => {
+  openAttributesModal = async () => {
     const {
       canOpenModal,
       history: { push },
     } = this.props;
 
+    await this.wait();
+
     if (canOpenModal || this.isUpdatingTempFeature()) {
       push({ search: 'modalType=chooseAttributes' });
     } else {
@@ -401,10 +405,12 @@ export class GroupPage extends React.Component {
     }
   };
 
-  openEditFeatureModal = () => {
+  openEditFeatureModal = async () => {
     const { emitEvent } = this.context;
     const { canOpenModal } = this.props;
 
+    await this.wait();
+
     if (canOpenModal || this.isUpdatingTempFeature()) {
       this.props.history.push({
         search: `modalType=group&settingType=base&actionType=edit&groupName=${this.getFeatureName()}`,
@@ -420,6 +426,11 @@ export class GroupPage extends React.Component {
   toggleModalWarning = () =>
     this.setState(prevState => ({ showWarning: !prevState.showWarning }));
 
+  wait = async () => {
+    this.setState({ removePrompt: true });
+    return new Promise(resolve => setTimeout(resolve, 100));
+  };
+
   renderListRow = (attribute, index) => {
     return (
       <ListRow

packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/tests/index.test.js

@@ -169,6 +169,8 @@ const props = {
   },
 };
 
+const wait = async () => new Promise(resolve => setTimeout(resolve, 100));
+
 describe('CTB <GroupPage />', () => {
   it('should not crash', () => {
     shallow(<GroupPage {...props} />);
@@ -302,7 +304,7 @@ describe('CTB <GroupPage />, lifecycle', () => {
   });
 
   describe('OpenAttributesModal', () => {
-    it('should display a notification if thee modal cannot be opened', () => {
+    it('should display a notification if thee modal cannot be opened', async () => {
       props.groups.find(item => item.name == 'tests').isTemporary = false;
       props.canOpenModal = false;
 
@@ -315,6 +317,8 @@ describe('CTB <GroupPage />, lifecycle', () => {
       const { openAttributesModal } = wrapper.instance();
       openAttributesModal();
 
+      await wait();
+
       expect(spyOnDisplayNotification).toHaveBeenCalled();
     });
   });
@@ -336,7 +340,7 @@ describe('CTB <GroupPage />, lifecycle', () => {
       expect(spyOnDisplayNotification).toHaveBeenCalled();
     });
 
-    it('should call setTempororaryAttributeGroup if ifTemporary is true', () => {
+    it('should call setTempororaryAttributeGroup if ifTemporary is true', async () => {
       props.groups.find(item => item.name == 'tests').isTemporary = true;
       props.canOpenModal = true;
 
@@ -351,13 +355,15 @@ describe('CTB <GroupPage />, lifecycle', () => {
         'tests'
       );
 
+      await wait();
+
       expect(props.history.push).toHaveBeenCalledWith({
         search:
           'modalType=attributeForm&attributeType=string&settingType=base&actionType=edit&attributeName=0',
       });
     });
 
-    it('should open attribute modal with relation attributeType', () => {
+    it('should open attribute modal with relation attributeType', async () => {
       props.groups.find(item => item.name == 'tests').isTemporary = true;
       props.canOpenModal = true;
 
@@ -372,13 +378,15 @@ describe('CTB <GroupPage />, lifecycle', () => {
         'tests'
       );
 
+      await wait();
+
       expect(props.history.push).toHaveBeenCalledWith({
         search:
           'modalType=attributeForm&attributeType=relation&settingType=base&actionType=edit&attributeName=1',
       });
     });
 
-    it('should handle the <number> type correctly', () => {
+    it('should handle the <number> type correctly', async () => {
       topCompo = renderComponent(props);
       const wrapper = topCompo.find(GroupPage);
 
@@ -386,6 +394,8 @@ describe('CTB <GroupPage />, lifecycle', () => {
 
       handleClickEditAttribute(0, 'float');
 
+      await wait();
+
       expect(context.emitEvent).toHaveBeenCalledWith('willEditFieldOfGroup');
       expect(props.history.push).toHaveBeenCalledWith({
         search:
@@ -407,7 +417,6 @@ describe('CTB <GroupPage />, lifecycle', () => {
       const { handleSubmit } = wrapper.instance();
 
       handleSubmit();
-
       expect(props.addAttributeToTempGroup).toHaveBeenCalledWith(search);
     });
 
@@ -494,7 +503,7 @@ describe('CTB <GroupPage />, lifecycle', () => {
   });
 
   describe('OpenEditFeatureModal', () => {
-    it('should display a notification if thee modal cannot be opened', () => {
+    it('should display a notification if thee modal cannot be opened', async () => {
       props.groups.find(item => item.name == 'tests').isTemporary = false;
       props.canOpenModal = false;
 
@@ -507,10 +516,12 @@ describe('CTB <GroupPage />, lifecycle', () => {
       const { openEditFeatureModal } = wrapper.instance();
       openEditFeatureModal();
 
+      await wait();
+
       expect(spyOnDisplayNotification).toHaveBeenCalled();
     });
 
-    it('should redirect to the right url if isTemporary is true', () => {
+    it('should redirect to the right url if isTemporary is true', async () => {
       props.groups.find(item => item.name == 'tests').isTemporary = true;
       props.canOpenModal = true;
 
@@ -520,6 +531,8 @@ describe('CTB <GroupPage />, lifecycle', () => {
       const { openEditFeatureModal } = wrapper.instance();
       openEditFeatureModal();
 
+      await wait();
+
       expect(props.history.push).toHaveBeenCalledWith({
         search:
           'modalType=group&settingType=base&actionType=edit&groupName=tests',