1 files changed, 60 insertions, 0 deletions
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>