feat: auto-generate workspace slug from display name

[Snehadas2005]

This PR introduces automatic slugging for the Workspace Name input derived from the Workspace Display Name, eliminating the friction of manually generating Kubernetes RFC1123-compliant names, alongside strict validation and form flow safety fixes.

Key Changes:

• Slugging Utility (generateWorkspaceSlug):

  • Added a pure utility function that transforms display names into valid Kubernetes DNS subdomain names according to RFC1123 rules.
  • Strips invalid characters outside [0-9, a-z, A-Z, -, ., _, space].
  • Collapses consecutive dashes/spaces/underscores into a single dash (-).
  • Converts strings to lowercase and trims leading/trailing non-alphanumeric characters.
  • Truncates resulting slug to the 253-character RFC1123 limit.
  • Fallback mechanism (workspace-1) if the display name contains only emojis/special characters.

• Validation & UI Integration (WorkspaceFormPropertiesSelection.tsx):

  • Added Display Name input field and wired auto-slugging to update workspaceName live until the user manually edits the slug field or when in update mode.
  • Added strict RFC1123 regex validation and character-restriction highlighting on manual edits.
  • Exposed onValidityChange callback to propagate properties validation state to the parent form.

• Form Logic & Navigation Fixes (WorkspaceForm.tsx):

  • Wired properties validity flag into form navigation steps and submit button state.
  • Fixed submit button isDisabled condition logic to prevent submission with invalid custom slugs.

• Type Safety & Component Tests:

  • Fixed TypeScript generic declaration syntax in form components (React.FC).
  • Added unit tests (slugify.spec.ts) for standard, special character, length limit, collapse, and fallback scenarios.
  • Added component test skeleton (WorkspaceFormPropertiesSelection.spec.tsx) for auto-slugging and manual lock behaviour.

Testing Strategy:

• Ran unit tests: npm run test:unit -- slugify.spec.ts
• Verified type safety and linting locally (npm run type-check, npm run lint).
• Manually verified auto-slugging, manual override lock, error states on invalid RFC1123 manual input, and submit button disabling behavior in local frontend server.

closes: #1304

[google-oss-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign paulovmr for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• workspaces/frontend/OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[Snehadas2005]

/cc @christian-heusel

[christian-heusel]

Please fix the CI 🤗

[christian-heusel]

@Snehadas2005 Just to keep you in the loop on the current status: We now went with a different implementation (see #1335 (to be merged)) in the meantime in order to hit something for the upcoming beta release, we will revisit the complete version of the feature (which your PR can serve as a base for) after the release! 🤗

Please rebase your changes on top of that (once it got merged) and adapt a few of the patterns that it establishes 😊

[christian-heusel]

/hold

[Snehadas2005]

Thank you for the update, @christian-heusel! I completely understand the need for a quick stopgap for the beta release. I will rebase on top of #1335 once it's merged and adjust to the new patterns for the full feature. 🙇‍♀️