Fixes #38256 - update ImpersonateIcon to pf5 + cursor pointer on icon…

webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.js

@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-
 import { EyeIcon } from '@patternfly/react-icons';
-import { MessageDialog } from 'patternfly-react';
-import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import {
+  Tooltip,
+  TooltipPosition,
+  Modal,
+  Button,
+} from '@patternfly/react-core';
 import { translate as __ } from '../../../../common/I18n';
 
 import './ImpersonateIcon.scss';
@@ -25,20 +28,27 @@ const ImpersonateIcon = props => {
           <EyeIcon className="blink-image" />
         </span>
       </Tooltip>
-      <MessageDialog
-        show={showModal}
-        onHide={toggleModal}
-        primaryAction={() =>
-          props.stopImpersonating(props.stopImpersonationUrl)
-        }
-        secondaryAction={toggleModal}
-        primaryActionButtonContent={__('Confirm')}
-        secondaryActionButtonContent={__('Cancel')}
+      <Modal
+        width="550px"
+        position="top"
+        isOpen={showModal}
+        onClose={toggleModal}
         title={__('Confirm Action')}
-        primaryContent={__(
-          'You are about to stop impersonating other user. Are you sure?'
-        )}
-      />
+        actions={[
+          <Button
+            key="confirm"
+            variant="primary"
+            onClick={() => props.stopImpersonating(props.stopImpersonationUrl)}
+          >
+            {__('Confirm')}
+          </Button>,
+          <Button key="cancel" variant="secondary" onClick={toggleModal}>
+            {__('Cancel')}
+          </Button>,
+        ]}
+      >
+        {__('You are about to stop impersonating other user. Are you sure?')}
+      </Modal>
     </React.Fragment>
   );
 };

webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss

@@ -15,6 +15,7 @@
 }
 
 .blink-image {
+  cursor: pointer;
   -moz-animation: blink normal 1s infinite ease-in-out; /* Firefox */
   -webkit-animation: blink normal 1s infinite ease-in-out; /* Webkit */
   -ms-animation: blink normal 1s infinite ease-in-out; /* IE */

webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/__snapshots__/ImpersonateIcon.test.js.snap

@@ -18,24 +18,41 @@ exports[`ImpersonateIcon should render 1`] = `
       />
     </span>
   </Tooltip>
-  <MessageDialog
-    accessibleDescription=""
-    accessibleName=""
+  <Modal
+    actions={
+      Array [
+        <Button
+          onClick={[Function]}
+          variant="primary"
+        >
+          Confirm
+        </Button>,
+        <Button
+          onClick={[Function]}
+          variant="secondary"
+        >
+          Cancel
+        </Button>,
+      ]
+    }
+    appendTo={[Function]}
+    aria-describedby=""
+    aria-label=""
+    aria-labelledby=""
     className=""
-    enforceFocus={true}
-    footer={null}
-    icon={null}
-    onHide={[Function]}
-    primaryAction={[Function]}
-    primaryActionButtonBsStyle="primary"
-    primaryActionButtonContent="Confirm"
-    primaryContent="You are about to stop impersonating other user. Are you sure?"
-    secondaryAction={[Function]}
-    secondaryActionButtonBsStyle="default"
-    secondaryActionButtonContent="Cancel"
-    secondaryContent={null}
-    show={false}
+    hasNoBodyWrapper={false}
+    isOpen={false}
+    onClose={[Function]}
+    ouiaSafe={true}
+    position="top"
+    showClose={true}
     title="Confirm Action"
-  />
+    titleIconVariant={null}
+    titleLabel=""
+    variant="default"
+    width="550px"
+  >
+    You are about to stop impersonating other user. Are you sure?
+  </Modal>
 </Fragment>
 `;