Fix create job form

src/components/environment-picker.tsx

@@ -1,12 +1,14 @@
-import React, { ChangeEvent, useState } from 'react';
+import { InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import React, { useState } from 'react';
 
 import { Scheduler } from '../handler';
 import { useTranslator } from '../hooks';
 
 export type EnvironmentPickerProps = {
+  label: string;
   name: string;
   id: string;
-  onChange: (event: ChangeEvent) => void;
+  onChange: (event: SelectChangeEvent<string>) => void;
   environmentsPromise: Promise<Scheduler.IRuntimeEnvironment[]>;
   initialValue: string;
 };
@@ -25,23 +27,24 @@ export function EnvironmentPicker(props: EnvironmentPickerProps): JSX.Element {
     return <em>{trans.__('Loading …')}</em>;
   }
 
+  const labelId = `${props.id}-label`;
+
   return (
-    <select
-      name={props.name}
-      id={props.id}
-      onChange={props.onChange}
-      value={props.initialValue}
-    >
-      <option
-        value=""
-        title={trans.__('No environment selected')}
-        disabled
-      ></option>
-      {environmentList.map((env, idx) => (
-        <option value={env.label} title={env.description} key={idx}>
-          {env.name}
-        </option>
-      ))}
-    </select>
+    <>
+      <InputLabel id={labelId}>{props.label}</InputLabel>
+      <Select
+        labelId={labelId}
+        name={props.name}
+        id={props.id}
+        onChange={props.onChange}
+        value={props.initialValue}
+      >
+        {environmentList.map((env, idx) => (
+          <MenuItem value={env.label} title={env.description} key={idx}>
+            {env.name}
+          </MenuItem>
+        ))}
+      </Select>
+    </>
   );
 }

src/components/job-row.tsx

@@ -59,7 +59,7 @@ function DeleteButton(props: {
 
 function RefillButton(props: {
   job: Scheduler.IDescribeJob;
-  showCreateJob: () => void;
+  showCreateJob: (newModel: ICreateJobModel) => void;
 }): JSX.Element | null {
   const trans = useTranslator('jupyterlab');
   const buttonTitle = props.job.name
@@ -81,7 +81,7 @@ function RefillButton(props: {
       : undefined;
 
   const clickHandler = (): void => {
-    const initialState: ICreateJobModel = {
+    const newModel: ICreateJobModel = {
       inputFile: props.job.input_uri,
       jobName: props.job.name ?? '',
       outputPath: props.job.output_prefix,
@@ -95,13 +95,13 @@ function RefillButton(props: {
       props.job.runtime_environment_name
     );
     if (jobOutputFormats && outputFormats) {
-      initialState.outputFormats = outputFormats.filter(of =>
+      newModel.outputFormats = outputFormats.filter(of =>
         jobOutputFormats.some(jof => of.name === jof)
       );
     }
 
     // Switch the view to the form.
-    props.showCreateJob();
+    props.showCreateJob(newModel);
   };
 
   return (
@@ -163,7 +163,7 @@ export type JobRowProps = {
   rowClass: string;
   cellClass: string;
   app: JupyterFrontEnd;
-  showCreateJob: () => void;
+  showCreateJob: (newModel: ICreateJobModel) => void;
 };
 
 // Add a row for a job, with columns for each of its traits and a details view below.

src/components/output-format-picker.tsx

@@ -1,8 +1,15 @@
 import React, { ChangeEvent, useMemo } from 'react';
+
+import { Checkbox, FormControlLabel, InputLabel } from '@mui/material';
+
+import { Stack } from './stack';
+
+import { Cluster } from './cluster';
 import { Scheduler } from '../handler';
 import { IOutputFormat } from '../model';
 
 export type OutputFormatPickerProps = {
+  label: string;
   name: string;
   id: string;
   environment: string;
@@ -42,21 +49,22 @@ export function OutputFormatPicker(
   }
 
   return (
-    <ul className="jp-notebook-job-output-formats-options">
-      {outputFormats.map((of, idx) => (
-        <li key={idx}>
-          <label>
-            <input
-              type="checkbox"
-              id={`${props.id}-${of.name}`}
-              value={of.name}
-              onChange={props.onChange}
-              checked={props.value.some(sof => of.name === sof.name)}
-            />{' '}
-            {of.label}
-          </label>
-        </li>
-      ))}
-    </ul>
+    <Stack size={2}>
+      <InputLabel>{props.label}</InputLabel>
+      <Cluster gap={3} justifyContent="flex-start">
+        {outputFormats.map((of, idx) => (
+          <FormControlLabel
+            key={idx}
+            control={
+              <Checkbox
+                defaultChecked={props.value.some(sof => of.name === sof.name)}
+                id={`${props.id}-${of.name}`}
+                value={of.name}
+                onChange={props.onChange}
+              />}
+            label={of.label} />
+          ))}
+      </Cluster>
+    </Stack>
   );
 }