✨ New job screen #77

peppermint-juli · 2025-11-03T20:48:16Z

NEW FEATURE ✨ ❤️‍🔥

From Jobs/ screen click on New Job to create a new Job.
First step is the same as the Create Session config page, where the user can choose Domain, Image, DataVolumes and UserVolumes.
Second step is unique to this workflow. There's a textfield for the command and a Working Directory config option.
No Notebook support added

🤕 Known issues that will be created as separate issues once this PR is approved, unless they need to be fixed before merge as per reviewers' requests:

Maybe make the command textfield more code editor-looking? (optional, depending on other team memebers' input)
When the job is submitted, the user is redirected to the jobs/ screen. GraphQL is not forcing a reload, and the new job is not appearing in the list; a reload is needed. There also needs to be an additional feature to add a sort of subscription to the jobs to check when their status changes; right now, a reload is required to check status changes.
When the description is larger than anticipated, the card containing chven oices (Images, Domains, etc.) expands beyond the height of the components containing it. This is an aesthetic change, and there was previously other feedback about how this component works. Search is needed, focus changes when selecting, maybe using, etc.
Later iteration of code cleanup will include a displayName for UserVolumes to be able to reuse the DataVolumeChoiceAccordion , UserVolumeAccordion, and WorkingDirectoryAccordion components.

…etail layout

….tsx Co-authored-by: Copilot <[email protected]>

* Removed header from NewResource component and put it each NewJob and NewSession component

…ewJob component

…w reusable component

Copilot

Pull Request Overview

This PR introduces a new job creation feature with a multi-step wizard interface, refactors shared components for reuse between compute sessions and jobs, and adds support for optional parameters in the GraphQL schema.

Adds a new "New Job" page with a two-step wizard (domain/image selection, then command configuration)
Refactors domain, image, and volume selection components into generic reusable components
Adds a name parameter to job creation

Reviewed Changes

Copilot reviewed 24 out of 26 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
components/ui/web/theme.json	Updates theme colors from purple to blue palette
components/ui/web/src/graphql/typings.ts	Adds optional `name` field to CreateJobParams and QueryGetDomainsArgs
components/ui/web/src/graphql/domains.ts	Adds `jobs` parameter to GET_DOMAINS query and fetches additional domain fields
components/ui/web/pages/jobs/new.tsx	Creates new page for job creation
components/ui/web/pages/compute/new.tsx	Updates import path for refactored NewSession component
components/ui/web/components/content/newResource/*.tsx	Creates shared accordion components for resource selection
components/ui/web/components/content/jobs/new/*.tsx	Implements new job creation wizard with command form
components/ui/web/components/content/jobs/list/*.tsx	Adds "New Job" button to jobs list
components/ui/web/components/content/compute/sessionManagement/newSession.tsx	Refactors to use shared NewResource component
components/ui/web/.env.development	Updates default image name and adds job configuration defaults
components/ui/graphql/src/*/.ts	Updates GraphQL schema and resolvers for jobs parameter

Comments suppressed due to low confidence (2)

components/ui/web/components/content/newResource/singleChoiceAccordion.tsx:50

Potential null pointer exception. The choice variable is optional (choice?: Choice) but is accessed with the non-null assertion operator ! on line 50. This will throw an error if choice is undefined when rendering the list. Add a null check: selected={choice?.id === ch.id}
components/ui/web/components/content/newResource/singleChoiceAccordion.tsx:55
Missing key prop in mapped component. React requires a unique key prop when rendering lists. Add a key prop to InfoCard: <InfoCard key={ch.id} ...>

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

components/ui/web/components/content/jobs/new/commandForm.tsx

components/ui/web/components/content/jobs/new/newJob.tsx

components/ui/web/components/content/newResource/workingDirectoryAccordion.tsx

…etail layout

….tsx Co-authored-by: Copilot <[email protected]>

Co-authored-by: Copilot <[email protected]>

… InfoCard

amitschang

A handful of inline comments, overall looks good

amitschang · 2025-11-05T16:04:07Z

components/ui/web/.env.development

+# NEXT_PUBLIC_GRAPHQL_URL=http://localhost:4000/graphql
+NEXT_PUBLIC_GRAPHQL_URL=https://apps.sciserver.org/graphql


Can we remove the commented line and then from here on not modify these lines for typical PRs. local workflows should have a way to replace this without committing the changes (either by another file or by restoring after testing)

I don't usually modify it, but since I was going to make a change to this file, I decided to commit this one too. For local deployments, it's best to have this point to the apps.sciserver.org version of the GraphQL instead of the local version.

amitschang · 2025-11-05T19:35:32Z

components/ui/web/components/content/compute/sessionManagement/newSession.tsx

 import { GET_DOMAINS } from 'src/graphql/domains';
-import { LoadingAnimation } from 'components/common/loadingAnimation';
+
+import { NewResource, NewSessionType } from 'components/content/newResource/newResource';


Mentioning here since it is the first place I see, but I think the name NewResource is probably too generic. Looks like this is a specification particular to compute. Could it rather be NewSession or NewSessionSpec or something - this would match some of the other naming better (session name, session type)

It used to be called NewSession when it was only used for creating new compute sessions, but since I now reuse it for jobs too, I wasn't sure if that's the correct name. I wanted to start this discussion. If sharing it between jobs and compute sessions makes sense for it to be called NewSession given the shared functionality, I'll call it that.

I think new session is fine for both, maybe even NewComputeSession

amitschang · 2025-11-06T19:28:50Z

components/ui/web/components/content/jobs/new/newJob.tsx

+  const [createJob] = useMutation(CREATE_JOB, {
+    onError: () => Swal.fire({
+      title: 'Unable to add docker job',
+      text: 'Please email <a href=\"mailto:[email protected]\">[email protected]</a> for more assistance.',


We should be using environment variables for the mailto and other help/doc links.

amitschang · 2025-11-06T19:29:54Z

components/ui/web/components/content/jobs/new/newJob.tsx

+      variables: { jobs: true },
+      onError: (error: ApolloError) => {
+        if (error.message.includes('Unauthorized')) {
+          router.push('/login?callbackURL=/compute');


should this be jobs specific page and not general compute page?

Oops yes lol

* Adjust redirect URL on unauthorized access

peppermint-juli and others added 10 commits October 22, 2025 14:46

refactor: replace MUI Typography with HTML headings and improve job d…

beefcaf

…etail layout

Update components/ui/web/components/content/jobs/detail/jobFullDetail…

d30e5d1

….tsx Co-authored-by: Copilot <[email protected]>

Merge commit '5e0579ef35bbeb73a11c4506546bc7bc2644b33b'

c70d7fa

feat: Reuse newSession component to create new Jobs

50ff8e3

Reuse NewSession form to create

3e23cea

feat: update getDomains query to accept jobs parameter

44ebc94

* Added Command step and steppers component to NewJob component

15d191c

* Removed header from NewResource component and put it each NewJob and NewSession component

feat: add working directory selection and default job parameters to N…

dbd479c

…ewJob component

Connected NewJob endpoint to component. Code Cleanup and created a ne…

b2c518c

…w reusable component

feat: add optional name field to CreateJobParams and Job types

3788839

peppermint-juli requested review from amitschang and Copilot November 3, 2025 20:48

Copilot AI reviewed Nov 3, 2025

View reviewed changes

peppermint-juli and others added 6 commits November 3, 2025 15:54

refactor: replace MUI Typography with HTML headings and improve job d…

8d34972

…etail layout

Update components/ui/web/components/content/jobs/detail/jobFullDetail…

7ceebef

….tsx Co-authored-by: Copilot <[email protected]>

Merge branch 'main' into new-job-screen

e91fdff

Apply suggestions from code review

196998b

Co-authored-by: Copilot <[email protected]>

Update components/ui/web/components/content/jobs/new/commandForm.tsx

7e57d3d

Co-authored-by: Copilot <[email protected]>

fix: update comparison operator for domain choice and add key prop to…

85ada47

… InfoCard

peppermint-juli linked an issue Nov 3, 2025 that may be closed by this pull request

Add New Job Screen #78

Open

amitschang reviewed Nov 6, 2025

View reviewed changes

peppermint-juli added 3 commits November 10, 2025 16:46

* Make helpdesk email link an env variable

f61b519

* Adjust redirect URL on unauthorized access

feat: add helpdesk email as an environment variable in web deployment

e9c078a

Merge branch 'main' into new-job-screen

9cfaecf

peppermint-juli requested a review from amitschang November 18, 2025 15:41

		# NEXT_PUBLIC_GRAPHQL_URL=http://localhost:4000/graphql
		NEXT_PUBLIC_GRAPHQL_URL=https://apps.sciserver.org/graphql

✨ New job screen #77

Are you sure you want to change the base?

✨ New job screen #77

Uh oh!

Conversation

peppermint-juli commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

NEW FEATURE ✨ ❤️‍🔥

🤕 Known issues that will be created as separate issues once this PR is approved, unless they need to be fixed before merge as per reviewers' requests:

Uh oh!

Copilot AI left a comment • edited by peppermint-juli Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amitschang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

peppermint-juli commented Nov 3, 2025 •

edited

Loading

Copilot AI left a comment •

edited by peppermint-juli

Loading