FIX: Date range filter fix (#1998)

* fix: change modal title

* fix: show initial selected dates on activity log results page

* fix: fixed failing tests

* task: added comment regarding test

Author: finnar-bin

cypress/e2e/reports/activity-log/activity-log.spec.js

@@ -90,13 +90,19 @@ describe("Reports > Activity Log > Home", () => {
         );
       });
 
-      const from = moment()
+      /**
+       * Note: Date needs to be hard-coded here to make sure that when the datepicker opens,
+       * the cypress test runner can easily pick the date from the datepicker modal
+       * instead of having to determine how many times to click the next month arrow everytime
+       * to get to the current date.
+       */
+      const from = moment("2022-07-14")
         .hours(0)
         .minute(0)
         .second(0)
         .millisecond(0)
         .format("x");
-      const to = moment()
+      const to = moment("2022-07-14")
         .add(1, "day")
         .hours(0)
         .minute(0)
@@ -105,7 +111,7 @@ describe("Reports > Activity Log > Home", () => {
         .format("x");
 
       // Set daterange filter
-      cy.getBySelector("dateRange_default").should("exist").click();
+      cy.getBySelector("dateRange_selected").should("exist").click();
       cy.getBySelector("dateRange_picker").should("exist");
       cy.get(`[data-timestamp=${from}]`).should("exist").click();
       cy.get(`[data-timestamp=${to}]`).should("exist").click();
@@ -118,8 +124,10 @@ describe("Reports > Activity Log > Home", () => {
       cy.getBySelector("resourceType_default").should("exist").click();
       cy.getBySelector("filter_value_content").should("exist").click();
 
-      const expectedFromDate = moment().format("YYYY-MM-DD");
-      const expectedToDate = moment().add(1, "day").format("YYYY-MM-DD");
+      const expectedFromDate = moment("2022-07-14").format("YYYY-MM-DD");
+      const expectedToDate = moment("2022-07-14")
+        .add(1, "day")
+        .format("YYYY-MM-DD");
 
       cy.location("search").should(
         "eq",
@@ -180,13 +188,19 @@ describe("Reports > Activity Log > Home", () => {
         });
       }).as("request");
 
-      const from = moment()
+      /**
+       * Note: Date needs to be hard-coded here to make sure that when the datepicker opens,
+       * the cypress test runner can easily pick the date from the datepicker modal
+       * instead of having to determine how many times to click the next month arrow everytime
+       * to get to the current date.
+       */
+      const from = moment("2022-07-14")
         .hours(0)
         .minute(0)
         .second(0)
         .millisecond(0)
         .format("x");
-      const to = moment()
+      const to = moment("2022-07-14")
         .add(1, "day")
         .hours(0)
         .minute(0)
@@ -195,7 +209,7 @@ describe("Reports > Activity Log > Home", () => {
         .format("x");
 
       // Set daterange filter
-      cy.getBySelector("dateRange_default").should("exist").click();
+      cy.getBySelector("dateRange_selected").should("exist").click();
       cy.getBySelector("dateRange_picker").should("exist");
       cy.get(`[data-timestamp=${from}]`).should("exist").click();
       cy.get(`[data-timestamp=${to}]`).should("exist").click();

src/apps/reports/src/app/views/ActivityLog/components/Filters.tsx

@@ -2,6 +2,7 @@ import { useMemo, FC, useEffect, useState } from "react";
 import { Box, FormControl, Skeleton } from "@mui/material";
 import moment from "moment";
 import { uniqBy, isEqual } from "lodash";
+import { useLocation } from "react-router-dom";
 import { useParams } from "../../../../../../../shell/hooks/useParams";
 import { accountsApi } from "../../../../../../../shell/services/accounts";
 import { Audit } from "../../../../../../../shell/services/types";
@@ -99,6 +100,7 @@ export const Filters: FC<FiltersProps> = ({
   showSkeletons,
 }) => {
   const [params, setParams] = useParams();
+  const location = useLocation();
   const { data: usersRoles } = accountsApi.useGetUsersRolesQuery();
   const [defaultDateRange, setDefaultDateRange] =
     useState<DateRangeFilterValue>({ from: null, to: null });
@@ -132,7 +134,10 @@ export const Filters: FC<FiltersProps> = ({
         to: moment(params.get("to")).format("YYYY-MM-DD"),
       };
 
-      if (isEqual(currentDateRange, defaultDateRange)) {
+      if (
+        location?.pathname.includes("schema") &&
+        isEqual(currentDateRange, defaultDateRange)
+      ) {
         // Don't show the date on the date range filter if it's the same with the default date
         return { from: null, to: null };
       }
@@ -269,7 +274,7 @@ export const Filters: FC<FiltersProps> = ({
           value={dateRange}
           onChange={handleDateRangeFilterChanged}
           inactiveButtonText="Date"
-          headerTitle="Date"
+          headerTitle="Select Date Range"
         />
       )}
     </Box>

src/shell/components/Filters/DateRangeFilter.tsx

@@ -36,8 +36,8 @@ export const DateRangeFilter: FC<DateRangeFilterProps> = ({
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedDateRange, setSelectedDateRange] = useState<DateRange<any>>([
-    value.from ? new Date(value.from) : null,
-    value.to ? new Date(value.to) : null,
+    null,
+    null,
   ]);
   const [dateRangeState, setDateRangeState] = useState("");
 
@@ -57,6 +57,12 @@ export const DateRangeFilter: FC<DateRangeFilterProps> = ({
     }
   }, [dateRangeState]);
 
+  useEffect(() => {
+    if (value.from && value.to) {
+      setSelectedDateRange([new Date(value.from), new Date(value.to)]);
+    }
+  }, [value]);
+
   const isFilterActive = Boolean(value?.from && value?.to);
   const buttonText = isFilterActive
     ? `${moment(value.from).format("MMM D, YYYY")} to ${moment(value.to).format(