From ee488220d05452f8f1e2faca2f1f20ab2ee4c4f9 Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Thu, 12 Oct 2023 21:15:15 +0200
Subject: [PATCH] Provide rich Chip component for displaying date range

Time intervals in text format are truncated which hides the end date.

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>
---
 .../src/components/Filter/DateRangeChip.tsx   | 40 +++++++++++++++++++
 .../src/components/Filter/DateRangeFilter.tsx | 18 ++++++---
 2 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 packages/common/src/components/Filter/DateRangeChip.tsx

diff --git a/packages/common/src/components/Filter/DateRangeChip.tsx b/packages/common/src/components/Filter/DateRangeChip.tsx
new file mode 100644
index 000000000..aac1e738d
--- /dev/null
+++ b/packages/common/src/components/Filter/DateRangeChip.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+export interface DateRangeChipProps {
+  // ISO time interval
+  interval: string;
+  fromLabel: string;
+  toLabel: string;
+}
+
+export const DateRangeChip = ({ interval, fromLabel, toLabel }: DateRangeChipProps) => {
+  const [from, to] = interval?.split('/') ?? '';
+  return (
+    <Flex direction={{ default: 'row' }}>
+      <Flex
+        direction={{ default: 'column' }}
+        spaceItems={{
+          default: 'spaceItemsNone',
+        }}
+      >
+        <FlexItem>
+          <b>{fromLabel}</b>
+        </FlexItem>
+        <FlexItem>
+          <b>{toLabel}</b>
+        </FlexItem>
+      </Flex>
+      <Flex
+        direction={{ default: 'column' }}
+        spaceItems={{
+          default: 'spaceItemsNone',
+        }}
+      >
+        <FlexItem>{from}</FlexItem>
+        <FlexItem>{to}</FlexItem>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/packages/common/src/components/Filter/DateRangeFilter.tsx b/packages/common/src/components/Filter/DateRangeFilter.tsx
index 6bd04c22b..192ce7f06 100644
--- a/packages/common/src/components/Filter/DateRangeFilter.tsx
+++ b/packages/common/src/components/Filter/DateRangeFilter.tsx
@@ -16,6 +16,7 @@ import {
   toISODateInterval,
 } from '../../utils';
 
+import { DateRangeChip } from './DateRangeChip';
 import { FilterTypeProps } from './types';
 
 /**
@@ -23,7 +24,7 @@ import { FilterTypeProps } from './types';
  * Precisely given range [A,B) a date X in the range if A <= X < B.
  *
  * **FilterTypeProps are interpreted as follows**:<br>
- * 1) selectedFilters - date range encoded as ISO 8601 time interval string ("dateFrom/dateTo").<br>
+ * 1) selectedFilters - date range encoded as ISO 8601 time interval string ("dateFrom/dateTo"). Only date part is used (no time).<br>
  * 2) onFilterUpdate - accepts the list of ranges.<br>
  *
  * [<img src="static/media/src/components-stories/assets/github-logo.svg"><i class="fi fi-brands-github">
@@ -42,8 +43,13 @@ export const DateRangeFilter = ({
   const [from, setFrom] = useState<Date>();
   const [to, setTo] = useState<Date>();
 
-  const rangeToOption = (range: string): string => range.replace('/', ' - ');
-  const optionToRange = (option: string): string => option.replace(' - ', '/');
+  const rangeToOption = (range: string) => {
+    return {
+      key: range,
+      node: <DateRangeChip interval={range} fromLabel="From" toLabel="To" />,
+    };
+  };
+  const optionToRange = (option): string => option?.key;
 
   const clearSingleRange = (option) => {
     const target = optionToRange(option);
@@ -51,6 +57,7 @@ export const DateRangeFilter = ({
   };
 
   const onFromDateChange = (even: FormEvent<HTMLInputElement>, value: string) => {
+    //see DateFilter onDateChange
     if (value?.length === 10 && isValidDate(value)) {
       setFrom(parseISOtoJSDate(value));
       setTo(undefined);
@@ -58,6 +65,7 @@ export const DateRangeFilter = ({
   };
 
   const onToDateChange = (even: FormEvent<HTMLInputElement>, value: string) => {
+    //see DateFilter onDateChange
     if (value?.length === 10 && isValidDate(value)) {
       const newTo = parseISOtoJSDate(value);
       setTo(newTo);
@@ -82,7 +90,7 @@ export const DateRangeFilter = ({
           dateFormat={(date) => DateTime.fromJSDate(date).toISODate()}
           dateParse={(str) => DateTime.fromISO(str).toJSDate()}
           onChange={onFromDateChange}
-          aria-label={'Interval start'}
+          aria-label="Interval start"
           placeholder={placeholderLabel}
           invalidFormatText={placeholderLabel}
           // default value ("parent") creates collision with sticky table header
@@ -91,7 +99,7 @@ export const DateRangeFilter = ({
         <DatePicker
           value={toISODate(to)}
           onChange={onToDateChange}
-          isDisabled={isValidJSDate(from)}
+          isDisabled={!isValidJSDate(from)}
           rangeStart={from}
           aria-label="Interval end"
           placeholder={placeholderLabel}