Remember pipeline drawer expanded state in local storage

The drawer default is now open in the pipeline editor section
and if someone collapses it, it will be loaded collapsed
the next time someone comes to the section. The reverse
is also true.

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

 <script>
 import { GlButton, GlIcon } 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';
@@ -14,17 +16,19 @@ export default {
   i18n: {
     toggleTxt: __('Collapse'),
   },
+  localDrawerKey: DRAWER_EXPANDED_KEY,
   components: {
     FirstPipelineCard,
     GettingStartedCard,
-    PipelineConfigReferenceCard,
-    VisualizeAndLintCard,
     GlButton,
     GlIcon,
+    LocalStorageSync,
+    PipelineConfigReferenceCard,
+    VisualizeAndLintCard,
   },
   data() {
     return {
-      isExpanded: false,
+      isExpanded: true,
       topPosition: 0,
     };
   },
@@ -61,29 +65,31 @@ export default {
 };
 </script>
 <template>
-  <aside
-    aria-live="polite"
-    class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-9999 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')"
-      @click="toggleDrawer"
+  <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-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-9999 gl-overflow-y-auto"
+      :style="rootStyle"
     >
-      <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">
-      <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>
+      <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')"
+        @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">
+        <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>
 </template>

app/assets/javascripts/pipeline_editor/constants.js

@@ -26,3 +26,5 @@ export const TABS_WITH_COMMIT_FORM = [CREATE_TAB, LINT_TAB, VISUALIZE_TAB];
 
 export const COMMIT_ACTION_CREATE = 'CREATE';
 export const COMMIT_ACTION_UPDATE = 'UPDATE';
+
+export const DRAWER_EXPANDED_KEY = 'pipeline_editor_drawer_expanded';

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

 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue';
 import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
 import PipelineConfigReferenceCard from '~/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue';
 import VisualizeAndLintCard from '~/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue';
 import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
+import { DRAWER_EXPANDED_KEY } from '~/pipeline_editor/constants';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
 describe('Pipeline editor drawer', () => {
+  useLocalStorageSpy();
+
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMount(PipelineEditorDrawer);
+    wrapper = shallowMount(PipelineEditorDrawer, {
+      stubs: { LocalStorageSync },
+    });
   };
 
   const findFirstPipelineCard = () => wrapper.findComponent(FirstPipelineCard);
@@ -27,11 +35,13 @@ describe('Pipeline editor drawer', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    localStorage.clear();
   });
 
   describe('when the drawer is collapsed', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent();
+      await clickToggleBtn();
     });
 
     it('shows the left facing arrow icon', () => {
@@ -58,7 +68,6 @@ describe('Pipeline editor drawer', () => {
   describe('when the drawer is expanded', () => {
     beforeEach(async () => {
       createComponent();
-      await clickToggleBtn();
     });
 
     it('shows the right facing arrow icon', () => {
@@ -88,4 +97,31 @@ describe('Pipeline editor drawer', () => {
       expect(findDrawerContent().exists()).toBe(false);
     });
   });
+
+  describe('local storage', () => {
+    it('saves the drawer expanded value to local storage', async () => {
+      createComponent();
+      await clickToggleBtn();
+
+      expect(localStorage.setItem.mock.calls).toEqual([[DRAWER_EXPANDED_KEY, 'false']]);
+    });
+
+    it('loads the drawer collapsed when local storage is set to `false`, ', async () => {
+      localStorage.setItem(DRAWER_EXPANDED_KEY, false);
+      createComponent();
+
+      await nextTick();
+
+      expect(findDrawerContent().exists()).toBe(false);
+    });
+
+    it('loads the drawer expanded when local storage is set to `true`, ', async () => {
+      localStorage.setItem(DRAWER_EXPANDED_KEY, true);
+      createComponent();
+
+      await nextTick();
+
+      expect(findDrawerContent().exists()).toBe(true);
+    });
+  });
 });