From 4428bcb2c02089a99c79ba235fd7eaed5c83e463 Mon Sep 17 00:00:00 2001
From: sumit-tft <70506234+sumit-tft@users.noreply.github.com>
Date: Fri, 18 Jul 2025 13:41:44 +0530
Subject: [PATCH] =?UTF-8?q?feat(ui):=20update=20step=20title=20and=20descr?=
 =?UTF-8?q?iption=20in=20cloud=20provider=20update=20=E2=80=A6=20(#8303)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>
---
 ui/CHANGELOG.md                               |  1 +
 .../workflow/workflow-add-provider.tsx        | 36 +++++++++++++++----
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md
index 16ad54c082..0915f7aea4 100644
--- a/ui/CHANGELOG.md
+++ b/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
 
diff --git a/ui/components/providers/workflow/workflow-add-provider.tsx b/ui/components/providers/workflow/workflow-add-provider.tsx
index edad4beed8..4775fc6045 100644
--- a/ui/components/providers/workflow/workflow-add-provider.tsx
+++ b/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>