[Dashboard] Start ws for recently used repos #3539

svenefftinge · 2021-03-22T20:32:44Z

This PR adds the possibility to start fresh workspaces for recently used repositories from the dashboard.

fixes #3534

svenefftinge · 2021-03-22T20:54:54Z

/werft run

👍 started the job as gitpod-build-sefftinge-dashboard-start-project-3534.3

svenefftinge · 2021-03-23T08:51:03Z

/werft run

👍 started the job as gitpod-build-sefftinge-dashboard-start-project-3534.4

gtsiolis · 2021-03-23T13:33:50Z

Looking at this now! 👀

gtsiolis · 2021-03-23T13:50:43Z

/werft run

👍 started the job as gitpod-build-sefftinge-dashboard-start-project-3534.5

svenefftinge · 2021-03-23T14:03:53Z

/werft run

👍 started the job as gitpod-build-sefftinge-dashboard-start-project-3534.6

gtsiolis

Looks great! Added some comments, let me know if anyone feels suboptimal so we can discuss is separate follow up issues. 🏓

gtsiolis · 2021-03-23T13:45:35Z

components/dashboard/src/workspaces/Workspaces.tsx

@@ -131,30 +135,56 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                        <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 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>
-                                <button onClick={toggleTemplateModal} className="font-medium">Select Template</button>
+                                <div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or start a workspace for a recently used project. <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>


thought: This is still missing a reference to the examples but let's leave the prefix action lead here and improve this in a later iteration.

gtsiolis · 2021-03-23T13:46:13Z

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

+        <h3 className="pb-2">Start Workspace</h3>
+        {/* separator */}
+        <div className="border-t mt-2 -mx-6 px-6 pt-2">
+            <div className="flex mt-4">


nitpick: Remove unessasary padding.

Suggested change

<div className="flex mt-4">

<div className="flex">

gtsiolis · 2021-03-23T13:49:16Z

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

+function Tab(p: { name: Mode, selection: Mode, setSelection: (selection: Mode) => any }) {
+    const selectedTab = 'border-gray-800 text-gray-800';
+    const inactiveTab = 'border-none text-gray-400';
+    return <div onClick={() => p.setSelection(p.name)} className={"cursor-pointer py-2 px-4 border-b-4 " + (p.selection === p.name ? selectedTab : inactiveTab)}>{p.name}</div>


issue: Nooooo! There's no border-b-6 but only border-b-4 and border-b-8. That's fine but 6 is being used in so many places (radius, spacing, etc). Let's leave this as border-b-4 for now and customize in the later iteration. 😇

gtsiolis · 2021-03-23T14:14:04Z

components/dashboard/src/workspaces/Workspaces.tsx

@@ -131,30 +135,56 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                        <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 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>
-                                <button onClick={toggleTemplateModal} className="font-medium">Select Template</button>
+                                <div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or start a workspace for a recently used project. <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>


thought: While having more descriptive help links is absolutely fine, let's change this to Learn more which is commonly used across the product for now, to have a better balance in how text renders and avoid breaking this link into multiple lines.

Suggested change

<div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or start a workspace for a recently used project. <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>

<div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or start a workspace for a recently used project. <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 more</a></div>

gtsiolis · 2021-03-23T14:15:31Z

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

+                {list.length > 0 ? list :
+                    (selection === 'Recent' ?
+                        <div className="flex flex-col pt-12 items-center px-2">
+                            <h3 className="mb-2">No Recent Projects</h3>


suggestion: Empty state headings should not use as dark text as the page heading.

Suggested change

<h3 className="mb-2">No Recent Projects</h3>

<h3 className="mb-2 text-gray-500">No Recent Projects</h3>

gtsiolis · 2021-03-23T14:22:37Z

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

+            {list.length > 0 ?
+                <p className="mt-1 mb-2 text-base">
+                    {selection === 'Recent' ?
+                        'Create a new workspace using the default branch.' :


issue: Removing the frequency reference makes it unclear what pops up in this list when it's populated with items. It's also fine as is. Your call. 📞

Suggested change

'Create a new workspace using the default branch.' :

'Create a new workspace using the default branch for frequently used projects.' :

The tab is called 'Recent' I think that's good enough and would like to avoid diluting the important information that you are starting from the default branch with additional wording.

gtsiolis · 2021-03-23T14:23:52Z

components/dashboard/src/workspaces/StartWorkspaceModal.tsx

+                <p className="mt-1 mb-2 text-base">
+                    {selection === 'Recent' ?
+                        'Create a new workspace using the default branch.' :
+                        'Select an example to start a new workspace.'}


nitpick: Sounds good. Adding an alternartive according to the specs. Feel free to leave as is. Your call. 📞

Suggested change

'Select an example to start a new workspace.'}

'Create a new workspace using one of the example projects below.'}

gtsiolis · 2021-03-23T14:26:57Z

components/dashboard/src/workspaces/Workspaces.tsx

@@ -85,6 +85,10 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                        onClick: () => { if (wsModel) wsModel.limit = 200; }
                    }]} />
                </div>
