Use step approach also for bootstrap

public/app/features/provisioning/Wizard/BootstrapStep.tsx

@@ -19,6 +19,7 @@ import {
 } from '@grafana/ui';
 
 import { useGetFrontendSettingsQuery, useGetRepositoryFilesQuery } from '../api';
+import { StepStatus } from '../hooks/useStepStatus';
 import { checkSyncSettings } from '../utils';
 
 import { WizardFormData } from './types';
@@ -26,6 +27,11 @@ import { WizardFormData } from './types';
 type Target = 'instance' | 'folder';
 type Operation = 'pull' | 'migrate';
 
+interface Props {
+  onOptionSelect: (requiresMigration: boolean) => void;
+  onStepUpdate: (status: StepStatus, error?: string) => void;
+}
+
 interface ModeOption {
   value: Target;
   operation: Operation;
@@ -55,19 +61,13 @@ const modeOptions: ModeOption[] = [
 ];
 
 const backendSrv = getBackendSrv();
-type Props = {
-  onOptionSelect: (requiresMigration: boolean) => void;
-  onStatusChange: (success: boolean) => void;
-  onRunningChange: (isRunning: boolean) => void;
-  onErrorChange: (error: string | null) => void;
-};
 
 interface OptionState {
   isDisabled: boolean;
   disabledReason?: string;
 }
 
-export function BootstrapStep({ onOptionSelect, onStatusChange, onRunningChange, onErrorChange }: Props) {
+export function BootstrapStep({ onOptionSelect, onStepUpdate }: Props) {
   const {
     register,
     control,
@@ -83,7 +83,7 @@ export function BootstrapStep({ onOptionSelect, onStatusChange, onRunningChange,
   const [hasInitialized, setHasInitialized] = useState(false);
 
   const { value: counts, loading: isLoadingCounts } = useAsync(async () => {
-    onRunningChange(true);
+    onStepUpdate('running');
     try {
       // Fetch dashboard count
       const dashboardData = await backendSrv.get('/apis/dashboard.grafana.app/v0alpha1/namespaces/default/search', {
@@ -99,8 +99,7 @@ export function BootstrapStep({ onOptionSelect, onStatusChange, onRunningChange,
         type: 'dashboard',
       });
 
-      onStatusChange(true);
-      onErrorChange(null);
+      onStepUpdate('success');
 
       return {
         dashboardCount: dashboardData.totalHits || 0,
@@ -108,14 +107,11 @@ export function BootstrapStep({ onOptionSelect, onStatusChange, onRunningChange,
       };
     } catch (error) {
       console.error('Error fetching counts:', error);
-      onErrorChange(error instanceof Error ? error.message : 'Failed to fetch resource counts');
-      onStatusChange(false);
+      onStepUpdate('error', error instanceof Error ? error.message : 'Failed to fetch resource counts');
       return {
         dashboardCount: 0,
         folderCount: 0,
       };
-    } finally {
-      onRunningChange(false);
     }
   }, []);
 

public/app/features/provisioning/Wizard/WizardContent.tsx

@@ -52,8 +52,6 @@ export function WizardContent({
   const [deleteRepository] = useDeleteRepositoryMutation();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isCancelling, setIsCancelling] = useState(false);
-  const [isJobRunning, setIsJobRunning] = useState(false);
-  const [hasError, setHasError] = useState(false);
 
   const [stepStatus, setStepStatus] = useState<StepStatus>('idle');
   const [stepError, setStepError] = useState<string | undefined>();
@@ -64,19 +62,6 @@ export function WizardContent({
     setStepError(error);
   }, []);
 
-  const handleJobRunningChange = (isRunning: boolean): void => {
-    setIsJobRunning(isRunning);
-  };
-
-  const handleJobStatusChange = (success: boolean): void => {
-    handleStatusChange(success);
-    setHasError(!success);
-  };
-
-  const handleJobErrorChange = (error: string | null) => {
-    setHasError(!!error);
-  };
-
   const handleCancel = async () => {
     if (activeStep === 'connection') {
       navigate(PROVISIONING_URL);
@@ -137,7 +122,7 @@ export function WizardContent({
     } else {
       // For job steps, only proceed if the job was successful
       if (isJobStep(activeStep)) {
-        if (stepSuccess && !isJobRunning) {
+        if (stepSuccess) {
           handleNext();
         }
       } else {
@@ -207,12 +192,7 @@ export function WizardContent({
       <div className={styles.content}>
         {activeStep === 'connection' && <ConnectStep />}
         {activeStep === 'bootstrap' && (
-          <BootstrapStep
-            onOptionSelect={onOptionSelect}
-            onStatusChange={handleJobStatusChange}
-            onRunningChange={handleJobRunningChange}
-            onErrorChange={handleJobErrorChange}
-          />
+          <BootstrapStep onOptionSelect={onOptionSelect} onStepUpdate={handleStepUpdate} />
         )}
         {activeStep === 'migrate' && requiresMigration && <MigrateStep onStepUpdate={handleStepUpdate} />}
         {activeStep === 'pull' && !requiresMigration && <PullStep onStepUpdate={handleStepUpdate} />}
@@ -223,7 +203,7 @@ export function WizardContent({
 
       <Stack gap={2} justifyContent="flex-end">
         <Button
-          variant={hasError ? 'primary' : 'secondary'}
+          variant={stepStatus === 'error' ? 'primary' : 'secondary'}
           onClick={handleCancel}
           disabled={isSubmitting || isCancelling}
         >