From bf37639c64125319c9b294a508c24d2e7ae28642 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Wed, 18 Sep 2024 09:42:20 +0300 Subject: [PATCH] refactor: remove unused timeline component and move the timeline component --- package.json | 3 +- src/api/query-hooks/useConfigChangesHooks.ts | 2 +- src/api/query-hooks/useJobsHistoryQuery.ts | 2 +- .../ConfigChangesDateRangeFIlter.tsx | 4 +- .../Forms/Formik/FormikDurationPicker.tsx | 4 +- .../Filters/JobsHistoryFilters.tsx | 4 +- .../Runs/Filter/PlaybookRunsFilterBar.tsx | 4 +- src/pages/playbooks/PlaybookRunsPage.tsx | 2 +- src/ui/Dates/DateTimeRangerPicker.stories.tsx | 20 ---- src/ui/Dates/DateTimeRangerPicker.tsx | 91 ------------------- .../TimeRangePicker/RecentlyRanges.tsx | 2 +- .../TimeRangePicker/TimePickerCalendar.tsx | 0 .../TimeRangePicker/TimePickerInput.tsx | 0 .../TimeRangePicker/TimeRangeList.tsx | 0 .../TimeRangePicker.stories.tsx | 12 ++- .../TimeRangePicker/TimeRangePicker.tsx | 0 .../TimeRangePicker/TimeRangePickerBody.tsx | 2 +- src/ui/{ => Dates}/TimeRangePicker/helpers.ts | 4 +- src/ui/{ => Dates}/TimeRangePicker/index.ts | 0 .../TimeRangePicker/parseDateMath.ts | 0 .../TimeRangePicker/rangeOptions.ts | 0 .../TimeRangePicker/useTimeRangeParams.tsx | 0 .../DateTimeRangerPicker.unit.test.tsx | 42 --------- 23 files changed, 28 insertions(+), 170 deletions(-) delete mode 100644 src/ui/Dates/DateTimeRangerPicker.stories.tsx delete mode 100644 src/ui/Dates/DateTimeRangerPicker.tsx rename src/ui/{ => Dates}/TimeRangePicker/RecentlyRanges.tsx (95%) rename src/ui/{ => Dates}/TimeRangePicker/TimePickerCalendar.tsx (100%) rename src/ui/{ => Dates}/TimeRangePicker/TimePickerInput.tsx (100%) rename src/ui/{ => Dates}/TimeRangePicker/TimeRangeList.tsx (100%) rename src/ui/{ => Dates}/TimeRangePicker/TimeRangePicker.stories.tsx (69%) rename src/ui/{ => Dates}/TimeRangePicker/TimeRangePicker.tsx (100%) rename src/ui/{ => Dates}/TimeRangePicker/TimeRangePickerBody.tsx (99%) rename src/ui/{ => Dates}/TimeRangePicker/helpers.ts (95%) rename src/ui/{ => Dates}/TimeRangePicker/index.ts (100%) rename src/ui/{ => Dates}/TimeRangePicker/parseDateMath.ts (100%) rename src/ui/{ => Dates}/TimeRangePicker/rangeOptions.ts (100%) rename src/ui/{ => Dates}/TimeRangePicker/useTimeRangeParams.tsx (100%) delete mode 100644 src/ui/Dates/__tests__/DateTimeRangerPicker.unit.test.tsx diff --git a/package.json b/package.json index 6100c6088..f45ef3fb4 100644 --- a/package.json +++ b/package.json @@ -219,5 +219,6 @@ }, "msw": { "workerDirectory": "public" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/api/query-hooks/useConfigChangesHooks.ts b/src/api/query-hooks/useConfigChangesHooks.ts index c3eed6d53..752a54295 100644 --- a/src/api/query-hooks/useConfigChangesHooks.ts +++ b/src/api/query-hooks/useConfigChangesHooks.ts @@ -1,7 +1,7 @@ import { configChangesDefaultDateFilter } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter"; import { useHideDeletedConfigChanges } from "@flanksource-ui/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigChangesToggledDeletedItems"; import { useConfigChangesArbitraryFilters } from "@flanksource-ui/hooks/useConfigChangesArbitraryFilters"; -import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams"; +import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams"; import { UseQueryOptions, useQuery } from "@tanstack/react-query"; import { useMemo } from "react"; import { useParams, useSearchParams } from "react-router-dom"; diff --git a/src/api/query-hooks/useJobsHistoryQuery.ts b/src/api/query-hooks/useJobsHistoryQuery.ts index 825c67968..c542cc81b 100644 --- a/src/api/query-hooks/useJobsHistoryQuery.ts +++ b/src/api/query-hooks/useJobsHistoryQuery.ts @@ -2,7 +2,7 @@ import { durationOptions } from "@flanksource-ui/components/JobsHistory/Filters/ import { jobHistoryDefaultDateFilter } from "@flanksource-ui/components/JobsHistory/Filters/JobsHistoryFilters"; import { JobHistory } from "@flanksource-ui/components/JobsHistory/JobsHistoryTable"; import { resourceTypeMap } from "@flanksource-ui/components/SchemaResourcePage/SchemaResourceEditJobsTab"; -import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams"; +import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams"; import { useQuery, UseQueryOptions } from "@tanstack/react-query"; import { useMemo } from "react"; import { useSearchParams } from "react-router-dom"; diff --git a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx index 7a8a15cd1..be0ab6dc5 100644 --- a/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx +++ b/src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter.tsx @@ -1,5 +1,5 @@ -import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker"; -import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams"; +import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker"; +import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams"; import { URLSearchParamsInit } from "react-router-dom"; type Props = { diff --git a/src/components/Forms/Formik/FormikDurationPicker.tsx b/src/components/Forms/Formik/FormikDurationPicker.tsx index 5b44bbcfa..702b3757c 100644 --- a/src/components/Forms/Formik/FormikDurationPicker.tsx +++ b/src/components/Forms/Formik/FormikDurationPicker.tsx @@ -1,8 +1,8 @@ import { rangeOptionsCategories, TimeRangeOption -} from "@flanksource-ui/ui/TimeRangePicker/rangeOptions"; -import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker/TimeRangePicker"; +} from "@flanksource-ui/ui/Dates/TimeRangePicker/rangeOptions"; +import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker/TimeRangePicker"; import dayjs from "dayjs"; import { useFormikContext } from "formik"; import { useMemo } from "react"; diff --git a/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx b/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx index 27677641a..0573c6574 100644 --- a/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx +++ b/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx @@ -1,6 +1,6 @@ import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm"; -import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker"; -import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams"; +import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker"; +import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams"; import { URLSearchParamsInit } from "react-router-dom"; import JobHistoryDurationDropdown from "./JobHistoryDurationDropdown"; import JobHistoryNamesDropdown from "./JobHistoryNames"; diff --git a/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx b/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx index bbf018df8..a22a7014d 100644 --- a/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx +++ b/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx @@ -3,8 +3,8 @@ import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm" import { AuthorizationAccessCheck } from "@flanksource-ui/components/Permissions/AuthorizationAccessCheck"; import { tables } from "@flanksource-ui/context/UserAccessContext/permissions"; import { Button } from "@flanksource-ui/ui/Buttons/Button"; -import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker"; -import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams"; +import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker"; +import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams"; import { useState } from "react"; import { FaEdit } from "react-icons/fa"; import { URLSearchParamsInit } from "react-router-dom"; diff --git a/src/pages/playbooks/PlaybookRunsPage.tsx b/src/pages/playbooks/PlaybookRunsPage.tsx index 501a19cdd..b2546d07c 100644 --- a/src/pages/playbooks/PlaybookRunsPage.tsx +++ b/src/pages/playbooks/PlaybookRunsPage.tsx @@ -12,9 +12,9 @@ import { BreadcrumbNav, BreadcrumbRoot } from "@flanksource-ui/ui/BreadcrumbNav"; +import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams"; import { Head } from "@flanksource-ui/ui/Head"; import TabbedLinks from "@flanksource-ui/ui/Tabs/TabbedLinks"; -import useTimeRangeParams from "@flanksource-ui/ui/TimeRangePicker/useTimeRangeParams"; import { useQuery } from "@tanstack/react-query"; import { useMemo, useState } from "react"; import { FaHome } from "react-icons/fa"; diff --git a/src/ui/Dates/DateTimeRangerPicker.stories.tsx b/src/ui/Dates/DateTimeRangerPicker.stories.tsx deleted file mode 100644 index 0790a1ad6..000000000 --- a/src/ui/Dates/DateTimeRangerPicker.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, { ComponentProps } from "react"; -import { Story, Meta } from "@storybook/react"; -import DateTimeRangerPicker from "./DateTimeRangerPicker"; - -export default { - title: "DateTimeRangerPicker", - component: DateTimeRangerPicker -} as Meta; - -const Template: Story> = (args) => ( -
- -
-); - -export const DefaultPicker = Template.bind({}); - -DefaultPicker.args = { - label: "Date Range" -}; diff --git a/src/ui/Dates/DateTimeRangerPicker.tsx b/src/ui/Dates/DateTimeRangerPicker.tsx deleted file mode 100644 index e6be7c77f..000000000 --- a/src/ui/Dates/DateTimeRangerPicker.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import dayjs, { Dayjs } from "dayjs"; -import { useCallback, useState } from "react"; - -type DateRangerPickerProps = { - label?: string; - // dates are string in ISO format - onChange?: (from: string, to: string) => void; - value?: { - from?: string; - to?: string; - }; - maxDate?: string; -}; - -export default function DateTimeRangerPicker({ - label, - value, - onChange = () => {}, - maxDate = dayjs().format("YYYY-MM-DDTHH:mm:ss") -}: DateRangerPickerProps) { - const [from, setFrom] = useState(() => { - if (value?.from) { - return dayjs(value.from); - } - return undefined; - }); - - const [to, setTo] = useState(() => { - if (value?.to) { - return dayjs(value.to); - } - return undefined; - }); - - console.log({ to, from, value }); - - const handleOnChange = useCallback( - (from: Dayjs | undefined, to: Dayjs | undefined) => { - if (from && to) { - onChange?.(from.toISOString(), to.toISOString()); - } - }, - [onChange] - ); - - return ( -
- -
-
- - { - if (value.target.value) { - setFrom(dayjs(value.target.value)); - handleOnChange(dayjs(value.target.value), to); - } - }} - value={from ? dayjs(from).format("YYYY-MM-DDTHH:mm:ss") : undefined} - id="starts" - /> -
-
- - { - if (value.target.value) { - setTo(dayjs(value.target.value)); - handleOnChange(from, dayjs(value.target.value)); - } - }} - id="ends" - /> -
-
-
- ); -} diff --git a/src/ui/TimeRangePicker/RecentlyRanges.tsx b/src/ui/Dates/TimeRangePicker/RecentlyRanges.tsx similarity index 95% rename from src/ui/TimeRangePicker/RecentlyRanges.tsx rename to src/ui/Dates/TimeRangePicker/RecentlyRanges.tsx index ff9e8b24f..90004a861 100644 --- a/src/ui/TimeRangePicker/RecentlyRanges.tsx +++ b/src/ui/Dates/TimeRangePicker/RecentlyRanges.tsx @@ -1,4 +1,4 @@ -import { formatTimeRange } from "../../utils/date"; +import { formatTimeRange } from "../../../utils/date"; import { TimeRangeAbsoluteOption, TimeRangeOption } from "./rangeOptions"; type RecentlyRangesProps = { diff --git a/src/ui/TimeRangePicker/TimePickerCalendar.tsx b/src/ui/Dates/TimeRangePicker/TimePickerCalendar.tsx similarity index 100% rename from src/ui/TimeRangePicker/TimePickerCalendar.tsx rename to src/ui/Dates/TimeRangePicker/TimePickerCalendar.tsx diff --git a/src/ui/TimeRangePicker/TimePickerInput.tsx b/src/ui/Dates/TimeRangePicker/TimePickerInput.tsx similarity index 100% rename from src/ui/TimeRangePicker/TimePickerInput.tsx rename to src/ui/Dates/TimeRangePicker/TimePickerInput.tsx diff --git a/src/ui/TimeRangePicker/TimeRangeList.tsx b/src/ui/Dates/TimeRangePicker/TimeRangeList.tsx similarity index 100% rename from src/ui/TimeRangePicker/TimeRangeList.tsx rename to src/ui/Dates/TimeRangePicker/TimeRangeList.tsx diff --git a/src/ui/TimeRangePicker/TimeRangePicker.stories.tsx b/src/ui/Dates/TimeRangePicker/TimeRangePicker.stories.tsx similarity index 69% rename from src/ui/TimeRangePicker/TimeRangePicker.stories.tsx rename to src/ui/Dates/TimeRangePicker/TimeRangePicker.stories.tsx index 2c5647f88..57dc2300b 100644 --- a/src/ui/TimeRangePicker/TimeRangePicker.stories.tsx +++ b/src/ui/Dates/TimeRangePicker/TimeRangePicker.stories.tsx @@ -1,12 +1,22 @@ import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { useState } from "react"; import { TimeRangePicker } from "./index"; import { TimeRangeOption } from "./rangeOptions"; const TimeRangePickerContainer = () => { + const [value, setValue] = useState(); + const onChange = (range: TimeRangeOption) => { console.log("range", range); + setValue(range); }; - return ; + return ( + + ); }; export default { diff --git a/src/ui/TimeRangePicker/TimeRangePicker.tsx b/src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx similarity index 100% rename from src/ui/TimeRangePicker/TimeRangePicker.tsx rename to src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx diff --git a/src/ui/TimeRangePicker/TimeRangePickerBody.tsx b/src/ui/Dates/TimeRangePicker/TimeRangePickerBody.tsx similarity index 99% rename from src/ui/TimeRangePicker/TimeRangePickerBody.tsx rename to src/ui/Dates/TimeRangePicker/TimeRangePickerBody.tsx index 794526780..f35fd4e51 100644 --- a/src/ui/TimeRangePicker/TimeRangePickerBody.tsx +++ b/src/ui/Dates/TimeRangePicker/TimeRangePickerBody.tsx @@ -3,7 +3,7 @@ import { useAtom } from "jotai"; import { atomWithStorage } from "jotai/utils"; import { useCallback, useEffect, useState } from "react"; import { useSearchParams } from "react-router-dom"; -import { formatTimeRange, isValidDate } from "../../utils/date"; +import { formatTimeRange, isValidDate } from "../../../utils/date"; import { RecentlyRanges } from "./RecentlyRanges"; import { TimePickerCalendar } from "./TimePickerCalendar"; import { TimePickerInput } from "./TimePickerInput"; diff --git a/src/ui/TimeRangePicker/helpers.ts b/src/ui/Dates/TimeRangePicker/helpers.ts similarity index 95% rename from src/ui/TimeRangePicker/helpers.ts rename to src/ui/Dates/TimeRangePicker/helpers.ts index 4b6c1ac8e..a48ca5281 100644 --- a/src/ui/TimeRangePicker/helpers.ts +++ b/src/ui/Dates/TimeRangePicker/helpers.ts @@ -4,8 +4,8 @@ import { formatISODate, isValidDate, subtractDateFromNow -} from "../../utils/date"; -import { getLocalItem, setLocalItem } from "../../utils/storage"; +} from "../../../utils/date"; +import { getLocalItem, setLocalItem } from "../../../utils/storage"; export const getIntervalData = (interval: string): [number, string] => { if (interval === "now") { diff --git a/src/ui/TimeRangePicker/index.ts b/src/ui/Dates/TimeRangePicker/index.ts similarity index 100% rename from src/ui/TimeRangePicker/index.ts rename to src/ui/Dates/TimeRangePicker/index.ts diff --git a/src/ui/TimeRangePicker/parseDateMath.ts b/src/ui/Dates/TimeRangePicker/parseDateMath.ts similarity index 100% rename from src/ui/TimeRangePicker/parseDateMath.ts rename to src/ui/Dates/TimeRangePicker/parseDateMath.ts diff --git a/src/ui/TimeRangePicker/rangeOptions.ts b/src/ui/Dates/TimeRangePicker/rangeOptions.ts similarity index 100% rename from src/ui/TimeRangePicker/rangeOptions.ts rename to src/ui/Dates/TimeRangePicker/rangeOptions.ts diff --git a/src/ui/TimeRangePicker/useTimeRangeParams.tsx b/src/ui/Dates/TimeRangePicker/useTimeRangeParams.tsx similarity index 100% rename from src/ui/TimeRangePicker/useTimeRangeParams.tsx rename to src/ui/Dates/TimeRangePicker/useTimeRangeParams.tsx diff --git a/src/ui/Dates/__tests__/DateTimeRangerPicker.unit.test.tsx b/src/ui/Dates/__tests__/DateTimeRangerPicker.unit.test.tsx deleted file mode 100644 index dc6e48dc3..000000000 --- a/src/ui/Dates/__tests__/DateTimeRangerPicker.unit.test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { fireEvent, render, screen } from "@testing-library/react"; -import DateTimeRangerPicker from "./../DateTimeRangerPicker"; - -describe("DateTimeRangerPicker", () => { - const mockOnChange = jest.fn(); - - it("renders correctly", () => { - render(); - - expect(screen.getByText("Test Label")).toBeInTheDocument(); - }); - - it("calls onChange when the From input is changed", () => { - render(); - - fireEvent.change(screen.getByLabelText("From:"), { - target: { value: "2022-01-01T00:00" } - }); - - fireEvent.change(screen.getByLabelText("To:"), { - target: { value: "2022-01-02T01:00" } - }); - - expect(mockOnChange).toHaveBeenCalled(); - }); - - it("calls onChange when the To input is changed", () => { - render( - - ); - - fireEvent.change(screen.getByLabelText("To:"), { - target: { value: "2022-01-02T01:00" } - }); - - expect(mockOnChange).toHaveBeenCalled(); - }); -});