Merge branch '296547-add-empty-drawer-to-pipeline-editor-section' into 'master'

Add empty pipeline drawer [RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!60856

app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue

+<script>
+import { GlButton, GlIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  width: {
+    expanded: '482px',
+    collapsed: '58px',
+  },
+  i18n: {
+    toggleTxt: __('Collapse'),
+  },
+  components: {
+    GlButton,
+    GlIcon,
+  },
+  data() {
+    return {
+      isExpanded: false,
+      topPosition: 0,
+    };
+  },
+  computed: {
+    buttonIconName() {
+      return this.isExpanded ? 'chevron-double-lg-right' : 'chevron-double-lg-left';
+    },
+    buttonClass() {
+      return this.isExpanded ? 'gl-justify-content-end!' : '';
+    },
+    rootStyle() {
+      const { expanded, collapsed } = this.$options.width;
+      const top = this.topPosition;
+      const style = { top: `${top}px` };
+
+      return this.isExpanded ? { ...style, width: expanded } : { ...style, width: collapsed };
+    },
+  },
+  mounted() {
+    this.setTopPosition();
+  },
+  methods: {
+    setTopPosition() {
+      const navbarEl = document.querySelector('.js-navbar');
+
+      if (navbarEl) {
+        this.topPosition = navbarEl.getBoundingClientRect().bottom;
+      }
+    },
+    toggleDrawer() {
+      this.isExpanded = !this.isExpanded;
+    },
+  },
+};
+</script>
+<template>
+  <aside
+    aria-live="polite"
+    class="gl-fixed gl-right-0 gl-h-full gl-bg-gray-10 gl-transition-medium gl-border-l-solid gl-border-1 gl-border-gray-100"
+    :style="rootStyle"
+  >
+    <gl-button
+      category="tertiary"
+      class="gl-w-full gl-h-9 gl-rounded-0! gl-border-none! gl-border-b-solid! gl-border-1! gl-border-gray-100 gl-text-decoration-none! gl-outline-0! gl-display-flex"
+      :class="buttonClass"
+      :title="__('Toggle sidebar')"
+      data-testid="toggleBtn"
+      @click="toggleDrawer"
+    >
+      <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">{{
+        __('Collapse')
+      }}</span>
+      <gl-icon data-testid="toggle-icon" :name="buttonIconName" />
+    </gl-button>
+    <div v-if="isExpanded" class="gl-p-5" data-testid="drawer-content"></div>
+  </aside>
+</template>

app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue

 <script>
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import CommitSection from './components/commit/commit_section.vue';
+import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue';
 import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorHeader from './components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from './components/pipeline_editor_tabs.vue';
