chore(ts): fix typescript type-checking errors (#1087)

Signed-off-by: Thuan Vo <[email protected]> (cherry picked from commit 5aa3f5c) # Conflicts: # .github/workflows/ci.yaml # package.json # src/app/Settings/SettingsUtils.ts # src/app/Topology/Shared/utils.tsx # src/test/Rules/CreateRule.test.tsx
cryostatio · Aug 31, 2023 · 329b988 · 329b988
1 parent b7df7ce
commit 329b988
Show file tree

Hide file tree

Showing 29 changed files with 295 additions and 257 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -31,5 +31,35 @@ jobs:
     - uses: bahmutov/npm-install@v1
     - run: yarn format:check
     - run: yarn eslint:check
+<<<<<<< HEAD
     - run: yarn build:notests
+=======
+  type-check:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - uses: bahmutov/npm-install@v1
+      - run: yarn type-check
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - uses: bahmutov/npm-install@v1
+>>>>>>> 5aa3f5c (chore(ts): fix typescript type-checking errors (#1087))
     - run: yarn test:ci
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -22,6 +22,7 @@
   "DOWNLOAD": "Download",
   "EDIT": "Edit",
   "FILTER_NAME": "Name",
+  "FILTER_TOPIC": "Topic",
   "HELP": "Help",
   "HOUR": "Hour",
   "HOUR_one": "Hour",

diff --git a/package.json b/package.json
@@ -20,7 +20,11 @@
     "eslint:apply": "eslint --cache --ext .ts,.tsx,.js --fix ./src/",
     "license:check": "license-check-and-add check -f license-config.json",
     "license:apply": "license-check-and-add add -f license-config.json",
+<<<<<<< HEAD
     "lint": "npm-run-all -l -p format eslint",
+=======
+    "lint": "concurrently -c 'auto' 'yarn:format' 'yarn:eslint' 'yarn:type-check'",
+>>>>>>> 5aa3f5c (chore(ts): fix typescript type-checking errors (#1087))
     "localize": "i18next \"src/**/*.{js,jsx,ts,tsx,json}\" -c ./i18next-parser.config.js",
     "format": "npm-run-all format:check",
     "format:check": "npm-run-all -l license:check prettier:check",
@@ -31,7 +35,8 @@
     "build:bundle-analyze": "webpack-bundle-analyzer ./stats.json dist",
     "build:bundle-profile-analyze": "npm-run-all -l build:bundle-profile build:bundle-analyze",
     "yarn:install": "yarn install",
-    "yarn:frzinstall": "yarn install --immutable"
+    "yarn:frzinstall": "yarn install --immutable",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.20.0",

diff --git a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx
@@ -161,14 +161,14 @@ export const AutomatedAnalysisCard: React.FC<AutomatedAnalysisCardProps> = (prop
   const [showListView, setShowListView] = React.useState<boolean>(false);
 
   const targetAutomatedAnalysisFilters = useSelector((state: RootState) => {
-    const filters = state.automatedAnalysisFilters.state.targetFilters.filter(
+    const filters = state.automatedAnalysisFilters.targetFilters.filter(
       (targetFilter: TargetAutomatedAnalysisFilters) => targetFilter.target === targetConnectURL
     );
     return filters.length > 0 ? filters[0].filters : emptyAutomatedAnalysisFilters;
   }) as AutomatedAnalysisFiltersCategories;
 
   const targetAutomatedAnalysisGlobalFilters = useSelector((state: RootState) => {
-    return state.automatedAnalysisFilters.state.globalFilters.filters;
+    return state.automatedAnalysisFilters.globalFilters.filters;
   }) as AutomatedAnalysisGlobalFiltersCategories;
 
   const categorizeEvaluation = React.useCallback(

diff --git a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx
@@ -73,16 +73,22 @@ export interface AutomatedAnalysisFiltersProps {
   updateFilters: (target: string, updateFilterOptions: UpdateFilterOptions) => void;
 }
 
-export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> = ({ updateFilters, ...props }) => {
+export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> = ({
+  updateFilters,
+  target,
+  evaluations,
+  filters,
+  ..._props
+}) => {
   const dispatch = useDispatch<StateDispatch>();
   const { t } = useTranslation();
 
   const currentCategory = useSelector((state: RootState) => {
-    const targetAutomatedAnalysisFilters = state.automatedAnalysisFilters.state.targetFilters.filter(
-      (targetFilter) => targetFilter.target === props.target
+    const targetAutomatedAnalysisFilters = state.automatedAnalysisFilters.targetFilters.filter(
+      (targetFilter) => targetFilter.target === target
     );
     if (!targetAutomatedAnalysisFilters.length) {
-      return t('FILTER_NAME', { ns: 'common' });
+      return 'Name';
     } // Target is not yet loaded
     return targetAutomatedAnalysisFilters[0].selectedCategory;
   });
@@ -96,33 +102,47 @@ export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> =
   const onCategorySelect = React.useCallback(
     (category) => {
       setIsCategoryDropdownOpen(false);
-      dispatch(automatedAnalysisUpdateCategoryIntent(props.target, category));
+      dispatch(automatedAnalysisUpdateCategoryIntent(target, category));
     },
-    [dispatch, setIsCategoryDropdownOpen, props.target]
+    [dispatch, setIsCategoryDropdownOpen, target]
   );
 
   const onDelete = React.useCallback(
     (category: string | ToolbarChipGroup, value) =>
-      updateFilters(props.target, { filterKey: category as string, filterValue: value, deleted: true }),
-    [updateFilters, props.target]
+      updateFilters(target, { filterKey: category as string, filterValue: value, deleted: true }),
+    [updateFilters, target]
   );
 
   const onDeleteGroup = React.useCallback(
     (category: string | ToolbarChipGroup) =>
-      updateFilters(props.target, { filterKey: category as string, deleted: true, deleteOptions: { all: true } }),
-    [updateFilters, props.target]
+      updateFilters(target, { filterKey: category as string, deleted: true, deleteOptions: { all: true } }),
+    [updateFilters, target]
   );
 
   const onNameInput = React.useCallback(
-    (inputName: string) => updateFilters(props.target, { filterKey: currentCategory, filterValue: inputName }),
-    [updateFilters, currentCategory, props.target]
+    (inputName: string) => updateFilters(target, { filterKey: currentCategory, filterValue: inputName }),
+    [updateFilters, currentCategory, target]
   );
 
   const onTopicInput = React.useCallback(
     (inputTopic: string) => {
-      updateFilters(props.target, { filterKey: currentCategory, filterValue: inputTopic });
+      updateFilters(target, { filterKey: currentCategory, filterValue: inputTopic });
     },
-    [updateFilters, currentCategory, props.target]
+    [updateFilters, currentCategory, target]
+  );
+
+  const getCategoryDisplay = React.useCallback(
+    (category: string) => {
+      switch (category) {
+        case 'Name':
+          return t('FILTER_NAME', { ns: 'common' });
+        case 'Topic':
+          return t('FILTER_TOPIC', { ns: 'common' });
+        default:
+          throw new Error(`Unknown Automated Analysis Filter Category: ${category}`);
+      }
+    },
+    [t]
   );
 
   const categoryDropdown = React.useMemo(() => {
@@ -132,7 +152,7 @@ export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> =
         position={DropdownPosition.left}
         toggle={
           <DropdownToggle aria-label={currentCategory} onToggle={onCategoryToggle}>
-            <FilterIcon /> {currentCategory}
+            <FilterIcon /> {getCategoryDisplay(currentCategory)}
           </DropdownToggle>
         }
         isOpen={isCategoryDropdownOpen}
@@ -143,37 +163,37 @@ export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> =
         ))}
       />
     );
-  }, [isCategoryDropdownOpen, currentCategory, onCategoryToggle, onCategorySelect]);
+  }, [isCategoryDropdownOpen, currentCategory, onCategoryToggle, onCategorySelect, getCategoryDisplay]);
 
   const filterDropdownItems = React.useMemo(
     () => [
       <AutomatedAnalysisNameFilter
         key={'name'}
-        evaluations={props.evaluations}
-        filteredNames={props.filters.Name}
+        evaluations={evaluations}
+        filteredNames={filters.Name}
         onSubmit={onNameInput}
       />,
       <AutomatedAnalysisTopicFilter
         key={'topic'}
-        evaluations={props.evaluations}
-        filteredTopics={props.filters.Topic}
+        evaluations={evaluations}
+        filteredTopics={filters.Topic}
         onSubmit={onTopicInput}
-      ></AutomatedAnalysisTopicFilter>,
+      />,
     ],
-    [props.evaluations, props.filters.Name, props.filters.Topic, onNameInput, onTopicInput]
+    [evaluations, filters.Name, filters.Topic, onNameInput, onTopicInput]
   );
 
   return (
     <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
       <ToolbarGroup variant="filter-group">
         <ToolbarItem>
           {categoryDropdown}
-          {Object.keys(props.filters)
+          {Object.keys(filters)
             .filter((f) => f !== 'Score')
             .map((filterKey, i) => (
               <ToolbarFilter
                 key={filterKey}
-                chips={props.filters[filterKey]}
+                chips={filters[filterKey]}
                 deleteChip={onDelete}
                 deleteChipGroup={onDeleteGroup}
                 categoryName={filterKey}

diff --git a/src/app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisScoreFilter.tsx b/src/app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisScoreFilter.tsx
@@ -59,7 +59,7 @@ export const AutomatedAnalysisScoreFilter: React.FC<AutomatedAnalysisScoreFilter
   const dispatch = useDispatch<StateDispatch>();
   const { t } = useTranslation();
   const currentScore = useSelector((state: RootState) => {
-    const filters = state.automatedAnalysisFilters.state.globalFilters.filters;
+    const filters = state.automatedAnalysisFilters.globalFilters.filters;
     if (!filters) return 0;
     return filters.Score;
   });

diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx
@@ -36,7 +36,7 @@
  * SOFTWARE.
  */
 import { FeatureFlag } from '@app/Shared/FeatureFlag/FeatureFlag';
-import { DashboardConfigState } from '@app/Shared/Redux/Configurations/DashboardConfigSlice';
+import { DashboardConfig } from '@app/Shared/Redux/Configurations/DashboardConfigSlice';
 import {
   dashboardConfigDeleteCardIntent,
   dashboardConfigFirstRunIntent,
@@ -69,7 +69,7 @@ export const Dashboard: React.FC<DashboardComponentProps> = (_) => {
   const serviceContext = React.useContext(ServiceContext);
   const dispatch = useDispatch<StateDispatch>();
   const { t } = useTranslation();
-  const dashboardConfigs: DashboardConfigState = useSelector((state: RootState) => state.dashboardConfigs);
+  const dashboardConfigs: DashboardConfig = useSelector((state: RootState) => state.dashboardConfigs);
   const jfrChartController = React.useRef(
     new JFRMetricsChartController(
       serviceContext.api,
@@ -87,7 +87,7 @@ export const Dashboard: React.FC<DashboardComponentProps> = (_) => {
   }, [dashboardConfigs]);
 
   React.useEffect(() => {
-    const layouts = getFromLocalStorage('DASHBOARD_CFG', {}) as DashboardConfigState;
+    const layouts = getFromLocalStorage('DASHBOARD_CFG', {}) as DashboardConfig;
     if (layouts._version === undefined) {
       dispatch(dashboardConfigFirstRunIntent());
     }

diff --git a/src/app/Recordings/RecordingFilters.tsx b/src/app/Recordings/RecordingFilters.tsx
@@ -86,7 +86,7 @@ export const categoryIsDate = (fieldKey: string) => /date/i.test(fieldKey);
 
 export interface RecordingFiltersProps {
   target: string;
-  breakpoint: 'md' | 'lg' | 'xl' | '2xl';
+  breakpoint?: 'md' | 'lg' | 'xl' | '2xl';
   isArchived: boolean;
   recordings: Recording[];
   filters: RecordingFiltersCategories;

diff --git a/src/app/Settings/Language.tsx b/src/app/Settings/Language.tsx
@@ -69,7 +69,7 @@ const Component = () => {
       aria-label={t('SETTINGS.LANGUAGE.ARIA_LABELS.SELECT') || ''}
       onToggle={handleLanguageToggle}
       onSelect={handleLanguageSelect}
-      selections={localeReadable(i18n.language)}
+      selections={i18n.language}
       isFlipEnabled
       menuAppendTo="parent"
     >

diff --git a/src/app/Settings/SettingsUtils.ts b/src/app/Settings/SettingsUtils.ts
@@ -41,7 +41,11 @@ import { hashCode } from '@app/utils/utils';
 export interface _TransformedUserSetting extends Omit<UserSetting, 'content'> {
   title: string;
   description: React.ReactNode;
+<<<<<<< HEAD
   element: React.FunctionComponentElement<Record<string, never>>;
+=======
+  element: React.ReactNode;
+>>>>>>> 5aa3f5c (chore(ts): fix typescript type-checking errors (#1087))
   orderInGroup: number;
   featureLevel: FeatureLevel;
 }

diff --git a/src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx b/src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx
@@ -48,7 +48,7 @@ import { gridSpans } from '@patternfly/react-core';
 import { createAction, createReducer } from '@reduxjs/toolkit';
 import { getPersistedState } from '../utils';
 
-export const _dashboardConfigVersion = '4';
+export const _version = '4';
 
 // Common action string format: "resource(s)/action"
 export enum DashboardConfigAction {
@@ -253,7 +253,7 @@ export const dashboardConfigTemplateHistoryClearIntent = createAction(
   })
 );
 
-export interface DashboardConfigState {
+export interface DashboardConfig {
   layouts: DashboardLayout[];
   customTemplates: LayoutTemplate[];
   templateHistory: LayoutTemplateRecord[];
@@ -263,20 +263,23 @@ export interface DashboardConfigState {
 
 export const TEMPLATE_HISTORY_LIMIT = 5;
 
-const INITIAL_STATE: DashboardConfigState = getPersistedState('DASHBOARD_CFG', _dashboardConfigVersion, {
+export const defaultDashboardConfigs: DashboardConfig = {
   layouts: [
     {
       name: 'Default',
       cards: [],
       favorite: true,
     },
-  ] as DashboardLayout[],
-  customTemplates: [] as LayoutTemplate[],
-  templateHistory: [] as LayoutTemplateRecord[],
+  ],
+  customTemplates: [],
+  templateHistory: [],
   current: 0,
-});
+  _version: _version,
+};
+
+const INITIAL_STATE: DashboardConfig = getPersistedState('DASHBOARD_CFG', _version, defaultDashboardConfigs);
 
-const getTemplateHistoryIndexForMutation = (state: DashboardConfigState, templateName: string) => {
+const getTemplateHistoryIndexForMutation = (state: DashboardConfig, templateName: string) => {
   const idx = state.templateHistory.findIndex((t) => t.name === templateName && t.vendor === LayoutTemplateVendor.USER);
   return idx;
 };

diff --git a/src/app/Shared/Redux/Configurations/TopologyConfigSlice.tsx b/src/app/Shared/Redux/Configurations/TopologyConfigSlice.tsx
@@ -102,31 +102,33 @@ export interface TopologyConfig {
   displayOptions: DisplayOptions;
 }
 
-export const defaultDisplayOptions: DisplayOptions = {
-  show: {
-    connectionUrl: false,
-    badge: true,
-    status: true,
-    icon: true,
-  },
-  groupings: {
-    realmOnly: false,
-    collapseSingles: false,
+export const defaultTopologyConfig: TopologyConfig = {
+  viewMode: 'graph',
+  displayOptions: {
+    show: {
+      connectionUrl: false,
+      badge: true,
+      status: true,
+      icon: true,
+    },
+    groupings: {
+      realmOnly: false,
+      collapseSingles: false,
+    },
   },
 };
 
-export const showOptions: [string, string][] = Object.keys(defaultDisplayOptions.show).map((k) => {
+export const showOptions: [string, string][] = Object.keys(defaultTopologyConfig.displayOptions.show).map((k) => {
   return [getDisplayFieldName(k), k];
 });
 
-export const groupingOptions: [string, string][] = Object.keys(defaultDisplayOptions.groupings).map((k) => {
-  return [getDisplayFieldName(k), k];
-});
+export const groupingOptions: [string, string][] = Object.keys(defaultTopologyConfig.displayOptions.groupings).map(
+  (k) => {
+    return [getDisplayFieldName(k), k];
+  }
+);
 
-const INITIAL_STATE: TopologyConfig = getPersistedState('TOPOLOGY_CONFIG', _version, {
-  viewMode: 'graph',
-  displayOptions: defaultDisplayOptions,
-});
+const INITIAL_STATE: TopologyConfig = getPersistedState('TOPOLOGY_CONFIG', _version, defaultTopologyConfig);
 
 export const topologyConfigReducer: ReducerWithInitialState<TopologyConfig> = createReducer(
   INITIAL_STATE,