Display connection state in connection setting page (#13394)

* Display Connection State in Setting page

* memoize callback

* rendering and confirmaton

* setState API

* Input validation

* remove JSON step

* rename apiMethod to `updateState`

* test and adjust route

* skip if sync is running

* prevent state update when sync is running

* code editor component

* errors fixed

* scss style

* make linter happy

* Back to monaco editor

* Remove ability to edit state

* Adjust FE code

* Fix CSS problem

* Update airbyte-webapp/src/locales/en.json

Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>

* just use PRE to render state for now

Co-authored-by: Tim Roes <tim@airbyte.io>
Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>

airbyte-webapp/nginx/default.conf.template

@@ -10,7 +10,7 @@ server {
     #charset koi8-r;
     #access_log  /var/log/nginx/host.access.log  main;
 
-    add_header Content-Security-Policy "script-src * 'unsafe-inline';";
+    add_header Content-Security-Policy "script-src * 'unsafe-inline'; worker-src self blob:;";
 
     location / {
         root   /usr/share/nginx/html;

airbyte-webapp/package.json

@@ -25,6 +25,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@fullstory/browser": "^1.5.1",
+    "@monaco-editor/react": "^4.4.5",
     "@sentry/react": "^6.19.6",
     "@sentry/tracing": "^6.19.6",
     "classnames": "^2.3.1",

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

@@ -0,0 +1,26 @@
+import Editor from "@monaco-editor/react";
+import React from "react";
+
+interface CodeEditorProps {
+  height?: string;
+  code: string;
+  language?: string;
+}
+
+export const CodeEditor: React.FC<CodeEditorProps> = ({ code, height, language }) => {
+  return (
+    <Editor
+      height={height ?? "200px"}
+      language={language}
+      value={code}
+      options={{
+        lineNumbersMinChars: 2,
+        readOnly: true,
+        matchBrackets: "always",
+        minimap: {
+          enabled: false,
+        },
+      }}
+    />
+  );
+};

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

@@ -0,0 +1 @@
+export * from "./CodeEditor";

airbyte-webapp/src/components/base/Card/Card.tsx

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 
-export const Card = styled.div<{ full?: boolean }>`
+export const Card = styled.div<{ full?: boolean; $withPadding?: boolean }>`
   width: ${({ full }) => (full ? "100%" : "auto")};
   background: ${({ theme }) => theme.whiteColor};
   border-radius: 10px;
   box-shadow: 0 2px 4px ${({ theme }) => theme.cardShadowColor};
+  padding: ${({ $withPadding }) => ($withPadding ? "20px" : undefined)};
   //border: 1px solid ${({ theme }) => theme.greyColor20};
 `;

airbyte-webapp/src/components/index.tsx

@@ -2,6 +2,7 @@ export * from "./base";
 
 export * from "./ArrayOfObjectsEditor";
 export * from "./ContentCard";
+export * from "./CodeEditor";
 export * from "./DefaultLogoCatalog";
 export * from "./ImageBlock";
 export * from "./Label";

airbyte-webapp/src/core/domain/connection/ConnectionService.ts

@@ -1,4 +1,4 @@
-import { deleteConnection, resetConnection, syncConnection } from "../../request/AirbyteClient";
+import { deleteConnection, resetConnection, syncConnection, getState } from "../../request/AirbyteClient";
 import { AirbyteRequestService } from "../../request/AirbyteRequestService";
 
 export class ConnectionService extends AirbyteRequestService {
@@ -13,4 +13,8 @@ export class ConnectionService extends AirbyteRequestService {
   public delete(connectionId: string) {
     return deleteConnection({ connectionId }, this.requestOptions);
   }
+
+  public getState(connectionId: string) {
+    return getState({ connectionId }, this.requestOptions);
+  }
 }

airbyte-webapp/src/hooks/services/useConnectionHook.tsx

@@ -28,6 +28,7 @@ export const connectionsKeys = {
   lists: () => [...connectionsKeys.all, "list"] as const,
   list: (filters: string) => [...connectionsKeys.lists(), { filters }] as const,
   detail: (connectionId: string) => [...connectionsKeys.all, "details", connectionId] as const,
+  getState: (connectionId: string) => [...connectionsKeys.all, "getState", connectionId] as const,
 };
 
 export interface ValuesProps {
@@ -215,11 +216,18 @@ const invalidateConnectionsList = async (queryClient: QueryClient) => {
   await queryClient.invalidateQueries(connectionsKeys.lists());
 };
 
+const useGetConnectionState = (connectionId: string) => {
+  const service = useConnectionService();
+
+  return useSuspenseQuery(connectionsKeys.getState(connectionId), () => service.getState(connectionId));
+};
+
 export {
   useConnectionList,
   useGetConnection,
   useUpdateConnection,
   useCreateConnection,
   useDeleteConnection,
   invalidateConnectionsList,
+  useGetConnectionState,
 };

airbyte-webapp/src/locales/en.json

@@ -399,6 +399,8 @@
   "tables.sourceDeleteModalText": "This can not be un-done without a full re-sync. Note that:\n  - All connections with this source will be deleted, including their past logs and configurations.\n  - No existing data in the destination will be altered",
   "tables.destinationDeleteModalText": "This can not be un-done. Note that:\n  - All connections with this destination will be deleted, including their past logs and configurations.\n  - No existing data in the destination will be altered.",
   "tables.connectionDeleteModalText": "This can not be un-done without a full re-sync. Note that:\n  - All past logs and configurations will be deleted\n  - Updates of new data will stop\n  - No existing data in the destination will be altered",
+  "tables.connectionState.title": "Connection State",
+  "tables.connectionState.noConnectionState": "This connection doesn‘t have a state (yet).",
 
   "admin.destinations": "Destinations",
   "admin.sources": "Sources",

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/SettingsView.tsx

@@ -5,6 +5,8 @@ import DeleteBlock from "components/DeleteBlock";
 
 import { useDeleteConnection } from "hooks/services/useConnectionHook";
 
+import { StateBlock } from "./StateBlock";
+
 interface IProps {
   connectionId: string;
 }
@@ -22,6 +24,7 @@ const SettingsView: React.FC<IProps> = ({ connectionId }) => {
 
   return (
     <Content>
+      <StateBlock connectionId={connectionId} />
       <DeleteBlock type="connection" onDelete={onDelete} />
     </Content>
   );

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StateBlock.tsx

@@ -0,0 +1,30 @@
+import React, { useMemo } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { H5, Card } from "components";
+
+import { useGetConnectionState } from "hooks/services/useConnectionHook";
+
+interface StateBlockProps {
+  connectionId: string;
+}
+
+export const StateBlock: React.FC<StateBlockProps> = ({ connectionId }) => {
+  const { formatMessage } = useIntl();
+  const state = useGetConnectionState(connectionId);
+
+  const stateString = useMemo(() => {
+    return state?.state
+      ? JSON.stringify(state.state, null, 2)
+      : formatMessage({ id: "tables.connectionState.noConnectionState" });
+  }, [formatMessage, state.state]);
+
+  return (
+    <Card $withPadding>
+      <H5 bold>
+        <FormattedMessage id={"tables.connectionState.title"} />
+      </H5>
+      <pre style={{ maxHeight: 200, overflowY: "scroll" }}>{stateString}</pre>
+    </Card>
+  );
+};

airbyte-webapp/src/setupProxy.js

@@ -10,7 +10,7 @@ module.exports = (app) => {
   // Set the CSP header in development to detect potential breakages.
   // This should always match the header in airbyte-webapp/nginx/default.conf.template
   app.use((req, resp, next) => {
-    resp.header("Content-Security-Policy", "script-src * 'unsafe-inline';");
+    resp.header("Content-Security-Policy", "script-src * 'unsafe-inline'; worker-src self blob:;");
     next();
   });
   // Serve the doc markdowns and assets that are also bundled into the docker image