fix(ClipboardCopy): Add string[] type to children

The ClipboardCopy component already handles string[] but didn't have it
written in the props as valid.

Author: Venefilyn

packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -89,7 +89,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
   /** The text which is copied. */
-  children: string;
+  children: string | string[];
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -103,7 +103,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   timer = null as number;
   constructor(props: ClipboardCopyProps) {
     super(props);
-    const text = Array.isArray(this.props.children) ? this.props.children.join('') : (this.props.children as string);
+    const text = Array.isArray(this.props.children) ? this.props.children.join(' ') : (this.props.children as string);
     this.state = {
       text,
       expanded: this.props.isExpanded,
@@ -134,7 +134,9 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidUpdate = (prevProps: ClipboardCopyProps, prevState: ClipboardCopyState) => {
     if (prevProps.children !== this.props.children) {
-      const newText = this.props.children as string;
+      const newText = Array.isArray(this.props.children)
+        ? this.props.children.join(' ')
+        : (this.props.children as string);
       this.setState({ text: newText, textWhenExpanded: newText });
     }
   };

packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx

@@ -336,6 +336,21 @@ test('Does not call onCopy when ClipboardCopyButton is not clicked', async () =>
   expect(onCopyMock).not.toHaveBeenCalled();
 });
 
+test('Can take array of strings as children', async () => {
+  const onCopyMock = jest.fn();
+  const user = userEvent.setup();
+  const childrenArray = children.split(' ');
+
+  // sanity check to ensure we are checking an array with at least 2 elements
+  expect(childrenArray.length).toBeGreaterThan(1);
+
+  render(<ClipboardCopy onCopy={onCopyMock}>{childrenArray}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('button', { name: 'Test CCB clicker' }));
+
+  expect(onCopyMock.toString()).toHaveBeenCalledWith(children);
+});
+
 test('Matches snapshot', () => {
   const { asFragment } = render(
     <ClipboardCopy id="snapshot" ouiaId="snapshot">

packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-26"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-27"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"