Fix Lint Errors

Author: Keivan Vosoughi

app/client/src/Container.tsx

@@ -48,9 +48,6 @@ const PageHeader = styled(Header)`
   height: fit-content;
   padding: 5px 15px
 `;
-const StyledImg = styled.img`
-  height: ${props => props?.height && `${props.height}px`}
-`
 
 const StyledText = styled.div`
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

app/client/src/api/hooks.ts

@@ -106,15 +106,15 @@ interface UsePostApiReturn<T> {
   data: T | null;
   loading: boolean;
   error: Error | null;
-  triggerPost: (body: Record<string, any>) => Promise<void>;
+  triggerPost: (body: Record<string, unknown>) => Promise<void>;
 }
 
 export function usePostApi<T>(url: string): UsePostApiReturn<T> {
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  const triggerPost = async (body: Record<string, any>) => {
+  const triggerPost = async (body: Record<string, unknown>) => {
     setLoading(true);
     setError(null); // Reset error on each request
 

app/client/src/components/RouteAccessControl.tsx

@@ -10,7 +10,7 @@ import { Navigate, useLocation } from "react-router-dom";
  */
 interface RouteACProps{
   element: ReactNode;
-  validator: (state: any | null) => boolean;
+  validator: (state: unknown | null) => boolean;
   reroutePath?: string;
 }
 const RouteAccessControl: FC<RouteACProps> = ({ element, validator, reroutePath = '/' }) => {

app/client/src/components/TelemetryDashboard.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
-  LineChart, Line, AreaChart, Area
+  LineChart, Line
 } from 'recharts';
 import axios from 'axios';
 import {
   Card, Typography, Row, Col, Statistic, Select, Spin, Empty, Table, Tag, Tabs, Alert, Progress, Space, Badge, Button
 } from 'antd';
 import {
   DashboardOutlined, ApiOutlined, CloudServerOutlined, RocketOutlined, SyncOutlined,
-  PieChartOutlined, BarChartOutlined, CodeOutlined, WarningOutlined, CheckCircleOutlined, CloseCircleOutlined
+  CodeOutlined, WarningOutlined, CheckCircleOutlined, CloseCircleOutlined
 } from '@ant-design/icons';
 
 const { Title, Text } = Typography;
@@ -19,7 +19,7 @@ const SUCCESS_COLOR = '#52c41a';
 const ERROR_COLOR = '#f5222d';
 const WARNING_COLOR = '#faad14';
 const INFO_COLOR = '#1890ff';
-const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#4CAF50', '#F44336', '#9C27B0'];
+// const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#4CAF50', '#F44336', '#9C27B0'];
 
 const TelemetryDashboard = () => {
   const [loading, setLoading] = useState(true);

app/client/src/pages/DataGenerator/Configure.tsx

@@ -1,5 +1,6 @@
 import endsWith from 'lodash/endsWith';
 import isEmpty from 'lodash/isEmpty';
+import isFunction from 'lodash/isFunction';
 import { useEffect, useState } from 'react';
 import { Flex, Form, Input, Select, Typography } from 'antd';
 import styled from 'styled-components';
@@ -9,8 +10,7 @@ import { MODEL_PROVIDER_LABELS } from './constants';
 import { ModelProviders, ModelProvidersDropdownOpts } from './types';
 import { useWizardCtx } from './utils';
 import FileSelectorButton from './FileSelectorButton';
-import first from 'lodash/first';
-import get from 'lodash/get';
+
 
 const StepContainer = styled(Flex)`
     background: white;
