Merge branch '13020-add-new-jira-connect-app-ui-feature-flag' into 'master'

Add feature flag and boilerplate code for new Jira Connect app UI

See merge request gitlab-org/gitlab!50692

app/assets/javascripts/jira_connect/components/app.vue

 <script>
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
 export default {
   name: 'JiraConnectApp',
+  mixins: [glFeatureFlagsMixin()],
   computed: {
     state() {
       return this.$root.$data.state || {};
@@ -8,9 +11,17 @@ export default {
     error() {
       return this.state.error;
     },
+    showNewUi() {
+      return this.glFeatures.newJiraConnectUi;
+    },
   },
 };
 </script>
+
 <template>
-  <div></div>
+  <div>
+    <div v-if="showNewUi">
+      <h3>{{ s__('Integrations|Linked namespaces') }}</h3>
+    </div>
+  </div>
 </template>

app/assets/javascripts/jira_connect/index.js

 import Vue from 'vue';
 import $ from 'jquery';
+import setConfigs from '@gitlab/ui/dist/config';
+import Translate from '~/vue_shared/translate';
+import GlFeatureFlagsPlugin from '~/vue_shared/gl_feature_flags_plugin';
+
 import App from './components/app.vue';
 import { addSubscription, removeSubscription } from '~/jira_connect/api';
 
@@ -28,12 +32,14 @@ const initJiraFormHandlers = () => {
     alert(error);
   };
 
+  if (typeof AP.getLocation === 'function') {
     AP.getLocation((location) => {
       $('.js-jira-connect-sign-in').each(function updateSignInLink() {
         const updatedLink = `${$(this).attr('href')}?return_to=${location}`;
         $(this).attr('href', updatedLink);
       });
     });
+  }
 
   $('#add-subscription-form').on('submit', function onAddSubscriptionForm(e) {
     const addPath = $(this).attr('action');
@@ -63,6 +69,14 @@ function initJiraConnect() {
 
   initJiraFormHandlers();
 
+  if (!el) {
+    return null;
+  }
+
+  setConfigs();
+  Vue.use(Translate);
+  Vue.use(GlFeatureFlagsPlugin);
+
   return new Vue({
     el,
     data: {

app/assets/stylesheets/page_bundles/jira_connect.scss

@@ -2,6 +2,11 @@
 // We should only import styles that we actually use.
 // @import '@gitlab/ui/src/scss/gitlab_ui';
 
+@import '@gitlab/ui/src/scss/bootstrap';
+@import 'bootstrap-vue/src/index';
+
+@import '@gitlab/ui/src/scss/utilities';
+
 $atlaskit-border-color: #dfe1e6;
 
 .ac-content {
@@ -40,14 +45,16 @@ $header-height: 40px;
 }
 
 .jira-connect-user {
-  float: right;
-  position: relative;
-  top: -30px;
+  font-size: $gl-font-size;
+  position: fixed;
+  top: 10px;
+  right: 20px;
 }
 
 .jira-connect-app {
   margin-top: $header-height;
   max-width: 600px;
+  min-height: 95vh;
   padding-top: 48px;
   padding-left: 16px;
   padding-right: 16px;
@@ -108,5 +115,6 @@ svg {
 }
 
 .browser-limitations-notice {
+  font-size: $gl-font-size;
   margin-top: 32px;
 }

app/controllers/jira_connect/subscriptions_controller.rb

@@ -19,6 +19,9 @@ class JiraConnect::SubscriptionsController < JiraConnect::ApplicationController
   before_action :allow_rendering_in_iframe, only: :index
   before_action :verify_qsh_claim!, only: :index
   before_action :authenticate_user!, only: :create
+  before_action do
+    push_frontend_feature_flag(:new_jira_connect_ui, type: :development, default_enabled: :yaml)
+  end
 
   def index
     @subscriptions = current_jira_installation.subscriptions.preload_namespace_route

app/helpers/jira_connect_helper.rb

+# frozen_string_literal: true
+
+module JiraConnectHelper
+  def new_jira_connect_ui?
+    Feature.enabled?(:new_jira_connect_ui, type: :development, default_enabled: :yaml)
+  end
+end

app/views/jira_connect/subscriptions/index.html.haml

@@ -23,6 +23,7 @@
   - else
     .js-jira-connect-app
 
+    - unless new_jira_connect_ui?
       %form#add-subscription-form.subscription-form{ action: jira_connect_subscriptions_path }
         .ak-field-group
           %label
@@ -49,6 +50,7 @@
     - else
       %h4.empty-subscriptions
         No linked namespaces
+      %p= s_('Integrations|Namespaces are your GitLab groups and subgroups that will be linked to this Jira instance.')
 
   %p.browser-limitations-notice
     %strong Browser limitations:

app/views/layouts/jira_connect.html.haml

@@ -3,6 +3,7 @@
     %meta{ content: "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
     %title
       GitLab
+    - unless new_jira_connect_ui?
       = stylesheet_link_tag 'https://unpkg.com/@atlaskit/css-reset@3.0.6/dist/bundle.css'
       = stylesheet_link_tag 'https://unpkg.com/@atlaskit/reduced-ui-pack@10.5.5/dist/bundle.css'
     = yield :page_specific_styles

config/feature_flags/development/new_jira_connect_ui.yml

+---
+name: new_jira_connect_ui
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/50692
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/295647
+milestone: '13.8'
+type: development
+group: group::ecosystem
+default_enabled: false

locale/gitlab.pot

@@ -15135,6 +15135,12 @@ msgstr ""
 msgid "Integrations|Issues created in Jira are shown here once you have created the issues in project setup in Jira."
 msgstr ""
 
+msgid "Integrations|Linked namespaces"
+msgstr ""
+
+msgid "Integrations|Namespaces are your GitLab groups and subgroups that will be linked to this Jira instance."
+msgstr ""
+
 msgid "Integrations|Projects using custom settings will not be affected."
 msgstr ""
 

spec/frontend/jira_connect/components/app_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import JiraConnectApp from '~/jira_connect/components/app.vue';
+
+describe('JiraConnectApp', () => {
+  let wrapper;
+
+  const createComponent = (options = {}) => {
+    wrapper = shallowMount(JiraConnectApp, {
+      provide: {
+        glFeatures: { newJiraConnectUi: true },
+      },
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findHeader = () => wrapper.find('h3');
+  const findHeaderText = () => findHeader().text();
+
+  describe('template', () => {
+    it('renders new UI', () => {
+      createComponent();
+
+      expect(findHeader().exists()).toBe(true);
+      expect(findHeaderText()).toBe('Linked namespaces');
+    });
+
+    describe('newJiraConnectUi is false', () => {
+      it('does not render new UI', () => {
+        createComponent({
+          provide: {
+            glFeatures: { newJiraConnectUi: false },
+          },
+        });
+
+        expect(findHeader().exists()).toBe(false);
+      });
+    });
+  });
+});