@@ -22,6 +22,8 @@ import { User, RoleOrPermission } from "@gitpod/public-api/lib/gitpod/v1/user_pb
22
22
import { getPrimaryEmail } from "@gitpod/public-api-common/lib/user-utils" ;
23
23
import { ConfigurationsMigrationCoachmark } from "../repositories/coachmarks/MigrationCoachmark" ;
24
24
import { useInstallationConfiguration } from "../data/installation/installation-config-query" ;
25
+ import { useIsDataOps } from "../data/featureflag-query" ;
26
+ import { ProductLogo } from "../components/ProductLogo" ;
25
27
26
28
interface Entry {
27
29
title : string ;
@@ -34,9 +36,7 @@ export default function Menu() {
34
36
const location = useLocation ( ) ;
35
37
const { setCurrency } = useContext ( PaymentContext ) ;
36
38
const [ isFeedbackFormVisible , setFeedbackFormVisible ] = useState < boolean > ( false ) ;
37
-
38
- const { data : installationConfig , isLoading : isInstallationConfigLoading } = useInstallationConfiguration ( ) ;
39
- const isGitpodIo = isInstallationConfigLoading ? false : ! installationConfig ?. isDedicatedInstallation ;
39
+ const isDataOps = useIsDataOps ( ) ;
40
40
41
41
useEffect ( ( ) => {
42
42
const { server } = getGitpodService ( ) ;
@@ -79,16 +79,24 @@ export default function Menu() {
79
79
< ConfigurationsMigrationCoachmark >
80
80
< OrganizationSelector />
81
81
</ ConfigurationsMigrationCoachmark >
82
- { /* hidden on smaller screens (in its own menu below on smaller screens) */ }
83
- < div className = "hidden md:block pl-2" >
84
- < OrgPagesNav />
82
+ { /* Mobile Only Divider and User Menu */ }
83
+ < div className = "flex items-center md:hidden" >
84
+ < div className = "h-6 w-px bg-gray-300 dark:bg-gray-600 mx-2" />
85
+ < UserMenu user = { user } className = "" onFeedback = { handleFeedbackFormClick } withAdminLink />
86
+ </ div >
87
+ { /* Desktop Only Divider, User Menu, and Workspaces Nav */ }
88
+ < div className = "hidden md:flex items-center" >
89
+ < div className = "h-6 w-px bg-gray-300 dark:bg-gray-600 mx-2" />
90
+ < UserMenu user = { user } className = "" onFeedback = { handleFeedbackFormClick } />
91
+ < div className = "pl-4" >
92
+ < OrgPagesNav />
93
+ </ div >
85
94
</ div >
86
95
</ div >
87
96
< div className = "flex items-center w-auto" id = "menu" >
88
- { /* hidden on smaller screens - TODO: move to user menu on smaller screen */ }
97
+ { /* Right side nav - Desktop Only */ }
89
98
< nav className = "hidden md:block flex-1" >
90
- < ul className = "flex flex-1 items-center justify-between text-base text-gray-500 dark:text-gray-400 space-x-2" >
91
- < li className = "flex-1" > </ li >
99
+ < ul className = "flex flex-1 items-center justify-end text-base text-gray-500 dark:text-gray-400 space-x-4" >
92
100
{ user ?. rolesOrPermissions ?. includes ( RoleOrPermission . ADMIN ) && (
93
101
< li className = "cursor-pointer" >
94
102
< PillMenuItem
@@ -98,31 +106,32 @@ export default function Menu() {
98
106
/>
99
107
</ li >
100
108
) }
101
- { isGitpodIo && (
102
- < li className = "cursor-pointer" >
103
- < PillMenuItem name = "Feedback" onClick = { handleFeedbackFormClick } />
109
+ { ! isDataOps && (
110
+ < li >
111
+ < div className = "flex items-center gap-x-1 text-sm text-pk-content-secondary" >
112
+ < ProductLogo className = "h-4 w-auto" />
113
+ < span > Gitpod Classic</ span >
114
+ </ div >
104
115
</ li >
105
116
) }
106
117
</ ul >
107
118
</ nav >
108
- { /* Hide normal user menu on small screens */ }
109
- < UserMenu user = { user } className = "hidden md:block" />
110
- { /* Show a user menu w/ admin & feedback links on small screens */ }
111
- < UserMenu
112
- user = { user }
113
- className = "md:hidden"
114
- withAdminLink
115
- withFeedbackLink
116
- onFeedback = { handleFeedbackFormClick }
117
- />
119
+ { /* Right side items - Mobile Only */ }
120
+ < div className = "flex items-center space-x-3 md:hidden" >
121
+ { ! isDataOps && (
122
+ < div className = "flex items-center gap-x-1 text-sm text-pk-content-secondary" >
123
+ < ProductLogo className = "h-4 w-auto" />
124
+ < span > Gitpod Classic</ span >
125
+ </ div >
126
+ ) }
127
+ </ div >
118
128
</ div >
119
129
{ isFeedbackFormVisible && < FeedbackFormModal onClose = { onFeedbackFormClose } /> }
120
130
</ div >
121
131
</ header >
122
132
< Separator />
123
- { /* only shown on small screens */ }
133
+ { /* Mobile- only OrgPagesNav and Separator */ }
124
134
< OrgPagesNav className = "md:hidden app-container flex justify-start py-2" />
125
- { /* only shown on small screens */ }
126
135
< Separator className = "md:hidden" />
127
136
</ >
128
137
) ;
@@ -162,14 +171,13 @@ type UserMenuProps = {
162
171
user ?: User ;
163
172
className ?: string ;
164
173
withAdminLink ?: boolean ;
165
- withFeedbackLink ?: boolean ;
166
174
onFeedback ?: ( ) => void ;
167
175
} ;
168
- const UserMenu : FC < UserMenuProps > = ( { user, className, withAdminLink, withFeedbackLink , onFeedback } ) => {
176
+ const UserMenu : FC < UserMenuProps > = ( { user, className, withAdminLink, onFeedback } ) => {
169
177
const { data : installationConfig , isLoading : isInstallationConfigLoading } = useInstallationConfiguration ( ) ;
170
178
const isGitpodIo = isInstallationConfigLoading ? false : ! installationConfig ?. isDedicatedInstallation ;
171
179
172
- const extraSection = useMemo ( ( ) => {
180
+ const adminSection = useMemo ( ( ) => {
173
181
const items : ContextMenuEntry [ ] = [ ] ;
174
182
175
183
if ( withAdminLink && user ?. rolesOrPermissions ?. includes ( RoleOrPermission . ADMIN ) ) {
@@ -178,23 +186,17 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
178
186
link : "/admin" ,
179
187
} ) ;
180
188
}
181
- if ( withFeedbackLink && isGitpodIo ) {
182
- items . push ( {
183
- title : "Feedback" ,
184
- onClick : onFeedback ,
185
- } ) ;
186
- }
187
189
188
190
// Add a separator to the last item
189
191
if ( items . length > 0 ) {
190
192
items [ items . length - 1 ] . separator = true ;
191
193
}
192
194
193
195
return items ;
194
- } , [ isGitpodIo , onFeedback , user ?. rolesOrPermissions , withAdminLink , withFeedbackLink ] ) ;
196
+ } , [ user ?. rolesOrPermissions , withAdminLink ] ) ;
195
197
196
198
const menuEntries = useMemo ( ( ) => {
197
- return [
199
+ const entries : ContextMenuEntry [ ] = [
198
200
{
199
201
title : ( user && ( getPrimaryEmail ( user ) || user ?. name ) ) || "User" ,
200
202
customFontStyle : "text-gray-400" ,
@@ -215,15 +217,27 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
215
217
href : "https://www.gitpod.io/support/" ,
216
218
target : "_blank" ,
217
219
rel : "noreferrer" ,
218
- separator : true ,
219
- } ,
220
- ...extraSection ,
221
- {
222
- title : "Log out" ,
223
- href : gitpodHostUrl . asApiLogout ( ) . toString ( ) ,
220
+ separator : ! isGitpodIo ,
224
221
} ,
225
222
] ;
226
- } , [ extraSection , user ] ) ;
223
+
224
+ if ( isGitpodIo ) {
225
+ entries . push ( {
226
+ title : "Feedback" ,
227
+ onClick : onFeedback ,
228
+ separator : true ,
229
+ } ) ;
230
+ }
231
+
232
+ entries . push ( ...adminSection ) ;
233
+
234
+ entries . push ( {
235
+ title : "Log out" ,
236
+ href : gitpodHostUrl . asApiLogout ( ) . toString ( ) ,
237
+ } ) ;
238
+
239
+ return entries ;
240
+ } , [ adminSection , user , isGitpodIo , onFeedback ] ) ;
227
241
228
242
return (
229
243
< div
@@ -243,5 +257,5 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
243
257
function isSelected ( entry : Entry , location : Location < any > ) {
244
258
const all = [ entry . link , ...( entry . alternatives || [ ] ) ] . map ( ( l ) => l . toLowerCase ( ) ) ;
245
259
const path = location . pathname . toLowerCase ( ) ;
246
- return all . some ( ( n ) => n === path || n + "/" === path ) ;
260
+ return all . some ( ( n ) => n === path || n + "/" === path || path . startsWith ( n + "/" ) ) ;
247
261
}
0 commit comments