Slack application landing page

{"iconCount":175,"spriteSize":76745,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","import","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}

 No newline at end of file

{"iconCount":174,"spriteSize":76324,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","import","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}

 No newline at end of file

<script>

  import Flash from '~/flash';

  import GitlabSlackService from '../services/gitlab_slack_service';

  import * as UrlUtility from '../../lib/utils/url_utility';

  export default {

    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 {

        popupOpen: false,

        selectedProjectId: this.projects && this.projects.length ? this.projects[0].id : 0,

      };

    },

    computed: {

      doubleHeadedArrowSvg() {

        return gl.utils.spriteIcon('double-headed-arrow');

      },

      arrowRightSvg() {

        return gl.utils.spriteIcon('arrow-right');

      },

      hasProjects() {

        return this.projects.length > 0;

      },

    },

    methods: {

      togglePopup() {

        this.popupOpen = !this.popupOpen;

      },

      addToSlack() {

        GitlabSlackService.addToSlack(this.slackLinkPath, this.selectedProjectId)

          .then(response => UrlUtility.redirectTo(response.data.add_to_slack_link))

          .catch(() => Flash('Unable to build Slack link.'));

      },

    },

    mounted() {

      GitlabSlackService.init();

    },

  };

</script>

<template>

  <div>

    <div class="center append-right-default">

      <h1>GitLab for Slack</h1>

      <p>Track your GitLab projects with GitLab for Slack.</p>

    </div>

    <div class="append-bottom-20 center" v-once>

      <img

        class="gitlab-slack-logo"

        :src="gitlabLogoPath"></img>

      <div

        class="gitlab-slack-double-headed-arrow inline prepend-left-20 append-right-20"

        v-html="doubleHeadedArrowSvg"></div>

      <img

        class="gitlab-slack-logo"

        :src="slackLogoPath"></img>

    </div>

    <button

      type="button"

      class="btn btn-red center-block js-popup-button"

      @click="togglePopup">

      Add GitLab to Slack

    </button>

    <div

      class="popup gitlab-slack-popup center-block prepend-top-20 text-center js-popup"

      v-if="popupOpen">

      <div

        class="inline"

        v-if="isSignedIn && hasProjects">

        <strong>Select GitLab project to link with your Slack team</strong>

        <select

          class="gitlab-slack-project-select js-project-select form-control prepend-top-10 append-bottom-10"

          v-model="selectedProjectId">

          <option

            v-for="project in projects"

            :key="project.id"

            :value="project.id">

            {{ project.name }}

          </option>

        </select>

        <button

          type="button"

          class="btn btn-red pull-right js-add-button"

          @click="addToSlack">

          Add to Slack

        </button>

      </div>

      <span

        class="js-no-projects"

        v-else-if="isSignedIn && !hasProjects">

        You don't have any projects available.

      </span>

      <span v-else>

        You have to

        <a

          class="js-gitlab-slack-sign-in-link"

          v-once

          :href="signInPath">

          log in

        </a>

      </span>

    </div>

    <div class="center prepend-top-20 append-bottom-10 append-right-5 prepend-left-5">

      <img

        v-once

        class="gitlab-slack-gif"

        :src="gitlabForSlackGifPath">

    </div>

    <div

      class="gitlab-slack-example"

      v-once>

      <h3 class="center">How it works</h3>

      <div class="well gitlab-slack-well center-block">

        <code class="code center-block append-bottom-10">/project-name issue show &lt;id&gt;</code>

        <span>

          <div

            class="gitlab-slack-right-arrow inline append-right-5"

            v-html="arrowRightSvg"></div>

          Shows the issue with id

          <strong>&lt;id&gt;</strong>

        </span>

      </div>

      <div class="center">

        <a :href="docsPath">

           More Slack commands

        </a>

      </div>

    </div>

  </div>

</template>

import Vue from 'vue';

import AddGitlabSlackApplication from './components/add_gitlab_slack_application.vue';

function mountAddGitlabSlackApplication() {

  const el = document.getElementById('js-add-gitlab-slack-application-entry-point');

  if (!el) return;

  const dataNode = document.getElementById('js-add-gitlab-slack-application-entry-data');

  const initialData = JSON.parse(dataNode.innerHTML);

  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,

    },

  }).$mount(el);

}

document.addEventListener('DOMContentLoaded', mountAddGitlabSlackApplication);

export default mountAddGitlabSlackApplication;