Add latest changes from gitlab-org/gitlab@master

4 files changed, 51 insertions, 29 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';
diff --git a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
index 06ea9188113..5472e51445a 100644
--- a/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
+++ b/app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue
@@ -21,7 +21,12 @@ import { backOff } from '~/lib/utils/common_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__, __, n__ } from '~/locale';
-import { VARIABLE_TYPE, FILE_TYPE, CONFIG_VARIABLES_TIMEOUT } from '../constants';
+import {
+  VARIABLE_TYPE,
+  FILE_TYPE,
+  CONFIG_VARIABLES_TIMEOUT,
+  CC_VALIDATION_REQUIRED_ERROR,
+} from '../constants';
 import filterVariables from '../utils/filter_variables';
 import RefsDropdown from './refs_dropdown.vue';
 
@@ -60,6 +65,8 @@ export default {
     GlSprintf,
     GlLoadingIcon,
     RefsDropdown,
+    CcValidationRequiredAlert: () =>
+      import('ee_component/billings/components/cc_validation_required_alert.vue'),
   },
   directives: { SafeHtml },
   props: {
@@ -143,6 +150,9 @@ export default {
     descriptions() {
       return this.form[this.refFullName]?.descriptions ?? {};
     },
+    ccRequiredError() {
+      return this.error === CC_VALIDATION_REQUIRED_ERROR;
+    },
   },
   watch: {
     refValue() {
@@ -329,8 +339,9 @@ export default {
 
 <template>
   <gl-form @submit.prevent="createPipeline">
+    <cc-validation-required-alert v-if="ccRequiredError" class="gl-pb-5" />
     <gl-alert
-      v-if="error"
+      v-else-if="error"
       :title="errorTitle"
       :dismissible="false"
       variant="danger"
diff --git a/app/assets/javascripts/pipeline_new/constants.js b/app/assets/javascripts/pipeline_new/constants.js
index 681755dc6ab..91a064a0fb8 100644
--- a/app/assets/javascripts/pipeline_new/constants.js
+++ b/app/assets/javascripts/pipeline_new/constants.js
@@ -4,3 +4,6 @@ export const DEBOUNCE_REFS_SEARCH_MS = 250;
 export const CONFIG_VARIABLES_TIMEOUT = 5000;
 export const BRANCH_REF_TYPE = 'branch';
 export const TAG_REF_TYPE = 'tag';
+
+export const CC_VALIDATION_REQUIRED_ERROR =
+  'Credit card required to be on file in order to create a pipeline';