chore(FR-1558): refactor code related to #4404 (#4409)

This PR
- removes the `--ignore-pattern '*.test.*'` flag from ESLint configuration in both `backend.ai-ui` and `react` packages, allowing test files to be properly linted.
- Renames `useControllableState` to `useControllableState_deprecated` to prepare for future refactoring
- Removes unused parameters and variables from various components
- Adds proper React.FC type annotations to components that were missing them
- Replaces a potentially unsafe optional chaining with a proper null check in ManageAppsModal
- Simplifies the queryVariables in AgentList by removing unnecessary useMemo

Author: yomybaby

packages/backend.ai-ui/package.json

@@ -24,7 +24,7 @@
     "test": "NODE_OPTIONS='--no-deprecation' jest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint ./src --ignore-pattern '*.test.*' --ignore-pattern '**.graphql.**' --max-warnings=0"
+    "lint": "eslint ./src --ignore-pattern '**.graphql.**' --max-warnings=0"
   },
   "eslintConfig": {
     "extends": [

react/package.json

@@ -82,7 +82,7 @@
     "eject": "react-scripts eject",
     "relay": "relay-compiler",
     "relay:watch": "nodemon --watch schema.graphql --watch client-directives.graphql --exec 'pnpm run relay --watch'",
-    "lint": "eslint ./src '../resources/i18n/*.json' '../resources/device_metadata.json' --ignore-pattern '*.test.*' --max-warnings=0",
+    "lint": "eslint ./src '../resources/i18n/*.json' '../resources/device_metadata.json' --max-warnings=0",
     "format": "pnpm dlx prettier --check 'src/**/*.{js,jsx,ts,tsx}'",
     "format-fix": "pnpm dlx prettier --write './src/**/*.{js,jsx,ts,tsx}'",
     "storybook": "storybook dev -p 6006",

react/src/components/AgentList.tsx

@@ -46,7 +46,7 @@ import {
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import React, { useState, useDeferredValue, useMemo } from 'react';
+import React, { useState, useDeferredValue } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 import { StringParam, useQueryParams, withDefault } from 'use-query-params';
@@ -88,22 +88,13 @@ const AgentList: React.FC<AgentListProps> = ({ tableProps }) => {
 
   const [fetchKey, updateFetchKey] = useFetchKey();
 
-  const queryVariables = useMemo(
-    () => ({
-      limit: baiPaginationOption.limit,
-      offset: baiPaginationOption.offset,
-      filter: queryParams.filter,
-      order: queryParams.order,
-      status: queryParams.status,
-    }),
-    [
-      baiPaginationOption.limit,
-      baiPaginationOption.offset,
-      queryParams.filter,
-      queryParams.order,
-      queryParams.status,
-    ],
-  );
+  const queryVariables = {
+    limit: baiPaginationOption.limit,
+    offset: baiPaginationOption.offset,
+    filter: queryParams.filter,
+    order: queryParams.order,
+    status: queryParams.status,
+  };
 
   const deferredQueryVariables = useDeferredValue(queryVariables);
   const deferredFetchKey = useDeferredValue(fetchKey);

react/src/components/AnnouncementAlert.tsx

@@ -7,10 +7,7 @@ import Markdown from 'markdown-to-jsx';
 import React from 'react';
 
 interface Props extends BAIAlertProps {}
-const AnnouncementAlert: React.FC<Props> = ({
-  style: _style,
-  ...otherProps
-}) => {
+const AnnouncementAlert: React.FC<Props> = ({ ...otherProps }) => {
   const baiClient = useSuspendedBackendaiClient();
   const { token } = theme.useToken();
   const { data: announcement } = useSuspenseTanQuery({

react/src/components/BAICodeEditor.tsx

@@ -1,4 +1,4 @@
-import useControllableState from '../hooks/useControllableState';
+import useControllableState_deprecated from '../hooks/useControllableState';
 import { loadLanguage, LanguageName } from '@uiw/codemirror-extensions-langs';
 import CodeMirror, {
   ReactCodeMirrorProps,
@@ -23,7 +23,7 @@ const BAICodeEditor: React.FC<BAICodeEditorProps> = ({
   lineWrapping = false,
   ...CodeMirrorProps
 }) => {
-  const [script, setScript] = useControllableState<string>({
+  const [script, setScript] = useControllableState_deprecated<string>({
     defaultValue: '',
     value,
     onChange,

react/src/components/BAIFetchKeyButton.tsx

@@ -1,4 +1,4 @@
-import useControllableState from '../hooks/useControllableState';
+import useControllableState_deprecated from '../hooks/useControllableState';
 import { useInterval, useIntervalValue } from '../hooks/useIntervalValue';
 import { ReloadOutlined } from '@ant-design/icons';
 import { Button, ButtonProps, Tooltip } from 'antd';
@@ -19,7 +19,6 @@ interface BAIAutoRefetchButtonProps
   pauseWhenHidden?: boolean;
 }
 const BAIFetchKeyButton: React.FC<BAIAutoRefetchButtonProps> = ({
-  value: _value,
   loading,
   onChange,
   showLastLoadTime,
@@ -31,7 +30,7 @@ const BAIFetchKeyButton: React.FC<BAIAutoRefetchButtonProps> = ({
   ...buttonProps
 }) => {
   const { t } = useTranslation();
-  const [lastLoadTime, setLastLoadTime] = useControllableState(
+  const [lastLoadTime, setLastLoadTime] = useControllableState_deprecated(
     {
       value: lastLoadTimeProp,
     },

react/src/components/CustomizedImageList.tsx

@@ -40,7 +40,7 @@ export type CommittedImage = NonNullable<
   CustomizedImageListQuery$data['customized_images']
 >[number];
 
-const CustomizedImageList = () => {
+const CustomizedImageList: React.FC = () => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { message } = App.useApp();

react/src/components/DynamicStepInputNumber.tsx

@@ -1,5 +1,5 @@
 import { useUpdatableState } from '../hooks';
-import useControllableState from '../hooks/useControllableState';
+import useControllableState_deprecated from '../hooks/useControllableState';
 import { InputNumber, InputNumberProps } from 'antd';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
@@ -21,9 +21,12 @@ const DynamicInputNumber: React.FC<DynamicInputNumberProps> = ({
   // onChange,
   ...inputNumberProps
 }) => {
-  const [value, setValue] = useControllableState<number>(inputNumberProps, {
-    defaultValue: dynamicSteps[0],
-  });
+  const [value, setValue] = useControllableState_deprecated<number>(
+    inputNumberProps,
+    {
+      defaultValue: dynamicSteps[0],
+    },
+  );
 
   // FIXME: this is a workaround to fix the issue that the value is not updated when the value is controlled
   const [key, updateKey] = useUpdatableState('first');

react/src/components/DynamicUnitInputNumber.tsx

@@ -1,5 +1,5 @@
 import { convertToBinaryUnit, parseValueWithUnit, SizeUnit } from '../helper';
-import useControllableState from '../hooks/useControllableState';
+import useControllableState_deprecated from '../hooks/useControllableState';
 import { usePrevious } from 'ahooks';
 import { InputNumber, InputNumberProps, Select, Typography } from 'antd';
 import _ from 'lodash';
@@ -30,12 +30,11 @@ const DynamicUnitInputNumber: React.FC<DynamicUnitInputNumberProps> = ({
   roundStep,
   ...inputNumberProps
 }) => {
-  const [value, setValue] = useControllableState<string | null | undefined>(
-    inputNumberProps,
-    {
-      defaultValue: '0g',
-    },
-  );
+  const [value, setValue] = useControllableState_deprecated<
+    string | null | undefined
+  >(inputNumberProps, {
+    defaultValue: '0g',
+  });
   const [numValue, _unitFromValue] =
     value === null || value === undefined
       ? [null, null]

react/src/components/DynamicUnitInputNumberWithSlider.tsx

@@ -4,7 +4,7 @@ import {
   toFixedFloorWithoutTrailingZeros,
 } from '../helper';
 import { useUpdatableState } from '../hooks';
-import useControllableState from '../hooks/useControllableState';
+import useControllableState_deprecated from '../hooks/useControllableState';
 import DynamicUnitInputNumber, {
   DynamicUnitInputNumberProps,
 } from './DynamicUnitInputNumber';
@@ -34,12 +34,11 @@ const DynamicUnitInputNumberWithSlider: React.FC<
   step = 0.05,
   ...otherProps
 }) => {
-  const [value, setValue] = useControllableState<string | undefined | null>(
-    otherProps,
-    {
-      defaultValue: '0g',
-    },
-  );
+  const [value, setValue] = useControllableState_deprecated<
+    string | undefined | null
+  >(otherProps, {
+    defaultValue: '0g',
+  });
   const { token } = theme.useToken();
   const minGiB = useMemo(() => convertToBinaryUnit(min, 'g', 2), [min]);
   const maxGiB = useMemo(() => convertToBinaryUnit(max, 'g', 2), [max]);