From 9de032b4da0fa359293da7f2f8e3195378b42f41 Mon Sep 17 00:00:00 2001
From: Riccardo Forina <rforina@redhat.com>
Date: Wed, 20 Nov 2024 15:37:19 +0100
Subject: [PATCH] Make the distinction between editor and debugger more clear

---
 packages/test-app/src/App.tsx | 37 +++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/test-app/src/App.tsx b/packages/test-app/src/App.tsx
index 9550460..bcf9e02 100644
--- a/packages/test-app/src/App.tsx
+++ b/packages/test-app/src/App.tsx
@@ -17,6 +17,7 @@ import { worker } from "./rpc.ts";
 // import * as worker from "../../ui/src/OpenApiEditorWorker.ts";
 import { useCallback, useRef, useState } from "react";
 import {
+  Alert,
   Button,
   Flex,
   FlexItem,
@@ -113,19 +114,31 @@ function App() {
         />
       </PageSection>
       <PageSection variant={"secondary"}>
-        <Flex>
-          <FlexItem>
-            <Button onClick={onSaveClick}>Save and update</Button>
-          </FlexItem>
-          <Title headingLevel={"h6"}>
-            <Switch
-              isChecked={captureChanges}
-              onChange={(_, v) => setCaptureChanges(v)}
-              label={"Listen to onDocumentChange events"}
+        <Alert
+          title={"Integration debugger"}
+          variant={"warning"}
+          isInline={true}
+        >
+          <Flex>
+            <Title headingLevel={"h6"}>
+              <Switch
+                isChecked={captureChanges}
+                onChange={(_, v) => setCaptureChanges(v)}
+                label={"Listen to onDocumentChange events"}
+              />
+            </Title>
+            <TextArea
+              aria-label="Output of the editor"
+              value={output}
+              rows={6}
             />
-          </Title>
-          <TextArea aria-label="Output of the editor" value={output} rows={6} />
-        </Flex>
+            <FlexItem>
+              <Button onClick={onSaveClick}>
+                Programmatically save and update with another document
+              </Button>
+            </FlexItem>
+          </Flex>
+        </Alert>
       </PageSection>
     </>
   );