feat(archive): make read-only view for feature item

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 => {

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 (
+            <section style={{ padding: '16px' }}>
+                <StrategiesSection configuredStrategies={configuredStrategies} />
+                <br />
+                <Button type="cancel" ripple raised onClick={onCancel} style={{ float: 'right' }}>
+                    <Icon name="cancel" />&nbsp;&nbsp;&nbsp; Cancel
+                </Button>
+            </section>
+        );
+    }
+}
+
+ViewFeatureComponent.propTypes = {
+    input: PropTypes.object,
+    onCancel: PropTypes.func.isRequired,
+    initCallRequired: PropTypes.bool,
+    init: PropTypes.func,
+};
+
+export default ViewFeatureComponent;

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);

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,
     };
 

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)}
             />
         ));

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,
     };
 

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 {
                         <Link title="View strategy" to={`/strategies/view/${name}`} className={styles.editLink}>
                             <Icon name="link" />
                         </Link>
-                        <IconButton title="Remove strategy from toggle" name="delete" onClick={this.handleRemove} />
+                        {this.props.removeStrategy ? (
+                            <IconButton title="Remove strategy from toggle" name="delete" onClick={this.handleRemove} />
+                        ) : (
+                            <span />
+                        )}
                         {connectDragSource(
                             <span className={styles.reorderIcon}>
                                 <Icon name="reorder" />

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 <HistoryComponent toggleName={featureToggleName} />;
         } else if (TABS[activeTab] === TABS.strategies) {
-            return <EditFeatureToggle featureToggle={featureToggle} />
+            if (this.isFeatureView) {
+                return <EditFeatureToggle featureToggle={featureToggle} />
+            }
+            return <ViewFeatureToggle featureToggle={featureToggle} />
 
         } else {
             return <MetricComponent featureToggle={featureToggle} />;