Add empty state and remove old HAML views

Add changelog

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

 <script>
-import { GlButton, GlTable } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
 import { removeSubscription } from '~/jira_connect/api';
 import { reloadPage } from '~/jira_connect/utils';
 import { __, s__ } from '~/locale';
@@ -9,6 +10,7 @@ import GroupItemName from './group_item_name.vue';
 export default {
   components: {
     GlButton,
+    GlEmptyState,
     GlTable,
     GroupItemName,
     TimeagoTooltip,
@@ -33,7 +35,14 @@ export default {
       label: '',
     },
   ],
+  i18n: {
+    emptyTitle: s__('Integrations|No linked namespaces'),
+    emptyDescription: s__(
+      'Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.',
+    ),
+  },
   methods: {
+    isEmpty,
     onClick(item) {
       removeSubscription(item.unlink_path)
         .then(() => {
@@ -47,17 +56,24 @@ export default {
 </script>
 
 <template>
-  <gl-table :items="subscriptions" :fields="$options.fields">
-    <template #cell(name)="{ item }">
-      <group-item-name :group="item.group" />
-    </template>
-    <template #cell(created_at)="{ item }">
-      <timeago-tooltip :time="item.created_at" />
-    </template>
-    <template #cell(actions)="{ item }">
-      <gl-button category="secondary" :loading="false" @click.prevent="onClick(item)">{{
-        __('Unlink')
-      }}</gl-button>
-    </template>
-  </gl-table>
+  <div>
+    <gl-empty-state
+      v-if="isEmpty(subscriptions)"
+      :title="$options.i18n.emptyTitle"
+      :description="$options.i18n.emptyDescription"
+    />
+    <gl-table v-else :items="subscriptions" :fields="$options.fields">
+      <template #cell(name)="{ item }">
+        <group-item-name :group="item.group" />
+      </template>
+      <template #cell(created_at)="{ item }">
+        <timeago-tooltip :time="item.created_at" />
+      </template>
+      <template #cell(actions)="{ item }">
+        <gl-button category="secondary" :loading="false" @click.prevent="onClick(item)">{{
+          __('Unlink')
+        }}</gl-button>
+      </template>
+    </gl-table>
+  </div>
 </template>

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

@@ -22,25 +22,6 @@
   - else
     .js-jira-connect-app{ data: jira_connect_app_data(@subscriptions) }
 
-    .jira-connect-app-body
-      - if @subscriptions.present?
-        %table.subscriptions.gl-w-full
-          %thead
-            %tr
-              %th= _('Namespace')
-              %th= _('Added')
-              %th
-          %tbody
-            - @subscriptions.each do |subscription|
-              %tr
-                %td= subscription.namespace.full_path
-                %td= subscription.created_at
-                %td= link_to _('Remove'), jira_connect_subscription_path(subscription), class: 'js-jira-connect-remove-subscription'
-      - else
-        .gl-text-center
-          %h4= s_('Integrations|No linked namespaces')
-          %p= s_('Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.')
-
   %p.jira-connect-app-body.gl-mt-7.gl-font-base.gl-text-center
     %strong= s_('Integrations|Browser limitations')
     - firefox_link_url = 'https://www.mozilla.org/en-US/firefox/'

changelogs/unreleased/321441-gitlab-connect-application-namespace-list-polish.yml

+---
+title: Update Jira subscriptions list to use Vue
+merge_request: 57561
+author:
+type: changed