Minor UI improvements (#3904)

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

* PLT-3997 - Improving the integration confirmation screen

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}
+                <div className='backstage-form backstage-form__confirmation'>
-                {tokenText}
+                    {helpText}
-                <div className='backstage-list__help'>
+                    {tokenText}
-                    <SpinnerButton
+                    <div className='backstage-form__footer'>
-                        className='btn btn-primary'
+                        <SpinnerButton
-                        type='submit'
+                            className='btn btn-primary'
-                        onClick={this.handleDone}
+                            type='submit'
-                    >
+                            onClick={this.handleDone}
-                        <FormattedMessage
+                        >
-                            id='integrations.done'
+                            <FormattedMessage
-                            defaultMessage='Done'
+                                id='integrations.done'
-                        />
+                                defaultMessage='Done'
-                    </SpinnerButton>
+                            />
+                        </SpinnerButton>
+                    </div>
                 </div>
             </div>
         );

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'>
+                            {options}
-                                {dropdown}
-                            </li>
                         </ul>
                         <div className='post__body'>
                             <div className={postClass}>

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;
     }