Prepare common Vue app for Repository header area

What does this MR do and why?

This MR is a part of a bigger effort that aims to consolidate various tiny Vue apps in the header area of tree and blob view into one common Vue application.

Note: There's a potential for refactor, but that part will be handled in the following issues within &13018. The MRs for #497051 (closed) goal is to move everything as is.

Even though the end result should not change any UI and behaviour, it is quite a ride To ensure nothing breaks in the meantime:

• all changes are behind a common_repository_blob_header_app=true URL param
• elements are being moved in batches, what you're reviewing may not yet look like the old version
• breaking the work into smaller parts means that feature tests won't pass, due to missing UI elements. That is why I decided to stub the ff and take care of the feature tests in the last step, after all other MRs are merged
• please make sure you give it a go and thoroughly test all the buttons

The breakdown of #497051 (closed) MRs:

step	status
introduce ff & move first batch of controls, move web ide button for tree header, recreate projects/tree/lock_link in Vue
move code buttons (desktop & mobile) for tree header
move contents of app/views/projects/blob/_breadcrumb.html.haml
turn on feature tests for when the ff is true

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Context	Before	After
tree: old version with multiple Vue apps
blob: old version with multiple Vue apps
tree: different ref than root ref (ff off vs. ff on)
blob

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Go to Project overview or Code / Repository
2. Add common_repository_blob_header_app=true param to the URL
3. Make sure you can switch Git revision to a different name or branch
4. After point 3 you should see Compare button. Make sure it redirects to Compare revisions page with correct data
5. Go back to project overview
6. Click + button next to the project's breadcrumbs and try adding a file or a branch.
7. Click History button and make sure it opens Commits page for a revision you've selected in point 2
8. Go back to project overview
9. Click Find file button and make sure it opens the search modal with ~ prefix for searching for files
10. Select a file from the tree list
11. Make sure you can see blob controls on the right: Find file, Blame, History and Permalink. Check their behaviour.
12. Optional: with Vue browser extension make sure you can see HeaderArea app. Then refresh the page to get the legacy blob view. The Vue extension should then list the old structure (that's the part to be moved in 4th MR from the breakdown table ). Here's how it should look like:

new blob	legacy blob

Related to #497051 (closed)

app/assets/javascripts/repository/components/header_area.vue

 <script>
-import { GlButton } from '@gitlab/ui';
-import { escapeFileUrl } from '~/lib/utils/url_utility';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import Shortcuts from '~/behaviors/shortcuts/shortcuts';
+import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
+import { keysFor, START_SEARCH_PROJECT_FILE } from '~/behaviors/shortcuts/keybindings';
+import { sanitize } from '~/lib/dompurify';
+import { InternalEvents } from '~/tracking';
+import { FIND_FILE_BUTTON_CLICK } from '~/tracking/constants';
+import { escapeFileUrl, visitUrl } from '~/lib/utils/url_utility';
+import { generateRefDestinationPath } from '~/repository/utils/ref_switcher_utils';
+import RefSelector from '~/ref/components/ref_selector.vue';
 import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
 import BlobControls from '~/repository/components/header_area/blob_controls.vue';
 
 export default {
   name: 'HeaderArea',
+  i18n: {
+    compare: __('Compare'),
+    findFile: __('Find file'),
+    history: __('History'),
+  },
+  buttonClassList: 'sm:gl-w-auto gl-w-full sm:gl-mt-0 gl-mt-3',
   components: {
     GlButton,
+    RefSelector,
     Breadcrumbs,
     BlobControls,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: [
     'canCollaborate',
     'canEditTree',
@@ -25,9 +44,10 @@ export default {
     'forkUploadBlobPath',
     'uploadPath',
     'newDirPath',
+    'projectRootPath',
+    'comparePath',
   ],
   props: {
-    // for blob controls
     projectPath: {
       type: String,
       required: true,
@@ -41,8 +61,20 @@ export default {
       type: String,
       required: true,
     },
+    projectId: {
+      type: String,
+      required: true,
+    },
+    refSelectorValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
+    isTreeView() {
+      return this.$route.name === 'treePathDecoded';
+    },
     historyPath() {
       const url = new URL(window.location.href);
       url.pathname = `${this.historyLink}/${
@@ -58,12 +90,44 @@ export default {
     currentPath() {
       return this.$route.params.path;
     },
+    refSelectorQueryParams() {
+      return {
+        sort: 'updated_desc',
+      };
+    },
+    findFileTooltip() {
+      const { description } = START_SEARCH_PROJECT_FILE;
+      const key = this.findFileShortcutKey;
+      return shouldDisableShortcuts()
+        ? null
+        : sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`);
+    },
+    findFileShortcutKey() {
+      return keysFor(START_SEARCH_PROJECT_FILE)[0];
+    },
+  },
+  methods: {
+    onInput(selectedRef) {
+      visitUrl(generateRefDestinationPath(this.projectRootPath, this.originalBranch, selectedRef));
+    },
+    handleFindFile() {
+      InternalEvents.trackEvent(FIND_FILE_BUTTON_CLICK);
+      Shortcuts.focusSearchFile();
+    },
   },
 };
 </script>
 
 <template>
-  <section>
+  <section class="gl-flex gl-flex-col gl-items-stretch gl-gap-5 sm:gl-flex-row">
+    <ref-selector
+      class="gl-max-w-26"
+      :project-id="projectId"
+      :value="refSelectorValue"
+      use-symbolic-ref-names
+      :query-params="refSelectorQueryParams"
+      @input="onInput"
+    />
     <breadcrumbs
       :current-path="currentPath"
       :ref-type="getRefType"
@@ -81,7 +145,35 @@ export default {
       :upload-path="uploadPath"
       :new-dir-path="newDirPath"
     />
-    <gl-button :href="historyPath">{{ __('History') }}</gl-button>
+
+    <!-- Tree controls -->
+    <div v-if="isTreeView" class="gl-mb-3 gl-flex gl-flex-wrap gl-gap-3 sm:gl-mb-0">
+      <!-- EE: = render_if_exists 'projects/tree/lock_link' -->
+      <!-- = render 'projects/buttons/compare' -->
+      <gl-button
+        v-if="comparePath"
+        data-testid="tree-compare-control"
+        :href="comparePath"
+        class="shortcuts-compare"
+        >{{ $options.i18n.compare }}</gl-button
+      >
+      <gl-button :href="historyPath" data-testid="tree-history-control">{{
+        $options.i18n.history
+      }}</gl-button>
+      <gl-button
+        v-gl-tooltip.html="findFileTooltip"
+        :aria-keyshortcuts="findFileShortcutKey"
+        data-testid="tree-find-file-control"
+        :class="$options.buttonClassList"
+        @click="handleFindFile"
+      >
+        {{ $options.i18n.findFile }}
+      </gl-button>
+      <!-- web ide for tree -->
+      <!-- code for tree + mobile panel -->
+    </div>
+
+    <!-- Blob controls -->
     <blob-controls :project-path="projectPath" :ref-type="getRefType" />
   </section>
 </template>