chore(console): address eslint warnings

apps/wing-console/console/design-system/src/attribute.tsx

@@ -54,6 +54,7 @@ export const Attribute = ({
             theme.borderInput,
             "w-full border opacity-70 ease-in-out",
             "items-center px-2 select-text text-sm transition truncate rounded",
+            "py-0",
           )}
           value={value}
           readOnly

apps/wing-console/console/design-system/src/tabs.tsx

@@ -23,28 +23,37 @@ export interface TabsProps {
 }
 
 export const Tabs = (props: TabsProps) => {
+  const {
+    onTabChange,
+    transparent,
+    small,
+    currentTabId: propsCurrentTabId,
+    tabs,
+    tabsWithNotifications,
+    renderActiveTabPanelOnly,
+  } = props;
   const { theme } = useTheme();
-  const [currentTabId, setCurrentTabId] = useState(props.currentTabId);
+  const [currentTabId, setCurrentTabId] = useState(propsCurrentTabId);
 
   useEffect(() => {
-    if (props.currentTabId) {
-      setCurrentTabId(props.currentTabId);
+    if (propsCurrentTabId) {
+      setCurrentTabId(propsCurrentTabId);
     }
-  }, [props]);
+  }, [propsCurrentTabId]);
 
   useEffect(() => {
-    if (props.onTabChange && currentTabId) {
-      props.onTabChange(currentTabId);
+    if (onTabChange && currentTabId) {
+      onTabChange(currentTabId);
     }
-  }, [currentTabId]);
+  }, [currentTabId, onTabChange]);
 
   return (
     <div className="h-full flex flex-col">
       <div
         className={classNames(
           "relative w-full text-sm select-none",
-          !props.transparent && [theme.bg3, theme.text2],
-          props.small ? "h-6" : "h-8",
+          !transparent && [theme.bg3, theme.text2],
+          small ? "h-6" : "h-8",
         )}
       >
         <ScrollableArea
@@ -53,11 +62,11 @@ export const Tabs = (props: TabsProps) => {
           scrollbarSize="xs"
           className={classNames(
             "flex gap-px",
-            !props.transparent && [theme.bg1, theme.text2],
-            props.transparent && "gap-x-3",
+            !transparent && [theme.bg1, theme.text2],
+            transparent && "gap-x-3",
           )}
         >
-          {props.tabs.map((tab) => {
+          {tabs.map((tab) => {
             const isCurrent = tab.id === currentTabId;
             return (
               // TODO: Fix a11y
@@ -66,19 +75,18 @@ export const Tabs = (props: TabsProps) => {
                 key={tab.id}
                 className={classNames(
                   "relative flex items-center cursor-pointer group",
-                  props.transparent &&
+                  transparent &&
                     isCurrent && [theme.text2, "border-b-2", theme.border3],
-                  props.transparent &&
+                  transparent &&
                     !isCurrent && [
                       theme.text2,
                       theme.text3Hover,
                       "border-b-2 border-transparent",
                     ],
 
-                  !props.transparent && "px-4",
-                  !props.transparent && isCurrent && theme.bg3,
-                  !props.transparent &&
-                    !isCurrent && [theme.bg2, theme.bg2Hover],
+                  !transparent && "px-4",
+                  !transparent && isCurrent && theme.bg3,
+                  !transparent && !isCurrent && [theme.bg2, theme.bg2Hover],
                 )}
                 onClick={() => setCurrentTabId(tab.id)}
               >
@@ -90,7 +98,7 @@ export const Tabs = (props: TabsProps) => {
                   )}
                 </div>
 
-                {props.tabsWithNotifications?.includes(tab.id) && (
+                {tabsWithNotifications?.includes(tab.id) && (
                   <div className="ml-2">
                     <span className="relative flex h-2 w-2">
                       <span
@@ -114,9 +122,9 @@ export const Tabs = (props: TabsProps) => {
         </ScrollableArea>
       </div>
 
-      {props.tabs.map((tab) => {
+      {tabs.map((tab) => {
         const isCurrent = tab.id === currentTabId;
-        if (props.renderActiveTabPanelOnly && !isCurrent) {
+        if (renderActiveTabPanelOnly && !isCurrent) {
           return;
         }
 

apps/wing-console/console/ui/src/features/auto-updater.tsx

@@ -28,7 +28,7 @@ export const AutoUpdater = () => {
     if (enabled?.data?.enabled) {
       checkForUpdates.mutate();
     }
-  }, [enabled?.data?.enabled]);
+  }, [checkForUpdates, enabled?.data?.enabled]);
 
   useEffect(() => {
     if (currentStatus?.status?.version) {

apps/wing-console/console/ui/src/features/console-logs-filters.tsx

@@ -4,13 +4,23 @@ import { LogLevel } from "@wingconsole/server";
 import debounce from "lodash.debounce";
 import { useCallback, useEffect, useState } from "react";
 
+const logLevels = ["verbose", "info", "warn", "error"] as const;
+
+const logLevelNames = {
+  verbose: "Verbose",
+  info: "Info",
+  warn: "Warnings",
+  error: "Errors",
+} as const;
+
 export interface ConsoleLogsFiltersProps {
   selectedLogTypeFilters: LogLevel[];
   setSelectedLogTypeFilters: (types: LogLevel[]) => void;
   clearLogs: () => void;
   isLoading: boolean;
   onSearch: (search: string) => void;
 }
+
 export const ConsoleLogsFilters = ({
   selectedLogTypeFilters,
   setSelectedLogTypeFilters,
@@ -29,14 +39,6 @@ export const ConsoleLogsFilters = ({
   const [defaultSelection, setDefaultSelection] = useState<string[]>();
   const [combinationName, setCombinationName] = useState<string>();
 
-  const logLevels = ["verbose", "info", "warn", "error"] as const;
-  const logLevelNames: Record<(typeof logLevels)[number], string> = {
-    verbose: "Verbose",
-    info: "Info",
-    warn: "Warnings",
-    error: "Errors",
-  };
-
   useEffect(() => {
     if (selectedLogTypeFilters.length === 4) {
       setCombinationName("All levels");
@@ -59,7 +61,7 @@ export const ConsoleLogsFilters = ({
 
   useEffect(() => {
     setDefaultSelection(selectedLogTypeFilters);
-  }, []);
+  }, [selectedLogTypeFilters]);
 
   return (
     <div className="flex px-2 space-x-2 pt-1">

apps/wing-console/console/ui/src/layout/use-layout.tsx

@@ -47,15 +47,21 @@ export const useLayout = ({
 
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | undefined>();
 
-  const onSelectedItemsChange = useCallback((items: string[]) => {
-    setSelectedEdgeId(undefined);
-    setSelectedItems(items);
-  }, []);
-
-  const onSelectedEdgeIdChange = useCallback((edgeId: string | undefined) => {
-    onSelectedItemsChange([]);
-    setSelectedEdgeId(edgeId);
-  }, []);
+  const onSelectedItemsChange = useCallback(
+    (items: string[]) => {
+      setSelectedEdgeId(undefined);
+      setSelectedItems(items);
+    },
+    [setSelectedItems],
+  );
+
+  const onSelectedEdgeIdChange = useCallback(
+    (edgeId: string | undefined) => {
+      onSelectedItemsChange([]);
+      setSelectedEdgeId(edgeId);
+    },
+    [onSelectedItemsChange],
+  );
 
   const wingfile = trpc["app.wingfile"].useQuery();
   const title = useMemo(() => {

apps/wing-console/console/ui/src/services/use-api.ts

@@ -22,14 +22,14 @@ export const useApi = ({
     //   return;
     // }
     onFetchDataUpdate(fetch.data);
-  }, [fetch.data]);
+  }, [fetch.data, onFetchDataUpdate]);
 
   useEffect(() => {
     if (!schema.data) {
       return;
     }
     onSchemaDataUpdate(schema.data);
-  }, [schema.data]);
+  }, [onSchemaDataUpdate, schema.data]);
 
   const callFetch = async ({
     url,

apps/wing-console/console/ui/src/services/use-explorer.tsx

@@ -42,14 +42,14 @@ export const useExplorer = () => {
 
   const tree = trpc["app.explorerTree"].useQuery();
 
-  const setSelectedNode = trpc["app.selectNode"].useMutation();
+  const { mutate: setSelectedNode } = trpc["app.selectNode"].useMutation();
   const selectedNode = trpc["app.selectedNode"].useQuery();
   const nodeIds = trpc["app.nodeIds"].useQuery();
 
   const onSelectedItemsChange = useCallback(
     (selectedItems: string[]) => {
       setSelectedItems(selectedItems);
-      setSelectedNode.mutate({
+      setSelectedNode({
         resourcePath: selectedItems[0] ?? "",
       });
     },
@@ -69,11 +69,11 @@ export const useExplorer = () => {
     }
 
     if (!selectedNode.data || !nodeIds.data?.includes(selectedNode.data)) {
-      setSelectedNode.mutate({
+      setSelectedNode({
         resourcePath: "root",
       });
     }
-  }, [selectedNode.data, nodeIds.data]);
+  }, [selectedNode.data, nodeIds.data, setSelectedNode]);
 
   useEffect(() => {
     if (!selectedNode.data) {

apps/wing-console/console/ui/src/ui/api-interaction.tsx

@@ -118,15 +118,29 @@ export const ApiInteraction = ({
       headers,
       body,
     });
-  }, [url, currentRoute, pathVariables, currentMethod, headers, body]);
+  }, [
+    url,
+    currentMethod,
+    currentRoute,
+    callFetch,
+    pathVariables,
+    headers,
+    body,
+  ]);
 
   // TODO revisit
-  const openResponseTab = useCallback((tabId: string) => {
-    setCurrentResponseTab(tabId);
-  }, []);
-  const openOptionTab = useCallback((tabId: string) => {
-    setCurrentOptionsTab(tabId);
-  }, []);
+  const openResponseTab = useCallback(
+    (tabId: string) => {
+      setCurrentResponseTab(tabId);
+    },
+    [setCurrentResponseTab],
+  );
+  const openOptionTab = useCallback(
+    (tabId: string) => {
+      setCurrentOptionsTab(tabId);
+    },
+    [setCurrentOptionsTab],
+  );
 
   useEffect(() => {
     if (!currentHeaderKey) {
@@ -189,7 +203,7 @@ export const ApiInteraction = ({
       newRoute = `${newRoute}?${urlParameters.toString()}`;
     }
     setCurrentRoute(newRoute);
-  }, [currentRoute, queryParameters]);
+  }, [currentRoute, queryParameters, setCurrentRoute]);
 
   useEffect(() => {
     if (!schemaData) {
@@ -207,7 +221,7 @@ export const ApiInteraction = ({
     if (methods.length > 0 && methods[0]) {
       setCurrentMethod(methods[0]);
     }
-  }, [schemaData]);
+  }, [currentRoute, schemaData, setCurrentMethod]);
 
   return (
     <div className="h-full flex-1 flex flex-col text-sm space-y-1">

apps/wing-console/console/ui/src/ui/bucket-metadata.tsx

@@ -12,7 +12,7 @@ export const BucketMetadata = ({ node }: BucketMetadataProps) => {
   return (
     <div
       className={classNames(
-        "px-2 pt-1.5 flex flex-col gap-y-1 gap-x-4",
+        "px-2 py-1.5 flex flex-col gap-y-1 gap-x-4",
         theme.bg3,
         theme.text2,
       )}

apps/wing-console/console/ui/src/ui/counter-interaction.tsx

@@ -41,7 +41,7 @@ export const CounterInteraction = ({
           <input
             id={actualValueElementId}
             className={classNames(
-              "w-full border opacity-70 ease-in-out items-center px-2 select-text text-sm transition truncate rounded",
+              "w-full border opacity-70 ease-in-out items-center px-2 py-0 select-text text-sm transition truncate rounded",
               theme.bgInput,
               theme.borderInput,
               theme.textInput,

apps/wing-console/console/ui/src/ui/dynamodb-table-interaction.tsx

@@ -78,7 +78,7 @@ export const DynamodbTableInteraction = ({
     }
 
     return result;
-  }, [rows]);
+  }, [hashKey, rangeKey, rows]);
 
   const addRow = useCallback(async () => {
     onAddRow(newRow);
@@ -103,6 +103,7 @@ export const DynamodbTableInteraction = ({
         error,
       });
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [newRow, hashKey, rangeKey],
   );
 

apps/wing-console/console/ui/src/ui/function-metadata.tsx

@@ -12,7 +12,7 @@ export const FunctionMetadata = ({ node }: FunctionMetadataProps) => {
   return (
     <div
       className={classNames(
-        "px-2 pt-1.5 flex flex-col gap-y-1 gap-x-4",
+        "px-2 py-1.5 flex flex-col gap-y-1 gap-x-4",
         theme.bg3,
         theme.text2,
       )}

apps/wing-console/console/ui/src/ui/queue-metadata.tsx

@@ -16,7 +16,7 @@ export const QueueMetadata = ({
   return (
     <div
       className={classNames(
-        "px-2 pt-1.5 flex flex-col gap-y-1 gap-x-4",
+        "px-2 py-1.5 flex flex-col gap-y-1 gap-x-4",
         theme.bg3,
         theme.text2,
       )}

apps/wing-console/console/ui/src/ui/table-interaction.tsx

@@ -60,16 +60,15 @@ export const TableInteraction = ({
 
   const updateNewRow = useCallback(
     (key: string, newValue: any) => {
-      const row = {
-        ...newRow.data,
-        [key]: newValue,
-      };
-      setNewRow({
-        data: row,
+      setNewRow((newRow) => ({
+        data: {
+          ...newRow.data,
+          [key]: newValue,
+        },
         error: "",
-      });
+      }));
     },
-    [newRow],
+    [setNewRow],
   );
 
   const editRow = useCallback(

apps/wing-console/packages/use-persistent-state/src/index.tsx

@@ -68,7 +68,7 @@ export const createPersistentState = (stateId: string) => {
           storedData[index] = valueRef.current;
           currentState.set(stateId, storedData);
         };
-      }, []);
+      }, [state]);
 
       return [value, setValue];
     },