Add lazy loading to modals and remove duplicate types

Author: sg00dwin

frontend/packages/console-app/src/actions/creators/hpa-factory.ts

@@ -15,7 +15,7 @@ import {
   ClusterServiceVersionModel,
   ClusterServiceVersionKind,
 } from '@console/operator-lifecycle-manager';
-import { DeleteHPAModalOverlay } from '@console/shared/src/components/hpa/DeleteHPAModal';
+import { LazyDeleteHPAModalOverlay } from '@console/shared/src/components/hpa';
 import { isHelmResource } from '@console/shared/src/utils/helm-utils';
 import { doesHpaMatch } from '@console/shared/src/utils/hpa-utils';
 import { isOperatorBackedService } from '@console/shared/src/utils/operator-utils';
@@ -100,7 +100,7 @@ export const useHPAActions = (kindObj: K8sKind, resource: K8sResourceKind) => {
         label: i18next.t('console-app~Remove HorizontalPodAutoscaler'),
         insertBefore: 'delete-pdb',
         cta: () => {
-          launchModal(DeleteHPAModalOverlay, {
+          launchModal(LazyDeleteHPAModalOverlay, {
             workload: resource,
             hpa: relatedHPAs[0],
           });

frontend/packages/console-shared/src/components/hpa/DeleteHPAModal.tsx

@@ -20,11 +20,6 @@ import {
   K8sResourceCommon,
 } from '@console/internal/module/k8s';
 
-type DeleteHPAModalProps = ModalComponentProps & {
-  hpa: HorizontalPodAutoscalerKind;
-  workload: K8sResourceCommon;
-};
-
 const DeleteHPAModal: FC<DeleteHPAModalProps> = ({ close, cancel, hpa, workload }) => {
   const [submitError, setSubmitError] = useState<string>(null);
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -90,7 +85,7 @@ const DeleteHPAModal: FC<DeleteHPAModalProps> = ({ close, cancel, hpa, workload
   );
 };
 
-export const DeleteHPAModalOverlay: OverlayComponent<DeleteHPAModalOverlayProps> = (props) => {
+export const DeleteHPAModalOverlay: OverlayComponent<DeleteHPAModalProps> = (props) => {
   return (
     <ModalWrapper blocking onClose={props.closeOverlay}>
       <DeleteHPAModal
@@ -103,7 +98,7 @@ export const DeleteHPAModalOverlay: OverlayComponent<DeleteHPAModalOverlayProps>
   );
 };
 
-type DeleteHPAModalOverlayProps = {
+type DeleteHPAModalProps = ModalComponentProps & {
   hpa: HorizontalPodAutoscalerKind;
   workload: K8sResourceCommon;
 };

frontend/packages/console-shared/src/components/hpa/index.ts

@@ -1 +1,10 @@
+import { lazy } from 'react';
+
 export { DeleteHPAModalOverlay } from './DeleteHPAModal';
+
+// Lazy-loaded OverlayComponent for DeleteHPAModal
+export const LazyDeleteHPAModalOverlay = lazy(() =>
+  import('./DeleteHPAModal' /* webpackChunkName: "delete-hpa-modal" */).then((m) => ({
+    default: m.DeleteHPAModalOverlay,
+  })),
+);

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

@@ -72,9 +72,7 @@ export const ConsolePluginModal = (props: ConsolePluginModalProps) => {
   );
 };
 
-export const ConsolePluginModalOverlay: OverlayComponent<ConsolePluginModalOverlayProps> = (
-  props,
-) => {
+export const ConsolePluginModalOverlay: OverlayComponent<ConsolePluginModalProps> = (props) => {
   return (
     <ModalWrapper blocking onClose={props.closeOverlay}>
       <ConsolePluginModal
@@ -89,13 +87,6 @@ export const ConsolePluginModalOverlay: OverlayComponent<ConsolePluginModalOverl
   );
 };
 
-type ConsolePluginModalOverlayProps = {
-  consoleOperatorConfig: K8sResourceKind;
-  csvPluginsCount?: number;
-  pluginName: string;
-  trusted: boolean;
-};
-
 export type ConsolePluginModalProps = {
   consoleOperatorConfig: K8sResourceKind;
   csvPluginsCount?: number;

frontend/packages/console-shared/src/components/modals/index.ts

@@ -1,3 +1,12 @@
+import { lazy } from 'react';
+
+// Lazy-loaded OverlayComponent for ConsolePluginModal
+export const LazyConsolePluginModalOverlay = lazy(() =>
+  import('./ConsolePluginModal' /* webpackChunkName: "console-plugin-modal" */).then((m) => ({
+    default: m.ConsolePluginModalOverlay,
+  })),
+);
+
 export const consolePluginModal = (props) =>
   import('./ConsolePluginModal' /* webpackChunkName: "shared-modals" */).then((m) =>
     m.ConsolePluginModalOverlay(props),

frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx

@@ -30,6 +30,7 @@ import {
   useAccessReviewAllowed,
   useAccessReview,
 } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/lib-core';
 import { Conditions, ConditionTypes } from '@console/internal/components/conditions';
 import { ResourceEventStream } from '@console/internal/components/events';
@@ -77,7 +78,7 @@ import { DocumentTitle } from '@console/shared/src/components/document-title/Doc
 import { withFallback } from '@console/shared/src/components/error';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ExternalLink } from '@console/shared/src/components/links/ExternalLink';
-import { consolePluginModal } from '@console/shared/src/components/modals';
+import { LazyConsolePluginModalOverlay } from '@console/shared/src/components/modals';
 import { RedExclamationCircleIcon } from '@console/shared/src/components/status/icons';
 import { CONSOLE_OPERATOR_CONFIG_NAME } from '@console/shared/src/constants';
 import { useActiveNamespace } from '@console/shared/src/hooks/redux-selectors';
@@ -246,6 +247,7 @@ const ConsolePlugins: FC<ConsolePluginsProps> = ({ csvPlugins, trusted }) => {
   };
   const [consoleOperatorConfig] = useK8sWatchResource<K8sResourceKind>(console);
   const { t } = useTranslation();
+  const launchModal = useOverlay();
   const [canPatchConsoleOperatorConfig] = useAccessReview({
     group: ConsoleOperatorConfigModel.apiGroup,
     resource: ConsoleOperatorConfigModel.plural,
@@ -273,8 +275,9 @@ const ConsolePlugins: FC<ConsolePluginsProps> = ({ csvPlugins, trusted }) => {
                   type="button"
                   isInline
                   onClick={() =>
-                    consolePluginModal({
+                    launchModal(LazyConsolePluginModalOverlay, {
                       consoleOperatorConfig,
+                      csvPluginsCount,
                       pluginName,
                       trusted,
                     })