1 files changed, 52 insertions, 5 deletions
diff --git a/app/assets/javascripts/jira_connect/components/app.vue b/app/assets/javascripts/jira_connect/components/app.vue
index 490bf2fdd66..f5bf30f4488 100644
--- a/app/assets/javascripts/jira_connect/components/app.vue
+++ b/app/assets/javascripts/jira_connect/components/app.vue
@@ -1,16 +1,63 @@
 <script>
+import { mapState } from 'vuex';
+import { GlAlert, GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import GroupsList from './groups_list.vue';
+
 export default {
   name: 'JiraConnectApp',
+  components: {
+    GlAlert,
+    GlButton,
+    GlModal,
+    GroupsList,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  mixins: [glFeatureFlagsMixin()],
   computed: {
-    state() {
-      return this.$root.$data.state || {};
+    ...mapState(['errorMessage']),
+    showNewUI() {
+      return this.glFeatures.newJiraConnectUi;
     },
-    error() {
-      return this.state.error;
+  },
+  modal: {
+    cancelProps: {
+      text: __('Cancel'),
     },
   },
 };
 </script>
+
 <template>
-  <div></div>
+  <div>
+    <gl-alert v-if="errorMessage" class="gl-mb-6" variant="danger" :dismissible="false">
+      {{ errorMessage }}
+    </gl-alert>
+
+    <h1>GitLab for Jira Configuration</h1>
+
+    <div
+      v-if="showNewUI"
+      class="gl-display-flex gl-justify-content-space-between gl-my-5 gl-pb-4 gl-border-b-solid gl-border-b-1 gl-border-b-gray-200"
+    >
+      <h3 data-testid="new-jira-connect-ui-heading">{{ s__('Integrations|Linked namespaces') }}</h3>
+      <gl-button
+        v-gl-modal-directive="'add-namespace-modal'"
+        category="primary"
+        variant="info"
+        class="gl-align-self-center"
+        >{{ s__('Integrations|Add namespace') }}</gl-button
+      >
+      <gl-modal
+        modal-id="add-namespace-modal"
+        :title="s__('Integrations|Link namespaces')"
+        :action-cancel="$options.modal.cancelProps"
+      >
+        <groups-list />
+      </gl-modal>
+    </div>
+  </div>
 </template>