PLT-2600/PLT-2770 Added Get Public Link modal and added new API for public file links (#2892)

* Switched public file links to use a GetLinkModal

* Separated getFile and the new getPublicFile api calls

webapp/action_creators/global_actions.jsx

@@ -281,6 +281,16 @@ export function showGetPostLinkModal(post) {
     });
 }
 
+export function showGetPublicLinkModal(channelId, userId, filename) {
+    AppDispatcher.handleViewAction({
+        type: ActionTypes.TOGGLE_GET_PUBLIC_LINK_MODAL,
+        value: true,
+        channelId,
+        userId,
+        filename
+    });
+}
+
 export function showGetTeamInviteLinkModal() {
     AppDispatcher.handleViewAction({
         type: Constants.ActionTypes.TOGGLE_GET_TEAM_INVITE_LINK_MODAL,

webapp/client/client.jsx

@@ -1325,7 +1325,13 @@ export default class Client {
             end(this.handleResponse.bind(this, 'getFileInfo', success, error));
     }
 
-    getPublicLink = (data, success, error) => {
+    getPublicLink = (channelId, userId, filename, success, error) => {
+        const data = {
+            channel_id: channelId,
+            user_id: userId,
+            filename
+        };
+
         request.
             post(`${this.getFilesRoute()}/get_public_link`).
             set(this.defaultHeaders).

webapp/components/get_public_link_modal.jsx

@@ -0,0 +1,80 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as AsyncClient from 'utils/async_client.jsx';
+import Constants from 'utils/constants.jsx';
+import ModalStore from 'stores/modal_store.jsx';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import * as Utils from 'utils/utils.jsx';
+
+import GetLinkModal from './get_link_modal.jsx';
+
+export default class GetPublicLinkModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handlePublicLink = this.handlePublicLink.bind(this);
+        this.handleToggle = this.handleToggle.bind(this);
+        this.hide = this.hide.bind(this);
+
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+
+        this.state = {
+            show: false,
+            channelId: '',
+            userId: '',
+            filename: '',
+            link: ''
+        };
+    }
+
+    componentDidMount() {
+        ModalStore.addModalListener(Constants.ActionTypes.TOGGLE_GET_PUBLIC_LINK_MODAL, this.handleToggle);
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (this.state.show && !prevState.show) {
+            AsyncClient.getPublicLink(this.state.channelId, this.state.userId, this.state.filename, this.handlePublicLink);
+        }
+    }
+
+    componentWillUnmount() {
+        ModalStore.removeModalListener(Constants.ActionTypes.TOGGLE_GET_PUBLIC_LINK_MODAL, this.handleToggle);
+    }
+
+    handlePublicLink(link) {
+        this.setState({
+            link
+        });
+    }
+
+    handleToggle(value, args) {
+        this.setState({
+            show: value,
+            channelId: args.channelId,
+            userId: args.userId,
+            filename: args.filename,
+            link: ''
+        });
+    }
+
+    hide() {
+        this.setState({
+            show: false
+        });
+    }
+
+    render() {
+        return (
+            <GetLinkModal
+                show={this.state.show}
+                onHide={this.hide}
+                title={Utils.localizeMessage('get_public_link_modal.title', 'Copy Public Link')}
+                helpText={Utils.localizeMessage('get_public_link_modal.help', 'The link below allows anyone to see this file without being registered on this server.')}
+                link={this.state.link}
+            />
+        );
+    }
+}

webapp/components/needs_team.jsx

@@ -24,6 +24,7 @@ import Navbar from 'components/navbar.jsx';
 
 // Modals
 import GetPostLinkModal from 'components/get_post_link_modal.jsx';
+import GetPublicLinkModal from 'components/get_public_link_modal.jsx';
 import GetTeamInviteLinkModal from 'components/get_team_invite_link_modal.jsx';
 import EditPostModal from 'components/edit_post_modal.jsx';
 import DeletePostModal from 'components/delete_post_modal.jsx';
@@ -125,6 +126,7 @@ export default class NeedsTeam extends React.Component {
                     {content}
 
                     <GetPostLinkModal/>
+                    <GetPublicLinkModal/>
                     <GetTeamInviteLinkModal/>
                     <InviteMemberModal/>
                     <ImportThemeModal/>

webapp/components/view_image.jsx

@@ -3,7 +3,7 @@
 
 import $ from 'jquery';
 import * as AsyncClient from 'utils/async_client.jsx';
-import Client from 'utils/web_client.jsx';
+import * as GlobalActions from 'action_creators/global_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 import AudioVideoPreview from './audio_video_preview.jsx';
 import Constants from 'utils/constants.jsx';
@@ -43,7 +43,7 @@ class ViewImageModal extends React.Component {
 
         this.onFileStoreChange = this.onFileStoreChange.bind(this);
 
-        this.getPublicLink = this.getPublicLink.bind(this);
+        this.handleGetPublicLink = this.handleGetPublicLink.bind(this);
         this.onMouseEnterImage = this.onMouseEnterImage.bind(this);
         this.onMouseLeaveImage = this.onMouseLeaveImage.bind(this);
 
@@ -194,24 +194,10 @@ class ViewImageModal extends React.Component {
         }
     }
 
-    getPublicLink() {
-        var data = {};
-        data.channel_id = this.props.channelId;
-        data.user_id = this.props.userId;
-        data.filename = this.props.filenames[this.state.imgId];
-        Client.getPublicLink(
-            data,
-            (serverData) => {
-                if (Utils.isMobile()) {
-                    window.location.href = serverData.public_link;
-                } else {
-                    window.open(serverData.public_link);
-                }
-            },
-            () => {
-                //Do Nothing on error
-            }
-        );
+    handleGetPublicLink() {
+        this.props.onModalDismissed();
+
+        GlobalActions.showGetPublicLinkModal(this.props.channelId, this.props.userId, this.props.filenames[this.state.imgId]);
     }
 
     onMouseEnterImage() {
@@ -349,7 +335,7 @@ class ViewImageModal extends React.Component {
                                 totalFiles={this.props.filenames.length}
                                 filename={name}
                                 fileURL={fileUrl}
-                                getPublicLink={this.getPublicLink}
+                                onGetPublicLink={this.handleGetPublicLink}
                             />
                         </div>
                     </div>

webapp/components/view_image_popover_bar.jsx

@@ -15,7 +15,7 @@ export default class ViewImagePopoverBar extends React.Component {
                         href='#'
                         className='public-link text'
                         data-title='Public Image'
-                        onClick={this.props.getPublicLink}
+                        onClick={this.props.onGetPublicLink}
                     >
                         <FormattedMessage
                             id='view_image_popover.publicLink'
@@ -79,5 +79,5 @@ ViewImagePopoverBar.propTypes = {
     totalFiles: React.PropTypes.number.isRequired,
     filename: React.PropTypes.string.isRequired,
     fileURL: React.PropTypes.string.isRequired,
-    getPublicLink: React.PropTypes.func.isRequired
+    onGetPublicLink: React.PropTypes.func.isRequired
 };

webapp/stores/modal_store.jsx

@@ -37,6 +37,7 @@ class ModalStoreClass extends EventEmitter {
         case ActionTypes.TOGGLE_GET_POST_LINK_MODAL:
         case ActionTypes.TOGGLE_GET_TEAM_INVITE_LINK_MODAL:
         case ActionTypes.TOGGLE_REGISTER_APP_MODAL:
+        case ActionTypes.TOGGLE_GET_PUBLIC_LINK_MODAL:
             this.emit(type, value, args);
             break;
         }

webapp/utils/async_client.jsx

@@ -1343,3 +1343,33 @@ export function regenCommandToken(id) {
         }
     );
 }
+
+export function getPublicLink(channelId, userId, filename, success, error) {
+    const callName = 'getPublicLink' + channelId + userId + filename;
+
+    if (isCallInProgress(callName)) {
+        return;
+    }
+
+    callTracker[callName] = utils.getTimestamp();
+
+    Client.getPublicLink(
+        channelId,
+        userId,
+        filename,
+        (link) => {
+            callTracker[callName] = 0;
+
+            success(link);
+        },
+        (err) => {
+            callTracker[callName] = 0;
+
+            if (error) {
+                error(err);
+            } else {
+                dispatchError(err, 'getPublicLink');
+            }
+        }
+    );
+}

webapp/utils/constants.jsx

@@ -110,6 +110,7 @@ export default {
         TOGGLE_GET_POST_LINK_MODAL: null,
         TOGGLE_GET_TEAM_INVITE_LINK_MODAL: null,
         TOGGLE_REGISTER_APP_MODAL: null,
+        TOGGLE_GET_PUBLIC_LINK_MODAL: null,
 
         SUGGESTION_PRETEXT_CHANGED: null,
         SUGGESTION_RECEIVED_SUGGESTIONS: null,