ENG-1243 refactor cms widgets

src/babel.js

@@ -9,6 +9,31 @@ import ContentsQueryConfigContainer, { formBody as ContentsQueryFormBody } from
 import ContentsStatusCardContainer from 'ui/contents/status-card/ContentsStatusCardContainer';
 import ContentListCardContainer from 'ui/contents/list-card/ContentListCardContainer';
 
+const widgetFormsWithWidgetCodes = {  
+  'content_viewer': {
+    default: SingleContentConfigContainer,
+    body: SingleContentConfigBody,
+  },  
+  'content_viewer_list': {
+    default: ContentsQueryConfigContainer,
+    body: ContentsQueryFormBody,
+  },  
+  'row_content_viewer_list': {
+    default: MultipleContentsConfigContainer,
+    body: MultipleContentsConfigBody,
+  },
+};
+
+const widgetForms = {
+  ...widgetFormsWithWidgetCodes,
+  // config action for widgetCode content_viewer
+  viewerConfig: widgetFormsWithWidgetCodes['content_viewer'],
+  // config action for widgetCode content_viewer_list
+  listViewerConfig: widgetFormsWithWidgetCodes['content_viewer_list'],
+  // config action for widgetCode row_content_viewer_list
+  rowListViewerConfig: widgetFormsWithWidgetCodes['row_content_viewer_list'],
+};
+
 const cms = {
   id: 'cms',
   menu,
@@ -23,23 +48,7 @@ const cms = {
     en,
     it,
   },
-  widgetForms: {
-    // widgetCode: content_viewer
-    viewerConfig: {
-      default: SingleContentConfigContainer,
-      body: SingleContentConfigBody,
-    },
-    // widgetCode: content_viewer_list
-    listViewerConfig: {
-      default: ContentsQueryConfigContainer,
-      body: ContentsQueryFormBody,
-    },
-    // widgetCode: row_content_viewer_list
-    rowListViewerConfig: {
-      default: MultipleContentsConfigContainer,
-      body: MultipleContentsConfigBody,
-    },
-  },
+  widgetForms,
   persistData: {
     tableColumns: ['currentColumnsShow'],
   },

src/ui/widget-forms/ContentConfigFormBody.js

@@ -2,9 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'react-intl';
 import { reduxForm, FieldArray, Field } from 'redux-form';
-import {
-  Button, Row, Col, Alert,
-} from 'patternfly-react';
+import { Row, Col, Alert } from 'patternfly-react';
 import { Collapse } from 'react-collapse';
 import { isUndefined } from 'lodash';
 import { maxLength } from '@entando/utils';
@@ -13,12 +11,12 @@ import FormSectionTitle from 'ui/common/form/FormSectionTitle';
 import RenderTextInput from 'ui/common/form/RenderTextInput';
 import RenderSelectInput from 'ui/common/form/RenderSelectInput';
 import FormLabel from 'ui/common/form/FormLabel';
-import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
 import { MULTIPLE_CONTENTS_CONFIG } from 'ui/widget-forms/const';
 
 const maxLength70 = maxLength(70);
 
 export const MultipleContentsConfigContainerId = `widgets.${MULTIPLE_CONTENTS_CONFIG}`;
+const noContentsChosen = values => (values && values.length > 0 ? undefined : <FormattedMessage id="validateForm.required" />);
 
 export class ContentConfigFormBody extends PureComponent {
   constructor(props) {
@@ -60,27 +58,18 @@ export class ContentConfigFormBody extends PureComponent {
   renderFormFields() {
     const {
       contentTemplates,
-      extFormName,
       putPrefixField,
-      invalid,
-      submitting,
       languages,
       pages,
       intl,
       widgetCode,
-      chosenContents,
-      dirty,
-      onCancel,
-      onDiscard,
-      onSave,
       ownerGroup,
       joinGroups,
     } = this.props;
     const { extraOptionsOpen, publishingSettingsOpen } = this.state;
     const multipleContentsMode = widgetCode === MULTIPLE_CONTENTS_CONFIG;
     const normalizedLanguages = languages.map(lang => lang.code);
     const normalizedPages = this.normalizeTitles(pages || []);
-    const noContents = chosenContents.length === 0;
 
     const elementNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 50, 100, 500]
       .map(i => Object.assign({}, { code: i, name: i }));
@@ -110,14 +99,6 @@ export class ContentConfigFormBody extends PureComponent {
     const handleCollapsePublishingSettings = () => this.collapseSection('publishingSettingsOpen');
     const handleCollapseExtraOptions = () => this.collapseSection('extraOptionsOpen');
 
-    const handleCancelClick = () => {
-      if (dirty) {
-        onCancel();
-      } else {
-        onDiscard();
-      }
-    };
-
     const renderExtraOptions = multipleContentsMode ? (
       <Row>
         <Col xs={12}>
@@ -195,39 +176,12 @@ export class ContentConfigFormBody extends PureComponent {
               ownerGroup={ownerGroup}
               joinGroups={joinGroups}
               multipleContentsMode={multipleContentsMode}
+              validate={[noContentsChosen]}
             />
           </Col>
         </Row>
         {renderPublishingSettings}
         {renderExtraOptions}
-        {!extFormName && (
-          <Row>
-            <Col xs={12}>
-              <Button
-                className="pull-right AddContentTypeFormBody__save--btn"
-                type="submit"
-                bsStyle="primary"
-                disabled={invalid || submitting || noContents}
-              >
-                <FormattedMessage id="app.save" />
-              </Button>
-              <Button
-                className="pull-right AddContentTypeFormBody__cancel--btn"
-                bsStyle="default"
-                onClick={handleCancelClick}
-              >
-                <FormattedMessage id="cms.label.cancel" />
-              </Button>
-              <ConfirmCancelModalContainer
-                contentText={intl.formatMessage({ id: 'cms.label.modal.confirmCancel' })}
-                invalid={invalid}
-                submitting={submitting}
-                onSave={onSave}
-                onDiscard={onDiscard}
-              />
-            </Col>
-          </Row>
-        )}
       </Fragment>
     );
   }
@@ -264,15 +218,8 @@ ContentConfigFormBody.propTypes = {
   pages: PropTypes.arrayOf(PropTypes.shape({})),
   onDidMount: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
   language: PropTypes.string.isRequired,
   widgetCode: PropTypes.string.isRequired,
-  chosenContents: PropTypes.arrayOf(PropTypes.shape({})),
-  dirty: PropTypes.bool,
-  onDiscard: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
   ownerGroup: PropTypes.string,
   joinGroups: PropTypes.arrayOf(PropTypes.string),
   extFormName: PropTypes.string,
@@ -283,13 +230,9 @@ ContentConfigFormBody.propTypes = {
 ContentConfigFormBody.defaultProps = {
   languages: [],
   pages: [],
-  chosenContents: [],
-  dirty: false,
   ownerGroup: '',
   joinGroups: null,
   extFormName: '',
-  invalid: false,
-  submitting: false,
   handleSubmit: () => {},
   putPrefixField: name => name,
   cloneMode: false,

src/ui/widget-forms/ContentsQueryConfig.js

@@ -15,13 +15,13 @@ import FormLabel from 'ui/common/form/FormLabel';
 import FormSectionTitle from 'ui/common/form/FormSectionTitle';
 import MultiFilterSelectRenderer from 'ui/common/form/MultiFilterSelectRenderer';
 import FiltersSelectRenderer from 'ui/common/form/FiltersSelectRenderer';
-import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer';
 
 import { CONTENTS_QUERY_CONFIG } from 'ui/widget-forms/const';
 
 export const ContentsQueryContainerId = `widgets.${CONTENTS_QUERY_CONFIG}`;
 
 const maxLength70 = maxLength(70);
+const contentTypeDoesNotExist = value => (value ? undefined : <FormattedMessage id="validateForm.required" />);
 const CATEGORY_HOME = 'home';
 
 const elementNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20]
@@ -82,8 +82,8 @@ export class ContentsQueryFormBody extends Component {
       contentTypes, contentType, contentTemplates, categories, pages,
       onResetModelId, selectedContentType, selectedCategories,
       intl, onChangeFilterValue, onResetFilterOption, onChangeFilterAttribute,
-      languages, onToggleInclusiveOr, selectedInclusiveOr, extFormName,
-      invalid, submitting, dirty, onCancel, onDiscard, onSave, putPrefixField,
+      languages, onToggleInclusiveOr, selectedInclusiveOr,
+      putPrefixField,
     } = this.props;
     const {
       publishingSettings, filters: filtersPanel,
@@ -152,18 +152,6 @@ export class ContentsQueryFormBody extends Component {
       </Button>
     );
 
-    const renderSaveButton = selectedContentType
-      && (
-      <Button
-        className="pull-right AddContentTypeFormBody__save--btn"
-        type="submit"
-        bsStyle="primary"
-        disabled={invalid || submitting}
-      >
-        <FormattedMessage id="app.save" />
-      </Button>
-      );
-
     const attributeFilters = getListAttributeFilters();
 
     const filters = [
@@ -198,14 +186,6 @@ export class ContentsQueryFormBody extends Component {
     const handleCollapseExtraOptions = () => this.collapseSection('extraOptions');
     const handleCollapseFrontendFilters = () => this.collapseSection('frontendFilters');
 
-    const handleCancelClick = () => {
-      if (dirty) {
-        onCancel();
-      } else {
-        onDiscard();
-      }
-    };
-
     return (
       <Fragment>
         <Row>
@@ -226,6 +206,7 @@ export class ContentsQueryFormBody extends Component {
                 optionDisplayName="name"
                 defaultOptionId="app.enumerator.none"
                 onChange={handleContentTypeChange}
+                validate={[contentTypeDoesNotExist]}
               />
             </fieldset>
           </Col>
@@ -404,28 +385,6 @@ export class ContentsQueryFormBody extends Component {
             </Col>
           </Row>
         </div>
-        <br />
-        {!extFormName && (
-          <Row>
-            <Col xs={12}>
-              {renderSaveButton}
-              <Button
-                className="pull-right AddContentTypeFormBody__cancel--btn"
-                bsStyle="default"
-                onClick={handleCancelClick}
-              >
-                <FormattedMessage id="cms.label.cancel" />
-              </Button>
-              <ConfirmCancelModalContainer
-                contentText={intl.formatMessage({ id: 'cms.label.modal.confirmCancel' })}
-                invalid={invalid}
-                submitting={submitting}
-                onSave={onSave}
-                onDiscard={onDiscard}
-              />
-            </Col>
-          </Row>
-        )}
       </Fragment>
     );
   }
@@ -465,8 +424,6 @@ ContentsQueryFormBody.propTypes = {
   languages: PropTypes.arrayOf(PropTypes.shape({})),
   onDidMount: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  invalid: PropTypes.bool,
-  submitting: PropTypes.bool,
   contentTypes: PropTypes.arrayOf(PropTypes.shape({})),
   contentType: PropTypes.shape({
     attributes: PropTypes.arrayOf(PropTypes.shape({})),
@@ -483,18 +440,12 @@ ContentsQueryFormBody.propTypes = {
   onResetModelId: PropTypes.func.isRequired,
   selectedContentType: PropTypes.string,
   selectedInclusiveOr: PropTypes.string,
-  dirty: PropTypes.bool,
-  onDiscard: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
   extFormName: PropTypes.string,
   putPrefixField: PropTypes.func,
   cloneMode: PropTypes.bool,
 };
 
 ContentsQueryFormBody.defaultProps = {
-  invalid: false,
-  submitting: false,
   languages: [],
   contentTypes: [],
   contentType: {},
@@ -504,7 +455,6 @@ ContentsQueryFormBody.defaultProps = {
   selectedCategories: [],
   selectedContentType: '',
   selectedInclusiveOr: '',
-  dirty: false,
   extFormName: '',
   putPrefixField: name => name,
   cloneMode: false,