Merge pull request #338 from zalando-stups/336-short-violation-urls

#336 sharing URLs

client/lib/common/asset/less/yourturn/notification-bar.less

@@ -3,13 +3,13 @@
 .notificationBar {
     position: fixed;
     width: 100%;
-    z-index: 10;
+    z-index: 100;
     ul {
         margin: 0;
         padding: 0;
         list-style-type: none;
         box-shadow: 0px 0px 5px @gray;
-        
+
         li {
             border-bottom: 1px solid @gray-light;
             cursor: pointer;
@@ -24,10 +24,21 @@
                     margin-right: @padding-small;
                 }
             }
+
+            &.type-info {
+                background-color: @blue;
+                color: @white;
+                &:before {
+                    font-family: 'FontAwesome';
+                    content: '\f05a';
+                    display: inline-block;
+                    margin-right: @padding-small;
+                }
+            }
             &.type-default {
                 background-color: @white;
                 color: @black;
             }
         }
-    }   
-}
+    }
+}

client/lib/common/src/data/notification/notification-actions.js

@@ -18,7 +18,7 @@ function removeNotificationsOlderThan(ms) {
 class NotificationActions extends Actions {
 
     addNotification(message, type) {
-        return addNotification(message, type);
+        return addNotification(message, type || 'default');
     }
 
     removeNotification(id) {

client/lib/violation/src/router.react.jsx

@@ -6,11 +6,14 @@ import ViolationList from './violation-list/violation-list.jsx';
 import ViolationDetail from './violation-detail/violation-detail.jsx';
 import {requireAccounts} from 'common/src/util';
 import moment from 'moment';
+import Icon from 'react-fa';
+import lzw from 'lz-string';
 import _ from 'lodash';
 
 const FULLSTOP_ACTIONS = FLUX.getActions('fullstop'),
       FULLSTOP_STORE = FLUX.getStore('fullstop'),
       USER_STORE = FLUX.getStore('user'),
+      NOTIFICATION_ACTIONS = FLUX.getActions('notification'),
       TEAM_ACTIONS = FLUX.getActions('team'),
       TEAM_STORE = FLUX.getStore('team');
 
@@ -43,6 +46,7 @@ class ViolationListHandler extends React.Component {
                     flux={FLUX}
                     connectToStores={['fullstop', 'team']}>
                     <ViolationList
+                        notificationActions={NOTIFICATION_ACTIONS}
                         userStore={USER_STORE}
                         fullstopActions={FULLSTOP_ACTIONS}
                         fullstopStore={FULLSTOP_STORE}
@@ -106,9 +110,28 @@ ViolationDetailHandler.propTypes = {
     params: React.PropTypes.object.isRequired
 };
 
+class ViolationShortUrlHandler extends React.Component {
+    constructor(props, context) {
+        super();
+        context.router.transitionTo('violation-vioList', null, lzw.decompressFromEncodedURIComponent(props.params.shortened));
+    }
+
+    render() {
+        return <div><Icon name='circle-o-noth' spin /> Redirecting...</div>;
+    }
+}
+ViolationShortUrlHandler.displayName = 'ViolationShortUrlHandler';
+ViolationShortUrlHandler.propTypes = {
+    params: React.PropTypes.object.isRequired
+};
+ViolationShortUrlHandler.contextTypes = {
+    router: React.PropTypes.func.isRequired
+};
+
 const ROUTES =
     <Route name='violation-vioList' path='violation'>
         <DefaultRoute handler={ViolationListHandler} />
+        <Route name='violation-short' path='v/:shortened' handler={ViolationShortUrlHandler} />
         <Route name='violation-vioDetail' path=':violationId' handler={ViolationDetailHandler} />
     </Route>;
 

client/lib/violation/src/violation-list/violation-list.jsx

@@ -3,8 +3,10 @@ import Icon from 'react-fa';
 import Infinite from 'react-infinite-scroll';
 import Tabs from 'react-tabs';
 import moment from 'moment';
+import lzw from 'lz-string';
 import {merge} from 'common/src/util';
 import Datepicker from 'common/src/datepicker.jsx';
+import Clipboard from 'react-copy-to-clipboard';
 import AccountSelector from 'violation/src/account-selector.jsx';
 import ViolationAnalysis from 'violation/src/violation-analysis/violation-analysis.jsx';
 import Violation from 'violation/src/violation-detail/violation-detail.jsx';
@@ -60,7 +62,8 @@ class ViolationList extends React.Component {
         }
         this.state = {
             selectedAccounts,
-            dispatching: false
+            dispatching: false,
+            shortUrl: ''
         };
     }
 
@@ -131,6 +134,10 @@ class ViolationList extends React.Component {
         }
     }
 
+    _handleCopy() {
+        this.props.notificationActions.addNotification('Copied URL to clipboard', 'info');
+    }
+
     selectTab(current) {
         this.updateSearch({
             activeTab: current
@@ -145,6 +152,7 @@ class ViolationList extends React.Component {
             showingSince = searchParams.from.toDate(),
             violations = this.stores.fullstop.getViolations(activeAccountIds).map(v => v.id),
             pagingInfo = this.stores.fullstop.getPagingInfo(),
+            shareURL = '/violation/v/' + lzw.compressToEncodedURIComponent(JSON.stringify(this.context.router.getCurrentQuery())),
             violationCards = violations.map(v => <Violation
                                                     key={v}
                                                     fullstopStore={this.props.fullstopStore}
@@ -176,6 +184,13 @@ class ViolationList extends React.Component {
                             <Tabs.Tab>Violations</Tabs.Tab>
                         </Tabs.TabList>
                         <Tabs.TabPanel>
+                            <Clipboard
+                                onCopy={this._handleCopy.bind(this)}
+                                text={window.location.origin + shareURL}>
+                                <div className='btn btn-default'>
+                                    <Icon name='bullhorn' /> Copy sharing URL
+                                </div>
+                            </Clipboard>
                             <ViolationAnalysis
                                 teamStore={this.stores.team}
                                 userStore={this.stores.user}
@@ -203,7 +218,8 @@ ViolationList.propTypes = {
     fullstopStore: React.PropTypes.object.isRequired,
     teamStore: React.PropTypes.object.isRequired,
     userStore: React.PropTypes.object.isRequired,
-    fullstopActions: React.PropTypes.object.isRequired
+    fullstopActions: React.PropTypes.object.isRequired,
+    notificationActions: React.PropTypes.object.isRequired
 };
 ViolationList.contextTypes = {
     router: React.PropTypes.func.isRequired

client/lib/yourturn/src/app.jsx

@@ -15,7 +15,9 @@ class YourTurn extends React.Component {
                     <FlummoxComponent
                         flux={FLUX}
                         connectToStores={['notification']}>
-                        <NotificationBar notificationStore={FLUX.getStore('notification')}/>
+                        <NotificationBar
+                            notificationActions={FLUX.getActions('notification')}
+                            notificationStore={FLUX.getStore('notification')}/>
                     </FlummoxComponent>
                     <div className='grid with-gutter'>
                         <div className='grid-col col-1-4'>

package.json

@@ -29,6 +29,7 @@
     "oauth2-client-js": "0.0.14",
     "promise.prototype.finally": "1.0.1",
     "react": "0.13.3",
+    "react-copy-to-clipboard": "3.0.4",
     "react-d3-components": "0.5.2",
     "react-day-picker": "1.0.1",
     "react-fa": "3.3.1",