Make the data output viewer better

matrix-org · Sep 20, 2024 · c599d42 · c599d42
1 parent 1befe57
commit c599d42
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 30 deletions.
diff --git a/src/pages/client-implementation-guide/interactive.tsx b/src/pages/client-implementation-guide/interactive.tsx
@@ -137,11 +137,7 @@ const Fetcher: React.FC<FetcherProps> = ({
           </Form.ErrorMessage>
         </Form.Field>
 
-        {data && (
-          <pre className={cx(styles["fetcher-output"])}>
-            {JSON.stringify(data, null, 2)}
-          </pre>
-        )}
+        {data && <DataViewer data={data} />}
 
         {isError && (
           <Alert type="critical" title="There was an error fetching">
@@ -300,6 +296,14 @@ export const OidcMetadataFetcher = () => {
   );
 };
 
+const DataViewer: React.FC<{ data: unknown }> = ({ data }) => {
+  return (
+    <pre className={cx(styles["output-data"], "cpd-theme-dark")}>
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+};
+
 export const ClientMetadataForm = () => {
   const $serverMetadata = useStore(serverMetadata);
   const [clientName, setClientName] = useState("Client implementation guide");
@@ -375,19 +379,13 @@ export const ClientMetadataForm = () => {
           />
         </Form.Field>
 
-        <pre className={cx(styles["fetcher-output"])}>
-          {JSON.stringify(clientMetadata, null, 2)}
-        </pre>
+        <DataViewer data={clientMetadata} />
 
         <Form.Submit size="sm" kind="secondary">
           Submit client metadata
         </Form.Submit>
 
-        {response && (
-          <pre className={cx(styles["fetcher-output"])}>
-            {JSON.stringify(response, null, 2)}
-          </pre>
-        )}
+        {response && <DataViewer data={response} />}
       </Form.Root>
     </div>
   );
@@ -477,11 +475,7 @@ export const CodeExchangeForm = () => {
           Exchange code for access token
         </Form.Submit>
 
-        {response && (
-          <pre className={cx(styles["fetcher-output"])}>
-            {JSON.stringify(response, null, 2)}
-          </pre>
-        )}
+        {response && <DataViewer data={response} />}
       </Form.Root>
     </div>
   );
@@ -546,7 +540,7 @@ export const DisplayAuthorizationUrl: React.FC = () => {
         disabled={$clientId === null}
         href={fullUrl.toString()}
         size="sm"
-        kind="primary"
+        kind="secondary"
         target="_blank"
       >
         Start authorization flow
@@ -560,9 +554,5 @@ export const CallbackParameters = () => {
   const stripped = hash.startsWith("#") ? hash.slice(1) : hash;
   const params = new URLSearchParams(stripped);
 
-  return (
-    <pre className={cx(styles["fetcher-output"])}>
-      {JSON.stringify(Object.fromEntries(params), null, 2)}
-    </pre>
-  );
+  return <DataViewer data={Object.fromEntries(params)} />;
 };
diff --git a/src/pages/client-implementation-guide/style.module.css b/src/pages/client-implementation-guide/style.module.css
@@ -13,6 +13,10 @@
   border-radius: var(--cpd-space-1x);
   padding: var(--cpd-space-4x);
   align-self: center;
+
+  & .output-data {
+    margin: 0;
+  }
 }
 
 .mono {
@@ -38,14 +42,18 @@
   }
 }
 
-.fetcher-output {
-  margin: 0;
+.output-data {
+  margin: 0 var(--cpd-space-4x);
   font-family: var(--cpd-font-family-mono);
   padding: var(--cpd-space-4x);
-  background-color: var(--cpd-color-bg-action-primary-rest);
-  color: var(--cpd-color-text-on-solid-primary);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
+  border: solid 1px var(--cpd-color-border-interactive-secondary);
+  border-radius: var(--cpd-space-1x);
   max-height: 8em;
   overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 @keyframes spin {
@@ -66,11 +74,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--cpd-space-1x);
-  margin: var(--cpd-space-4x) 0;
+  margin: var(--cpd-space-4x);
   font-family: var(--cpd-font-family-mono);
   padding: var(--cpd-space-6x);
-  background-color: var(--cpd-color-bg-canvas-default);
   color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
+  border: solid 1px var(--cpd-color-border-interactive-secondary);
+  border-radius: var(--cpd-space-1x);
   word-break: break-all;
 
   & a {