@prorobotech/openapi-k8s-toolkit 1.0.3 → 1.1.0-alpha.1

package/dist/openapi-k8s-toolkit.es.js

@@ -1,9 +1,9 @@
 import styled, { createGlobalStyle } from 'styled-components';
-import K, { useState, useRef, useLayoutEffect, useEffect, Fragment, createContext, useContext, useMemo, createElement, isValidElement, cloneElement, useCallback, useInsertionEffect, useSyncExternalStore, memo, Suspense, useReducer } from 'react';
+import K, { useState, useRef, useReducer, useEffect, useCallback, useLayoutEffect, Fragment, createContext, useContext, useMemo, createElement, isValidElement, cloneElement, useInsertionEffect, useSyncExternalStore, memo, Suspense } from 'react';
 import { Input, Tree, Modal, Alert, theme, Select, Tag, Breadcrumb, Spin, Menu, Tooltip, Space, Button, Flex, Typography, Card as Card$1, Row, Col, Tabs, Form, Popover, notification, Dropdown, Table, Slider, InputNumber, Switch, Result, Progress, Checkbox, Empty } from 'antd';
 import { LoadingOutlined, ExclamationCircleFilled, CloseCircleFilled, CheckCircleFilled, PlusOutlined, ClearOutlined, MinusOutlined, CaretDownOutlined, CaretRightOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined, SearchOutlined, MoreOutlined, CheckOutlined, CloseOutlined, BugOutlined, EllipsisOutlined } from '@ant-design/icons';
