Fixes #38242 replace clipboard copy with pf5

app/views/hosts/_init_config_tab.html.erb

@@ -1,17 +1,7 @@
-<style>
-.host-init-conf-textarea{
-  font-size: 11px;
-  padding: 2px;
-  color: #363636;
-  background-color: #fafafa;
-  border: 1px solid #ccc;
-}
-</style>
 <% if @host.operatingsystem && @host.initial_configuration_template %>
 <div style="max-width: 600px">
   <%= _('For initial configuration of the host run this command:') %>
-  <%= react_component('ClipboardCopy', { text: "curl #{@host.registration_url} | bash",
-                                         textareaProps: { readOnly: true, rows: '1', className: 'host-init-conf-textarea'}})
+  <%= react_component('ClipboardCopy', { text: "curl #{@host.registration_url} | bash" , textareaProps: {className: 'host-init-conf-textarea'}})
   %>
   <%= _('Host template') %>: <%= link_to(@host.initial_configuration_template, edit_provisioning_template_path(@host.initial_configuration_template))%>
 </div>

webpack/assets/javascripts/react_app/components/common/ClipboardCopy/index.js

@@ -1,74 +1,36 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon } from 'patternfly-react';
-import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import {
+  ClipboardCopy as PFClipboardCopy,
+  ClipboardCopyVariant as PFClipboardCopyVariant,
+} from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
-import './clipboard-copy.scss';
 
-const ClipboardCopy = ({
-  text: defaultText,
-  successMessage,
-  buttonText,
-  textareaProps,
-  buttonProps,
-  hideTextarea,
-  withCopyIcon,
-}) => {
-  const [text, setText] = useState(defaultText);
-
-  const clipboardClass = hideTextarea === false ? 'clipboard-copy' : '';
-  const iconMarginLeft = buttonText === '' ? '0px' : '5px';
+const ClipboardCopy = ({ text: defaultText, textareaProps }) => {
+  const [text] = useState(defaultText);
 
   return (
-    <div className={clipboardClass}>
-      {hideTextarea === false ? (
-        <textarea
-          defaultValue={text}
-          onChange={({ target: { value } }) => setText(value)}
-          {...textareaProps}
-        />
-      ) : null}
-      <Tooltip
-        content={successMessage}
-        position={TooltipPosition.right}
-        trigger="click"
-      >
-        <Button
-          onClick={() => navigator.clipboard.writeText(text)}
-          bsStyle="default"
-          {...buttonProps}
-        >
-          {buttonText}
-          {withCopyIcon && (
-            <Icon
-              style={{ marginLeft: iconMarginLeft }}
-              type="fa"
-              name="copy"
-            />
-          )}
-        </Button>
-      </Tooltip>
-    </div>
+    <PFClipboardCopy
+      hoverTip={__('Copy to clipboard')}
+      clickTip={__('Copied to clipboard')}
+      isBlock
+      variant={PFClipboardCopyVariant.expansion}
+      isExpanded
+      isReadOnly={textareaProps.readOnly ?? false}
+      className={textareaProps.className ?? ''}
+    >
+      {`${text}`}
+    </PFClipboardCopy>
   );
 };
 
 ClipboardCopy.propTypes = {
   text: PropTypes.string.isRequired,
-  buttonText: PropTypes.string,
-  successMessage: PropTypes.string,
   textareaProps: PropTypes.object,
-  buttonProps: PropTypes.object,
-  hideTextarea: PropTypes.bool,
-  withCopyIcon: PropTypes.bool,
 };
 
 ClipboardCopy.defaultProps = {
-  buttonText: __('Copy to clipboard'),
-  successMessage: __('Copied!'),
   textareaProps: {},
-  buttonProps: {},
-  hideTextarea: false,
-  withCopyIcon: false,
 };
 
 export default ClipboardCopy;

webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/NewPersonalAccessToken.js

@@ -1,18 +1,23 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Alert } from 'patternfly-react';
-import ClipboardCopy from '../../common/ClipboardCopy';
+import { ClipboardCopy } from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
+import './personalAccessToken.scss';
 
 const NewTokenInfo = ({ newPersonalAccessToken, onDismiss }) => (
   <Fragment>
     {newPersonalAccessToken && (
       <Alert type="success" onDismiss={onDismiss}>
         <strong>{__('Your New Personal Access Token')}</strong>
         <ClipboardCopy
-          text={newPersonalAccessToken}
-          textareaProps={{ readOnly: true, className: 'col-md-6', rows: '1' }}
-        />
+          isReadOnly
+          hoverTip={__('Copy to clipboard')}
+          clickTip={__('Copied to clipboard')}
+          variant="inline-compact"
+        >
+          {newPersonalAccessToken}
+        </ClipboardCopy>
         {__(
           'Make sure to copy your new personal access token now. You won’t be able to see it again!'
         )}

webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/personalAccessToken.scss

@@ -20,3 +20,11 @@
     }
   }
 }
+
+.pf-c-clipboard-copy.pf-m-inline{
+  display: block;
+  font-size: 1.3em;
+  background-color: white;
+  max-width: fit-content;
+}
+