Remove requirement for timeRangeStart when listing workflows in advanced visibility (#932)

* Tweaks to DateFilterV2 to show the placeholder text when any of the time values are unset
* Remove fallback logic from parseDateFilterValue
* Make timeRangeStart optional for listing workflows in advanced visibility. This means that workflows can be listed and searched for with no limit on start time
* Hide the filters in advanced visibility on page load because they will be unset by default and so, there is no point in showing them
* Update activeFiltersCount logic in usePageFilters to consider a filter as active if any of its query params has been modified, as opposed to all of them

Author: adhityamamallan

src/components/date-filter-v2/date-filter-v2.tsx

@@ -82,7 +82,7 @@ export default function DateFilterV2({
   );
 
   const displayValue = useMemo<string>(() => {
-    if (!dates.end || !dates.start) return 'Unknown';
+    if (!dates.end || !dates.start) return '';
     if (dates.end === 'now' && isRelativeDateFilterValue(dates.start))
       return DATE_FILTER_RELATIVE_VALUES[dates.start].label;
 

src/components/date-filter-v2/helpers/__tests__/parse-date-filter-value.test.ts

@@ -1,4 +1,3 @@
-import { type DateFilterValue } from '../../date-filter-v2.types';
 import parseDateFilterValue from '../parse-date-filter-value';
 
 // Mock is-relative-date-filter-value
@@ -9,26 +8,22 @@ jest.mock('../is-relative-date-filter-value', () => ({
 
 describe('parseDateFilterValue', () => {
   it('returns the value as is for relative date values', () => {
-    const fallback: DateFilterValue = 'now';
-    expect(parseDateFilterValue('now-5m', fallback)).toBe('now-5m');
-    expect(parseDateFilterValue('now-1h', fallback)).toBe('now-1h');
+    expect(parseDateFilterValue('now-5m')).toBe('now-5m');
+    expect(parseDateFilterValue('now-1h')).toBe('now-1h');
   });
 
   it('parses string dates into Date objects when format is valid', () => {
-    const fallback = 'now';
-    const result = parseDateFilterValue('2023-05-23T10:30:00.000Z', fallback);
+    const result = parseDateFilterValue('2023-05-23T10:30:00.000Z');
     expect(result instanceof Date).toBe(true);
     expect((result as Date).toISOString()).toBe('2023-05-23T10:30:00.000Z');
   });
 
-  it('returns the fallback when date format is invalid', () => {
-    const fallback = 'now';
-    const result = parseDateFilterValue('invalid-date', fallback);
-    expect(result).toBe(fallback);
+  it('returns undefined when date format is invalid', () => {
+    const result = parseDateFilterValue('invalid-date');
+    expect(result).toBeUndefined();
   });
 
-  it('returns the fallback for empty strings', () => {
-    const fallback = 'now';
-    expect(parseDateFilterValue('', fallback)).toBe(fallback);
+  it('returns undefined for empty strings', () => {
+    expect(parseDateFilterValue('')).toBeUndefined();
   });
 });

src/components/date-filter-v2/helpers/parse-date-filter-value.ts

@@ -5,10 +5,9 @@ import { type DateFilterValue } from '../date-filter-v2.types';
 import isRelativeDateFilterValue from './is-relative-date-filter-value';
 
 export default function parseDateFilterValue(
-  v: string,
-  fallback: DateFilterValue
-): DateFilterValue {
+  v: string
+): DateFilterValue | undefined {
   if (isRelativeDateFilterValue(v)) return v;
   const day = dayjs(v);
-  return day.isValid() ? day.toDate() : fallback;
+  return day.isValid() ? day.toDate() : undefined;
 }

src/components/page-filters/hooks/use-page-filters.ts

@@ -26,7 +26,7 @@ export default function usePageFilters<P extends PageQueryParams>({
       pageQueryParamsConfig.map((c) => [c.key, c])
     );
     return pageFiltersConfig.filter((pageFilter) =>
-      Object.keys(pageFilter.getValue(queryParams)).every(
+      Object.keys(pageFilter.getValue(queryParams)).some(
         (queryParamKey: PageQueryParamKeys<P>) =>
           queryParams[queryParamKey] &&
           queryParams[queryParamKey] !==

src/views/domain-page/config/domain-page-query-params.config.ts

@@ -17,7 +17,7 @@ const domainPageQueryParamsConfig: [
   // Search input
   PageQueryParam<'search', string>,
   PageQueryParamMultiValue<'statuses', Array<WorkflowStatus> | undefined>,
-  PageQueryParam<'timeRangeStart', DateFilterValue>,
+  PageQueryParam<'timeRangeStart', DateFilterValue | undefined>,
   PageQueryParam<'timeRangeEnd', DateFilterValue>,
   PageQueryParam<'sortColumn', string>,
   PageQueryParam<'sortOrder', SortOrder>,
@@ -62,14 +62,13 @@ const domainPageQueryParamsConfig: [
   {
     key: 'timeRangeStart',
     queryParamKey: 'start',
-    defaultValue: 'now-30d',
-    parseValue: (v) => parseDateFilterValue(v, 'now-30d'),
+    parseValue: parseDateFilterValue,
   },
   {
     key: 'timeRangeEnd',
     queryParamKey: 'end',
     defaultValue: 'now',
-    parseValue: (v) => parseDateFilterValue(v, 'now'),
+    parseValue: (v) => parseDateFilterValue(v) ?? 'now',
   },
   {
     key: 'sortColumn',
@@ -104,13 +103,13 @@ const domainPageQueryParamsConfig: [
     key: 'timeRangeStartBasic',
     queryParamKey: 'start',
     defaultValue: 'now-30d',
-    parseValue: (v) => parseDateFilterValue(v, 'now-30d'),
+    parseValue: (v) => parseDateFilterValue(v) ?? 'now-30d',
   },
   {
     key: 'timeRangeEndBasic',
     queryParamKey: 'end',
     defaultValue: 'now',
-    parseValue: (v) => parseDateFilterValue(v, 'now'),
+    parseValue: (v) => parseDateFilterValue(v) ?? 'now',
   },
   {
     key: 'inputTypeArchival',
@@ -140,13 +139,13 @@ const domainPageQueryParamsConfig: [
     key: 'timeRangeStartArchival',
     queryParamKey: 'astart',
     defaultValue: 'now-7d',
-    parseValue: (v) => parseDateFilterValue(v, 'now-7d'),
+    parseValue: (v) => parseDateFilterValue(v) ?? 'now-7d',
   },
   {
     key: 'timeRangeEndArchival',
     queryParamKey: 'aend',
     defaultValue: 'now',
-    parseValue: (v) => parseDateFilterValue(v, 'now'),
+    parseValue: (v) => parseDateFilterValue(v) ?? 'now',
   },
   {
     key: 'sortColumnArchival',

src/views/domain-workflows/domain-workflows-advanced/domain-workflows-advanced.tsx

@@ -17,10 +17,12 @@ export default function DomainWorkflowsAdvanced({ domain, cluster }: Props) {
     const now = dayjs();
 
     return {
-      timeRangeStart: getDayjsFromDateFilterValue(
-        queryParams.timeRangeStart,
-        now
-      ).toISOString(),
+      timeRangeStart: queryParams.timeRangeStart
+        ? getDayjsFromDateFilterValue(
+            queryParams.timeRangeStart,
+            now
+          ).toISOString()
+        : undefined,
       timeRangeEnd: getDayjsFromDateFilterValue(
         queryParams.timeRangeEnd,
         now

src/views/domain-workflows/domain-workflows-header/domain-workflows-header.tsx

@@ -41,7 +41,6 @@ export default function DomainWorkflowsHeader({
       queryStringQueryParamKey="query"
       refetchQuery={refetch}
       isQueryRunning={isFetching}
-      expandFiltersByDefault={true}
     />
   );
 }

src/views/domain-workflows/domain-workflows-header/domain-workflows-header.types.ts

@@ -1,6 +1,6 @@
 export type Props = {
   domain: string;
   cluster: string;
-  timeRangeStart: string;
+  timeRangeStart?: string;
   timeRangeEnd: string;
 };

src/views/domain-workflows/domain-workflows-table/domain-workflows-table.types.ts

@@ -1,6 +1,6 @@
 export type Props = {
   domain: string;
   cluster: string;
-  timeRangeStart: string;
+  timeRangeStart?: string;
   timeRangeEnd: string;
 };