chore(ts): fix typescript type-checking errors

.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:

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",

package.json

@@ -22,7 +22,7 @@
     "itest": "wait-on -lt 60000 http://localhost:9091 && jest --testMatch='**/itest/**/*.test.(ts|tsx)'",
     "license:check": "license-check-and-add check -f license-config.json",
     "license:apply": "license-check-and-add add -f license-config.json",
-    "lint": "concurrently -c 'auto' 'yarn:format' 'yarn:eslint'",
+    "lint": "concurrently -c 'auto' 'yarn:format' 'yarn:eslint' 'yarn:type-check'",
     "localize": "i18next \"src/**/*.{js,jsx,ts,tsx,json}\" -c ./i18next-parser.config.js",
     "format": "yarn format:check",
     "format:check": "concurrently -c 'auto' 'yarn:license:check' 'yarn:prettier:check'",
@@ -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

@@ -97,7 +97,7 @@
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { filter, first, map, tap } from 'rxjs';
 import {
   DashboardCardDescriptor,
   DashboardCardFC,
   DashboardCardSizes,
@@ -144,14 +144,14 @@
   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

@@ -51,16 +51,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;
   });
@@ -74,33 +80,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(() => {
@@ -110,7 +130,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}
@@ -121,37 +141,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}

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;
   });

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,