Add latest changes from gitlab-org/gitlab@master

3 files changed, 133 insertions, 0 deletions

diff --git a/app/assets/javascripts/repository/components/blob_controls.vue b/app/assets/javascripts/repository/components/blob_controls.vue
new file mode 100644
index 00000000000..4041315f5ec
--- /dev/null
+++ b/app/assets/javascripts/repository/components/blob_controls.vue
@@ -0,0 +1,98 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+import createFlash from '~/flash';
+import getRefMixin from '~/repository/mixins/get_ref';
+import { updateElementsVisibility } from '../utils/dom';
+import blobControlsQuery from '../queries/blob_controls.query.graphql';
+
+export default {
+  i18n: {
+    findFile: __('Find file'),
+    blame: __('Blame'),
+    history: __('History'),
+    permalink: __('Permalink'),
+    errorMessage: __('An error occurred while loading the blob controls.'),
+  },
+  buttonClassList: 'gl-sm-w-auto gl-w-full gl-sm-mt-0 gl-mt-3',
+  components: {
+    GlButton,
+  },
+  mixins: [getRefMixin],
+  apollo: {
+    project: {
+      query: blobControlsQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+          filePath: this.filePath,
+          ref: this.ref,
+        };
+      },
+      skip() {
+        return !this.filePath;
+      },
+      error() {
+        createFlash({ message: this.$options.i18n.errorMessage });
+      },
+    },
+  },
+  props: {
+    projectPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      project: {
+        repository: {
+          blobs: {
+            nodes: [
+              {
+                findFilePath: null,
+                blamePath: null,
+                historyPath: null,
+                permalinkPath: null,
+              },
+            ],
+          },
+        },
+      },
+    };
+  },
+  computed: {
+    filePath() {
+      const { path } = this.$route.params;
+      updateElementsVisibility('.tree-controls', !path);
+      return path;
+    },
+    blobInfo() {
+      return this.project?.repository?.blobs?.nodes[0] || {};
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="filePath">
+    <gl-button data-testid="find" :href="blobInfo.findFilePath" :class="$options.buttonClassList">
+      {{ $options.i18n.findFile }}
+    </gl-button>
+    <gl-button data-testid="blame" :href="blobInfo.blamePath" :class="$options.buttonClassList">
+      {{ $options.i18n.blame }}
+    </gl-button>
+
+    <gl-button data-testid="history" :href="blobInfo.historyPath" :class="$options.buttonClassList">
+      {{ $options.i18n.history }}
+    </gl-button>
+
+    <gl-button
+      data-testid="permalink"
+      :href="blobInfo.permalinkPath"
+      :class="$options.buttonClassList"
+    >
+      {{ $options.i18n.permalink }}
+    </gl-button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 197b19387cf..9946e1e302c 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -9,6 +9,7 @@ import App from './components/app.vue';
 import Breadcrumbs from './components/breadcrumbs.vue';
 import DirectoryDownloadLinks from './components/directory_download_links.vue';
 import LastCommit from './components/last_commit.vue';
+import BlobControls from './components/blob_controls.vue';
 import apolloProvider from './graphql';
 import commitsQuery from './queries/commits.query.graphql';
 import projectPathQuery from './queries/project_path.query.graphql';
@@ -71,8 +72,26 @@ export default function setupVueRepositoryList() {
       },
     });
 
+  const initBlobControlsApp = () =>
+    new Vue({
+      el: document.getElementById('js-blob-controls'),
+      router,
+      apolloProvider,
+      render(h) {
+        return h(BlobControls, {
+          props: {
+            projectPath,
+          },
+        });
+      },
+    });
+
   initLastCommitApp();
 
+  if (gon.features.refactorBlobViewer) {
+    initBlobControlsApp();
+  }
+
   router.afterEach(({ params: { path } }) => {
     setTitle(path, ref, fullName);
   });
diff --git a/app/assets/javascripts/repository/queries/blob_controls.query.graphql b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
new file mode 100644
index 00000000000..f859afd3e3e
--- /dev/null
+++ b/app/assets/javascripts/repository/queries/blob_controls.query.graphql
@@ -0,0 +1,16 @@
+query getBlobControls($projectPath: ID!, $filePath: String!, $ref: String!) {
+  project(fullPath: $projectPath) {
+    id
+    repository {
+      blobs(paths: [$filePath], ref: $ref) {
+        nodes {
+          id
+          findFilePath
+          blamePath
+          historyPath
+          permalinkPath
+        }
+      }
+    }
+  }
+}