diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md index e3e05e362a..a7fa9eb35c 100644 --- a/frontend/CHANGELOG.md +++ b/frontend/CHANGELOG.md @@ -7,9 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/). The latest version of this document is always available in [releases][releases-url]. + ## [Unrelesed] - fix(package): Upgrade react to version 16.2.0 +## [3.0.0] +- Nothing new, just locking down the version. + ## [3.0.0-alpha.8] - feat(timestamps): Make formatting of timestamps configurable. - fix(package): Update react-mdl to version 1.11.0 diff --git a/frontend/package.json b/frontend/package.json index ddd134d3b3..072bc0cb7c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "unleash-frontend", "description": "unleash your features", - "version": "3.0.0-alpha.8", + "version": "3.0.0", "keywords": [ "unleash", "feature toggle", diff --git a/frontend/src/__mocks__/react-mdl.js b/frontend/src/__mocks__/react-mdl.js index 04e07f153d..b8fe741af9 100644 --- a/frontend/src/__mocks__/react-mdl.js +++ b/frontend/src/__mocks__/react-mdl.js @@ -5,12 +5,14 @@ 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', List: 'react-mdl-List', ListItem: 'react-mdl-ListItem', ListItemContent: 'react-mdl-ListItemContent', + ListItemAction: 'react-mdl-ListItemAction', ProgressBar: 'react-mdl-ProgressBar', Switch: 'react-mdl-Switch', Tab: 'react-mdl-Tab', diff --git a/frontend/src/component/archive/__tests__/__snapshots__/archive-list-component-test.jsx.snap b/frontend/src/component/archive/__tests__/__snapshots__/archive-list-component-test.jsx.snap index 9a0b363fec..76efcd1391 100644 --- a/frontend/src/component/archive/__tests__/__snapshots__/archive-list-component-test.jsx.snap +++ b/frontend/src/component/archive/__tests__/__snapshots__/archive-list-component-test.jsx.snap @@ -5,81 +5,116 @@ exports[`renders correctly with archived toggles 1`] = ` className="fullwidth" shadow={0} > -
- +
- - Revive - - - Enabled - - - Toggle name - - - Created - - + + + + Toggle name + + + Revive + + +
+ + + + + + + + adin-pay-confirm-disabled + + + + default + + + +
+ Disables the confirm-functionality from API +
+ + + + + + + + + + + + + adin-pay-platform-sch-payment + + + + default + + + +
+ Enables use of schibsted payment from order-payment-management +
+ + + + + + + + +
`; diff --git a/frontend/src/component/archive/__tests__/archive-list-component-test.jsx b/frontend/src/component/archive/__tests__/archive-list-component-test.jsx index 01abacd219..3b38afe2ad 100644 --- a/frontend/src/component/archive/__tests__/archive-list-component-test.jsx +++ b/frontend/src/component/archive/__tests__/archive-list-component-test.jsx @@ -26,12 +26,10 @@ const archive = [ test('renders correctly with no archived toggles', () => { const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); }); test('renders correctly with archived toggles', () => { const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); }); diff --git a/frontend/src/component/archive/archive-list-component.jsx b/frontend/src/component/archive/archive-list-component.jsx index d3320cd7b2..95d7690849 100644 --- a/frontend/src/component/archive/archive-list-component.jsx +++ b/frontend/src/component/archive/archive-list-component.jsx @@ -1,11 +1,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router'; -import { DataTable, TableHeader, IconButton, Icon, Card } 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'; class ArchiveList extends Component { static propTypes = { + name: PropTypes.string, archive: PropTypes.array, fetchArchive: PropTypes.func, revive: PropTypes.func, @@ -14,7 +16,44 @@ class ArchiveList extends Component { componentDidMount() { this.props.fetchArchive(); } + renderStrategyDetail(feature) { + let strategiesList = ( + + {feature.strategies.map((s, i) => ( + + {s.name} + {Object.keys(s.parameters).map((p, j) => {s.parameters[p]})} + + ))} + + ); + 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) => ( + + {s.name} + + )); + const remaining = ( + + +{remainingStrategies} + + ); + if (remainingStrategies > 0) { + display.push(remaining); + } + display.push(strategyChips); + } + return display; + } render() { const { archive, revive } = this.props; archive.forEach(e => { @@ -22,30 +61,72 @@ class ArchiveList extends Component { }); return ( - {archive.length > 0 ? ( -
- - ( - revive(reviveName)} /> - )} - > - Revive - - (v ? 'Yes' : '-')} - > - Enabled - - Toggle name - - Created - - + {archive && archive.length > 0 ? ( +
+
+ + + Toggle name + Revive + +
+ + {archive.map((feature, i) => ( + + + {this.props.name && feature.name === this.props.name ? ( + + ) : ( + + )} + + + {this.props.name && feature.name === this.props.name ? ( + + {this.renderStrategiesInList(feature).map((strategyChip, i) => ( + {strategyChip} + ))} + + {feature.name} +
+ {feature.description} +
+
+ {this.renderStrategyDetail(feature)} +
+ + ) : ( + + {feature.name} + + {this.renderStrategiesInList(feature).map((strategyChip, i) => ( + {strategyChip} + ))} + +
+ {feature.description} +
+ + )} + + revive(feature.name)}> + + + + ))} + + +
) : (
diff --git a/frontend/src/component/archive/archive-container.js b/frontend/src/component/archive/archive-list-container.js similarity index 100% rename from frontend/src/component/archive/archive-container.js rename to frontend/src/component/archive/archive-list-container.js diff --git a/frontend/src/component/archive/archive.scss b/frontend/src/component/archive/archive.scss new file mode 100644 index 0000000000..aadacd0034 --- /dev/null +++ b/frontend/src/component/archive/archive.scss @@ -0,0 +1,40 @@ +.archiveList { + background-color: #fff; + color: rgba(0, 0, 0, 0.54); + align-items: center; + padding: 0 16px 0 18px; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; +} + +.listItemToggle { + width: 40%; + flex-shrink: 0; + margin-right: 20%; +} +.listItemCreated { + width: 10%; + flex-shrink: 0; + margin-right: 2px; +} +.listItemRevive{ + width: 5%; + flex-shrink: 0; + margin-right: 10%; +} +.toggleDetails { + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0; + line-height: 18px; + color: rgba(0, 0, 0, 0.54); + display: block; + padding: 0; +} +.strategiesList { + flex-shrink: 0; + float: right; + margin-left: 8px !important; +} + + diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx index 6e6b029dd1..366227d139 100644 --- a/frontend/src/component/feature/form/index.jsx +++ b/frontend/src/component/feature/form/index.jsx @@ -82,7 +82,6 @@ class AddFeatureToggleComponent extends Component {
)} - + + + + - diff --git a/frontend/src/page/archive/index.js b/frontend/src/page/archive/index.js index c88ee8d0e1..bbd37e3600 100644 --- a/frontend/src/page/archive/index.js +++ b/frontend/src/page/archive/index.js @@ -1,6 +1,10 @@ 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 = () => ; +const render = ({ params }) => ; +render.propTypes = { + params: PropTypes.object, +}; export default render;