show cluster contract on click (#4485)

dashboard/src/main/home/infrastructure-dashboard/ClusterContractViewModal.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Contract } from "@porter-dev/api-contracts";
+import styled from "styled-components";
+
+import ClickToCopy from "components/porter/ClickToCopy";
+import Modal from "components/porter/Modal";
+
+import { useClusterContext } from "./ClusterContextProvider";
+
+type Props = {
+  onClose: () => void;
+};
+const ClusterContractViewModal: React.FC<Props> = ({ onClose }) => {
+  const { cluster } = useClusterContext();
+  return (
+    <Modal closeModal={onClose} width={"800px"}>
+      <div style={{ overflowY: "auto", maxHeight: "80vh" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse" }}>
+          <tbody>
+            <tr>
+              <StyledCell width={"100px"}>created_at</StyledCell>
+              <StyledCell>{cluster.contract?.created_at}</StyledCell>
+            </tr>
+            <tr>
+              <StyledCell width={"100px"}>decoded contract</StyledCell>
+              <StyledCell>
+                <ClickToCopy>
+                  {JSON.stringify(
+                    Contract.fromJsonString(
+                      atob(cluster.contract?.base64_contract ?? ""),
+                      {
+                        ignoreUnknownFields: true,
+                      }
+                    )
+                  )}
+                </ClickToCopy>
+              </StyledCell>
+            </tr>
+            <tr>
+              <StyledCell width={"100px"}>condition</StyledCell>
+              <StyledCell>{cluster.contract?.condition}</StyledCell>
+            </tr>
+            <tr>
+              <StyledCell width={"100px"}>condition metadata</StyledCell>
+              <StyledCell>
+                {JSON.stringify(cluster.contract?.condition_metadata)}
+              </StyledCell>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+  );
+};
+
+const StyledCell = styled.td<{ width?: string }>`
+  padding: 8px;
+  border: 1px solid #ddd;
+  text-align: left;
+  max-width: 200px;
+  word-wrap: break-word;
+  vertical-align: top;
+  width: ${(props) => props.width};
+`;
+
+export default ClusterContractViewModal;

dashboard/src/main/home/infrastructure-dashboard/ClusterHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import styled from "styled-components";
 
 import Container from "components/porter/Container";
@@ -6,13 +6,19 @@ import Icon from "components/porter/Icon";
 import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 
+import { Context } from "shared/Context";
 import { readableDate } from "shared/string_utils";
+import info from "assets/information-circle-contained.svg";
 
 import { useClusterContext } from "./ClusterContextProvider";
+import ClusterContractViewModal from "./ClusterContractViewModal";
 import ClusterStatus from "./ClusterStatus";
 
 const ClusterHeader: React.FC = () => {
   const { cluster, isClusterUpdating, nodes } = useClusterContext();
+  const { user } = useContext(Context);
+  const [showClusterContract, setShowClusterContract] =
+    React.useState<boolean>(false);
 
   const applicationNodes = useMemo(() => {
     return nodes.filter((n) => n.nodeGroupType === "APPLICATION");
@@ -20,10 +26,25 @@ const ClusterHeader: React.FC = () => {
 
   return (
     <>
-      <Container row>
-        <Icon src={cluster.cloud_provider.icon} height="22px" />
-        <Spacer inline x={1} />
-        <Text size={21}>{cluster.vanity_name}</Text>
+      <Container row spaced>
+        <Container row>
+          <Icon src={cluster.cloud_provider.icon} height="22px" />
+          <Spacer inline x={1} />
+          <Text size={21}>{cluster.vanity_name}</Text>
+          {user?.email?.endsWith("@porter.run") && (
+            <>
+              <Spacer inline x={1} />
+              <div
+                style={{ cursor: "pointer" }}
+                onClick={() => {
+                  setShowClusterContract(true);
+                }}
+              >
+                <Icon src={info} height={"14px"} />
+              </div>
+            </>
+          )}
+        </Container>
       </Container>
       <Spacer y={0.5} />
       {cluster.contract != null && (
@@ -43,6 +64,13 @@ const ClusterHeader: React.FC = () => {
             <ClusterStatus />
           </>
         ))}
+      {showClusterContract && (
+        <ClusterContractViewModal
+          onClose={() => {
+            setShowClusterContract(false);
+          }}
+        />
+      )}
     </>
   );
 };

dashboard/src/main/home/infrastructure-dashboard/ClusterTabs.tsx

@@ -30,7 +30,6 @@ type Props = {
 };
 const ClusterTabs: React.FC<Props> = ({ tabParam }) => {
   const history = useHistory();
-
   const { cluster, isClusterUpdating } = useClusterContext();
 
   const {