Add branch switcher UI to the pipeline editor [RUN ALL RSPEC] [RUN AS-IF-FOSS]

What does this MR do?

For #321655 (closed)

This is an iterative step that adds the dropdown UI for the branch switcher in the pipeline editor. Functionality and loading of data from the backend will be added in future MRs.

The backend dependency for this issue is still in development, so this feature uses a client resolver for now and is hidden behind the :pipeline-editor-branch-switcher feature flag.

The breakdown of the implementation for this issue is as follows:

State	Progress
you are here	Add dropdown UI to the pipeline editor
WIP	When clicking on a branch, switch to that branch and load the correct data
TODO	Special Case: add branch switcher to empty state
TODO	Fetch the branch list from GraphQL (when query is available)

Screenshots

State	Screenshot
Branch Switcher
Show list of branches
Failed to fetch branch list

Branch Switcher

Does this MR meet the acceptance criteria?

Conformity

• Does this MR need a changelog?
  • I have included a changelog entry.
  • I have not included a changelog entry because this feature is behind a feature flag.
• [-] Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• [-] Database guides
• [-] Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• [-] Label as security and @ mention @gitlab-com/gl-security/appsec
• [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• [-] Security reports checked/validated by a reviewer from the AppSec team

app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue

+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import getAvailableBranches from '~/pipeline_editor/graphql/queries/available_branches.graphql';
+import getCurrentBranch from '~/pipeline_editor/graphql/queries/client/current_branch.graphql';
+
+export default {
+  i18n: {
+    title: s__('PipelineEditor|Branches'),
+  },
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownSectionHeader,
+    GlIcon,
+  },
+  inject: ['projectFullPath'],
+  apollo: {
+    branches: {
+      query: getAvailableBranches,
+      variables() {
+        return {
+          projectFullPath: this.projectFullPath,
+        };
+      },
+      update: (data) => {
+        return data.project?.repository?.branches || [];
+      },
+      error() {
+        this.hasError = true;
+      },
+    },
+    currentBranch: {
+      query: getCurrentBranch,
+    },
+  },
+  computed: {
+    hasBranchList() {
+      return this.branches?.length > 1;
+    },
+    branchListWithoutCurrentBranch() {
+      return this.branches.filter((branch) => branch.name !== this.currentBranch);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown v-if="hasBranchList" class="gl-ml-2" :text="currentBranch" icon="branch">
+    <gl-dropdown-section-header>
+      {{ this.$options.i18n.title }}
+    </gl-dropdown-section-header>
+    <gl-dropdown-item>
+      <gl-icon name="check" />
+      {{ currentBranch }}
+    </gl-dropdown-item>
+    <gl-dropdown-item v-for="branch in branchListWithoutCurrentBranch" :key="branch.name">
+      <gl-icon name="check" class="gl-visibility-hidden" />
+      {{ branch.name }}
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>