feat(ui): update step title and description in cloud provider update … (#8303)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 ### 🔄 Changed
 
 - Upgrade to Next.js 14.2.30 and lock TypeScript to 5.5.4 for ESLint compatibility [(#8189)](https://github.com/prowler-cloud/prowler/pull/8189)
+- Improved active step highlighting and updated step titles and descriptions in the Cloud Provider credentials update flow [(#8303)](https://github.com/prowler-cloud/prowler/pull/8303)
 
 ### 🐞 Fixed
 

ui/components/providers/workflow/workflow-add-provider.tsx

@@ -27,14 +27,38 @@ const steps = [
   },
 ];
 
+const ROUTE_CONFIG: Record<
+  string,
+  {
+    stepIndex: number;
+    stepOverride?: { index: number; title: string; description: string };
+  }
+> = {
+  "/providers/connect-account": { stepIndex: 0 },
+  "/providers/add-credentials": { stepIndex: 1 },
+  "/providers/test-connection": { stepIndex: 2 },
+  "/providers/update-credentials": {
+    stepIndex: 1,
+    stepOverride: {
+      index: 2,
+      title: "Make sure the new credentials are valid",
+      description: "Valid credentials will take you back to the providers page",
+    },
+  },
+};
+
 export const WorkflowAddProvider = () => {
   const pathname = usePathname();
 
-  // Calculate current step based on pathname
-  const currentStepIndex = steps.findIndex((step) =>
-    pathname.endsWith(step.href),
-  );
-  const currentStep = currentStepIndex === -1 ? 0 : currentStepIndex;
+  const config = ROUTE_CONFIG[pathname] || { stepIndex: 0 };
+  const currentStep = config.stepIndex;
+
+  const updatedSteps = steps.map((step, index) => {
+    if (config.stepOverride && index === config.stepOverride.index) {
+      return { ...step, ...config.stepOverride };
+    }
+    return step;
+  });
 
   return (
     <section className="max-w-sm">
@@ -63,7 +87,7 @@ export const WorkflowAddProvider = () => {
         hideProgressBars
         currentStep={currentStep}
         stepClassName="border border-default-200 dark:border-default-50 aria-[current]:bg-default-100 dark:aria-[current]:bg-prowler-blue-800 cursor-default"
-        steps={steps}
+        steps={updatedSteps}
       />
       <Spacer y={4} />
     </section>