From b3734cde614ec119c958393ba0e9d377deaafe3d Mon Sep 17 00:00:00 2001 From: Corinne Krych Date: Sun, 11 Mar 2018 11:54:45 +0100 Subject: [PATCH] feat(archive): make read-only view for feature item --- .../form/form-update-feature-container.jsx | 2 +- .../form/form-view-feature-component.jsx | 42 +++++++++++++++++++ .../form/form-view-feature-container.jsx | 40 ++++++++++++++++++ .../component/feature/form/strategies-add.jsx | 2 +- .../feature/form/strategies-list.jsx | 10 ++--- .../feature/form/strategies-section.jsx | 6 +-- .../feature/form/strategy-configure.jsx | 12 ++++-- .../src/component/feature/view-component.jsx | 6 ++- 8 files changed, 105 insertions(+), 15 deletions(-) create mode 100644 frontend/src/component/feature/form/form-view-feature-component.jsx create mode 100644 frontend/src/component/feature/form/form-view-feature-container.jsx diff --git a/frontend/src/component/feature/form/form-update-feature-container.jsx b/frontend/src/component/feature/form/form-update-feature-container.jsx index 58c755487e..f4b0f08637 100644 --- a/frontend/src/component/feature/form/form-update-feature-container.jsx +++ b/frontend/src/component/feature/form/form-update-feature-container.jsx @@ -45,7 +45,7 @@ const prepare = (methods, dispatch) => { methods.onCancel = evt => { evt.preventDefault(); methods.clear(); - window.history.back(); + hashHistory.push(`/features`); }; methods.addStrategy = v => { diff --git a/frontend/src/component/feature/form/form-view-feature-component.jsx b/frontend/src/component/feature/form/form-view-feature-component.jsx new file mode 100644 index 0000000000..bdcaab61e2 --- /dev/null +++ b/frontend/src/component/feature/form/form-view-feature-component.jsx @@ -0,0 +1,42 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import StrategiesSection from './strategies-section-container'; +import { Button, Icon } from 'react-mdl'; + +class ViewFeatureComponent extends Component { + // static displayName = `UpdateFeatureComponent-{getDisplayName(Component)}`; + componentWillMount() { + // TODO unwind this stuff + if (this.props.initCallRequired === true) { + this.props.init(this.props.input); + } + } + + render() { + const { input, onCancel } = this.props; + + const { + name, // eslint-disable-line + } = input; + const configuredStrategies = input.strategies || []; + + return ( +
+ +
+ +
+ ); + } +} + +ViewFeatureComponent.propTypes = { + input: PropTypes.object, + onCancel: PropTypes.func.isRequired, + initCallRequired: PropTypes.bool, + init: PropTypes.func, +}; + +export default ViewFeatureComponent; diff --git a/frontend/src/component/feature/form/form-view-feature-container.jsx b/frontend/src/component/feature/form/form-view-feature-container.jsx new file mode 100644 index 0000000000..3ed8e9605b --- /dev/null +++ b/frontend/src/component/feature/form/form-view-feature-container.jsx @@ -0,0 +1,40 @@ +import { connect } from 'react-redux'; +import { createMapper, createActions } from '../../input-helpers'; +import ViewFeatureToggleComponent from './form-view-feature-component'; +import { hashHistory } from 'react-router'; + +const ID = 'view-feature-toggle'; +function getId(props) { + return [ID, props.featureToggle.name]; +} +// TODO: need to scope to the active featureToggle +// best is to emulate the "input-storage"? +const mapStateToProps = createMapper({ + id: getId, + getDefault: (state, ownProps) => { + ownProps.featureToggle.strategies.forEach((strategy, index) => { + strategy.id = Math.round(Math.random() * 1000000 * (1 + index)); + }); + return ownProps.featureToggle; + }, + prepare: props => { + props.editmode = true; + return props; + }, +}); + +const prepare = methods => { + methods.onCancel = evt => { + evt.preventDefault(); + methods.clear(); + hashHistory.push(`/archive`); + }; + return methods; +}; + +const actions = createActions({ + id: getId, + prepare, +}); + +export default connect(mapStateToProps, actions)(ViewFeatureToggleComponent); diff --git a/frontend/src/component/feature/form/strategies-add.jsx b/frontend/src/component/feature/form/strategies-add.jsx index aac8731fb5..429022e2cf 100644 --- a/frontend/src/component/feature/form/strategies-add.jsx +++ b/frontend/src/component/feature/form/strategies-add.jsx @@ -5,7 +5,7 @@ import { Menu, MenuItem, IconButton } from 'react-mdl'; class AddStrategy extends React.Component { static propTypes = { strategies: PropTypes.array.isRequired, - addStrategy: PropTypes.func.isRequired, + addStrategy: PropTypes.func, fetchStrategies: PropTypes.func.isRequired, }; diff --git a/frontend/src/component/feature/form/strategies-list.jsx b/frontend/src/component/feature/form/strategies-list.jsx index 26a3eecc34..b6f8936c2c 100644 --- a/frontend/src/component/feature/form/strategies-list.jsx +++ b/frontend/src/component/feature/form/strategies-list.jsx @@ -9,9 +9,9 @@ class StrategiesList extends React.Component { static propTypes = { strategies: PropTypes.array.isRequired, configuredStrategies: PropTypes.array.isRequired, - updateStrategy: PropTypes.func.isRequired, - removeStrategy: PropTypes.func.isRequired, - moveStrategy: PropTypes.func.isRequired, + updateStrategy: PropTypes.func, + removeStrategy: PropTypes.func, + moveStrategy: PropTypes.func, }; render() { @@ -27,8 +27,8 @@ class StrategiesList extends React.Component { key={strategy.id} strategy={strategy} moveStrategy={moveStrategy} - removeStrategy={removeStrategy.bind(null, i)} - updateStrategy={updateStrategy.bind(null, i)} + removeStrategy={removeStrategy ? removeStrategy.bind(null, i) : null} + updateStrategy={updateStrategy ? updateStrategy.bind(null, i) : null} strategyDefinition={strategies.find(s => s.name === strategy.name)} /> )); diff --git a/frontend/src/component/feature/form/strategies-section.jsx b/frontend/src/component/feature/form/strategies-section.jsx index e580fc9006..6a2a305098 100644 --- a/frontend/src/component/feature/form/strategies-section.jsx +++ b/frontend/src/component/feature/form/strategies-section.jsx @@ -8,9 +8,9 @@ import { HeaderTitle } from '../../common'; class StrategiesSectionComponent extends React.Component { static propTypes = { strategies: PropTypes.array.isRequired, - addStrategy: PropTypes.func.isRequired, - removeStrategy: PropTypes.func.isRequired, - updateStrategy: PropTypes.func.isRequired, + addStrategy: PropTypes.func, + removeStrategy: PropTypes.func, + updateStrategy: PropTypes.func, fetchStrategies: PropTypes.func.isRequired, }; diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx index 8311121b0e..6853a8d81c 100644 --- a/frontend/src/component/feature/form/strategy-configure.jsx +++ b/frontend/src/component/feature/form/strategy-configure.jsx @@ -47,9 +47,9 @@ class StrategyConfigure extends React.Component { static propTypes = { strategy: PropTypes.object.isRequired, strategyDefinition: PropTypes.object.isRequired, - updateStrategy: PropTypes.func.isRequired, - removeStrategy: PropTypes.func.isRequired, - moveStrategy: PropTypes.func.isRequired, + updateStrategy: PropTypes.func, + removeStrategy: PropTypes.func, + moveStrategy: PropTypes.func, isDragging: PropTypes.bool.isRequired, connectDragPreview: PropTypes.func.isRequired, connectDragSource: PropTypes.func.isRequired, @@ -170,7 +170,11 @@ class StrategyConfigure extends React.Component { - + {this.props.removeStrategy ? ( + + ) : ( + + )} {connectDragSource( diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx index 06f4b250e6..6650761240 100644 --- a/frontend/src/component/feature/view-component.jsx +++ b/frontend/src/component/feature/view-component.jsx @@ -6,6 +6,7 @@ import { hashHistory, Link } from 'react-router'; import HistoryComponent from '../history/history-list-toggle-container'; import MetricComponent from './metric-container'; import EditFeatureToggle from './form/form-update-feature-container'; +import ViewFeatureToggle from './form/form-view-feature-container'; import { styles as commonStyles } from '../common'; const TABS = { @@ -49,7 +50,10 @@ export default class ViewFeatureToggleComponent extends React.Component { if (TABS[activeTab] === TABS.history) { return ; } else if (TABS[activeTab] === TABS.strategies) { - return + if (this.isFeatureView) { + return + } + return } else { return ;