Improve Workspace timeout settings error UX

[Siddhant-K-code]

Description

UX in Prod.	UX after this PR
Screen.Recording.2023-10-14.at.5.00.03.PM.mov	Screen.Recording.2023-10-14.at.4.56.34.PM.mov

Summary generated by Copilot

🤖 Generated by Copilot at b1a8634

Improve error handling and feedback for custom workspace timeout in user preferences. Refactor Preferences.tsx to use vertical flex layout.

Related Issue(s)

Fixes EXP-755

How to test

Documentation

Preview status

Gitpod was successfully deployed to your preview environment.

• 🏷️ Name - siddhant-e9865411e59
• 🔗 URL - siddhant-e9865411e59.preview.gitpod-dev.com/workspaces.
• 📚 Documentation - See our internal documentation for information on how to interact with your preview environment.
• 📦 Version - siddhant-exp-755-error-message-behaviour-on-custom-timeout-component-gha.18587
• 🗒️ Logs - GCP Logs Explorer

Build Options

Build

• /werft with-werft
  Run the build with werft instead of GHA
• leeway-no-cache
• /werft no-test
  Run Leeway with --dont-test

Publish

• /werft publish-to-npm
• /werft publish-to-jb-marketplace

Installer

• analytics=segment
• with-dedicated-emulation
• workspace-feature-flags
  Add desired feature flags to the end of the line above, space separated

Preview Environment / Integration Tests

• /werft with-local-preview
  If enabled this will build install/preview
• /werft with-preview
• /werft with-large-vm
• /werft with-gce-vm
  If enabled this will create the environment on GCE infra
• with-integration-tests=all
  Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh. If enabled, with-preview and with-large-vm will be enabled.
• with-monitoring

/hold

[laushinka]

Thanks for working on this, @Siddhant-K-code! The error message actually already showed the important part "Invalid custom unit", but swallowed by the rest of the message so people miss it.

Could we change the text to something like "Timeout unit is invalid. Make sure to use [number]m or [number]h"?

Let me loop in @loujaybee so I don't butcher our error messages.

[Siddhant-K-code]

Could we change the text to something like "Timeout unit is invalid. Make sure to use [number]m or [number]h"?

I agree with your observation, @laushinka, At the moment, the error message originates from the server side, with the prefix (Cannot set custom workspace timeout: ) being appended at the frontend level. I propose that we initiate a comprehensive refactor of the following code, treating this as an independent issue that warrants a detailed discussion (with/ @loujaybee) to strategize our error message approach.

gitpod/components/gitpod-protocol/src/gitpod-service.ts

Lines 346 to 353 in 2a217ae

	const unit = duration.slice(-1);
	if (!["m", "h"].includes(unit)) {
	throw new Error(`Invalid timeout unit: ${unit}`);
	}
	const value = parseInt(duration.slice(0, -1), 10);
	if (isNaN(value) || value <= 0) {
	throw new Error(`Invalid timeout value: ${duration}`);
	}

[akosyakov]

@selfcontained Could you have a look please whether it makes sense?

[Siddhant-K-code]

/gh run recreate-vm=true

[Siddhant-K-code]

/unhold

[selfcontained]

This would have been a good opportunity to refactor this into a react-query mutation, which handles the error state for us automatically.

[selfcontained]

I probably would have gone with a toast here for the error instead of an inline one.