1 files changed, 109 insertions, 0 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
new file mode 100644
index 00000000000..17decb6b448
--- /dev/null
+++ b/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue
@@ -0,0 +1,109 @@
+<script>
+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 FilterBar from './filter_bar.vue';
+
+export default {
+  name: 'ValueStreamFilters',
+  components: {
+    DateRange,
+    ProjectsDropdownFilter,
+    FilterBar,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    selectedProjects: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    hasProjectFilter: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    hasDateRangeFilter: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    groupId: {
+      type: Number,
+      required: true,
+    },
+    groupPath: {
+      type: String,
+      required: true,
+    },
+    startDate: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+    endDate: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    projectsQueryParams() {
+      return {
+        first: PROJECTS_PER_PAGE,
+        includeSubgroups: true,
+      };
+    },
+    currentDate() {
+      const now = new Date();
+      return new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+    },
+  },
+  multiProjectSelect: true,
+  maxDateRange: DATE_RANGE_LIMIT,
+};
+</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"
+  >
+    <filter-bar
+      data-testid="vsa-filter-bar"
+      class="filtered-search-box gl-display-flex gl-mb-2 gl-mr-3 gl-border-none"
+      :group-path="groupPath"
+    />
+    <div
+      v-if="hasDateRangeFilter || hasProjectFilter"
+      class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between"
+    >
+      <div>
+        <projects-dropdown-filter
+          v-if="hasProjectFilter"
+          :key="groupId"
+          class="js-projects-dropdown-filter project-select gl-mb-2 gl-lg-mb-0"
+          :group-id="groupId"
+          :group-namespace="groupPath"
+          :query-params="projectsQueryParams"
+          :multi-select="$options.multiProjectSelect"
+          :default-projects="selectedProjects"
+          @selected="$emit('selectProject', $event)"
+        />
+      </div>
+      <div class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row">
+        <date-range
+          v-if="hasDateRangeFilter"
+          :start-date="startDate"
+          :end-date="endDate"
+          :max-date="currentDate"
+          :max-date-range="$options.maxDateRange"
+          :include-selected-date="true"
+          class="js-daterange-picker"
+          @change="$emit('setDateRange', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>