Preserve format when copy/paste yaml file (#4009)

* Preserve format when copy/paste yaml file
weaveworks · Sep 18, 2023 · 6f60f53 · 6f60f53
1 parent fc5f7fc
commit 6f60f53
Show file tree

Hide file tree

Showing 3 changed files with 211 additions and 135 deletions.
diff --git a/ui/components/CopyToCliboard.tsx b/ui/components/CopyToCliboard.tsx
@@ -1,29 +1,16 @@
 import * as React from "react";
 import { useCallback, useState } from "react";
-import styled from "styled-components";
-import { IconButton } from "./Button";
 import Icon, { IconType } from "./Icon";
 
-const CopyButton = styled(IconButton)`
-  &.MuiButton-outlinedPrimary {
-    margin-left: ${(props) => props.theme.spacing.xxs};
-    padding: ${(props) => props.theme.spacing.xxs};
-  }
-  &.MuiButton-root {
-    height: initial;
-    width: initial;
-    min-width: 0px;
-  }
-`;
-
 export default function CopyToClipboard({
   value,
-  className,
   size,
+  showText,
 }: {
   value: string;
   className?: string;
-  size?: "small" | "medium" | "large";
+  size?: "small" | "base" | "medium" | "large";
+  showText?: boolean;
 }) {
   const [copied, setCopied] = useState(false);
   const handleCopy = useCallback(() => {
@@ -34,13 +21,17 @@ export default function CopyToClipboard({
       }, 1500);
     });
   }, [value]);
-
+  let text = undefined;
+  if (showText) {
+    text = copied ? "Copied" : "Copy";
+  }
   return (
-    <CopyButton onClick={handleCopy} className={className}>
+    <div onClick={handleCopy} style={{ cursor: "pointer" }}>
       <Icon
         type={copied ? IconType.CheckMark : IconType.FileCopyIcon}
         size={size}
+        text={text}
       />
-    </CopyButton>
+    </div>
   );
 }
diff --git a/ui/components/YamlView.tsx b/ui/components/YamlView.tsx
@@ -7,6 +7,7 @@ import { useInDarkMode } from "../hooks/theme";
 import { ObjectRef } from "../lib/api/core/types.pb";
 import { createYamlCommand } from "../lib/utils";
 import CopyToClipboard from "./CopyToCliboard";
+import Flex from "./Flex";
 
 export type YamlViewProps = {
   className?: string;
@@ -16,10 +17,9 @@ export type YamlViewProps = {
   theme?: ThemeTypes;
 };
 
-const YamlHeader = styled.div`
+const YamlHeader = styled(Flex)`
   background: ${(props) => props.theme.colors.neutralGray};
   padding: ${(props) => props.theme.spacing.small};
-  width: 100%;
   border-bottom: 1px solid ${(props) => props.theme.colors.neutral20};
   font-family: monospace;
   color: ${(props) => props.theme.colors.primary10};
@@ -53,33 +53,37 @@ function UnstyledYamlView({
       },
     },
 
-    lineProps: { style: { flexWrap: "wrap" } },
+    lineProps: { style: { textWrap: "wrap" } },
 
     ...(dark && { style: darcula }),
   };
 
   return (
     <div className={className}>
       {headerText && (
-        <YamlHeader>
+        <YamlHeader wide gap="4" alignItems="center">
           {headerText}
           <CopyToClipboard
             value={headerText}
-            className="yaml-copy"
+            className="yamlheader-copy"
             size="small"
           />
         </YamlHeader>
       )}
 
-      <SyntaxHighlighter
-        language={type}
-        {...styleProps}
-        wrapLongLines
-        wrapLines
-        showLineNumbers
-      >
-        {yaml}
-      </SyntaxHighlighter>
+      <div className="code-wrapper">
+        <div className="copy-wrapper">
+          <CopyToClipboard value={yaml} className="yaml-copy" size="base" />
+        </div>
+        <SyntaxHighlighter
+          language={type}
+          {...styleProps}
+          wrapLines
+          showLineNumbers
+        >
+          {yaml}
+        </SyntaxHighlighter>
+      </div>
     </div>
   );
 }
@@ -94,6 +98,17 @@ const YamlView = styled(UnstyledYamlView).attrs({
   border-radius: 8px;
   overflow: hidden;
 
+  .code-wrapper {
+    position: relative;
+  }
+  .copy-wrapper {
+    position: absolute;
+    right: 4px;
+    top: 8px;
+    background: ${(props) => props.theme.colors.neutralGray};
+    padding: 4px 8px;
+    border-radius: 2px;
+  }
   pre {
     padding: ${(props) => props.theme.spacing.medium}
       ${(props) => props.theme.spacing.small} !important;