Add banner when there is a problem with credits

airbyte-webapp/src/packages/cloud/lib/domain/cloudWorkspaces/types.ts

@@ -1,8 +1,16 @@
+export enum CreditStatus {
+  "POSITIVE" = "positive",
+  "NEGATIVE_WITHIN_GRACE_PERIOD" = "negative_within_grace_period",
+  "NEGATIVE_BEYOND_GRACE_PERIOD" = "negative_beyond_grace_period",
+  "NEGATIVE_MAX_THRESHOLD" = "negative_max_threshold",
+}
+
 export interface CloudWorkspace {
   name: string;
   workspaceId: string;
   billingUserId: string;
   remainingCredits: number;
+  creditStatus?: CreditStatus;
 }
 
 export interface CreditConsumptionByConnector {

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -100,6 +100,10 @@
   "credits.connection": "Connection",
   "credits.usage": "Usage",
   "credits.noData": "Data is empty",
+  "credits.creditsProblem.negative_within_grace_period": "Your workspace is out of credits! Please add more credits to make sure your syncs keep running!",
+  "credits.creditsProblem.negative_beyond_grace_period": "No syncs can run because this workspace is out of credits! Add more credits to resume syncing.",
+  "credits.creditsProblem.negative_max_threshold": "No syncs can run because this workspace is out of credits! Add more credits to resume syncing.",
+  "credits.creditsProblem.link": "Visit credits page",
 
   "firebase.auth.success": "A new confirmation email has been sent to you",
   "firebase.auth.error.invalidPassword": "Incorrect password",

airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx

@@ -8,6 +8,10 @@ import SideBar from "packages/cloud/views/layout/SideBar";
 import { InsufficientPermissionsErrorBoundary } from "./InsufficientPermissionsErrorBoundary";
 import { StartOverErrorView } from "views/common/StartOverErrorView";
 import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
+import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
+import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/WorkspacesService";
+import { CreditStatus } from "packages/cloud/lib/domain/cloudWorkspaces/types";
+import { CreditsProblemBanner } from "./components/CreditsProblemBanner";
 
 const MainContainer = styled.div`
   width: 100%;
@@ -24,21 +28,46 @@ const Content = styled.div`
   height: 100%;
 `;
 
-const MainView: React.FC = (props) => (
-  <MainContainer>
-    <InsufficientPermissionsErrorBoundary
-      errorComponent={<StartOverErrorView />}
-    >
-      <SideBar />
-      <Content>
-        <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />}>
-          <React.Suspense fallback={<LoadingPage />}>
-            {props.children ?? <Outlet />}
-          </React.Suspense>
-        </ResourceNotFoundErrorBoundary>
-      </Content>
-    </InsufficientPermissionsErrorBoundary>
-  </MainContainer>
-);
+const DataBlock = styled.div<{ hasBanner?: boolean }>`
+  width: 100%;
+  height: 100%;
+  padding-top: ${({ hasBanner }) => (hasBanner ? 30 : 0)}px;
+`;
+
+const MainView: React.FC = (props) => {
+  const workspace = useCurrentWorkspace();
+  const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId);
+  const showBanner =
+    cloudWorkspace.creditStatus &&
+    [
+      CreditStatus.NEGATIVE_BEYOND_GRACE_PERIOD,
+      CreditStatus.NEGATIVE_MAX_THRESHOLD,
+      CreditStatus.NEGATIVE_WITHIN_GRACE_PERIOD,
+    ].includes(cloudWorkspace.creditStatus);
+
+  return (
+    <MainContainer>
+      <InsufficientPermissionsErrorBoundary
+        errorComponent={<StartOverErrorView />}
+      >
+        <SideBar />
+        <Content>
+          {cloudWorkspace.creditStatus && showBanner && (
+            <CreditsProblemBanner status={cloudWorkspace.creditStatus} />
+          )}
+          <DataBlock hasBanner={showBanner}>
+            <ResourceNotFoundErrorBoundary
+              errorComponent={<StartOverErrorView />}
+            >
+              <React.Suspense fallback={<LoadingPage />}>
+                {props.children ?? <Outlet />}
+              </React.Suspense>
+            </ResourceNotFoundErrorBoundary>
+          </DataBlock>
+        </Content>
+      </InsufficientPermissionsErrorBoundary>
+    </MainContainer>
+  );
+};
 
 export default MainView;

airbyte-webapp/src/packages/cloud/views/layout/MainView/components/CreditsProblemBanner.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+import { FormattedMessage } from "react-intl";
+
+import { CreditStatus } from "packages/cloud/lib/domain/cloudWorkspaces/types";
+import { Link } from "components/Link";
+import { CloudRoutes } from "packages/cloud/cloudRoutes";
+
+const Container = styled.div`
+  height: 30px;
+  width: 100%;
+  background: ${({ theme }) => theme.redColor};
+  color: ${({ theme }) => theme.blackColor};
+  text-align: center;
+  position: fixed;
+  z-index: 3;
+  font-size: 12px;
+  line-height: 30px;
+`;
+const CreditsLink = styled(Link)`
+  color: ${({ theme }) => theme.blackColor};
+  margin-left: 8px;
+`;
+
+type CreditsProblemBannerProps = {
+  status: CreditStatus;
+};
+
+const CreditsProblemBanner: React.FC<CreditsProblemBannerProps> = ({
+  status,
+}) => (
+  <Container>
+    <FormattedMessage id={`credits.creditsProblem.${status}`} />
+    <CreditsLink to={CloudRoutes.Credits}>
+      <FormattedMessage id="credits.creditsProblem.link" />
+    </CreditsLink>
+  </Container>
+);
+
+export { CreditsProblemBanner };

airbyte-webapp/src/theme.ts

@@ -37,6 +37,7 @@ export const theme = {
   greyColor0: "#F7F7FA",
 
   whiteColor: "#FFFFFF",
+  blackColor: "#000000",
   beigeColor: "#FEF9F4",
   darkBeigeColor: "#FFEBD7",
   borderTableColor: "#D3DCE4",