fix: Prevent copy button from overlapping multiline labels in ui.copy…

…able_text #1883 (#1892)
h2oai · Mar 16, 2023 · 07b00cf · 07b00cf
1 parent 4e00fff
commit 07b00cf
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 40 deletions.
diff --git a/ui/src/copyable_text.test.tsx b/ui/src/copyable_text.test.tsx
@@ -28,10 +28,10 @@ describe('CopyableText.tsx', () => {
 
   it('Display new value when "value" prop changes', () => {
     const { getByTestId, rerender } = render(<XCopyableText model={{ ...copyableTextProps, value: 'A' }} />)
-    expect(getByTestId(name).querySelector('input')).toHaveValue('A')
+    expect(getByTestId(name)).toHaveValue('A')
 
     rerender(<XCopyableText model={{ ...copyableTextProps, value: 'B' }} />)
-    expect(getByTestId(name).querySelector('input')).toHaveValue('B')
+    expect(getByTestId(name)).toHaveValue('B')
   })
 
 })
diff --git a/ui/src/copyable_text.tsx b/ui/src/copyable_text.tsx
@@ -6,28 +6,18 @@ import { clas, cssVar, pc } from './theme'
 
 const
   css = stylesheet({
-    multiContainer: {
-      position: 'relative',
-      $nest: {
-        '&:hover > button': {
-          opacity: 1
-        }
-      }
-    },
-    compactContainer: {
-      position: 'relative',
-    },
     btnMultiline: {
       opacity: 0,
       transition: 'opacity .5s'
     },
     btn: {
       minWidth: 'initial',
       position: 'absolute',
-      top: 31,
-      right: 4,
       width: 24,
-      height: 24
+      height: 24,
+      right: 0,
+      transform: 'translate(-4px, 4px)',
+      zIndex: 1,
     },
     copiedBtn: {
       background: cssVar('$green'),
@@ -36,6 +26,9 @@ const
           background: cssVar('$green'),
         }
       }
+    },
+    labelContainer: {
+      position: 'relative'
     }
   }),
   fullHeightStyle = {
@@ -88,30 +81,33 @@ export const XCopyableText = ({ model }: { model: CopyableText }) => {
   React.useEffect(() => () => window.clearTimeout(timeoutRef.current), [])
 
   return (
-    <div
+    <Fluent.TextField
       data-test={name}
-      className={multiline ? css.multiContainer : css.compactContainer}
-      style={heightStyle as React.CSSProperties}
-    >
-      <Fluent.TextField
-        componentRef={ref}
-        value={value}
-        label={label}
-        multiline={multiline}
-        styles={{
-          root: { ...heightStyle, width: pc(100) },
-          wrapper: heightStyle,
-          fieldGroup: heightStyle || { minHeight: height },
-          field: { ...heightStyle, height, resize: multiline ? 'vertical' : 'none', },
-        }}
-        readOnly
-      />
-      <Fluent.PrimaryButton
-        title='Copy to clipboard'
-        onClick={onClick}
-        iconProps={{ iconName: copied ? 'CheckMark' : 'Copy' }}
-        className={clas(css.btn, copied ? css.copiedBtn : '', multiline ? css.btnMultiline : '')}
-      />
-    </div>
+      componentRef={ref}
+      value={value}
+      multiline={multiline}
+      onRenderLabel={() =>
+        <div className={css.labelContainer}>
+          <Fluent.Label>{label}</Fluent.Label>
+          <Fluent.PrimaryButton
+            title='Copy to clipboard'
+            onClick={onClick}
+            iconProps={{ iconName: copied ? 'CheckMark' : 'Copy' }}
+            className={clas(css.btn, copied ? css.copiedBtn : '', multiline ? css.btnMultiline : '')}
+          />
+        </div>
+      }
+      styles={{
+        root: {
+          ...heightStyle,
+          textFieldRoot: { position: 'relative', width: pc(100) },
+          textFieldMultiline: multiline ? { '&:hover button': { opacity: 1 } } : undefined
+        },
+        wrapper: heightStyle,
+        fieldGroup: heightStyle || { minHeight: height },
+        field: { ...heightStyle, height, resize: multiline ? 'vertical' : 'none', },
+      }}
+      readOnly
+    />
   )
 }