feat(HMS-2496): add no permission empty state

src/Components/ProvisioningWizard/ProvisioningWizard.test.js

@@ -18,6 +18,14 @@ describe('ProvisioningWizard', () => {
       })
     );
   });
+  describe('no permissions', () => {
+    test('shows no permissions modal', async () => {
+      render(<ProvisioningWizard hasAccess={false} image={{ ...awsImage, sourceIDs: ['1'] }} />);
+      const missingPermissionTitle = 'No permissions available';
+      const modal = await screen.findByText(missingPermissionTitle);
+      expect(modal).toBeInTheDocument();
+    });
+  });
 
   describe('Available source validation', () => {
     test('handles unreachable - invalid - source gracefuly', async () => {
@@ -34,7 +42,7 @@ describe('ProvisioningWizard', () => {
         })
       );
 
-      render(<ProvisioningWizard image={{ ...awsImage, sourceIDs: ['1'] }} />);
+      render(<ProvisioningWizard hasAccess image={{ ...awsImage, sourceIDs: ['1'] }} />);
       // wait for the sources to load
       await screen.findByText('Select account', undefined, { timeout: 10000 });
 
@@ -45,13 +53,13 @@ describe('ProvisioningWizard', () => {
     }, 30000);
 
     test('shows loading sources', () => {
-      render(<ProvisioningWizard image={awsImage} />);
+      render(<ProvisioningWizard hasAccess image={awsImage} />);
       expect(screen.getByText(/Loading available Sources/i)).toBeInTheDocument();
     });
 
     test('shows empty state when no sources matching', async () => {
       // the image has no source info, thus no match
-      render(<ProvisioningWizard image={awsImage} />);
+      render(<ProvisioningWizard hasAccess image={awsImage} />);
       const createBtn = await screen.findByText('Create Source');
 
       expect(createBtn).toBeInTheDocument();

src/Components/ProvisioningWizard/index.js

@@ -13,13 +13,14 @@ import './steps/Pubkeys/pubkeys.scss';
 import { v4 as uuidv4 } from 'uuid';
 import axios from 'axios';
 import { useEffectOnce } from '../Common/Hooks/useEffectOnce';
+import PermissionMissing from './steps/NoPermission';
 
 const DEFAULT_STEP_VALIDATION = {
   sshStep: false,
   awsStep: false,
 };
 
-const ProvisioningWizard = ({ onClose, image, ...props }) => {
+const ProvisioningWizard = ({ onClose, hasAccess, image, ...props }) => {
   const [stepIdReached, setStepIdReached] = React.useState(1);
   const [stepValidation, setStepValidation] = React.useState(DEFAULT_STEP_VALIDATION);
   const [isConfirming, setConfirming] = React.useState(false);
@@ -56,13 +57,17 @@ const ProvisioningWizard = ({ onClose, image, ...props }) => {
     stepValidation,
     setStepValidation,
     setLaunchSuccess,
+    hasAccess,
   });
 
-  const onNext = ({ id, name }, { prevId, prevName }) => {
-    console.debug(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
+  const onNext = ({ id }) => {
     setStepIdReached((prevID) => (prevID < id ? id : prevID));
   };
 
+  if (!hasAccess) {
+    return <PermissionMissing onClose={onClose} image={image} />;
+  }
+
   return (
     <>
       <Wizard

src/Components/ProvisioningWizard/steps/NoPermission/index.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateSecondaryActions, Title } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import DirectProviderLink from '../SourceMissing/DirectProviderLink';
+import { imageProps } from '../../helpers';
+
+const missingPermissionTitle = 'No permissions available';
+const missingPermissionDescription = (
+  <>
+    <p>There are no permissions available for launching this image.</p>
+    <p>Contact your org admin for granting launch permissions.</p>
+    <p>or launch directly from the cloud provider console.</p>
+  </>
+);
+
+const PermissionMissing = ({ image, onClose }) => {
+  return (
+    <EmptyState>
+      <EmptyStateIcon icon={PlusCircleIcon} />
+      <Title headingLevel="h4" size="lg">
+        {missingPermissionTitle}
+      </Title>
+      <EmptyStateBody>{missingPermissionDescription}</EmptyStateBody>
+      <DirectProviderLink image={image} />
+      <EmptyStateSecondaryActions>
+        <Button variant="link" onClick={onClose}>
+          Close
+        </Button>
+      </EmptyStateSecondaryActions>
+    </EmptyState>
+  );
+};
+
+PermissionMissing.propTypes = {
+  image: imageProps,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default PermissionMissing;