Frontend: Display devfile validity in create workspace form

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

MR: Implement just-in-time devfile validation (!201038) • Omar Nasser • 18.4

Goal

Improve user experience by providing immediate feedback on devfile validity when creating a workspace, preventing errors before form submission.

Problem

Currently, devfile validation only occurs after the user submits the form to create a workspace. This means users only discover invalid devfiles after waiting for form submission.

Proposed solution

Implement just-in-time (JIT) validation for devfiles in the workspace creation form:

• When a user selects a devfile from the dropdown, validate it immediately in the background.
• Display a popover with a close button below the devfile selection dropdown showing its validity status.
• If the devfile is valid, no need to show anything. Only display a message Error processing the devfile\nMore Information.
• Clicking on More Information would provide a bulleted list of clear, actionable error messages for invalid devfiles before form submission.
• If there are any errors in the devfile, the workspace create button should become disabled.

Implementation Details

Update the workspace create page in ee/app/assets/javascripts/workspaces/user/pages/create.vue/ee/app/assets/javascripts/workspaces/user/components/devfile_listbox.vue with the following -

• When user selects a devfile, use the GraphQL API created in GraphQL: Add endpoint to validate a devfile (#410907 - closed) to fetch the details about devfile errors.
• Optional - If the user has selected the default devfile, we can skip this validation.
• The response from the GraphQL API is parsed. The string will be split on , (command with a space) and the resultant errors, if any, will be displayed in a bulleted list in https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-popover--with-close-button

Initial issue description and scope

To do creation a workspace clearly, restructure the form.

• Users see what they need to start a workspace (agent and devfile)
• If users don't have something, they see why they can't create a workspace
• If they fixed the problem in another tab, they can restart validation
• If something went wrong they see the error near the action button

empty form	no agent	no devfile	everything's fine	something's wrong

✿ Link to Figma file (BRANCH) →