+                {wsModel && this.state?.workspaces.length > 0 ? 
+                 <button onClick={toggleStartWSModal} className="ml-2 font-medium">Start Workspace</button>


suggestion: Same as with the button on the empty state.

Suggested change

<button onClick={toggleStartWSModal} className="ml-2 font-medium">Start Workspace</button>

<button onClick={toggleStartWSModal} className="ml-2 font-medium">New Workspace</button>

gtsiolis · 2021-03-23T14:27:31Z

components/dashboard/src/workspaces/Workspaces.tsx

-                                <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>
-                                <button onClick={toggleTemplateModal} className="font-medium">Select Template</button>
+                                <div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or start a workspace for a recently used project. <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>
+                                <button onClick={toggleStartWSModal} className="font-medium">Start Workspace</button>


suggestion: Using a similar voice and tone as the rest of the product sounds good. WDYT?

Suggested change

<button onClick={toggleStartWSModal} className="font-medium">Start Workspace</button>

<button onClick={toggleStartWSModal} className="font-medium">New Workspace</button>

gtsiolis · 2021-03-23T14:29:30Z

components/dashboard/src/workspaces/Workspaces.tsx

@@ -85,6 +85,10 @@ export class Workspaces extends React.Component<WorkspacesProps, WorkspacesState
                        onClick: () => { if (wsModel) wsModel.limit = 200; }
                    }]} />
                </div>
+                {wsModel && this.state?.workspaces.length > 0 ? 


praise: Thanks for hiding this when the list is empty! 🎖️

svenefftinge · 2021-03-23T16:10:49Z

/werft run

👍 started the job as gitpod-build-sefftinge-dashboard-start-project-3534.9

svenefftinge requested a review from gtsiolis March 22, 2021 20:32

svenefftinge force-pushed the sefftinge/dashboard-start-project-3534 branch from 085fdac to 17e546a Compare March 22, 2021 20:33

gtsiolis approved these changes Mar 23, 2021

View reviewed changes

svenefftinge force-pushed the sefftinge/dashboard-start-project-3534 branch from 17e546a to 1dbb932 Compare March 23, 2021 15:58

[Dashboard] Start ws for recently used repos

61f0165

svenefftinge force-pushed the sefftinge/dashboard-start-project-3534 branch from 1dbb932 to 61f0165 Compare March 23, 2021 15:59

svenefftinge merged commit 376ea27 into main Mar 23, 2021

svenefftinge deleted the sefftinge/dashboard-start-project-3534 branch March 23, 2021 16:21

	<div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or start a workspace for a recently used project. <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>
	<div className="text-center pb-6 text-gray-500">Prefix any git repository URL with gitpod.io/# or start a workspace for a recently used project. <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 more</a></div>

	<h3 className="mb-2">No Recent Projects</h3>
	<h3 className="mb-2 text-gray-500">No Recent Projects</h3>

	'Create a new workspace using the default branch.' :
	'Create a new workspace using the default branch for frequently used projects.' :

	'Select an example to start a new workspace.'}
	'Create a new workspace using one of the example projects below.'}

	<button onClick={toggleStartWSModal} className="ml-2 font-medium">Start Workspace</button>
	<button onClick={toggleStartWSModal} className="ml-2 font-medium">New Workspace</button>

[Dashboard] Start ws for recently used repos #3539

[Dashboard] Start ws for recently used repos #3539

Uh oh!

Conversation

svenefftinge commented Mar 22, 2021

Uh oh!

svenefftinge commented Mar 22, 2021 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

svenefftinge commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gtsiolis commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gtsiolis commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

svenefftinge commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gtsiolis 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!

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!

svenefftinge commented Mar 23, 2021 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

svenefftinge commented Mar 22, 2021 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading

svenefftinge commented Mar 23, 2021 •

edited by werft-gitpod-dev-com bot

Loading