start command is grayed out if it is specified in porter yaml

dashboard/src/main/home/app-dashboard/new-app-flow/JobTabs.tsx

@@ -24,9 +24,10 @@ const JobTabs: React.FC<Props> = ({
         <Input
           label="Start command"
           placeholder="ex: sh start.sh"
-          value={service.startCommand}
+          disabled={service.startCommand.readOnly}
+          value={service.startCommand.value}
           width="300px"
-          setValue={(e) => { editService({ ...service, startCommand: e }) }}
+          setValue={(e) => { editService({ ...service, startCommand: { readOnly: false, value: e } }) }}
         />
         <Spacer y={1} />
         <Input

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -127,11 +127,11 @@ const NewAppFlow: React.FC<Props> = ({ ...props }) => {
       const newServices = [];
       for (const [name, app] of Object.entries(porterYaml.apps)) {
         if (app.type) {
-          newServices.push(createDefaultService(name, app.type))
+          newServices.push(createDefaultService(name, app.type, { readOnly: true, value: app.run }))
         } else if (name.includes('web')) {
-          newServices.push(createDefaultService(name, 'web'))
+          newServices.push(createDefaultService(name, 'web', { readOnly: true, value: app.run }))
         } else {
-          newServices.push(createDefaultService(name, 'worker'))
+          newServices.push(createDefaultService(name, 'worker', { readOnly: true, value: app.run }))
         }
       }
       setFormState({ ...formState, serviceList: [...formState.serviceList, ...newServices] });

dashboard/src/main/home/app-dashboard/new-app-flow/Services.tsx

@@ -99,7 +99,7 @@ const Services: React.FC<ServicesProps> = ({ services, setServices }) => {
             onClick={() => {
               setServices([
                 ...services,
-                createDefaultService(serviceName, serviceType),
+                createDefaultService(serviceName, serviceType, { readOnly: false, value: '' }),
               ]);
               setShowAddServiceModal(false);
               setServiceName("");

dashboard/src/main/home/app-dashboard/new-app-flow/WebTabs.tsx

@@ -24,9 +24,10 @@ const WebTabs: React.FC<Props> = ({
         <Input
           label="Start command"
           placeholder="ex: sh start.sh"
-          value={service.startCommand}
+          value={service.startCommand.value}
           width="300px"
-          setValue={(e) => { editService({ ...service, startCommand: e }) }}
+          disabled={service.startCommand.readOnly}
+          setValue={(e) => { editService({ ...service, startCommand: { readOnly: false, value: e } }) }}
         />
         <Spacer y={1} />
         <Input

dashboard/src/main/home/app-dashboard/new-app-flow/WorkerTabs.tsx

@@ -24,9 +24,10 @@ const WorkerTabs: React.FC<Props> = ({
         <Input
           label="Start command"
           placeholder="ex: sh start.sh"
-          value={service.startCommand}
+          disabled={service.startCommand.readOnly}
+          value={service.startCommand.value}
           width="300px"
-          setValue={(e) => { editService({ ...service, startCommand: e }) }}
+          setValue={(e) => { editService({ ...service, startCommand: { readOnly: false, value: e } }) }}
         />
       </>
     )

dashboard/src/main/home/app-dashboard/new-app-flow/serviceTypes.ts

@@ -1,11 +1,16 @@
 export type Service = WorkerService | WebService | JobService;
 export type ServiceType = 'web' | 'worker' | 'job';
 
+type ServiceReadOnlyField = {
+    readOnly: boolean;
+    value: string;
+}
+
 type SharedServiceParams = {
     name: string;
     cpu: string;
     ram: string;
-    startCommand: string;
+    startCommand: ServiceReadOnlyField;
     type: ServiceType;
 }
 
@@ -19,11 +24,11 @@ export type WorkerService = SharedServiceParams & {
     targetRAMUtilizationPercentage: string;
 }
 const WorkerService = {
-    default: (name: string): WorkerService => ({
+    default: (name: string, startCommand: ServiceReadOnlyField): WorkerService => ({
         name,
         cpu: '',
         ram: '',
-        startCommand: '',
+        startCommand: startCommand,
         type: 'worker',
         replicas: '1',
         autoscalingOn: false,
@@ -41,11 +46,11 @@ export type WebService = SharedServiceParams & Omit<WorkerService, 'type'> & {
     customDomain?: string;
 }
 const WebService = {
-    default: (name: string): WebService => ({
+    default: (name: string, startCommand: ServiceReadOnlyField): WebService => ({
         name,
         cpu: '',
         ram: '',
-        startCommand: '',
+        startCommand: startCommand,
         type: 'web',
         replicas: '1',
         autoscalingOn: false,
@@ -64,24 +69,24 @@ export type JobService = SharedServiceParams & {
     cronSchedule: string;
 }
 const JobService = {
-    default: (name: string): JobService => ({
+    default: (name: string, startCommand: ServiceReadOnlyField): JobService => ({
         name,
         cpu: '',
         ram: '',
-        startCommand: '',
+        startCommand: startCommand,
         type: 'job',
         jobsExecuteConcurrently: false,
         cronSchedule: '',
     }),
 }
 
-export const createDefaultService = (name: string, type: ServiceType) => {
+export const createDefaultService = (name: string, type: ServiceType, startCommand: ServiceReadOnlyField) => {
     switch (type) {
         case 'web':
-            return WebService.default(name);
+            return WebService.default(name, startCommand);
         case 'worker':
-            return WorkerService.default(name);
+            return WorkerService.default(name, startCommand);
         case 'job':
-            return JobService.default(name);
+            return JobService.default(name, startCommand);
     }
 }