From 817ae362af570a29729f3219ce0e99fd98a0f325 Mon Sep 17 00:00:00 2001 From: Corinne Krych Date: Thu, 8 Feb 2018 23:57:46 +0100 Subject: [PATCH 1/7] feat(archive): display strategies details for archived features --- .../__tests__/archive-list-component-test.jsx | 9 +- .../archive/archive-list-component.jsx | 97 +++++++++++++------ frontend/src/component/archive/archive.scss | 33 +++++++ frontend/src/index.jsx | 5 +- frontend/src/page/archive/index.js | 6 +- 5 files changed, 117 insertions(+), 33 deletions(-) create mode 100644 frontend/src/component/archive/archive.scss 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..6290dc20dc 100644 --- a/frontend/src/component/archive/__tests__/archive-list-component-test.jsx +++ b/frontend/src/component/archive/__tests__/archive-list-component-test.jsx @@ -24,14 +24,15 @@ const archive = [ }, ]; +// todo: fix snapshot test test('renders correctly with no archived toggles', () => { - const tree = renderer.create().toJSON(); + //const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); + //expect(tree).toMatchSnapshot(); }); test('renders correctly with archived toggles', () => { - const tree = renderer.create().toJSON(); + //const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); + //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..f4372b88f4 100644 --- a/frontend/src/component/archive/archive-list-component.jsx +++ b/frontend/src/component/archive/archive-list-component.jsx @@ -1,20 +1,30 @@ 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 } 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, }; - + 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; } - render() { const { archive, revive } = this.props; archive.forEach(e => { @@ -22,30 +32,63 @@ 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 ? ( + + {feature.name} +
+ {feature.description} +
+
+ Strategy: {this.renderStrategies(feature)} +
+ + ) : ( + + {feature.name} +
+ {feature.description} +
+ + )} + + revive(feature.name)}> + + + + ))} + + +
) : (
diff --git a/frontend/src/component/archive/archive.scss b/frontend/src/component/archive/archive.scss new file mode 100644 index 0000000000..a02c87f20a --- /dev/null +++ b/frontend/src/component/archive/archive.scss @@ -0,0 +1,33 @@ +.archiveList { + background-color: #fff; + color: #000; + 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; +} diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index c8d92239a9..bd2a4ba58d 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -66,8 +66,11 @@ ReactDOM.render( + + + + - diff --git a/frontend/src/page/archive/index.js b/frontend/src/page/archive/index.js index c88ee8d0e1..703da454f8 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 PropTypes from 'prop-types'; -const render = () => ; +const render = ({ params }) => ; +render.propTypes = { + params: PropTypes.object, +}; export default render; From 9feee9acb7c35700ee6bd631fd5532ae1fa57255 Mon Sep 17 00:00:00 2001 From: Corinne Krych Date: Fri, 9 Feb 2018 09:41:58 +0100 Subject: [PATCH 2/7] fix(lint): make Lint happy --- .../__tests__/archive-list-component-test.jsx | 52 +++++++++---------- 1 file changed, 25 insertions(+), 27 deletions(-) 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 6290dc20dc..67e4f7ed69 100644 --- a/frontend/src/component/archive/__tests__/archive-list-component-test.jsx +++ b/frontend/src/component/archive/__tests__/archive-list-component-test.jsx @@ -1,38 +1,36 @@ -import React from 'react'; +// import React from 'react'; -import ArchiveList from '../archive-list-component'; -import renderer from 'react-test-renderer'; +// import ArchiveList from '../archive-list-component'; +// import renderer from 'react-test-renderer'; jest.mock('react-mdl'); -const archive = [ - { - name: 'adin-pay-confirm-disabled', - description: 'Disables the confirm-functionality from API', - enabled: false, - strategies: [{ name: 'default', parameters: {} }], - createdAt: '2016-10-25T15:38:28.573Z', - reviveName: 'adin-pay-confirm-disabled', - }, - { - name: 'adin-pay-platform-sch-payment', - description: 'Enables use of schibsted payment from order-payment-management', - enabled: true, - strategies: [{ name: 'default', parameters: {} }], - createdAt: '2016-08-03T12:41:35.631Z', - reviveName: 'adin-pay-platform-sch-payment', - }, -]; +// const archive = [ +// { +// name: 'adin-pay-confirm-disabled', +// description: 'Disables the confirm-functionality from API', +// enabled: false, +// strategies: [{ name: 'default', parameters: {} }], +// createdAt: '2016-10-25T15:38:28.573Z', +// reviveName: 'adin-pay-confirm-disabled', +// }, +// { +// name: 'adin-pay-platform-sch-payment', +// description: 'Enables use of schibsted payment from order-payment-management', +// enabled: true, +// strategies: [{ name: 'default', parameters: {} }], +// createdAt: '2016-08-03T12:41:35.631Z', +// reviveName: 'adin-pay-platform-sch-payment', +// }, +// ]; // todo: fix snapshot test test('renders correctly with no archived toggles', () => { - //const tree = renderer.create().toJSON(); - - //expect(tree).toMatchSnapshot(); + // const tree = renderer.create().toJSON(); + // expect(tree).toMatchSnapshot(); }); test('renders correctly with archived toggles', () => { - //const tree = renderer.create().toJSON(); - - //expect(tree).toMatchSnapshot(); + // const tree = renderer.create().toJSON(); + // expect(tree).toMatchSnapshot(); }); From 55683b0038bf6fbffc74eb95a91efa29a3f80a21 Mon Sep 17 00:00:00 2001 From: Corinne Krych Date: Fri, 9 Feb 2018 14:05:55 +0100 Subject: [PATCH 3/7] fix(archive): regenrate snapshot test for archive view --- frontend/src/__mocks__/react-mdl.js | 1 + .../archive-list-component-test.jsx.snap | 153 ++++++++++-------- .../__tests__/archive-list-component-test.jsx | 51 +++--- 3 files changed, 109 insertions(+), 96 deletions(-) diff --git a/frontend/src/__mocks__/react-mdl.js b/frontend/src/__mocks__/react-mdl.js index 04e07f153d..dda2ca9455 100644 --- a/frontend/src/__mocks__/react-mdl.js +++ b/frontend/src/__mocks__/react-mdl.js @@ -11,6 +11,7 @@ module.exports = { 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..97ef0d45fd 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,94 @@ exports[`renders correctly with archived toggles 1`] = ` className="fullwidth" shadow={0} > -
- +
- - Revive - - - Enabled - - - Toggle name - - - Created - - + + + + Toggle name + + + Revive + + +
+ + + + + + + + adin-pay-confirm-disabled +
+ Disables the confirm-functionality from API +
+ + + + + + + + + + + + + adin-pay-platform-sch-payment +
+ 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 67e4f7ed69..3b38afe2ad 100644 --- a/frontend/src/component/archive/__tests__/archive-list-component-test.jsx +++ b/frontend/src/component/archive/__tests__/archive-list-component-test.jsx @@ -1,36 +1,35 @@ -// import React from 'react'; +import React from 'react'; -// import ArchiveList from '../archive-list-component'; -// import renderer from 'react-test-renderer'; +import ArchiveList from '../archive-list-component'; +import renderer from 'react-test-renderer'; jest.mock('react-mdl'); -// const archive = [ -// { -// name: 'adin-pay-confirm-disabled', -// description: 'Disables the confirm-functionality from API', -// enabled: false, -// strategies: [{ name: 'default', parameters: {} }], -// createdAt: '2016-10-25T15:38:28.573Z', -// reviveName: 'adin-pay-confirm-disabled', -// }, -// { -// name: 'adin-pay-platform-sch-payment', -// description: 'Enables use of schibsted payment from order-payment-management', -// enabled: true, -// strategies: [{ name: 'default', parameters: {} }], -// createdAt: '2016-08-03T12:41:35.631Z', -// reviveName: 'adin-pay-platform-sch-payment', -// }, -// ]; +const archive = [ + { + name: 'adin-pay-confirm-disabled', + description: 'Disables the confirm-functionality from API', + enabled: false, + strategies: [{ name: 'default', parameters: {} }], + createdAt: '2016-10-25T15:38:28.573Z', + reviveName: 'adin-pay-confirm-disabled', + }, + { + name: 'adin-pay-platform-sch-payment', + description: 'Enables use of schibsted payment from order-payment-management', + enabled: true, + strategies: [{ name: 'default', parameters: {} }], + createdAt: '2016-08-03T12:41:35.631Z', + reviveName: 'adin-pay-platform-sch-payment', + }, +]; -// todo: fix snapshot test test('renders correctly with no archived toggles', () => { - // const tree = renderer.create().toJSON(); - // expect(tree).toMatchSnapshot(); + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); }); test('renders correctly with archived toggles', () => { - // const tree = renderer.create().toJSON(); - // expect(tree).toMatchSnapshot(); + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); }); From 8064551a6c5bdb4acb855554abef33ff9477754f Mon Sep 17 00:00:00 2001 From: Corinne Krych Date: Fri, 9 Feb 2018 19:21:43 +0100 Subject: [PATCH 4/7] feat(archive): diplay archived list similar to features list --- frontend/src/__mocks__/react-mdl.js | 1 + .../archive-list-component-test.jsx.snap | 26 ++++++- .../archive/archive-list-component.jsx | 68 +++++++++++++++---- ...container.js => archive-list-container.js} | 0 frontend/src/component/archive/archive.scss | 9 ++- frontend/src/component/feature/form/index.jsx | 1 - frontend/src/page/archive/index.js | 2 +- 7 files changed, 88 insertions(+), 19 deletions(-) rename frontend/src/component/archive/{archive-container.js => archive-list-container.js} (100%) diff --git a/frontend/src/__mocks__/react-mdl.js b/frontend/src/__mocks__/react-mdl.js index dda2ca9455..b8fe741af9 100644 --- a/frontend/src/__mocks__/react-mdl.js +++ b/frontend/src/__mocks__/react-mdl.js @@ -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', 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 97ef0d45fd..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 @@ -45,8 +45,19 @@ exports[`renders correctly with archived toggles 1`] = ` style={Object {}} > adin-pay-confirm-disabled + + + + default + + +
Disables the confirm-functionality from API
@@ -75,8 +86,19 @@ exports[`renders correctly with archived toggles 1`] = ` style={Object {}} > adin-pay-platform-sch-payment + + + + default + + +
Enables use of schibsted payment from order-payment-management
diff --git a/frontend/src/component/archive/archive-list-component.jsx b/frontend/src/component/archive/archive-list-component.jsx index f4372b88f4..7c138f3f23 100644 --- a/frontend/src/component/archive/archive-list-component.jsx +++ b/frontend/src/component/archive/archive-list-component.jsx @@ -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 = ( + + {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; @@ -59,12 +90,16 @@ class ArchiveList extends Component { ' ' )} > + {this.renderStrategiesInList(feature).map((strategyChip, i) => ( + {strategyChip} + ))} + {feature.name} -
+
{feature.description}
-
- Strategy: {this.renderStrategies(feature)} +
+ {this.renderStrategyDetail(feature)}
) : ( @@ -75,7 +110,12 @@ class ArchiveList extends Component { )} > {feature.name} -
+ + {this.renderStrategiesInList(feature).map((strategyChip, i) => ( + {strategyChip} + ))} + +
{feature.description}
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 index a02c87f20a..aadacd0034 100644 --- a/frontend/src/component/archive/archive.scss +++ b/frontend/src/component/archive/archive.scss @@ -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; +} + + 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 {
)} - ; From 8a4d48eeb7a8fc4b3e35e1070de293846bc9aaa5 Mon Sep 17 00:00:00 2001 From: Corinne Krych Date: Fri, 9 Feb 2018 19:23:12 +0100 Subject: [PATCH 5/7] feat(archive): lint are you happy now? --- frontend/src/component/archive/archive-list-component.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/component/archive/archive-list-component.jsx b/frontend/src/component/archive/archive-list-component.jsx index 7c138f3f23..95d7690849 100644 --- a/frontend/src/component/archive/archive-list-component.jsx +++ b/frontend/src/component/archive/archive-list-component.jsx @@ -22,9 +22,7 @@ class ArchiveList extends Component { {feature.strategies.map((s, i) => ( {s.name} - {Object.keys(s.parameters).map((p, j) => ( - {s.parameters[p]} - ))} + {Object.keys(s.parameters).map((p, j) => {s.parameters[p]})} ))} From c8ca85a89962c919316d11b409399d684566ecba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= Date: Sat, 10 Feb 2018 09:33:10 +0100 Subject: [PATCH 6/7] chore(changelog): prepare version 3.0.0 --- frontend/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md index 25ed7a8e48..1d320b5ac4 100644 --- a/frontend/CHANGELOG.md +++ b/frontend/CHANGELOG.md @@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/). The latest version of this document is always available in [releases][releases-url]. +## [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 From 5e545765debe93467fc61f757f81b90cb6beb3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= Date: Sat, 10 Feb 2018 09:33:16 +0100 Subject: [PATCH 7/7] 3.0.0 --- frontend/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index f363955d66..8dfb0b9b5a 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",