From 02c8783f9e86f0c26fbebebe8181e4ca4b77db19 Mon Sep 17 00:00:00 2001
From: Martin Turoci <martin.turoci@h2o.ai>
Date: Mon, 24 Oct 2022 13:04:45 +0200
Subject: [PATCH] feat: Allow changing the value of copyable table dynamically.
 #1154

---
 ui/src/copyable_text.test.tsx | 9 +++++++++
 ui/src/copyable_text.tsx      | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/copyable_text.test.tsx b/ui/src/copyable_text.test.tsx
index d5f77ca306..4166d6a64f 100644
--- a/ui/src/copyable_text.test.tsx
+++ b/ui/src/copyable_text.test.tsx
@@ -25,4 +25,13 @@ describe('CopyableText.tsx', () => {
     const { queryByTestId } = render(<XCopyableText model={copyableTextProps} />)
     expect(queryByTestId(name)).toBeInTheDocument()
   })
+
+  it('Display new value when "value" prop changes', () => {
+    const { getByTestId, rerender } = render(<XCopyableText model={{ ...copyableTextProps, value: 'A' }} />)
+    expect(getByTestId(name).querySelector('input')).toHaveValue('A')
+
+    rerender(<XCopyableText model={{ ...copyableTextProps, value: 'B' }} />)
+    expect(getByTestId(name).querySelector('input')).toHaveValue('B')
+  })
+
 })
\ No newline at end of file
diff --git a/ui/src/copyable_text.tsx b/ui/src/copyable_text.tsx
index 935158af08..33db18b1f2 100644
--- a/ui/src/copyable_text.tsx
+++ b/ui/src/copyable_text.tsx
@@ -80,7 +80,7 @@ export const XCopyableText = ({ model }: { model: CopyableText }) => {
 
   return (
     <div data-test={name} className={multiline ? css.multiContainer : css.compactContainer}>
-      <Fluent.TextField componentRef={ref} defaultValue={value} label={label} multiline={multiline} styles={{ root: { width: pc(100) } }} readOnly />
+      <Fluent.TextField componentRef={ref} value={value} label={label} multiline={multiline} styles={{ root: { width: pc(100) } }} readOnly />
       <Fluent.PrimaryButton
         title='Copy to clipboard'
         onClick={onClick}