Add history button to header area app

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

+<script>
+import { GlButton } from '@gitlab/ui';
+import { escapeFileUrl } from '~/lib/utils/url_utility';
+import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
+import BlobControls from '~/repository/components/header_area/blob_controls.vue';
+
+export default {
+  name: 'HeaderArea',
+  components: {
+    GlButton,
+    Breadcrumbs,
+    BlobControls,
+  },
+  props: {
+    // for blob controls
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    refType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    historyLink: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    historyPath() {
+      const url = new URL(window.location.href);
+      url.pathname = `${this.historyLink}/${
+        this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
+      }`;
+      url.searchParams.set('ref_type', this.$route.meta.refType || this.$route.query.ref_type);
+
+      return url.href;
+    },
+  },
+};
+</script>
+
+<template>
+  <section>
+    <breadcrumbs />
+    <gl-button :href="historyPath">{{ __('History') }}</gl-button>
+    <blob-controls :project-path="projectPath" :ref-type="refType" />
+  </section>
+</template>

app/assets/javascripts/repository/index.js

@@ -16,6 +16,7 @@ import Breadcrumbs from './components/header_area/breadcrumbs.vue';
 import ForkInfo from './components/fork_info.vue';
 import LastCommit from './components/last_commit.vue';
 import BlobControls from './components/header_area/blob_controls.vue';
+import HeaderArea from './components/header_area.vue';
 import apolloProvider from './graphql';
 import commitsQuery from './queries/commits.query.graphql';
 import projectPathQuery from './queries/project_path.query.graphql';
@@ -202,6 +203,26 @@ export default function setupVueRepositoryList() {
   initRefSwitcher();
   initForkInfo();
 
+  const headerEl = document.getElementById('js-repository-blob-header-app');
+  if (headerEl) {
+    const { historyLink } = headerEl.dataset;
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: headerEl,
+      router,
+      render(h) {
+        return h(HeaderArea, {
+          props: {
+            projectPath,
+            refType: this.$route.meta.refType || this.$route.query.ref_type,
+            historyLink,
+          },
+        });
+      },
+    });
+  }
+
   router.afterEach(({ params: { path } }) => {
     setTitle(path, ref, fullName);
   });
@@ -258,31 +279,33 @@ export default function setupVueRepositoryList() {
   }
 
   const treeHistoryLinkEl = document.getElementById('js-tree-history-link');
-  const { historyLink } = treeHistoryLinkEl.dataset;
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: treeHistoryLinkEl,
-    router,
-    render(h) {
-      const url = new URL(window.location.href);
-      url.pathname = `${historyLink}/${
-        this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
-      }`;
-      url.searchParams.set('ref_type', this.$route.meta.refType || this.$route.query.ref_type);
-      return h(
-        GlButton,
-        {
-          attrs: {
-            href: url.href,
-            // Ideally passing this class to `props` should work
-            // But it doesn't work here. :(
-            class: 'btn btn-default btn-md gl-button',
+  if (treeHistoryLinkEl) {
+    const { historyLink } = treeHistoryLinkEl.dataset;
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: treeHistoryLinkEl,
+      router,
+      render(h) {
+        const url = new URL(window.location.href);
+        url.pathname = `${historyLink}/${
+          this.$route.params.path ? escapeFileUrl(this.$route.params.path) : ''
+        }`;
+        url.searchParams.set('ref_type', this.$route.meta.refType || this.$route.query.ref_type);
+        return h(
+          GlButton,
+          {
+            attrs: {
+              href: url.href,
+              // Ideally passing this class to `props` should work
+              // But it doesn't work here. :(
+              class: 'btn btn-default btn-md gl-button',
+            },
           },
-        },
-        [__('History')],
-      );
-    },
-  });
+          [__('History')],
+        );
+      },
+    });
+  }
 
   initWebIdeLink({ el: document.getElementById('js-tree-web-ide-link'), router });
 

app/views/projects/tree/_tree_header.html.haml

 - add_page_specific_style 'page_bundles/projects'
 
