Add a simple message on the webapp when it is configured to run in de…

…mo mode (airbytehq#1835)

airbyte-webapp/nginx/default.conf.template

@@ -16,6 +16,7 @@ server {
                 window.PAPERCUPS_STORYTIME = "$PAPERCUPS_STORYTIME";
                 window.AIRBYTE_VERSION = "$AIRBYTE_VERSION";
                 window.API_URL = "$API_URL";
+                window.IS_DEMO = "$IS_DEMO";
                 </script>';
         sub_filter_once on;
     }

airbyte-webapp/src/components/SingletonCard/SingletonCard.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+
+import { H5 } from "../Titles";
+
+type IProps = {
+  title: string | React.ReactNode;
+  text: string | React.ReactNode;
+};
+
+const Singleton = styled.div`
+  position: fixed;
+  bottom: 0px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  padding: 25px 25px 22px;
+
+  background: ${({ theme }) => theme.lightPrimaryColor};
+  border: 1px solid ${({ theme }) => theme.greyColor20};
+  box-shadow: 0px 1px 2px ${({ theme }) => theme.shadowColor};
+  border-radius: 8px;
+`;
+
+const Title = styled(H5)`
+  margin-bottom: 5px;
+
+  color: ${({ theme }) => theme.primaryColor};
+
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 18px;
+`;
+
+const Text = styled.div`
+  color: ${({ theme }) => theme.mediumPrimaryColor};
+
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 17px;
+`;
+
+const SingletonCard: React.FC<IProps> = props => (
+  <Singleton>
+    <Title>{props.title}</Title>
+    <Text>{props.text}</Text>
+  </Singleton>
+);
+
+export default SingletonCard;

airbyte-webapp/src/components/SingletonCard/index.tsx

@@ -0,0 +1,3 @@
+import SingletonCard from "./SingletonCard";
+
+export default SingletonCard;

airbyte-webapp/src/config/index.ts

@@ -4,6 +4,7 @@ declare global {
     PAPERCUPS_STORYTIME?: string;
     AIRBYTE_VERSION?: string;
     API_URL?: string;
+    IS_DEMO?: string;
   }
 }
 
@@ -24,6 +25,7 @@ const config: {
     enableStorytime: boolean;
   };
   apiUrl: string;
+  isDemo: boolean;
   version?: string;
 } = {
   ui: {
@@ -53,7 +55,8 @@ const config: {
   apiUrl:
     window.API_URL ||
     process.env.REACT_APP_API_URL ||
-    `${window.location.protocol}//${window.location.hostname}:8001/api/v1/`
+    `${window.location.protocol}//${window.location.hostname}:8001/api/v1/`,
+  isDemo: window.IS_DEMO === "true"
 };
 
 export default config;

airbyte-webapp/src/locales/en.json

@@ -241,5 +241,8 @@
   "admin.exportConfigurationText": "Download an archive of all configuration and state data. Exported data can be upgraded to another Airbyte version or can be exported to a different Airbyte deployment. For more information visit the <lnk>configuration archive</lnk> page in our docs.",
   "admin.importConfigurationText": "Upload an archive of all configuration and state data. <b>Warning: This will overwrite all existing configuration!</b>",
   "admin.dropZoneTitle": "Drag 'n' drop file here, or click to select file",
-  "admin.dropZoneSubtitle": "Only *.tar and *.gz files will be accepted"
+  "admin.dropZoneSubtitle": "Only *.tar and *.gz files will be accepted",
+
+  "demo.message.title": "This demo is read-only",
+  "demo.message.body": "You cannot add or edit any connectors. You will see error messages on purpose if you try to do so."
 }

airbyte-webapp/src/pages/routes.tsx

@@ -19,6 +19,8 @@ import { AnalyticsService } from "../core/analytics/AnalyticsService";
 import useRouter from "../components/hooks/useRouterHook";
 import SupportChat from "../components/SupportChat";
 import useWorkspace from "../components/hooks/services/useWorkspaceHook";
+import SingletonCard from "../components/SingletonCard";
+import { FormattedMessage } from "react-intl";
 
 export enum Routes {
   Preferences = "/preferences",
@@ -154,6 +156,12 @@ export const Routing = () => {
           papercupsConfig={config.papercups}
           customerId={workspace.customerId}
         />
+        {config.isDemo && (
+          <SingletonCard
+            title={<FormattedMessage id="demo.message.title" />}
+            text={<FormattedMessage id="demo.message.body" />}
+          />
+        )}
       </Suspense>
     </Router>
   );

docker-compose.yaml

@@ -76,11 +76,12 @@ services:
     ports:
       - 8000:80
     environment:
-      - TRACKING_STRATEGY=${TRACKING_STRATEGY}
-      - PAPERCUPS_STORYTIME=${PAPERCUPS_STORYTIME:-}
-      - AIRBYTE_VERSION=${VERSION}
       - AIRBYTE_ROLE=${AIRBYTE_ROLE:-}
+      - AIRBYTE_VERSION=${VERSION}
       - API_URL=${API_URL}
+      - IS_DEMO=${IS_DEMO:-}
+      - PAPERCUPS_STORYTIME=${PAPERCUPS_STORYTIME:-}
+      - TRACKING_STRATEGY=${TRACKING_STRATEGY}
 volumes:
   workspace:
     name: ${WORKSPACE_DOCKER_MOUNT}

kube/overlays/dev/.env

@@ -13,3 +13,4 @@ TRACKING_STRATEGY=logging
 WORKER_ENVIRONMENT=kubernetes
 LOCAL_ROOT=/local_undefined
 PAPERCUPS_STORYTIME=disabled
+IS_DEMO=false

kube/overlays/stable/.env

@@ -13,3 +13,4 @@ TRACKING_STRATEGY=segment
 WORKER_ENVIRONMENT=kubernetes
 LOCAL_ROOT=/local_undefined
 PAPERCUPS_STORYTIME=enabled
+IS_DEMO=false

kube/resources/webapp.yaml

@@ -48,5 +48,10 @@ spec:
                 configMapKeyRef:
                   name: airbyte-env
                   key: PAPERCUPS_STORYTIME
+            - name: IS_DEMO
+              valueFrom:
+                configMapKeyRef:
+                  name: airbyte-env
+                  key: IS_DEMO
           ports:
             - containerPort: 80