Merge branch '332025-implementation-issue-for-template-button' into 'master'

Add browse template button in Pipeline editor

See merge request gitlab-org/gitlab!64349

app/assets/javascripts/pipeline_editor/components/editor/ci_editor_header.vue

+<script>
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+import Tracking from '~/tracking';
+import { pipelineEditorTrackingOptions, TEMPLATE_REPOSITORY_URL } from '../../constants';
+
+export default {
+  i18n: {
+    browseTemplates: __('Browse templates'),
+  },
+  TEMPLATE_REPOSITORY_URL,
+  components: {
+    GlButton,
+  },
+  mixins: [Tracking.mixin()],
+  methods: {
+    trackTemplateBrowsing() {
+      const { label, actions } = pipelineEditorTrackingOptions;
+
+      this.track(actions.browse_templates, { label });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-bg-gray-10 gl-p-3 gl-border-solid gl-border-gray-100 gl-border-1">
+    <gl-button
+      :href="$options.TEMPLATE_REPOSITORY_URL"
+      size="small"
+      icon="external-link"
+      target="_blank"
+      @click="trackTemplateBrowsing"
+    >
+      {{ $options.i18n.browseTemplates }}
+    </gl-button>
+  </div>
+</template>

app/assets/javascripts/pipeline_editor/components/editor/text_editor.vue

@@ -43,7 +43,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-border-solid gl-border-gray-100 gl-border-1">
+  <div class="gl-border-solid gl-border-gray-100 gl-border-1 gl-border-t-none!">
     <source-editor
       ref="editor"
       :file-name="ciConfigPath"

app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue

@@ -16,6 +16,7 @@ import {
 } from '../constants';
 import getAppStatus from '../graphql/queries/client/app_status.graphql';
 import CiConfigMergedPreview from './editor/ci_config_merged_preview.vue';
+import CiEditorHeader from './editor/ci_editor_header.vue';
 import TextEditor from './editor/text_editor.vue';
 import CiLint from './lint/ci_lint.vue';
 import EditorTab from './ui/editor_tab.vue';
@@ -49,6 +50,7 @@ export default {
   },
   components: {
     CiConfigMergedPreview,
+    CiEditorHeader,
     CiLint,
     EditorTab,
     GlAlert,
@@ -107,6 +109,7 @@ export default {
       data-testid="editor-tab"
       @click="setCurrentTab($options.tabConstants.CREATE_TAB)"
     >
+      <ci-editor-header />
       <text-editor :value="ciFileContent" v-on="$listeners" />
     </editor-tab>
     <editor-tab

app/assets/javascripts/pipeline_editor/constants.js

@@ -33,3 +33,13 @@ export const BRANCH_PAGINATION_LIMIT = 20;
 export const BRANCH_SEARCH_DEBOUNCE = '500';
 
 export const STARTER_TEMPLATE_NAME = 'Getting-Started';
+
+export const pipelineEditorTrackingOptions = {
+  label: 'pipeline_editor',
+  actions: {
+    browse_templates: 'browse_templates',
+  },
+};
+
+export const TEMPLATE_REPOSITORY_URL =
+  'https://gitlab.com/gitlab-org/gitlab-foss/tree/master/lib/gitlab/ci/templates';

locale/gitlab.pot

@@ -5579,6 +5579,9 @@ msgstr ""
 msgid "Browse files"
 msgstr ""
 
+msgid "Browse templates"
+msgstr ""
+
 msgid "BuildArtifacts|An error occurred while fetching the artifacts"
 msgstr ""
 

spec/frontend/pipeline_editor/components/editor/ci_editor_header_spec.js

+import { GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import CiEditorHeader from '~/pipeline_editor/components/editor/ci_editor_header.vue';
+import {
+  pipelineEditorTrackingOptions,
+  TEMPLATE_REPOSITORY_URL,
+} from '~/pipeline_editor/constants';
+
+describe('CI Editor Header', () => {
+  let wrapper;
+  let trackingSpy = null;
+
+  const createComponent = () => {
+    wrapper = shallowMount(CiEditorHeader, {});
+  };
+
+  const findLinkBtn = () => wrapper.findComponent(GlButton);
+
+  afterEach(() => {
+    wrapper.destroy();
+    unmockTracking();
+  });
+
+  describe('link button', () => {
+    beforeEach(() => {
+      createComponent();
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    });
+
+    it('finds the browse template button', () => {
+      expect(findLinkBtn().exists()).toBe(true);
+    });
+
+    it('contains the link to the template repo', () => {
+      expect(findLinkBtn().attributes('href')).toBe(TEMPLATE_REPOSITORY_URL);
+    });
+
+    it('has the external-link icon', () => {
+      expect(findLinkBtn().props('icon')).toBe('external-link');
+    });
+
+    it('tracks the click on the browse button', async () => {
+      const { label, actions } = pipelineEditorTrackingOptions;
+
+      await findLinkBtn().vm.$emit('click');
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, actions.browse_templates, {
+        label,
+      });
+    });
+  });
+});