From 85f8b90aeb3d475548d9da96eb14969177a1ee5f Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Tue, 30 Aug 2016 16:42:51 +0500
Subject: [PATCH] Minor UI improvements (#3904)

* PLT-3917 - Adding cross icon to remove deleted post in the RHS.

* PLT-3997 - Improving the integration confirmation screen
---
 .../components/confirm_integration.jsx        | 68 ++++++++++---------
 webapp/components/rhs_comment.jsx             | 37 +++++++++-
 webapp/sass/routes/_backstage.scss            |  4 ++
 3 files changed, 73 insertions(+), 36 deletions(-)

diff --git a/webapp/components/integrations/components/confirm_integration.jsx b/webapp/components/integrations/components/confirm_integration.jsx
index 96e24c5750..1b95824ca5 100644
--- a/webapp/components/integrations/components/confirm_integration.jsx
+++ b/webapp/components/integrations/components/confirm_integration.jsx
@@ -74,15 +74,15 @@ export default class ConfirmIntegration extends React.Component {
                 />
             );
             helpText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_command.doneHelp'
                         defaultMessage='Your slash command has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href="https://docs.mattermost.com/developer/slash-commands.html">documentation</a> for further details).'
                     />
-                </div>
+                </p>
             );
             tokenText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_command.token'
                         defaultMessage='<b>Token</b>: {token}'
@@ -90,7 +90,7 @@ export default class ConfirmIntegration extends React.Component {
                             token: this.state.id
                         }}
                     />
-                </div>
+                </p>
             );
         } else if (this.state.type === Constants.Integrations.INCOMING_WEBHOOK) {
             headerText = (
@@ -100,15 +100,15 @@ export default class ConfirmIntegration extends React.Component {
                 />
             );
             helpText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_incoming_webhook.doneHelp'
                         defaultMessage='Your incoming webhook has been set up. Please send data to the following URL (see <a href=\"https://docs.mattermost.com/developer/webhooks-incoming.html\">documentation</a> for further details).'
                     />
-                </div>
+                </p>
             );
             tokenText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_incoming_webhook.url'
                         defaultMessage='<b>URL</b>: {url}'
@@ -116,7 +116,7 @@ export default class ConfirmIntegration extends React.Component {
                             url: window.location.origin + '/hooks/' + this.state.id
                         }}
                     />
-                </div>
+                </p>
             );
         } else if (this.state.type === Constants.Integrations.OUTGOING_WEBHOOK) {
             headerText = (
@@ -126,15 +126,15 @@ export default class ConfirmIntegration extends React.Component {
                 />
             );
             helpText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_outgoing_webhook.doneHelp'
                         defaultMessage='Your outgoing webhook has been set up. The following token will be sent in the outgoing payload. Please use it to verify the request came from your Mattermost team (see <a href=\"https://docs.mattermost.com/developer/webhooks-outgoing.html\">documentation</a> for further details).'
                     />
-                </div>
+                </p>
             );
             tokenText = (
-                <div className='backstage-list__help'>
+                <p>
                     <FormattedHTMLMessage
                         id='add_outgoing_webhook.token'
                         defaultMessage='<b>Token</b>: {token}'
@@ -142,7 +142,7 @@ export default class ConfirmIntegration extends React.Component {
                             token: this.state.id
                         }}
                     />
-                </div>
+                </p>
             );
         } else if (this.state.type === Constants.Integrations.OAUTH_APP) {
             let oauthApp = {};
@@ -163,15 +163,15 @@ export default class ConfirmIntegration extends React.Component {
 
                 helpText = [];
                 helpText.push(
-                    <div className='backstage-list__help'>
+                    <p>
                         <FormattedMessage
                             id='add_oauth_app.doneHelp'
                             defaultMessage='Your OAuth 2.0 application has been set up. Please use the following Client ID and Client Secret when requesting authorization for your application.'
                         />
-                    </div>
+                    </p>
                 );
                 helpText.push(
-                    <div className='backstage-list__help'>
+                    <p>
                         <FormattedHTMLMessage
                             id='add_oauth_app.clientId'
                             defaultMessage='<b>Client ID:</b> {id}'
@@ -186,20 +186,20 @@ export default class ConfirmIntegration extends React.Component {
                                 secret: oauthApp.client_secret
                             }}
                         />
-                    </div>
+                    </p>
                 );
 
                 helpText.push(
-                    <div className='backstage-list__help'>
+                    <p>
                         <FormattedHTMLMessage
                             id='add_oauth_app.doneUrlHelp'
                             defaultMessage='Please send data to the following URL.'
                         />
-                    </div>
+                    </p>
                 );
 
                 tokenText = (
-                    <div className='backstage-list__help'>
+                    <p>
                         <FormattedHTMLMessage
                             id='add_oauth_app.url'
                             defaultMessage='<b>URL(s)</b>: {url}'
@@ -207,7 +207,7 @@ export default class ConfirmIntegration extends React.Component {
                                 url: oauthApp.callback_urls
                             }}
                         />
-                    </div>
+                    </p>
                 );
             }
         }
