fix(deploy-web): handle sdl parsing error in sdl builder (#228)

akash-network · Jun 5, 2024 · 5da2bc9 · 5da2bc9
1 parent 3f7193a
commit 5da2bc9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/apps/deploy-web/src/components/new-deployment/ManifestEdit.tsx
@@ -267,6 +267,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
           onClick={() => onModeChange("builder")}
           size="sm"
           className="flex-grow rounded-e-none sm:flex-grow-0"
+          disabled={!!parsingError && selectedSdlEditMode === "yaml"}
         >
           Builder
         </Button>

diff --git a/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx b/apps/deploy-web/src/components/new-deployment/SdlBuilder.tsx
@@ -40,7 +40,7 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
     name: "services",
     keyName: "id"
   });
-  const { services: _services } = watch();
+  const { services: _services = [] } = watch();
   const { data: gpuModels } = useGpuModels();
   const [serviceCollapsed, setServiceCollapsed] = useState([]);
 
@@ -115,21 +115,22 @@ export const SdlBuilder = React.forwardRef<SdlBuilderRefType, Props>(({ sdlStrin
         </div>
       ) : (
         <form ref={formRef} autoComplete="off">
-          {services.map((service, serviceIndex) => (
-            <SimpleServiceFormControl
-              key={service.id}
-              serviceIndex={serviceIndex}
-              gpuModels={gpuModels}
-              setValue={setValue}
-              _services={_services as Service[]}
-              control={control}
-              trigger={trigger}
-              onRemoveService={onRemoveService}
-              serviceCollapsed={serviceCollapsed}
-              setServiceCollapsed={setServiceCollapsed}
-              hasSecretOption={false}
-            />
-          ))}
+          {_services &&
+            services.map((service, serviceIndex) => (
+              <SimpleServiceFormControl
+                key={service.id}
+                serviceIndex={serviceIndex}
+                gpuModels={gpuModels}
+                setValue={setValue}
+                _services={_services as Service[]}
+                control={control}
+                trigger={trigger}
+                onRemoveService={onRemoveService}
+                serviceCollapsed={serviceCollapsed}
+                setServiceCollapsed={setServiceCollapsed}
+                hasSecretOption={false}
+              />
+            ))}
 
           {error && (
             <Alert variant="destructive" className="mt-4">

diff --git a/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx b/apps/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
@@ -66,7 +66,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
   const muiTheme = useMuiTheme();
   const isDesktop = useMediaQuery(muiTheme.breakpoints.up("sm"));
   const expanded = !serviceCollapsed.some(x => x === serviceIndex);
-  const currentService: Service = _services[serviceIndex] || ({} as any);
+  const currentService: Service = _services[serviceIndex];
   const _isEditingEnv = serviceIndex === isEditingEnv;
   const _isEditingCommands = serviceIndex === isEditingCommands;
   const _isEditingExpose = serviceIndex === isEditingExpose;
@@ -81,6 +81,8 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
       }
     });
   };
+
+  if (!currentService) return null;
 
   return (
     <Collapsible open={expanded} onOpenChange={onExpandClick}>