X2-9506 added future date range for relative date range picker

src/components/DatePicker/DatePicker.jsx

@@ -37,6 +37,7 @@ export const DatePicker = ({
     modifiers = {},
     ranges,
     shouldShowRelativeRanges = false,
+    isFutureDatesAllowed = false,
     components = {},
     getTooltip,
     upcomingDates,
@@ -298,6 +299,7 @@ export const DatePicker = ({
                             value={rangeName}
                             ranges={ranges}
                             timezoneName={timezoneName}
+                            isFutureDatesAllowed={isFutureDatesAllowed}
                             onChange={handleRelativeRangeChanged}
                             onSubmit={onSubmitDateRange}
                         />

src/components/DatePicker/RelativeDateRange.jsx

@@ -4,114 +4,90 @@
 import { now, toDate } from "../../helpers/date";
 
 const options = {
+    // Day
     YESTERDAY: "P1D,yesterday",
     TODAY: "P1D,today",
+    NEXT_DAY: "P1D,next day",
 
+    // Week
     LAST_WEEK: "P1W,last week",
     TRAILING_WEEK: "P1W,-1 week",
     THIS_WEEK: "P1W,this week",
+    NEXT_WEEK: "P1W,next week",
 
+    // Month
     LAST_MONTH: "P1M,first day of last month",
     TRAILING_MONTH: "P1M,-1 month",
     THIS_MONTH: "P1M,first day of this month",
+    NEXT_MONTH: "P1M,next month",
 
+    // Quarter
     LAST_QUARTER: "P3M,first day of last quarter",
     TRAILING_QUARTER: "P3M,-3 months",
     THIS_QUARTER: "P3M,first day of this quarter",
+    NEXT_QUARTER: "P3M,next quarter",
 
+    // Year
     LAST_YEAR: "P1Y,first day of January last year",
     TRAILING_YEAR: "P1Y,-1 year",
     THIS_YEAR: "P1Y,first day of this year",
+    NEXT_YEAR: "P1Y,next year",
 };
 
 export const dateRanges = {
     day: {
         label: "Day",
         options: [
-            {
-                value: options.YESTERDAY,
-                label: "Yesterday",
-            },
-            {
-                value: options.TODAY,
-                label: "Today",
-            },
+            { value: options.YESTERDAY, label: "Yesterday" },
+            { value: options.TODAY, label: "Today" },
+            { value: options.NEXT_DAY, label: "Next Day" },
         ],
     },
 
     week: {
         label: "Week",
         options: [
-            {
-                value: options.LAST_WEEK,
-                label: "Last Week",
-            },
-            {
-                value: options.TRAILING_WEEK,
-                label: "Trailing Week",
-            },
-            {
-                value: options.THIS_WEEK,
-                label: "This Week",
-            },
+            { value: options.LAST_WEEK, label: "Last Week" },
+            { value: options.TRAILING_WEEK, label: "Trailing Week" },
+            { value: options.THIS_WEEK, label: "This Week" },
+            { value: options.NEXT_WEEK, label: "Next Week" },
         ],
     },
 
     month: {
         label: "Month",
         options: [
-            {
-                value: options.LAST_MONTH,
-                label: "Last Month",
-            },
-            {
-                value: options.TRAILING_MONTH,
-                label: "Trailing Month",
-            },
-            {
-                value: options.THIS_MONTH,
-                label: "This Month",
-            },
+            { value: options.LAST_MONTH, label: "Last Month" },
+            { value: options.TRAILING_MONTH, label: "Trailing Month" },
+            { value: options.THIS_MONTH, label: "This Month" },
+            { value: options.NEXT_MONTH, label: "Next Month" },
         ],
     },
 
     quarter: {
         label: "Quarter",
         options: [
-            {
-                value: options.LAST_QUARTER,
-                label: "Last Quarter",
-            },
-            {
-                value: options.TRAILING_QUARTER,
-                label: "Trailing Quarter",
-            },
-            {
-                value: options.THIS_QUARTER,
-                label: "This Quarter",
-            },
+            { value: options.LAST_QUARTER, label: "Last Quarter" },
+            { value: options.TRAILING_QUARTER, label: "Trailing Quarter" },
+            { value: options.THIS_QUARTER, label: "This Quarter" },
+            { value: options.NEXT_QUARTER, label: "Next Quarter" },
         ],
     },
 
     year: {
         label: "Year",
         options: [
-            {
-                value: options.LAST_YEAR,
-                label: "Last Year",
-            },
-            {
-                value: options.TRAILING_YEAR,
-                label: "Trailing Year",
-            },
-            {
-                value: options.THIS_YEAR,
-                label: "This Year",
-            },
+            { value: options.LAST_YEAR, label: "Last Year" },
+            { value: options.TRAILING_YEAR, label: "Trailing Year" },
+            { value: options.THIS_YEAR, label: "This Year" },
+            { value: options.NEXT_YEAR, label: "Next Year" },
         ],
     },
 };
 
+// List of future date options
+const futureDates = [options.NEXT_DAY, options.NEXT_WEEK, options.NEXT_MONTH, options.NEXT_QUARTER, options.NEXT_YEAR];
+
 const handlers = {
     [options.YESTERDAY]: (timezone) => {
         const yesterday = now(null, timezone).subtract(1, "day");
@@ -128,6 +104,14 @@
         };
     },
 
+    [options.NEXT_DAY]: (timezone) => {
+        const nextDay = now(null, timezone).add(1, "day");
+        return {
+            from: toDate(nextDay.startOf("day")),
+            to: toDate(nextDay.endOf("day"), false),
+        };
+    },
+
     [options.LAST_WEEK]: (timezone) => {
         const lastWeek = now(null, timezone).subtract(7, "day");
         return {
@@ -150,6 +134,14 @@
         };
     },
 
+    [options.NEXT_WEEK]: (timezone) => {
+        const nextWeek = now(null, timezone).add(1, "week");
+        return {
+            from: toDate(nextWeek.startOf("week")),
+            to: toDate(nextWeek.endOf("week"), false),
+        };
+    },
+
     [options.LAST_MONTH]: (timezone) => {
         const lastMonth = now(null, timezone).subtract(1, "month");
         return {
@@ -170,6 +162,14 @@
         to: toDate(now(null, timezone).endOf("month"), false),
     }),
 
+    [options.NEXT_MONTH]: (timezone) => {
+        const nextMonth = now(null, timezone).add(1, "month");
+        return {
+            from: toDate(nextMonth.startOf("month")),
+            to: toDate(nextMonth.endOf("month"), false),
+        };
+    },
+
     [options.LAST_QUARTER]: (timezone) => {
         return {
             from: toDate(now(null, timezone).startOf("quarter").subtract(3, "month").startOf("month")),
@@ -191,6 +191,14 @@
         };
     },
 
+    [options.NEXT_QUARTER]: (timezone) => {
+        const nextQuarter = now(null, timezone).add(1, "quarter");
+        return {
+            from: toDate(nextQuarter.startOf("quarter")),
+            to: toDate(nextQuarter.endOf("quarter"), false),
+        };
+    },
+
     [options.LAST_YEAR]: (timezone) => {
         const lastYear = now(null, timezone).subtract(1, "year");
         return {
@@ -210,6 +218,14 @@
         from: toDate(now(null, timezone).startOf("year")),
         to: toDate(now(null, timezone).endOf("year"), false),
     }),
+
+    [options.NEXT_YEAR]: (timezone) => {
+        const nextYear = now(null, timezone).add(1, "year");
+        return {
+            from: toDate(nextYear.startOf("year")),
+            to: toDate(nextYear.endOf("year"), false),
+        };
+    },
 };
 
 export const RelativeDateRange = ({
@@ -220,13 +236,23 @@
     onChange,
     onSubmit,
     timezoneName,
+    isFutureDatesAllowed = false, // This prop used to be able to select Future Dates in RelativeDateRange,
 }) => {
     const handleChange = (e) => {
         const rangeName = e.target.value;
         const range = handlers[rangeName](timezoneName);
         onChange(rangeName, range);
     };
 
+    const filterFutureDates = (options) => {
+        if (!isFutureDatesAllowed) {
+            // Filter out options if they are in the futureDates array
+            return options.filter((option) => !futureDates.includes(option.value));
+        }
+
+        return options;
+    };
+
     return (
         <div className="flex space-x-2">
             <Select size="medium" value={value} className="pr-8 leading-5" onChange={handleChange}>
@@ -236,7 +262,7 @@
 
                     return (
                         <optgroup key={rangeKey} label={range.label}>
-                            {range.options.map((option) => (
+                            {filterFutureDates(range.options).map((option) => (
                                 <option key={option.value} value={option.value}>
                                     {option.label}
                                 </option>
@@ -258,4 +284,5 @@
     showApply: PropTypes.bool,
     value: PropTypes.string,
     timezoneName: PropTypes.string,
+    isFutureDatesAllowed: PropTypes.bool, // New prop type
 };