Merge branch 'master' into react_16

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

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

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',

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}
 >
-  <div
+  <div>
-    className="horisontalScroll"
+    <div
-  >
-    <react-mdl-DataTable
-      className="fullwidth"
-      rows={
-        Array [
-          Object {
-            "createdAt": "2016-10-25T15:38:28.573Z",
-            "description": "Disables the confirm-functionality from API",
-            "enabled": false,
-            "name": "adin-pay-confirm-disabled",
-            "reviveName": "adin-pay-confirm-disabled",
-            "strategies": Array [
-              Object {
-                "name": "default",
-                "parameters": Object {},
-              },
-            ],
-          },
-          Object {
-            "createdAt": "2016-08-03T12:41:35.631Z",
-            "description": "Enables use of schibsted payment from order-payment-management",
-            "enabled": true,
-            "name": "adin-pay-platform-sch-payment",
-            "reviveName": "adin-pay-platform-sch-payment",
-            "strategies": Array [
-              Object {
-                "name": "default",
-                "parameters": Object {},
-              },
-            ],
-          },
-        ]
-      }
       style={
         Object {
-          "border": 0,
+          "position": "relative",
         }
       }
     >
-      <react-mdl-TableHeader
+      <react-mdl-List>
-        cellFormatter={[Function]}
+        <react-mdl-ListItem
-        name="reviveName"
+          className="archiveList"
-        style={
+        >
-          Object {
+          <span
-            "width": "25px",
+            className="listItemToggle"
-          }
+          >
-        }
+            Toggle name
-      >
+          </span>
-        Revive
+          <span
-      </react-mdl-TableHeader>
+            className="listItemRevive"
-      <react-mdl-TableHeader
+          >
-        cellFormatter={[Function]}
+            Revive
-        name="enabled"
+          </span>
-        style={
+        </react-mdl-ListItem>
-          Object {
+        <hr />
-            "width": "25px",
+        <react-mdl-List>
-          }
+          <react-mdl-ListItem
-        }
+            twoLine={true}
-      >
+          >
-        Enabled
+            <react-mdl-ListItemAction>
-      </react-mdl-TableHeader>
+              <react-mdl-Icon
-      <react-mdl-TableHeader
+                name="keyboard_arrow_right"
-        name="name"
+              />
-      >
+            </react-mdl-ListItemAction>
-        Toggle name
+            <react-mdl-ListItemContent>
-      </react-mdl-TableHeader>
+              <a
-      <react-mdl-TableHeader
+                className="listLink truncate"
-        name="createdAt"
+                onClick={[Function]}
-        numeric={true}
+                style={Object {}}
-      >
+              >
-        Created
+                adin-pay-confirm-disabled
-      </react-mdl-TableHeader>
+                <span>
-    </react-mdl-DataTable>
+                  <span
+                    className="strategiesList hideLt920"
+                  >
+                    <react-mdl-Chip
+                      className="strategyChip"
+                    >
+                      default
+                    </react-mdl-Chip>
+                  </span>
+                </span>
+                <div
+                  className="mdl-list__item-sub-title"
+                >
+                  Disables the confirm-functionality from API
+                </div>
+              </a>
+            </react-mdl-ListItemContent>
+            <react-mdl-ListItemAction
+              onClick={[Function]}
+            >
+              <react-mdl-Icon
+                name="undo"
+              />
+            </react-mdl-ListItemAction>
+          </react-mdl-ListItem>
+          <react-mdl-ListItem
+            twoLine={true}
+          >
+            <react-mdl-ListItemAction>
+              <react-mdl-Icon
+                name="keyboard_arrow_right"
+              />
+            </react-mdl-ListItemAction>
+            <react-mdl-ListItemContent>
+              <a
+                className="listLink truncate"
+                onClick={[Function]}
+                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="mdl-list__item-sub-title"
+                >
+                  Enables use of schibsted payment from order-payment-management
+                </div>
+              </a>
+            </react-mdl-ListItemContent>
+            <react-mdl-ListItemAction
+              onClick={[Function]}
+            >
+              <react-mdl-Icon
+                name="undo"
+              />
+            </react-mdl-ListItemAction>
+          </react-mdl-ListItem>
+        </react-mdl-List>
+      </react-mdl-List>
+    </div>
   </div>
 </react-mdl-Card>
 `;

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(<ArchiveList fetchArchive={jest.fn()} archive={[]} />).toJSON();
-
     expect(tree).toMatchSnapshot();
 });
 
 test('renders correctly with archived toggles', () => {
     const tree = renderer.create(<ArchiveList fetchArchive={jest.fn()} archive={archive} />).toJSON();
-
     expect(tree).toMatchSnapshot();
 });

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 = (
+            <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;
         archive.forEach(e => {
@@ -22,30 +61,72 @@ class ArchiveList extends Component {
         });
         return (
             <Card shadow={0} className={commonStyles.fullwidth}>
-                {archive.length > 0 ? (
+                {archive && archive.length > 0 ? (
-                    <div className={commonStyles.horisontalScroll}>
+                    <div>
-                        <DataTable rows={archive} className={commonStyles.fullwidth} style={{ border: 0 }}>
+                        <div style={{ position: 'relative' }}>
-                            <TableHeader
+                            <List>
-                                style={{ width: '25px' }}
+                                <ListItem className={styles.archiveList}>
-                                name="reviveName"
+                                    <span className={styles.listItemToggle}>Toggle name</span>
-                                cellFormatter={reviveName => (
+                                    <span className={styles.listItemRevive}>Revive</span>
-                                    <IconButton colored name="undo" onClick={() => revive(reviveName)} />
+                                </ListItem>
-                                )}
+                                <hr />
-                            >
+                                <List>
-                                Revive
+                                    {archive.map((feature, i) => (
-                            </TableHeader>
+                                        <ListItem key={i} twoLine>
-                            <TableHeader
+                                            <ListItemAction>
-                                style={{ width: '25px' }}
+                                                {this.props.name && feature.name === this.props.name ? (
-                                name="enabled"
+                                                    <Icon name="keyboard_arrow_down" />
-                                cellFormatter={v => (v ? 'Yes' : '-')}
+                                                ) : (
-                            >
+                                                    <Icon name="keyboard_arrow_right" />
-                                Enabled
+                                                )}
-                            </TableHeader>
+                                            </ListItemAction>
-                            <TableHeader name="name">Toggle name</TableHeader>
+                                            <ListItemContent>
-                            <TableHeader numeric name="createdAt">
+                                                {this.props.name && feature.name === this.props.name ? (
-                                Created
+                                                    <Link
-                            </TableHeader>
+                                                        to={`/archive`}
-                        </DataTable>
+                                                        className={[commonStyles.listLink, commonStyles.truncate].join(
+                                                            ' '
+                                                        )}
+                                                    >
+                                                        {this.renderStrategiesInList(feature).map((strategyChip, i) => (
+                                                            <span key={i}>{strategyChip}</span>
+                                                        ))}
+
+                                                        {feature.name}
+                                                        <div className={'mdl-list__item-sub-title'}>
+                                                            {feature.description}
+                                                        </div>
+                                                        <div className={'mdl-list__item-sub-title'}>
+                                                            {this.renderStrategyDetail(feature)}
+                                                        </div>
+                                                    </Link>
+                                                ) : (
+                                                    <Link
+                                                        to={`/archive/${feature.name}`}
+                                                        className={[commonStyles.listLink, commonStyles.truncate].join(
+                                                            ' '
+                                                        )}
+                                                    >
+                                                        {feature.name}
+
+                                                        {this.renderStrategiesInList(feature).map((strategyChip, i) => (
+                                                            <span key={i}>{strategyChip}</span>
+                                                        ))}
+
+                                                        <div className={'mdl-list__item-sub-title'}>
+                                                            {feature.description}
+                                                        </div>
+                                                    </Link>
+                                                )}
+                                            </ListItemContent>
+                                            <ListItemAction onClick={() => revive(feature.name)}>
+                                                <Icon name="undo" />
+                                            </ListItemAction>
+                                        </ListItem>
+                                    ))}
+                                </List>
+                            </List>
+                        </div>
                     </div>
                 ) : (
                     <div className={commonStyles.emptyState}>

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;
+}
+
+

frontend/src/component/feature/form/index.jsx

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

frontend/src/index.jsx

@@ -66,8 +66,11 @@ ReactDOM.render(
                     <Route pageTitle="Event history" path="/history" component={HistoryPage} />
                     <Route pageTitle=":toggleName" path="/history/:toggleName" component={HistoryTogglePage} />
                 </Route>
+                <Route pageTitle="Archived Toggles" link="/archive">
+                    <Route pageTitle="Archived Toggles" path="/archive" component={Archive} />
+                    <Route pageTitle=":name" path="/archive/:name" component={Archive} />
+                </Route>
 
-                <Route pageTitle="Archived Toggles" path="/archive" component={Archive} />
                 <Route pageTitle="Applications" link="/applications">
                     <Route pageTitle="Applications" path="/applications" component={Applications} />
                     <Route pageTitle=":name" path="/applications/:name" component={ApplicationView} />

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 = () => <Archive />;
+const render = ({ params }) => <Archive name={params.name} />;
+render.propTypes = {
+    params: PropTypes.object,
+};
 
 export default render;