Provide helper text for the DateRange pop-up

Signed-off-by: Radoslaw Szwajkowski <[email protected]>
kubev2v · Oct 19, 2023 · 80d48f8 · 80d48f8
1 parent fc90e6e
commit 80d48f8
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/packages/common/src/components/Filter/DateRangeFilter.tsx b/packages/common/src/components/Filter/DateRangeFilter.tsx
@@ -38,6 +38,7 @@ export const DateRangeFilter = ({
   filterId,
   placeholderLabel,
   showFilter = true,
+  helperText,
 }: FilterTypeProps) => {
   const validFilters = selectedFilters?.filter(isValidInterval) ?? [];
 
@@ -93,7 +94,6 @@ export const DateRangeFilter = ({
       <InputGroup>
         <DatePicker
           value={toISODate(from)}
-          helperText="UTC time zone used"
           dateFormat={(date) => DateTime.fromJSDate(date).toISODate()}
           dateParse={(str) => DateTime.fromISO(str).toJSDate()}
           onChange={onFromDateChange}
@@ -102,6 +102,9 @@ export const DateRangeFilter = ({
           invalidFormatText={placeholderLabel}
           // default value ("parent") creates collision with sticky table header
           appendTo={document.body}
+          popoverProps={{
+            footerContent: helperText,
+          }}
         />
         <DatePicker
           value={toISODate(to)}
@@ -111,6 +114,9 @@ export const DateRangeFilter = ({
           aria-label="Interval end"
           placeholder={placeholderLabel}
           appendTo={document.body}
+          popoverProps={{
+            footerContent: helperText,
+          }}
         />
       </InputGroup>
     </ToolbarFilter>

diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
@@ -66,6 +66,7 @@
   "Custom certification used to verify the RH Virtualization REST API server, when empty use system certificate.": "Custom certification used to verify the RH Virtualization REST API server, when empty use system certificate.",
   "Data centers": "Data centers",
   "Data stores": "Data stores",
+  "Dates are compared in UTC. End of the interval is included.": "Dates are compared in UTC. End of the interval is included.",
   "Default": "Default",
   "Default Transfer Network": "Default Transfer Network",
   "Defines the CPU limits allocated to the main container in the controller pod. The default value is 500 milliCPU.": "Defines the CPU limits allocated to the main container in the controller pod. The default value is 500 milliCPU.",

diff --git a/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx b/packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx
@@ -14,12 +14,14 @@ import { ResourceFieldFactory } from '@kubev2v/common';
 import { MustGatherModal } from '@kubev2v/legacy/common/components/MustGatherModal';
 import { PlanModel } from '@kubev2v/types';
 import { useAccessReview } from '@openshift-console/dynamic-plugin-sdk';
-import { Button } from '@patternfly/react-core';
+import { Button, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 import { FlatPlan, useFlatPlans, useHasSufficientProviders } from './data';
 import EmptyStatePlans from './EmptyStatePlans';
 import PlanRow from './PlanRow';
 
+import './styles.css';
+
 export const fieldsMetadataFactory: ResourceFieldFactory = (t) => [
   {
     resourceFieldId: C.NAME,
@@ -50,6 +52,13 @@ export const fieldsMetadataFactory: ResourceFieldFactory = (t) => [
     filter: {
       type: 'dateRange',
       placeholderLabel: 'YYYY-MM-DD',
+      helperText: (
+        <HelperText className="forklift-date-range-helper-text">
+          <HelperTextItem variant="indeterminate">
+            {t('Dates are compared in UTC. End of the interval is included.')}
+          </HelperTextItem>
+        </HelperText>
+      ),
     },
     sortable: true,
   },

diff --git a/packages/forklift-console-plugin/src/modules/Plans/styles.css b/packages/forklift-console-plugin/src/modules/Plans/styles.css
@@ -22,3 +22,13 @@
   max-width: 14rem;
   max-height: 14rem;
 }
+
+.forklift-date-range-helper-text {
+  /* use the same padding as CalendarMonth widget in the DatePicker pop-up*/
+  padding-left: var(--pf-global--spacer--lg);
+  padding-right: var(--pf-global--spacer--lg);
+  /* negative margin that compensates the setting used by DatePicker pop-up footer*/
+  margin-top: calc(-1*(var(--pf-c-popover__footer--MarginTop)));
+  /* limit the width of the helper text to the typical width of the calendar. This prevents the text from expanding/widening the pop-up*/
+  max-width: 22rem;
+}