1 files changed, 33 insertions, 73 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue b/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
index 9cb070a5517..375db7f3054 100644
--- a/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
+++ b/app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
@@ -1,101 +1,61 @@
 <script>
-import { GlButton, GlIcon } from '@gitlab/ui';
+import { GlDrawer } from '@gitlab/ui';
 import { __ } from '~/locale';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { DRAWER_EXPANDED_KEY } from '../../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';
 import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
 
+const DRAWER_CARD_STYLES = ['gl-border-bottom-0', 'gl-pt-6!', 'gl-pb-0!', 'gl-line-height-20'];
+
 export default {
-  width: {
-    expanded: '482px',
-    collapsed: '58px',
-  },
+  DRAWER_CARD_STYLES,
   i18n: {
-    toggleTxt: __('Collapse'),
+    title: __('Help'),
   },
-  localDrawerKey: DRAWER_EXPANDED_KEY,
   components: {
     FirstPipelineCard,
     GettingStartedCard,
-    GlButton,
-    GlIcon,
-    LocalStorageSync,
+    GlDrawer,
     PipelineConfigReferenceCard,
     VisualizeAndLintCard,
   },
-  data() {
-    return {
-      isExpanded: false,
-      topPosition: 0,
-    };
+  props: {
+    isVisible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
-    buttonIconName() {
-      return this.isExpanded ? 'chevron-double-lg-right' : 'chevron-double-lg-left';
-    },
-    buttonClass() {
-      return this.isExpanded ? 'gl-justify-content-end!' : '';
+    drawerCardStyles() {
+      return '';
     },
-    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 };
+    drawerHeightOffset() {
+      const wrapperEl = document.querySelector('.content-wrapper');
+      return wrapperEl ? `${wrapperEl.offsetTop}px` : '';
     },
   },
-  mounted() {
-    this.setTopPosition();
-  },
   methods: {
-    setTopPosition() {
-      const navbarEl = document.querySelector('.js-navbar');
-
-      if (navbarEl) {
-        this.topPosition = navbarEl.getBoundingClientRect().bottom;
-      }
-    },
-    toggleDrawer() {
-      this.isExpanded = !this.isExpanded;
+    closeDrawer() {
+      this.$emit('close-drawer');
     },
   },
 };
 </script>
 <template>
-  <local-storage-sync v-model="isExpanded" :storage-key="$options.localDrawerKey" as-json>
-    <aside
-      aria-live="polite"
-      class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-property-width gl-transition-duration-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-200 gl-overflow-y-auto"
-      :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-qa-selector="toggle_sidebar_collapse_button"
-        @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-h-full gl-p-5"
-        data-testid="drawer-content"
-        data-qa-selector="drawer_content"
-      >
-        <getting-started-card class="gl-mb-4" />
-        <first-pipeline-card class="gl-mb-4" />
-        <visualize-and-lint-card class="gl-mb-4" />
-        <pipeline-config-reference-card />
-        <div class="gl-h-13"></div>
-      </div>
-    </aside>
-  </local-storage-sync>
+  <gl-drawer
+    :header-height="drawerHeightOffset"
+    :open="isVisible"
+    :z-index="200"
+    @close="closeDrawer"
+  >
+    <template #title>
+      <h2 class="gl-m-0 gl-font-lg">{{ $options.i18n.title }}</h2>
+    </template>
+    <getting-started-card :class="$options.DRAWER_CARD_STYLES" />
+    <first-pipeline-card :class="$options.DRAWER_CARD_STYLES" />
+    <visualize-and-lint-card :class="$options.DRAWER_CARD_STYLES" />
+    <pipeline-config-reference-card :class="$options.DRAWER_CARD_STYLES" />
+  </gl-drawer>
 </template>