Merge pull request #5633 from irosenzw/warn-for-changes-to-be-made

CNV-5024: Inform for pending changes in VM details view

frontend/packages/console-shared/src/components/status/GenericStatus.tsx

@@ -4,18 +4,23 @@ import PopoverStatus from './PopoverStatus';
 import StatusIconAndText from './StatusIconAndText';
 
 const GenericStatus: React.FC<GenericStatusProps> = (props) => {
-  const { Icon, children, ...restProps } = props;
+  const { Icon, children, popoverTitle, title, ...restProps } = props;
   return React.Children.toArray(children).length ? (
-    <PopoverStatus {...restProps} statusBody={<StatusIconAndText {...restProps} icon={<Icon />} />}>
+    <PopoverStatus
+      title={popoverTitle || title}
+      {...restProps}
+      statusBody={<StatusIconAndText {...restProps} title={title} icon={<Icon />} />}
+    >
       {children}
     </PopoverStatus>
   ) : (
-    <StatusIconAndText {...restProps} icon={<Icon />} />
+    <StatusIconAndText {...restProps} title={title} icon={<Icon />} />
   );
 };
 
 type GenericStatusProps = StatusComponentProps & {
   Icon: React.ComponentType<{}>;
+  popoverTitle?: string;
 };
 
 export default GenericStatus;

frontend/packages/kubevirt-plugin/src/components/Alerts/PendingChangesAlert.scss

@@ -0,0 +1,3 @@
+.kv__pending_changes-alert {
+    margin-bottom: var(--pf-global--spacer--sm);
+}

frontend/packages/kubevirt-plugin/src/components/Alerts/PendingChangesAlert.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Alert, AlertVariant } from '@patternfly/react-core';
+
+import './PendingChangesAlert.scss';
+
+type PendingChangesAlertProps = {
+  warningMsg?: string;
+  isWarning?: boolean;
+};
+
+export const PendingChangesAlert: React.FC<PendingChangesAlertProps> = ({
+  warningMsg,
+  isWarning,
+  children,
+}) => (
+  <Alert
+    title="Pending Changes"
+    isInline
+    variant={isWarning ? AlertVariant.warning : AlertVariant.info}
+    className="kv__pending_changes-alert"
+  >
+    {warningMsg || children}
+  </Alert>
+);