feat(update-credentials): add explanation text for the current behavior (#6400)

ui/app/(prowler)/providers/(set-up-provider)/update-credentials/page.tsx

@@ -1,3 +1,4 @@
+import { Alert, cn } from "@nextui-org/react";
 import React from "react";
 
 import {
@@ -14,7 +15,39 @@ export default function UpdateCredentialsPage({ searchParams }: Props) {
   return (
     <>
       {searchParams.type === "aws" && !searchParams.via && (
-        <SelectViaAWS initialVia={searchParams.via} />
+        <>
+          <div className="flex flex-col gap-4">
+            <p className="text-sm text-default-500">
+              If the provider was set up with static credentials, updates must
+              use static credentials. If it was set up with a role, updates must
+              use a role.
+            </p>
+
+            <Alert
+              color="warning"
+              variant="faded"
+              classNames={{
+                base: cn([
+                  "border-1 border-default-200 dark:border-default-100",
+                  "gap-x-4",
+                ]),
+              }}
+              description={
+                <>
+                  To update provider credentials,{" "}
+                  <strong>
+                    you must use the same type that was originally configured.
+                  </strong>{" "}
+                </>
+              }
+            />
+            <p className="text-sm text-default-500">
+              To switch from static credentials to a role (or vice versa), you
+              need to delete the provider and set it up again.
+            </p>
+            <SelectViaAWS initialVia={searchParams.via} />
+          </div>
+        </>
       )}
 
       {((searchParams.type === "aws" && searchParams.via === "credentials") ||

ui/components/findings/table/data-table-row-actions.tsx

@@ -76,7 +76,7 @@ export function DataTableRowActions<FindingProps>({
                 description="Allows you to send the finding to Jira"
                 textValue="Send to Jira"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                // onClick={() => setIsEditOpen(true)}
+                // onPress={() => setIsEditOpen(true)}
               >
                 <span className="hidden text-sm">{findingId}</span>
                 Send to Jira
@@ -86,7 +86,7 @@ export function DataTableRowActions<FindingProps>({
                 description="Allows you to send the finding to Slack"
                 textValue="Send to Slack"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                // onClick={() => setIsEditOpen(true)}
+                // onPress={() => setIsEditOpen(true)}
               >
                 Send to Slack
               </DropdownItem>

ui/components/invitations/table/data-table-row-actions.tsx

@@ -15,6 +15,7 @@ import {
 } from "@nextui-org/shared-icons";
 import { Row } from "@tanstack/react-table";
 import clsx from "clsx";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { VerticalDotsIcon } from "@/components/icons";
@@ -33,6 +34,7 @@ export function DataTableRowActions<InvitationProps>({
   row,
   roles,
 }: DataTableRowActionsProps<InvitationProps>) {
+  const router = useRouter();
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const invitationId = (row.original as { id: string }).id;
@@ -82,11 +84,13 @@ export function DataTableRowActions<InvitationProps>({
           >
             <DropdownSection title="Actions">
               <DropdownItem
-                href={`/invitations/check-details?id=${invitationId}`}
                 key="check-details"
                 description="View invitation details"
                 textValue="Check Details"
                 startContent={<AddNoteBulkIcon className={iconClasses} />}
+                onPress={() =>
+                  router.push(`/invitations/check-details?id=${invitationId}`)
+                }
               >
                 Check Details
               </DropdownItem>
@@ -96,7 +100,7 @@ export function DataTableRowActions<InvitationProps>({
                 description="Allows you to edit the invitation"
                 textValue="Edit Invitation"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                onClick={() => setIsEditOpen(true)}
+                onPress={() => setIsEditOpen(true)}
               >
                 Edit Invitation
               </DropdownItem>
@@ -113,7 +117,7 @@ export function DataTableRowActions<InvitationProps>({
                     className={clsx(iconClasses, "!text-danger")}
                   />
                 }
-                onClick={() => setIsDeleteOpen(true)}
+                onPress={() => setIsDeleteOpen(true)}
               >
                 Revoke Invitation
               </DropdownItem>

ui/components/manage-groups/table/data-table-row-actions.tsx

@@ -69,7 +69,7 @@ export function DataTableRowActions<ProviderProps>({
                 description="Allows you to edit the provider group"
                 textValue="Edit Provider Group"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                onClick={() => router.push(`/manage-groups?groupId=${groupId}`)}
+                onPress={() => router.push(`/manage-groups?groupId=${groupId}`)}
               >
                 Edit Provider Group
               </DropdownItem>
@@ -86,7 +86,7 @@ export function DataTableRowActions<ProviderProps>({
                     className={clsx(iconClasses, "!text-danger")}
                   />
                 }
-                onClick={() => setIsDeleteOpen(true)}
+                onPress={() => setIsDeleteOpen(true)}
               >
                 Delete Provider Group
               </DropdownItem>

ui/components/providers/table/data-table-row-actions.tsx

@@ -15,6 +15,7 @@ import {
 } from "@nextui-org/shared-icons";
 import { Row } from "@tanstack/react-table";
 import clsx from "clsx";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { checkConnectionProvider } from "@/actions/providers/providers";
@@ -33,6 +34,7 @@ const iconClasses =
 export function DataTableRowActions<ProviderProps>({
   row,
 }: DataTableRowActionsProps<ProviderProps>) {
+  const router = useRouter();
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const providerId = (row.original as { id: string }).id;
@@ -87,11 +89,15 @@ export function DataTableRowActions<ProviderProps>({
           >
             <DropdownSection title="Actions">
               <DropdownItem
-                href={`/providers/update-credentials?type=${providerType}&id=${providerId}${providerSecretId ? `&secretId=${providerSecretId}` : ""}`}
                 key="update"
                 description="Update the provider credentials"
                 textValue="Update Credentials"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
+                onPress={() =>
+                  router.push(
+                    `/providers/update-credentials?type=${providerType}&id=${providerId}${providerSecretId ? `&secretId=${providerSecretId}` : ""}`,
+                  )
+                }
               >
                 Update Credentials
               </DropdownItem>
@@ -100,7 +106,7 @@ export function DataTableRowActions<ProviderProps>({
                 description="Check the connection to the provider"
                 textValue="Check Connection"
                 startContent={<AddNoteBulkIcon className={iconClasses} />}
-                onClick={handleTestConnection}
+                onPress={handleTestConnection}
               >
                 Test Connection
               </DropdownItem>
@@ -109,7 +115,7 @@ export function DataTableRowActions<ProviderProps>({
                 description="Allows you to edit the provider"
                 textValue="Edit Provider"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                onClick={() => setIsEditOpen(true)}
+                onPress={() => setIsEditOpen(true)}
               >
                 Edit Provider Alias
               </DropdownItem>
@@ -126,7 +132,7 @@ export function DataTableRowActions<ProviderProps>({
                     className={clsx(iconClasses, "!text-danger")}
                   />
                 }
-                onClick={() => setIsDeleteOpen(true)}
+                onPress={() => setIsDeleteOpen(true)}
               >
                 Delete Provider
               </DropdownItem>

ui/components/roles/table/data-table-row-actions.tsx

@@ -14,6 +14,7 @@ import {
 } from "@nextui-org/shared-icons";
 import { Row } from "@tanstack/react-table";
 import clsx from "clsx";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { VerticalDotsIcon } from "@/components/icons";
@@ -29,6 +30,7 @@ const iconClasses =
 export function DataTableRowActions<RoleProps>({
   row,
 }: DataTableRowActionsProps<RoleProps>) {
+  const router = useRouter();
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const roleId = (row.original as { id: string }).id;
   return (
@@ -59,11 +61,11 @@ export function DataTableRowActions<RoleProps>({
           >
             <DropdownSection title="Actions">
               <DropdownItem
-                href={`/roles/edit?roleId=${roleId}`}
-                key="check-details"
+                key="edit"
                 description="Edit the role details"
                 textValue="Edit Role"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
+                onPress={() => router.push(`/roles/edit?roleId=${roleId}`)}
               >
                 Edit Role
               </DropdownItem>
@@ -80,7 +82,7 @@ export function DataTableRowActions<RoleProps>({
                     className={clsx(iconClasses, "!text-danger")}
                   />
                 }
-                onClick={() => setIsDeleteOpen(true)}
+                onPress={() => setIsDeleteOpen(true)}
               >
                 Delete Role
               </DropdownItem>

ui/components/scans/table/scans/data-table-row-actions.tsx

@@ -69,7 +69,7 @@ export function DataTableRowActions<ScanProps>({
                 description="Allows you to edit the scan name"
                 textValue="Edit Scan Name"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                onClick={() => setIsEditOpen(true)}
+                onPress={() => setIsEditOpen(true)}
               >
                 Edit scan name
               </DropdownItem>

ui/components/ui/sidebar/sidebar-wrap.tsx

@@ -283,7 +283,7 @@ export const SidebarWrap = () => {
         <Tooltip content="Log Out" isDisabled={!isCompact} placement="right">
           <Button
             aria-label="Log Out"
-            onClick={() => logOut()}
+            onPress={() => logOut()}
             className={clsx(
               "justify-start text-default-500 data-[hover=true]:text-foreground",
               {

ui/components/ui/table/data-table-column-header.tsx

@@ -81,7 +81,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   return (
     <Button
       className="flex h-10 w-full items-center justify-between whitespace-nowrap bg-transparent px-0 text-left align-middle text-tiny font-semibold text-foreground-500 outline-none dark:text-slate-400"
-      onClick={getToggleSortingHandler}
+      onPress={getToggleSortingHandler}
     >
       <span className="block whitespace-normal break-normal">{title}</span>
       {renderSortIcon()}

ui/components/users/table/data-table-row-actions.tsx

@@ -88,7 +88,7 @@ export function DataTableRowActions<UserProps>({
                 description="Allows you to edit the user"
                 textValue="Edit User"
                 startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                onClick={() => setIsEditOpen(true)}
+                onPress={() => setIsEditOpen(true)}
               >
                 Edit User
               </DropdownItem>
@@ -105,7 +105,7 @@ export function DataTableRowActions<UserProps>({
                     className={clsx(iconClasses, "!text-danger")}
                   />
                 }
-                onClick={() => setIsDeleteOpen(true)}
+                onPress={() => setIsDeleteOpen(true)}
               >
                 Delete User
               </DropdownItem>