Frontend - Replaced the time picker with a date picker (intelowlproject#2413)

* created TimePicker component + useTimePickerSore

* test

* fix

Author: carellamartina

frontend/src/components/common/TimePicker.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Input, Label } from "reactstrap";
+import { useTimePickerStore } from "../../stores/useTimePickerStore";
+
+export function TimePicker() {
+  const [toDateValue, fromDateValue, updateToDate, updateFromDate] =
+    useTimePickerStore((state) => [
+      state.toDateValue,
+      state.fromDateValue,
+      state.updateToDate,
+      state.updateFromDate,
+    ]);
+
+  return (
+    <div className="d-flex float-end">
+      <div className="d-flex align-items-center">
+        <Label className="me-2 mb-0" for="DatePicker__gte">
+          From:
+        </Label>
+        <Input
+          id="DatePicker__gte"
+          type="date"
+          name="received_request_time__gte"
+          autoComplete="off"
+          value={fromDateValue.toISOString().split("T")[0]}
+          onChange={(event) => {
+            updateFromDate(new Date(event.target.value));
+          }}
+        />
+      </div>
+      <div className="d-flex align-items-center">
+        <Label className="mx-2 mb-0" for="DatePicker__lte">
+          To:
+        </Label>
+        <Input
+          id="DatePicker__lte"
+          type="date"
+          name="received_request_time__lte"
+          autoComplete="off"
+          value={toDateValue.toISOString().split("T")[0]}
+          onChange={(event) => {
+            updateToDate(new Date(event.target.value));
+          }}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/investigations/table/InvestigationsTable.jsx

@@ -3,18 +3,14 @@ import React from "react";
 import { Container, Row, Col, UncontrolledTooltip } from "reactstrap";
 import { MdInfoOutline } from "react-icons/md";
 
-import {
-  ElasticTimePicker,
-  SyncButton,
-  TableHintIcon,
-  useDataTable,
-  useTimePickerStore,
-} from "@certego/certego-ui";
+import { SyncButton, TableHintIcon, useDataTable } from "@certego/certego-ui";
 
 import useTitle from "react-use/lib/useTitle";
 
 import { INVESTIGATION_BASE_URI } from "../../../constants/apiURLs";
 import { investigationTableColumns } from "./investigationTableColumns";
+import { TimePicker } from "../../common/TimePicker";
+import { useTimePickerStore } from "../../../stores/useTimePickerStore";
 
 // constants
 const toPassTableProps = {
@@ -34,8 +30,11 @@ export default function InvestigationsTable() {
   // page title
   useTitle("IntelOwl | Investigation History", { restoreOnUnmount: true });
 
-  // consume zustand store
-  const { range, fromTimeIsoStr, onTimeIntervalChange } = useTimePickerStore();
+  // store
+  const [toDateValue, fromDateValue] = useTimePickerStore((state) => [
+    state.toDateValue,
+    state.fromDateValue,
+  ]);
 
   // state
   const [initialLoading, setInitialLoading] = React.useState(true);
@@ -45,7 +44,8 @@ export default function InvestigationsTable() {
     {
       url: INVESTIGATION_BASE_URI,
       params: {
-        start_time__gte: fromTimeIsoStr,
+        start_time__gte: fromDateValue,
+        start_time__lte: toDateValue,
       },
       initialParams: {
         ordering: "-start_time",
@@ -88,12 +88,7 @@ export default function InvestigationsTable() {
           </div>
         </Col>
         <Col className="align-self-center">
-          <ElasticTimePicker
-            className="float-end"
-            size="sm"
-            defaultSelected={range}
-            onChange={onTimeIntervalChange}
-          />
+          <TimePicker />
         </Col>
       </Row>
       {/* Actions */}

frontend/src/components/jobs/table/JobsTable.jsx

@@ -5,18 +5,18 @@ import { MdInfoOutline } from "react-icons/md";
 
 import {
   Loader,
-  ElasticTimePicker,
   SyncButton,
   TableHintIcon,
   useDataTable,
-  useTimePickerStore,
 } from "@certego/certego-ui";
 
 import useTitle from "react-use/lib/useTitle";
 import { jobTableColumns } from "./jobTableColumns";
+import { TimePicker } from "../../common/TimePicker";
 
 import { JOB_BASE_URI } from "../../../constants/apiURLs";
 import { usePluginConfigurationStore } from "../../../stores/usePluginConfigurationStore";
+import { useTimePickerStore } from "../../../stores/useTimePickerStore";
 
 // constants
 const toPassTableProps = {
@@ -40,8 +40,10 @@ export default function JobsTable() {
   // page title
   useTitle("IntelOwl | Jobs History", { restoreOnUnmount: true });
 
-  // consume zustand store
-  const { range, fromTimeIsoStr, onTimeIntervalChange } = useTimePickerStore();
+  const [toDateValue, fromDateValue] = useTimePickerStore((state) => [
+    state.toDateValue,
+    state.fromDateValue,
+  ]);
 
   // state
   const [initialLoading, setInitialLoading] = React.useState(true);
@@ -51,7 +53,8 @@ export default function JobsTable() {
     {
       url: JOB_BASE_URI,
       params: {
-        received_request_time__gte: fromTimeIsoStr,
+        received_request_time__gte: fromDateValue,
+        received_request_time__lte: toDateValue,
       },
       initialParams: {
         ordering: "-received_request_time",
@@ -98,12 +101,7 @@ export default function JobsTable() {
               </div>
             </Col>
             <Col className="align-self-center">
-              <ElasticTimePicker
-                className="float-end"
-                size="sm"
-                defaultSelected={range}
-                onChange={onTimeIntervalChange}
-              />
+              <TimePicker />
             </Col>
           </Row>
           {/* Actions */}

frontend/src/stores/useTimePickerStore.jsx

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+// default: 24h
+const defaultFromDate = new Date();
+defaultFromDate.setDate(defaultFromDate.getDate() - 1);
+
+export const useTimePickerStore = create((set, _get) => ({
+  toDateValue: new Date(),
+  fromDateValue: defaultFromDate,
+  updateFromDate: (date) => {
+    set({ fromDateValue: date });
+  },
+  updateToDate: (date) => {
+    set({ toDateValue: date });
+  },
+}));

frontend/tests/components/common/TimePicker.test.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+import { TimePicker } from "../../../src/components/common/TimePicker";
+
+describe("test TimePicker component", () => {
+  test("time picker", async () => {
+    const defaultFromDate = new Date();
+    defaultFromDate.setDate(defaultFromDate.getDate() - 1);
+    const toDateValue = new Date().toISOString().split("T")[0];
+    const fromDateValue = defaultFromDate.toISOString().split("T")[0];
+
+    const user = userEvent.setup();
+    const { container } = render(
+      <BrowserRouter>
+        <TimePicker />
+      </BrowserRouter>,
+    );
+
+    // labels
+    const fromLabel = screen.getByText("From:");
+    expect(fromLabel).toBeInTheDocument();
+    const toLabel = screen.getByText("To:");
+    expect(toLabel).toBeInTheDocument();
+
+    // time picker input
+    const firstDateInput = container.querySelector("#DatePicker__gte");
+    expect(firstDateInput).toBeInTheDocument();
+    const secondDateInput = container.querySelector("#DatePicker__lte");
+    expect(secondDateInput).toBeInTheDocument();
+    expect(firstDateInput).toHaveValue(fromDateValue);
+    expect(secondDateInput).toHaveValue(toDateValue);
+
+    // clear the input by highlighting all the current text and then replacing it with the new value
+    await user.type(firstDateInput, "2024-02-05", {
+      initialSelectionStart: 0,
+      initialSelectionEnd: firstDateInput.value.length,
+    });
+    await user.type(secondDateInput, "2024-05-13", {
+      initialSelectionStart: 0,
+      initialSelectionEnd: secondDateInput.value.length,
+    });
+    await waitFor(() => {
+      expect(firstDateInput).toHaveValue("2024-02-05");
+      expect(secondDateInput).toHaveValue("2024-05-13");
+    });
+  });
+});