Merge pull request #357 from zalando-stups/355-show-hide-inactive-apps

added checkbox that hides/shows inactive apps. Added some apps to moc…
zalando-stups · Nov 9, 2015 · 37dcde1 · 37dcde1
2 parents 1c2aa77 + b2aa52d
commit 37dcde1
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 15 deletions.
diff --git 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() {
+        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 data-block='show-inactive-checkbox' 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 /> :
@@ -82,12 +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.map(
+                            {teamApps.filter(
+                                (ta) => (!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) => (!ta.active && showInactive) || ta.active ).map(
                                     other =>
                                         <tr key={other.id}
                                             className={'app ' + (other.active ? '' : 'is-inactive')}>
@@ -176,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/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 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
 
         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'),
+            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);
+
+    });
 });
+
+
+
diff --git 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;
         }
     }
 

diff --git 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 = {