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

src/Components/ProvisioningWizard/ProvisioningWizard.test.js

@@ -34,7 +34,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,16 +45,23 @@ 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();
     });
+
+    test('shows no permissions modal', async () => {
+      render(<ProvisioningWizard onClose={jest.fn} hasAccess={false} image={{ ...awsImage, sourceIDs: ['1'] }} />);
+      const missingPermissionTitle = 'Access permissions needed';
+      const modal = await screen.findByText(missingPermissionTitle);
+      expect(modal).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);
@@ -58,11 +59,14 @@ const ProvisioningWizard = ({ onClose, image, ...props }) => {
     setLaunchSuccess,
   });
 
-  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,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateSecondaryActions, Title } from '@patternfly/react-core';
+import { LockIcon } from '@patternfly/react-icons';
+import DirectProviderLink from '../SourceMissing/DirectProviderLink';
+import { imageProps } from '../../helpers';
+
+const missingPermissionTitle = 'Access permissions needed';
+const missingPermissionDescription = (
+  <>
+    <p>To launch this image, contact your org admin to adjust your launch permissions. </p>
+    <p>Alternatively, launch directly from the cloud provider console.</p>
+  </>
+);
+
+const PermissionMissing = ({ image, onClose }) => {
+  return (
+    <EmptyState>
+      <EmptyStateIcon icon={LockIcon} />
+      <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;