Skip to content

Commit

Permalink
Provide helper text for the DateRange pop-up
Browse files Browse the repository at this point in the history
Signed-off-by: Radoslaw Szwajkowski <[email protected]>
  • Loading branch information
rszwajko committed Oct 19, 2023
1 parent fc90e6e commit 80d48f8
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 2 deletions.
8 changes: 7 additions & 1 deletion packages/common/src/components/Filter/DateRangeFilter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const DateRangeFilter = ({
filterId,
placeholderLabel,
showFilter = true,
helperText,
}: FilterTypeProps) => {
const validFilters = selectedFilters?.filter(isValidInterval) ?? [];

Expand Down Expand Up @@ -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}
Expand All @@ -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)}
Expand All @@ -111,6 +114,9 @@ export const DateRangeFilter = ({
aria-label="Interval end"
placeholder={placeholderLabel}
appendTo={document.body}
popoverProps={{
footerContent: helperText,
}}
/>
</InputGroup>
</ToolbarFilter>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
11 changes: 10 additions & 1 deletion packages/forklift-console-plugin/src/modules/Plans/PlansPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
},
Expand Down
10 changes: 10 additions & 0 deletions packages/forklift-console-plugin/src/modules/Plans/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 80d48f8

Please sign in to comment.