@@ -8,10 +10,12 @@ import { TABS_WITH_COMMIT_FORM, CREATE_TAB } from './constants';
 export default {
   components: {
     CommitSection,
+    PipelineEditorDrawer,
     PipelineEditorFileNav,
     PipelineEditorHeader,
     PipelineEditorTabs,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     ciConfigData: {
       type: Object,
@@ -35,6 +39,9 @@ export default {
     showCommitForm() {
       return TABS_WITH_COMMIT_FORM.includes(this.currentTab);
     },
+    showPipelineDrawer() {
+      return this.glFeatures.pipelineEditorDrawer;
+    },
   },
   methods: {
     setCurrentTab(tabName) {
@@ -45,7 +52,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-pr-9 gl-transition-medium gl-w-full">
     <pipeline-editor-file-nav v-on="$listeners" />
     <pipeline-editor-header
       :ci-config-data="ciConfigData"
@@ -58,5 +65,6 @@ export default {
       @set-current-tab="setCurrentTab"
     />
     <commit-section v-if="showCommitForm" :ci-file-content="ciFileContent" v-on="$listeners" />
+    <pipeline-editor-drawer v-if="showPipelineDrawer" />
   </div>
 </template>

app/controllers/projects/ci/pipeline_editor_controller.rb

@@ -6,6 +6,7 @@ class Projects::Ci::PipelineEditorController < Projects::ApplicationController
     push_frontend_feature_flag(:ci_config_merged_tab, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:pipeline_editor_empty_state_action, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:pipeline_editor_branch_switcher, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:pipeline_editor_drawer, @project, default_enabled: :yaml)
   end
 
   feature_category :pipeline_authoring

config/feature_flags/development/pipeline_editor_drawer.yml

+---
+name: pipeline_editor_drawer
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/60856
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/329806
+milestone: '13.12'
+type: development
+group: group::pipeline authoring
+default_enabled: false

spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js

+import { shallowMount } from '@vue/test-utils';
+import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
+
+describe('Pipeline editor drawer', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(PipelineEditorDrawer);
+  };
+
+  const findToggleBtn = () => wrapper.find('[data-testid="toggleBtn"]');
+  const findArrowIcon = () => wrapper.find('[data-testid="toggle-icon"]');
+  const findCollapseText = () => wrapper.find('[data-testid="collapse-text"]');
+  const findDrawerContent = () => wrapper.find('[data-testid="drawer-content"]');
+
+  const clickToggleBtn = async () => findToggleBtn().vm.$emit('click');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when the drawer is collapsed', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('show the left facing arrow icon', () => {
+      expect(findArrowIcon().props('name')).toBe('chevron-double-lg-left');
+    });
+
+    it('does not show the collapse text', () => {
+      expect(findCollapseText().exists()).toBe(false);
+    });
+
+    it('does not show the drawer content', () => {
+      expect(findDrawerContent().exists()).toBe(false);
+    });
+
+    it('can open the drawer by clicking on the toggle button', async () => {
+      expect(findDrawerContent().exists()).toBe(false);
+
+      await clickToggleBtn();
+
+      expect(findDrawerContent().exists()).toBe(true);
+    });
+  });
+
+  describe('when the drawer is expanded', () => {
+    beforeEach(async () => {
+      createComponent();
+      await clickToggleBtn();
+    });
+
+    it('show the right facing arrow icon', () => {
+      expect(findArrowIcon().props('name')).toBe('chevron-double-lg-right');
+    });
+
+    it('shows the collapse text', () => {
+      expect(findCollapseText().exists()).toBe(true);
+    });
+
+    it('show the drawer content', () => {
+      expect(findDrawerContent().exists()).toBe(true);
+    });
+
+    it('can close the drawer by clicking on the toggle button', async () => {
+      expect(findDrawerContent().exists()).toBe(true);
+
+      await clickToggleBtn();
+
+      expect(findDrawerContent().exists()).toBe(false);
+    });
+  });
+});

spec/frontend/pipeline_editor/pipeline_editor_home_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 
 import CommitSection from '~/pipeline_editor/components/commit/commit_section.vue';
+import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
 import PipelineEditorFileNav from '~/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorHeader from '~/pipeline_editor/components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue';
@@ -13,7 +14,7 @@ import { mockLintResponse, mockCiYml } from './mock_data';
 describe('Pipeline editor home wrapper', () => {
   let wrapper;
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = ({ props = {}, glFeatures = {} } = {}) => {
     wrapper = shallowMount(PipelineEditorHome, {
       propsData: {
         ciConfigData: mockLintResponse,
@@ -22,13 +23,20 @@ describe('Pipeline editor home wrapper', () => {
         isNewCiConfigFile: false,
         ...props,
       },
+      provide: {
+        glFeatures: {
+          pipelineEditorDrawer: true,
+          ...glFeatures,
+        },
+      },
     });
   };
 
-  const findPipelineEditorHeader = () => wrapper.findComponent(PipelineEditorHeader);
-  const findPipelineEditorTabs = () => wrapper.findComponent(PipelineEditorTabs);
   const findCommitSection = () => wrapper.findComponent(CommitSection);
   const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
+  const findPipelineEditorDrawer = () => wrapper.findComponent(PipelineEditorDrawer);
+  const findPipelineEditorHeader = () => wrapper.findComponent(PipelineEditorHeader);
+  const findPipelineEditorTabs = () => wrapper.findComponent(PipelineEditorTabs);
 
   afterEach(() => {
     wrapper.destroy();
@@ -55,6 +63,10 @@ describe('Pipeline editor home wrapper', () => {
     it('shows the commit section by default', () => {
       expect(findCommitSection().exists()).toBe(true);
     });
+
+    it('show the pipeline drawer', () => {
+      expect(findPipelineEditorDrawer().exists()).toBe(true);
+    });
   });
 
   describe('commit form toggle', () => {
@@ -82,4 +94,12 @@ describe('Pipeline editor home wrapper', () => {
       expect(findCommitSection().exists()).toBe(true);
     });
   });
+
+  describe('Pipeline drawer', () => {
+    it('hides the drawer when the feature flag is off', () => {
+      createComponent({ glFeatures: { pipelineEditorDrawer: false } });
+
+      expect(findPipelineEditorDrawer().exists()).toBe(false);
+    });
+  });
 });