Add latest changes from gitlab-org/gitlab@master

9 files changed, 146 insertions, 11 deletions

diff --git a/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue b/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
index 375db7f3054..ea7201efcd9 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
@@ -1,6 +1,8 @@
 <script>
 import { GlDrawer } from '@gitlab/ui';
+import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
 import { __ } from '~/locale';
+import { DRAWER_CONTAINER_CLASS } from '../job_assistant_drawer/constants';
 import FirstPipelineCard from './cards/first_pipeline_card.vue';
 import GettingStartedCard from './cards/getting_started_card.vue';
 import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
@@ -26,14 +28,15 @@ export default {
       required: false,
       default: false,
     },
+    zIndex: {
+      type: Number,
+      required: false,
+      default: 200,
+    },
   },
   computed: {
-    drawerCardStyles() {
-      return '';
-    },
     drawerHeightOffset() {
-      const wrapperEl = document.querySelector('.content-wrapper');
-      return wrapperEl ? `${wrapperEl.offsetTop}px` : '';
+      return getContentWrapperHeight(DRAWER_CONTAINER_CLASS);
     },
   },
   methods: {
@@ -47,7 +50,7 @@ export default {
   <gl-drawer
     :header-height="drawerHeightOffset"
     :open="isVisible"
-    :z-index="200"
+    :z-index="zIndex"
     @close="closeDrawer"
   >
     <template #title>
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue
index 201fba837e2..b78224e93b0 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/editor/ci_editor_header.vue
@@ -1,24 +1,30 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { pipelineEditorTrackingOptions, TEMPLATE_REPOSITORY_URL } from '../../constants';
 
 export default {
   i18n: {
     browseTemplates: __('Browse templates'),
     help: __('Help'),
+    jobAssistant: s__('JobAssistant|Job assistant'),
   },
   TEMPLATE_REPOSITORY_URL,
   components: {
     GlButton,
   },
-  mixins: [Tracking.mixin()],
+  mixins: [glFeatureFlagMixin(), Tracking.mixin()],
   props: {
     showDrawer: {
       type: Boolean,
       required: true,
     },
+    showJobAssistantDrawer: {
+      type: Boolean,
+      required: true,
+    },
   },
   methods: {
     toggleDrawer() {
@@ -29,6 +35,11 @@ export default {
         this.trackHelpDrawerClick();
       }
     },
+    toggleJobAssistantDrawer() {
+      this.$emit(
+        this.showJobAssistantDrawer ? 'close-job-assistant-drawer' : 'open-job-assistant-drawer',
+      );
+    },
     trackHelpDrawerClick() {
       const { label, actions } = pipelineEditorTrackingOptions;
       this.track(actions.openHelpDrawer, { label });
@@ -64,5 +75,15 @@ export default {
     >
       {{ $options.i18n.help }}
     </gl-button>
+    <gl-button
+      v-if="glFeatures.ciJobAssistantDrawer"
+      icon="bulb"
+      size="small"
+      data-testid="job-assistant-drawer-toggle"
+      data-qa-selector="job_assistant_drawer_toggle"
+      @click="toggleJobAssistantDrawer"
+    >
+      {{ $options.i18n.jobAssistant }}
+    </gl-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js
new file mode 100644
index 00000000000..1c122fd5e38
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/constants.js
@@ -0,0 +1,7 @@
+import { s__ } from '~/locale';
+
+export const DRAWER_CONTAINER_CLASS = '.content-wrapper';
+
+export const i18n = {
+  ADD_JOB: s__('JobAssistant|Add job'),
+};
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue
new file mode 100644
index 00000000000..65c87df21cb
--- /dev/null
+++ b/app/assets/javascripts/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue
@@ -0,0 +1,62 @@
+<script>
+import { GlDrawer, GlButton } from '@gitlab/ui';
+import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
+import { DRAWER_CONTAINER_CLASS, i18n } from './constants';
+
+export default {
+  i18n,
+  components: {
+    GlDrawer,
+    GlButton,
+  },
+  props: {
+    isVisible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    zIndex: {
+      type: Number,
+      required: false,
+      default: 200,
+    },
+  },
+  computed: {
+    drawerHeightOffset() {
+      return getContentWrapperHeight(DRAWER_CONTAINER_CLASS);
+    },
+  },
+  methods: {
+    closeDrawer() {
+      this.$emit('close-job-assistant-drawer');
+    },
+  },
+};
+</script>
+<template>
+  <gl-drawer
+    class="job-assistant-drawer"
+    :header-height="drawerHeightOffset"
+    :open="isVisible"
+    :z-index="zIndex"
+    @close="closeDrawer"
+  >
+    <template #title>
+      <h2 class="gl-m-0 gl-font-lg">{{ $options.i18n.ADD_JOB }}</h2>
+    </template>
+    <template #footer>
+      <div class="gl-display-flex gl-justify-content-end">
+        <gl-button
+          category="primary"
+          class="gl-mr-3"
+          data-testid="cancel-button"
+          @click="closeDrawer"
+          >{{ __('Cancel') }}</gl-button
+        >
+        <gl-button category="primary" variant="confirm" data-testid="confirm-button">{{
+          __('Add')
+        }}</gl-button>
+      </div>
+    </template>
+  </gl-drawer>
+</template>
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue
index ed5466ff99c..fd6547468d9 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/pipeline_editor_tabs.vue
@@ -95,6 +95,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    showJobAssistantDrawer: {
+      type: Boolean,
+      required: true,
+    },
   },
   apollo: {
     appStatus: {
@@ -187,7 +191,11 @@ export default {
       @click="setCurrentTab($options.tabConstants.CREATE_TAB)"
     >
       <walkthrough-popover v-if="isNewCiConfigFile" v-on="$listeners" />
-      <ci-editor-header :show-drawer="showDrawer" v-on="$listeners" />
+      <ci-editor-header
+        :show-drawer="showDrawer"
+        :show-job-assistant-drawer="showJobAssistantDrawer"
+        v-on="$listeners"
+      />
       <text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" />
     </editor-tab>
     <editor-tab
diff --git a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
index 1972125ed56..59863edbe0b 100644
--- a/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/pipeline_editor_home.vue
@@ -3,6 +3,7 @@ import { GlModal } from '@gitlab/ui';
 import { __ } from '~/locale';
 import CommitSection from './components/commit/commit_section.vue';
 import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue';
+import JobAssistantDrawer from './components/job_assistant_drawer/job_assistant_drawer.vue';
 import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorFileTree from './components/file_tree/container.vue';
 import PipelineEditorHeader from './components/header/pipeline_editor_header.vue';
@@ -28,6 +29,7 @@ export default {
     CommitSection,
     GlModal,
     PipelineEditorDrawer,
+    JobAssistantDrawer,
     PipelineEditorFileNav,
     PipelineEditorFileTree,
     PipelineEditorHeader,
@@ -63,6 +65,9 @@ export default {
       scrollToCommitForm: false,
       shouldLoadNewBranch: false,
       showDrawer: false,
+      showJobAssistantDrawer: false,
+      drawerIndex: 200,
+      jobAssistantIndex: 200,
       showFileTree: false,
       showSwitchBranchModal: false,
     };
@@ -85,11 +90,19 @@ export default {
     closeDrawer() {
       this.showDrawer = false;
     },
+    closeJobAssistantDrawer() {
+      this.showJobAssistantDrawer = false;
+    },
     handleConfirmSwitchBranch() {
       this.showSwitchBranchModal = true;
     },
     openDrawer() {
       this.showDrawer = true;
+      this.drawerIndex = this.jobAssistantIndex + 1;
+    },
+    openJobAssistantDrawer() {
+      this.showJobAssistantDrawer = true;
+      this.jobAssistantIndex = this.drawerIndex + 1;
     },
     toggleFileTree() {
       this.showFileTree = !this.showFileTree;
@@ -153,9 +166,12 @@ export default {
           :current-tab="currentTab"
           :is-new-ci-config-file="isNewCiConfigFile"
           :show-drawer="showDrawer"
+          :show-job-assistant-drawer="showJobAssistantDrawer"
           v-on="$listeners"
           @open-drawer="openDrawer"
           @close-drawer="closeDrawer"
+          @open-job-assistant-drawer="openJobAssistantDrawer"
+          @close-job-assistant-drawer="closeJobAssistantDrawer"
           @set-current-tab="setCurrentTab"
           @walkthrough-popover-cta-clicked="setScrollToCommitForm"
         />
@@ -174,8 +190,15 @@ export default {
     />
     <pipeline-editor-drawer
       :is-visible="showDrawer"
+      :z-index="drawerIndex"
       v-on="$listeners"
       @close-drawer="closeDrawer"
     />
+    <job-assistant-drawer
+      :is-visible="showJobAssistantDrawer"
+      :z-index="jobAssistantIndex"
+      v-on="$listeners"
+      @close-job-assistant-drawer="closeJobAssistantDrawer"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_comment_form.vue b/app/assets/javascripts/work_items/components/work_item_comment_form.vue
index a38fea01d1f..e2025aebd28 100644
--- a/app/assets/javascripts/work_items/components/work_item_comment_form.vue
+++ b/app/assets/javascripts/work_items/components/work_item_comment_form.vue
@@ -222,7 +222,7 @@ export default {
       :work-item-type="workItemType"
       :is-project-archived="isProjectArchived"
     />
-    <div v-else class="gl-display-flex gl-align-items-flex-start gl-flex-wrap-nowrap">
+    <div v-else class="gl-relative gl-display-flex gl-align-items-flex-start gl-flex-wrap-nowrap">
       <gl-avatar :src="$options.constantOptions.avatarUrl" :size="32" class="gl-mr-3" />
       <form v-if="isEditing" class="common-note-form gfm-form js-main-target-form gl-flex-grow-1">
         <markdown-editor
@@ -250,7 +250,7 @@ export default {
           @click="updateWorkItem"
           >{{ __('Comment') }}
         </gl-button>
-        <gl-button category="tertiary" class="gl-ml-3" @click="cancelEditing"
+        <gl-button category="primary" class="gl-ml-3" @click="cancelEditing"
           >{{ __('Cancel') }}
         </gl-button>
       </form>
diff --git a/app/assets/stylesheets/page_bundles/pipeline_editor.scss b/app/assets/stylesheets/page_bundles/pipeline_editor.scss
index e167052a3e1..13d158b08fe 100644
--- a/app/assets/stylesheets/page_bundles/pipeline_editor.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline_editor.scss
@@ -20,3 +20,11 @@
   @include gl-display-block;
   top: 2px;
 }
+
+.job-assistant-drawer {
+  width: 100%;
+
+  @include media-breakpoint-up(sm) {
+    width: 560px;
+  }
+}
diff --git a/app/controllers/projects/ci/pipeline_editor_controller.rb b/app/controllers/projects/ci/pipeline_editor_controller.rb
index 1942a5fef7b..3a2bc445737 100644
--- a/app/controllers/projects/ci/pipeline_editor_controller.rb
+++ b/app/controllers/projects/ci/pipeline_editor_controller.rb
@@ -2,6 +2,9 @@
 
 class Projects::Ci::PipelineEditorController < Projects::ApplicationController
   before_action :check_can_collaborate!
+  before_action do
+    push_frontend_feature_flag(:ci_job_assistant_drawer, @project)
+  end
 
   feature_category :pipeline_authoring