@@ -223,19 +223,21 @@ export default class ConfirmIntegration extends React.Component {
                         defaultMessage='Add'
                     />
                 </BackstageHeader>
-                {helpText}
-                {tokenText}
-                <div className='backstage-list__help'>
-                    <SpinnerButton
-                        className='btn btn-primary'
-                        type='submit'
-                        onClick={this.handleDone}
-                    >
-                        <FormattedMessage
-                            id='integrations.done'
-                            defaultMessage='Done'
-                        />
-                    </SpinnerButton>
+                <div className='backstage-form backstage-form__confirmation'>
+                    {helpText}
+                    {tokenText}
+                    <div className='backstage-form__footer'>
+                        <SpinnerButton
+                            className='btn btn-primary'
+                            type='submit'
+                            onClick={this.handleDone}
+                        >
+                            <FormattedMessage
+                                id='integrations.done'
+                                defaultMessage='Done'
+                            />
+                        </SpinnerButton>
+                    </div>
                 </div>
             </div>
         );
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index c9588eb333..dcd5ee37f5 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -30,6 +30,7 @@ export default class RhsComment extends React.Component {
         super(props);
 
         this.handlePermalink = this.handlePermalink.bind(this);
+        this.removePost = this.removePost.bind(this);
         this.flagPost = this.flagPost.bind(this);
         this.unflagPost = this.unflagPost.bind(this);
 
@@ -41,6 +42,23 @@ export default class RhsComment extends React.Component {
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
 
+    removePost() {
+        GlobalActions.emitRemovePost(this.props.post);
+    }
+
+    createRemovePostButton() {
+        return (
+            <a
+                href='#'
+                className='post__remove theme'
+                type='button'
+                onClick={this.removePost}
+            >
+                {'×'}
+            </a>
+        );
+    }
+
     shouldComponentUpdate(nextProps) {
         if (nextProps.status !== this.props.status) {
             return true;
@@ -344,6 +362,21 @@ export default class RhsComment extends React.Component {
             );
         }
 
+        let options;
+        if (Utils.isPostEphemeral(post)) {
+            options = (
+                <li className='col col__remove'>
+                    {this.createRemovePostButton()}
+                </li>
+            );
+        } else {
+            options = (
+                <li className='col col__reply'>
+                    {dropdown}
+                </li>
+            );
+        }
+
         return (
             <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}>
                 <div className='post__content'>
@@ -368,9 +401,7 @@ export default class RhsComment extends React.Component {
                                 </time>
                                 {flagTrigger}
                             </li>
-                            <li className='col col__reply'>
-                                {dropdown}
-                            </li>
+                            {options}
                         </ul>
                         <div className='post__body'>
                             <div className={postClass}>
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 5861b778e2..871189f45b 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -279,6 +279,10 @@
     padding: 40px 30px 30px;
     position: relative;
 
+    &.backstage-form__confirmation {
+        padding: 30px 30px 20px;
+    }
+
     label {
         font-weight: normal;
     }