chore(ts): fix typescript type-checking errors

Signed-off-by: Thuan Vo <[email protected]>

.github/workflows/ci.yaml

@@ -43,6 +43,20 @@ jobs:
         cache: 'yarn'
     - uses: bahmutov/npm-install@v1
     - run: yarn eslint:check
+  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:

package.json

@@ -33,7 +33,8 @@
     "build:bundle-analyze": "webpack-bundle-analyzer ./stats.json dist",
     "build:bundle-profile-analyze": "concurrently -c 'auto' 'yarn:build:bundle-*'",
     "yarn:install": "yarn install",
-    "yarn:frzinstall": "yarn install --immutable"
+    "yarn:frzinstall": "yarn install --immutable",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.3.1",

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx

@@ -144,14 +144,14 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
   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(

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx

@@ -30,7 +30,6 @@ import {
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { AutomatedAnalysisNameFilter } from './Filters/AutomatedAnalysisNameFilter';
 import { AutomatedAnalysisTopicFilter } from './Filters/AutomatedAnalysisTopicFilter';
@@ -53,14 +52,13 @@ export interface AutomatedAnalysisFiltersProps {
 
 export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> = ({ updateFilters, ...props }) => {
   const dispatch = useDispatch<StateDispatch>();
-  const { t } = useTranslation();
 
   const currentCategory = useSelector((state: RootState) => {
-    const targetAutomatedAnalysisFilters = state.automatedAnalysisFilters.state.targetFilters.filter(
+    const targetAutomatedAnalysisFilters = state.automatedAnalysisFilters.targetFilters.filter(
       (targetFilter) => targetFilter.target === props.target
     );
     if (!targetAutomatedAnalysisFilters.length) {
-      return t('FILTER_NAME', { ns: 'common' });
+      return 'Name';
     } // Target is not yet loaded
     return targetAutomatedAnalysisFilters[0].selectedCategory;
   });

src/app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisScoreFilter.tsx

@@ -37,7 +37,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;
   });
@@ -111,7 +111,7 @@ export const AutomatedAnalysisScoreFilter: React.FC<AutomatedAnalysisScoreFilter
                 isSmall
                 isInline
                 variant="link"
-                aria-label={t('AutomatedAnalysisScoreFilter.SLIDER.RESET0.LABEL')}
+                aria-label={t('AutomatedAnalysisScoreFilter.SLIDER.RESET0.LABEL') ?? undefined}
                 onClick={on0Reset}
               >
                 0
@@ -122,7 +122,7 @@ export const AutomatedAnalysisScoreFilter: React.FC<AutomatedAnalysisScoreFilter
                 isSmall
                 isInline
                 variant="link"
-                aria-label={t('AutomatedAnalysisScoreFilter.SLIDER.RESET100.LABEL')}
+                aria-label={t('AutomatedAnalysisScoreFilter.SLIDER.RESET100.LABEL') ?? undefined}
                 onClick={on100Reset}
               >
                 100
@@ -135,7 +135,7 @@ export const AutomatedAnalysisScoreFilter: React.FC<AutomatedAnalysisScoreFilter
         areCustomStepsContinuous
         customSteps={steps}
         isInputVisible
-        inputLabel={t('SCORE', { ns: 'common' })}
+        inputLabel={t('SCORE', { ns: 'common' }) ?? undefined}
         inputValue={currentScore}
         value={currentScore}
         onChange={onChange}

src/app/Dashboard/Dashboard.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 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,
@@ -47,7 +47,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,
@@ -65,7 +65,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());
     }

src/app/Recordings/RecordingFilters.tsx

@@ -64,7 +64,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;

src/app/Settings/Language.tsx

@@ -47,7 +47,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"
     >

src/app/Settings/SettingsUtils.ts

@@ -19,7 +19,7 @@ import { hashCode } from '@app/utils/utils';
 export interface _TransformedUserSetting extends Omit<UserSetting, 'content'> {
   title: string;
   description: React.ReactNode;
-  element: React.FC<Record<string, never>>;
+  element: React.ReactNode;
   orderInGroup: number;
   featureLevel: FeatureLevel;
 }

src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx

@@ -26,7 +26,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 {
@@ -231,7 +231,7 @@ export const dashboardConfigTemplateHistoryClearIntent = createAction(
   })
 );
 
-export interface DashboardConfigState {
+export interface DashboardConfig {
   layouts: DashboardLayout[];
   customTemplates: LayoutTemplate[];
   templateHistory: LayoutTemplateRecord[];
@@ -241,20 +241,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;
 };

src/app/Shared/Redux/Configurations/TopologyConfigSlice.tsx

@@ -80,31 +80,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,