Display new per-stream and global state to users when viewing connect…

…ion settings (#15020)

* Display new per-stream and global state to users

* simplify method

* remove a line break

* Add addtional useMemo triggers

* lint fixes?

* nits picked

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

@@ -3,8 +3,22 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { H5, Card } from "components";
 
+import { ConnectionState } from "core/request/AirbyteClient";
 import { useGetConnectionState } from "hooks/services/useConnectionHook";
 
+function formatState(
+  legacyState: ConnectionState["state"],
+  globalState: ConnectionState["globalState"],
+  streamState: ConnectionState["streamState"],
+  formatMessage: ReturnType<typeof useIntl>["formatMessage"]
+) {
+  // This hierarchy assumes that for those connections which have both global and per-stream state, the global state contains a meaningful copy of any state which would also be saved per-stream
+  const formattedState = legacyState ?? globalState ?? streamState ?? null;
+  return formattedState
+    ? JSON.stringify(formattedState, null, 2)
+    : formatMessage({ id: "tables.connectionState.noConnectionState" });
+}
+
 interface StateBlockProps {
   connectionId: string;
 }
@@ -13,11 +27,10 @@ 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]);
+  const stateString = useMemo(
+    () => formatState(state.state, state.globalState, state.streamState, formatMessage),
+    [formatMessage, state.state, state.globalState, state.streamState]
+  );
 
   return (
     <Card $withPadding>