@@ -58,10 +58,10 @@ const Configure = () => {
         delete values.output_value;
 
         const allFieldsFilled = Object.values(values).every(value => Boolean(value));
-        if (allFieldsFilled) {
-            setIsStepValid && setIsStepValid(true)
-        } else {
-            setIsStepValid && setIsStepValid(false)
+        if (allFieldsFilled && isFunction(setIsStepValid)) {
+            setIsStepValid(true)
+        } else if (isFunction(setIsStepValid)) {
+            setIsStepValid(false)
         }
     }
     useEffect(() => {
@@ -93,7 +93,7 @@ const Configure = () => {
         form.setFieldValue('doc_paths', paths);
     }
 
-    const onFilesChange = (selections: any) => {
+    const onFilesChange = (selections: unknown) => {
         if (Array.isArray(selections) && !isEmpty(selections)) {
             const paths = selections.map((file: File) => (
                 { 

app/client/src/pages/DataGenerator/CustomPromptButton.tsx

@@ -1,9 +1,8 @@
-import { Button, Flex, Form, Input, Modal, notification, Spin } from "antd";
+import { Button, Form, Input, Modal, notification } from "antd";
 import { useEffect, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import styled from "styled-components";
-import { LoadingOutlined } from '@ant-design/icons';
-import { fetchCustomPrompt, fetchPrompt } from "./hooks";
+import { fetchCustomPrompt } from "./hooks";
 import Loading from "../Evaluator/Loading";
 
 interface Props {

app/client/src/pages/DataGenerator/DataGenerator.tsx

@@ -2,7 +2,7 @@ import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
 import { useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button, Flex, Form, Layout, Steps, Typography } from 'antd';
+import { Button, Flex, Form, Layout, Steps } from 'antd';
 import type { FormInstance } from 'antd';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -117,10 +117,10 @@ const DataGenerator = () => {
 
     }
 
-    if (datasetDetailsReq && datasetDetailsReq.data && 
-        !isEmpty(datasetDetailsReq?.data?.generate_file_name)) {
-        initialData.example_path = initialData?.example_path;
-    }
+    // if (datasetDetailsReq && datasetDetailsReq.data && 
+    //     !isEmpty(datasetDetailsReq?.data?.generate_file_name)) {
+    //     initialData.example_path = initialData?.example_path;
+    // }
 
     if (Array.isArray(initialData?.input_paths) && !isEmpty(initialData?.input_paths) ) {
         initialData.doc_paths = initialData?.input_paths.map((path: string) => ({

app/client/src/pages/DataGenerator/Examples.tsx

@@ -2,7 +2,7 @@ import first from 'lodash/first';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect } from 'react';
-import { Button, Form, Modal, Space, Table, Tooltip, Typography, Flex, Input, Empty, Alert } from 'antd';
+import { Button, Form, Modal, Space, Table, Tooltip, Typography, Flex, Input, Empty } from 'antd';
 import { CloudUploadOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import { useMutation } from "@tanstack/react-query";
@@ -56,7 +56,6 @@ enum ExampleType {
 
 const Examples: React.FC = () => {
     const form = Form.useFormInstance();
-    const formData = Form.useWatch((values) => values, form);
     const [exampleType, setExampleType] = useState(ExampleType.PROMPT_COMPLETION);
 
     const mutation = useMutation({
@@ -260,8 +259,9 @@ const Examples: React.FC = () => {
                                         <Button onClick={() => Modal.destroyAll()}>{'Cancel'}</Button>
                                         <Button
                                             onClick={() => {
-                                                examples?.examples &&
+                                                if (examples?.examples) {
                                                     form.setFieldValue('examples', [...examples.examples]);
+                                                }
                                                 Modal.destroyAll();
                                             }}
                                             type='primary'

app/client/src/pages/DataGenerator/FileSelectorButton.tsx

@@ -1,4 +1,3 @@
-import get from 'lodash/get';
 import { Button, Modal } from 'antd';
 import React, { useState } from 'react';
 import FilesTable from './FilesTable';

app/client/src/pages/DataGenerator/FilesTable.tsx

@@ -1,6 +1,8 @@
 import endsWith from 'lodash/endsWith';
 import filter from 'lodash/filter';
 import clone from 'lodash/clone';
+import set from 'lodash/set';
+import forEach from 'lodash/forEach';
 import React, { useEffect, useState } from 'react';
 import { Badge, Breadcrumb, Button, Col, Flex, List, Popover, Row, Table, Tooltip, Typography } from 'antd';
 import styled from 'styled-components';
@@ -9,7 +11,7 @@ import { getFileSize, isDirectory } from './utils';
 import { File, WorkflowType } from './types';
 import { useGetProjectFiles } from './hooks';
 import isEmpty from 'lodash/isEmpty';
-import { forEach, set, uniq } from 'lodash';
+import Loading from '../Evaluator/Loading';
 
 const DIRECTORY_MIME_TYPE = 'inode/directory';
 
@@ -81,12 +83,12 @@ const FilesTable: React.FC<Props> = ({ onSelectedRows, workflowType }) => {
   const [paths, setPaths] = useState<string[] | null>(null);
   const [path, setPath] = useState<string | null>(null);
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
-  const [selectedRows, setSelectedRows] = useState<File[]>([]);
+  const [, setSelectedRows] = useState<File[]>([]);
   // row selection map: path as key -> list of row keys
   const [rowSelectionMap, setRowSelectionMap] = useState<RowSelectionMap>({});
   // row selection map: path as key -> list of files
   const [fileSelectionMap, setFileSelectionMap] = useState<FileSelectionMap>({});
-  const { fetching, listProjectFiles, data } = useGetProjectFiles(paths || []);
+  const { fetching, listProjectFiles, data } = useGetProjectFiles();
 
   useEffect(() => {
     if (!isEmpty(path) || paths === null || isEmpty(paths)) {
@@ -151,7 +153,7 @@ const FilesTable: React.FC<Props> = ({ onSelectedRows, workflowType }) => {
       key: 'name',
       ellipsis: true,
       render: (file: File) => {
-        const { name, url } = file;
+        const { name } = file;
 
         if (file?.mime !== DIRECTORY_MIME_TYPE) {
           return (
@@ -205,6 +207,7 @@ const FilesTable: React.FC<Props> = ({ onSelectedRows, workflowType }) => {
             </Breadcrumb>
           )}
         </Col>
+        {fetching && <Loading />}
 
         <Col sm={4}>
           <Flex style={{ flexDirection: 'row-reverse' }}>