Abbreviate date interval when displayed in chip group

Display the entire interval string in a tooltip. Time intervals as text are too long to be displayed in a chip. The text is truncated which hides the end date. Signed-off-by: Radoslaw Szwajkowski <[email protected]>
kubev2v · Oct 17, 2023 · 15db1b9 · 15db1b9
1 parent d030b85
commit 15db1b9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/packages/common/src/components/Filter/DateRangeFilter.tsx b/packages/common/src/components/Filter/DateRangeFilter.tsx
@@ -6,9 +6,11 @@ import {
   InputGroup,
   isValidDate as isValidJSDate,
   ToolbarFilter,
+  Tooltip,
 } from '@patternfly/react-core';
 
 import {
+  abbreviateInterval,
   isValidDate,
   isValidInterval,
   parseISOtoJSDate,
@@ -23,7 +25,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,22 +44,34 @@ 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) => {
+    const abbr = abbreviateInterval(range);
+    return {
+      key: range,
+      node: (
+        <Tooltip content={range}>
+          <span>{abbr ?? ''}</span>
+        </Tooltip>
+      ),
+    };
+  };
+  const optionToRange = (option): string => option?.key;
 
   const clearSingleRange = (option) => {
     const target = optionToRange(option);
     onFilterUpdate([...validFilters.filter((range) => range !== target)]);
   };
 
   const onFromDateChange = (even: FormEvent<HTMLInputElement>, value: string) => {
+    //see DateFilter onDateChange
     if (value?.length === 10 && isValidDate(value)) {
       setFrom(parseISOtoJSDate(value));
       setTo(undefined);
     }
   };
 
   const onToDateChange = (even: FormEvent<HTMLInputElement>, value: string) => {
+    //see DateFilter onDateChange
     if (value?.length === 10 && isValidDate(value)) {
       const newTo = parseISOtoJSDate(value);
       setTo(newTo);
@@ -82,7 +96,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 +105,7 @@ export const DateRangeFilter = ({
         <DatePicker
           value={toISODate(to)}
           onChange={onToDateChange}
-          isDisabled={isValidJSDate(from)}
+          isDisabled={!isValidJSDate(from)}
           rangeStart={from}
           aria-label="Interval end"
           placeholder={placeholderLabel}

diff --git a/packages/common/src/utils/dates.ts b/packages/common/src/utils/dates.ts
@@ -85,3 +85,11 @@ export const toISODateInterval = (from: Date, to: Date): string | undefined => {
   const target = Interval.fromDateTimes(DateTime.fromJSDate(from), DateTime.fromJSDate(to));
   return target.isValid ? target.toISODate() : undefined;
 };
+
+export const abbreviateInterval = (isoInterval: string): string | undefined => {
+  const interval = Interval.fromISO(isoInterval);
+  if (!interval.isValid) {
+    return undefined;
+  }
+  return `${interval.start.toFormat('MM-dd')} - ${interval.end.toFormat('MM-dd')}`;
+};