add copy button on stub response

solaoi · Aug 11, 2022 · 263133f · 263133f
1 parent 68dbd3b
commit 263133f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/app/pages/stubs/[stubId].tsx b/app/pages/stubs/[stubId].tsx
@@ -255,7 +255,7 @@ export const Stub = () => {
                   maxH="300"
                   overflowY="auto"
                 >
-                  <pre style={{ whiteSpace: "pre-wrap" }}>
+                  <pre style={{ whiteSpace: "pre-wrap", userSelect: "none" }}>
                     {(() => {
                       try {
                         if (
@@ -273,6 +273,24 @@ export const Stub = () => {
                       }
                     })()}
                   </pre>
+                  <Flex justifyContent="flex-end" marginTop="-1.5rem">
+                    <CopyToClipboard text={stub.response}>
+                      <Box
+                        borderRadius="5px"
+                        borderWidth="1px"
+                        borderStyle="solid"
+                        padding="5px"
+                        _hover={{
+                          color: "#3c3c3c",
+                          backgroundColor: "white",
+                          opacity: "80%",
+                          cursor: "pointer",
+                        }}
+                      >
+                        <HiOutlineClipboardCopy />
+                      </Box>
+                    </CopyToClipboard>
+                  </Flex>
                 </Box>
               </Flex>
             </Box>

diff --git a/app/stubs/components/StubForm.tsx b/app/stubs/components/StubForm.tsx
@@ -44,7 +44,7 @@ export function StubForm<S extends z.ZodType<any, any>>(props: FormProps<S>) {
         ]}
       />
       <LabeledTextField name="statusCode" label="StatusCode" placeholder="200" />
-      <LabeledTextAreaField name="response" label="Response" placeholder="Response" />
+      <LabeledTextAreaField name="response" label="Response" placeholder="Response" rows="5" />
       <LabeledTextAreaField name="memo" label="Memo" placeholder="Any additional comments" />
       <Card heading="Optional" bgColor="#E2E8F0">
         <LabeledTextField