refactor prefilled flag

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)]],
       },
     ],

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);

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,15 +85,15 @@ export const WithOverriddenOptions = {
 export const WithPickedOptionsOnly = {
   args: {
     ...Default.args,
-    prefill: false,
+    prefilled: false,
     options: ['1h ago', '30d ago'],
   },
 };
 
 export const WithCustomRenderer = {
   args: {
     ...Default.args,
-    prefill: false,
+    prefilled: false,
     options: [['epoch', () => new Date(0), () => '⌛ Beginning of time']],
   },
 };

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(<DateFilter title="by date" prefill onChange={jest.fn()} />);
+    render(<DateFilter title="by date" prefilled onChange={jest.fn()} />);
 
     const placeholder = 'Filter by date...';
 
@@ -27,7 +27,7 @@ describe('DateFilter component', () => {
     const user = userEvent.setup();
     const mockOnChange = jest.fn();
 
-    render(<DateFilter title="by date" prefill onChange={mockOnChange} />);
+    render(<DateFilter title="by date" prefilled onChange={mockOnChange} />);
 
     await act(() => user.click(screen.getByText('Filter by date...')));
 
@@ -40,7 +40,7 @@ describe('DateFilter component', () => {
     render(
       <DateFilter
         title="by date"
-        prefill
+        prefilled
         value="24h ago"
         onChange={jest.fn()}
       />
@@ -53,7 +53,7 @@ describe('DateFilter component', () => {
     render(
       <DateFilter
         title="by date"
-        prefill
+        prefilled
         value={['24h ago', new Date()]}
         onChange={jest.fn()}
       />
@@ -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', () => {
       <DateFilter
         title="by date"
         options={[option]}
-        prefill={false}
+        prefilled={false}
         onChange={jest.fn()}
       />
     );
@@ -114,7 +114,7 @@ describe('DateFilter component', () => {
       <DateFilter
         title="by date"
         options={[['30d ago', () => anyDate, () => 'my overridden item']]}
-        prefill
+        prefilled
         onChange={mockOnChange}
       />
     );