Merge pull request #916 from yaacov/refactor-plan-details-suspend

🧼 Refactor plan details suspend
kubev2v · Feb 14, 2024 · 44b5283 · 44b5283
2 parents d1a1a5e + b8e488e
commit 44b5283
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 40 deletions.
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.tsx
@@ -9,6 +9,7 @@ import {
   useK8sWatchResource,
 } from '@openshift-console/dynamic-plugin-sdk';
 
+import { Suspend } from './components';
 import { PlanDetails, PlanHooks, PlanMappings, PlanVirtualMachines, PlanYAML } from './tabs';
 
 import './PlanDetailsPage.style.css';
@@ -94,13 +95,15 @@ export const PlanDetailsPage: React.FC<PlanDetailsPageProps> = ({ name, namespac
   });
 
   return (
-    <MemoPlanDetailsPage
-      name={name}
-      namespace={namespace}
-      obj={plan}
-      loaded={loaded}
-      loadError={error}
-    />
+    <Suspend obj={plan} loaded={loaded} loadError={error}>
+      <MemoPlanDetailsPage
+        name={name}
+        namespace={namespace}
+        obj={plan}
+        loaded={loaded}
+        loadError={error}
+      />
+    </Suspend>
   );
 };
 PlanDetailsPage.displayName = 'PlanDetailsPage';

diff --git a/...ages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Details/PlanDetails.tsx b/...ages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Details/PlanDetails.tsx
@@ -3,17 +3,14 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { PageSection, Title } from '@patternfly/react-core';
 
-import { Suspend } from '../../components';
 import { PlanDetailsTabProps } from '../../PlanDetailsPage';
 
 export const PlanDetails: React.FC<PlanDetailsTabProps> = ({ plan, loaded, loadError }) => {
   const { t } = useForkliftTranslation();
 
   return (
-    <Suspend obj={plan} loaded={loaded} loadError={loadError}>
-      <PageSection variant="light" className="forklift-page-section--info">
-        <Title headingLevel={'h1'}>{t('Details')}</Title>
-      </PageSection>
-    </Suspend>
+    <PageSection variant="light" className="forklift-page-section--info">
+      <Title headingLevel={'h1'}>{t('Details')}</Title>
+    </PageSection>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx
@@ -5,18 +5,16 @@ import { HookModelGroupVersionKind } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import { PageSection, Title } from '@patternfly/react-core';
 
-import { Suspend } from '../../components';
 import { PlanDetailsTabProps } from '../../PlanDetailsPage';
 
 export const PlanHooks: React.FC<PlanDetailsTabProps> = ({ plan, loaded, loadError }) => {
   const { t } = useForkliftTranslation();
 
   return (
-    <Suspend obj={plan} loaded={loaded} loadError={loadError}>
+    <>
       <PageSection variant="light" className="forklift-page-section--info">
         <Title headingLevel={'h1'}>{t('Hooks')}</Title>
       </PageSection>
-
       <PageSection variant="light" className="forklift-page-section--info">
         {plan?.spec?.vms?.[0]?.hooks?.[0]?.hook && (
           <ResourceLink
@@ -26,6 +24,6 @@ export const PlanHooks: React.FC<PlanDetailsTabProps> = ({ plan, loaded, loadErr
           />
         )}
       </PageSection>
-    </Suspend>
+    </>
   );
 };
diff --git a/...es/forklift-console-plugin/src/modules/Plans/views/details/tabs/Mappings/PlanMappings.tsx b/...es/forklift-console-plugin/src/modules/Plans/views/details/tabs/Mappings/PlanMappings.tsx
@@ -5,18 +5,16 @@ import { NetworkMapModelGroupVersionKind, StorageMapModelGroupVersionKind } from
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
 import { PageSection, Title } from '@patternfly/react-core';
 
-import { Suspend } from '../../components';
 import { PlanDetailsTabProps } from '../../PlanDetailsPage';
 
 export const PlanMappings: React.FC<PlanDetailsTabProps> = ({ plan, loaded, loadError }) => {
   const { t } = useForkliftTranslation();
 
   return (
-    <Suspend obj={plan} loaded={loaded} loadError={loadError}>
+    <>
       <PageSection variant="light" className="forklift-page-section--info">
         <Title headingLevel={'h1'}>{t('Mappings')}</Title>
       </PageSection>
-
       <PageSection variant="light" className="forklift-page-section--info">
         <ResourceLink
           groupVersionKind={NetworkMapModelGroupVersionKind}
@@ -29,6 +27,6 @@ export const PlanMappings: React.FC<PlanDetailsTabProps> = ({ plan, loaded, load
           namespace={plan.spec.map.storage.namespace}
         />
       </PageSection>
-    </Suspend>
+    </>
   );
 };
diff --git a/...nsole-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/PlanVirtualMachines.tsx b/...nsole-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/PlanVirtualMachines.tsx
@@ -3,25 +3,23 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { PageSection, Title } from '@patternfly/react-core';
 
-import { Suspend } from '../../components';
 import { PlanDetailsTabProps } from '../../PlanDetailsPage';
 
 export const PlanVirtualMachines: React.FC<PlanDetailsTabProps> = ({ plan, loaded, loadError }) => {
   const { t } = useForkliftTranslation();
 
   return (
-    <Suspend obj={plan} loaded={loaded} loadError={loadError}>
+    <>
       <PageSection variant="light" className="forklift-page-section--info">
         <Title headingLevel={'h1'}>{t('Virtual machines')}</Title>
       </PageSection>
-
       <PageSection variant="light" className="forklift-page-section--info">
         <ol>
           {plan.spec.vms.map((vm) => (
             <li key={vm.id}>{vm.name}</li>
           ))}
         </ol>
       </PageSection>
-    </Suspend>
+    </>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/YAML/PlanYAML.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/YAML/PlanYAML.tsx
@@ -2,25 +2,11 @@ import React from 'react';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { ResourceYAMLEditor } from '@openshift-console/dynamic-plugin-sdk';
-import { Bullseye } from '@patternfly/react-core';
 
-import { Loading } from '../../components';
 import { PlanDetailsTabProps } from '../../PlanDetailsPage';
 
 export const PlanYAML: React.FC<PlanDetailsTabProps> = ({ plan, loaded, loadError }) => {
   const { t } = useForkliftTranslation();
 
-  return (
-    <React.Suspense
-      fallback={
-        <Bullseye>
-          <Loading />
-        </Bullseye>
-      }
-    >
-      {plan && loaded && !loadError && (
-        <ResourceYAMLEditor header={t('Provider YAML')} initialResource={plan} />
-      )}
-    </React.Suspense>
-  );
+  return <ResourceYAMLEditor header={t('Provider YAML')} initialResource={plan} />;
 };