CONSOLE-5055: AsyncComponent type improvements

frontend/packages/console-app/src/components/pdb/PDBFormPage.tsx

@@ -18,7 +18,7 @@ import { getPDBResource } from './utils/get-pdb-resources';
 
 const LAST_VIEWED_EDITOR_TYPE_USERSETTING_KEY = 'console.pdbForm.editor.lastView';
 
-export const PDBFormPage: FC<{}> = () => {
+export const PDBFormPage: FC = () => {
   const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();

frontend/packages/console-shared/src/components/dashboard/status-card/OperatorStatusBody.tsx

@@ -82,11 +82,11 @@ type OperatorsSectionProps = {
   Row: ComponentType<
     OperatorRowProps & {
       LoadingComponent: () => JSX.Element;
-      Component: ComponentType<OperatorRowProps> | LazyLoader<OperatorRowProps>;
+      Component: ComponentType<OperatorRowProps> | LazyLoader<ComponentType<OperatorRowProps>>;
       key: string;
       isResolved: boolean;
     }
   >;
   isResolved: boolean;
-  Component: ComponentType<OperatorRowProps> | LazyLoader<OperatorRowProps>;
+  Component: ComponentType<OperatorRowProps> | LazyLoader<ComponentType<OperatorRowProps>>;
 };

frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx

@@ -11,6 +11,10 @@ import { useTranslation } from 'react-i18next';
 import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
 import { ErrorDetailsModal } from '@console/shared/src/components/modals/ErrorDetailsModal';
 
+const reloadPage = () => {
+  window.location.reload();
+};
+
 /**
  * Standard fallback catch -- expected to take up the whole page.
  */
@@ -26,7 +30,7 @@ const ErrorBoundaryFallbackPage: FC<ErrorBoundaryFallbackProps> = (props) => {
         <ActionList>
           <ActionListGroup>
             <ActionListItem>
-              <Button variant="primary" onClick={() => window.location.reload()}>
+              <Button variant="primary" data-test="error-reload-page" onClick={reloadPage}>
                 {t('console-shared~Reload page')}
               </Button>
             </ActionListItem>

frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import { useRef, useState, useCallback } from 'react';
+import { Language } from '@patternfly/react-code-editor';
 import { css } from '@patternfly/react-styles';
 import { FormikValues, useField, useFormikContext } from 'formik';
 import { isEmpty } from 'lodash';
@@ -86,14 +87,14 @@ const CodeEditorField: FC<CodeEditorFieldProps> = ({
                 (c) => c.CodeEditor,
               )
             }
-            forwardRef={editorRef}
+            ref={editorRef}
             value={field.value}
             minHeight={minHeight ?? '200px'}
             onChange={(yaml: string) => setFieldValue(name, yaml)}
             onSave={onSave}
             showShortcuts={showShortcuts}
             isMinimapVisible={isMinimapVisible}
-            language={language}
+            language={language as Language}
             toolbarLinks={[
               hasSidebarContent && (
                 <ToggleSidebarButton

frontend/packages/console-shared/src/components/formik-fields/field-types.ts

@@ -1,3 +1,5 @@
+import { ReactNode, ReactElement, CSSProperties } from 'react';
+import { Language } from '@patternfly/react-code-editor';
 import { ValidatedOptions, TextInputTypes, gridItemSpanValueShape } from '@patternfly/react-core';
 import { JSONSchema7 } from 'json-schema';
 import { ConsoleSelectProps } from '@console/internal/components/utils/console-select';
@@ -7,7 +9,7 @@ import { RowRendererProps } from './multi-column-field/MultiColumnFieldRow';
 export interface FieldProps {
   name: string;
   required?: boolean;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   isReadOnly?: boolean;
   className?: string;
   isDisabled?: boolean;
@@ -26,14 +28,14 @@ export interface BaseInputFieldProps extends FieldProps {
   onChange?: (event) => void;
   onBlur?: (event) => void;
   autoComplete?: string;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
-  helpTextInvalid?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
+  helpTextInvalid?: ReactNode;
 }
 
 export interface GroupInputProps extends BaseInputFieldProps {
-  beforeInput?: React.ReactNode;
-  afterInput?: React.ReactNode;
+  beforeInput?: ReactNode;
+  afterInput?: ReactNode;
   groupTextType?: GroupTextType;
 }
 
@@ -43,8 +45,8 @@ export interface TextAreaProps extends FieldProps {
   onBlur?: (event) => void;
   rows?: number;
   resizeOrientation?: 'vertical' | 'horizontal' | 'both';
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export enum GroupTextType {
@@ -56,8 +58,8 @@ export interface CheckboxFieldProps extends FieldProps {
   formLabel?: string;
   value?: string;
   onChange?: (val: boolean) => void;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export interface SearchInputFieldProps extends BaseInputFieldProps {
@@ -72,8 +74,8 @@ export interface DropdownFieldProps extends FieldProps {
   disabled?: ConsoleSelectProps['disabled'];
   autocompleteFilter?: ConsoleSelectProps['autocompleteFilter'];
   onChange?: (value: string) => void;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export type FormSelectFieldOption<T = any> = {
@@ -87,23 +89,23 @@ export interface FormSelectFieldProps extends FieldProps {
   isDisabled?: boolean;
   options: FormSelectFieldOption[];
   onChange?: (selectedValue: any) => void;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export interface EnvironmentFieldProps extends FieldProps {
   obj: K8sResourceKind;
   envs?: (NameValuePair | NameValueFromPair)[];
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export interface ResourceLimitFieldProps extends FieldProps {
   unitName: string;
   unitOptions: object;
   fullWidth?: boolean;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export interface MultiColumnFieldProps extends FieldProps {
@@ -112,29 +114,29 @@ export interface MultiColumnFieldProps extends FieldProps {
   emptyMessage?: string;
   headers: ({ name: string; required: boolean } | string)[];
   complexFields?: boolean[];
-  children?: React.ReactNode;
+  children?: ReactNode;
   spans?: gridItemSpanValueShape[];
-  rowRenderer?: (row: RowRendererProps) => React.ReactNode;
+  rowRenderer?: (row: RowRendererProps) => ReactNode;
   disableDeleteRow?: boolean;
   tooltipDeleteRow?: string;
   disableAddRow?: boolean;
   hideAddRow?: boolean;
   tooltipAddRow?: string;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export interface CodeEditorFieldProps extends FieldProps {
   model?: K8sKind;
   minHeight?: string;
-  language?: string;
+  language?: keyof typeof Language;
   schema?: JSONSchema7;
   showSamples: boolean;
   showShortcuts?: boolean;
   isMinimapVisible?: boolean;
   onSave?: () => void;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: string;
+  helpText?: string;
 }
 
 export interface NameValuePair {
@@ -162,30 +164,30 @@ export interface SecretKeyRef {
 }
 
 export interface RadioButtonFieldProps extends FieldProps {
-  value: React.ReactText;
-  description?: React.ReactNode;
-  onChange?: (value: React.ReactText) => void;
+  value: string | number;
+  description?: ReactNode;
+  onChange?: (value: string | number) => void;
   isChecked?: boolean;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export interface RadioGroupFieldProps extends FieldProps {
   isInline?: boolean;
-  labelIcon?: React.ReactElement;
+  labelIcon?: ReactElement;
   options: RadioGroupOption[];
-  onChange?: (value: React.ReactText) => void;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  onChange?: (value: string) => void;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export interface RadioGroupOption {
-  value: React.ReactText;
-  label: React.ReactNode;
+  value: string;
+  label: ReactNode;
   isDisabled?: boolean;
   isChecked?: boolean;
-  children?: React.ReactNode;
-  activeChildren?: React.ReactElement;
+  children?: ReactNode;
+  activeChildren?: ReactElement;
 }
 
 export interface SelectInputOption {
@@ -203,8 +205,8 @@ export interface SelectInputFieldProps extends FieldProps {
   toggleOnSelection?: boolean;
   placeholderText?: string;
   onChange?: (selection: string) => void;
-  label?: React.ReactNode;
-  helpText?: React.ReactNode;
+  label?: ReactNode;
+  helpText?: ReactNode;
 }
 
 export interface SingleDropdownFieldProps extends SelectInputFieldProps {

frontend/packages/console-shared/src/components/modals/ErrorDetailsModal.tsx

@@ -9,7 +9,7 @@ import {
   ModalVariant,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
+import type { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
 import { CopyToClipboard } from '@console/internal/components/utils/copy-to-clipboard';
 import { getReportBugLink } from '@console/internal/module/k8s/cluster-settings';
 import { ClusterVersionKind } from '@console/internal/module/k8s/types';
@@ -57,7 +57,11 @@ export const ErrorDetailsModal: FC<ErrorDetailsModalProps> = ({ buttonProps, ...
 
   return (
     <>
-      <Button onClick={() => setOpen(true)} {...buttonProps}>
+      <Button
+        onClick={() => setOpen(true)}
+        data-test="error-details-modal-show-details"
+        {...buttonProps}
+      >
         {t('Show details')}
       </Button>
       <Modal variant={ModalVariant.large} isOpen={isOpen} onClose={() => setOpen(false)}>

frontend/packages/console-shared/src/hooks/version.ts

@@ -1,16 +1,13 @@
 import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { ClusterVersionModel } from '@console/internal/models';
-import { referenceForModel, ClusterVersionKind } from '@console/internal/module/k8s';
-import { getFlagsObject } from '@console/internal/reducers/features';
-import { RootState } from '@console/internal/redux';
+import { referenceForModel } from '@console/internal/module/k8s/k8s-ref';
+import type { ClusterVersionKind } from '@console/internal/module/k8s/types';
 import { FLAGS } from '../constants';
-
-const getClusterVersionFlag = (state: RootState) => getFlagsObject(state)?.[FLAGS.CLUSTER_VERSION];
+import { useFlag } from './flag';
 
 export const useClusterVersion = (): ClusterVersionKind => {
-  const isClusterVersion = useSelector(getClusterVersionFlag);
+  const isClusterVersion = useFlag(FLAGS.CLUSTER_VERSION);
   const resource = isClusterVersion
     ? { kind: referenceForModel(ClusterVersionModel), name: 'version', isList: false }
     : null;

frontend/packages/dev-console/src/components/import/import-types.ts

@@ -1,3 +1,4 @@
+import { ComponentType } from 'react';
 import { ValidatedOptions } from '@patternfly/react-core';
 import { WatchK8sResultsObject } from '@console/dynamic-plugin-sdk';
 import { GitProvider } from '@console/git-service/src';
@@ -349,7 +350,7 @@ export interface ImportData {
   type: ImportTypes;
   title: string;
   buildStrategy: string;
-  loader: LazyLoader<GitImportFormProps | SourceToImageFormProps>;
+  loader: LazyLoader<ComponentType<GitImportFormProps> | ComponentType<SourceToImageFormProps>>;
 }
 
 export enum TerminationType {

frontend/packages/operator-lifecycle-manager/src/components/operand/create-operand.tsx

@@ -26,7 +26,6 @@ import {
   hasNoFields,
   prune,
 } from '@console/shared/src/components/dynamic-form/utils';
-import { ErrorBoundaryPage } from '@console/shared/src/components/error';
 import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import { SyncedEditor } from '@console/shared/src/components/synced-editor';
 import { EditorType } from '@console/shared/src/components/synced-editor/editor-toggle';
@@ -162,12 +161,10 @@ const CreateOperandPage: FC = () => {
       </DocumentTitle>
       <ModelStatusBox groupVersionKind={params.plural}>
         {createResourceExtension ? (
-          <ErrorBoundaryPage>
-            <AsyncComponent
-              loader={createResourceExtension.properties.component}
-              namespace={params.ns}
-            />
-          </ErrorBoundaryPage>
+          <AsyncComponent
+            loader={createResourceExtension.properties.component}
+            namespace={params.ns}
+          />
         ) : (
           <CreateOperand
             initialEditorType={EditorType.Form}

frontend/public/components/__tests__/create-yaml.spec.tsx

@@ -7,8 +7,8 @@ import { PodModel, ConfigMapModel } from '../../models';
 import { useResolvedExtensions } from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions';
 
 jest.mock('../utils/async', () => ({
-  AsyncComponent: ({ initialResource, header, create, kind }) =>
-    `YAML Editor: ${header} (${create ? 'Create' : 'Edit'} ${kind}) - Resource: ${JSON.stringify(
+  AsyncComponent: ({ initialResource, header, create }) =>
+    `YAML Editor: ${header} (${create ? 'Create' : 'Edit'}) - Resource: ${JSON.stringify(
       initialResource,
     )}`,
 }));