Add latest changes from gitlab-org/gitlab@master

3 files changed, 31 insertions, 20 deletions

diff --git a/app/assets/javascripts/search/sidebar/components/confidentiality_filter.vue b/app/assets/javascripts/search/sidebar/components/confidentiality_filter.vue
index 38dccb9675d..4ddf695f61a 100644
--- a/app/assets/javascripts/search/sidebar/components/confidentiality_filter.vue
+++ b/app/assets/javascripts/search/sidebar/components/confidentiality_filter.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { confidentialFilterData } from '../constants/confidential_filter_data';
 import RadioFilter from './radio_filter.vue';
 
@@ -8,10 +8,10 @@ export default {
   components: {
     RadioFilter,
   },
+  mixins: [glFeatureFlagsMixin()],
   computed: {
-    ...mapState(['query']),
-    showDropdown() {
-      return Object.values(confidentialFilterData.scopes).includes(this.query.scope);
+    ffBasedXPadding() {
+      return this.glFeatures.searchPageVerticalNav ? 'gl-px-5' : 'gl-px-0';
     },
   },
   confidentialFilterData,
@@ -19,8 +19,8 @@ export default {
 </script>
 
 <template>
-  <div v-if="showDropdown">
-    <radio-filter :filter-data="$options.confidentialFilterData" />
+  <div>
+    <radio-filter :class="ffBasedXPadding" :filter-data="$options.confidentialFilterData" />
     <hr class="gl-my-5 gl-border-gray-100" />
   </div>
 </template>
diff --git a/app/assets/javascripts/search/sidebar/components/results_filters.vue b/app/assets/javascripts/search/sidebar/components/results_filters.vue
index 5b53f94bb53..9b993ab9a86 100644
--- a/app/assets/javascripts/search/sidebar/components/results_filters.vue
+++ b/app/assets/javascripts/search/sidebar/components/results_filters.vue
@@ -2,6 +2,8 @@
 import { GlButton, GlLink } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { confidentialFilterData } from '../constants/confidential_filter_data';
+import { stateFilterData } from '../constants/state_filter_data';
 import ConfidentialityFilter from './confidentiality_filter.vue';
 import StatusFilter from './status_filter.vue';
 
@@ -22,6 +24,15 @@ export default {
     searchPageVerticalNavFeatureFlag() {
       return this.glFeatures.searchPageVerticalNav;
     },
+    showConfidentialityFilter() {
+      return Object.values(confidentialFilterData.scopes).includes(this.urlQuery.scope);
+    },
+    showStatusFilter() {
+      return Object.values(stateFilterData.scopes).includes(this.urlQuery.scope);
+    },
+    ffBasedXPadding() {
+      return this.glFeatures.searchPageVerticalNav ? 'gl-px-5' : 'gl-px-0';
+    },
   },
   methods: {
     ...mapActions(['applyQuery', 'resetQuery']),
@@ -30,14 +41,14 @@ export default {
 </script>
 
 <template>
-  <form
-    :class="searchPageVerticalNavFeatureFlag ? 'gl-px-5' : 'gl-px-0'"
-    @submit.prevent="applyQuery"
-  >
-    <hr v-if="searchPageVerticalNavFeatureFlag" class="gl-my-5 gl-border-gray-100" />
-    <status-filter />
-    <confidentiality-filter />
-    <div class="gl-display-flex gl-align-items-center gl-mt-4">
+  <form class="gl-pt-5 gl-md-pt-0" @submit.prevent="applyQuery">
+    <hr
+      v-if="searchPageVerticalNavFeatureFlag"
+      class="gl-my-5 gl-border-gray-100 gl-display-none gl-md-display-block"
+    />
+    <status-filter v-if="showStatusFilter" />
+    <confidentiality-filter v-if="showConfidentialityFilter" />
+    <div class="gl-display-flex gl-align-items-center gl-mt-4" :class="ffBasedXPadding">
       <gl-button category="primary" variant="confirm" type="submit" :disabled="!sidebarDirty">
         {{ __('Apply') }}
       </gl-button>
diff --git a/app/assets/javascripts/search/sidebar/components/status_filter.vue b/app/assets/javascripts/search/sidebar/components/status_filter.vue
index 5cec2090906..eaf7d95822a 100644
--- a/app/assets/javascripts/search/sidebar/components/status_filter.vue
+++ b/app/assets/javascripts/search/sidebar/components/status_filter.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { stateFilterData } from '../constants/state_filter_data';
 import RadioFilter from './radio_filter.vue';
 
@@ -8,10 +8,10 @@ export default {
   components: {
     RadioFilter,
   },
+  mixins: [glFeatureFlagsMixin()],
   computed: {
-    ...mapState(['query']),
-    showDropdown() {
-      return Object.values(stateFilterData.scopes).includes(this.query.scope);
+    ffBasedXPadding() {
+      return this.glFeatures.searchPageVerticalNav ? 'gl-px-5' : 'gl-px-0';
     },
   },
   stateFilterData,
@@ -19,8 +19,8 @@ export default {
 </script>
 
 <template>
-  <div v-if="showDropdown">
-    <radio-filter :filter-data="$options.stateFilterData" />
+  <div>
+    <radio-filter :class="ffBasedXPadding" :filter-data="$options.stateFilterData" />
     <hr class="gl-my-5 gl-border-gray-100" />
   </div>
 </template>