Refactor components to use common RemoteLoaderComponent

caraml-dev · Sep 23, 2022 · d1e93e0 · d1e93e0
1 parent 34d913a
commit d1e93e0
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 82 deletions.
diff --git a/ui/src/components/experiments/ExperimentEngineLoaderComponent.js b/ui/src/components/experiments/ExperimentEngineLoaderComponent.js
diff --git a/...mbler/StandardEnsemblerLoaderComponent.js → ...remote_component/RemoteLoaderComponent.js b/...mbler/StandardEnsemblerLoaderComponent.js → ...remote_component/RemoteLoaderComponent.js
@@ -17,9 +17,10 @@ const LoadDynamicScript = ({ url, setReady, setFailed }) => {
 };
 
 // Dynamic Script Loading component wrapper
-export const StandardEnsemblerLoaderComponent = ({
+export const RemoteLoaderComponent = ({
   FallbackView,
   remoteUi,
+  componentName,
   children,
 }) => {
   const [urlReady, setUrlReady] = useState(false);
@@ -28,9 +29,9 @@ export const StandardEnsemblerLoaderComponent = ({
   const [configFailed, setConfigFailed] = useState(false);
 
   return urlFailed ? (
-    <FallbackView text={"Failed to load Standard Ensembler for the selected Custom Experiment Engine"} />
+    <FallbackView text={`Failed to load ${componentName}`} />
   ) : configFailed ? (
-    <FallbackView text={"Failed to load Standard Ensembler config for the selected Custom Experiment Engine"} />
+    <FallbackView text={`Failed to load ${componentName} Config`} />
   ) : !urlReady || !configReady ? (
     <>
       {!!remoteUi.url && !urlReady && (
@@ -47,11 +48,11 @@ export const StandardEnsemblerLoaderComponent = ({
           url={remoteUi.config}
         />
       )}
-      <FallbackView text={"Loading Standard Ensembler for the selected Custom Experiment Engine..."} />
+      <FallbackView text={`Loading ${componentName}...`} />
     </>
   ) : (
     children
   );
 };
 
-export default StandardEnsemblerLoaderComponent;
+export default RemoteLoaderComponent;
diff --git a/ui/src/experiment/ExperimentsRouter.js b/ui/src/experiment/ExperimentsRouter.js
@@ -3,7 +3,7 @@ import {
   EuiPageTemplate,
 } from "@elastic/eui";
 import { RemoteComponent } from "../components/remote_component/RemoteComponent";
-import { ExperimentEngineLoaderComponent } from "../components/experiments/ExperimentEngineLoaderComponent";
+import RemoteLoaderComponent from "../components/remote_component/RemoteLoaderComponent";
 
 import { useConfig } from "../config";
 
@@ -32,16 +32,18 @@ const RemoteRouter = ({ projectId }) => {
   return (
     <React.Suspense
       fallback={<FallbackView text="Loading Experiment Engine config" />}>
-      <ExperimentEngineLoaderComponent
+      <RemoteLoaderComponent
         FallbackView={FallbackView}
-        experimentEngine={defaultExperimentEngine}>
+        remoteUi={defaultExperimentEngine}
+        componentName="Experiment Engine"
+      >
         <RemoteComponent
           scope={defaultExperimentEngine.name}
           name="./ExperimentsLandingPage"
           fallback={<FallbackView text="Loading Experiment Engine" />}
           projectId={projectId}
         />
-      </ExperimentEngineLoaderComponent>
+      </RemoteLoaderComponent>
     </React.Suspense>
   );
 };

diff --git a/ui/src/router/components/configuration/components/ExperimentConfigSection.js b/ui/src/router/components/configuration/components/ExperimentConfigSection.js
@@ -3,7 +3,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel } from "@elastic/eui";
 
 import { ConfigSectionPanel } from "../../../../components/config_section";
 import { RemoteComponent } from "../../../../components/remote_component/RemoteComponent";
-import { ExperimentEngineLoaderComponent } from "../../../../components/experiments/ExperimentEngineLoaderComponent";
+import RemoteLoaderComponent from "../../../../components/remote_component/RemoteLoaderComponent";
 import ExperimentEngineContext from "../../../../providers/experiments/context";
 
 import { StandardExperimentConfigGroup } from "./experiment_config_section/StandardExperimentConfigGroup";
@@ -29,17 +29,19 @@ const CustomExperimentConfigView = ({ projectId, remoteUi, config }) => {
   return (
     <React.Suspense
       fallback={<FallbackView text="Loading Experiment Engine config" />}>
-      <ExperimentEngineLoaderComponent
+      <RemoteLoaderComponent
         FallbackView={FallbackView}
-        experimentEngine={remoteUi}>
+        remoteUi={remoteUi}
+        componentName="Experiment Engine"
+      >
         <RemoteComponent
           scope={remoteUi.name}
           name="./ExperimentEngineConfigDetails"
           fallback={<FallbackView text="Loading Experiment Engine config" />}
           projectId={projectId}
           config={config}
         />
-      </ExperimentEngineLoaderComponent>
+      </RemoteLoaderComponent>
     </React.Suspense>
   );
 };

diff --git a/...er/components/configuration/components/standard_config_section/StandardConfigViewGroup.js b/...er/components/configuration/components/standard_config_section/StandardConfigViewGroup.js
@@ -5,7 +5,7 @@ import { TreatmentMappingConfigSection } from "./TreatmentMappingConfigSection";
 import { FallbackRouteConfigSection } from "./FallbackRouteConfigSection";
 import ExperimentEngineContext from "../../../../../providers/experiments/context";
 import { Panel } from "../../../form/components/Panel";
-import StandardEnsemblerLoaderComponent from "../../../../../components/ensembler/StandardEnsemblerLoaderComponent";
+import RemoteLoaderComponent from "../../../../../components/remote_component/RemoteLoaderComponent";
 import { RemoteComponent } from "../../../../../components/remote_component/RemoteComponent";
 
 const FallbackView = ({ text }) => (
@@ -27,9 +27,11 @@ const StandardEnsemblerWithCustomExperimentEngineConfigView = ({
   return (
     <React.Suspense
       fallback={<FallbackView text="Loading Standard Ensembler config for the selected Custom Experiment Engine" />}>
-      <StandardEnsemblerLoaderComponent
+      <RemoteLoaderComponent
         FallbackView={FallbackView}
-        remoteUi={remoteUi}>
+        remoteUi={remoteUi}
+        componentName="Standard Ensembler"
+      >
         <RemoteComponent
           scope={remoteUi.name}
           name="./StandardEnsemblerConfigDetails"
@@ -38,7 +40,7 @@ const StandardEnsemblerWithCustomExperimentEngineConfigView = ({
           routes={routes}
           routeNamePath={routeNamePath}
         />
-      </StandardEnsemblerLoaderComponent>
+      </RemoteLoaderComponent>
     </React.Suspense>
   );
 };

diff --git a/...ponents/form/components/ensembler_config/standard_ensembler/StandardEnsemblerFormGroup.js b/...ponents/form/components/ensembler_config/standard_ensembler/StandardEnsemblerFormGroup.js
@@ -10,7 +10,7 @@ import { useOnChangeHandler } from "../../../../../../components/form/hooks/useO
 import ExperimentEngineContext from "../../../../../../providers/experiments/context";
 import { Panel } from "../../Panel";
 import { RemoteComponent } from "../../../../../../components/remote_component/RemoteComponent";
-import StandardEnsemblerLoaderComponent from "../../../../../../components/ensembler/StandardEnsemblerLoaderComponent";
+import RemoteLoaderComponent from "../../../../../../components/remote_component/RemoteLoaderComponent";
 
 const FallbackView = ({ text }) => (
   <EuiFlexItem grow={true}>
@@ -33,9 +33,11 @@ const StandardEnsemblerWithCustomExperimentEnginePanel = ({
   return (
     <React.Suspense
       fallback={<FallbackView text="Loading Standard Ensembler config for the selected Custom Experiment Engine" />}>
-      <StandardEnsemblerLoaderComponent
+      <RemoteLoaderComponent
         FallbackView={FallbackView}
-        remoteUi={remoteUi}>
+        remoteUi={remoteUi}
+        componentName="Standard Ensembler"
+      >
         <RemoteComponent
           scope={remoteUi.name}
           name="./EditStandardEnsemblerConfig"
@@ -46,7 +48,7 @@ const StandardEnsemblerWithCustomExperimentEnginePanel = ({
           onChange={onChange}
           errors={errors}
         />
-      </StandardEnsemblerLoaderComponent>
+      </RemoteLoaderComponent>
     </React.Suspense>
   );
 };

diff --git a/ui/src/router/components/form/components/experiment_config/ExperimentConfigPanel.js b/ui/src/router/components/form/components/experiment_config/ExperimentConfigPanel.js
@@ -3,7 +3,7 @@ import { EuiFlexItem, EuiSpacer } from "@elastic/eui";
 
 import { RemoteComponent } from "../../../../../components/remote_component/RemoteComponent";
 import ExperimentEngineContext from "../../../../../providers/experiments/context";
-import { ExperimentEngineLoaderComponent } from "../../../../../components/experiments/ExperimentEngineLoaderComponent";
+import RemoteLoaderComponent from "../../../../../components/remote_component/RemoteLoaderComponent";
 import { Panel } from "../Panel";
 
 import { StandardExperimentConfigGroup } from "./StandardExperimentConfigGroup";
@@ -28,9 +28,11 @@ const CustomExperimentEngineConfigGroup = ({
   return (
     <React.Suspense
       fallback={<FallbackView text="Loading Experiment Engine config" />}>
-      <ExperimentEngineLoaderComponent
+      <RemoteLoaderComponent
         FallbackView={FallbackView}
-        experimentEngine={remoteUi}>
+        remoteUi={remoteUi}
+        componentName="Experiment Engine"
+      >
         <RemoteComponent
           scope={remoteUi.name}
           name="./EditExperimentEngineConfig"
@@ -40,7 +42,7 @@ const CustomExperimentEngineConfigGroup = ({
           onChangeHandler={onChangeHandler}
           errors={errors}
         />
-      </ExperimentEngineLoaderComponent>
+      </RemoteLoaderComponent>
     </React.Suspense>
   );
 };