console: do not hide one-click-deploy error box till retried step is reached

[GT-497]: https://hasurahq.atlassian.net/browse/GT-497?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/7969
GitOrigin-RevId: b99544359fc15b83261f7cc790421b7fea5513ff

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OneClickDeployment/components/CliLog/CliLog.tsx

@@ -72,6 +72,7 @@ export const CliLog: React.VFC<Props> = props => {
               <ErrorBox
                 step={step}
                 error={status.error}
+                logId={status.logId}
                 retryAction={retryAction}
                 fallbackApps={fallbackApps}
               />

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OneClickDeployment/components/CliLog/components/ErrorBox.tsx

@@ -15,25 +15,20 @@ import { transformFallbackAppToLinkButtonProps } from '../fallbackAppUtil';
 type Props = {
   step: UserFacingStep;
   error: Record<string, any>;
+  logId: number;
   retryAction: VoidFunction;
   fallbackApps: FallbackApp[];
 };
 
 export function ErrorBox(props: Props) {
-  const { step, error, retryAction, fallbackApps } = props;
+  const { step, error, retryAction, fallbackApps, logId } = props;
 
   const [isRetrying, setIsRetrying] = React.useState(false);
+
+  // mark retry as complete if logId is different
   React.useEffect(() => {
-    let timeout: NodeJS.Timeout;
-    if (isRetrying) {
-      timeout = setTimeout(() => {
-        setIsRetrying(false);
-      }, 5000);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [isRetrying]);
+    setIsRetrying(false);
+  }, [logId]);
 
   const onRetryClick = () => {
     if (!isRetrying && retryAction) {

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OneClickDeployment/types.ts

@@ -62,6 +62,7 @@ export type ProgressStateStatus =
   | {
       kind: 'error';
       error: Record<string, any>;
+      logId: number;
     }
   | {
       kind: 'awaiting';

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OneClickDeployment/util.test.ts

@@ -76,6 +76,7 @@ const tc: {
       [OneClickDeploymentState.ReadingEnvironmentVariables]: {
         kind: 'error',
         error: { message: 'unexpected' },
+        logId: 2,
       },
       [OneClickDeploymentState.AwaitingEnvironmentVariables]: { kind: 'idle' },
       [OneClickDeploymentState.SufficientEnvironmentVariables]: {
@@ -158,6 +159,7 @@ const tc: {
       [OneClickDeploymentState.ApplyingMetadataMigrationsSeeds]: {
         kind: 'error',
         error: { message: 'unable to connect' },
+        logId: 2,
       },
       [OneClickDeploymentState.Completed]: { kind: 'idle' },
     },

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OneClickDeployment/util.ts

@@ -16,12 +16,23 @@ const getStepError = (
   allStateTransitionsOrdered: OneClickDeploymentStateTransition[],
   step: UserFacingStep
 ): ProgressStateStatus | null => {
-  const lastTransition =
-    allStateTransitionsOrdered[allStateTransitionsOrdered.length - 1];
-  return lastTransition?.from_state === step &&
-    lastTransition.to_state === OneClickDeploymentState.Error
-    ? { kind: 'error', error: lastTransition.additional_info }
-    : null;
+  let errorStatus: ProgressStateStatus | null = null;
+  // run through all transitions to get the latest state of a step
+  allStateTransitionsOrdered.forEach(transition => {
+    if (transition.from_state === step) {
+      if (transition.to_state === OneClickDeploymentState.Error) {
+        errorStatus = {
+          kind: 'error',
+          error: transition.additional_info,
+          logId: transition.id,
+        };
+      } else {
+        errorStatus = null;
+      }
+    }
+  });
+
+  return errorStatus;
 };
 
 /**
@@ -34,6 +45,7 @@ const getStepSuccess = (
   step: UserFacingStep
 ): ProgressStateStatus | null => {
   let successStatus: ProgressStateStatus | null = null;
+  // run through all transitions to get the latest state of a step
   allStateTransitionsOrdered.forEach(transition => {
     if (transition.from_state === step) {
       // it's not a success if the step goes into an error
@@ -129,17 +141,19 @@ const getStepProgressState = (
     return { kind: 'idle' };
   }
 
-  // return error if error
-  const stepError = getStepError(allStateTransitionsOrdered, step);
-  if (stepError) return stepError;
-
   // return success if success
   const stepSuccess = getStepSuccess(allStateTransitionsOrdered, step);
   if (stepSuccess) return stepSuccess;
 
-  return (
-    getStepPendingState(allStateTransitionsOrdered, step) || { kind: 'idle' }
-  );
+  // return pending if in progress
+  const stepPending = getStepPendingState(allStateTransitionsOrdered, step);
+  if (stepPending) return stepPending;
+
+  // return error if error
+  const stepError = getStepError(allStateTransitionsOrdered, step);
+  if (stepError) return stepError;
+
+  return { kind: 'idle' };
 };
 
 export const getCliProgressState = (