-import { useQuery, useQueries, useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate, useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
 
 const Spacer$1 = styled.div`
   height: ${({ $space, $spaceMob, $samespace }) => {
@@ -8316,31 +8316,512 @@ const PaddingContainer = styled.div`
   padding: ${({ $padding }) => $padding};
 `;
 
-const getDirectUnknownResource = async ({ uri }) => {
-  return axios.get(uri);
+const eventKey$1 = (e) => {
+  const n = e.metadata?.name ?? "";
+  const ns = e.metadata?.namespace ?? "";
+  return `${ns}/${n}`;
+};
+const compareRV$1 = (a, b) => {
+  if (a.length !== b.length) return a.length > b.length ? 1 : -1;
+  return a > b ? 1 : a < b ? -1 : 0;
 };
+const getRV$1 = (item) => item?.metadata?.resourceVersion;
 
-const useDirectUnknownResource = ({
-  uri,
-  queryKey,
-  refetchInterval,
-  isEnabled
+const reducer$1 = (state, action) => {
+  switch (action.type) {
+    case "RESET": {
+      const order = action.items.map(eventKey$1);
+      const byKey = {};
+      action.items.forEach((it) => byKey[eventKey$1(it)] = it);
+      return { order, byKey };
+    }
+    case "APPEND_PAGE": {
+      const next = { ...state.byKey };
+      const addKeys = [];
+      action.items.forEach((it) => {
+        const k = eventKey$1(it);
+        if (!next[k]) addKeys.push(k);
+        next[k] = it;
+      });
+      return { order: [...state.order, ...addKeys], byKey: next };
+    }
+    case "UPSERT": {
+      const k = eventKey$1(action.item);
+      const exists = Boolean(state.byKey[k]);
+      const byKey = { ...state.byKey, [k]: action.item };
+      const order = exists ? state.order : [k, ...state.order];
+      return { order, byKey };
+    }
+    case "REMOVE": {
+      if (!state.byKey[action.key]) return state;
+      const byKey = { ...state.byKey };
+      delete byKey[action.key];
+      return { order: state.order.filter((k) => k !== action.key), byKey };
+    }
+    default:
+      return state;
+  }
+};
+
+const isRecord = (v) => typeof v === "object" && v !== null;
+const readString = (obj, key) => {
+  const val = obj[key];
+  return typeof val === "string" ? val : void 0;
+};
+const itemRV = (it) => {
+  const fromUtil = getRV$1(it);
+  if (fromUtil) return fromUtil;
+  if (!isRecord(it)) return void 0;
+  const rvTop = readString(it, "resourceVersion");
+  const mdRaw = isRecord(it["metadata"]) ? it["metadata"] : void 0;
+  const rvMeta = mdRaw ? readString(mdRaw, "resourceVersion") : void 0;
+  return rvTop ?? rvMeta;
+};
+const getMaxRV$1 = (items) => (items ?? []).reduce((max, it) => {
+  const rv = itemRV(it);
+  return rv && (!max || compareRV$1(rv, max) > 0) ? rv : max;
+}, void 0);
+const makeResId = (q) => `${q.apiGroup ?? ""}|${q.apiVersion}|${q.plural}|${q.namespace ?? ""}|${q.fieldSelector ?? ""}|${q.labelSelector ?? ""}`;
+const useListWatch = ({
+  wsUrl,
+  pageSize,
+  paused = false,
+  ignoreRemove = false,
+  onStatus,
+  onError,
+  autoDrain = false,
+  preserveStateOnUrlChange = true,
+  isEnabled = true,
+  // NEW default: socket gated by this flag
+  query
 }) => {
-  return useQuery({
-    queryKey,
-    queryFn: async () => {
-      const response = await getDirectUnknownResource({
-        uri
+  const resId = `${query.apiGroup ?? ""}|${query.apiVersion}|${query.plural}|${query.namespace ?? ""}|${query.fieldSelector ?? ""}|${query.labelSelector ?? ""}`;
+  const resIdRef = useRef(resId);
+  const [state, dispatch] = useReducer(reducer$1, { order: [], byKey: {} });
+  const [contToken, setContToken] = useState();
+  const [hasMore, setHasMore] = useState(false);
+  const [status, setStatus] = useState(isEnabled ? "connecting" : "closed");
+  const [lastError, setLastError] = useState(void 0);
+  const [isPaused, setIsPaused] = useState(paused);
+  const [isRemoveIgnored, setIsRemoveIgnored] = useState(ignoreRemove);
+  const queryRef = useRef(query);
+  const wsRef = useRef(null);
+  const connectingRef = useRef(false);
+  const mountedRef = useRef(true);
+  const startedRef = useRef(false);
+  const reconnectTimerRef = useRef(null);
+  const backoffRef = useRef(750);
+  const urlRef = useRef(wsUrl);
+  const onMessageRef = useRef(() => {
+  });
+  const connectRef = useRef(() => {
+  });
+  const fetchingRef = useRef(false);
+  const anchorRVRef = useRef(void 0);
+  const haveAnchorRef = useRef(false);
+  const enabledRef = useRef(isEnabled);
+  const intentionalCloseRef = useRef(false);
+  const suppressErrorsRef = useRef(false);
+  const pausedRef = useRef(isPaused);
+  const ignoreRemoveRef = useRef(isRemoveIgnored);
+  useEffect(() => {
+    pausedRef.current = isPaused;
+  }, [isPaused]);
+  useEffect(() => {
+    ignoreRemoveRef.current = isRemoveIgnored;
+  }, [isRemoveIgnored]);
+  useEffect(() => {
+    enabledRef.current = isEnabled;
+  }, [isEnabled]);
+  const clearErrorSafe = useCallback(() => {
+    setLastError(void 0);
+  }, []);
+  const setStatusSafe = useCallback(
+    (s) => {
+      setStatus(s);
+      onStatus?.(s);
+    },
+    [onStatus]
+  );
+  const setErrorSafe = useCallback(
+    (msg) => {
+      setLastError(msg);
+      if (msg) onError?.(msg);
+    },
+    [onError]
+  );
+  const applyParam = (sp, key, v) => {
+    if (v === void 0 || v === null || v === "") {
+      sp.delete(key);
+      return;
+    }
+    sp.set(key, String(v));
+  };
+  const buildWsUrl = useCallback((raw) => {
+    let u;
+    const base = window.location.origin;
+    try {
+      const hasScheme = /^[a-z]+:/i.test(raw);
+      u = hasScheme ? new URL(raw) : new URL(raw.startsWith("/") ? raw : `/${raw}`, base);
+      if (u.protocol === "http:") u.protocol = "ws:";
+      if (u.protocol === "https:") u.protocol = "wss:";
+      if (u.protocol !== "ws:" && u.protocol !== "wss:") {
+        u = new URL(u.pathname + u.search + u.hash, base);
+        u.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      }
+    } catch {
+      const origin = window.location.origin.replace(/^http/, "ws");
+      u = new URL(raw.startsWith("/") ? raw : `/${raw}`, origin);
+    }
+    const q = queryRef.current;
+    applyParam(u.searchParams, "namespace", q.namespace);
+    applyParam(u.searchParams, "limit", q.initialLimit);
+    applyParam(u.searchParams, "_continue", q.initialContinue);
+    applyParam(u.searchParams, "apiGroup", q.apiGroup);
+    applyParam(u.searchParams, "apiVersion", q.apiVersion);
+    applyParam(u.searchParams, "plural", q.plural);
+    applyParam(u.searchParams, "fieldSelector", q.fieldSelector);
+    applyParam(u.searchParams, "labelSelector", q.labelSelector);
+    if (haveAnchorRef.current && anchorRVRef.current) {
+      u.searchParams.set("sinceRV", anchorRVRef.current);
+    } else {
+      u.searchParams.delete("sinceRV");
+    }
+    return u.toString();
+  }, []);
+  const closeWS = useCallback(() => {
+    try {
+      wsRef.current?.close();
+    } catch {
+    }
+    wsRef.current = null;
+  }, []);
+  const scheduleReconnect = useCallback(() => {
+    if (intentionalCloseRef.current) {
+      intentionalCloseRef.current = false;
+      return;
+    }
+    if (!enabledRef.current) {
+      setStatusSafe("closed");
+      connectingRef.current = false;
+      return;
+    }
+    setStatusSafe("closed");
+    connectingRef.current = false;
+    const baseDelay = Math.min(backoffRef.current, 8e3);
+    const jitter = Math.random() * 0.4 + 0.8;
+    const wait = Math.floor(baseDelay * jitter);
+    const next = Math.min(baseDelay * 2, 12e3);
+    backoffRef.current = next;
+    if (reconnectTimerRef.current) {
+      window.clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+    reconnectTimerRef.current = window.setTimeout(() => {
+      if (!mountedRef.current || !enabledRef.current) return;
+      connectRef.current();
+    }, wait);
+  }, [setStatusSafe]);
+  const connect = useCallback(() => {
+    if (!mountedRef.current) return;
+    if (!enabledRef.current) {
+      setStatusSafe("closed");
+      return;
+    }
+    if (connectingRef.current) return;
+    if (wsRef.current && (wsRef.current.readyState === WebSocket.OPEN || wsRef.current.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+    connectingRef.current = true;
+    setStatusSafe("connecting");
+    setErrorSafe(void 0);
+    const url = buildWsUrl(urlRef.current);
+    console.debug("[useListWatch] connecting to", url);
+    const ws = new WebSocket(url);
+    wsRef.current = ws;
+    ws.addEventListener("open", () => {
+      if (!mountedRef.current || !enabledRef.current) return;
+      backoffRef.current = 750;
+      fetchingRef.current = false;
+      setStatusSafe("open");
+      connectingRef.current = false;
+      suppressErrorsRef.current = false;
+    });
+    ws.addEventListener("message", (ev) => onMessageRef.current(ev));
+    ws.addEventListener("close", scheduleReconnect);
+    ws.addEventListener("error", () => {
+      if (intentionalCloseRef.current || suppressErrorsRef.current) return;
+      setErrorSafe("WebSocket error");
+    });
+  }, [buildWsUrl, scheduleReconnect, setErrorSafe, setStatusSafe]);
+  useEffect(() => {
+    connectRef.current = connect;
+  }, [connect]);
+  const reconnect = useCallback(() => {
+    if (!enabledRef.current) {
+      closeWS();
+      setStatusSafe("closed");
+      return;
+    }
+    if (reconnectTimerRef.current) {
+      window.clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+    intentionalCloseRef.current = true;
+    try {
+      wsRef.current?.close();
+    } catch {
+    }
+    wsRef.current = null;
+    connect();
+  }, [closeWS, connect, setStatusSafe]);
+  useEffect(() => {
+    if (!mountedRef.current) return;
+    if (isEnabled) {
+      connect();
+    } else {
+      if (reconnectTimerRef.current) {
+        window.clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      closeWS();
+      setStatusSafe("closed");
+    }
+  }, [isEnabled, closeWS, connect, setStatusSafe]);
+  const setUrl = useCallback(
+    (next) => {
+      const changed = next !== urlRef.current;
+      urlRef.current = next;
+      if (changed) {
+        clearErrorSafe();
+        suppressErrorsRef.current = true;
+        if (!preserveStateOnUrlChange) {
+          dispatch({ type: "RESET", items: [] });
+          setContToken(void 0);
+          setHasMore(false);
+          anchorRVRef.current = void 0;
+          haveAnchorRef.current = false;
+        }
+        if (enabledRef.current) reconnect();
+      }
+    },
+    [preserveStateOnUrlChange, reconnect, clearErrorSafe]
+  );
+  const setQuery = useCallback(
+    (q) => {
+      clearErrorSafe();
+      suppressErrorsRef.current = true;
+      const prev = queryRef.current;
+      const prevId = makeResId(prev);
+      const nextId = makeResId(q);
+      queryRef.current = q;
+      if (!preserveStateOnUrlChange) {
+        dispatch({ type: "RESET", items: [] });
+        setContToken(void 0);
+        setHasMore(false);
+      }
+      if (prevId !== nextId) {
+        anchorRVRef.current = void 0;
+        haveAnchorRef.current = false;
+      }
+      if (enabledRef.current && prevId !== nextId) {
+        reconnect();
+      }
+    },
+    [clearErrorSafe, preserveStateOnUrlChange, reconnect]
+  );
+  const total = state.order.length;
+  const continueToken = contToken;
+  useEffect(() => {
+    onMessageRef.current = (ev) => {
+      let frame;
+      try {
+        frame = JSON.parse(String(ev.data));
+      } catch {
+        return;
+      }
+      if (!frame) return;
+      if (frame.type === "INITIAL") {
+        dispatch({ type: "RESET", items: frame.items });
+        setContToken(frame.continue);
+        setHasMore(Boolean(frame.continue));
+        setErrorSafe(void 0);
+        fetchingRef.current = false;
+        suppressErrorsRef.current = false;
+        const snapshotRV = frame.resourceVersion || getMaxRV$1(frame.items);
+        if (snapshotRV) {
+          anchorRVRef.current = snapshotRV;
+          haveAnchorRef.current = true;
+        }
+        return;
+      }
+      if (frame.type === "PAGE") {
+        dispatch({ type: "APPEND_PAGE", items: frame.items });
+        setContToken(frame.continue);
+        setHasMore(Boolean(frame.continue));
+        fetchingRef.current = false;
+        const batchRV = getMaxRV$1(frame.items);
+        if (batchRV && (!anchorRVRef.current || compareRV$1(batchRV, anchorRVRef.current) > 0)) {
+          anchorRVRef.current = batchRV;
+        }
+        return;
+      }
+      if (frame.type === "PAGE_ERROR") {
+        setErrorSafe(frame.error || "Failed to load next page");
+        fetchingRef.current = false;
+        return;
+      }
+      if (frame.type === "ADDED" || frame.type === "MODIFIED" || frame.type === "DELETED") {
+        const rv = itemRV(frame.item);
+        if (rv && (!anchorRVRef.current || compareRV$1(rv, anchorRVRef.current) > 0)) {
+          anchorRVRef.current = rv;
+        }
+      }
+      if (!pausedRef.current) {
+        if (frame.type === "ADDED" || frame.type === "MODIFIED") {
+          dispatch({ type: "UPSERT", item: frame.item });
+        }
+        if (!ignoreRemoveRef.current && frame.type === "DELETED") {
+          dispatch({ type: "REMOVE", key: eventKey$1(frame.item) });
+        }
+      }
+    };
+  }, [setErrorSafe]);
+  useEffect(() => {
+    if (startedRef.current) return void 0;
+    startedRef.current = true;
+    mountedRef.current = true;
+    if (isEnabled) {
+      connect();
+    } else {
+      setStatusSafe("closed");
+    }
+    return () => {
+      mountedRef.current = false;
+      startedRef.current = false;
+      if (reconnectTimerRef.current) {
+        window.clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      closeWS();
+      wsRef.current = null;
+      connectingRef.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (wsUrl !== urlRef.current) setUrl(wsUrl);
+  }, [wsUrl, setUrl]);
+  useEffect(() => {
+    if (resIdRef.current !== resId) {
+      clearErrorSafe();
+      suppressErrorsRef.current = true;
+      anchorRVRef.current = void 0;
+      haveAnchorRef.current = false;
+      resIdRef.current = resId;
+      queryRef.current = query;
+      if (enabledRef.current) reconnect();
+    }
+  }, [resId, query, reconnect, clearErrorSafe]);
+  const pageSizeRef = useRef(pageSize);
+  useEffect(() => {
+    pageSizeRef.current = pageSize;
+  }, [pageSize]);
+  const sendScroll = useCallback(() => {
+    if (!enabledRef.current) return;
+    const token = contToken;
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+    if (!token || fetchingRef.current) return;
+    fetchingRef.current = true;
+    const msg = { type: "SCROLL", continue: token, limit: pageSizeRef.current };
+    wsRef.current.send(JSON.stringify(msg));
+  }, [contToken]);
+  const drainAll = useCallback(
+    async (opts) => {
+      if (!enabledRef.current) return 0;
+      const maxPages = opts?.maxPages ?? 999;
+      const maxItems = opts?.maxItems ?? Number.POSITIVE_INFINITY;
+      let pages = 0;
+      let added = 0;
+      const awaitOnce = () => new Promise((resolve) => {
+        const handler = (ev) => {
+          try {
+            const f = JSON.parse(String(ev.data));
+            if (f.type === "PAGE") {
+              const newCount = (f.items || []).reduce((acc, it) => {
+                const k = eventKey$1(it);
+                return state.byKey[k] ? acc : acc + 1;
+              }, 0);
+              added += newCount;
+              const ws2 = wsRef.current;
+              if (!ws2) {
+                resolve("STOP");
+                return;
+              }
+              resolve("PAGE");
+            }
+          } catch {
+          }
+        };
+        const ws = wsRef.current;
+        if (!ws) {
+          resolve("STOP");
+          return;
+        }
+        const stopCheck = () => {
+          if (!hasMore || !contToken) {
+            resolve("STOP");
+          }
+        };
+        ws.addEventListener("message", handler, { once: true });
+        setTimeout(stopCheck, 0);
       });
-      const data = JSON.parse(JSON.stringify(response.data));
-      if (data.metadata?.resourceVersion) {
-        delete data.metadata.resourceVersion;
+      while (pages < maxPages && hasMore && contToken && wsRef.current?.readyState === WebSocket.OPEN) {
+        if (added >= maxItems) break;
+        if (!fetchingRef.current) sendScroll();
+        const r = await awaitOnce();
+        if (r === "STOP") break;
+        pages += 1;
       }
-      return data;
+      return added;
     },
-    refetchInterval: refetchInterval !== void 0 ? refetchInterval : 5e3,
-    enabled: isEnabled
-  });
+    [contToken, hasMore, sendScroll, state.byKey]
+  );
+  useEffect(() => {
+    if (!autoDrain) return;
+    if (!enabledRef.current) return;
+    if (status === "open" && haveAnchorRef.current) {
+      drainAll().catch(() => {
+      });
+    }
+  }, [autoDrain, drainAll, status]);
+  return {
+    state,
+    total,
+    hasMore,
+    continueToken,
+    status,
+    lastError,
+    setPaused: setIsPaused,
+    setIgnoreRemove: setIsRemoveIgnored,
+    sendScroll,
+    drainAll,
+    reconnect,
+    setUrl,
+    setQuery
+  };
+};
+
+const useInfiniteSentinel = (sentinelRef, hasMore, onNeedMore) => {
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el) return void 0;
+    const io = new IntersectionObserver((entries) => {
+      const visible = entries.some((e) => e.isIntersecting);
+      if (visible && hasMore) onNeedMore();
+    });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [sentinelRef, hasMore, onNeedMore]);
 };
 
 const prepareTemplate = ({
@@ -8381,7 +8862,7 @@ const prepareDataForManageableBreadcrumbs = ({
   replaceValues,
   idToCompare
 }) => {
-  const foundData = data.find((el) => el.id === idToCompare);
+  const foundData = data.find((el) => el?.id === idToCompare);
   if (!foundData) {
     return void 0;
   }
@@ -8480,23 +8961,37 @@ const ManageableBreadcrumbs = ({ data }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Styled$v.HeightDiv, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleBreadcrumb, { items: data.breadcrumbItems }) });
 };
 const ManageableBreadcrumbsWithDataProvider = ({
-  uri,
-  refetchInterval,
+  wsUrl,
+  apiGroup,
+  apiVersion,
+  plural,
   isEnabled,
   replaceValues,
   pathname,
   idToCompare
 }) => {
-  const {
-    data: rawData,
-    isError: rawDataError,
-    isLoading: rawDataLoading
-  } = useDirectUnknownResource({
-    uri,
-    refetchInterval,
-    queryKey: ["breadcrumb", uri],
+  const { state, status, lastError } = useListWatch({
+    wsUrl,
+    paused: false,
+    ignoreRemove: false,
+    autoDrain: true,
+    preserveStateOnUrlChange: true,
+    query: {
+      apiVersion,
+      apiGroup,
+      plural
+    },
     isEnabled
   });
+  const rawDataLoading = status === "connecting";
+  const rawDataError = status === "closed" && lastError ? lastError : void 0;
+  const rawData = {
+    items: state.order.map((key) => {
+      const res = state.byKey[key];
+      return res;
+    })
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
   if (rawDataError) {
     return null;
   }
@@ -8682,8 +9177,10 @@ const ManageableSidebar = ({ data, noMarginTop }) => {
   );
 };
 const ManageableSidebarWithDataProvider = ({
-  uri,
-  refetchInterval,
+  wsUrl,
+  apiGroup,
+  apiVersion,
+  plural,
   isEnabled,
   replaceValues,
   pathname,
@@ -8692,16 +9189,28 @@ const ManageableSidebarWithDataProvider = ({
   hidden,
   noMarginTop
 }) => {
-  const {
-    data: rawData,
-    isError: rawDataError,
-    isLoading: rawDataLoading
-  } = useDirectUnknownResource({
-    uri,
-    refetchInterval,
-    queryKey: ["sidebar", uri],
+  const { state, status, lastError } = useListWatch({
+    wsUrl,
+    paused: false,
+    ignoreRemove: false,
+    autoDrain: true,
+    preserveStateOnUrlChange: true,
+    query: {
+      apiVersion,
+      apiGroup,
+      plural
+    },
     isEnabled
   });
+  const rawDataLoading = status === "connecting";
+  const rawDataError = status === "closed" && lastError ? lastError : void 0;
+  const rawData = {
+    items: state.order.map((key) => {
+      const res = state.byKey[key];
+      return res;
+    })
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
   if (rawDataError) {
     return null;
   }
@@ -33500,6 +34009,33 @@ const usePermissions = ({
   });
 };
 
+const getDirectUnknownResource = async ({ uri }) => {
+  return axios.get(uri);
+};
+
+const useDirectUnknownResource = ({
+  uri,
+  queryKey,
+  refetchInterval,
+  isEnabled
+}) => {
+  return useQuery({
+    queryKey,
+    queryFn: async () => {
+      const response = await getDirectUnknownResource({
+        uri
+      });
+      const data = JSON.parse(JSON.stringify(response.data));
+      if (data.metadata?.resourceVersion) {
+        delete data.metadata.resourceVersion;
+      }
+      return data;
+    },
+    refetchInterval: refetchInterval !== void 0 ? refetchInterval : 5e3,
+    enabled: isEnabled
+  });
+};
+
 const getBackLinkToTable = ({ fullPath }) => {
   return encodeURIComponent(fullPath);
 };
@@ -49641,22 +50177,6 @@ const getCreatePathToNav = ({
   }
   return `/${baseprefix}/${clusterName}/${namespace}/forms/builtin/${apiVersion}/${typeName}?backlink=${window.location.pathname}`;
 };
-const getListPath = ({
-  clusterName,
-  namespace,
-  type,
-  typeName,
-  apiGroup,
-  apiVersion
-}) => {
-  if (type === "crd") {
-    return `/api/clusters/${clusterName}/k8s/apis/${apiGroup}/${apiVersion}${namespace ? `/namespaces/${namespace}` : ""}/${typeName}`;
-  }
-  if (type === "nonCrd") {
-    return `/api/clusters/${clusterName}/k8s/apis/${apiGroup}/${apiVersion}${namespace ? `/namespaces/${namespace}` : ""}/${typeName}`;
-  }
-  return `/api/clusters/${clusterName}/k8s/api/v1${namespace ? `/namespaces/${namespace}` : ""}/${typeName}`;
-};
 
 const CustomCard$4 = styled(Card$1)`
   position: relative;
@@ -49789,20 +50309,28 @@ const MarketplaceCard = ({
     apiVersion,
     baseprefix
   });
-  const listUrl = addedMode && type !== "direct" ? getListPath({
-    clusterName,
-    namespace,
-    type,
-    typeName,
-    apiGroup,
-    apiVersion
-  }) : void 0;
-  const { data: k8sList, error: k8sListError } = useDirectUnknownResource({
-    uri: listUrl || "",
-    queryKey: [listUrl || ""],
-    refetchInterval: false,
-    isEnabled: addedMode && listUrl !== void 0
+  const { state, status, lastError } = useListWatch({
+    wsUrl: `/api/clusters/${clusterName}/openapi-bff-ws/listThenWatch/listWatchWs`,
+    paused: false,
+    ignoreRemove: false,
+    autoDrain: true,
+    preserveStateOnUrlChange: true,
+    query: {
+      namespace,
+      apiVersion: apiVersion || "",
+      apiGroup,
+      plural: type
+    },
+    isEnabled: Boolean(apiVersion && addedMode && type !== "direct")
   });
+  const k8sListError = status === "closed" && lastError ? lastError : void 0;
+  const k8sList = {
+    items: state.order.map((key) => {
+      const res = state.byKey[key];
+      return res;
+    })
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
   if (addedMode && (k8sListError || type === "direct") && !showZeroResources) {
     return null;
   }
@@ -49931,16 +50459,30 @@ const MarketPlace = ({
   const [filteredAndSortedData, setFilterAndSortedData] = useState([]);
   const [uniqueTags, setUniqueTags] = useState([]);
   const [selectedTags, setSelectedTags] = useState([]);
-  const {
-    data: marketplacePanels,
-    isLoading,
-    error
-  } = useDirectUnknownResource({
-    uri: `/api/clusters/${clusterName}/k8s/apis/${baseApiGroup}/${baseApiVersion}/${mpResourceName}/`,
-    refetchInterval: 5e3,
-    queryKey: ["marketplacePanels", clusterName || "no-cluster"],
+  const { state, status, lastError } = useListWatch({
+    wsUrl: `/api/clusters/${clusterName}/openapi-bff-ws/listThenWatch/listWatchWs`,
+    paused: false,
+    ignoreRemove: false,
+    autoDrain: true,
+    preserveStateOnUrlChange: true,
+    query: {
+      apiVersion: baseApiVersion,
+      apiGroup: baseApiGroup,
+      plural: mpResourceName
+    },
     isEnabled: clusterName !== void 0
   });
+  const isLoading = status === "connecting";
+  const error = status === "closed" && lastError ? lastError : void 0;
+  const marketplacePanels = useMemo(() => {
+    return {
+      items: state.order.map((key) => {
+        const res = state.byKey[key];
+        return res;
+      })
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    };
+  }, [state]);
   const createPermission = usePermissions({
     group: baseApiGroup,
     resource: mpResourceName,
@@ -50239,26 +50781,52 @@ const ProjectInfoCard = ({
   children
 }) => {
   const navigate = useNavigate();
-  const {
-    data: marketplacePanels,
-    isLoading: marketplaceIsLoading
-    // error: marketplaceError,
-  } = useDirectUnknownResource({
-    uri: `/api/clusters/${clusterName}/k8s/apis/${baseApiGroup}/${baseApiVersion}/${mpResourceName}/`,
-    refetchInterval: 5e3,
-    queryKey: ["marketplacePanels", clusterName || "no-cluster"],
+  const { state, status } = useListWatch({
+    wsUrl: `/api/clusters/${clusterName}/openapi-bff-ws/listThenWatch/listWatchWs`,
+    paused: false,
+    ignoreRemove: false,
+    autoDrain: true,
+    preserveStateOnUrlChange: true,
+    query: {
+      apiVersion: baseApiVersion,
+      apiGroup: baseApiGroup,
+      plural: mpResourceName
+    },
     isEnabled: clusterName !== void 0
   });
+  const marketplaceIsLoading = status === "connecting";
+  const marketplacePanels = {
+    items: state.order.map((key) => {
+      const res = state.byKey[key];
+      return res;
+    })
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
   const {
-    data: project,
-    isLoading,
-    error
-  } = useDirectUnknownResource({
-    uri: `/api/clusters/${clusterName}/k8s/apis/${baseProjectApiGroup}/${baseProjectVersion}/${projectResourceName}/${namespace}`,
-    refetchInterval: 5e3,
-    queryKey: ["projects", clusterName || "no-cluster"],
+    state: stateProject,
+    status: statusProject,
+    lastError: lastErrorProject
+  } = useListWatch({
+    wsUrl: `/api/clusters/${clusterName}/openapi-bff-ws/listThenWatch/listWatchWs`,
+    paused: false,
+    ignoreRemove: false,
+    autoDrain: true,
+    preserveStateOnUrlChange: true,
+    query: {
+      apiVersion: baseProjectVersion,
+      apiGroup: baseProjectApiGroup,
+      plural: projectResourceName,
+      fieldSelector: `metadata.name=${namespace}`
+    },
     isEnabled: clusterName !== void 0
   });
+  const isLoading = statusProject === "connecting";
+  const error = statusProject === "closed" && lastErrorProject ? lastErrorProject : void 0;
+  const projectArr = stateProject.order.map((key) => {
+    const res = stateProject.byKey[key];
+    return res;
+  });
+  const project = projectArr.length > 0 ? projectArr[0] : void 0;
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const updatePermission = usePermissions({
     group: baseProjectApiGroup,
@@ -52900,5 +53468,5 @@ const useCrdData = ({
   });
 };
 
-export { BackToDefaultIcon, BlackholeForm, BlackholeFormDataProvider, ContentCard$1 as ContentCard, CursorDefaultDiv, CursorPointerTag, CursorPointerTagMinContent, CustomSelect$4 as CustomSelect, DeleteIcon, DeleteModal, DeleteModalMany, DownIcon, DynamicComponents, DynamicRenderer, DynamicRendererWithProviders, EarthIcon, EditIcon, EnrichedTable, EnrichedTableProvider, Events, FlexGrow, LockedIcon, LookingGlassIcon, ManageableBreadcrumbs, ManageableBreadcrumbsWithDataProvider, ManageableSidebar, ManageableSidebarWithDataProvider, MarketPlace, MarketplaceCard, MinusIcon, NodeTerminal, PaddingContainer, PauseCircleIcon, PlusIcon, PodLogs, PodLogsMonaco, PodTerminal, ProjectInfoCard, ResumeCircleIcon, Search, Spacer$1 as Spacer, SuccessIcon, TreeWithSearch, UncontrolledSelect, UnlockedIcon, UpIcon, YamlEditorSingleton, checkIfApiInstanceNamespaceScoped, checkIfBuiltInInstanceNamespaceScoped, checkPermission, createContextFactory, createNewEntry, deepMerge, deleteEntry, feedbackIcons, filterIfApiInstanceNamespaceScoped, filterIfBuiltInInstanceNamespaceScoped, filterSelectOptions, floorToDecimal, getAllPathsFromObj, getApiResourceSingle, getApiResourceTypes, getApiResourceTypesByApiGroup, getApiResources, getBackLinkToTable, getBuiltinResourceSingle, getBuiltinResourceTypes, getBuiltinResources, getBuiltinTreeData, getClusterList, getCrdData, getCrdResourceSingle, getCrdResources, getDirectUnknownResource, getEnrichedColumns, getEnrichedColumnsWithControls, getGroupsByCategory, getKinds, getLinkToApiForm, getLinkToBuiltinForm, getLinkToForm, getObjectFormItemsDraft, getPrefixSubarrays, getSortedKinds, getSortedKindsAll, getStringByName, getSwagger, getUppercase, groupsToTreeData, hslFromString, isFlatObject, isMultilineFromYaml, isMultilineString, kindByGvr, namespacedByGvr, normalizeValuesForQuotasToNumber, parseQuotaValue, parseQuotaValueCpu, parseQuotaValueMemoryAndStorage, pluralByKind, prepareDataForManageableBreadcrumbs, prepareDataForManageableSidebar, prepareTemplate, prepareUrlsToFetchForDynamicRenderer, updateEntry, useApiResourceSingle, useApiResourceTypesByGroup, useApiResources, useApisResourceTypes, useBuiltinResourceSingle, useBuiltinResourceTypes, useBuiltinResources, useClusterList, useCrdData, useCrdResourceSingle, useCrdResources, useDirectUnknownResource, usePermissions };
+export { BackToDefaultIcon, BlackholeForm, BlackholeFormDataProvider, ContentCard$1 as ContentCard, CursorDefaultDiv, CursorPointerTag, CursorPointerTagMinContent, CustomSelect$4 as CustomSelect, DeleteIcon, DeleteModal, DeleteModalMany, DownIcon, DynamicComponents, DynamicRenderer, DynamicRendererWithProviders, EarthIcon, EditIcon, EnrichedTable, EnrichedTableProvider, Events, FlexGrow, LockedIcon, LookingGlassIcon, ManageableBreadcrumbs, ManageableBreadcrumbsWithDataProvider, ManageableSidebar, ManageableSidebarWithDataProvider, MarketPlace, MarketplaceCard, MinusIcon, NodeTerminal, PaddingContainer, PauseCircleIcon, PlusIcon, PodLogs, PodLogsMonaco, PodTerminal, ProjectInfoCard, ResumeCircleIcon, Search, Spacer$1 as Spacer, SuccessIcon, TreeWithSearch, UncontrolledSelect, UnlockedIcon, UpIcon, YamlEditorSingleton, checkIfApiInstanceNamespaceScoped, checkIfBuiltInInstanceNamespaceScoped, checkPermission, createContextFactory, createNewEntry, deepMerge, deleteEntry, feedbackIcons, filterIfApiInstanceNamespaceScoped, filterIfBuiltInInstanceNamespaceScoped, filterSelectOptions, floorToDecimal, getAllPathsFromObj, getApiResourceSingle, getApiResourceTypes, getApiResourceTypesByApiGroup, getApiResources, getBackLinkToTable, getBuiltinResourceSingle, getBuiltinResourceTypes, getBuiltinResources, getBuiltinTreeData, getClusterList, getCrdData, getCrdResourceSingle, getCrdResources, getDirectUnknownResource, getEnrichedColumns, getEnrichedColumnsWithControls, getGroupsByCategory, getKinds, getLinkToApiForm, getLinkToBuiltinForm, getLinkToForm, getObjectFormItemsDraft, getPrefixSubarrays, getSortedKinds, getSortedKindsAll, getStringByName, getSwagger, getUppercase, groupsToTreeData, hslFromString, isFlatObject, isMultilineFromYaml, isMultilineString, kindByGvr, namespacedByGvr, normalizeValuesForQuotasToNumber, parseQuotaValue, parseQuotaValueCpu, parseQuotaValueMemoryAndStorage, pluralByKind, prepareDataForManageableBreadcrumbs, prepareDataForManageableSidebar, prepareTemplate, prepareUrlsToFetchForDynamicRenderer, updateEntry, useApiResourceSingle, useApiResourceTypesByGroup, useApiResources, useApisResourceTypes, useBuiltinResourceSingle, useBuiltinResourceTypes, useBuiltinResources, useClusterList, useCrdData, useCrdResourceSingle, useCrdResources, useDirectUnknownResource, useInfiniteSentinel, useListWatch, usePermissions };
 //# sourceMappingURL=openapi-k8s-toolkit.es.js.map