1 files changed, 174 insertions, 0 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
new file mode 100644
index 00000000000..66fcb8e10eb
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
@@ -0,0 +1,174 @@
+<script>
+import { GlFormGroup, GlButton, GlFormInput, GlForm, GlAlert } from '@gitlab/ui';
+import {
+  CREATE_BRANCH_ERROR_GENERIC,
+  CREATE_BRANCH_ERROR_WITH_CONTEXT,
+  I18N_NEW_BRANCH_LABEL_DROPDOWN,
+  I18N_NEW_BRANCH_LABEL_BRANCH,
+  I18N_NEW_BRANCH_LABEL_SOURCE,
+  I18N_NEW_BRANCH_SUBMIT_BUTTON_TEXT,
+} from '../constants';
+import createBranchMutation from '../graphql/mutations/create_branch.mutation.graphql';
+import ProjectDropdown from './project_dropdown.vue';
+import SourceBranchDropdown from './source_branch_dropdown.vue';
+
+const DEFAULT_ALERT_VARIANT = 'danger';
+const DEFAULT_ALERT_PARAMS = {
+  title: '',
+  message: '',
+  variant: DEFAULT_ALERT_VARIANT,
+};
+
+export default {
+  name: 'JiraConnectNewBranch',
+  components: {
+    GlFormGroup,
+    GlButton,
+    GlFormInput,
+    GlForm,
+    GlAlert,
+    ProjectDropdown,
+    SourceBranchDropdown,
+  },
+  inject: ['initialBranchName'],
+  data() {
+    return {
+      selectedProject: null,
+      selectedSourceBranchName: null,
+      branchName: this.initialBranchName,
+      createBranchLoading: false,
+      alertParams: {
+        ...DEFAULT_ALERT_PARAMS,
+      },
+    };
+  },
+  computed: {
+    selectedProjectId() {
+      return this.selectedProject?.id;
+    },
+    showAlert() {
+      return Boolean(this.alertParams?.message);
+    },
+    disableSubmitButton() {
+      return !(this.selectedProject && this.selectedSourceBranchName && this.branchName);
+    },
+  },
+  methods: {
+    displayAlert({ title, message, variant = DEFAULT_ALERT_VARIANT } = {}) {
+      this.alertParams = {
+        title,
+        message,
+        variant,
+      };
+    },
+    onAlertDismiss() {
+      this.alertParams = {
+        ...DEFAULT_ALERT_PARAMS,
+      };
+    },
+    onProjectSelect(project) {
+      this.selectedProject = project;
+      this.selectedSourceBranchName = null; // reset branch selection
+    },
+    onSourceBranchSelect(branchName) {
+      this.selectedSourceBranchName = branchName;
+    },
+    onError({ title, message } = {}) {
+      this.displayAlert({
+        message,
+        title,
+      });
+    },
+    onSubmit() {
+      this.createBranch();
+    },
+    async createBranch() {
+      this.createBranchLoading = true;
+
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: createBranchMutation,
+          variables: {
+            name: this.branchName,
+            ref: this.selectedSourceBranchName,
+            projectPath: this.selectedProject.fullPath,
+          },
+        });
+        const { errors } = data.createBranch;
+        if (errors.length > 0) {
+          this.onError({
+            title: CREATE_BRANCH_ERROR_WITH_CONTEXT,
+            message: errors[0],
+          });
+        } else {
+          this.$emit('success');
+        }
+      } catch (e) {
+        this.onError({
+          message: CREATE_BRANCH_ERROR_GENERIC,
+        });
+      }
+
+      this.createBranchLoading = false;
+    },
+  },
+  i18n: {
+    I18N_NEW_BRANCH_LABEL_DROPDOWN,
+    I18N_NEW_BRANCH_LABEL_BRANCH,
+    I18N_NEW_BRANCH_LABEL_SOURCE,
+    I18N_NEW_BRANCH_SUBMIT_BUTTON_TEXT,
+  },
+};
+</script>
+<template>
+  <gl-form @submit.prevent="onSubmit">
+    <gl-alert
+      v-if="showAlert"
+      class="gl-mb-5"
+      :variant="alertParams.variant"
+      :title="alertParams.title"
+      @dismiss="onAlertDismiss"
+    >
+      {{ 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-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>
+
+    <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>
+</template>