Refactor command copier

RELEASE.md

@@ -27,6 +27,7 @@ Please follow the established format:
 - Migrate from `toposort` to `graphlib`. (#1942)
 - Fix packaging. (#1766)
 - Adjust requirements file and dependabot versioning strategy. (#1978)
+- Refactor CommandCopier component. (#1998)
 
 # Release 9.1.0
 

src/components/metadata/metadata.js

@@ -249,6 +249,7 @@ const MetaData = ({
                 <MetaDataRow label="Run Command:" visible={Boolean(runCommand)}>
                   <CommandCopier
                     command={runCommand}
+                    classNames={'pipeline-metadata__value'}
                     isCommand={metadata?.runCommand}
                     dataTest={'metadata-copy-command'}
                   />

src/components/ui/command-copier/command-copier.js

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import MetaDataValue from '../../metadata/metadata-value';
+import classnames from 'classnames';
 import IconButton from '../../ui/icon-button';
 import Tooltip from '../tooltip';
 import CopyIcon from '../../icons/copy';
 import './command-copier.scss';
 
-const CommandCopier = ({ command, isCommand, dataTest }) => {
+const CommandCopier = ({ command, classNames, isCommand, dataTest }) => {
   const [showCopied, setShowCopied] = useState(false);
 
   const onCopyClick = () => {
@@ -17,11 +17,7 @@ const CommandCopier = ({ command, isCommand, dataTest }) => {
 
   return (
     <div className="container">
-      <MetaDataValue
-        container={'code'}
-        className="command-value"
-        value={command}
-      />
+      <code className={classnames('command-value', classNames)}>{command}</code>
       {window.navigator.clipboard && isCommand && (
         <ul className="toolbox">
           <IconButton

src/components/ui/command-copier/command-copier.test.js

@@ -8,7 +8,7 @@ describe('command copier', () => {
   it('shows the node command', () => {
     const wrapper = mount(<CommandCopier command={command} isCommand={true} />);
 
-    const row = wrapper.find('.pipeline-metadata__value');
+    const row = wrapper.find('.command-value');
     expect(row.text()).toEqual('test command');
   });