feat(ui): add MongoDB Atlas provider support (#9253)

Co-authored-by: Alan Buscaglia <gentlemanprogramming@gmail.com>

ui/components/providers/workflow/forms/base-credentials-form.tsx

@@ -20,6 +20,7 @@ import {
   KubernetesCredentials,
   M365CertificateCredentials,
   M365ClientSecretCredentials,
+  MongoDBAtlasCredentials,
   OCICredentials,
   ProviderType,
 } from "@/types";
@@ -37,6 +38,7 @@ import { AzureCredentialsForm } from "./via-credentials/azure-credentials-form";
 import { GitHubCredentialsForm } from "./via-credentials/github-credentials-form";
 import { IacCredentialsForm } from "./via-credentials/iac-credentials-form";
 import { KubernetesCredentialsForm } from "./via-credentials/k8s-credentials-form";
+import { MongoDBAtlasCredentialsForm } from "./via-credentials/mongodbatlas-credentials-form";
 import { OracleCloudCredentialsForm } from "./via-credentials/oraclecloud-credentials-form";
 
 type BaseCredentialsFormProps = {
@@ -172,6 +174,13 @@ export const BaseCredentialsForm = ({
             control={form.control as unknown as Control<OCICredentials>}
           />
         )}
+        {providerType === "mongodbatlas" && (
+          <MongoDBAtlasCredentialsForm
+            control={
+              form.control as unknown as Control<MongoDBAtlasCredentials>
+            }
+          />
+        )}
 
         <div className="flex w-full justify-end gap-4">
           {showBackButton && requiresBackButton(searchParamsObj.get("via")) && (

ui/components/providers/workflow/forms/connect-account-form.tsx

@@ -62,6 +62,11 @@ const getProviderFieldDetails = (providerType?: ProviderType) => {
         label: "Tenancy OCID",
         placeholder: "e.g. ocid1.tenancy.oc1..aaaaaaa...",
       };
+    case "mongodbatlas":
+      return {
+        label: "Organization ID",
+        placeholder: "e.g. 5f43a8c4e1234567890abcde",
+      };
     default:
       return {
         label: "Provider UID",

ui/components/providers/workflow/forms/test-connection-form.tsx

@@ -45,7 +45,7 @@ export const TestConnectionForm = ({
         };
         provider: ProviderType;
         alias: string;
-        scanner_args: Record<string, any>;
+        scanner_args: Record<string, unknown>;
       };
       relationships: {
         secret: {
@@ -239,27 +239,27 @@ export const TestConnectionForm = ({
         </div>
 
         {apiErrorMessage && (
-          <div className="text-text-error mt-4 rounded-md bg-red-100 p-3">
+          <div className="text-text-error-primary mt-4 rounded-md p-3">
             <p>{`Provider ID ${apiErrorMessage?.toLowerCase()}. Please check and try again.`}</p>
           </div>
         )}
 
         {connectionStatus && !connectionStatus.connected && (
           <>
-            <div className="flex items-center gap-4 rounded-lg border border-red-200 bg-red-50 p-4">
-              <div className="flex items-center">
+            <div className="border-border-error flex items-start gap-4 rounded-lg border p-4">
+              <div className="flex shrink-0 items-center">
                 <Icon
                   icon="heroicons:exclamation-circle"
-                  className="text-text-error h-5 w-5"
+                  className="text-text-error-primary h-5 w-5"
                 />
               </div>
-              <div className="flex items-center">
-                <p className="text-small text-text-error">
+              <div className="min-w-0 flex-1">
+                <p className="text-small text-text-error-primary break-words">
                   {connectionStatus.error || "Unknown error"}
                 </p>
               </div>
             </div>
-            <p className="text-small text-text-error">
+            <p className="text-small text-text-error-primary">
               It seems there was an issue with your credentials. Please review
               your credentials and try again.
             </p>

ui/components/providers/workflow/forms/via-credentials/index.ts

@@ -2,3 +2,4 @@ export * from "./azure-credentials-form";
 export * from "./github-credentials-form";
 export * from "./iac-credentials-form";
 export * from "./k8s-credentials-form";
+export * from "./mongodbatlas-credentials-form";

ui/components/providers/workflow/forms/via-credentials/mongodbatlas-credentials-form.tsx

@@ -0,0 +1,49 @@
+import { Control } from "react-hook-form";
+
+import { CustomInput } from "@/components/ui/custom";
+import { ProviderCredentialFields } from "@/lib/provider-credentials/provider-credential-fields";
+import { MongoDBAtlasCredentials } from "@/types";
+
+export const MongoDBAtlasCredentialsForm = ({
+  control,
+}: {
+  control: Control<MongoDBAtlasCredentials>;
+}) => {
+  return (
+    <>
+      <div className="flex flex-col">
+        <div className="text-md text-default-foreground leading-9 font-bold">
+          Connect via API Keys
+        </div>
+        <div className="text-default-500 text-sm">
+          Provide an organization-level MongoDB Atlas API public and private key
+          with read access to the resources you want Prowler to assess.
+        </div>
+      </div>
+      <CustomInput
+        control={control}
+        name={ProviderCredentialFields.ATLAS_PUBLIC_KEY}
+        type="text"
+        label="Atlas Public Key"
+        labelPlacement="inside"
+        placeholder="e.g. abcdefgh"
+        variant="bordered"
+        isRequired
+      />
+      <CustomInput
+        control={control}
+        name={ProviderCredentialFields.ATLAS_PRIVATE_KEY}
+        type="password"
+        label="Atlas Private Key"
+        labelPlacement="inside"
+        placeholder="Enter the private key"
+        variant="bordered"
+        isRequired
+      />
+      <div className="text-default-400 text-xs">
+        Keys never leave your browser unencrypted and are stored as secrets in
+        the backend. Rotate the key from MongoDB Atlas anytime if needed.
+      </div>
+    </>
+  );
+};