Use feature flag on frontend to show new UI

- Only includes a simple header for now. More UI elements
to be added in later MRs
- Add some safe programming checks to make sure
JS doesn't fail when running on development as a
stand-alone page.

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

@@ -31,12 +31,14 @@ const initJiraFormHandlers = () => {
     alert(error);
   };
 
-  AP.getLocation((location) => {
-    $('.js-jira-connect-sign-in').each(function updateSignInLink() {
-      const updatedLink = `${$(this).attr('href')}?return_to=${location}`;
-      $(this).attr('href', updatedLink);
+  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 actionUrl = $(this).attr('action');

locale/gitlab.pot

@@ -15129,6 +15129,9 @@ 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 ""