Add latest changes from gitlab-org/gitlab@master

3 files changed, 23 insertions, 8 deletions

diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
index 8bffb281211..280cd729a43 100644
--- a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
+++ b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue
@@ -24,7 +24,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['ciConfigPath'],
+  inject: ['ciConfigPath', 'includesHelpPagePath'],
   props: {
     includes: {
       type: Array,
@@ -61,7 +61,14 @@ export default {
         <span data-testid="current-config-filename">{{ ciConfigPath }}</span>
       </span>
     </div>
-    <gl-alert v-if="showTip" variant="tip" :title="$options.i18n.tipTitle" @dismiss="dismissTip">
+    <gl-alert
+      v-if="showTip"
+      variant="tip"
+      :title="$options.i18n.tipTitle"
+      :secondary-button-text="$options.i18n.tipBtn"
+      :secondary-button-link="includesHelpPagePath"
+      @dismiss="dismissTip"
+    >
       {{ $options.i18n.tipDescription }}
     </gl-alert>
     <div class="gl-overflow-y-auto">
diff --git a/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
index 029fe2ec909..6270429535d 100644
--- a/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
+++ b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue
@@ -1,6 +1,6 @@
 <script>
-import { GlPopover, GlOutsideDirective as Outside } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
+import { GlLink, GlPopover, GlOutsideDirective as Outside, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import { FILE_TREE_POPOVER_DISMISSED_KEY } from '../../constants';
 
 export default {
@@ -8,13 +8,15 @@ export default {
   directives: { Outside },
   i18n: {
     description: s__(
-      'pipelineEditorWalkthrough|You can use the file tree to view your pipeline configuration files.',
+      'pipelineEditorWalkthrough|You can use the file tree to view your pipeline configuration files. %{linkStart}Learn more%{linkEnd}',
     ),
-    learnMore: __('Learn more'),
   },
   components: {
+    GlLink,
     GlPopover,
+    GlSprintf,
   },
+  inject: ['includesHelpPagePath'],
   data() {
     return {
       showPopover: false,
@@ -46,8 +48,12 @@ export default {
     data-qa-selector="file_tree_popover"
     @close-button-clicked="dismissPermanently"
   >
-    <div v-outside="closePopover" class="gl-display-flex gl-flex-direction-column">
-      <p class="gl-font-base">{{ $options.i18n.description }}</p>
+    <div v-outside="closePopover" class="gl-font-base gl-mb-3">
+      <gl-sprintf :message="$options.i18n.description">
+        <template #link="{ content }">
+          <gl-link :href="includesHelpPagePath" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
     </div>
   </gl-popover>
 </template>
diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js
index 732fc665c9e..7bfdddbc08a 100644
--- a/app/assets/javascripts/pipeline_editor/index.js
+++ b/app/assets/javascripts/pipeline_editor/index.js
@@ -30,6 +30,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     defaultBranch,
     emptyStateIllustrationPath,
     helpPaths,
+    includesHelpPagePath,
     lintHelpPagePath,
     lintUnavailableHelpPagePath,
     needsHelpPagePath,
@@ -118,6 +119,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
       defaultBranch,
       emptyStateIllustrationPath,
       helpPaths,
+      includesHelpPagePath,
       lintHelpPagePath,
       lintUnavailableHelpPagePath,
       needsHelpPagePath,