Merge branch '296547-local-storage' into 'master'

Remember pipeline drawer expanded state in local storage

See merge request gitlab-org/gitlab!61266

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,6 +65,7 @@ export default {
 };
 </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-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-9999 gl-overflow-y-auto"
@@ -86,4 +91,5 @@ export default {
         <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);
+    });
+  });
 });