@@ -14,9 +14,13 @@ import { useContext, useEffect, useState } from "react";
14
14
import { getGitpodService } from "../service/service" ;
15
15
import { getCurrentTeam , TeamsContext } from "../teams/teams-context" ;
16
16
import { ThemeContext } from "../theme-context" ;
17
- import { PrebuildInfo , Project } from "@gitpod/gitpod-protocol" ;
17
+ import { PrebuildInfo , PrebuiltWorkspaceState , Project } from "@gitpod/gitpod-protocol" ;
18
18
import { toRemoteURL } from "./render-utils" ;
19
19
import ContextMenu from "../components/ContextMenu" ;
20
+ import StatusDone from "../icons/StatusDone.svg" ;
21
+ import StatusPaused from "../icons/StatusPaused.svg" ;
22
+ import StatusRunning from "../icons/StatusRunning.svg" ;
23
+ import StatusFailed from "../icons/StatusFailed.svg" ;
20
24
21
25
export default function ( ) {
22
26
const location = useLocation ( ) ;
@@ -60,10 +64,6 @@ export default function () {
60
64
history . push ( newProjectUrl ) ;
61
65
}
62
66
63
- const viewAllPrebuilds = ( p : Project ) => {
64
- history . push ( `/${ ! ! team ? team . slug : 'projects' } /${ p . name } /prebuilds` ) ;
65
- }
66
-
67
67
const onRemoveProject = async ( p : Project ) => {
68
68
await getGitpodService ( ) . server . deleteProject ( p . id ) ;
69
69
await updateProjects ( ) ;
@@ -76,6 +76,23 @@ export default function () {
76
76
return true ;
77
77
}
78
78
79
+ const teamOrUserSlug = ! ! team ? team . slug : 'projects' ;
80
+
81
+ const getPrebuildStatusIcon = ( status : PrebuiltWorkspaceState ) => {
82
+ switch ( status ) {
83
+ case undefined : // Fall through
84
+ case "queued" :
85
+ return StatusPaused ;
86
+ case "building" :
87
+ return StatusRunning ;
88
+ case "aborted" : // Fall through
89
+ case "timeout" :
90
+ return StatusFailed ;
91
+ case "available" :
92
+ return StatusDone ;
93
+ }
94
+ }
95
+
79
96
return < >
80
97
< Header title = "Projects" subtitle = "Manage recently added projects." />
81
98
{ projects . length < 1 && (
@@ -106,10 +123,10 @@ export default function () {
106
123
< button className = "ml-2" onClick = { ( ) => onNewProject ( ) } > New Project</ button >
107
124
</ div >
108
125
< div className = "mt-4 grid grid-cols-3 gap-4" >
109
- { projects . filter ( filter ) . map ( p => ( < div key = { `project-${ p . id } ` } className = "h-48 " >
110
- < div className = "h-5/6 border border-gray-200 dark:border-gray-800 rounded-t-xl" >
111
- < div className = "h-3/4 p-6" >
112
- < div className = "flex self-center text-base text-gray-900 dark:text-gray-50 font-medium" >
126
+ { projects . filter ( filter ) . map ( p => ( < div key = { `project-${ p . id } ` } className = "h-52 " >
127
+ < div className = "h-42 border border-gray-100 dark:border-gray-800 rounded-t-xl" >
128
+ < div className = "h-32 p-6" >
129
+ < div className = "flex text-xl font-semibold text-gray-700 dark:text-gray-200 font-medium" >
113
130
< Link to = { `/${ ! ! team ? team . slug : 'projects' } /${ p . name } ` } >
114
131
{ p . name }
115
132
</ Link >
@@ -122,19 +139,36 @@ export default function () {
122
139
} ] } />
123
140
</ div >
124
141
</ div >
125
- < p > { toRemoteURL ( p . cloneUrl ) } </ p >
142
+ < a href = { p . cloneUrl . replace ( / \. g i t $ / , '' ) } >
143
+ < p className = "hover:text-gray-600 dark:hover:text-gray-400 dark:text-gray-500" > { toRemoteURL ( p . cloneUrl ) } </ p >
144
+ </ a >
145
+ </ div >
146
+ < div className = "h-10 px-6 py-1 text-gray-400 text-sm" >
147
+ < span className = "hover:text-gray-600 dark:hover:text-gray-300" >
148
+ < Link to = { `/${ teamOrUserSlug } /${ p . name } ` } >
149
+ Branches
150
+ </ Link >
151
+ </ span >
152
+ < span className = "mx-2 my-auto" > ·</ span >
153
+ < span className = "hover:text-gray-600 dark:hover:text-gray-300" >
154
+ < Link to = { `/${ teamOrUserSlug } /${ p . name } /prebuilds` } >
155
+ Prebuilds
156
+ </ Link >
157
+ </ span >
126
158
</ div >
127
- < div className = "h-1/4 px-6 py-1" > < p > __ Active Branches</ p > </ div >
128
159
</ div >
129
- < div className = "h-1/6 px-6 border rounded-b-xl dark:border-gray-800 bg-gray-200 cursor-pointer" onClick = { ( ) => viewAllPrebuilds ( p ) } >
160
+ < div className = "h-10 px-4 border rounded-b-xl dark:border-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-800" >
130
161
{ lastPrebuilds . get ( p . id )
131
- ? ( < div className = "flex flex-row space-x-3 h-full text-sm" >
132
- < div className = { "my-auto rounded-full w-3 h-3 text-sm align-middle " + ( true ? "bg-green-500" : "bg-gray-400" ) } >
133
-
134
- </ div >
135
- < div className = "my-auto" > { lastPrebuilds . get ( p . id ) ! . branch } </ div >
136
- < div className = "my-auto text-gray-400" > { moment ( lastPrebuilds . get ( p . id ) ! . startedAt , "YYYYMMDD" ) . fromNow ( ) } </ div >
137
- < div className = "my-auto text-gray-400 flex-grow text-right" > View All ⟶</ div >
162
+ ? ( < div className = "flex flex-row h-full text-sm justify-between" >
163
+ < Link to = { `/${ teamOrUserSlug } /${ p . name } /${ lastPrebuilds . get ( p . id ) ! . id } ` } className = "flex my-auto group space-x-2" >
164
+ < img className = "h-4 w-4 my-auto" src = { getPrebuildStatusIcon ( lastPrebuilds . get ( p . id ) ! . status ) } />
165
+ < div className = "my-auto font-semibold text-gray-500 dark:text-gray-400 truncate w-24" title = { lastPrebuilds . get ( p . id ) ! . branch } > { lastPrebuilds . get ( p . id ) ! . branch } </ div >
166
+ < span className = "mx-1 my-auto text-gray-400 dark:text-gray-600" > ·</ span >
167
+ < div className = "my-auto text-gray-400 dark:text-gray-500 flex-grow hover:text-gray-800 dark:hover:text-gray-300" > { moment ( lastPrebuilds . get ( p . id ) ! . startedAt , "YYYYMMDD" ) . fromNow ( ) } </ div >
168
+ </ Link >
169
+ < Link to = { `/${ teamOrUserSlug } /${ p . name } /prebuilds` } className = "my-auto group" >
170
+ < div className = "flex my-auto text-gray-400 flex-grow text-right group-hover:text-gray-600 dark:hover:text-gray-300" > View All →</ div >
171
+ </ Link >
138
172
</ div > )
139
173
: ( < div className = "flex h-full text-md" >
140
174
< p className = "my-auto " > No recent prebuilds</ p >
@@ -143,10 +177,10 @@ export default function () {
143
177
</ div > ) ) }
144
178
{ ! searchFilter && (
145
179
< div key = "new-project"
146
- className = "h-48 border-dashed border-2 border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl focus:bg-gitpod-kumquat-light transition ease-in-out group" >
180
+ className = "h-52 border-dashed border-2 border-gray-100 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl focus:bg-gitpod-kumquat-light transition ease-in-out group" >
147
181
< Link to = { newProjectUrl } >
148
182
< div className = "flex h-full" >
149
- < div className = "m-auto" > New Project</ div >
183
+ < div className = "m-auto text-gray-400 dark:text-gray-600 " > New Project</ div >
150
184
</ div >
151
185
</ Link >
152
186
</ div >
0 commit comments