Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

7 files changed, 161 insertions, 93 deletions

diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_button.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_button.vue
new file mode 100644
index 00000000000..0b286bc903f
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_button.vue
@@ -0,0 +1,24 @@
+<script>
+import { GlButton, GlModalDirective } from '@gitlab/ui';
+import { ADD_NAMESPACE_MODAL_ID } from '../constants';
+import AddNamespaceModal from './add_namespace_modal/add_namespace_modal.vue';
+
+export default {
+  components: {
+    GlButton,
+    AddNamespaceModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  ADD_NAMESPACE_MODAL_ID,
+};
+</script>
+<template>
+  <div>
+    <gl-button v-gl-modal="$options.ADD_NAMESPACE_MODAL_ID" category="primary" variant="info">
+      {{ s__('Integrations|Add namespace') }}
+    </gl-button>
+    <add-namespace-modal />
+  </div>
+</template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue
new file mode 100644
index 00000000000..0e209a09b16
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue
@@ -0,0 +1,26 @@
+<script>
+import { GlModal } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import { ADD_NAMESPACE_MODAL_ID } from '../../constants';
+import GroupsList from './groups_list.vue';
+
+export default {
+  components: { GlModal, GroupsList },
+  modal: {
+    id: ADD_NAMESPACE_MODAL_ID,
+    title: s__('Integrations|Link namespaces'),
+    cancelProps: {
+      text: __('Cancel'),
+    },
+  },
+};
+</script>
+<template>
+  <gl-modal
+    :modal-id="$options.modal.id"
+    :title="$options.modal.title"
+    :action-cancel="$options.modal.cancelProps"
+  >
+    <groups-list />
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/groups_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue
index 5a49d7c1a90..5a49d7c1a90 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/groups_list.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/groups_list_item.vue b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue
index ed7585e8a88..005c3bcd0e3 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/groups_list_item.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue
@@ -4,7 +4,7 @@ import { helpPagePath } from '~/helpers/help_page_helper';
 import { addSubscription } from '~/jira_connect/subscriptions/api';
 import { persistAlert, reloadPage } from '~/jira_connect/subscriptions/utils';
 import { s__ } from '~/locale';
-import GroupItemName from './group_item_name.vue';
+import GroupItemName from '../group_item_name.vue';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
index 413424be28d..c0504cbb645 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
@@ -1,65 +1,51 @@
 <script>
-import { GlAlert, GlButton, GlLink, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf, GlEmptyState } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
 import { mapState, mapMutations } from 'vuex';
-import { retrieveAlert, getLocation } from '~/jira_connect/subscriptions/utils';
-import { __ } from '~/locale';
+import { retrieveAlert } from '~/jira_connect/subscriptions/utils';
 import { SET_ALERT } from '../store/mutation_types';
-import GroupsList from './groups_list.vue';
 import SubscriptionsList from './subscriptions_list.vue';
+import AddNamespaceButton from './add_namespace_button.vue';
+import SignInButton from './sign_in_button.vue';
 
 export default {
   name: 'JiraConnectApp',
   components: {
     GlAlert,
-    GlButton,
     GlLink,
-    GlModal,
     GlSprintf,
-    GroupsList,
+    GlEmptyState,
     SubscriptionsList,
-  },
-  directives: {
-    GlModalDirective,
+    AddNamespaceButton,
+    SignInButton,
   },
   inject: {
     usersPath: {
       default: '',
     },
-  },
-  data() {
-    return {
-      location: '',
-    };
+    subscriptions: {
+      default: [],
+    },
   },
   computed: {
     ...mapState(['alert']),
-    usersPathWithReturnTo() {
-      if (this.location) {
-        return `${this.usersPath}?return_to=${this.location}`;
-      }
-
-      return this.usersPath;
-    },
     shouldShowAlert() {
       return Boolean(this.alert?.message);
     },
-  },
-  modal: {
-    cancelProps: {
-      text: __('Cancel'),
+    hasSubscriptions() {
+      return !isEmpty(this.subscriptions);
+    },
+    userSignedIn() {
+      return Boolean(!this.usersPath);
     },
   },
   created() {
     this.setInitialAlert();
-    this.setLocation();
   },
   methods: {
     ...mapMutations({
       setAlert: SET_ALERT,
     }),
-    async setLocation() {
-      this.location = await getLocation();
-    },
     setInitialAlert() {
       const { linkUrl, title, message, variant } = retrieveAlert() || {};
       this.setAlert({ linkUrl, title, message, variant });
@@ -88,38 +74,44 @@ export default {
       </template>
     </gl-alert>
 
-    <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
+    <h2 class="gl-text-center gl-mb-7">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
+    <div class="jira-connect-app-body gl-mx-auto gl-px-5 gl-mb-7">
+      <template v-if="hasSubscriptions">
+        <div class="gl-display-flex gl-justify-content-end">
+          <sign-in-button v-if="!userSignedIn" :users-path="usersPath" />
+          <add-namespace-button v-else />
+        </div>
 
-    <div class="jira-connect-app-body gl-my-7 gl-px-5 gl-pb-4">
-      <div class="gl-display-flex gl-justify-content-end">
-        <gl-button
-          v-if="usersPath"
-          category="primary"
-          variant="info"
-          class="gl-align-self-center"
-          :href="usersPathWithReturnTo"
-          target="_blank"
-          >{{ s__('Integrations|Sign in to add namespaces') }}</gl-button
+        <subscriptions-list />
+      </template>
+      <template v-else>
+        <div v-if="!userSignedIn" class="gl-text-center">
+          <p class="gl-mb-7">{{ s__('JiraService|Sign in to GitLab.com to get started.') }}</p>
+          <sign-in-button class="gl-mb-7" :users-path="usersPath">
+            {{ __('Sign in to GitLab') }}
+          </sign-in-button>
+          <p>
+            {{
+              s__(
+                'Integrations|Note: this integration only works with accounts on GitLab.com (SaaS).',
+              )
+            }}
+          </p>
+        </div>
+        <gl-empty-state
+          v-else
+          :title="s__('Integrations|No linked namespaces')"
+          :description="
+            s__(
+              'Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.',
+            )
+          "
         >
-        <template v-else>
-          <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>
-        </template>
-      </div>
-
-      <subscriptions-list />
+          <template #actions>
+            <add-namespace-button />
+          </template>
+        </gl-empty-state>
+      </template>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue
new file mode 100644
index 00000000000..dc0a77e99c2
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/sign_in_button.vue
@@ -0,0 +1,36 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { getGitlabSignInURL } from '~/jira_connect/subscriptions/utils';
+
+export default {
+  components: {
+    GlButton,
+  },
+  props: {
+    usersPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      signInURL: '',
+    };
+  },
+  created() {
+    this.setSignInURL();
+  },
+  methods: {
+    async setSignInURL() {
+      this.signInURL = await getGitlabSignInURL(this.usersPath);
+    },
+  },
+};
+</script>
+<template>
+  <gl-button category="primary" variant="info" :href="signInURL" target="_blank">
+    <slot>
+      {{ s__('Integrations|Sign in to add namespaces') }}
+    </slot>
+  </gl-button>
+</template>
diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue b/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue
index 7062fb370ed..33126040c16 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/subscriptions_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
+import { GlButton, GlTable } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { mapMutations } from 'vuex';
 import { removeSubscription } from '~/jira_connect/subscriptions/api';
@@ -12,7 +12,6 @@ import GroupItemName from './group_item_name.vue';
 export default {
   components: {
     GlButton,
-    GlEmptyState,
     GlTable,
     GroupItemName,
     TimeagoTooltip,
@@ -44,17 +43,15 @@ export default {
     },
   ],
   i18n: {
-    emptyTitle: s__('Integrations|No linked namespaces'),
-    emptyDescription: s__(
-      'Integrations|Namespaces are the GitLab groups and subgroups you link to this Jira instance.',
-    ),
     unlinkError: s__('Integrations|Failed to unlink namespace. Please try again.'),
   },
   methods: {
     ...mapMutations({
       setAlert: SET_ALERT,
     }),
-    isEmpty,
+    isUnlinkButtonDisabled(item) {
+      return !isEmpty(item);
+    },
     isLoadingItem(item) {
       return this.loadingItem === item;
     },
@@ -81,29 +78,22 @@ export default {
 </script>
 
 <template>
-  <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
-          :class="unlinkBtnClass(item)"
-          category="secondary"
-          :loading="isLoadingItem(item)"
-          :disabled="!isEmpty(loadingItem)"
-          @click.prevent="onClick(item)"
-          >{{ __('Unlink') }}</gl-button
-        >
-      </template>
-    </gl-table>
-  </div>
+  <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
+        :class="unlinkBtnClass(item)"
+        category="secondary"
+        :loading="isLoadingItem(item)"
+        :disabled="isUnlinkButtonDisabled(loadingItem)"
+        @click.prevent="onClick(item)"
+        >{{ __('Unlink') }}</gl-button
+      >
+    </template>
+  </gl-table>
 </template>