From 4168ef758e58c2ec440318488255fd1c34421c1f Mon Sep 17 00:00:00 2001 From: Irakli Chalagashvili Date: Tue, 3 Nov 2020 18:19:23 +0400 Subject: [PATCH 1/2] ENG-1243 refactor cms widgets --- src/ui/widget-forms/ContentConfigFormBody.js | 63 +-------------- src/ui/widget-forms/ContentsQueryConfig.js | 58 +------------- .../ContentsQueryConfigContainer.js | 57 +++++--------- .../MultipleContentsConfigContainer.js | 69 +++++++---------- .../contents-filter/ContentsFilterModal.js | 6 +- .../SingleContentConfigContainer.js | 63 ++++++--------- .../SingleContentConfigFormBody.js | 77 ++----------------- 7 files changed, 84 insertions(+), 309 deletions(-) diff --git a/src/ui/widget-forms/ContentConfigFormBody.js b/src/ui/widget-forms/ContentConfigFormBody.js index 4207a127..bae83e84 100644 --- a/src/ui/widget-forms/ContentConfigFormBody.js +++ b/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 : ); export class ContentConfigFormBody extends PureComponent { constructor(props) { @@ -60,19 +58,11 @@ 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; @@ -80,7 +70,6 @@ export class ContentConfigFormBody extends PureComponent { 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 ? ( @@ -195,39 +176,12 @@ export class ContentConfigFormBody extends PureComponent { ownerGroup={ownerGroup} joinGroups={joinGroups} multipleContentsMode={multipleContentsMode} + validate={[noContentsChosen]} /> {renderPublishingSettings} {renderExtraOptions} - {!extFormName && ( - - - - - - - - )} ); } @@ -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, diff --git a/src/ui/widget-forms/ContentsQueryConfig.js b/src/ui/widget-forms/ContentsQueryConfig.js index 9c3762d2..1e8e2512 100644 --- a/src/ui/widget-forms/ContentsQueryConfig.js +++ b/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 : ); 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 { ); - const renderSaveButton = selectedContentType - && ( - - ); - 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 ( @@ -226,6 +206,7 @@ export class ContentsQueryFormBody extends Component { optionDisplayName="name" defaultOptionId="app.enumerator.none" onChange={handleContentTypeChange} + validate={[contentTypeDoesNotExist]} /> @@ -404,28 +385,6 @@ export class ContentsQueryFormBody extends Component { -
- {!extFormName && ( - - - {renderSaveButton} - - - - - )} ); } @@ -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, diff --git a/src/ui/widget-forms/ContentsQueryConfigContainer.js b/src/ui/widget-forms/ContentsQueryConfigContainer.js index fad7f171..f7129ee5 100644 --- a/src/ui/widget-forms/ContentsQueryConfigContainer.js +++ b/src/ui/widget-forms/ContentsQueryConfigContainer.js @@ -1,12 +1,9 @@ import { connect } from 'react-redux'; -import { clearErrors, addToast, TOAST_SUCCESS } from '@entando/messages'; +import { clearErrors } from '@entando/messages'; import { get } from 'lodash'; import { injectIntl } from 'react-intl'; -import { change, formValueSelector, submit } from 'redux-form'; -import { routeConverter } from '@entando/utils'; -import { ROUTE_APP_BUILDER_PAGE_CONFIG } from 'app-init/routes'; +import { change, formValueSelector } from 'redux-form'; -import { sendPutWidgetConfig } from 'state/page-config/actions'; import { fetchSearchPages } from 'state/pages/actions'; import { fetchLanguages } from 'state/languages/actions'; import { fetchCategoryTree } from 'state/categories/actions'; @@ -20,8 +17,6 @@ import { getContentTemplateList } from 'state/content-template/selectors'; import { getLocale } from 'state/locale/selectors'; import { getSearchPagesRaw } from 'state/pages/selectors'; import { getActiveLanguages } from 'state/languages/selectors'; -import { setVisibleModal } from 'state/modal/actions'; -import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal'; const nopage = { page: 1, pageSize: 0 }; @@ -56,27 +51,6 @@ export const mapDispatchToProps = (dispatch, ownProps) => { dispatch(fetchSearchPages(nopage)); }, putPrefixField, - onSubmit: (values) => { - const { - pageCode, frameId, widgetCode, history, intl, - } = ownProps; - const checkedValues = Object.assign({}, values); - if (values.modelId === '') delete checkedValues.modelId; - checkedValues.filters = checkedValues.filters && checkedValues.filters.filter(f => f != null); - checkedValues.userFilters = checkedValues.userFilters - && checkedValues.userFilters.filter(f => f != null); - const configItem = Object.assign({ config: checkedValues }, { code: widgetCode }); - dispatch(clearErrors()); - dispatch(sendPutWidgetConfig(pageCode, frameId, configItem)).then((res) => { - if (res) { - dispatch(addToast( - intl.formatMessage({ id: 'widget.update.success' }), - TOAST_SUCCESS, - )); - history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode })); - } - }); - }, onResetFilterOption: (name, i) => ( dispatch(change(formToUse, `${name}.[${i}].option`, '')) ), @@ -95,20 +69,31 @@ export const mapDispatchToProps = (dispatch, ownProps) => { }, onResetModelId: () => dispatch(change(formToUse, putPrefixField('modelId'), '')), onToggleInclusiveOr: value => dispatch(change(formToUse, putPrefixField('orClauseCategoryFilter'), value === 'true' ? '' : 'true')), - onSave: () => { dispatch(setVisibleModal('')); dispatch(submit(ContentsQueryContainerId)); }, - onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)), - onDiscard: () => { - dispatch(setVisibleModal('')); - const { history, pageCode } = ownProps; - history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode })); - }, }; }; +const beforeSubmit = (dispatch, values) => new Promise((resolve) => { + const checkedValues = Object.assign({}, values); + if (values.modelId === '') delete checkedValues.modelId; + checkedValues.filters = checkedValues.filters && checkedValues.filters.filter(f => f != null); + checkedValues.userFilters = checkedValues.userFilters + && checkedValues.userFilters.filter(f => f != null); + dispatch(clearErrors()); + resolve(checkedValues); +}); + export const formBody = connect(mapStateToProps, mapDispatchToProps, null, { pure: false, })(injectIntl(ContentsQueryFormBody)); -export default connect(mapStateToProps, mapDispatchToProps, null, { +formBody.reduxFormId = ContentsQueryContainerId; +formBody.beforeSubmit = beforeSubmit; + +const ContentsQueryContainer = connect(mapStateToProps, mapDispatchToProps, null, { pure: false, })(injectIntl(ContentsQueryConfig)); + +ContentsQueryContainer.reduxFormId = ContentsQueryContainerId; +ContentsQueryContainer.beforeSubmit = beforeSubmit; + +export default ContentsQueryContainer; diff --git a/src/ui/widget-forms/MultipleContentsConfigContainer.js b/src/ui/widget-forms/MultipleContentsConfigContainer.js index 18db3f96..1d19ee5d 100644 --- a/src/ui/widget-forms/MultipleContentsConfigContainer.js +++ b/src/ui/widget-forms/MultipleContentsConfigContainer.js @@ -1,8 +1,7 @@ import { connect } from 'react-redux'; import { injectIntl } from 'react-intl'; import { get } from 'lodash'; -import { clearErrors, addToast, TOAST_SUCCESS } from '@entando/messages'; -import { routeConverter } from '@entando/utils'; +import { clearErrors } from '@entando/messages'; import { getContentTemplateList } from 'state/content-template/selectors'; import ContentConfigForm, { MultipleContentsConfigContainerId, ContentConfigFormBody } from 'ui/widget-forms/ContentConfigFormBody'; import { fetchContentTemplateListPaged } from 'state/content-template/actions'; @@ -11,13 +10,9 @@ import { fetchLanguages } from 'state/languages/actions'; import { getLocale } from 'state/locale/selectors'; import { getSearchPagesRaw } from 'state/pages/selectors'; import { getActiveLanguages } from 'state/languages/selectors'; -import { sendPutWidgetConfig } from 'state/page-config/actions'; -import { ROUTE_APP_BUILDER_PAGE_CONFIG } from 'app-init/routes'; import { - formValueSelector, submit, change, + formValueSelector, change, } from 'redux-form'; -import { setVisibleModal } from 'state/modal/actions'; -import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal'; import { PAGE_STATUS_DRAFT } from 'state/pages/const'; export const mapStateToProps = (state, ownProps) => { @@ -31,7 +26,6 @@ export const mapStateToProps = (state, ownProps) => { pages: getSearchPagesRaw(state), language: getLocale(state), widgetCode: ownProps.widgetCode, - chosenContents: formValueSelector(formToUse)(state, putPrefixField('contents')), ownerGroup: formValueSelector(formToUse)(state, putPrefixField('ownerGroup')), joinGroups: formValueSelector(formToUse)(state, putPrefixField('joinGroups')), }; @@ -53,47 +47,36 @@ export const mapDispatchToProps = (dispatch, ownProps) => { }); }, putPrefixField, - onSubmit: (values) => { - dispatch(clearErrors()); - const { - pageCode, frameId, intl, history, - } = ownProps; - const contents = values.contents || []; - const configContents = contents.map(cc => Object.assign( - {}, - { - contentId: cc.contentId, - ...(cc.modelId != null && { modelId: cc.modelId }), - contentDescription: cc.contentDescription, - }, - )); - const payload = { ...values, contents: configContents }; - const configItem = Object.assign({ config: payload }, { code: ownProps.widgetCode }); - dispatch(clearErrors()); - return dispatch(sendPutWidgetConfig(pageCode, frameId, configItem)).then((res) => { - if (res) { - dispatch(addToast( - intl.formatMessage({ id: 'widget.update.success' }), - TOAST_SUCCESS, - )); - history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode })); - } - }); - }, - onSave: () => { dispatch(setVisibleModal('')); dispatch(submit(MultipleContentsConfigContainerId)); }, - onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)), - onDiscard: () => { - dispatch(setVisibleModal('')); - const { history, pageCode } = ownProps; - history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode })); - }, }; }; +const beforeSubmit = (dispatch, values) => new Promise((resolve) => { + dispatch(clearErrors()); + const contents = values.contents || []; + const configContents = contents.map(cc => Object.assign( + {}, + { + contentId: cc.contentId, + ...(cc.modelId != null && { modelId: cc.modelId }), + contentDescription: cc.contentDescription, + }, + )); + const payload = { ...values, contents: configContents }; + resolve(payload); +}); + export const formBody = connect(mapStateToProps, mapDispatchToProps, null, { pure: false, })(injectIntl(ContentConfigFormBody)); -export default connect(mapStateToProps, mapDispatchToProps, null, { +formBody.reduxFormId = MultipleContentsConfigContainerId; +formBody.beforeSubmit = beforeSubmit; + +const MultipleContentsConfigContainer = connect(mapStateToProps, mapDispatchToProps, null, { pure: false, })(injectIntl(ContentConfigForm)); + +MultipleContentsConfigContainer.reduxFormId = MultipleContentsConfigContainerId; +MultipleContentsConfigContainer.beforeSubmit = beforeSubmit; + +export default MultipleContentsConfigContainer; diff --git a/src/ui/widget-forms/contents-filter/ContentsFilterModal.js b/src/ui/widget-forms/contents-filter/ContentsFilterModal.js index 7760cb7a..bc4519ed 100644 --- a/src/ui/widget-forms/contents-filter/ContentsFilterModal.js +++ b/src/ui/widget-forms/contents-filter/ContentsFilterModal.js @@ -10,7 +10,7 @@ export const ContentsFilterModalID = 'ContentsFilterModal'; const ContentsFilterModal = (props) => { const { - modalTitleText, onSave, invalid, + modalTitleText, onSave, submitting, lastSelectedRow, } = props; const contentChosen = lastSelectedRow && (lastSelectedRow.id || lastSelectedRow.contentId); @@ -19,7 +19,7 @@ const ContentsFilterModal = (props) => { type="button" bsStyle="primary" className="app-tour-step-20" - disabled={invalid || submitting || !contentChosen} + disabled={submitting || !contentChosen} id="ContentsFilterModal__button-save" onClick={() => { onSave(lastSelectedRow); @@ -53,7 +53,6 @@ const ContentsFilterModal = (props) => { ContentsFilterModal.propTypes = { modalTitleText: PropTypes.string, onSave: PropTypes.func.isRequired, - invalid: PropTypes.bool, submitting: PropTypes.bool, lastSelectedRow: PropTypes.shape({ id: PropTypes.string, @@ -63,7 +62,6 @@ ContentsFilterModal.propTypes = { ContentsFilterModal.defaultProps = { modalTitleText: '', - invalid: false, submitting: false, lastSelectedRow: {}, }; diff --git a/src/ui/widget-forms/publish-single-content-config/SingleContentConfigContainer.js b/src/ui/widget-forms/publish-single-content-config/SingleContentConfigContainer.js index c8ba09b0..7c58ae54 100644 --- a/src/ui/widget-forms/publish-single-content-config/SingleContentConfigContainer.js +++ b/src/ui/widget-forms/publish-single-content-config/SingleContentConfigContainer.js @@ -1,18 +1,16 @@ import { connect } from 'react-redux'; -import { clearErrors, addToast, TOAST_SUCCESS } from '@entando/messages'; +import { clearErrors } from '@entando/messages'; import { get } from 'lodash'; import { injectIntl } from 'react-intl'; import { routeConverter } from '@entando/utils'; import { getContentTemplateList } from 'state/content-template/selectors'; import SingleContentConfigForm, { SingleContentConfigFormBody, SingleContentConfigContainerId } from 'ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody'; import { fetchContentTemplateListPaged } from 'state/content-template/actions'; -import { sendPutWidgetConfig } from 'state/page-config/actions'; -import { ROUTE_APP_BUILDER_PAGE_CONFIG, ROUTE_CMS_ADD_CONTENT } from 'app-init/routes'; +import { ROUTE_CMS_ADD_CONTENT } from 'app-init/routes'; import { - formValueSelector, submit, change, + formValueSelector, change, } from 'redux-form'; import { setVisibleModal } from 'state/modal/actions'; -import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal'; import { ContentsFilterModalID } from 'ui/widget-forms/contents-filter/ContentsFilterModal'; import { PAGE_STATUS_DRAFT } from 'state/pages/const'; import { fetchPage } from 'state/pages/actions'; @@ -59,41 +57,6 @@ export const mapDispatchToProps = (dispatch, ownProps) => { }); }, putPrefixField, - onSubmit: (values) => { - dispatch(clearErrors()); - const { - pageCode, frameId, intl, history, widgetCode, - } = ownProps; - const configItem = { - config: { - ...values, - ...(values.modelId != null && { modelId: values.modelId }), - }, - code: widgetCode, - }; - dispatch(clearErrors()); - return dispatch(sendPutWidgetConfig(pageCode, frameId, configItem)).then((res) => { - if (res) { - dispatch(addToast( - intl.formatMessage({ id: 'widget.update.success' }), - TOAST_SUCCESS, - )); - dispatch(setAppTourLastStep(22)); - history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode })); - } - }); - }, - onSave: () => { - dispatch(setAppTourLastStep(22)); - dispatch(setVisibleModal('')); - dispatch(submit(SingleContentConfigContainerId)); - }, - onCancel: () => dispatch(setVisibleModal(ConfirmCancelModalID)), - onDiscard: () => { - dispatch(setVisibleModal('')); - const { history, pageCode } = ownProps; - history.push(routeConverter(ROUTE_APP_BUILDER_PAGE_CONFIG, { pageCode })); - }, showFilterModal: (appTourProgress) => { if (appTourProgress === APP_TOUR_STARTED) { dispatch(setAppTourLastStep(19)); @@ -121,10 +84,28 @@ export const mapDispatchToProps = (dispatch, ownProps) => { }; }; +const beforeSubmit = (dispatch, values) => new Promise((resolve) => { + const configItem = { + ...values, + ...(values.modelId != null && { modelId: values.modelId }), + }; + dispatch(clearErrors()); + dispatch(setAppTourLastStep(22)); + resolve(configItem); +}); + export const formBody = connect(mapStateToProps, mapDispatchToProps, null, { pure: false, })(injectIntl(SingleContentConfigFormBody)); -export default connect(mapStateToProps, mapDispatchToProps, null, { +formBody.reduxFormId = SingleContentConfigContainerId; +formBody.beforeSubmit = beforeSubmit; + +const SingleContentConfigContainer = connect(mapStateToProps, mapDispatchToProps, null, { pure: false, })(injectIntl(SingleContentConfigForm)); + +SingleContentConfigContainer.reduxFormId = SingleContentConfigContainerId; +SingleContentConfigContainer.beforeSubmit = beforeSubmit; + +export default SingleContentConfigContainer; diff --git a/src/ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody.js b/src/ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody.js index 41eef352..fd7c2e1a 100644 --- a/src/ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody.js +++ b/src/ui/widget-forms/publish-single-content-config/SingleContentConfigFormBody.js @@ -9,16 +9,15 @@ import { Button, Row, Col, DropdownButton, MenuItem, } from 'patternfly-react'; import FormSectionTitle from 'ui/common/form/FormSectionTitle'; -import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelModalContainer'; import ContentsFilterModalContainer from 'ui/widget-forms/contents-filter/ContentsFilterModalContainer'; import { getContentById } from 'api/contents'; import { SINGLE_CONTENT_CONFIG } from 'ui/widget-forms/const'; import ContentTableRow from 'ui/widget-forms/publish-single-content-config/ContentTableRow'; import SingleContentConfigTourContainer from 'ui/widget-forms/publish-single-content-config/SingleContentConfigTourContainer'; -import { APP_TOUR_STARTED } from 'state/app-tour/const'; export const SingleContentConfigContainerId = `widgets.${SINGLE_CONTENT_CONFIG}`; +const contentDoesNotExist = value => (value ? undefined : ); export class SingleContentConfigFormBody extends PureComponent { constructor(props) { @@ -85,50 +84,6 @@ export class SingleContentConfigFormBody extends PureComponent { ); } - renderActionButtons() { - const { - onCancel, - onDiscard, - invalid, - dirty, - submitting, - appTourProgress, - } = this.props; - - const { selectedContent } = this.state; - - const handleCancelClick = () => { - if (dirty && appTourProgress !== APP_TOUR_STARTED) { - onCancel(); - } else { - onDiscard(); - } - }; - - const contentExists = get(selectedContent, 'id', get(selectedContent, 'contentId', false)); - return ( - - - - - - - ); - } - renderFormFields() { const { contentTemplates, @@ -136,10 +91,8 @@ export class SingleContentConfigFormBody extends PureComponent { submitting, intl, showFilterModal, - onDiscard, ownerGroup, joinGroups, - extFormName, putPrefixField, contentTypes, onClickAddContent, @@ -210,10 +163,14 @@ export class SingleContentConfigFormBody extends PureComponent { - +
@@ -251,7 +208,6 @@ export class SingleContentConfigFormBody extends PureComponent { invalid={invalid} submitting={submitting} onSave={this.handleContentSelect} - onDiscard={onDiscard} ownerGroup={ownerGroup} joinGroups={joinGroups} compatibility={{ @@ -272,7 +228,6 @@ export class SingleContentConfigFormBody extends PureComponent { )} - {!extFormName && this.renderActionButtons()}
); } @@ -280,12 +235,6 @@ export class SingleContentConfigFormBody extends PureComponent { render() { const { extFormName, - invalid, - submitting, - intl, - onSave, - onDiscard, - appTourProgress, } = this.props; const formFields = this.renderFormFields(); @@ -298,15 +247,6 @@ export class SingleContentConfigFormBody extends PureComponent { - {!extFormName && appTourProgress !== APP_TOUR_STARTED && ( - - )} ); } @@ -324,12 +264,8 @@ SingleContentConfigFormBody.propTypes = { contentId: PropTypes.string, status: PropTypes.string, }), - dirty: PropTypes.bool, - onDiscard: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, showFilterModal: PropTypes.func.isRequired, onSelectContent: PropTypes.func.isRequired, - onSave: PropTypes.func.isRequired, ownerGroup: PropTypes.string, joinGroups: PropTypes.arrayOf(PropTypes.string), extFormName: PropTypes.string, @@ -344,7 +280,6 @@ SingleContentConfigFormBody.propTypes = { SingleContentConfigFormBody.defaultProps = { chosenContent: {}, - dirty: false, ownerGroup: '', joinGroups: [], extFormName: '', From 6018ddb86d43203c4b900d32c9d004f40b23cf4c Mon Sep 17 00:00:00 2001 From: Giuseppe de Santis Date: Fri, 13 Nov 2020 11:20:09 +0100 Subject: [PATCH 2/2] ENG-1243 make native config widget forms available for child widgets config --- src/babel.js | 43 ++++++++++++++++++++++++++----------------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/src/babel.js b/src/babel.js index 4ad655e0..4982a992 100644 --- a/src/babel.js +++ b/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'], },