feat(m365): add the new provider m365 - UI part (#7591)

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

@@ -24,22 +24,27 @@ const getProviderFieldDetails = (providerType?: string) => {
     case "aws":
       return {
         label: "Account ID",
-        placeholder: "123456...",
+        placeholder: "e.g. 123456789012",
       };
     case "gcp":
       return {
         label: "Project ID",
-        placeholder: "project_id...",
+        placeholder: "e.g. my-gcp-project",
       };
     case "azure":
       return {
         label: "Subscription ID",
-        placeholder: "fc94207a-d396-4a14-a7fd-12a...",
+        placeholder: "e.g. fc94207a-d396-4a14-a7fd-12ab34cd56ef",
       };
     case "kubernetes":
       return {
         label: "Kubernetes Context",
-        placeholder: "context_name....",
+        placeholder: "e.g. my-cluster-context",
+      };
+    case "m365":
+      return {
+        label: "Domain ID",
+        placeholder: "e.g. your-domain.onmicrosoft.com",
       };
     default:
       return {

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

@@ -18,6 +18,7 @@ import { getTask } from "@/actions/task/tasks";
 import { CheckIcon, RocketIcon } from "@/components/icons";
 import { useToast } from "@/components/ui";
 import { CustomButton } from "@/components/ui/custom";
+import { ProviderType } from "@/components/ui/entities";
 import { Form } from "@/components/ui/form";
 import { checkTaskStatus } from "@/lib/helper";
 import { ApiError, testConnectionFormSchema } from "@/types";
@@ -41,7 +42,7 @@ export const TestConnectionForm = ({
           connected: boolean | null;
           last_checked_at: string | null;
         };
-        provider: "aws" | "azure" | "gcp" | "kubernetes";
+        provider: ProviderType;
         alias: string;
         scanner_args: Record<string, any>;
       };

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

@@ -19,6 +19,7 @@ import {
   AzureCredentials,
   GCPCredentials,
   KubernetesCredentials,
+  M365Credentials,
 } from "@/types";
 
 import { ProviderTitleDocs } from "../provider-title-docs";
@@ -26,6 +27,7 @@ import { AWScredentialsForm } from "./via-credentials/aws-credentials-form";
 import { AzureCredentialsForm } from "./via-credentials/azure-credentials-form";
 import { GCPcredentialsForm } from "./via-credentials/gcp-credentials-form";
 import { KubernetesCredentialsForm } from "./via-credentials/k8s-credentials-form";
+import { M365CredentialsForm } from "./via-credentials/m365-credentials-form";
 
 type CredentialsFormSchema = z.infer<
   ReturnType<typeof addCredentialsFormSchema>
@@ -36,7 +38,8 @@ type FormType = CredentialsFormSchema &
   AWSCredentials &
   AzureCredentials &
   GCPCredentials &
-  KubernetesCredentials;
+  KubernetesCredentials &
+  M365Credentials;
 
 export const ViaCredentialsForm = ({
   searchParams,
@@ -76,17 +79,25 @@ export const ViaCredentialsForm = ({
               client_secret: "",
               tenant_id: "",
             }
-          : providerType === "gcp"
+          : providerType === "m365"
             ? {
                 client_id: "",
                 client_secret: "",
-                refresh_token: "",
+                tenant_id: "",
+                user: "",
+                encrypted_password: "",
               }
-            : providerType === "kubernetes"
+            : providerType === "gcp"
               ? {
-                  kubeconfig_content: "",
+                  client_id: "",
+                  client_secret: "",
+                  refresh_token: "",
                 }
-              : {}),
+              : providerType === "kubernetes"
+                ? {
+                    kubeconfig_content: "",
+                  }
+                : {}),
     },
   });
 
@@ -135,6 +146,18 @@ export const ViaCredentialsForm = ({
               message: errorMessage,
             });
             break;
+          case "/data/attributes/secret/user":
+            form.setError("user", {
+              type: "server",
+              message: errorMessage,
+            });
+            break;
+          case "/data/attributes/secret/encrypted_password":
+            form.setError("encrypted_password", {
+              type: "server",
+              message: errorMessage,
+            });
+            break;
           case "/data/attributes/secret/tenant_id":
             form.setError("tenant_id", {
               type: "server",
@@ -191,6 +214,11 @@ export const ViaCredentialsForm = ({
             control={form.control as unknown as Control<AzureCredentials>}
           />
         )}
+        {providerType === "m365" && (
+          <M365CredentialsForm
+            control={form.control as unknown as Control<M365Credentials>}
+          />
+        )}
         {providerType === "gcp" && (
           <GCPcredentialsForm
             control={form.control as unknown as Control<GCPCredentials>}

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

@@ -2,3 +2,4 @@ export * from "./aws-credentials-form";
 export * from "./azure-credentials-form";
 export * from "./gcp-credentials-form";
 export * from "./k8s-credentials-form";
+export * from "./m365-credentials-form";

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

@@ -0,0 +1,78 @@
+import { Control } from "react-hook-form";
+
+import { CustomInput } from "@/components/ui/custom";
+import { M365Credentials } from "@/types";
+
+export const M365CredentialsForm = ({
+  control,
+}: {
+  control: Control<M365Credentials>;
+}) => {
+  return (
+    <>
+      <div className="flex flex-col">
+        <div className="text-md font-bold leading-9 text-default-foreground">
+          Connect via Credentials
+        </div>
+        <div className="text-sm text-default-500">
+          Please provide the information for your Microsoft 365 credentials.
+        </div>
+      </div>
+      <CustomInput
+        control={control}
+        name="client_id"
+        type="text"
+        label="Client ID"
+        labelPlacement="inside"
+        placeholder="Enter the Client ID"
+        variant="bordered"
+        isRequired
+        isInvalid={!!control._formState.errors.client_id}
+      />
+      <CustomInput
+        control={control}
+        name="client_secret"
+        type="password"
+        label="Client Secret"
+        labelPlacement="inside"
+        placeholder="Enter the Client Secret"
+        variant="bordered"
+        isRequired
+        isInvalid={!!control._formState.errors.client_secret}
+      />
+      <CustomInput
+        control={control}
+        name="tenant_id"
+        type="text"
+        label="Tenant ID"
+        labelPlacement="inside"
+        placeholder="Enter the Tenant ID"
+        variant="bordered"
+        isRequired
+        isInvalid={!!control._formState.errors.tenant_id}
+      />
+      <CustomInput
+        control={control}
+        name="user"
+        type="text"
+        label="User"
+        labelPlacement="inside"
+        placeholder="Enter the User"
+        variant="bordered"
+        isRequired
+        isInvalid={!!control._formState.errors.user}
+      />
+      <CustomInput
+        control={control}
+        name="encrypted_password"
+        type="password"
+        label="Encrypted Password"
+        labelPlacement="inside"
+        placeholder="Enter the Password"
+        variant="bordered"
+        isRequired
+        isInvalid={!!control._formState.errors.encrypted_password}
+      />
+    </>
+  );
+};