Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-15 01:16:22 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Corinne Krych 2018-03-10 18:09:20 +01:00
parent d31d5340c2
commit a88f0da822
6 changed files with 124 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/archive/archive-list-component.jsx
View File

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

18
frontend/src/component/archive/view-container.js Normal file
View File

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

32
frontend/src/component/feature/feature-list-item-component.jsx
View File

@ -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
to={`/features/strategies/${name}`}
className={[commonStyles.listLink, commonStyles.truncate].join(' ')}
>
{name}
<span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{description}</span>
</Link>
{toggleFeature ? ( // display feature list, toggleFeature is available
<Link
to={`/features/strategies/${name}`}
className={[commonStyles.listLink, commonStyles.truncate].join(' ')}
>
{name}
<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}

91
frontend/src/component/feature/view-component.jsx
View File

@ -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,
removeFeatureToggle: PropTypes.func.isRequired,
fetchFeatureToggles: PropTypes.func.isRequired,
editFeatureToggle: PropTypes.func.isRequired,
toggleFeature: PropTypes.func,
removeFeatureToggle: PropTypes.func,
fetchArchive: PropTypes.func,
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
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
required
value={featureToggle.description}
onChange={v => setValue('description', v)}
onBlur={updateFeatureToggle}
/>
{this.isFeatureView ? (
<Textfield
floatingLabel
style={{ width: '100%' }}
rows={1}
label="Description"
required
value={featureToggle.description}
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
ripple
checked={featureToggle.enabled}
onChange={() => toggleFeature(featureToggle.name)}
>
{featureToggle.enabled ? 'Enabled' : 'Disabled'}
</Switch>
{this.isFeatureView ? (
<Switch
ripple
checked={featureToggle.enabled}
onChange={() => toggleFeature(featureToggle.name)}
>
{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
</Button>
{this.isFeatureView ? (
<Button onClick={removeToggle} style={{ flexShrink: 0 }}>
Archive
</Button>
) : (
<span />
)}
</CardActions>
<hr />
<Tabs

3
frontend/src/index.jsx
View File

@ -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">

14
frontend/src/page/archive/show.js Normal file
View File

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