-.tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
-  .tree-ref-holder.gl-max-w-26{ data: { testid: 'ref-dropdown-container' } }
-    #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
+- if Feature.enabled?(:common_repository_blob_header_app, current_user)
+  #js-repository-blob-header-app{ data: { project_id: @project.id, ref_type: @ref_type.to_s, history_link: project_commits_path(@project, @ref) } }
 
-  #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
+- else
+  .tree-ref-container.gl-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
+    .tree-ref-holder.gl-max-w-26{ data: { testid: 'ref-dropdown-container' } }
+      #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
 
-#js-blob-controls
-.tree-controls
-  .gl-flex.gl-flex-wrap.gl-gap-3.gl-mb-3.sm:gl-mb-0
-    = render_if_exists 'projects/tree/lock_link'
-    = render 'projects/buttons/compare', project: @project, ref: @ref, root_ref: @repository&.root_ref
+    #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
 
-    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
+  #js-blob-controls
+  .tree-controls
+    .gl-flex.gl-flex-wrap.gl-gap-3.gl-mb-3.sm:gl-mb-0
+      = render_if_exists 'projects/tree/lock_link'
+      = render 'projects/buttons/compare', project: @project, ref: @ref, root_ref: @repository&.root_ref
 
-    = render 'projects/find_file_link'
-    = render 'shared/web_ide_button', blob: nil, css_classes: 'gl-w-full sm:gl-w-auto'
+      #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
-    .project-code-holder.gl-hidden.sm:gl-inline-block
-      = render "projects/buttons/code", dropdown_class: 'dropdown-menu-right', ref: @ref
+      = render 'projects/find_file_link'
+      = render 'shared/web_ide_button', blob: nil, css_classes: 'gl-w-full sm:gl-w-auto'
 
-  .project-code-holder.gl-flex.gl-gap-3{ class: 'sm:!gl-hidden' }
-    = render 'projects/buttons/download', project: @project, ref: @ref
-    = render "shared/mobile_clone_panel", ref: @ref
+      .project-code-holder.gl-hidden.sm:gl-inline-block
+        = render "projects/buttons/code", dropdown_class: 'dropdown-menu-right', ref: @ref
+
+    .project-code-holder.gl-flex.gl-gap-3{ class: 'sm:!gl-hidden' }
+      = render 'projects/buttons/download', project: @project, ref: @ref
+      = render "shared/mobile_clone_panel", ref: @ref

spec/frontend/repository/components/header_area_spec.js

+import { shallowMount, RouterLinkStub } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import HeaderArea from '~/repository/components/header_area.vue';
+import Breadcrumbs from '~/repository/components/header_area/breadcrumbs.vue';
+import BlobControls from '~/repository/components/header_area/blob_controls.vue';
+
+const defaultMockRoute = {
+  name: 'blobPath',
+};
+
+describe('HeaderArea', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    return shallowMount(HeaderArea, {
+      propsData: {
+        projectPath: 'test/project',
+        historyLink: '/history',
+        refType: 'branch',
+        ...props,
+      },
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
+      mocks: {
+        $route: {
+          defaultMockRoute,
+          params: {
+            path: '',
+          },
+          meta: {
+            refType: '',
+          },
+          query: {
+            ref_type: '',
+          },
+        },
+      },
+    });
+  };
+
+  it('renders the component', () => {
+    wrapper = createComponent();
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('renders Breadcrumbs component', () => {
+    wrapper = createComponent();
+    expect(wrapper.findComponent(Breadcrumbs).exists()).toBe(true);
+  });
+
+  it('renders BlobControls component with correct props', () => {
+    wrapper = createComponent({ refType: 'branch' });
+    const blobControls = wrapper.findComponent(BlobControls);
+    expect(blobControls.exists()).toBe(true);
+    expect(blobControls.props('projectPath')).toBe('test/project');
+    expect(blobControls.props('refType')).toBe('branch');
+  });
+
+  it('renders History button with correct href', () => {
+    wrapper = createComponent();
+    const historyButton = wrapper.findComponent(GlButton);
+    expect(historyButton.exists()).toBe(true);
+    expect(historyButton.attributes('href')).toContain('/history');
+  });
+});