predeploy job name (#3859)

dashboard/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/cards/PreDeployEventCard.tsx

@@ -82,7 +82,7 @@ const PreDeployEventCard: React.FC<Props> = ({
           {renderStatusText(event)}
           <Spacer inline x={1} />
           <Wrapper>
-            <Link to={`/apps/${appName}/events?event_id=${event.id}&service=${appName}-predeploy`} hasunderline>
+            <Link to={`/apps/${appName}/events?event_id=${event.id}&service=predeploy`} hasunderline>
               <Container row>
                 <Icon src={document} height="10px" />
                 <Spacer inline width="5px" />

dashboard/src/main/home/app-dashboard/app-view/tabs/activity-feed/events/focus-views/PredeployEventFocusView.tsx

@@ -21,7 +21,7 @@ const PreDeployEventFocusView: React.FC<Props> = ({
   const { projectId, clusterId, latestProto, deploymentTarget, porterApp } = useLatestRevision();
 
   const appName = latestProto.name
-  const serviceNames = [`${latestProto.name}-predeploy`]
+  const serviceNames = ["predeploy"]
 
   const renderHeaderText = () => {
     switch (event.status) {

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/ServiceList.tsx

@@ -86,6 +86,8 @@ const ServiceList: React.FC<ServiceListProps> = ({
     reset,
     handleSubmit,
     formState: { errors },
+    setError,
+    clearErrors,
   } = useForm<AddServiceFormValues>({
     reValidateMode: "onChange",
     resolver: zodResolver(addServiceFormValidator),
@@ -127,6 +129,20 @@ const ServiceList: React.FC<ServiceListProps> = ({
     });
   }, [fields]);
 
+  useEffect(() => {
+    if (isServiceNameDuplicate(serviceName)) {
+      setError("name", {
+        message: "A service with this name already exists",
+      });
+    } else if (!isPredeploy && serviceName === "predeploy") {
+      setError("name", {
+        message: "predeploy is a reserved service name",
+      });
+    } else {
+      clearErrors("name");
+    }
+  }, [serviceName, isPredeploy])
+
   const isServiceNameDuplicate = (name: string) => {
     return services.some(({ svc: s }) => s.name.value === name);
   };
@@ -256,9 +272,7 @@ const ServiceList: React.FC<ServiceListProps> = ({
           <Button
             type="button"
             onClick={onSubmit}
-            disabled={
-              isServiceNameDuplicate(serviceName) || serviceName?.length > 61
-            }
+            disabled={!!errors.name?.message}
           >
             <I className="material-icons">add</I> Add service
           </Button>