Add latest changes from gitlab-org/gitlab@master

4 files changed, 116 insertions, 78 deletions

diff --git a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
index b2cc3a315cc..66fcb8e10eb 100644
--- a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
@@ -3,8 +3,6 @@ import { GlFormGroup, GlButton, GlFormInput, GlForm, GlAlert } from '@gitlab/ui'
 import {
   CREATE_BRANCH_ERROR_GENERIC,
   CREATE_BRANCH_ERROR_WITH_CONTEXT,
-  CREATE_BRANCH_SUCCESS_ALERT,
-  I18N_NEW_BRANCH_PAGE_TITLE,
   I18N_NEW_BRANCH_LABEL_DROPDOWN,
   I18N_NEW_BRANCH_LABEL_BRANCH,
   I18N_NEW_BRANCH_LABEL_SOURCE,
@@ -19,8 +17,6 @@ const DEFAULT_ALERT_PARAMS = {
   title: '',
   message: '',
   variant: DEFAULT_ALERT_VARIANT,
-  primaryButtonLink: '',
-  primaryButtonText: '',
 };
 
 export default {
@@ -34,13 +30,7 @@ export default {
     ProjectDropdown,
     SourceBranchDropdown,
   },
-  props: {
-    initialBranchName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
+  inject: ['initialBranchName'],
   data() {
     return {
       selectedProject: null,
@@ -111,10 +101,7 @@ export default {
             message: errors[0],
           });
         } else {
-          this.displayAlert({
-            ...CREATE_BRANCH_SUCCESS_ALERT,
-            variant: 'success',
-          });
+          this.$emit('success');
         }
       } catch (e) {
         this.onError({
@@ -126,7 +113,6 @@ export default {
     },
   },
   i18n: {
-    I18N_NEW_BRANCH_PAGE_TITLE,
     I18N_NEW_BRANCH_LABEL_DROPDOWN,
     I18N_NEW_BRANCH_LABEL_BRANCH,
     I18N_NEW_BRANCH_LABEL_SOURCE,
@@ -134,15 +120,8 @@ export default {
   },
 };
 </script>
-
 <template>
-  <div>
-    <div class="gl-border-1 gl-border-b-solid gl-border-gray-100 gl-mb-5 gl-mt-7">
-      <h1 class="page-title">
-        {{ $options.i18n.I18N_NEW_BRANCH_PAGE_TITLE }}
-      </h1>
-    </div>
-
+  <gl-form @submit.prevent="onSubmit">
     <gl-alert
       v-if="showAlert"
       class="gl-mb-5"
@@ -152,50 +131,44 @@ export default {
     >
       {{ alertParams.message }}
     </gl-alert>
+    <gl-form-group :label="$options.i18n.I18N_NEW_BRANCH_LABEL_DROPDOWN" label-for="project-select">
+      <project-dropdown
+        id="project-select"
+        :selected-project="selectedProject"
+        @change="onProjectSelect"
+        @error="onError"
+      />
+    </gl-form-group>
 
-    <gl-form @submit.prevent="onSubmit">
-      <gl-form-group
-        :label="$options.i18n.I18N_NEW_BRANCH_LABEL_DROPDOWN"
-        label-for="project-select"
-      >
-        <project-dropdown
-          id="project-select"
-          :selected-project="selectedProject"
-          @change="onProjectSelect"
-          @error="onError"
-        />
-      </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.I18N_NEW_BRANCH_LABEL_BRANCH"
+      label-for="branch-name-input"
+    >
+      <gl-form-input id="branch-name-input" v-model="branchName" type="text" required />
+    </gl-form-group>
 
-      <gl-form-group
-        :label="$options.i18n.I18N_NEW_BRANCH_LABEL_BRANCH"
-        label-for="branch-name-input"
-      >
-        <gl-form-input id="branch-name-input" v-model="branchName" type="text" required />
-      </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.I18N_NEW_BRANCH_LABEL_SOURCE"
+      label-for="source-branch-select"
+    >
+      <source-branch-dropdown
+        id="source-branch-select"
+        :selected-project="selectedProject"
+        :selected-branch-name="selectedSourceBranchName"
+        @change="onSourceBranchSelect"
+        @error="onError"
+      />
+    </gl-form-group>
 
-      <gl-form-group
-        :label="$options.i18n.I18N_NEW_BRANCH_LABEL_SOURCE"
-        label-for="source-branch-select"
+    <div class="form-actions">
+      <gl-button
+        :loading="createBranchLoading"
+        type="submit"
+        variant="confirm"
+        :disabled="disableSubmitButton"
       >
-        <source-branch-dropdown
-          id="source-branch-select"
-          :selected-project="selectedProject"
-          :selected-branch-name="selectedSourceBranchName"
-          @change="onSourceBranchSelect"
-          @error="onError"
-        />
-      </gl-form-group>
-
-      <div class="form-actions">
-        <gl-button
-          :loading="createBranchLoading"
-          type="submit"
-          variant="confirm"
-          :disabled="disableSubmitButton"
-        >
-          {{ $options.i18n.I18N_NEW_BRANCH_SUBMIT_BUTTON_TEXT }}
-        </gl-button>
-      </div>
-    </gl-form>
-  </div>
+        {{ $options.i18n.I18N_NEW_BRANCH_SUBMIT_BUTTON_TEXT }}
+      </gl-button>
+    </div>
+  </gl-form>
 </template>
diff --git a/app/assets/javascripts/jira_connect/branches/constants.js b/app/assets/javascripts/jira_connect/branches/constants.js
index 7095f123a9e..ab9d3b2c110 100644
--- a/app/assets/javascripts/jira_connect/branches/constants.js
+++ b/app/assets/javascripts/jira_connect/branches/constants.js
@@ -3,7 +3,6 @@ import { __, s__ } from '~/locale';
 export const BRANCHES_PER_PAGE = 20;
 export const PROJECTS_PER_PAGE = 20;
 
-export const I18N_NEW_BRANCH_PAGE_TITLE = __('New branch');
 export const I18N_NEW_BRANCH_LABEL_DROPDOWN = __('Project');
 export const I18N_NEW_BRANCH_LABEL_BRANCH = __('Branch name');
 export const I18N_NEW_BRANCH_LABEL_SOURCE = __('Source branch');
@@ -14,7 +13,13 @@ export const CREATE_BRANCH_ERROR_GENERIC = s__(
 );
 export const CREATE_BRANCH_ERROR_WITH_CONTEXT = s__('JiraConnect|Failed to create branch.');
 
-export const CREATE_BRANCH_SUCCESS_ALERT = {
-  title: s__('JiraConnect|New branch was successfully created.'),
-  message: s__('JiraConnect|You can now close this window and return to Jira.'),
-};
+export const I18N_PAGE_TITLE_WITH_BRANCH_NAME = s__(
+  'JiraConnect|Create branch for Jira issue %{jiraIssue}',
+);
+export const I18N_PAGE_TITLE_DEFAULT = __('New branch');
+export const I18N_NEW_BRANCH_SUCCESS_TITLE = s__(
+  'JiraConnect|New branch was successfully created.',
+);
+export const I18N_NEW_BRANCH_SUCCESS_MESSAGE = s__(
+  'JiraConnect|You can now close this window and return to Jira.',
+);
diff --git a/app/assets/javascripts/jira_connect/branches/index.js b/app/assets/javascripts/jira_connect/branches/index.js
index b8fe255e310..95bd4f5c675 100644
--- a/app/assets/javascripts/jira_connect/branches/index.js
+++ b/app/assets/javascripts/jira_connect/branches/index.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import JiraConnectNewBranchForm from '~/jira_connect/branches/components/new_branch_form.vue';
+import JiraConnectNewBranchPage from '~/jira_connect/branches/pages/index.vue';
 import createDefaultClient from '~/lib/graphql';
 
 Vue.use(VueApollo);
@@ -11,7 +11,7 @@ export default async function initJiraConnectBranches() {
     return null;
   }
 
-  const { initialBranchName } = el.dataset;
+  const { initialBranchName, successStateSvgPath } = el.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(
@@ -25,12 +25,12 @@ export default async function initJiraConnectBranches() {
   return new Vue({
     el,
     apolloProvider,
+    provide: {
+      initialBranchName,
+      successStateSvgPath,
+    },
     render(createElement) {
-      return createElement(JiraConnectNewBranchForm, {
-        props: {
-          initialBranchName,
-        },
-      });
+      return createElement(JiraConnectNewBranchPage);
     },
   });
 }
diff --git a/app/assets/javascripts/jira_connect/branches/pages/index.vue b/app/assets/javascripts/jira_connect/branches/pages/index.vue
new file mode 100644
index 00000000000..d72dec6cdee
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/branches/pages/index.vue
@@ -0,0 +1,60 @@
+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import { sprintf } from '~/locale';
+import NewBranchForm from '../components/new_branch_form.vue';
+import {
+  I18N_PAGE_TITLE_WITH_BRANCH_NAME,
+  I18N_PAGE_TITLE_DEFAULT,
+  I18N_NEW_BRANCH_SUCCESS_TITLE,
+  I18N_NEW_BRANCH_SUCCESS_MESSAGE,
+} from '../constants';
+
+export default {
+  components: {
+    GlEmptyState,
+    NewBranchForm,
+  },
+  inject: ['initialBranchName', 'successStateSvgPath'],
+  data() {
+    return {
+      showForm: true,
+    };
+  },
+  computed: {
+    pageTitle() {
+      return this.initialBranchName
+        ? sprintf(this.$options.i18n.I18N_PAGE_TITLE_WITH_BRANCH_NAME, {
+            jiraIssue: this.initialBranchName,
+          })
+        : this.$options.i18n.I18N_PAGE_TITLE_DEFAULT;
+    },
+  },
+  methods: {
+    onNewBranchFormSuccess() {
+      // light-weight toggle to hide the form and show the success state
+      this.showForm = false;
+    },
+  },
+  i18n: {
+    I18N_PAGE_TITLE_WITH_BRANCH_NAME,
+    I18N_PAGE_TITLE_DEFAULT,
+    I18N_NEW_BRANCH_SUCCESS_TITLE,
+    I18N_NEW_BRANCH_SUCCESS_MESSAGE,
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="gl-border-1 gl-border-b-solid gl-border-gray-100 gl-mb-5 gl-mt-7">
+      <h1 data-testid="page-title" class="page-title">{{ pageTitle }}</h1>
+    </div>
+
+    <new-branch-form v-if="showForm" @success="onNewBranchFormSuccess" />
+    <gl-empty-state
+      v-else
+      :title="$options.i18n.I18N_NEW_BRANCH_SUCCESS_TITLE"
+      :description="$options.i18n.I18N_NEW_BRANCH_SUCCESS_MESSAGE"
+      :svg-path="successStateSvgPath"
+    />
+  </div>
+</template>