chore: Fix no-unnecessary-condition linting errors

js/eslint.config.mjs

@@ -112,7 +112,6 @@ export default tseslint.config(
       //  ------------------------------------------------------------------------------------
       "react/no-array-index-key": "warn", // 6 errors
       "@typescript-eslint/no-explicit-any": "warn", // 124 errors
-      "@typescript-eslint/no-unnecessary-condition": "warn", // 54 errors
       "@typescript-eslint/no-unsafe-member-access": "warn", // 120 errors
       "@typescript-eslint/no-misused-promises": "warn", // 26 errors
       "@typescript-eslint/prefer-nullish-coalescing": "warn", // 133 errors

js/package.json

@@ -5,7 +5,7 @@
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "[email protected].2+sha512.47870716bea1572b53df34ad8647b42962bc790ce2bf4562ba0f643237d7302a3d6a8ecef9e4bdfc01d23af1969aa90485d4cebb0b9638fa5ef1daef656f6c1b",
+  "packageManager": "[email protected].5+sha512.cdf928fca20832cd59ec53826492b7dc25dc524d4370b6b4adbf65803d32efaa6c1c88147c0ae4e8d579a6c9eec715757b50d4fa35eea179d868eada4ed043af",
   "scripts": {
     "dev": "next dev",
     "build": "npm run clean && next build && mv out ../recce/data",

js/src/components/app/EnvInfo.tsx

@@ -29,6 +29,7 @@ import {
 } from "@chakra-ui/react";
 import { format, parseISO } from "date-fns";
 import { IconInfo } from "../icons";
+import { isEmpty } from "lodash";
 
 export function formatTimestamp(timestamp: string): string {
   const date = parseISO(timestamp);
@@ -112,7 +113,7 @@ export function EnvInfo() {
                           </Link>
                         </ListItem>
                       )}
-                      {reviewInfo && renderInfoEntries(reviewInfo)}
+                      {!isEmpty(reviewInfo) && renderInfoEntries(reviewInfo)}
                     </UnorderedList>
                   </Flex>
                 </>

js/src/components/app/Filename.tsx

@@ -93,7 +93,7 @@
 }
 
 export const Filename = () => {
   const { fileName, cloudMode, isDemoSite, isLoading } = useLineageGraphContext();
   const modalDisclosure = useDisclosure();
   const overwriteDisclosure = useDisclosure();
   const isStateless = !fileName && !cloudMode && !isDemoSite;
@@ -104,7 +104,7 @@
 
   const [{ newFileName, errorMessage, modified, overwriteWithMethod, bypass }, setState] =
     useState<FilenameState>({
       newFileName: fileName || "recce_state.json",
     });
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -113,7 +113,7 @@
 
   const handleOpen = () => {
     setState({
       newFileName: fileName || "recce_state.json",
       modified: fileName ? false : true,
     });
 
@@ -131,16 +131,16 @@
       if (method === "save") {
         await saveAs({
           filename: newFileName,
           overwrite: overwrite || bypassOverwrite,
         });
       } else {
         await rename({
           filename: newFileName,
           overwrite: overwrite || bypassOverwrite,
         });
       }
       toastSuccess(method === "save" ? "Save file successfully" : "Rename file successfully");
       queryClient.invalidateQueries({ queryKey: cacheKeys.lineage() });
       if (bypass) {
         localStorage.setItem(localStorageKeys.bypassSaveOverwrite, "true");
       }
@@ -182,7 +182,8 @@
   return (
     <>
       <Flex flex="1" justifyContent="center" alignItems="center">
+        {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
         <Box fontWeight="600">{fileName ? fileName : cloudMode ? "cloud" : titleNewInstance}</Box>
         <Tooltip label={fileName ? "Change Filename" : "Save"} openDelay={1000}>
           <IconButton onClick={handleOpen} aria-label={""} variant="unstyled" size="sm">
             <Icon as={fileName ? IconEdit : IconSave} boxSize={"16px"} verticalAlign="middle" />
@@ -235,9 +236,9 @@
                     }
 
                     if (!fileName) {
                       handleAction("save");
                     } else {
                       handleAction("rename");
                     }
                   } else if (e.key === "Escape") {
                     modalDisclosure.onClose();
@@ -252,7 +253,7 @@
               size="sm"
               colorScheme={fileName ? undefined : "blue"}
               onClick={() => {
                 handleAction("save");
               }}
               isDisabled={!newFileName || !!errorMessage || !modified}>
               {fileName ? "Save as New File" : "Confirm"}

js/src/components/charts/TopKSummaryList.tsx

@@ -47,7 +47,7 @@ function prepareSummaryList(topK: TopKResult, isDisplayTopTen: boolean): Summary
     if (isLastItemOthers) {
       label = "(others)";
       isSpecialLabel = true;
-    } else if (v === undefined || v === null) {
+    } else if (v == null) {
       label = "(null)";
       isSpecialLabel = true;
     } else if (typeof v === "string" && v.length === 0) {
@@ -212,6 +212,7 @@ export function TopKSummaryList({ topk, valids, isDisplayTopTen }: Props) {
         const displayTopkRatio = formatIntervalMinMax(topkCount / valids);
         return (
           <Fragment key={index}>
+            {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
             {!isLastItemOthers || (isLastItemOthers && topkCount > 0) ? (
               <>
                 <Flex alignItems={"center"} width={"100%"} _hover={{ bg: "blackAlpha.300" }} px={3}>

js/src/components/check/CheckBreadcrumb.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
 import { Box, Breadcrumb, BreadcrumbItem, Input } from "@chakra-ui/react";
 import { ChevronRightIcon } from "@chakra-ui/icons";
 
@@ -10,7 +10,7 @@ interface CheckBreadcrumbProps {
 export function CheckBreadcrumb({ name, setName }: CheckBreadcrumbProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState(name);
-  const editInputRef = useRef(null);
+  const editInputRef = useRef<HTMLInputElement>(null);
 
   const handleClick = () => {
     setEditValue(name);
@@ -32,13 +32,13 @@ export function CheckBreadcrumb({ name, setName }: CheckBreadcrumbProps) {
     }
   };
 
-  const handleChange: React.ChangeEventHandler = (event) => {
-    setEditValue((event.target as any).value);
+  const handleChange: React.ChangeEventHandler = (event: ChangeEvent<HTMLInputElement>) => {
+    setEditValue(event.target.value);
   };
 
   useEffect(() => {
-    const handleClickOutside = (event: any) => {
-      if (editInputRef.current && !(editInputRef.current as any).contains(event.target)) {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (editInputRef.current && !editInputRef.current.contains(event.target as Node | null)) {
         handleCommit();
       }
     };

js/src/components/check/CheckDetail.tsx

@@ -154,7 +154,8 @@ export const CheckDetail = ({ checkId, refreshCheckList }: CheckDetailProps) =>
     }
 
     const markdown = buildMarkdown(check);
-    if (!navigator.clipboard) {
+    // @see https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
+    if (!window.isSecureContext) {
       failToast(
         "Failed to copy the check to clipboard",
         new Error("Copy to clipboard is available only in secure contexts (HTTPS)"),

js/src/components/check/CheckList.tsx

@@ -64,6 +64,7 @@ const ChecklistItem = ({
   };
 
   const icon: IconType = findByRunType(check.type)?.icon || TbChecklist;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   const isMarkAsApprovedDisabled = isDisabledByNoResult(check.type ?? "", run);
 
   return (

js/src/components/lineage/GraphNode.tsx

@@ -334,10 +334,11 @@ export function GraphNode({ data }: GraphNodeProps) {
           <Box height={`${data.columnSet.size * 15}px`} overflow="auto"></Box>
         </Box>
       )}
-
+      {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
       {Object.keys(data.parents ?? {}).length > 0 && (
         <Handle type="target" position={Position.Left} isConnectable={false} />
       )}
+      {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
       {Object.keys(data.children ?? {}).length > 0 && (
         <Handle type="source" position={Position.Right} isConnectable={false} />
       )}

js/src/components/lineage/LineageViewTopBar.tsx

@@ -240,11 +240,11 @@ const NodeSelectionInput = (props: {
 }) => {
   const [inputValue, setInputValue] = useState(props.value);
   const { data: flags } = useRecceServerFlag();
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (inputRef.current) {
-      (inputRef.current as any).value = props.value;
+      inputRef.current.value = props.value;
     }
   }, [props.value]);
 
@@ -282,7 +282,7 @@ const NodeSelectionInput = (props: {
             event.preventDefault();
             setInputValue(props.value);
             if (inputRef.current) {
-              (inputRef.current as any).blur();
+              inputRef.current.blur();
             }
           }
         }}
@@ -391,7 +391,6 @@ export const LineageViewTopBar = () => {
                 variant={"outline"}
                 size="xs"
                 fontSize="9pt"
-                isDisabled={selectMode !== "multi"}
                 onClick={() => {
                   deselect();
                 }}>

js/src/components/lineage/PresetCheckRecommendation.tsx

@@ -77,6 +77,7 @@ const usePresetCheckRecommendation = () => {
       }
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (querySelectedModels.status === "success" && querySelectedModels.data) {
       return querySelectedModels.data.nodes;
     }

js/src/components/lineage/graph.ts

@@ -4,13 +4,13 @@ export function getNeighborSet(
   degree = 1000,
 ) {
   const neighborSet = new Set<string>();
-  const visited: Record<string, number> = {};
+  const visited: Record<string, number | undefined> = {};
 
   const dfs = (id: string, currentDegree: number) => {
     if (currentDegree < 0) {
       return;
     }
-    if (visited[id] !== undefined && visited[id] >= currentDegree) {
+    if (visited[id] != null && visited[id] >= currentDegree) {
       return;
     }
     visited[id] = currentDegree;

js/src/components/lineage/lineage.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+// TODO LineageData typing needs to be fully thought out to handle the edge-cases - JMS
 import { Node, Edge, Position } from "reactflow";
 import { getNeighborSet, union } from "./graph";
 import { Run } from "@/lib/api/types";
@@ -11,7 +13,7 @@ import {
 } from "@/lib/api/info";
 
 /**
- * THe types for internal data structures.
+ * The types for internal data structures.
  */
 
 export interface LineageGraphNode {

js/src/components/lineage/useMultiNodesAction.ts

@@ -74,6 +74,7 @@ export const useMultiNodesAction = (
       actionState.currentRun = { run_id };
       actionState.total = 1;
 
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       while (true) {
         const run = await waitRun(run_id, 2);
         actionState.currentRun = run;
@@ -150,6 +151,7 @@ export const useMultiNodesAction = (
           };
           onActionNodeUpdated(node);
 
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           while (true) {
             const run = await waitRun(run_id, 2);
             actionState.currentRun = run;

js/src/components/profile/ProfileDiffForm.tsx

@@ -63,15 +63,22 @@ export function ProfileDiffForm({
           <Select
             isMulti
             closeMenuOnSelect={false}
-            options={(columnNames || []).map((c) => ({ label: c, value: c }))}
+            options={columnNames.map((c) => ({ label: c, value: c }))}
             value={(params.columns ?? []).map((c) => ({
               label: c,
               value: c,
             }))}
-            onChange={(options) => {
+            onChange={(newValue) => {
+              let cols: string[] | undefined;
+              const newCols = newValue.map((v) => v.value);
+              if (newCols.length === 0) {
+                cols = undefined;
+              } else {
+                cols = newCols;
+              }
               onParamsChanged({
                 ...params,
-                columns: (options || []).map((v) => v.value),
+                columns: cols,
               });
             }}></Select>
         )}

js/src/components/query/QueryResultView.tsx

@@ -124,7 +124,7 @@ const PrivateQueryResultView = (
 ) => {
   const pinnedColumns = useMemo(() => viewOptions?.pinned_columns || [], [viewOptions]);
 
-  const dataframe = run.result as DataFrame;
+  const dataframe = run.result;
   const gridData = useMemo(() => {
     if (!dataframe) {
       return { rows: [], columns: [] };
@@ -149,9 +149,9 @@ const PrivateQueryResultView = (
     return <Center height="100%">No data</Center>;
   }
 
-  const limit = dataframe.limit || 0;
+  const limit = dataframe ? (dataframe.limit ?? 0) : 0;
   const warning =
-    limit > 0 && dataframe.more
+    limit > 0 && dataframe?.more
       ? `Warning: Displayed results are limited to ${limit.toLocaleString()} records. To ensure complete data retrieval, consider applying a LIMIT or WHERE clause to constrain the result set.`
       : null;
   const showTopBar = onAddToChecklist || warning;

js/src/components/run/RunView.tsx

@@ -70,7 +70,7 @@ export const RunView = forwardRef(
         <Center p="16px" height="100%" bg="rgb(249,249,249)">
           <VStack>
             <Flex alignItems="center">
-              {progress?.percentage === undefined || progress.percentage === null ? (
+              {progress?.percentage == null ? (
                 <CircularProgress isIndeterminate size="20px" mr="8px" />
               ) : (
                 <CircularProgress size="20px" value={progress.percentage * 100} mr="8px" />

js/src/components/schema/schema.test.ts

@@ -29,7 +29,7 @@ test("column diff", () => {
     name: "VARCHAR",
   });
 
-  const result = mergeColumns(base, current) || {};
+  const result = mergeColumns(base, current);
   expect(Object.keys(result)).toStrictEqual([
     "id",
     "user_id",

js/src/components/schema/schemaDiff.ts

@@ -24,6 +24,7 @@ export function isSchemaChanged(
 
   // modified
   for (const key of currKeys) {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!baseSchema[key] || baseSchema[key].type !== currSchema[key].type) {
       return true;
     }

js/src/components/summary/ChangeSummary.tsx

@@ -116,7 +116,8 @@ function calculateColumnChange(base: NodeData | undefined, current: NodeData | u
   // Modify columns
   if (current && base) {
     Object.keys(current.columns || {}).forEach((col) => {
-      if (base.columns && current.columns && base.columns[col]) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (base.columns && current.columns?.[col] && base.columns[col]) {
         if (base.columns[col].type !== current.columns[col].type) modifies++;
       }
     });

js/src/components/summary/SchemaSummary.tsx

@@ -8,15 +8,9 @@ import {
   SimpleGrid,
   Text,
   HStack,
-  Tooltip,
-  Tag,
-  TagLeftIcon,
-  TagLabel,
-  SkeletonText,
 } from "@chakra-ui/react";
 import { LineageGraph, LineageGraphNode } from "../lineage/lineage";
 import { SchemaView } from "../schema/SchemaView";
-import { mergeColumns } from "../schema/schema";
 import { mergeKeysWithStatus } from "@/lib/mergeKeys";
 import { useEffect, useState } from "react";
 import { ResourceTypeTag, RowCountDiffTag } from "../lineage/NodeTag";

js/src/components/valuediff/ValueDiffForm.tsx

@@ -38,7 +38,7 @@ export function ValueDiffForm({ params, onParamsChanged, setIsReadyToExecute }:
 
   const columnNames = columns.map((c) => c.name);
 
-  // primaryKey can be array or string, map to array
+  // primaryKey can be an array or string, map to array
   const primaryKeys = Array.isArray(primaryKey)
     ? primaryKey
     : primaryKey
@@ -65,7 +65,7 @@ export function ValueDiffForm({ params, onParamsChanged, setIsReadyToExecute }:
           placeholder="Select primary key"
           isMulti
           closeMenuOnSelect={false}
-          options={(columnNames || []).map((c) => ({ label: c, value: c }))}
+          options={columnNames.map((c) => ({ label: c, value: c }))}
           value={(primaryKeys || []).map((c) => ({
             label: c,
             value: c,
@@ -95,15 +95,22 @@ export function ValueDiffForm({ params, onParamsChanged, setIsReadyToExecute }:
           <Select
             isMulti
             closeMenuOnSelect={false}
-            options={(columnNames || []).map((c) => ({ label: c, value: c }))}
+            options={columnNames.map((c) => ({ label: c, value: c }))}
             value={(params.columns || []).map((c) => ({
               label: c,
               value: c,
             }))}
-            onChange={(options) => {
+            onChange={(newValue) => {
+              let cols: string[] | undefined;
+              const newCols = newValue.map((v) => v.value);
+              if (newCols.length === 0) {
+                cols = undefined;
+              } else {
+                cols = newCols;
+              }
               onParamsChanged({
                 ...params,
-                columns: (options || []).map((v) => v.value),
+                columns: cols,
               });
             }}></Select>
         )}

js/src/components/valuediff/ValueDiffResultView.tsx

@@ -89,9 +89,8 @@ function _ValueDiffResultView({ run }: ValueDiffResultViewProp, ref: any) {
   const result = run.result as ValueDiffResult;
   const params = run.params as ValueDiffParams;
   const cellClass = (row: any) => {
-    const value: number | undefined = row[2];
-
-    return value !== undefined && value !== null && value < 1 ? "diff-cell-modified" : "";
+    const value = row[2] as unknown as number | undefined;
+    return value != null && value < 1 ? "diff-cell-modified" : "";
   };
   const primaryKeys = Array.isArray(params.primary_key) ? params.primary_key : [params.primary_key];
 
@@ -127,12 +126,8 @@ function _ValueDiffResultView({ run }: ValueDiffResultViewProp, ref: any) {
       name: "Matched %",
       resizable: true,
       renderCell: ({ column, row }) => {
-        const value: number | undefined = row[column.key];
-        return (
-          <Box textAlign="end">
-            {value != undefined && value !== null ? `${(value * 100).toFixed(2)} %` : "N/A"}
-          </Box>
-        );
+        const value = row[column.key] as unknown as number | undefined;
+        return <Box textAlign="end">{value != null ? `${(value * 100).toFixed(2)} %` : "N/A"}</Box>;
       },
       cellClass,
     },

js/src/components/valuediff/valuediff.tsx

@@ -129,7 +129,9 @@ export function toValueDiffGrid(
   }
 
   const primaryIndexes = _getPrimaryKeyIndexes(df.columns, primaryKeys);
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   const inBaseIndex = (columnMap.in_a || columnMap.IN_A).index;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   const inCurrentIndex = (columnMap.in_b || columnMap.IN_B).index;
 
   df.data.forEach((row, index) => {

js/src/lib/api/profile.ts

@@ -27,7 +27,7 @@ export interface TopKDiffParams {
 }
 
 export interface TopKResult {
-  values: (string | number)[];
+  values: (string | number | undefined)[];
   counts: number[];
   valids: number;
 }