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

feat(archive): diplay archived list similar to features list

Browse Source
This commit is contained in:
Corinne Krych 2018-02-09 19:21:43 +01:00
parent 55683b0038
commit 8064551a6c
7 changed files with 88 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/__mocks__/react-mdl.js vendored
View File

@ -5,6 +5,7 @@ module.exports = {
CardMenu: 'react-mdl-CardMenu',
DataTable: 'react-mdl-DataTable',
Cell: 'react-mdl-Cell',
Chip: 'react-mdl-Chip',
Grid: 'react-mdl-Grid',
Icon: 'react-mdl-Icon',
IconButton: 'react-mdl-IconButton',

26
frontend/src/component/archive/__tests__/__snapshots__/archive-list-component-test.jsx.snap
View File

@ -45,8 +45,19 @@ exports[`renders correctly with archived toggles 1`] = `
style={Object {}}
>
adin-pay-confirm-disabled
<span>
<span
className="strategiesList hideLt920"
>
<react-mdl-Chip
className="strategyChip"
>
default
</react-mdl-Chip>
</span>
</span>
<div
className="toggleDetails"
className="mdl-list__item-sub-title"
>
Disables the confirm-functionality from API
</div>
@ -75,8 +86,19 @@ exports[`renders correctly with archived toggles 1`] = `
style={Object {}}
>
adin-pay-platform-sch-payment
<span>
<span
className="strategiesList hideLt920"
>
<react-mdl-Chip
className="strategyChip"
>
default
</react-mdl-Chip>
</span>
</span>
<div
className="toggleDetails"
className="mdl-list__item-sub-title"
>
Enables use of schibsted payment from order-payment-management
</div>

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

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import { Icon, Card, List, ListItem, ListItemContent, ListItemAction } from 'react-mdl';
import { Icon, Card, List, ListItem, ListItemContent, ListItemAction, Chip } from 'react-mdl';
import { styles as commonStyles } from '../common';
import styles from './archive.scss';
@ -12,18 +12,49 @@ class ArchiveList extends Component {
fetchArchive: PropTypes.func,
revive: PropTypes.func,
};
flag = this.props.name;
componentDidMount() {
this.props.fetchArchive();
this.props.archive.map(f => (f.displayDetail = false));
}
renderStrategies(feature) {
let cumul = feature.strategies.reduce((total, f) => {
// todo: do we want to display paramters
total += `${f.name} `;
return total;
}, '');
return cumul;
renderStrategyDetail(feature) {
let strategiesList = (
<span>
{feature.strategies.map((s, i) => (
<span style={{ marginLeft: `8px` }} key={i}>
<strong>{s.name}</strong>
{Object.keys(s.parameters).map((p, j) => (
<i key={j}> {s.parameters[p]}</i>
))}
</span>
))}
</span>
);
return strategiesList;
}
renderStrategiesInList(feature) {
let display = [];
if (feature.strategies && feature.strategies.length > 0) {
const strategiesToShow = Math.min(feature.strategies.length, 3);
const remainingStrategies = feature.strategies.length - strategiesToShow;
const strategyChips =
feature.strategies &&
feature.strategies.slice(0, strategiesToShow).map((s, i) => (
<span key={i} className={[styles.strategiesList, commonStyles.hideLt920].join(' ')}>
<Chip className={styles.strategyChip}>{s.name}</Chip>
</span>
));
const remaining = (
<span className={[styles.strategiesList, commonStyles.hideLt920].join(' ')}>
<Chip className={styles.strategyChip}>+{remainingStrategies}</Chip>
</span>
);
if (remainingStrategies > 0) {
display.push(remaining);
}
display.push(strategyChips);
}
return display;
}
render() {
const { archive, revive } = this.props;
@ -59,12 +90,16 @@ class ArchiveList extends Component {
' '
)}
>
{this.renderStrategiesInList(feature).map((strategyChip, i) => (
<span key={i}>{strategyChip}</span>
))}
{feature.name}
<div className={styles.toggleDetails}>
<div className={'mdl-list__item-sub-title'}>
{feature.description}
</div>
<div className={styles.toggleDetails}>
Strategy: {this.renderStrategies(feature)}
<div className={'mdl-list__item-sub-title'}>
{this.renderStrategyDetail(feature)}
</div>
</Link>
) : (
@ -75,7 +110,12 @@ class ArchiveList extends Component {
)}
>
{feature.name}
<div className={styles.toggleDetails}>
{this.renderStrategiesInList(feature).map((strategyChip, i) => (
<span key={i}>{strategyChip}</span>
))}
<div className={'mdl-list__item-sub-title'}>
{feature.description}
</div>
</Link>

0
frontend/src/component/archive/archive-container.js → frontend/src/component/archive/archive-list-container.js
View File

9
frontend/src/component/archive/archive.scss
View File

@ -1,6 +1,6 @@
.archiveList {
background-color: #fff;
color: #000;
color: rgba(0, 0, 0, 0.54);
align-items: center;
padding: 0 16px 0 18px;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
@ -31,3 +31,10 @@
display: block;
padding: 0;
}
.strategiesList {
flex-shrink: 0;
float: right;
margin-left: 8px !important;
}

1
frontend/src/component/feature/form/index.jsx
View File

@ -82,7 +82,6 @@ class AddFeatureToggleComponent extends Component {
<hr />
</div>
)}
<StrategiesSection
configuredStrategies={configuredStrategies}
addStrategy={addStrategy}

2
frontend/src/page/archive/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import Archive from '../../component/archive/archive-container';
import Archive from '../../component/archive/archive-list-container';
import PropTypes from 'prop-types';
const render = ({ params }) => <Archive name={params.name} />;