Add custom range date selector

Author: lucanovera

clients/admin-ui/src/pages/consent/reporting/index.tsx

@@ -3,7 +3,7 @@ import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import dayjs, { Dayjs } from "dayjs";
 import {
   AntButton as Button,
-  AntDatePicker as DatePicker,
+  AntDateRangePicker as DateRangePicker,
   AntDropdown as Dropdown,
   AntEmpty as Empty,
   AntFlex as Flex,
@@ -80,7 +80,7 @@ const ConsentReportingPage = () => {
         ) : (
           <>
             <TableActionBar>
-              <DatePicker.RangePicker
+              <DateRangePicker
                 placeholder={["From", "To"]}
                 maxDate={today}
                 data-testid="input-date-range"

clients/fidesui/src/hoc/CustomDateRangePicker.tsx

@@ -0,0 +1,24 @@
+import { ArrowRight, Calendar } from "@carbon/icons-react";
+import { RangePickerProps } from "antd/es/date-picker";
+import { DatePicker } from "antd/lib";
+import React from "react";
+
+const withCustomProps = (WrappedComponent: typeof DatePicker.RangePicker) => {
+  const WrappedSelect = ({
+    suffixIcon = <Calendar />,
+    separator = (
+      <ArrowRight style={{ color: "var(--ant-color-text-disabled)" }} />
+    ),
+    ...props
+  }: RangePickerProps) => {
+    const customProps = {
+      suffixIcon,
+      separator,
+      ...props,
+    };
+    return <WrappedComponent {...customProps} />;
+  };
+  return WrappedSelect;
+};
+
+export const CustomDateRangePicker = withCustomProps(DatePicker.RangePicker);

clients/fidesui/src/hoc/index.tsx

@@ -1,2 +1,3 @@
+export * from "./CustomDateRangePicker";
 export * from "./CustomSelect";
 export * from "./CustomTag";

clients/fidesui/src/index.ts

@@ -30,7 +30,6 @@ export {
   Card as AntCard,
   Checkbox as AntCheckbox,
   Col as AntCol,
-  DatePicker as AntDatePicker,
   Divider as AntDivider,
   Dropdown as AntDropdown,
   Empty as AntEmpty,
@@ -62,6 +61,7 @@ export type {
 
 // Higher-order components
 export { CustomSelect as AntSelect } from "./hoc";
+export { CustomDateRangePicker as AntDateRangePicker } from "./hoc";
 
 /**
  * Custom Re-exports