feat(HMS-8794): add decommissioning notification

Author: avitova

src/Components/ProvisioningWizard/steps/index.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Suspense } from 'react';
-import { Bullseye, Spinner } from '@patternfly/react-core';
+import { Alert, Bullseye, Spinner } from '@patternfly/react-core';
 import { humanizeProvider } from '../../Common/helpers';
+import { useFlag } from '@unleash/proxy-client-react';
 
 const SourceMissing = React.lazy(() => import('./SourceMissing'));
 const AccountCustomizations = React.lazy(() => import('./AccountCustomizations'));
@@ -45,6 +46,29 @@ const missingSource = ({ image, isLoading, sourcesError }) => [
   },
 ];
 
+const DecommissioningAlert = () => (
+  <Alert variant="info" isInline title="Upcoming decommission of the Image Builder Launch service" className="pf-v6-u-mt-sm pf-v6-u-mb-sm">
+    <p>
+      As of August 31st, the Image Builder Launch service will be discontinued. It will no longer be possible to launch instances directly from custom
+      images using this service. After this date, custom images must be launched by following the cloud provider&apos;s standard procedures.
+    </p>
+  </Alert>
+);
+
+const StepContentWrapper = ({ children }) => {
+  const decommissionFlag = useFlag('provisioning.decommissioning');
+  return (
+    <>
+      {decommissionFlag && <DecommissioningAlert />}
+      {children}
+    </>
+  );
+};
+
+StepContentWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 const wizardSteps = ({ stepIdReached, image, stepValidation, setStepValidation, setLaunchSuccess }) => [
   {
     name: 'Account and customization',
@@ -54,9 +78,11 @@ const wizardSteps = ({ stepIdReached, image, stepValidation, setStepValidation,
         id: 1,
         enableNext: stepValidation.awsStep,
         component: (
-          <Loader>
-            <AccountCustomizations image={image} setStepValidated={(validated) => setStepValidation((prev) => ({ ...prev, awsStep: validated }))} />
-          </Loader>
+          <StepContentWrapper>
+            <Loader>
+              <AccountCustomizations image={image} setStepValidated={(validated) => setStepValidation((prev) => ({ ...prev, awsStep: validated }))} />
+            </Loader>
+          </StepContentWrapper>
         ),
         canJumpTo: stepIdReached >= 1,
       },
@@ -66,9 +92,11 @@ const wizardSteps = ({ stepIdReached, image, stepValidation, setStepValidation,
     name: 'SSH key authentication',
     id: 4,
     component: (
-      <Loader>
-        <PublicKeys setStepValidated={(validated) => setStepValidation((prev) => ({ ...prev, sshStep: validated }))} />
-      </Loader>
+      <StepContentWrapper>
+        <Loader>
+          <PublicKeys setStepValidated={(validated) => setStepValidation((prev) => ({ ...prev, sshStep: validated }))} />
+        </Loader>
+      </StepContentWrapper>
     ),
     canJumpTo: stepIdReached >= 4,
     enableNext: stepValidation.sshStep,
@@ -77,9 +105,11 @@ const wizardSteps = ({ stepIdReached, image, stepValidation, setStepValidation,
     name: 'Review details',
     id: 5,
     component: (
-      <Loader>
-        <ReviewDetails image={image} />
-      </Loader>
+      <StepContentWrapper>
+        <Loader>
+          <ReviewDetails image={image} />
+        </Loader>
+      </StepContentWrapper>
     ),
     canJumpTo: stepIdReached >= 5,
     nextButtonText: 'Launch',
@@ -88,9 +118,11 @@ const wizardSteps = ({ stepIdReached, image, stepValidation, setStepValidation,
     name: 'Finish Progress',
     id: 6,
     component: (
-      <Loader>
-        <FinishStep setLaunchSuccess={() => setLaunchSuccess(true)} imageID={image.id} />
-      </Loader>
+      <StepContentWrapper>
+        <Loader>
+          <FinishStep setLaunchSuccess={() => setLaunchSuccess(true)} imageID={image.id} />
+        </Loader>
+      </StepContentWrapper>
     ),
     isFinishedStep: true,
   },