diff --git a/assets/js/common/ComposedFilter/ComposedFilter.stories.jsx b/assets/js/common/ComposedFilter/ComposedFilter.stories.jsx
index 3d4c229dda..8376122485 100644
--- a/assets/js/common/ComposedFilter/ComposedFilter.stories.jsx
+++ b/assets/js/common/ComposedFilter/ComposedFilter.stories.jsx
@@ -82,7 +82,7 @@ export const WithDateFilter = {
key: 'filter2',
type: 'date',
title: 'Date',
- prefill: true,
+ prefilled: true,
options: [['My birthday', () => new Date(1986, 0, 24)]],
},
],
diff --git a/assets/js/common/DateFilter/DateFilter.jsx b/assets/js/common/DateFilter/DateFilter.jsx
index b4f811ccb4..033777d705 100644
--- a/assets/js/common/DateFilter/DateFilter.jsx
+++ b/assets/js/common/DateFilter/DateFilter.jsx
@@ -63,7 +63,7 @@ const getSelectedOption = (options, value) => {
* // options={['1h ago', '24h ago', '7d ago', '30d ago']}
* // title="Date"
* // value="24h ago"
- * // prefill
+ * // prefilled
* // onChange={(value) => console.log(value)}
* // />
*
@@ -76,15 +76,21 @@ const getSelectedOption = (options, value) => {
* Options will be displayed sorted by date in descending order.
* @param {string} props.title - The title of the date filter, to be shown as placeholder when no value is selected.
* @param {string} props.value - The selected id of the selected option. It accepted either a string or an array with the id as the first element.
- * @param {boolean} props.prefill - Whether to include pre-configured options in the options list. Default is false.
+ * @param {boolean} props.prefilled - Whether to include pre-configured options in the options list. Default is true.
* @param {function} props.onChange - The callback function to be called when the value of the date filter changes. It will provide a couple with the selected id and the actual date.
*/
-function DateFilter({ options = [], title, value, prefill, onChange }) {
+function DateFilter({
+ options = [],
+ title,
+ value,
+ prefilled = true,
+ onChange,
+}) {
const ref = useRef();
const [open, setOpen] = useState(false);
const parsedOptions = parseInputOptions(
- prefill ? [...Object.entries(preconfiguredOptions), ...options] : options
+ prefilled ? [...Object.entries(preconfiguredOptions), ...options] : options
);
const selectedOption = getSelectedOption(parsedOptions, value);
diff --git a/assets/js/common/DateFilter/DateFilter.stories.jsx b/assets/js/common/DateFilter/DateFilter.stories.jsx
index 6d041a926e..38e3af1ade 100644
--- a/assets/js/common/DateFilter/DateFilter.stories.jsx
+++ b/assets/js/common/DateFilter/DateFilter.stories.jsx
@@ -37,7 +37,7 @@ export default {
title={args.title}
options={args.options}
value={value}
- prefill={args.prefill}
+ prefilled={args.prefilled}
onChange={(newValue) => {
setValue(newValue);
action('onChange')(newValue);
@@ -50,7 +50,6 @@ export default {
export const Default = {
args: {
title: 'by date',
- prefill: true,
},
};
@@ -86,7 +85,7 @@ export const WithOverriddenOptions = {
export const WithPickedOptionsOnly = {
args: {
...Default.args,
- prefill: false,
+ prefilled: false,
options: ['1h ago', '30d ago'],
},
};
@@ -94,7 +93,7 @@ export const WithPickedOptionsOnly = {
export const WithCustomRenderer = {
args: {
...Default.args,
- prefill: false,
+ prefilled: false,
options: [['epoch', () => new Date(0), () => '⌛ Beginning of time']],
},
};
diff --git a/assets/js/common/DateFilter/DateFilter.test.jsx b/assets/js/common/DateFilter/DateFilter.test.jsx
index a4dc204cbe..c8000f16d9 100644
--- a/assets/js/common/DateFilter/DateFilter.test.jsx
+++ b/assets/js/common/DateFilter/DateFilter.test.jsx
@@ -8,7 +8,7 @@ describe('DateFilter component', () => {
it('should render with pre-configured options', async () => {
const user = userEvent.setup();
- render();
+ render();
const placeholder = 'Filter by date...';
@@ -27,7 +27,7 @@ describe('DateFilter component', () => {
const user = userEvent.setup();
const mockOnChange = jest.fn();
- render();
+ render();
await act(() => user.click(screen.getByText('Filter by date...')));
@@ -40,7 +40,7 @@ describe('DateFilter component', () => {
render(
@@ -53,7 +53,7 @@ describe('DateFilter component', () => {
render(
@@ -71,7 +71,7 @@ describe('DateFilter component', () => {
options={[
['Custom', () => new Date(Date.now() - 42 * 24 * 60 * 60 * 1000)],
]}
- prefill
+ prefilled
onChange={jest.fn()}
/>
);
@@ -95,7 +95,7 @@ describe('DateFilter component', () => {
);
@@ -114,7 +114,7 @@ describe('DateFilter component', () => {
anyDate, () => 'my overridden item']]}
- prefill
+ prefilled
onChange={mockOnChange}
/>
);