Cell Disabled mode (#20222)

* wip

* Implement UI

* remove commented out code

* Cell disabled check for websockets

Author: filiptronicek

components/dashboard/src/cell-disabled/DisabledCell.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2024 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { Heading2 } from "@podkit/typography/Headings";
+import { TextMuted } from "@podkit/typography/TextMuted";
+import { useTheme } from "../theme-context";
+
+import cubicleImg from "../images/cubicle.webp";
+import cubicleDarkImg from "../images/cubicle-dark.webp";
+import cubicleImg2x from "../images/[email protected]";
+import cubicleDarkImg2x from "../images/[email protected]";
+
+export const DisabledCell = () => {
+    const { isDark } = useTheme();
+
+    return (
+        <div className="p-0 h-[100dvh] flex flex-col items-center justify-center">
+            <section className="flex flex-col justify-center items-center text-center">
+                <img
+                    src={isDark ? cubicleDarkImg : cubicleImg}
+                    srcSet={`${isDark ? cubicleDarkImg : cubicleImg} 1x, ${
+                        isDark ? cubicleDarkImg2x : cubicleImg2x
+                    } 2x`}
+                    alt="cubical illustration"
+                    width="240"
+                    height="251"
+                />
+                <Heading2 className="my-4">Thank you for evaluating Gitpod</Heading2>
+                <TextMuted>
+                    This evaluation instance is now stopped. <br />
+                    Please contact our team to move to next steps.
+                </TextMuted>
+            </section>
+        </div>
+    );
+};

components/dashboard/src/components/error-boundaries/QueryErrorBoundary.tsx

@@ -13,6 +13,7 @@ import { isGitpodIo } from "../../utils";
 import { CaughtError } from "./ReloadPageErrorBoundary";
 import { gitpodHostUrl } from "../../service/service";
 import QuickStart from "../QuickStart";
+import { DisabledCell } from "../../cell-disabled/DisabledCell";
 
 // Error boundary intended to catch and handle expected errors from api calls
 export const QueryErrorBoundary: FC = ({ children }) => {
@@ -57,6 +58,10 @@ const ExpectedQueryErrorsFallback: FC<FallbackProps> = ({ error, resetErrorBound
         return <div></div>;
     }
 
+    if (caughtError.code === ErrorCodes.CELL_EXPIRED) {
+        return <DisabledCell />;
+    }
+
     // User needs to Login
     if (caughtError.code === ErrorCodes.NOT_AUTHENTICATED) {
         console.log("clearing query cache for unauthenticated user");

components/dashboard/src/hooks/use-user-loader.ts

@@ -22,13 +22,17 @@ export const useUserLoader = () => {
         queryFn: async () => {
             const user = (await userClient.getAuthenticatedUser({})).user;
 
-            return user || null;
+            return user ?? null;
         },
         // We'll let an ErrorBoundary catch the error
         useErrorBoundary: true,
         // It's important we don't retry as we want to show the login screen as quickly as possible if a 401
         retry: (_failureCount: number, error: Error & { code?: number }) => {
-            return error.code !== ErrorCodes.NOT_AUTHENTICATED && error.code !== ErrorCodes.USER_DELETED;
+            return (
+                error.code !== ErrorCodes.NOT_AUTHENTICATED &&
+                error.code !== ErrorCodes.USER_DELETED &&
+                error.code !== ErrorCodes.CELL_EXPIRED
+            );
         },
         // docs: https://tanstack.com/query/v4/docs/react/guides/query-retries
         // backoff by doubling, max. 10s

components/gitpod-protocol/src/messaging/error.ts

@@ -107,6 +107,9 @@ export const ErrorCodes = {
     // 481 Professional plan is required for this operation
     PLAN_PROFESSIONAL_REQUIRED: 481 as const,
 
+    // 482 Cell Expired
+    CELL_EXPIRED: 482 as const,
+
     // 490 Too Many Running Workspace
     TOO_MANY_RUNNING_WORKSPACES: 490 as const,
 

components/public-api/gitpod/v1/error.proto

@@ -28,6 +28,7 @@ message FailedPreconditionDetails {
     RepositoryNotFoundError repository_not_found = 5;
     RepositoryUnauthorizedError repository_unauthorized = 6;
     ImageBuildLogsNotYetAvailableError image_build_logs_not_yet_available = 7;
+    CellDisabledError cell_is_disabled = 8;
   }
 }
 
@@ -64,6 +65,8 @@ message RepositoryUnauthorizedError {
 
 message ImageBuildLogsNotYetAvailableError {}
 
+message CellDisabledError {}
+
 /*
 // details for INVALID_ARGUMENT status code
 // TODO: this is not yet implemented in the backend