Add latest changes from gitlab-org/gitlab@16-5-stable-eev16.5.0-rc42

1 files changed, 104 insertions, 20 deletions

diff --git a/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue b/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue
index 0de62013a63..775c3827fc7 100644
--- a/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue
+++ b/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue
@@ -2,7 +2,17 @@
 import { GlTooltipDirective } from '@gitlab/ui';
 import DateRange from '~/analytics/shared/components/daterange.vue';
 import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
-import { DATE_RANGE_LIMIT, PROJECTS_PER_PAGE } from '~/analytics/shared/constants';
+import {
+  DATE_RANGE_LIMIT,
+  DATE_RANGE_CUSTOM_VALUE,
+  PROJECTS_PER_PAGE,
+  MAX_DATE_RANGE_TEXT,
+  DATE_RANGE_LAST_30_DAYS_VALUE,
+  LAST_30_DAYS,
+} from '~/analytics/shared/constants';
+import { getCurrentUtcDate, datesMatch } from '~/lib/utils/datetime_utility';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import DateRangesDropdown from '~/analytics/shared/components/date_ranges_dropdown.vue';
 import FilterBar from './filter_bar.vue';
 
 export default {
@@ -11,10 +21,12 @@ export default {
     DateRange,
     ProjectsDropdownFilter,
     FilterBar,
+    DateRangesDropdown,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     selectedProjects: {
       type: Array,
@@ -31,6 +43,11 @@ export default {
       required: false,
       default: true,
     },
+    hasPredefinedDateRangesFilter: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     namespacePath: {
       type: String,
       required: true,
@@ -49,6 +66,11 @@ export default {
       required: false,
       default: null,
     },
+    predefinedDateRange: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     projectsQueryParams() {
@@ -58,42 +80,104 @@ export default {
       };
     },
     currentDate() {
-      const now = new Date();
-      return new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+      return getCurrentUtcDate();
+    },
+    isDefaultDateRange() {
+      return datesMatch(this.startDate, LAST_30_DAYS) && datesMatch(this.endDate, this.currentDate);
+    },
+    supportsPredefinedDateRanges() {
+      return this.glFeatures?.vsaPredefinedDateRanges;
+    },
+    dateRangeOption() {
+      const { predefinedDateRange } = this;
+
+      if (predefinedDateRange) return predefinedDateRange;
+
+      if (!predefinedDateRange && !this.isDefaultDateRange) return DATE_RANGE_CUSTOM_VALUE;
+
+      return DATE_RANGE_LAST_30_DAYS_VALUE;
+    },
+    isCustomDateRangeSelected() {
+      return this.dateRangeOption === DATE_RANGE_CUSTOM_VALUE;
+    },
+    shouldShowPredefinedDateRanges() {
+      return this.supportsPredefinedDateRanges && this.hasPredefinedDateRangesFilter;
+    },
+    shouldShowDateRangePicker() {
+      if (this.shouldShowPredefinedDateRanges) {
+        return this.hasDateRangeFilter && this.isCustomDateRangeSelected;
+      }
+
+      return this.hasDateRangeFilter;
+    },
+    maxDateRangeTooltip() {
+      return this.$options.i18n.maxDateRangeTooltip(this.$options.maxDateRange);
+    },
+    shouldShowDateRangeFilters() {
+      return this.hasDateRangeFilter || this.hasPredefinedDateRangesFilter;
+    },
+    shouldShowFilterDropdowns() {
+      return this.hasProjectFilter || this.shouldShowDateRangeFilters;
+    },
+  },
+  methods: {
+    onSelectPredefinedDateRange({ value, startDate, endDate }) {
+      this.$emit('setPredefinedDateRange', value);
+      this.$emit('setDateRange', { startDate, endDate });
+    },
+    onSelectCustomDateRange() {
+      this.$emit('setPredefinedDateRange', DATE_RANGE_CUSTOM_VALUE);
     },
   },
   multiProjectSelect: true,
   maxDateRange: DATE_RANGE_LIMIT,
+  i18n: {
+    maxDateRangeTooltip: MAX_DATE_RANGE_TEXT,
+  },
 };
 </script>
 <template>
   <div
-    class="gl-mt-3 gl-py-2 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100"
+    class="gl-mt-3 gl-py-5 gl-px-3 gl-bg-gray-10 gl-border-b-1 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-gray-100"
   >
     <filter-bar
       data-testid="vsa-filter-bar"
-      class="filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
+      class="filtered-search-box gl-display-flex gl-border-none"
       :namespace-path="namespacePath"
     />
+    <hr v-if="shouldShowFilterDropdowns" class="gl-my-5" />
     <div
-      v-if="hasDateRangeFilter || hasProjectFilter"
-      class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between"
+      v-if="shouldShowFilterDropdowns"
+      class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-5"
     >
-      <div>
-        <projects-dropdown-filter
-          v-if="hasProjectFilter"
-          toggle-classes="gl-max-w-26"
-          class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
-          :group-namespace="groupPath"
-          :query-params="projectsQueryParams"
-          :multi-select="$options.multiProjectSelect"
-          :default-projects="selectedProjects"
-          @selected="$emit('selectProject', $event)"
+      <projects-dropdown-filter
+        v-if="hasProjectFilter"
+        toggle-classes="gl-max-w-26"
+        class="js-projects-dropdown-filter project-select"
+        :group-namespace="groupPath"
+        :query-params="projectsQueryParams"
+        :multi-select="$options.multiProjectSelect"
+        :default-projects="selectedProjects"
+        @selected="$emit('selectProject', $event)"
+      />
+      <div
+        v-if="shouldShowDateRangeFilters"
+        class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-3"
+        data-testid="vsa-date-range-filter-container"
+      >
+        <date-ranges-dropdown
+          v-if="shouldShowPredefinedDateRanges"
+          data-testid="vsa-predefined-date-ranges-dropdown"
+          :selected="dateRangeOption"
+          :tooltip="maxDateRangeTooltip"
+          include-end-date-in-days-selected
+          :include-custom-date-range-option="hasDateRangeFilter"
+          @selected="onSelectPredefinedDateRange"
+          @customDateRangeSelected="onSelectCustomDateRange"
         />
-      </div>
-      <div class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row">
         <date-range
-          v-if="hasDateRangeFilter"
+          v-if="shouldShowDateRangePicker"
+          data-testid="vsa-date-range-picker"
           :start-date="startDate"
           :end-date="endDate"
           :max-date="currentDate"