[dashboard] Missing functionality for workspaces page #3487

svenefftinge · 2021-03-18T10:34:03Z

Fixes outstanding todos from #3426
Namely:

gtsiolis

Thanks @svenefftinge! First round of comments are in! Feel free to leave anything as a follow up issue. 🥊

gtsiolis · 2021-03-18T15:25:52Z

components/dashboard/src/workspaces/Workspaces.tsx

+                        <div className="px-6 py-3 flex justify-between space-x-2 text-sm text-gray-400 border-t border-gray-200 h-96">
+                            <div className="flex flex-col items-center w-96 m-auto">
+                                <h3 className="text-center pb-3">No Active Workspaces</h3>
+                                <div className="text-center pb-6">Prefix a git repository URL with gitpod.io/# or open a workspace template. <a className="text-blue underline" href="https://www.gitpod.io/docs/getting-started/">Learn how to get started</a></div>


suggestion: What do you think of making the link more subtle here?

Suggested change

<div className="text-center pb-6">Prefix a git repository URL with gitpod.io/# or open a workspace template. <a className="text-blue underline" href="https://www.gitpod.io/docs/getting-started/">Learn how to get started</a></div>

<div className="text-center pb-6 text-gray-500">Prefix a git repository URL with gitpod.io/# or open a workspace template. <a className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/getting-started/">Learn how to get started</a></div>

gtsiolis · 2021-03-18T15:29:19Z

components/dashboard/src/index.css

