mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-08 01:15:49 +02:00
feat(archive): diplay archived list similar to features list
This commit is contained in:
parent
55683b0038
commit
8064551a6c
1
frontend/src/__mocks__/react-mdl.js
vendored
1
frontend/src/__mocks__/react-mdl.js
vendored
@ -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',
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
@ -82,7 +82,6 @@ class AddFeatureToggleComponent extends Component {
|
||||
<hr />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<StrategiesSection
|
||||
configuredStrategies={configuredStrategies}
|
||||
addStrategy={addStrategy}
|
||||
|
@ -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} />;
|
||||
|
Loading…
Reference in New Issue
Block a user