JobSubmitForm changes

Author: Francesco Pagnamenta

app/modules/compute/components/forms/JobSubmitForm.tsx

@@ -34,6 +34,8 @@ import BaseSlideOver from '~/components/overlays/BaseSliderOver'
 interface FormData {
   systems: [System]
   username: string
+  accountName: string
+  systemName: string
 }
 
 interface JobSubmitFormData {
@@ -50,10 +52,10 @@ const JobSubmitForm: React.FC<any> = ({ formData, formError }: JobSubmitFormData
   const [file, setFile] = useState<any>(null)
   const [isOpenTargetBrowse, setIsOpenTargetBrowse] = useState(false)
   const [loading, setLoading] = useState(false)
-  const { systems, username } = formData
+  const { systems, username, systemName, accountName } = formData
   const formErrorFields = getFormErrorFieldsFromError(formError)
   const [formValues, setFormValues] = useState({
-    system: '',
+    system: systemName,
     workingDirectory: '',
     // advanced options
     standardInput: '',
@@ -68,6 +70,8 @@ const JobSubmitForm: React.FC<any> = ({ formData, formError }: JobSubmitFormData
       if (healthySystems && healthySystems.length > 0) {
         handleSystemChanged(healthySystems[0].name)
       }
+    } else {
+      handleSystemChanged(systemName)
     }
   }, [])
 
@@ -151,14 +155,10 @@ const JobSubmitForm: React.FC<any> = ({ formData, formError }: JobSubmitFormData
       </BaseSlideOver>
       <div className='sm:overflow-hidden'>
         <div>
-          {/* <div className='mb-6'>
-            <h2 className='text-lg font-medium leading-6 text-gray-900'>Project details</h2>
-            <p className='mt-1 text-sm text-gray-500'>Fill the form to proceed with ...</p>
-          </div> */}
           <div className='grid grid-cols-6 gap-6'>
             <div className='col-span-6 sm:col-span-2'>
               <label htmlFor='system' className='block text-sm font-medium text-gray-700'>
-                System <span className='italic text-red-400'>*</span>
+                System <span className='italic text-red-400'>:</span>
               </label>
               <select
                 name='system'
@@ -200,6 +200,7 @@ const JobSubmitForm: React.FC<any> = ({ formData, formError }: JobSubmitFormData
               <input
                 type='text'
                 name='account'
+                value={formData.accountName}
                 className='border-gray-300 focus:border-blue-300 focus:ring-blue-300 mt-1 block w-full rounded-md border py-2 px-3 shadow-sm sm:text-sm focus:outline-none'
               />
               {showInputValidation({

app/modules/compute/components/views/JobListView.tsx

@@ -19,16 +19,22 @@ import SimpleView, { SimpleViewSize } from '~/components/views/SimpleView'
 import SimplePanel from '~/components/panels/SimplePanel'
 // lists
 import JobList from '~/modules/compute/components/lists/JobList'
+// contexts
+import { useSystem } from '~/contexts/SystemContext'
+import { useGroup } from '~/contexts/GroupContext'
 
 const JobListView: React.FC<any> = ({ jobs }) => {
+  const { selectedSystem } = useSystem()
+  const { selectedGroup } = useGroup()
+
   const handleClickReload = () => {
     window.location.reload()
   }
 
   const actionsButtons = (
     <>
       <Link
-        to='/compute/jobs/submit'
+        to={`/compute/systems/${selectedSystem?.name}/accounts/${selectedGroup?.name}/submit`}
         className='inline-flex items-center ml-1 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500'
       >
         <PlusIcon className='-ml-1 mr-2 h-5 w-5 text-gray-500' aria-hidden='true' />
@@ -41,7 +47,7 @@ const JobListView: React.FC<any> = ({ jobs }) => {
     <SimpleView title={LABEL_COMPUTE_TITLE} size={SimpleViewSize.FULL}>
       <SimplePanel title={'List of jobs'} className='mb-4' actionsButtons={actionsButtons}>
         <AlertError error={jobs.error} />
-        <JobList  jobs={jobs}  />
+        <JobList jobs={jobs} />
       </SimplePanel>
     </SimpleView>
   )

app/modules/filesystem/components/views/FileListView.tsx

@@ -601,22 +601,6 @@ const FileSystemSelection: React.FC<FileSystemSelectionData> = ({
             </option>
           ))}
         </optgroup>
-        {/* {systems &&
-          systems.length > 0 &&
-          systems.map((itemSystem: System) => (
-            <optgroup key={itemSystem.name} label={itemSystem.name}>
-              {itemSystem.fileSystems.map((itemFileSystem: FileSystem) => (
-                <option
-                  key={buildFileSystemSelection(itemSystem, itemFileSystem, username)}
-                  value={buildFileSystemSelection(itemSystem, itemFileSystem, username)}
-                  disabled={!isFileSystemHealthy(itemSystem, itemFileSystem)}
-                >
-                  {`${itemSystem.name} - ${buildFileSystemSelectionPath(itemFileSystem, username)}`}{' '}
-                  {`${isFileSystemHealthy(itemSystem, itemFileSystem) ? '' : ' - unhealthy'}`}
-                </option>
-              ))}
-            </optgroup>
-          ))} */}
       </select>
     </div>
   )

app/routes/_app.compute.jobs.submit.tsx renamed to app/routes/_app.compute.systems.$systemName.accounts.$accountName.submit.tsx

@@ -31,7 +31,7 @@ import { validateJob } from '~/validations/computeValidation'
 import ErrorView from '~/components/views/ErrorView'
 import JobSubmitView from '~/modules/compute/components/views/JobSubmitView'
 
-export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) => {
+export const loader: LoaderFunction = async ({ request, params }: LoaderFunctionArgs) => {
   // Check authentication
   const auth = await authenticator.isAuthenticated(request, {
     failureRedirect: '/login',
@@ -43,24 +43,32 @@ export const loader: LoaderFunction = async ({ request }: LoaderFunctionArgs) =>
   })
   // Get auth access token
   const accessToken = await getAuthAccessToken(request)
+  // Get params
+  const systemName = params.systemName!
+  const accountName = params.accountName!
   // Call api/s and fetch data
   const { systems } = await getSystems(accessToken)
   // Return response (deferred response)
   return {
     formData: {
       systems: systems,
       username: auth.user.username,
+      systemName: systemName,
+      accountName: accountName,
     },
   }
 }
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request, params }: ActionFunctionArgs) => {
   // Create a headers object
   const headers = new Headers()
   // Authenticate the request and get the accessToken back, this will be the
   // already saved token or the refreshed one, in that case the headers above
   // will have the Set-Cookie header appended
   const accessToken = await getAuthAccessToken(request, headers)
+  // Get params
+  const systemName = params.systemName!
+  const accountName = params.accountName!
   try {
     // Instance handler
     const uploadHandler = unstable_composeUploadHandlers(
@@ -87,7 +95,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
       headers,
     )
     // Redirect with headers
-    return redirect(`/compute`, {
+    return redirect(`/compute/systems/${systemName}/accounts/${accountName}`, {
       headers: headers,
     })
   } catch (error) {