Move gitlab_slack_application to integrations

- Add new projects dropdown that includes project's
avatar and name with namespace.
- Update backend and helper to pass in more data
that is needed on the frontend.

app/assets/stylesheets/pages/profile.scss

@@ -364,7 +364,7 @@ table.u2f-registrations {
 }
 
 .gitlab-slack-body {
-  max-width: 600px;
+  max-width: 420px;
 }
 
 .gitlab-slack-slack-logo {

ee/app/assets/javascripts/add_gitlab_slack_application/services/gitlab_slack_service.js

-import axios from '~/lib/utils/axios_utils';
-
-export default {
-  addToSlack(url, projectId) {
-    return axios.get(url, {
-      params: {
-        project_id: projectId,
-      },
-    });
-  },
-};

ee/app/assets/javascripts/integrations/gitlab_slack_application/api.js

+import axios from '~/lib/utils/axios_utils';
+
+export const addProjectToSlack = (url, projectId) => {
+  return axios.get(url, {
+    params: { project_id: projectId },
+  });
+};

ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue → ee/app/assets/javascripts/integrations/gitlab_slack_application/components/gitlab_slack_application.vue

@@ -5,72 +5,66 @@ import createFlash from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 
-import GitlabSlackService from '../services/gitlab_slack_service';
+import { addProjectToSlack } from '../api';
+import ProjectsDropdown from './projects_dropdown.vue';
 
 export default {
   components: {
     GlButton,
     GlIcon,
+    ProjectsDropdown,
   },
-
   props: {
     projects: {
       type: Array,
       required: false,
       default: () => [],
     },
-
     isSignedIn: {
       type: Boolean,
       required: true,
     },
-
     gitlabForSlackGifPath: {
       type: String,
       required: true,
     },
-
     signInPath: {
       type: String,
       required: true,
     },
-
     slackLinkPath: {
       type: String,
       required: true,
     },
-
     gitlabLogoPath: {
       type: String,
       required: true,
     },
-
     slackLogoPath: {
       type: String,
       required: true,
     },
-
     docsPath: {
       type: String,
       required: true,
     },
   },
-
   data() {
     return {
-      selectedProjectId: this.projects && this.projects.length ? this.projects[0].id : 0,
+      selectedProject: null,
     };
   },
-
   computed: {
     hasProjects() {
       return this.projects.length > 0;
     },
   },
-
   methods: {
+    selectProject(project) {
+      this.selectedProject = project;
+    },
     addToSlack() {
-      GitlabSlackService.addToSlack(this.slackLinkPath, this.selectedProjectId)
+      addProjectToSlack(this.slackLinkPath, this.selectedProject.id)
         .then((response) => redirectTo(response.data.add_to_slack_link))
         .catch(() =>
           createFlash({
@@ -91,31 +85,43 @@ export default {
     </div>
 
     <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>
+    <div class="gl-mt-6">
+      <template v-if="isSignedIn">
+        <template v-if="hasProjects">
+          <p>
+            {{ s__('SlackIntegration|Select a GitLab project to link with your Slack workspace.') }}
+          </p>
+
+          <projects-dropdown
+            :projects="projects"
+            :selected-project="selectedProject"
+            @projectSelected="selectProject"
+          />
 
           <div class="gl-display-flex gl-justify-content-end">
-          <gl-button category="primary" variant="confirm" class="float-right" @click="addToSlack">
+            <gl-button
+              category="primary"
+              variant="confirm"
+              class="float-right"
+              :disabled="!selectedProject"
+              @click="addToSlack"
+            >
               {{ __('Continue') }}
             </gl-button>
           </div>
-      </div>
-
-      <span v-else-if="isSignedIn && !hasProjects" class="js-no-projects">{{
-        __("You don't have any projects available.")
-      }}</span>
-
-      <span v-else>
-        You have to
-        <a v-once :href="signInPath" class="js-gitlab-slack-sign-in-link">{{ __('log in') }}</a>
-      </span>
+        </template>
+        <template v-else>
+          <p class="js-no-projects">{{ __("You don't have any projects available.") }}</p>
+        </template>
+      </template>
+
+      <template v-else>
+        <p>{{ s__('JiraService|Sign in to GitLab.com to get started.') }}</p>
+        <gl-button category="primary" variant="confirm" :href="signInPath">{{
+          __('Sign in to GitLab')
+        }}</gl-button>
+      </template>
     </div>
 
     <div class="center prepend-top-20 gl-mb-3 gl-mr-2 gl-ml-2">
@@ -125,7 +131,7 @@ export default {
     <div v-once class="text-center">
       <h3>{{ __('How it works') }}</h3>
 
-      <div class="well gitlab-slack-well mx-auto">
+      <div class="mx-auto">
         <code class="code mx-auto gl-mb-3"
           >/gitlab &lt;project-alias&gt; issue show &lt;id&gt;</code
         >

ee/app/assets/javascripts/integrations/gitlab_slack_application/components/projects_dropdown.vue

+<script>
+import { GlDropdown } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
+
+export default {
+  components: {
+    GlDropdown,
+    ProjectListItem,
+  },
+  props: {
+    projectDropdownText: {
+      type: String,
+      required: false,
+      default: __('Select a project'),
+    },
+    projects: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    selectedProject: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    dropdownText() {
+      return this.selectedProject
+        ? this.selectedProject.name_with_namespace
+        : this.projectDropdownText;
+    },
+  },
+  methods: {
+    onClick(project) {
+      this.$emit('projectSelected', project);
+      this.$refs.dropdown.hide(true);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown ref="dropdown" block :text="dropdownText" menu-class="gl-w-full!">
+    <project-list-item
+      v-for="project in projects"
+      :key="project.id"
+      :project="project"
+      :selected="false"
+      @click="onClick(project)"
+    />
+  </gl-dropdown>
+</template>

ee/app/assets/javascripts/add_gitlab_slack_application/index.js → ee/app/assets/javascripts/integrations/gitlab_slack_application/index.js

 import Vue from 'vue';
-import AddGitlabSlackApplication from './components/add_gitlab_slack_application.vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import GitlabSlackApplication from './components/gitlab_slack_application.vue';
 
 export default () => {
-  const el = document.querySelector('.js-add-gitlab-slack-application');
+  const el = document.querySelector('.js-gitlab-slack-application');
 
   if (!el) return null;
 
@@ -20,10 +21,10 @@ export default () => {
   return new Vue({
     el,
     render(createElement) {
-      return createElement(AddGitlabSlackApplication, {
+      return createElement(GitlabSlackApplication, {
         props: {
           projects: JSON.parse(projects),
-          isSignedIn,
+          isSignedIn: parseBoolean(isSignedIn),
           gitlabForSlackGifPath,
           signInPath,
           slackLinkPath,

ee/app/assets/javascripts/pages/profiles/slacks/index.js

-import mountAddGitlabSlackApplication from 'ee/add_gitlab_slack_application';
+import initGitlabSlackApplication from 'ee/integrations/gitlab_slack_application';
 
-mountAddGitlabSlackApplication();
+initGitlabSlackApplication();

ee/app/controllers/profiles/slacks_controller.rb

@@ -10,7 +10,7 @@ class Profiles::SlacksController < Profiles::ApplicationController
   feature_category :users
 
   def edit
-    @projects = disabled_projects.select([:id, :name]) if current_user
+    @projects = disabled_projects if current_user
   end
 
   def slack_link

ee/app/helpers/ee/integrations_helper.rb

@@ -36,9 +36,9 @@ module EE
 
     def add_to_slack_data(projects)
       {
-        projects: projects.as_json(only: [:id, :name]).to_json,
+        projects: (projects || []).map { |p| serialize_project(p) }.to_json,
         sign_in_path: new_session_path(:user, redirect_to_referer: 'yes'),
-        is_signed_in: current_user.present?,
+        is_signed_in: current_user.present?.to_s,
         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'),
@@ -64,5 +64,16 @@ module EE
 
       super
     end
+
+    private
+
+    def serialize_project(project)
+      {
+        id: project.id,
+        name: project.name,
+        avatar_url: project.avatar.url,
+        name_with_namespace: project.name_with_namespace
+      }
+    end
   end
 end

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

@@ -3,4 +3,4 @@
 - @content_class = 'limit-container-width'
 - page_title s_('SlackIntegration|GitLab for Slack')
 
-.js-add-gitlab-slack-application{ data: add_to_slack_data(@projects)  }
+.js-gitlab-slack-application{ data: add_to_slack_data(@projects)  }