fix bug when changing template

akash-network · Oct 19, 2023 · 8fab063 · 8fab063
1 parent 2096287
commit 8fab063
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 23 deletions.
diff --git a/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx b/deploy-web/src/components/newDeploymentWizard/ManifestEdit.tsx
@@ -324,10 +324,12 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
 
       {parsingError && <Alert severity="warning">{parsingError}</Alert>}
 
-      <ViewPanel stickToBottom style={{ overflow: "hidden", margin: smallScreen ? "0 -1rem" : 0 }}>
-        {selectedSdlEditMode === "yaml" && <DynamicMonacoEditor value={editedManifest} onChange={handleTextChange} />}
-        {selectedSdlEditMode === "builder" && <SdlBuilder sdlString={editedManifest} ref={sdlBuilderRef} setEditedManifest={setEditedManifest} />}
-      </ViewPanel>
+      {selectedSdlEditMode === "yaml" && (
+        <ViewPanel stickToBottom style={{ overflow: "hidden", margin: smallScreen ? "0 -1rem" : 0 }}>
+          <DynamicMonacoEditor value={editedManifest} onChange={handleTextChange} />
+        </ViewPanel>
+      )}
+      {selectedSdlEditMode === "builder" && <SdlBuilder sdlString={editedManifest} ref={sdlBuilderRef} setEditedManifest={setEditedManifest} />}
 
       {isDepositingDeployment && (
         <DeploymentDepositModal

diff --git a/deploy-web/src/components/newDeploymentWizard/SdlBuilder.tsx b/deploy-web/src/components/newDeploymentWizard/SdlBuilder.tsx
@@ -8,6 +8,7 @@ import { Alert, Box, Button, CircularProgress } from "@mui/material";
 import { SimpleServiceFormControl } from "../sdl/SimpleServiceFormControl";
 import { useProviderAttributesSchema } from "@src/queries/useProvidersQuery";
 import { importSimpleSdl } from "@src/utils/sdl/sdlImport";
+import { Subscription } from "react-hook-form/dist/utils/createSubject";
 
 interface Props {
   sdlString: string;
@@ -21,7 +22,7 @@ export type SdlBuilderRefType = {
 export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlString, setEditedManifest }, ref) => {
   const [error, setError] = useState(null);
   const formRef = useRef<HTMLFormElement>();
-  const [isLoading, setIsLoading] = useState(true);
+  const [isInit, setIsInit] = useState(false);
   const { control, trigger, watch, setValue } = useForm<SdlBuilderFormValues>({
     defaultValues: {
       services: [{ ...defaultService }]
@@ -45,24 +46,22 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
   }));
 
   useEffect(() => {
+    const { unsubscribe } = watch(data => {
+      const sdl = generateSdl({ services: data.services as Service[] });
+      setEditedManifest(sdl);
+    });
+
     try {
       const services = createAndValidateSdl(sdlString);
       setValue("services", services as Service[]);
     } catch (error) {
       setError("Error importing SDL");
     }
 
-    setIsLoading(false);
-  }, []);
-
-  useEffect(() => {
-    const subscription = watch(data => {
-      const sdl = generateSdl({ services: data.services as Service[] });
-      setEditedManifest(sdl);
-    });
+    setIsInit(true);
 
     return () => {
-      subscription.unsubscribe();
+      unsubscribe();
     };
   }, [watch]);
 
@@ -101,8 +100,8 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
   };
 
   return (
-    <>
-      {isLoading ? (
+    <Box sx={{ paddingBottom: "2rem" }}>
+      {!isInit ? (
         <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "2rem" }}>
           <CircularProgress size="3rem" color="secondary" />
         </Box>
@@ -138,6 +137,6 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
           </Box>
         </form>
       )}
-    </>
+    </Box>
   );
 });
diff --git a/deploy-web/src/components/newDeploymentWizard/TemplateList.tsx b/deploy-web/src/components/newDeploymentWizard/TemplateList.tsx
@@ -34,9 +34,10 @@ const previewTemplateIds = [
 
 type Props = {
   setSelectedTemplate: Dispatch<TemplateCreation>;
+  setEditedManifest: Dispatch<string>;
 };
 
-export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTemplate }) => {
+export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTemplate, setEditedManifest }) => {
   const { templates } = useTemplates();
   const { classes } = useStyles();
   const router = useRouter();
@@ -52,6 +53,7 @@ export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTempla
 
   function selectTemplate(template) {
     setSelectedTemplate(template);
+    setEditedManifest(template.content);
     router.push(UrlService.newDeployment({ step: RouteStepKeys.editDeployment }));
   }
 
@@ -71,6 +73,7 @@ export const TemplateList: React.FunctionComponent<Props> = ({ setSelectedTempla
         description: "Custom uploaded file",
         content: event.target.result as string
       });
+      setEditedManifest(event.target.result as string);
       router.push(UrlService.newDeployment({ step: RouteStepKeys.editDeployment }));
     };
 

diff --git a/deploy-web/src/pages/new-deployment/index.tsx b/deploy-web/src/pages/new-deployment/index.tsx
@@ -54,9 +54,11 @@ const NewDeploymentPage: React.FunctionComponent<Props> = ({}) => {
     if (redeployTemplate) {
       // If it's a redeploy, set the template from local storage
       setSelectedTemplate(redeployTemplate);
+      setEditedManifest(redeployTemplate.content);
     } else if (galleryTemplate) {
       // If it's a deploy from the template gallery, load from template data
       setSelectedTemplate(galleryTemplate as TemplateCreation);
+      setEditedManifest(galleryTemplate.content);
     }
 
     const _activeStep = getStepIndexByParam(router.query.step);
@@ -68,10 +70,6 @@ const NewDeploymentPage: React.FunctionComponent<Props> = ({}) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.query, templates]);
 
-  useEffect(() => {
-    setEditedManifest(selectedTemplate?.content || "");
-  }, [selectedTemplate]);
-
   const getRedeployTemplate = () => {
     let template = null;
     if (router.query.redeploy) {
@@ -148,7 +146,7 @@ const NewDeploymentPage: React.FunctionComponent<Props> = ({}) => {
           <CustomizedSteppers steps={steps} activeStep={activeStep} />
         </div>
 
-        {activeStep === 0 && <TemplateList setSelectedTemplate={c => setSelectedTemplate(c)} />}
+        {activeStep === 0 && <TemplateList setSelectedTemplate={setSelectedTemplate} setEditedManifest={setEditedManifest} />}
         {activeStep === 1 && <ManifestEdit selectedTemplate={selectedTemplate} editedManifest={editedManifest} setEditedManifest={setEditedManifest} />}
         {activeStep === 2 && <CreateLease dseq={router.query.dseq as string} />}
       </Container>