Add latest changes from gitlab-org/gitlab@master

2 files changed, 35 insertions, 27 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 e1f38b4332b..3f4da0a0641 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,6 +1,8 @@
 <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>
diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js
index 56862f17858..dba815368eb 100644
--- a/app/assets/javascripts/pipeline_editor/constants.js
+++ b/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';