[dashboard] Allow granting a user 20 extra hours from the admin dashboard (#3929)

Co-authored-by: George Tsiolis <[email protected]>

Author: jankeromnes

components/dashboard/src/admin/UserDetail.tsx

@@ -104,45 +104,52 @@ export default function UserDetail(p: { user: User }) {
                     <div className="flex w-full mt-6">
                         <Property name="Sign Up Date">{moment(user.creationDate).format('MMM D, YYYY')}</Property>
                         <Property name="Remaining Hours"
-                            action={
-                                accountStatement && {
+                            actions={
+                                accountStatement && [{
                                     label: 'View Account Statement',
                                     onClick: () => setViewAccountStatement(true)
-                                }
+                                }, {
+                                    label: 'Grant 20 Extra Hours',
+                                    onClick: async () => {
+                                        await getGitpodService().server.adminGrantExtraHours(user.id, 20);
+                                        setAccountStatement(await getGitpodService().server.adminGetAccountStatement(user.id));
+                                    }
+                                }]
                             }
                         >{accountStatement?.remainingHours ? accountStatement?.remainingHours.toString() : '---'}</Property>
                         <Property
                             name="Plan"
-                            action={accountStatement && {
+                            actions={accountStatement && [{
                                 label: (isProfessionalOpenSource ? 'Disable' : 'Enable') + ' Professional OSS',
-                                onClick: () => {
-                                    getGitpodService().server.adminSetProfessionalOpenSource(user.id, !isProfessionalOpenSource);
+                                onClick: async () => {
+                                    await getGitpodService().server.adminSetProfessionalOpenSource(user.id, !isProfessionalOpenSource);
+                                    setAccountStatement(await getGitpodService().server.adminGetAccountStatement(user.id));
                                 }
-                            }}
+                            }]}
                         >{accountStatement?.subscriptions ? accountStatement.subscriptions.filter(s => Subscription.isActive(s, new Date().toISOString())).map(s => Plans.getById(s.planId)?.name).join(', ') : '---'}</Property>
                     </div>
                     <div className="flex w-full mt-6">
                         <Property name="Feature Flags"
-                            action={{
+                            actions={[{
                                 label: 'Edit Feature Flags',
                                 onClick: () => {
                                     setEditFeatureFlags(true);
                                 }
-                            }}
+                            }]}
                         >{user.featureFlags?.permanentWSFeatureFlags?.join(', ') || '---'}</Property>
                         <Property name="Roles"
-                            action={{
+                            actions={[{
                                 label: 'Edit Roles',
                                 onClick: () => {
                                     setEditRoles(true);
                                 }
-                            }}
+                            }]}
                         >{user.rolesOrPermissions?.join(', ') || '---'}</Property>
                         <Property name="Student"
-                            action={ !isStudent ? {
+                            actions={ !isStudent ? [{
                                 label: `Make '${emailDomain}' a student domain`,
                                 onClick: addStudentDomain
-                            } :  undefined}
+                            }] :  undefined}
                         >{isStudent === undefined ? '---' : (isStudent ? 'Enabled' : 'Disabled')}</Property>
                     </div>
                 </div>
@@ -185,17 +192,19 @@ function Label(p: { text: string, color: string }) {
     return <div className={`ml-3 text-sm text-${p.color}-600 truncate bg-${p.color}-100 px-1.5 py-0.5 rounded-md my-auto`}>{p.text}</div>;
 }
 
-export function Property(p: { name: string, children: string | ReactChild, action?: { label: string, onClick: () => void } }) {
+export function Property(p: { name: string, children: string | ReactChild, actions?: { label: string, onClick: () => void }[] }) {
     return <div className="ml-3 flex flex-col w-4/12 truncate">
         <div className="text-base text-gray-500 truncate">
             {p.name}
         </div>
         <div className="text-lg text-gray-600 font-semibold truncate">
             {p.children}
         </div>
-        <div className="cursor-pointer text-sm text-blue-400 hover:text-blue-500 truncate" onClick={p.action?.onClick}>
-            {p.action?.label || ''}
-        </div>
+        {(p.actions || []).map(a =>
+            <div className="cursor-pointer text-sm text-blue-400 hover:text-blue-500 truncate" onClick={a.onClick}>
+                {a.label || ''}
+            </div>
+        )}
     </div>;
 }
 
@@ -253,4 +262,4 @@ function getRopEntries(user: User, updateUser: UpdateUserFunction): Entry[] {
         ...Object.entries(Permissions).map(e => createRopEntry(e[0] as RoleOrPermission)),
         ...Object.entries(Roles).map(e => createRopEntry(e[0] as RoleOrPermission, true))
     ];
-};
+};

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

@@ -28,6 +28,7 @@ export interface AdminServer {
     adminSetProfessionalOpenSource(userId: string, shouldGetProfOSS: boolean): Promise<void>;
     adminIsStudent(userId: string): Promise<boolean>;
     adminAddStudentEmailDomain(userId: string, domain: string): Promise<void>;
+    adminGrantExtraHours(userId: string, extraHours: number): Promise<void>;
 }
 
 export interface AdminGetListRequest<T> {

components/server/src/auth/rate-limiter.ts

@@ -120,6 +120,7 @@ function readConfig(): RateLimiterConfig {
         "adminGetAccountStatement":  { group: "default", points: 1 },
         "adminIsStudent":  { group: "default", points: 1 },
         "adminSetProfessionalOpenSource":  { group: "default", points: 1 },
+        "adminGrantExtraHours":  { group: "default", points: 1 },
         "checkout":  { group: "default", points: 1 },
         "createPortalSession":  { group: "default", points: 1 },
         "getAccountStatement":  { group: "default", points: 1 },

components/server/src/workspace/gitpod-server-impl.ts

@@ -1643,6 +1643,9 @@ export class GitpodServerImpl<Client extends GitpodClient, Server extends Gitpod
     async adminAddStudentEmailDomain(userId: string, domain: string): Promise<void> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
+    async adminGrantExtraHours(userId: string, extraHours: number): Promise<void> {
+        throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
+    }
     async isStudent(): Promise<boolean> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }