Fix Provision failing when region is not available (#3600)

dashboard/src/components/PreflightChecks.tsx

@@ -13,6 +13,7 @@ import Loading from "./Loading";
 type Props = RouteComponentProps & {
   preflightData: any
   provider: 'AWS' | 'GCP' | 'DEFAULT';
+  error?: string;
 
 };
 
@@ -97,10 +98,16 @@ const PreflightChecks: React.FC<Props> = (props) => {
         Porter checks that the account has the right permissions and resources to provision a cluster.
       </Text>
       <Spacer y={1} />
-      {Object.keys(currentMessageConst).map((checkKey) => (
-        <PreflightCheckItem key={checkKey} checkKey={checkKey} />
-      ))}
-    </AppearingDiv>
+      {
+        props.error ?
+          <Error message="Selected region is not available for your account. Please select another region" />
+          :
+          Object.keys(currentMessageConst).map((checkKey) => (
+            <PreflightCheckItem key={checkKey} checkKey={checkKey} />
+          ))
+
+      }
+    </AppearingDiv >
   );
 };
 

dashboard/src/components/ProvisionerSettings.tsx

@@ -133,6 +133,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
   const [isLoading, setIsLoading] = useState(false);
   const [preflightData, setPreflightData] = useState(null)
   const [preflightFailed, setPreflightFailed] = useState<boolean>(true)
+  const [preflightError, setPreflightError] = useState<string>("")
 
   const markStepStarted = async (step: string, errMessage?: string) => {
     try {
@@ -480,52 +481,60 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
   useEffect(() => {
     if (!props.clusterId) {
       setStep(1)
-      setPreflightData(null)
       preflightChecks()
     }
   }, [props.selectedClusterVersion, awsRegion]);
 
 
   const preflightChecks = async () => {
-    setIsLoading(true);
-    setPreflightData(null);
 
-    var data = new PreflightCheckRequest({
-      projectId: BigInt(currentProject.id),
-      cloudProvider: EnumCloudProvider.AWS,
-      cloudProviderCredentialsId: props.credentialId,
-      preflightValues: {
-        case: "eksPreflightValues",
-        value: new EKSPreflightValues({
-          region: awsRegion,
-        })
+    try {
+      setIsLoading(true);
+      setPreflightData(null);
+      setPreflightFailed(true)
+      setPreflightError("");
+
+      var data = new PreflightCheckRequest({
+        projectId: BigInt(currentProject.id),
+        cloudProvider: EnumCloudProvider.AWS,
+        cloudProviderCredentialsId: props.credentialId,
+        preflightValues: {
+          case: "eksPreflightValues",
+          value: new EKSPreflightValues({
+            region: awsRegion,
+          })
+        }
+      });
+      const preflightDataResp = await api.preflightCheck(
+        "<token>", data,
+        {
+          id: currentProject.id,
+        }
+      )
+      // Check if any of the preflight checks has a message
+      let hasMessage = false;
+      let errors = "Preflight Checks Failed : ";
+      for (let check in preflightDataResp?.data?.Msg.preflight_checks) {
+        if (preflightDataResp?.data?.Msg.preflight_checks[check]?.message) {
+          hasMessage = true;
+          errors = errors + check + ", "
+        }
       }
-    });
-    const preflightDataResp = await api.preflightCheck(
-      "<token>", data,
-      {
-        id: currentProject.id,
+      // If none of the checks have a message, set setPreflightFailed to false
+      if (hasMessage) {
+        markStepStarted("provisioning-failed", errors);
       }
-    )
-    // Check if any of the preflight checks has a message
-    let hasMessage = false;
-    let errors = "Preflight Checks Failed : ";
-    for (let check in preflightDataResp?.data?.Msg.preflight_checks) {
-      if (preflightDataResp?.data?.Msg.preflight_checks[check]?.message) {
-        hasMessage = true;
-        errors = errors + check + ", "
+      if (!hasMessage) {
+        setPreflightFailed(false);
+        setStep(2);
       }
+      setPreflightData(preflightDataResp?.data?.Msg);
+      setIsLoading(false)
+    } catch (err) {
+      setPreflightError(err)
+      setIsLoading(false)
+      setPreflightFailed(true);
     }
-    // If none of the checks have a message, set setPreflightFailed to false
-    if (hasMessage) {
-      markStepStarted("provisioning-failed", errors);
-    }
-    if (!hasMessage) {
-      setPreflightFailed(false);
-      setStep(2);
-    }
-    setPreflightData(preflightDataResp?.data?.Msg);
-    setIsLoading(false)
 
   }
   const renderAdvancedSettings = () => {
@@ -997,7 +1006,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
               </>
             </>,
             <>
-              <PreflightChecks provider='AWS' preflightData={preflightData} />
+              <PreflightChecks provider='AWS' preflightData={preflightData} error={preflightError} />
               <Spacer y={.5} />
               {(preflightFailed && preflightData) &&
                 <>