feat(archive): reuse feature/view-component.jsx to display archive details

frontend/src/component/archive/archive-list-component.jsx

@@ -11,10 +11,10 @@ class ArchiveList extends React.PureComponent {
         name: PropTypes.string,
         archive: PropTypes.array.isRequired,
         fetchArchive: PropTypes.func,
-        featureMetrics: PropTypes.object.isRequired,
+        featureMetrics: PropTypes.object,
-        updateSetting: PropTypes.func.isRequired,
+        updateSetting: PropTypes.func,
         settings: PropTypes.object,
-        revive: PropTypes.func.optional,
+        revive: PropTypes.func,
     };
 
     componentDidMount() {

frontend/src/component/archive/view-container.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import { fetchArchive } from './../../store/archive-actions';
+
+import ViewToggleComponent from './../feature/view-component';
+
+export default connect(
+    (state, props) => ({
+        features: state.archive.get('list').toArray(),
+        featureToggle: state.archive
+            .get('list')
+            .toArray()
+            .find(toggle => toggle.name === props.featureToggleName),
+        activeTab: props.activeTab,
+    }),
+    {
+        fetchArchive,
+    }
+)(ViewToggleComponent);

frontend/src/component/feature/feature-list-item-component.jsx

@@ -43,7 +43,7 @@ const Feature = ({
             <span className={styles.listItemMetric}>
                 <Progress strokeWidth={15} percentage={percent} isFallback={isStale} />
             </span>
-            {toggleFeature ? ( // display feature list
+            {toggleFeature ? ( // display feature list, toggleFeature is available
                 <span className={styles.listItemToggle}>
                     <Switch
                         title={`Toggle ${name}`}
@@ -53,17 +53,31 @@ const Feature = ({
                     />
                 </span>
             ) : (
-                // display archive
+                // display archive, toggleFeature is undefined
                 <span />
             )}
             <span className={['mdl-list__item-primary-content', styles.listItemLink].join(' ')}>
-                <Link
+                {toggleFeature ? ( // display feature list, toggleFeature is available
-                    to={`/features/strategies/${name}`}
+                    <Link
-                    className={[commonStyles.listLink, commonStyles.truncate].join(' ')}
+                        to={`/features/strategies/${name}`}
-                >
+                        className={[commonStyles.listLink, commonStyles.truncate].join(' ')}
-                    {name}
+                    >
-                    <span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{description}</span>
+                        {name}
-                </Link>
+                        <span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>
+                            {description}
+                        </span>
+                    </Link>
+                ) : (
+                    <Link
+                        to={`/archive/strategies/${name}`}
+                        className={[commonStyles.listLink, commonStyles.truncate].join(' ')}
+                    >
+                        {name}
+                        <span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>
+                            {description}
+                        </span>
+                    </Link>
+                )}
             </span>
             <span className={[styles.listItemStrategies, commonStyles.hideLt920].join(' ')}>
                 {strategyChips}

frontend/src/component/feature/view-component.jsx

@@ -15,24 +15,31 @@ const TABS = {
 };
 
 export default class ViewFeatureToggleComponent extends React.Component {
+    isFeatureView;
     constructor(props) {
         super(props);
+        this.isFeatureView = !!props.fetchFeatureToggles;
     }
 
     static propTypes = {
         activeTab: PropTypes.string.isRequired,
         featureToggleName: PropTypes.string.isRequired,
         features: PropTypes.array.isRequired,
-        toggleFeature: PropTypes.func.isRequired,
+        toggleFeature: PropTypes.func,
-        removeFeatureToggle: PropTypes.func.isRequired,
+        removeFeatureToggle: PropTypes.func,
-        fetchFeatureToggles: PropTypes.func.isRequired,
+        fetchArchive: PropTypes.func,
-        editFeatureToggle: PropTypes.func.isRequired,
+        fetchFeatureToggles: PropTypes.func,
+        editFeatureToggle: PropTypes.func,
         featureToggle: PropTypes.object,
     };
 
     componentWillMount() {
         if (this.props.features.length === 0) {
-            this.props.fetchFeatureToggles();
+            if (this.isFeatureView) {
+                this.props.fetchFeatureToggles();
+            } else {
+                this.props.fetchArchive();
+            }
         }
     }
 
@@ -42,14 +49,16 @@ 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} />;
+            return <EditFeatureToggle featureToggle={featureToggle} />
+
         } else {
             return <MetricComponent featureToggle={featureToggle} />;
         }
     }
 
     goToTab(tabName, featureToggleName) {
-        hashHistory.push(`/features/${tabName}/${featureToggleName}`);
+        let view = this.props.fetchFeatureToggles ? 'features' : 'archive';
+        hashHistory.push(`/${view}/${tabName}/${featureToggleName}`);
     }
 
     render() {
@@ -113,16 +122,28 @@ export default class ViewFeatureToggleComponent extends React.Component {
             <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
                 <CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
                 <CardText>
-                    <Textfield
+                    {this.isFeatureView ? (
-                        floatingLabel
+                        <Textfield
-                        style={{ width: '100%' }}
+                            floatingLabel
-                        rows={1}
+                            style={{ width: '100%' }}
-                        label="Description"
+                            rows={1}
-                        required
+                            label="Description"
-                        value={featureToggle.description}
+                            required
-                        onChange={v => setValue('description', v)}
+                            value={featureToggle.description}
-                        onBlur={updateFeatureToggle}
+                            onChange={v => setValue('description', v)}
-                    />
+                            onBlur={updateFeatureToggle}
+                        />
+                    ) : (
+                        <Textfield
+                            disabled
+                            floatingLabel
+                            style={{ width: '100%' }}
+                            rows={1}
+                            label="Description"
+                            required
+                            value={featureToggle.description}
+                        />
+                    )}
                 </CardText>
 
                 <CardActions
@@ -134,17 +155,33 @@ export default class ViewFeatureToggleComponent extends React.Component {
                     }}
                 >
                     <span style={{ paddingRight: '24px' }}>
-                        <Switch
+                        {this.isFeatureView ? (
-                            ripple
+                            <Switch
-                            checked={featureToggle.enabled}
+                                ripple
-                            onChange={() => toggleFeature(featureToggle.name)}
+                                checked={featureToggle.enabled}
-                        >
+                                onChange={() => toggleFeature(featureToggle.name)}
-                            {featureToggle.enabled ? 'Enabled' : 'Disabled'}
+                            >
-                        </Switch>
+                                {featureToggle.enabled ? 'Enabled' : 'Disabled'}
+                            </Switch>
+                        ) : (
+                            <Switch
+                                disabled
+                                ripple
+                                checked={featureToggle.enabled}
+                                onChange={() => toggleFeature(featureToggle.name)}
+                            >
+                                {featureToggle.enabled ? 'Enabled' : 'Disabled'}
+                            </Switch>
+                        )}
                     </span>
-                    <Button onClick={removeToggle} style={{ flexShrink: 0 }}>
+
-                        Archive
+                    {this.isFeatureView ? (
-                    </Button>
+                        <Button onClick={removeToggle} style={{ flexShrink: 0 }}>
+                            Archive
+                        </Button>
+                    ) : (
+                        <span />
+                    )}
                 </CardActions>
                 <hr />
                 <Tabs

frontend/src/index.jsx

@@ -23,6 +23,7 @@ import CreateStrategies from './page/strategies/create';
 import HistoryPage from './page/history';
 import HistoryTogglePage from './page/history/toggle';
 import Archive from './page/archive';
+import ShowArchive from './page/archive/show';
 import Applications from './page/applications';
 import ApplicationView from './page/applications/view';
 
@@ -68,7 +69,7 @@ ReactDOM.render(
                 </Route>
                 <Route pageTitle="Archived Toggles" link="/archive">
                     <Route pageTitle="Archived Toggles" path="/archive" component={Archive} />
-                    <Route pageTitle=":name" path="/archive/:name" component={Archive} />
+                    <Route pageTitle=":name" path="/archive/:activeTab/:name" component={ShowArchive} />
                 </Route>
 
                 <Route pageTitle="Applications" link="/applications">

frontend/src/page/archive/show.js

@@ -0,0 +1,14 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import ViewFeatureToggle from './../../component/archive/view-container';
+
+export default class Features extends PureComponent {
+    static propTypes = {
+        params: PropTypes.object.isRequired,
+    };
+
+    render() {
+        const { params } = this.props;
+        return <ViewFeatureToggle featureToggleName={params.name} activeTab={params.activeTab} />;
+    }
+}