Clean up add GitLab to Slack app

- Update Vue code to follow newer conventions.
- Basic updates to layout and component styling.

Changelog: changed
EE: true

app/assets/stylesheets/framework/variables.scss

@@ -874,14 +874,6 @@ Image Commenting cursor
 $image-comment-cursor-left-offset: 12;
 $image-comment-cursor-top-offset: 12;
 
-/*
-Add GitLab Slack Application
-*/
-$add-to-slack-popup-max-width: 400px;
-$add-to-slack-gif-max-width: 850px;
-$add-to-slack-well-max-width: 750px;
-$add-to-slack-logo-size: 100px;
-
 /*
 Security & Compliance Carousel
 */

app/assets/stylesheets/pages/profile.scss

@@ -363,25 +363,12 @@ table.u2f-registrations {
   color: $gl-text-color-secondary;
 }
 
-.gitlab-slack-gif {
-  width: 100%;
-  max-width: $add-to-slack-gif-max-width;
-}
-
-.gitlab-slack-well {
-  background-color: $white;
-  box-shadow: none;
-  max-width: $add-to-slack-well-max-width;
-}
-
-.gitlab-slack-logo {
-  width: $add-to-slack-logo-size;
-  height: $add-to-slack-logo-size;
+.gitlab-slack-body {
+  max-width: 600px;
 }
 
-.gitlab-slack-popup {
-  width: 100%;
-  max-width: $add-to-slack-popup-max-width;
+.gitlab-slack-slack-logo {
+  transform: scale(200%); // Slack logo SVG is scaled down 50% and has empty space around it
 }
 
 .skype-icon {

ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue

@@ -58,7 +58,6 @@ export default {
 
   data() {
     return {
-      popupOpen: false,
       selectedProjectId: this.projects && this.projects.length ? this.projects[0].id : 0,
     };
   },
@@ -70,10 +69,6 @@ export default {
   },
 
   methods: {
-    togglePopup() {
-      this.popupOpen = !this.popupOpen;
-    },
-
     addToSlack() {
       GitlabSlackService.addToSlack(this.slackLinkPath, this.selectedProjectId)
         .then((response) => redirectTo(response.data.add_to_slack_link))
@@ -88,46 +83,29 @@ export default {
 </script>
 
 <template>
-  <div class="text-center">
-    <h1>{{ __('GitLab for Slack') }}</h1>
-    <p>{{ __('Track your GitLab projects with GitLab for Slack.') }}</p>
-
+  <div class="gitlab-slack-body gl-mx-auto gl-mt-11 gl-text-center">
     <div v-once class="gl-my-5 gl-display-flex gl-justify-content-center gl-align-items-center">
-      <img :src="gitlabLogoPath" class="gitlab-slack-logo" />
-      <gl-icon name="double-headed-arrow" :size="72" class="gl-mx-5 gl-text-gray-200" />
-      <img :src="slackLogoPath" class="gitlab-slack-logo" />
+      <img :src="gitlabLogoPath" class="gl-h-11 gl-w-11" />
+      <gl-icon name="arrow-right" :size="32" class="gl-mx-5 gl-text-gray-200" />
+      <img :src="slackLogoPath" class="gitlab-slack-slack-logo gl-h-11 gl-w-11" />
     </div>
 
-    <gl-button
-      category="primary"
-      variant="success"
-      class="js-popup-button gl-mt-3"
-      @click="togglePopup"
-    >
-      {{ __('Add GitLab to Slack') }}
-    </gl-button>
-
-    <div
-      v-if="popupOpen"
-      class="popup gitlab-slack-popup mx-auto prepend-top-20 text-center js-popup"
-    >
-      <div v-if="isSignedIn && hasProjects" class="inline">
-        <strong>{{ __('Select GitLab project to link with your Slack team') }}</strong>
+    <h1>{{ s__('SlackIntegration|GitLab for Slack') }}</h1>
+    <p>{{ s__('SlackIntegration|Select a GitLab project to link with your Slack workspace.') }}</p>
 
+    <div class="mx-auto prepend-top-20 text-center">
+      <div v-if="isSignedIn && hasProjects">
         <select v-model="selectedProjectId" class="js-project-select form-control gl-mt-3 gl-mb-3">
           <option v-for="project in projects" :key="project.id" :value="project.id">
             {{ project.name }}
           </option>
         </select>
 
-        <gl-button
-          category="primary"
-          variant="success"
-          class="float-right js-add-button"
-          @click="addToSlack"
-        >
-          {{ __('Add to Slack') }}
-        </gl-button>
+        <div class="gl-display-flex gl-justify-content-end">
+          <gl-button category="primary" variant="confirm" class="float-right" @click="addToSlack">
+            {{ __('Continue') }}
+          </gl-button>
+        </div>
       </div>
 
       <span v-else-if="isSignedIn && !hasProjects" class="js-no-projects">{{
@@ -141,7 +119,7 @@ export default {
     </div>
 
     <div class="center prepend-top-20 gl-mb-3 gl-mr-2 gl-ml-2">
-      <img v-once :src="gitlabForSlackGifPath" class="gitlab-slack-gif" />
+      <img v-once :src="gitlabForSlackGifPath" class="gl-w-full" />
     </div>
 
     <div v-once class="text-center">

ee/app/assets/javascripts/add_gitlab_slack_application/index.js

@@ -2,25 +2,36 @@ import Vue from 'vue';
 import AddGitlabSlackApplication from './components/add_gitlab_slack_application.vue';
 
 export default () => {
-  const el = document.getElementById('js-add-gitlab-slack-application-entry-point');
+  const el = document.querySelector('.js-add-gitlab-slack-application');
 
-  if (!el) return;
+  if (!el) return null;
 
-  const dataNode = document.getElementById('js-add-gitlab-slack-application-entry-data');
-  const initialData = JSON.parse(dataNode.innerHTML);
+  const {
+    projects,
+    isSignedIn,
+    gitlabForSlackGifPath,
+    signInPath,
+    slackLinkPath,
+    gitlabLogoPath,
+    slackLogoPath,
+    docsPath,
+  } = el.dataset;
 
-  const AddGitlabSlackApplicationComp = Vue.extend(AddGitlabSlackApplication);
-
-  new AddGitlabSlackApplicationComp({
-    propsData: {
-      projects: initialData.projects,
-      isSignedIn: initialData.is_signed_in,
-      gitlabForSlackGifPath: initialData.gitlab_for_slack_gif_path,
-      signInPath: initialData.sign_in_path,
-      slackLinkPath: initialData.slack_link_profile_slack_path,
-      gitlabLogoPath: initialData.gitlab_logo_path,
-      slackLogoPath: initialData.slack_logo_path,
-      docsPath: initialData.docs_path,
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(AddGitlabSlackApplication, {
+        props: {
+          projects: JSON.parse(projects),
+          isSignedIn,
+          gitlabForSlackGifPath,
+          signInPath,
+          slackLinkPath,
+          gitlabLogoPath,
+          slackLogoPath,
+          docsPath,
+        },
+      });
     },
-  }).$mount(el);
+  });
 };

ee/app/helpers/ee/integrations_helper.rb

@@ -36,15 +36,15 @@ module EE
 
     def add_to_slack_data(projects)
       {
-        projects: projects.as_json(only: [:id, :name]),
+        projects: projects.as_json(only: [:id, :name]).to_json,
         sign_in_path: new_session_path(:user, redirect_to_referer: 'yes'),
         is_signed_in: current_user.present?,
-        slack_link_profile_slack_path: slack_link_profile_slack_path,
+        slack_link_path: slack_link_profile_slack_path,
         gitlab_for_slack_gif_path: image_path('gitlab_for_slack.gif'),
         gitlab_logo_path: image_path('illustrations/gitlab_logo.svg'),
         slack_logo_path: image_path('illustrations/slack_logo.svg'),
         docs_path: help_page_path('user/project/integrations/gitlab_slack_application.md')
-      }.to_json.html_safe
+      }
     end
 
     def escaped_form_authenticity_token

ee/app/views/profiles/slacks/edit.html.haml

--# haml-lint:disable InlineJavaScript
-%script#js-add-gitlab-slack-application-entry-data{ type: "application/json" }
-  = add_to_slack_data(@projects)
+- @hide_breadcrumbs = true
+- @hide_top_links = true
+- @content_class = 'limit-container-width'
+- page_title s_('SlackIntegration|GitLab for Slack')
 
-#js-add-gitlab-slack-application-entry-point
+.js-add-gitlab-slack-application{ data: add_to_slack_data(@projects)  }