refactor(web): replace pkg react-query with tanstack/react-query (#868)

* refactor: move to tanstack/react-query and fix cache

* refactor(releases): move to tanstack/react-query

* refactor(logs): move to tanstack/react-query

* refactor(base): move to tanstack/react-query

* refactor(base): move to tanstack/react-query

* refactor(dashboard): move to tanstack/react-query

* refactor(auth): move to tanstack/react-query

* refactor(filters): move to tanstack/react-query

* refactor(settings): move to tanstack/react-query

* chore(pkg): add tanstack/react-query

* refactor(filters): move to tanstack/react-query

* refactor: move to tanstack/react-query

* refactor: invalidate queries

* chore(pkg): remove old react-query

* chore: change imports to root prefixes

* build: remove needs web from test

* set enableReinitialize to true to fix formik caching issues

* fix all property for apiKeys const

* fix toast when enabling/disabling feed

---------

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>

web/src/components/alerts/NotFound.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import logo from "@/logo.png";
+import logo from "@app/logo.png";
 
 export const NotFound = () => {
   return (

web/src/components/data-table/Buttons.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { classNames } from "../../utils";
+import { classNames } from "@utils";
 
 interface ButtonProps {
     className?: string;

web/src/components/data-table/Cells.tsx

@@ -3,7 +3,7 @@ import { formatDistanceToNowStrict } from "date-fns";
 import { CheckIcon } from "@heroicons/react/24/solid";
 import { ClockIcon, ExclamationCircleIcon, NoSymbolIcon } from "@heroicons/react/24/outline";
 
-import { classNames, simplifyDate } from "../../utils";
+import { classNames, simplifyDate } from "@utils";
 import { Tooltip } from "../tooltips/Tooltip";
 
 interface CellProps {

web/src/components/debug.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { SettingsContext } from "../utils/Context";
+import { SettingsContext } from "@utils/Context";
 
 interface DebugProps {
     values: unknown;

web/src/components/fields/text.tsx

@@ -1,4 +1,4 @@
-import { useToggle } from "../../hooks/hooks";
+import { useToggle } from "@hooks/hooks";
 import { CheckIcon, DocumentDuplicateIcon, EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
 import { useState } from "react";
 

web/src/components/inputs/common.tsx

@@ -1,6 +1,6 @@
 import { Field, FieldProps } from "formik";
-import { classNames } from "../../utils";
-import { CustomTooltip } from "../tooltips/CustomTooltip";
+import { classNames } from "@utils";
+import { CustomTooltip } from "@components/tooltips/CustomTooltip";
 
 interface ErrorFieldProps {
     name: string;

web/src/components/inputs/input.tsx

@@ -1,8 +1,8 @@
 import { Field, FieldProps, useFormikContext } from "formik";
-import { classNames } from "../../utils";
+import { classNames } from "@utils";
 import { EyeIcon, EyeSlashIcon, CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
-import { useToggle } from "../../hooks/hooks";
-import { CustomTooltip } from "../tooltips/CustomTooltip";
+import { useToggle } from "@hooks/hooks";
+import { CustomTooltip } from "@components/tooltips/CustomTooltip";
 import { useEffect } from "react";
 
 type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

web/src/components/inputs/input_wide.tsx

@@ -1,13 +1,13 @@
 import type { FieldProps, FieldValidator } from "formik";
 import { Field } from "formik";
-import { classNames } from "../../utils";
-import { useToggle } from "../../hooks/hooks";
+import { classNames } from "@utils";
+import { useToggle } from "@hooks/hooks";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import { Switch } from "@headlessui/react";
 import { ErrorField, RequiredField } from "./common";
 import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
 import { SelectFieldProps } from "./select";
-import { CustomTooltip } from "../tooltips/CustomTooltip";
+import { CustomTooltip } from "@components/tooltips/CustomTooltip";
 
 interface TextFieldWideProps {
   name: string;

web/src/components/inputs/radio.tsx

@@ -1,6 +1,6 @@
 import { Field, useFormikContext } from "formik";
 import { RadioGroup } from "@headlessui/react";
-import { classNames } from "../../utils";
+import { classNames } from "@utils";
 
 export interface radioFieldsetOption {
     label: string;

web/src/components/inputs/select.tsx

@@ -4,9 +4,9 @@ import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/solid";
 import { MultiSelect as RMSC } from "react-multi-select-component";
 
-import { classNames, COL_WIDTHS } from "../../utils";
-import { SettingsContext } from "../../utils/Context";
-import { CustomTooltip } from "../tooltips/CustomTooltip";
+import { classNames, COL_WIDTHS } from "@utils";
+import { SettingsContext } from "@utils/Context";
+import { CustomTooltip } from "@components/tooltips/CustomTooltip";
 
 export interface MultiSelectOption {
     value: string | number;
@@ -265,8 +265,8 @@ export const Select = ({
 }: SelectFieldProps) => {
   return (
     <div
-    className={classNames(
-      columns ? `col-span-${columns}` : "col-span-6"
+      className={classNames(
+        columns ? `col-span-${columns}` : "col-span-6"
       )}
     >
       <Field name={name} type="select">

web/src/components/inputs/select_wide.tsx

@@ -1,7 +1,7 @@
 import type { FieldProps } from "formik";
 import { Field } from "formik";
 import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
-import { OptionBasicTyped } from "../../domain/constants";
+import { OptionBasicTyped } from "@domain/constants";
 import CreatableSelect from "react-select/creatable";
 import { CustomTooltip } from "../tooltips/CustomTooltip";
 

web/src/components/inputs/switch.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import type { FieldInputProps, FieldMetaProps, FieldProps, FormikProps, FormikValues } from "formik";
 import { Field } from "formik";
 import { Switch as HeadlessSwitch } from "@headlessui/react";
-import { classNames } from "../../utils";
+
+import { classNames } from "@utils";
 import { CustomTooltip } from "../tooltips/CustomTooltip";
 
 type SwitchProps<V = unknown> = {
@@ -82,7 +83,7 @@ const SwitchGroup = ({
 }: SwitchGroupProps) => (
   <HeadlessSwitch.Group as="ol" className="py-4 flex items-center justify-between">
     {label && <div className="flex flex-col">
-      <HeadlessSwitch.Label as={heading ? "h2" : "p"} className={classNames("flex float-left cursor-default mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide", heading ? "text-lg" : "text-sm")}
+      <HeadlessSwitch.Label as={heading ? "h2" : "span"} className={classNames("flex float-left cursor-default mb-2 text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide", heading ? "text-lg" : "text-sm")}
         passive>
         <div className="flex">
           {label}

web/src/components/inputs/text.tsx

@@ -1,7 +1,7 @@
 import React, { FC, forwardRef, ReactNode } from "react";
 import { DeepMap, FieldError, Path, RegisterOptions, UseFormRegister } from "react-hook-form";
-import { classNames, get } from "../../utils";
-import { useToggle } from "../../hooks/hooks";
+import { classNames, get } from "@utils";
+import { useToggle } from "@hooks/hooks";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import { ErrorMessage } from "@hookform/error-message";
 import type { FieldValues } from "react-hook-form";

web/src/components/notifications/Toast.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { toast, Toast as Tooast } from "react-hot-toast";
-import { classNames } from "../../utils";
+import { classNames } from "@utils";
 
 type Props = {
   type: "error" | "success" | "warning"
@@ -26,7 +26,7 @@ const Toast: FC<Props> = ({ type, body, t }) => (
             {type === "error" && "Error"}
             {type === "warning" && "Warning"}
           </p>
-          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</p>
+          <span className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</span>
         </div>
         <div className="ml-4 flex-shrink-0 flex">
           <button

web/src/components/panels/index.tsx

@@ -3,10 +3,11 @@ import { XMarkIcon } from "@heroicons/react/24/solid";
 import { Dialog, Transition } from "@headlessui/react";
 import { Form, Formik } from "formik";
 import type { FormikValues } from "formik";
+
 import DEBUG from "../debug";
-import { useToggle } from "../../hooks/hooks";
+import { useToggle } from "@hooks/hooks";
 import { DeleteModal } from "../modals";
-import { classNames } from "../../utils";
+import { classNames } from "@utils";
 
 interface SlideOverProps<DataType> {
   title: string;

web/src/components/tooltips/Tooltip.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ReactNode } from "react";
 import { usePopperTooltip } from "react-popper-tooltip";
-import { classNames } from "../../utils";
+import { classNames } from "@utils";
 
 interface TooltipProps {
   label: ReactNode;