diff --git a/packages/common/src/components/Filter/DateRangeFilter.tsx b/packages/common/src/components/Filter/DateRangeFilter.tsx
index 4cacf349e..58bf21dbd 100644
--- 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 = ({
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,
+ }}
/>
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
index 6a39ec364..e5e9d6932 100644
--- 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
index adb03957a..5c9c1563c 100644
--- 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: (
+
+
+ {t('Dates are compared in UTC. End of the interval is included.')}
+
+
+ ),
},
sortable: true,
},
diff --git a/packages/forklift-console-plugin/src/modules/Plans/styles.css b/packages/forklift-console-plugin/src/modules/Plans/styles.css
index c34525c31..c5368cc8d 100644
--- 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;
+}