@@ -29,7 +29,7 @@

 @layer components {
    button {
-        @apply cursor-pointer px-3 py-2 text-white text-sm rounded-md border-2 border-gray-900 bg-gray-500 hover:bg-gray-100;
+        @apply cursor-pointer px-3 py-1 my-auto bg-green-600 hover:bg-green-700 border-2 border-green-800 text-gray-100 text-sm rounded-lg;


issue: We're using only two radius variants across the product. Buttons, text fields, and tabs (sidebar, topbar) should use 6px radius (rounded-md). Modals, Lists (Workspaces), etc should use 12px radius (rounded-xl).

gtsiolis · 2021-03-18T15:30:41Z

components/dashboard/src/workspaces/Workspaces.tsx

+                </div>
+                <div className="py-3 pl-3">
+                    <DropDown entries={[{
+                        title: 'Max 50',


suggestion: I think it's ok to remove the prefix from within the list options and leave here there only the values like 50, 100, 200. The dropdown title can then be Items per page: X or Workspaces: X although there's one single page for the time being. WDYT?

How about Limit: 50?

gtsiolis · 2021-03-18T15:37:59Z

components/dashboard/src/workspaces/Workspaces.tsx

                                d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110" />
                        </svg>
                    </div>
-                    <input className="border-0" type="text" placeholder="Search Workspace" onChange={(v) => { console.log(v) }} />
+                    <input className="border-0" type="text" placeholder="Search Workspace" onChange={(v) => { if (wsModel) wsModel.setSearch(v.target.value) }} />
                </div>
                <div className="flex-1" />
                <div className="py-3">
                    <DropDown entries={[{
                        title: 'Active',


suggestion: The initial thought was to remove the prefix from within the dropdown options but keep the prefix on the title here to make the component-filter more clear. This could still remain Status: Active.

gtsiolis · 2021-03-18T15:40:32Z

components/dashboard/src/workspaces/Workspaces.tsx

+            isTemplateModelOpen: !this.state?.isTemplateModelOpen
+        });
+        const onActive = () => wsModel!.active = true;
+        const onAll = () => wsModel!.active = false;
        return <>
            <Header title="Workspaces" subtitle="Manage past workspaces" />


suggestion: Since we're here let's also change this to something like the following:

Suggested change

<Header title="Workspaces" subtitle="Manage past workspaces" />

<Header title="Workspaces" subtitle="Manage all workspaces and see pending changes." />

Subtitle is also $gray-500 (#78716C).

gtsiolis · 2021-03-18T15:54:47Z

components/dashboard/src/workspaces/Workspaces.tsx

+                        }
+                        {
+                            this.state?.workspaces.map(e => {
+                                return <WorkspaceEntry key={e.workspace.id} desc={e} model={wsModel} />


issue: Opening in a new tab by holding CMD does not work.

gtsiolis · 2021-03-18T15:56:42Z

components/dashboard/src/workspaces/workspace-model.ts

@@ -58,15 +69,47 @@ export class WorkspaceModel implements Disposable, Partial<GitpodClient> {
            this.notifyWorkpaces();
        }
    }
+    searchTerm: string | undefined;
+    setSearch(searchTerm: string) {


praise: Search works like a charm! 🔮

gtsiolis · 2021-03-18T15:59:06Z

components/dashboard/src/workspaces/Workspaces.tsx

+                                    </div>
+                                    <div className="flex-1 flex flex-col overflow-x-auto">
+                                        <div className="text-red font-semibold">Garbage Collection</div>
+                                        <p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-500 underline" href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection">Learn more</a></p>


issue: Let's use the same plugin for the underline here.

Suggested change

<p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-500 underline" href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection">Learn more</a></p>

<p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-600 underline underline-thickness-thin underline-offset-small hover:text-gray-800">Learn more</a></p>

gtsiolis · 2021-03-18T16:00:33Z

components/dashboard/src/workspaces/Workspaces.tsx

+                            <div className="w-6"></div>
+                            <div className="w-3/12">Name</div>
+                            <div className="w-4/12">Context</div>
+                            <div className="w-2/12">Pending Changes</div>


thought: X Changes below with the text-gitpod-kumquat color seems like. Maybe let's go with a red one. WDYT?

gtsiolis · 2021-03-18T16:05:01Z

components/dashboard/src/workspaces/Workspaces.tsx

+                                    </div>
+                                    <div className="flex-1 flex flex-col overflow-x-auto">
+                                        <div className="text-red font-semibold">Garbage Collection</div>
+                                        <p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-500 underline" href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection">Learn more</a></p>


issue: The garbage collection message should remain when searching All workspaces. In the future we could deselect a filter or have a more clear searxh state when searching and remove the GC message. For example, the GV message could include the state of the search (e.g Search Results for xyz). 🔍

I believe when I search for a specific workspace, I have already seen the warning and really would like to be able to focus on the search result. WDYT?

Agree but I'd say it depends on if we hold or release the filter state on the status.

thought: For example, if the filter status persists and search happens only for the All workspaces it wouldn't hurt to persist the GC message. If on search, we release the filter state and search across all workspaces it would make more sense to remove the GC message. Since the second filter option is All here it's easier to remove the GC message here. Let's do it!

gtsiolis · 2021-03-18T16:08:02Z

/werft run

👍 started the job as gitpod-build-se-more-workspaces.6

svenefftinge requested a review from gtsiolis March 18, 2021 10:34

svenefftinge force-pushed the se/more-workspaces branch 4 times, most recently from 634e0b1 to 675348d Compare March 18, 2021 15:05

svenefftinge requested a review from AlexTugarev March 18, 2021 15:46

gtsiolis approved these changes Mar 18, 2021

View reviewed changes

[dashboard] addition workspaces list features

853e611

svenefftinge force-pushed the se/more-workspaces branch from 675348d to 853e611 Compare March 18, 2021 16:53

svenefftinge removed the request for review from AlexTugarev March 18, 2021 16:56

svenefftinge merged commit d644c6b into dashboard-v2 Mar 18, 2021

svenefftinge deleted the se/more-workspaces branch March 18, 2021 16:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dashboard] Missing functionality for workspaces page #3487

[dashboard] Missing functionality for workspaces page #3487

svenefftinge commented Mar 18, 2021 •

edited

Loading

gtsiolis left a comment

gtsiolis Mar 18, 2021

gtsiolis Mar 18, 2021

gtsiolis Mar 18, 2021

svenefftinge Mar 18, 2021

gtsiolis Mar 18, 2021

gtsiolis Mar 18, 2021

gtsiolis Mar 18, 2021 •

edited

Loading

svenefftinge Mar 18, 2021

gtsiolis Mar 18, 2021

gtsiolis Mar 18, 2021

gtsiolis Mar 18, 2021

gtsiolis Mar 18, 2021

svenefftinge Mar 18, 2021

gtsiolis Mar 18, 2021

gtsiolis commented Mar 18, 2021 •

edited by werft-gitpod-dev-com bot

Loading

	<div className="text-center pb-6">Prefix a git repository URL with gitpod.io/# or open a workspace template. <a className="text-blue underline" href="https://www.gitpod.io/docs/getting-started/">Learn how to get started</a></div>
	<div className="text-center pb-6 text-gray-500">Prefix a git repository URL with gitpod.io/# or open a workspace template. <a className="text-gray-400 underline underline-thickness-thin underline-offset-small hover:text-gray-600" href="https://www.gitpod.io/docs/getting-started/">Learn how to get started</a></div>

	<Header title="Workspaces" subtitle="Manage past workspaces" />
	<Header title="Workspaces" subtitle="Manage all workspaces and see pending changes." />

	<p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-500 underline" href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection">Learn more</a></p>
	<p className="text-gray-500">Unpinned workspaces that have been stopped for more than 14 days will be automatically deleted. <a className="text-blue-600 underline underline-thickness-thin underline-offset-small hover:text-gray-800">Learn more</a></p>

[dashboard] Missing functionality for workspaces page #3487

[dashboard] Missing functionality for workspaces page #3487

Conversation

svenefftinge commented Mar 18, 2021 • edited Loading

gtsiolis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis Mar 18, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gtsiolis commented Mar 18, 2021 • edited by werft-gitpod-dev-com bot Loading

svenefftinge commented Mar 18, 2021 •

edited

Loading

gtsiolis Mar 18, 2021 •

edited

Loading

gtsiolis commented Mar 18, 2021 •

edited by werft-gitpod-dev-com bot

Loading