From 2ce2c78988730ba7c1da64973f6d7790ca84470e Mon Sep 17 00:00:00 2001
From: Kolja Wilcke <kolja.wilcke@zalando.de>
Date: Thu, 5 Nov 2015 16:14:38 +0100
Subject: [PATCH 1/4] added checkbox that hides/shows inactive apps. Added some
 apps to mock. Added d3 and lz-string libraries

---
 .../src/application-list/application-list.jsx | 24 +++++++++++---
 package.json                                  |  2 ++
 server/mocks/5000-kio.js                      | 32 ++++++++++++++++++-
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/client/lib/application/src/application-list/application-list.jsx b/client/lib/application/src/application-list/application-list.jsx
index c31368dc..925eeebd 100644
--- a/client/lib/application/src/application-list/application-list.jsx
+++ b/client/lib/application/src/application-list/application-list.jsx
@@ -14,10 +14,12 @@ class ApplicationList extends React.Component {
         this.state = {
             term: '',
             showCount: 20,
-            showAll: false
+            showAll: false,
+            showInactive: false
         };
     }
 
+
     showAll() {
         this.setState({
             showAll: true
@@ -30,8 +32,14 @@ class ApplicationList extends React.Component {
         });
     }
 
+    updateShowInactive(id) {
+        this.setState({
+            showInactive: !this.state.showInactive
+        });
+    }
+
     render() {
-        let {term, showCount, showAll} = this.state,
+        let {term, showCount, showAll, showInactive} = this.state,
             apps = this.stores.kio.getApplications(term),
             fetchStatus = this.stores.kio.getApplicationsFetchStatus(),
             userAccIds = _.pluck(this.stores.user.getUserCloudAccounts(), 'name'),
@@ -66,6 +74,12 @@ class ApplicationList extends React.Component {
                                 aria-label='Enter your term'
                                 placeholder='Kio' />
                         </div>
+                        <label>
+                            <input type='checkbox'
+                                   checked={showInactive}
+                                   onChange={this.updateShowInactive.bind(this)}>
+                            </input> show inactive
+                        </label>
                     </div>
                     <h4>Your Applications {fetchStatus !== false && fetchStatus.isPending() ?
                                             <Icon name='circle-o-notch u-spinner' spin /> :
@@ -87,7 +101,8 @@ class ApplicationList extends React.Component {
                                 </tr>
                             </thead>
                             <tbody data-block='team-apps'>
-                            {teamApps.map(
+                            {teamApps.filter(
+                                (ta, i) => (!ta.active && showInactive) || ta.active ).map(
                                 (ta, i) =>
                                     <tr key={ta.id}
                                         className={'app ' + (ta.active ? '' : 'is-inactive')}>
@@ -163,7 +178,8 @@ class ApplicationList extends React.Component {
                                 </tr>
                             </thead>
                             <tbody data-block='other-apps'>
-                                {shortApps.map(
+                                {shortApps.filter(
+                                    (ta, i) => (!ta.active && showInactive) || ta.active ).map(
                                     other =>
                                         <tr key={other.id}
                                             className={'app ' + (other.active ? '' : 'is-inactive')}>
diff --git a/package.json b/package.json
index d591befc..c2de6b81 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,12 @@
   "homepage": "https://github.com/zalando-stups/yourturn",
   "dependencies": {
     "@zalando/react-automatic-width": "0.0.3",
+    "d3": "^3.5.6",
     "fixed-data-table": "0.4.7",
     "flummox": "3.5.2",
     "fuzzysearch": "1.0.3",
     "immutable": "3.7.4",
+    "lz-string": "^1.4.4",
     "oauth2-client-js": "0.0.14",
     "promise.prototype.finally": "1.0.1",
     "react": "0.13.3",
diff --git a/server/mocks/5000-kio.js b/server/mocks/5000-kio.js
index ca239df9..d04fefb5 100644
--- a/server/mocks/5000-kio.js
+++ b/server/mocks/5000-kio.js
@@ -47,7 +47,37 @@ var applications = {
         required_approvers: 2,
         criticality_level: 2,
         publicly_accessible: true
-    }
+    },
+    blork: {
+        documentation_url: 'https://github.com/zalando-stups/kio',
+        specification_url: 'https://github.com/zalando-stups/kio/issues',
+        scm_url: 'https://github.com/zalando-stups/kio.git',
+        service_url: 'http://localhost:5000/',
+        description: '**An application registry to manage application base information.**',
+        subtitle: 'STUPS application registry',
+        name: 'Kio',
+        active: true,
+        team_id: 'blork-team',
+        id: 'blork',
+        required_approvers: 2,
+        criticality_level: 3,
+        publicly_accessible: true
+    },
+    foobar: {
+        documentation_url: 'https://github.com/zalando-stups/pierone',
+        specification_url: 'https://github.com/zalando-stups/pierone/issues',
+        scm_url: 'https://github.com/zalando-stups/pierone.git',
+        service_url: 'https://pierone.example.org/',
+        description: 'A Docker registry compliant repository for Docker images.',
+        subtitle: 'STUPS Docker registry',
+        name: 'Pier One',
+        active: false,
+        team_id: 'foobar-team',
+        id: 'foobar',
+        required_approvers: 2,
+        criticality_level: 2,
+        publicly_accessible: true
+    },
 };
 
 var versions = {

From e5619262b4e16190a87b41fd279992d0c37a22e6 Mon Sep 17 00:00:00 2001
From: Kolja Wilcke <kolja.wilcke@zalando.de>
Date: Thu, 5 Nov 2015 21:30:19 +0100
Subject: [PATCH 2/4] fix linting errors, beautify table display

---
 .../src/application-list/application-list.jsx          | 10 +++++-----
 .../asset/less/application/application-list.less       |  7 ++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/lib/application/src/application-list/application-list.jsx b/client/lib/application/src/application-list/application-list.jsx
index 925eeebd..415fe6c5 100644
--- a/client/lib/application/src/application-list/application-list.jsx
+++ b/client/lib/application/src/application-list/application-list.jsx
@@ -32,7 +32,7 @@ class ApplicationList extends React.Component {
         });
     }
 
-    updateShowInactive(id) {
+    updateShowInactive() {
         this.setState({
             showInactive: !this.state.showInactive
         });
@@ -96,13 +96,13 @@ class ApplicationList extends React.Component {
                                 <tr>
                                     <th>Application</th>
                                     <th>Team</th>
-                                    <th>Latest version</th>
+                                    <th>Latest&nbsp;version</th>
                                     <th></th>
                                 </tr>
                             </thead>
                             <tbody data-block='team-apps'>
                             {teamApps.filter(
-                                (ta, i) => (!ta.active && showInactive) || ta.active ).map(
+                                (ta) => (!ta.active && showInactive) || ta.active ).map(
                                 (ta, i) =>
                                     <tr key={ta.id}
                                         className={'app ' + (ta.active ? '' : 'is-inactive')}>
@@ -179,7 +179,7 @@ class ApplicationList extends React.Component {
                             </thead>
                             <tbody data-block='other-apps'>
                                 {shortApps.filter(
-                                    (ta, i) => (!ta.active && showInactive) || ta.active ).map(
+                                    (ta) => (!ta.active && showInactive) || ta.active ).map(
                                     other =>
                                         <tr key={other.id}
                                             className={'app ' + (other.active ? '' : 'is-inactive')}>
@@ -192,7 +192,7 @@ class ApplicationList extends React.Component {
                                                     {other.name}
                                                 </Link>
                                             </td>
-                                            <td>{other.team_id}</td>
+                                            <td><div className='team'>{other.team_id}</div></td>
                                         </tr>
                                 )}
                             </tbody>
diff --git a/client/lib/common/asset/less/application/application-list.less b/client/lib/common/asset/less/application/application-list.less
index faa61465..cfe7eb11 100644
--- a/client/lib/common/asset/less/application/application-list.less
+++ b/client/lib/common/asset/less/application/application-list.less
@@ -9,9 +9,10 @@
         width: 2em;
     }
     .table {
-        td,
-        th{
-            width: auto !important;
+        border-collapse: collapse;
+        & .team {
+            white-space: nowrap;
+            min-width: 200px;
         }
     }
 

From 0cfa99fd978b0791f6d40391c90ec246cf4aed40 Mon Sep 17 00:00:00 2001
From: Kolja Wilcke <kolja.wilcke@zalando.de>
Date: Fri, 6 Nov 2015 16:28:49 +0100
Subject: [PATCH 3/4] changed tests to account for inactive tests that are now
 hidden by default. Added test to ensure the toggling works

---
 .../src/application-list/application-list.jsx |  2 +-
 .../application/test/application-list.test.js | 51 +++++++++++++++++--
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/client/lib/application/src/application-list/application-list.jsx b/client/lib/application/src/application-list/application-list.jsx
index 415fe6c5..94b6058f 100644
--- a/client/lib/application/src/application-list/application-list.jsx
+++ b/client/lib/application/src/application-list/application-list.jsx
@@ -75,7 +75,7 @@ class ApplicationList extends React.Component {
                                 placeholder='Kio' />
                         </div>
                         <label>
-                            <input type='checkbox'
+                            <input data-block='show-inactive-checkbox' type='checkbox'
                                    checked={showInactive}
                                    onChange={this.updateShowInactive.bind(this)}>
                             </input> show inactive
diff --git a/client/lib/application/test/application-list.test.js b/client/lib/application/test/application-list.test.js
index 1eb0e514..274a3574 100644
--- a/client/lib/application/test/application-list.test.js
+++ b/client/lib/application/test/application-list.test.js
@@ -59,11 +59,13 @@ describe('The application list view', () => {
         .receiveApplications([{
             id: 'kio',
             name: 'Kio',
-            team_id: 'stups'
+            team_id: 'stups',
+            active: true
         }, {
             id: 'yourturn',
             name: 'Yourturn',
-            team_id: 'stups'
+            team_id: 'stups',
+            active: true
         }]);
 
         list = render(List, props);
@@ -75,13 +77,14 @@ describe('The application list view', () => {
         }).to.throw();
     });
 
-    it('should display a list of applications not owned by the user and no list of not owned by user', () => {
+    it('should display a list of applications not owned by the user and no list of owned by user', () => {
         flux
         .getStore('kio')
         .receiveApplications([{
             id: 'openam',
             name: 'OpenAM',
-            team_id: 'iam'
+            team_id: 'iam',
+            active: true
         }]);
 
         list = render(List, props);
@@ -105,11 +108,51 @@ describe('The application list view', () => {
         .receiveApplications(apps);
 
         list = render(List, props);
+        let checkbox = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'show-inactive-checkbox');
         let otherApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'other-apps');
 
+        TestUtils.Simulate.change(checkbox); // show inactive apps
+
         expect($(React.findDOMNode(otherApps)).children().length).to.equal(20);
         expect(() => {
             TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'team-apps');
         }).to.throw();
     });
+
+    it('should allow toggeling the visibility of inactive applications on both, the owned and not owned applications lists', () => {
+        flux
+        .getStore('kio')
+        .receiveApplications([{
+            id: 'kio',
+            name: 'Kio',
+            team_id: 'stups',
+            active: true
+        }, {
+            id: 'yourturn',
+            name: 'Yourturn',
+            team_id: 'stups',
+            active: false
+        }, {
+            id: 'foobar',
+            name: 'FooBar',
+            team_id: 'foo-team',
+            active: false
+        }]);
+
+        list = render(List, props);
+        let checkbox = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'show-inactive-checkbox');
+        let teamApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'team-apps');
+        let otherApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'other-apps');
+
+        expect($(React.findDOMNode(teamApps)).children().length).to.equal(1); // default: two inactive apps (hidden) one active (shown)
+
+        TestUtils.Simulate.change(checkbox); // show inactive apps
+
+        expect( $(React.findDOMNode(teamApps)).children().length
+              + $(React.findDOMNode(otherApps)).children().length ).to.equal(3);
+
+    });
 });
+
+
+

From 58f9536071208ae5c87ad48e65ac32ecce56bae4 Mon Sep 17 00:00:00 2001
From: Kolja Wilcke <kolja.wilcke@zalando.de>
Date: Fri, 6 Nov 2015 16:39:14 +0100
Subject: [PATCH 4/4] fix formatting

---
 .../lib/application/test/application-list.test.js  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/lib/application/test/application-list.test.js b/client/lib/application/test/application-list.test.js
index 274a3574..f32044cc 100644
--- a/client/lib/application/test/application-list.test.js
+++ b/client/lib/application/test/application-list.test.js
@@ -108,8 +108,8 @@ describe('The application list view', () => {
         .receiveApplications(apps);
 
         list = render(List, props);
-        let checkbox = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'show-inactive-checkbox');
-        let otherApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'other-apps');
+        let checkbox = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'show-inactive-checkbox'),
+            otherApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'other-apps');
 
         TestUtils.Simulate.change(checkbox); // show inactive apps
 
@@ -140,16 +140,16 @@ describe('The application list view', () => {
         }]);
 
         list = render(List, props);
-        let checkbox = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'show-inactive-checkbox');
-        let teamApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'team-apps');
-        let otherApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'other-apps');
+        let checkbox = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'show-inactive-checkbox'),
+            teamApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'team-apps'),
+            otherApps = TestUtils.findRenderedDOMComponentWithAttributeValue(list, 'data-block', 'other-apps');
 
         expect($(React.findDOMNode(teamApps)).children().length).to.equal(1); // default: two inactive apps (hidden) one active (shown)
 
         TestUtils.Simulate.change(checkbox); // show inactive apps
 
-        expect( $(React.findDOMNode(teamApps)).children().length
-              + $(React.findDOMNode(otherApps)).children().length ).to.equal(3);
+        expect($(React.findDOMNode(teamApps)).children().length
+             + $(React.findDOMNode(otherApps)).children().length).to.equal(3);
 
     });
 });