From 65b232cdcaf383b5869512002d37b1aace58b726 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Mon, 16 Sep 2024 11:45:20 +0300 Subject: [PATCH 1/5] feat: add checks dropdown --- src/api/services/topology.ts | 6 +++ src/api/types/health.ts | 5 ++ .../Forms/Formik/FormikChecksDropdown.tsx | 52 +++++++++++++++++++ 3 files changed, 63 insertions(+) create mode 100644 src/components/Forms/Formik/FormikChecksDropdown.tsx diff --git a/src/api/services/topology.ts b/src/api/services/topology.ts index 54670e4fe..48b32eedc 100644 --- a/src/api/services/topology.ts +++ b/src/api/services/topology.ts @@ -11,6 +11,7 @@ import { SchemaResourceI } from "../schemaResources"; import { PaginationInfo } from "../types/common"; import { HealthCheck, + HealthCheckNames, HealthCheckStatus, HealthCheckSummary } from "../types/health"; @@ -294,3 +295,8 @@ export const getComponentChecks = async (id: string) => { ); return res.data; }; + +export const getCheckNames = async () => { + const res = await IncidentCommander.get(`/check_names`); + return res.data; +}; diff --git a/src/api/types/health.ts b/src/api/types/health.ts index d9c4ec0bb..c582a54ac 100644 --- a/src/api/types/health.ts +++ b/src/api/types/health.ts @@ -62,6 +62,11 @@ export type HealthCheckSummary = Pick< | "last_transition_time" >; +export type HealthCheckNames = Pick< + HealthCheck, + "id" | "name" | "canary_id" | "status" | "type" +>; + export interface HealthCheckStatus { status: boolean; time: string; diff --git a/src/components/Forms/Formik/FormikChecksDropdown.tsx b/src/components/Forms/Formik/FormikChecksDropdown.tsx new file mode 100644 index 000000000..4299b4dbd --- /dev/null +++ b/src/components/Forms/Formik/FormikChecksDropdown.tsx @@ -0,0 +1,52 @@ +import { getCheckNames } from "@flanksource-ui/api/services/topology"; +import { useQuery } from "@tanstack/react-query"; +import { useMemo } from "react"; +import { Icon } from "../../../ui/Icons/Icon"; +import FormikSelectDropdown from "./FormikSelectDropdown"; + +type FormikChecksDropdownProps = { + name: string; + label?: string; + required?: boolean; + hint?: string; + filter?: { + types: string[]; + }; + className?: string; +}; + +export default function FormikChecksDropdown({ + name, + label, + required = false, + hint, + filter, + className = "flex flex-col space-y-2 py-2" +}: FormikChecksDropdownProps) { + const { isLoading, data: checks } = useQuery({ + queryKey: ["checks", "check_names"], + queryFn: () => getCheckNames() + }); + + const options = useMemo( + () => + checks?.map((check) => ({ + label: check.name, + value: check.id, + icon: + })), + [checks] + ); + + return ( + + ); +} From 201e6f1a01239a699ddb2f355e885382e224fd05 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Mon, 16 Sep 2024 16:03:46 +0300 Subject: [PATCH 2/5] feat: add silence notification form page Fixes #2284 --- src/App.tsx | 30 +++-- src/api/axios.ts | 9 ++ src/api/services/notifications.ts | 12 +- src/api/services/topology.ts | 10 ++ src/api/types/notifications.ts | 11 ++ .../Forms/Formik/FormikCanaryDropdown.tsx | 47 ++++++++ .../Forms/Formik/FormikDurationPicker.tsx | 79 +++++++++++++ .../FormikNotificationField.tsx | 110 ++++++++++++++++++ .../NotificationSilenceForm.tsx | 79 +++++++++++++ .../Settings/NotificationSilencePage.tsx | 34 ++++++ src/ui/TimeRangePicker/TimeRangeList.tsx | 81 +++++++------ src/ui/TimeRangePicker/TimeRangePicker.tsx | 11 +- .../TimeRangePicker/TimeRangePickerBody.tsx | 6 +- src/ui/TimeRangePicker/rangeOptions.ts | 105 ++++++++++++++--- 14 files changed, 556 insertions(+), 68 deletions(-) create mode 100644 src/api/types/notifications.ts create mode 100644 src/components/Forms/Formik/FormikCanaryDropdown.tsx create mode 100644 src/components/Forms/Formik/FormikDurationPicker.tsx create mode 100644 src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx create mode 100644 src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx create mode 100644 src/pages/Settings/NotificationSilencePage.tsx diff --git a/src/App.tsx b/src/App.tsx index 2c65a2dd3..be59fa5cf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -54,6 +54,7 @@ import { import { ConnectionsPage } from "./pages/Settings/ConnectionsPage"; import { EventQueueStatusPage } from "./pages/Settings/EventQueueStatus"; import { FeatureFlagsPage } from "./pages/Settings/FeatureFlagsPage"; +import NotificationSilencePage from "./pages/Settings/NotificationSilencePage"; import { TopologyCardPage } from "./pages/TopologyCard"; import { UsersPage } from "./pages/UsersPage"; import { ConfigInsightsPage } from "./pages/config/ConfigInsightsList"; @@ -374,14 +375,27 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) { true )} /> - , - tables.database, - "read" - )} - /> + + , + tables.database, + "read", + true + )} + /> + + , + tables.database, + "write", + true + )} + /> + { return resolvePostGrestRequestWithPagination( @@ -22,3 +23,10 @@ export const getNotificationById = async (id: string) => { ); return res.data ? res.data?.[0] : undefined; }; + +export const silenceNotification = async ( + data: SilenceNotificationResponse +) => { + const res = await NotificationAPI.post("/silence", data); + return res.data; +}; diff --git a/src/api/services/topology.ts b/src/api/services/topology.ts index 48b32eedc..72d919b5b 100644 --- a/src/api/services/topology.ts +++ b/src/api/services/topology.ts @@ -300,3 +300,13 @@ export const getCheckNames = async () => { const res = await IncidentCommander.get(`/check_names`); return res.data; }; + +export const getCanaryNames = async () => { + const res = await IncidentCommander.get< + { + id: string; + name: string; + }[] + >(`/canary_names`); + return res.data; +}; diff --git a/src/api/types/notifications.ts b/src/api/types/notifications.ts new file mode 100644 index 000000000..0b5475f7d --- /dev/null +++ b/src/api/types/notifications.ts @@ -0,0 +1,11 @@ +export type SilenceNotificationResponse = { + id: string; + component_id: string; + config_id: string; + check_id: string; + canary_id: string; + from: string; + until: string; + description: string; + recursive: boolean; +}; diff --git a/src/components/Forms/Formik/FormikCanaryDropdown.tsx b/src/components/Forms/Formik/FormikCanaryDropdown.tsx new file mode 100644 index 000000000..2ce7486c0 --- /dev/null +++ b/src/components/Forms/Formik/FormikCanaryDropdown.tsx @@ -0,0 +1,47 @@ +import { getCanaryNames } from "@flanksource-ui/api/services/topology"; +import { useQuery } from "@tanstack/react-query"; +import { useMemo } from "react"; +import FormikSelectDropdown from "./FormikSelectDropdown"; + +type FormikCanaryDropdownProps = { + name: string; + label?: string; + required?: boolean; + hint?: string; + + className?: string; +}; + +export default function FormikCanaryDropdown({ + name, + label, + required = false, + hint, + className = "flex flex-col space-y-2 py-2" +}: FormikCanaryDropdownProps) { + const { isLoading, data: canary } = useQuery({ + queryKey: ["canaries", "canary_names"], + queryFn: () => getCanaryNames() + }); + + const options = useMemo( + () => + canary?.map((canary) => ({ + label: canary.name, + value: canary.id + })), + [canary] + ); + + return ( + + ); +} diff --git a/src/components/Forms/Formik/FormikDurationPicker.tsx b/src/components/Forms/Formik/FormikDurationPicker.tsx new file mode 100644 index 000000000..5b44bbcfa --- /dev/null +++ b/src/components/Forms/Formik/FormikDurationPicker.tsx @@ -0,0 +1,79 @@ +import { + rangeOptionsCategories, + TimeRangeOption +} from "@flanksource-ui/ui/TimeRangePicker/rangeOptions"; +import { TimeRangePicker } from "@flanksource-ui/ui/TimeRangePicker/TimeRangePicker"; +import dayjs from "dayjs"; +import { useFormikContext } from "formik"; +import { useMemo } from "react"; + +type FormikDurationPickerProps = { + fieldNames: { + from: string; + to: string; + }; + label: string; + className?: string; + placeholder?: string; +}; + +export default function FormikDurationPicker({ + fieldNames: { from, to }, + label, + placeholder = "Select duration", + className = "flex flex-col py-2" +}: FormikDurationPickerProps) { + const { values, setFieldValue } = + useFormikContext>(); + + const value = useMemo(() => { + // if until is a valid date, then, set time range value to and from + if (dayjs(values[to]).isValid()) { + return { + display: "Custom", + from: values[from] ?? "", + to: values[to] ?? "", + type: "absolute" + } satisfies TimeRangeOption; + } + + const relativeValues = rangeOptionsCategories.find( + (category) => + category.name === "Relative time ranges" && category.type === "future" + )?.options; + + return { + type: "relative", + display: values[to] + ? relativeValues?.find( + (v) => v.type === "relative" && v.range === values[to] + )?.display! + : "", + range: values[to] ?? "" + } satisfies TimeRangeOption; + }, [from, to, values]); + + return ( +
+ {label && } +
+ { + console.log(value, "value"); + if (value.type === "absolute") { + setFieldValue(from, value.from); + setFieldValue(to, value.to); + } else if (value.type === "relative") { + setFieldValue(to, value.range); + setFieldValue(from, "now"); + } + }} + showFutureTimeRanges + className="w-full" + /> +
+
+ ); +} diff --git a/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx b/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx new file mode 100644 index 000000000..fad009f3f --- /dev/null +++ b/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx @@ -0,0 +1,110 @@ +import FormikResourceSelectorDropdown from "@flanksource-ui/components/Forms/Formik/FormikResourceSelectorDropdown"; +import { Switch } from "@flanksource-ui/ui/FormControls/Switch"; +import { useFormikContext } from "formik"; +import { useMemo, useState } from "react"; + +export default function FormikNotificationResourceField() { + const { values } = useFormikContext>(); + + const component_id = values.component_id; + const config_id = values.config_id; + const check_id = values.check_id; + const canary_id = values.canary_id; + + const [switchOption, setSwitchOption] = useState< + "Component" | "Catalog" | "Check" | "Canary" + >(() => { + if (component_id) { + return "Component"; + } + if (config_id) { + return "Catalog"; + } + if (check_id) { + return "Check"; + } + if (canary_id) { + return "Canary"; + } + return "Catalog"; + }); + + const fieldName = useMemo(() => { + switch (switchOption) { + case "Component": + return { + name: "component_id", + label: "Component" + }; + case "Catalog": + return { + name: "config_id", + label: "Catalog" + }; + case "Check": + return { + name: "check_id", + label: "Check" + }; + case "Canary": + return { + name: "canary_id", + label: "Canary" + }; + } + }, [switchOption]); + + return ( +
+ +
+
+ { + setSwitchOption(v); + // clear the other fields if the user selects a different option + if (v === "Component") { + values.config_id = null; + values.check_id = null; + values.canary_id = null; + } + + if (v === "Catalog") { + values.component_id = null; + values.check_id = null; + values.canary_id = null; + } + + if (v === "Check") { + values.component_id = null; + values.config_id = null; + values.canary_id = null; + } + + if (v === "Canary") { + values.component_id = null; + values.config_id = null; + values.check_id = null; + } + }} + /> +
+ + +
+
+ ); +} diff --git a/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx new file mode 100644 index 000000000..9725a2832 --- /dev/null +++ b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx @@ -0,0 +1,79 @@ +import { silenceNotification } from "@flanksource-ui/api/services/notifications"; +import { SilenceNotificationResponse as SilenceNotificationRequest } from "@flanksource-ui/api/types/notifications"; +import FormikCheckbox from "@flanksource-ui/components/Forms/Formik/FormikCheckbox"; +import FormikDurationPicker from "@flanksource-ui/components/Forms/Formik/FormikDurationPicker"; +import FormikTextArea from "@flanksource-ui/components/Forms/Formik/FormikTextArea"; +import FormikNotificationResourceField from "@flanksource-ui/components/Notifications/SilenceNotificationForm/FormikNotificationField"; +import { + toastError, + toastSuccess +} from "@flanksource-ui/components/Toast/toast"; +import { useMutation } from "@tanstack/react-query"; +import { Form, Formik } from "formik"; +import { FaCircleNotch } from "react-icons/fa"; +import { useSearchParams } from "react-router-dom"; + +export default function NotificationSilenceForm() { + const [searchParam] = useSearchParams(); + + const component_id = searchParam.get("component_id") ?? undefined; + const config_id = searchParam.get("config_id") ?? undefined; + const check_id = searchParam.get("check_id") ?? undefined; + const canary_id = searchParam.get("canary_id") ?? undefined; + + const initialValues: Partial = { + component_id, + config_id, + check_id, + canary_id + }; + + const { isLoading, mutate } = useMutation({ + mutationFn: (data: SilenceNotificationRequest) => silenceNotification(data), + onSuccess: () => { + // do something + toastSuccess("Silenced notification"); + }, + onError: (error) => { + // do something + console.error(error); + toastError("Failed to silence notification"); + } + }); + + return ( +
+ > + initialValues={initialValues} + onSubmit={(v) => { + return mutate({ + ...v + } as SilenceNotificationRequest); + }} + > +
+ + + + +
+ +
+ + +
+ ); +} diff --git a/src/pages/Settings/NotificationSilencePage.tsx b/src/pages/Settings/NotificationSilencePage.tsx new file mode 100644 index 000000000..6bd892a09 --- /dev/null +++ b/src/pages/Settings/NotificationSilencePage.tsx @@ -0,0 +1,34 @@ +import NotificationSilenceForm from "@flanksource-ui/components/Notifications/SilenceNotificationForm/NotificationSilenceForm"; +import { + BreadcrumbChild, + BreadcrumbNav, + BreadcrumbRoot +} from "@flanksource-ui/ui/BreadcrumbNav"; +import { Head } from "@flanksource-ui/ui/Head"; +import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout"; + +export default function NotificationSilencePage() { + return ( + <> + + + Notifications + , + Silence + ]} + /> + } + contentClass="p-0 h-full" + > +
+

Silence Notification

+ +
+ + + ); +} diff --git a/src/ui/TimeRangePicker/TimeRangeList.tsx b/src/ui/TimeRangePicker/TimeRangeList.tsx index c739d5992..da4052fe0 100644 --- a/src/ui/TimeRangePicker/TimeRangeList.tsx +++ b/src/ui/TimeRangePicker/TimeRangeList.tsx @@ -6,6 +6,7 @@ type TimeRangeListProps = { currentRange?: TimeRangeOption; changeRangeValue: (val: TimeRangeOption) => void; setShowCalendar: (val: boolean) => void; + showFutureTimeRanges?: boolean; } & React.HTMLProps; export function TimeRangeList({ @@ -13,6 +14,7 @@ export function TimeRangeList({ currentRange, changeRangeValue = () => {}, setShowCalendar = () => {}, + showFutureTimeRanges = false, ...rest }: TimeRangeListProps) { const isChecked = (option?: TimeRangeOption, value?: TimeRangeOption) => { @@ -27,43 +29,50 @@ export function TimeRangeList({ return (
- {rangeOptionsCategories.map((category, index) => { - return ( -
-
- {category.name} -
- {category.options.map((option) => { - return ( - - ); - })} -
- ); - })} + + {}} + name="range-checkbox" + id={`checkbox-${option.display}`} + /> + + ); + })} +
+ ); + })} ); } diff --git a/src/ui/TimeRangePicker/TimeRangePicker.tsx b/src/ui/TimeRangePicker/TimeRangePicker.tsx index 530131657..bf3d88b13 100644 --- a/src/ui/TimeRangePicker/TimeRangePicker.tsx +++ b/src/ui/TimeRangePicker/TimeRangePicker.tsx @@ -12,12 +12,14 @@ type TimeRangePickerType = Omit< > & { value?: TimeRangeOption; onChange: (val: TimeRangeOption) => void; + showFutureTimeRanges?: boolean; }; export function TimeRangePicker({ onChange = () => {}, value, - className = "w-fit" + className = "w-fit", + showFutureTimeRanges = false }: TimeRangePickerType) { const currentRange = useMemo((): TimeRangeOption | undefined => { return value; @@ -143,19 +145,19 @@ export function TimeRangePicker({ {({ open }) => { return ( <> {updateDisplayValue && ( -
+
{updateDisplayValue}
)} {!updateDisplayValue && ( -
+
Please select time range
)} @@ -180,6 +182,7 @@ export function TimeRangePicker({ closePicker={() => close()} currentRange={currentRange} changeRangeValue={changeRangeValue} + showFutureTimeRanges={showFutureTimeRanges} /> ); }} diff --git a/src/ui/TimeRangePicker/TimeRangePickerBody.tsx b/src/ui/TimeRangePicker/TimeRangePickerBody.tsx index 7d1ee5d2b..794526780 100644 --- a/src/ui/TimeRangePicker/TimeRangePickerBody.tsx +++ b/src/ui/TimeRangePicker/TimeRangePickerBody.tsx @@ -21,13 +21,15 @@ type TimeRangePickerBodyProps = { closePicker: any; currentRange?: TimeRangeOption; changeRangeValue: (range: TimeRangeOption) => void; + showFutureTimeRanges?: boolean; }; export function TimeRangePickerBody({ isOpen, closePicker = () => {}, currentRange, - changeRangeValue = () => {} + changeRangeValue = () => {}, + showFutureTimeRanges = false }: TimeRangePickerBodyProps) { const [params, setParams] = useSearchParams(); const [recentRanges, setRecentRanges] = useAtom(recentlyUsedTimeRangesAtom); @@ -153,7 +155,6 @@ export function TimeRangePickerBody({
@@ -238,6 +239,7 @@ export function TimeRangePickerBody({ currentRange={currentRange} changeRangeValue={changeRangeValue} setShowCalendar={setShowCalendar} + showFutureTimeRanges={showFutureTimeRanges} />
diff --git a/src/ui/TimeRangePicker/rangeOptions.ts b/src/ui/TimeRangePicker/rangeOptions.ts index 09f3b70dc..b49138850 100644 --- a/src/ui/TimeRangePicker/rangeOptions.ts +++ b/src/ui/TimeRangePicker/rangeOptions.ts @@ -23,6 +23,7 @@ export type TimeRangeOption = export type RangeOptionsCategory = { name: string; + type: "future" | "past"; options: TimeRangeOption[]; }; @@ -31,107 +32,179 @@ export const displayTimeFormat = "YYYY-MM-DD HH:mm"; export const rangeOptionsCategories: RangeOptionsCategory[] = [ { name: "Relative time ranges", + type: "past", options: [ { type: "relative", display: "5 minutes", - range: "now-5m" }, { display: "15 minutes", type: "relative", - range: "now-15m" }, { display: "30 minutes", type: "relative", - range: "now-30m" }, { display: "1 hour", type: "relative", - range: "now-1h" }, { display: "3 hours", type: "relative", - range: "now-3h" }, { display: "6 hours", type: "relative", - range: "now-6h" }, { display: "12 hours", type: "relative", - range: "now-12h" }, { display: "24 hours", type: "relative", - range: "now-24h" }, { display: "2 days", type: "relative", - range: "now-2d" }, { display: "7 days", type: "relative", - range: "now-7d" }, { display: "30 days", type: "relative", - range: "now-30d" }, { display: "90 days", type: "relative", - range: "now-90d" }, { display: "6 months", type: "relative", - range: "now-6M" }, { display: "1 year", type: "relative", - range: "now-1y" }, { display: "2 year", type: "relative", - range: "now-2y" }, { display: "5 year", type: "relative", - range: "now-5y" } ] }, + { + name: "Relative time ranges", + type: "future", + options: [ + { + type: "relative", + display: "5 minutes", + range: "now+5m" + }, + { + display: "15 minutes", + type: "relative", + range: "now+15m" + }, + { + display: "30 minutes", + type: "relative", + range: "now+30m" + }, + { + display: "1 hour", + type: "relative", + range: "now+1h" + }, + { + display: "3 hours", + type: "relative", + range: "now+3h" + }, + { + display: "6 hours", + type: "relative", + range: "now+6h" + }, + { + display: "12 hours", + type: "relative", + range: "now+12h" + }, + { + display: "24 hours", + type: "relative", + range: "now+24h" + }, + { + display: "2 days", + type: "relative", + range: "now+2d" + }, + { + display: "7 days", + type: "relative", + range: "now+7d" + }, + { + display: "30 days", + type: "relative", + range: "now+30d" + }, + { + display: "90 days", + type: "relative", + range: "now+90d" + }, + { + display: "6 months", + type: "relative", + range: "now+6M" + }, + { + display: "1 year", + type: "relative", + range: "now+1y" + }, + { + display: "2 year", + type: "relative", + range: "now+2y" + }, + { + display: "5 year", + type: "relative", + range: "now+5y" + } + ] + }, { name: "Other quick ranges", + type: "past", options: [ { display: "Yesterday", From bf37639c64125319c9b294a508c24d2e7ae28642 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Wed, 18 Sep 2024 09:42:20 +0300 Subject: [PATCH 3/5] 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(); - }); -}); From 4285158211d6699bc99257ed0d89d8887cc11d52 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Wed, 18 Sep 2024 11:17:07 +0300 Subject: [PATCH 4/5] fix: fix failing netlify builds --- package-lock.json | 85 +++++++++++++--------------- package.json | 6 +- src/ui/MRTDataTable/MRTDataTable.tsx | 5 +- 3 files changed, 46 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4a4325008..ab35967d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@flanksource/flanksource-ui", - "version": "1.0.760", + "version": "1.0.779", "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@clerk/nextjs": "^5.3.0", @@ -17,7 +17,7 @@ "@heroicons/react": "^1.0.3", "@hookform/resolvers": "^2.8.8", "@monaco-editor/react": "^4.6.0", - "@netlify/plugin-nextjs": "^5.1.2", + "@netlify/plugin-nextjs": "^5.7.1", "@next/bundle-analyzer": "^14.2.5", "@ory/client": "^1.2.11", "@ory/integrations": "^1.1.5", @@ -41,6 +41,7 @@ "@types/testing-library__jest-dom": "^5.14.5", "@types/testing-library__react": "^10.2.0", "ansi-to-html": "^0.7.2", + "autoprefixer": "^10.4.20", "axios": "^1.6.2", "casbin.js": "^0.5.0", "clsx": "^2.1.1", @@ -4582,9 +4583,9 @@ } }, "node_modules/@netlify/plugin-nextjs": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/@netlify/plugin-nextjs/-/plugin-nextjs-5.1.2.tgz", - "integrity": "sha512-rftBlZmrkxy8zeXZ/tT2u/v2iIZd9s0cV7MdtjUFOgizjhtY0fCZEUQ7OIEQIMogzGNMDXFcb84HXX9a8OZ8/w==", + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/@netlify/plugin-nextjs/-/plugin-nextjs-5.7.1.tgz", + "integrity": "sha512-32e2q8VqnyxfJixMypuupuHW+3F0XbP/uGNNB79Vn1asYh/oTbR9XBi4Cxnmgthy9hycaiMHm8SftGI+uWJmQw==", "engines": { "node": ">=18.0.0" } @@ -15095,10 +15096,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.16", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz", - "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==", - "dev": true, + "version": "10.4.20", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", + "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", "funding": [ { "type": "opencollective", @@ -15113,13 +15113,12 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { - "browserslist": "^4.21.10", - "caniuse-lite": "^1.0.30001538", - "fraction.js": "^4.3.6", + "browserslist": "^4.23.3", + "caniuse-lite": "^1.0.30001646", + "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", + "picocolors": "^1.0.1", "postcss-value-parser": "^4.2.0" }, "bin": { @@ -16050,9 +16049,9 @@ } }, "node_modules/browserslist": { - "version": "4.22.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz", - "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==", + "version": "4.23.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz", + "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==", "funding": [ { "type": "opencollective", @@ -16068,10 +16067,10 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001541", - "electron-to-chromium": "^1.4.535", - "node-releases": "^2.0.13", - "update-browserslist-db": "^1.0.13" + "caniuse-lite": "^1.0.30001646", + "electron-to-chromium": "^1.5.4", + "node-releases": "^2.0.18", + "update-browserslist-db": "^1.1.0" }, "bin": { "browserslist": "cli.js" @@ -16255,9 +16254,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001643", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz", - "integrity": "sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==", + "version": "1.0.30001660", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz", + "integrity": "sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==", "funding": [ { "type": "opencollective", @@ -18798,9 +18797,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.594", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.594.tgz", - "integrity": "sha512-xT1HVAu5xFn7bDfkjGQi9dNpMqGchUkebwf1GL7cZN32NSwwlHRPMSDJ1KN6HkS0bWUtndbSQZqvpQftKG2uFQ==" + "version": "1.5.25", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.25.tgz", + "integrity": "sha512-kMb204zvK3PsSlgvvwzI3wBIcAw15tRkYk+NQdsjdDtcQWTp2RABbMQ9rUBy8KNEOM+/E6ep+XC3AykiWZld4g==" }, "node_modules/elliptic": { "version": "6.5.4", @@ -19276,9 +19275,9 @@ } }, "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", "engines": { "node": ">=6" } @@ -21264,8 +21263,6 @@ "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", - "dev": true, - "peer": true, "engines": { "node": "*" }, @@ -28607,9 +28604,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.13", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", - "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==" + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", + "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==" }, "node_modules/node-static": { "version": "0.7.11", @@ -28661,8 +28658,6 @@ "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", - "dev": true, - "peer": true, "engines": { "node": ">=0.10.0" } @@ -32585,9 +32580,9 @@ "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==" }, "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -43169,9 +43164,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.13", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", - "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz", + "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==", "funding": [ { "type": "opencollective", @@ -43187,8 +43182,8 @@ } ], "dependencies": { - "escalade": "^3.1.1", - "picocolors": "^1.0.0" + "escalade": "^3.1.2", + "picocolors": "^1.0.1" }, "bin": { "update-browserslist-db": "cli.js" diff --git a/package.json b/package.json index f45ef3fb4..246bd8e9f 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "@heroicons/react": "^1.0.3", "@hookform/resolvers": "^2.8.8", "@monaco-editor/react": "^4.6.0", - "@netlify/plugin-nextjs": "^5.1.2", + "@netlify/plugin-nextjs": "^5.7.1", "@next/bundle-analyzer": "^14.2.5", "@ory/client": "^1.2.11", "@ory/integrations": "^1.1.5", @@ -41,6 +41,7 @@ "@types/testing-library__jest-dom": "^5.14.5", "@types/testing-library__react": "^10.2.0", "ansi-to-html": "^0.7.2", + "autoprefixer": "^10.4.20", "axios": "^1.6.2", "casbin.js": "^0.5.0", "clsx": "^2.1.1", @@ -219,6 +220,5 @@ }, "msw": { "workerDirectory": "public" - }, - "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" + } } diff --git a/src/ui/MRTDataTable/MRTDataTable.tsx b/src/ui/MRTDataTable/MRTDataTable.tsx index 1d5094216..bc1065b4b 100644 --- a/src/ui/MRTDataTable/MRTDataTable.tsx +++ b/src/ui/MRTDataTable/MRTDataTable.tsx @@ -2,6 +2,7 @@ import { VisibilityState } from "@tanstack/react-table"; import { MantineReactTable, MRT_ColumnDef, + MRT_Row, useMantineReactTable } from "mantine-react-table"; import useReactTablePaginationState from "../DataTable/Hooks/useReactTablePaginationState"; @@ -63,7 +64,7 @@ export default function MRTDataTable = {}>({ autoResetPageIndex: false, onPaginationChange: setPageIndex, onSortingChange: setSortState, - mantineTableBodyRowProps: ({ row }) => ({ + mantineTableBodyRowProps: ({ row }: { row: MRT_Row }) => ({ onClick: () => onRowClick(row.original), sx: { cursor: "pointer", maxHeight: "100%", overflowY: "auto" } }), @@ -81,7 +82,7 @@ export default function MRTDataTable = {}>({ flex: "1 1 0" } }, - mantineTableBodyCellProps: ({ column }) => ({ + mantineTableBodyCellProps: () => ({ sx: { zIndex: "auto" } From fc0c8611acac6b8f6241e9ca211bf7bc20f5198a Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Wed, 18 Sep 2024 23:39:00 +0300 Subject: [PATCH 5/5] fix: fix width issue for the timeline component --- src/components/JobsHistory/Filters/JobsHistoryFilters.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx b/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx index 0573c6574..df773ea51 100644 --- a/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx +++ b/src/components/JobsHistory/Filters/JobsHistoryFilters.tsx @@ -48,7 +48,6 @@ export default function JobHistoryFilters({ onChange={(timeRange) => setTimeRangeParams(timeRange, paramsToReset) } - className="w-[35rem]" value={timeRangeValue} />