Merge branch 'main' into bradnew-project-repo-search

Author: selfcontained

components/dashboard/src/Login.tsx

@@ -155,7 +155,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                     {providerFromContext ? (
                                         <button
                                             key={"button" + providerFromContext.host}
-                                            className="btn-login flex-none w-56 h-10 p-0 inline-flex"
+                                            className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                             onClick={() => openLogin(providerFromContext!.host)}
                                         >
                                             {iconForAuthProvider(providerFromContext.authProviderType)}
@@ -167,7 +167,7 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
                                         authProviders.data?.map((ap) => (
                                             <button
                                                 key={"button" + ap.host}
-                                                className="btn-login flex-none w-56 h-10 p-0 inline-flex"
+                                                className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                                 onClick={() => openLogin(ap.host)}
                                             >
                                                 {iconForAuthProvider(ap.authProviderType)}

components/dashboard/src/components/Button.tsx

@@ -49,13 +49,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 className={classNames(
                     "cursor-pointer my-auto",
                     "text-sm font-medium whitespace-nowrap",
-                    "rounded-md focus:outline-none focus:ring transition ease-in-out",
+                    "rounded-xl focus:outline-none focus:ring transition ease-in-out",
                     spacing === "compact" ? ["px-1 py-1"] : null,
                     spacing === "default" ? ["px-4 py-2"] : null,
                     type === "primary"
                         ? [
-                              "bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600",
-                              "text-gray-100 dark:text-green-100",
+                              "bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe",
+                              "text-gray-50 dark:text-gray-900",
                           ]
                         : null,
                     type === "secondary"

components/dashboard/src/components/EmptyMessage.tsx

@@ -23,7 +23,7 @@ export const EmptyMessage: FC<Props> = ({ title, subtitle, buttonText, onClick,
     return (
         <div
             className={classNames(
-                "w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-900 px-4 py-14",
+                "w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-14",
                 className,
             )}
         >

components/dashboard/src/components/SelectableCardSolid.tsx

@@ -27,19 +27,19 @@ function SelectableCardSolid(props: SelectableCardSolidProps) {
 
     return (
         <div
-            className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
+            className={`rounded-xl px-2 py-2 flex flex-col cursor-pointer group transition ease-in-out ${
                 isFocused ? "ring-2 ring-blue-500" : ""
             } ${
                 props.selected
-                    ? "bg-gray-800 dark:bg-gray-100"
-                    : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
+                    ? "border-4 border-gray-500 dark:border-gray-50"
+                    : "hover:bg-gray-100 dark:hover:bg-gray-800 border-4 border-gray-100 dark:border-gray-800"
             } ${props.className || ""}`}
             onClick={props.onClick}
         >
             <div className="flex items-center">
                 <p
                     className={`w-full pl-1 text-base font-semibold truncate ${
-                        props.selected ? "text-gray-100 dark:text-gray-600" : "text-gray-600 dark:text-gray-500"
+                        props.selected ? "text-gray-600 dark:text-gray-400" : "text-gray-600 dark:text-gray-400"
                     }`}
                     title={props.title}
                 >

components/dashboard/src/index.css

@@ -54,7 +54,7 @@
 @layer components {
     /* TODO: deprecate button styles in favor of using <Button> component and handling there */
     button {
-        @apply cursor-pointer px-4 py-2 my-auto bg-green-600 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-600 text-gray-100 dark:text-green-100 text-sm font-medium rounded-md focus:outline-none focus:ring transition ease-in-out;
+        @apply cursor-pointer px-4 py-2 my-auto bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe text-gray-50 dark:text-gray-900 text-sm font-medium rounded-xl focus:outline-none focus:ring transition ease-in-out;
     }
     button.secondary {
         @apply bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-500 dark:text-gray-100 hover:text-gray-600;
@@ -78,7 +78,7 @@
     }
 
     code {
-        @apply bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
+        @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
     }
 
     textarea,

components/dashboard/src/teams/Members.tsx

@@ -19,6 +19,7 @@ import searchIcon from "../icons/search.svg";
 import { teamsService } from "../service/public-api";
 import { useCurrentUser } from "../user-context";
 import { SpinnerLoader } from "../components/Loader";
+import { Delayed } from "../components/Delayed";
 import { InputField } from "../components/forms/InputField";
 import { InputWithCopy } from "../components/InputWithCopy";
 
@@ -74,6 +75,15 @@ export default function MembersPage() {
         return !!owners?.some((o) => o.userId === user?.id);
     }, [org.data?.members, user?.id]);
 
+    // Note: We would hardly get here, but just in case. We should show a loader instead of blank section.
+    if (org.isLoading) {
+        return (
+            <Delayed>
+                <SpinnerLoader />
+            </Delayed>
+        );
+    }
+
     const filteredMembers =
         org.data?.members.filter((m) => {
             if (!!roleFilter && m.role !== roleFilter) {
@@ -105,7 +115,7 @@ export default function MembersPage() {
                             onChange={(e) => setSearchText(e.target.value)}
                         />
                     </div>
-                    <div className="py-2 pl-3 pr-1 border border-gray-100 ml-2 rounded-md">
+                    <div className="py-2 pl-3 pr-1 border border-gray-100 dark:border-gray-800 ml-2 rounded-md">
                         <DropDown
                             customClasses="w-32"
                             activeEntry={
@@ -163,7 +173,7 @@ export default function MembersPage() {
                         </ItemField>
                     </Item>
                     {filteredMembers.length === 0 ? (
-                        <SpinnerLoader />
+                        <p className="pt-16 text-center">No members found</p>
                     ) : (
                         filteredMembers.map((m) => (
                             <Item className="grid grid-cols-3" key={m.userId}>

components/dashboard/src/user-settings/Integrations.tsx

@@ -465,7 +465,7 @@ function GitIntegrations() {
             </div>
 
             {providers && providers.length === 0 && (
-                <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-900">
+                <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-800">
                     <div className="m-auto text-center">
                         <Heading2 color="light" className="self-center mb-4">
                             No Git Integrations

components/dashboard/tailwind.config.js

@@ -15,26 +15,29 @@ module.exports = {
     theme: {
         extend: {
             colors: {
-                gray: colors.warmGray,
                 green: colors.lime,
                 orange: colors.amber,
-                blue: {
-                    light: "#75A9EC",
-                    DEFAULT: "#5C8DD6",
-                    dark: "#265583",
-                },
                 // TODO: figure out if we want to just pull in the specific gitpod-* colors
                 teal: colors.teal,
                 sky: colors.sky,
                 rose: colors.rose,
                 "gitpod-black": "#161616",
-                "gitpod-gray": "#8E8787",
                 "gitpod-red": "#CE4A3E",
-                "gitpod-kumquat-light": "#FFE4BC",
-                "gitpod-kumquat": "#FFB45B",
-                "gitpod-kumquat-dark": "#FF8A00",
-                "gitpod-kumquat-darker": "#f28300",
-                "gitpod-kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
+                "kumquat-dark": "#FF8A00",
+                "kumquat-base": "#FFAE33",
+                "kumquat-ripe": "#FFB45B",
+                "kumquat-light": "#FFE4BC",
+                "kumquat-gradient": "linear-gradient(137.41deg, #FFAD33 14.37%, #FF8A00 91.32%)",
+                "gray-900": "#12100C",
+                "gray-800": "#23211E",
+                "gray-700": "#514F4D",
+                "gray-600": "#565451",
+                "gray-500": "#666564",
+                "gray-400": "#999795",
+                "gray-300": "#DADADA",
+                "gray-200": "#ECE7E5",
+                "gray-100": "#F5F4F4",
+                "gray-50": "#F9F9F9",
             },
             container: {
                 center: true,

components/gitpod-db/src/team-db.ts

@@ -21,7 +21,7 @@ export interface TeamDB extends TransactionalDB<TeamDB> {
         limit: number,
         orderBy: keyof Team,
         orderDir: "ASC" | "DESC",
-        searchTerm: string,
+        searchTerm?: string,
     ): Promise<{ total: number; rows: Team[] }>;
     findTeamById(teamId: string): Promise<Team | undefined>;
     findTeamByMembershipId(membershipId: string): Promise<Team | undefined>;

components/gitpod-db/src/typeorm/team-db-impl.ts

@@ -65,9 +65,13 @@ export class TeamDBImpl extends TransactionalDBImpl<TeamDB> implements TeamDB {
         searchTerm?: string,
     ): Promise<{ total: number; rows: Team[] }> {
         const teamRepo = await this.getTeamRepo();
-        const queryBuilder = teamRepo
-            .createQueryBuilder("team")
-            .where("LOWER(team.name) LIKE LOWER(:searchTerm)", { searchTerm: `%${searchTerm}%` })
+        let queryBuilder = teamRepo.createQueryBuilder("team");
+        if (searchTerm) {
+            queryBuilder = queryBuilder.where("LOWER(team.name) LIKE LOWER(:searchTerm)", {
+                searchTerm: `%${searchTerm}%`,
+            });
+        }
+        queryBuilder = queryBuilder
             .andWhere("deleted = 0")
             .andWhere("markedDeleted = 0")
             .skip(offset)

components/server/src/authorization/authorizer.ts

@@ -11,6 +11,8 @@ import { Project, TeamMemberRole } from "@gitpod/gitpod-protocol";
 import { ApplicationError, ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import {
     AllResourceTypes,
+    InstallationID,
+    InstallationPermission,
     OrganizationPermission,
     Permission,
     ProjectPermission,
@@ -54,6 +56,31 @@ export const SYSTEM_USER = "SYSTEM_USER";
 export class Authorizer {
     constructor(private authorizer: SpiceDBAuthorizer) {}
 
+    async hasPermissionOnInstallation(userId: string, permission: InstallationPermission): Promise<boolean> {
+        if (userId === SYSTEM_USER) {
+            return true;
+        }
+
+        const req = v1.CheckPermissionRequest.create({
+            subject: subject("user", userId),
+            permission,
+            resource: object("installation", InstallationID),
+            consistency,
+        });
+
+        return this.authorizer.check(req, { userId });
+    }
+
+    async checkPermissionOnInstallation(userId: string, permission: InstallationPermission): Promise<void> {
+        if (await this.hasPermissionOnInstallation(userId, permission)) {
+            return;
+        }
+        throw new ApplicationError(
+            ErrorCodes.PERMISSION_DENIED,
+            `User ${userId} does not have permission '${permission}' on the installation.`,
+        );
+    }
+
     async hasPermissionOnOrganization(
         userId: string,
         permission: OrganizationPermission,
@@ -386,14 +413,19 @@ export class Authorizer {
         );
     }
 
-    async addWorkspaceToOrg(orgID: string, userID: string, workspaceID: string): Promise<void> {
+    async addWorkspaceToOrg(orgID: string, userID: string, workspaceID: string, shared: boolean): Promise<void> {
         if (await this.isDisabled(userID)) {
             return;
         }
-        await this.authorizer.writeRelationships(
+        const rels = [
             set(rel.workspace(workspaceID).org.organization(orgID)),
             set(rel.workspace(workspaceID).owner.user(userID)),
-        );
+        ];
+        if (shared) {
+            rels.push(set(rel.workspace(workspaceID).shared.anyUser));
+        }
+
+        await this.authorizer.writeRelationships(...rels);
     }
 
     async removeWorkspaceFromOrg(orgID: string, userID: string, workspaceID: string): Promise<void> {
@@ -403,9 +435,18 @@ export class Authorizer {
         await this.authorizer.writeRelationships(
             remove(rel.workspace(workspaceID).org.organization(orgID)),
             remove(rel.workspace(workspaceID).owner.user(userID)),
+            remove(rel.workspace(workspaceID).shared.anyUser),
         );
     }
 
+    async setWorkspaceIsShared(userID: string, workspaceID: string, shared: boolean): Promise<void> {
+        if (await this.isDisabled(userID)) {
+            return;
+        }
+        const op = shared ? set : remove;
+        await this.authorizer.writeRelationships(op(rel.workspace(workspaceID).shared.anyUser));
+    }
+
     async bulkCreateWorkspaceInOrg(ids: { orgID: string; userID: string; workspaceID: string }[]): Promise<void> {
         const rels = ids
             .map(({ orgID, userID, workspaceID }) => [

components/server/src/authorization/definitions.ts

@@ -8,7 +8,7 @@
 
 import { v1 } from "@authzed/authzed-node";
 
-const InstallationID = "1";
+export const InstallationID = "1";
 
 export type ResourceType =
     | UserResourceType
@@ -37,6 +37,7 @@ export type UserPermission =
     | "write_info"
     | "delete"
     | "make_admin"
+    | "admin_control"
     | "read_ssh"
     | "write_ssh"
     | "read_tokens"
@@ -48,7 +49,7 @@ export type InstallationResourceType = "installation";
 
 export type InstallationRelation = "member" | "admin";
 
-export type InstallationPermission = "create_organization";
+export type InstallationPermission = "create_organization" | "configure";
 
 export type OrganizationResourceType = "organization";
 
@@ -89,7 +90,7 @@ export type ProjectPermission =
 
 export type WorkspaceResourceType = "workspace";
 
-export type WorkspaceRelation = "org" | "owner";
+export type WorkspaceRelation = "org" | "owner" | "shared";
 
 export type WorkspacePermission = "access" | "start" | "stop" | "delete" | "read_info";
 
@@ -424,6 +425,26 @@ export const rel = {
                     },
                 };
             },
+
+            get shared() {
+                const result2 = {
+                    ...result,
+                    relation: "shared",
+                };
+                return {
+                    get anyUser() {
+                        return {
+                            ...result2,
+                            subject: {
+                                object: {
+                                    objectType: "user",
+                                    objectId: "*",
+                                },
+                            },
+                        } as v1.Relationship;
+                    },
+                };
+            },
         };
     },
 };

components/server/src/authorization/spicedb-authorizer.ts

@@ -6,6 +6,7 @@
 
 import { v1 } from "@authzed/authzed-node";
 import { log } from "@gitpod/gitpod-protocol/lib/util/logging";
+import { TrustedValue } from "@gitpod/gitpod-protocol/lib/util/scrubbing";
 
 import { getExperimentsClientForBackend } from "@gitpod/gitpod-protocol/lib/experiments/configcat-server";
 import { inject, injectable } from "inversify";
@@ -47,7 +48,9 @@ export class SpiceDBAuthorizer {
             return permitted;
         } catch (err) {
             error = err;
-            log.error("[spicedb] Failed to perform authorization check.", err, { req });
+            log.error("[spicedb] Failed to perform authorization check.", err, {
+                request: new TrustedValue(req),
+            });
             return false;
         } finally {
             observeSpicedbClientLatency("check", error, timer());
@@ -72,7 +75,7 @@ export class SpiceDBAuthorizer {
             return response;
         } catch (err) {
             error = err;
-            log.error("[spicedb] Failed to write relationships.", err, { updates });
+            log.error("[spicedb] Failed to write relationships.", err, { updates: new TrustedValue(updates) });
         } finally {
             observeSpicedbClientLatency("write", error, timer());
         }
@@ -104,7 +107,7 @@ export class SpiceDBAuthorizer {
             error = err;
             // While in we're running two authorization systems in parallel, we do not hard fail on writes.
             //TODO throw new ApplicationError(ErrorCodes.INTERNAL_SERVER_ERROR, "Failed to delete relationships.");
-            log.error("[spicedb] Failed to delete relationships.", err, { req });
+            log.error("[spicedb] Failed to delete relationships.", err, { request: new TrustedValue(req) });
             return [];
         } finally {
             observeSpicedbClientLatency("delete", error, timer());