collect inputs specific to module: basicAuth

Author: RajatPawar

src/components/Configure/layout/ProtectedConnectionLayout.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useConnections } from "context/ConnectionsContextProvider";
 import { useInstallIntegrationProps } from "context/InstallIIntegrationContextProvider/InstallIntegrationContextProvider";
-import { Connection } from "services/api";
+import { Connection, ProviderInfo, Integration } from "services/api";
 import { SuccessTextBox } from "src/components/SuccessTextBox/SuccessTextBox";
 import { Button } from "src/components/ui-base/Button";
 import { handleServerError } from "src/utils/handleServerError";
@@ -22,6 +22,36 @@ import {
 
 import { SHOW_CUSTOM_AUTH_TEST_DATA, testProviderInfo } from "./testdata";
 
+/**
+ * Determines the module to use based on provider configuration and integration settings
+ * @param providerInfo Provider information containing module configuration
+ * @param integrationObj Integration object that may override the default module
+ * @returns The module to use, or undefined if no modules are configured
+ * @throws Error if modules are configured but no default module is found
+ */
+function determineModule(
+  providerInfo: ProviderInfo,
+  integrationObj?: Integration | null
+): string | undefined {
+  // If there's more than one module, we need to figure out the current module
+  // to understand which inputs to collect from the user.
+  if (providerInfo.modules && Object.keys(providerInfo.modules).length > 0) {
+    let module = providerInfo.defaultModule;
+    if (!module) {
+      throw new Error("No default module found.");
+    }
+
+    if (integrationObj?.latestRevision?.content?.module) {
+      // The integration has a module, override the default module with the integration's module.
+      module = integrationObj.latestRevision.content.module;
+    }
+
+    return module;
+  }
+
+  return undefined;
+}
+
 interface ProtectedConnectionLayoutProps {
   provider?: string; // passed in from ConnectProvider Component
   consumerRef: string;
@@ -53,7 +83,7 @@ export function ProtectedConnectionLayout({
     providerName,
     selectedProvider,
   } = useProvider(provider);
-  const { provider: providerFromProps, isIntegrationDeleted } =
+  const { provider: providerFromProps, isIntegrationDeleted, integrationObj } =
     useInstallIntegrationProps();
   const { selectedConnection, setSelectedConnection } = useConnections();
   useConnectionHandler({ onSuccess });
@@ -105,6 +135,33 @@ export function ProtectedConnectionLayout({
   if (providerInfo == null)
     return <ComponentContainerError message="Provider info was not found." />;
 
+  let module: string | undefined;
+  try {
+    module = determineModule(providerInfo, integrationObj);
+  } catch (error) {
+    return <ComponentContainerError message={(error as Error).message} />;
+  }
+
+  // Filter metadata fields based on the module
+  const getmetadataFields = () => {
+    const metadataFields = providerInfo.metadata?.input || [];
+
+    // If no module, show all fields
+    if (!module) {
+      return metadataFields;
+    }
+
+    // If module exists, show fields that:
+    // 1. Have no module dependencies (always show)
+    // 2. Have module dependencies for this specific module
+    return metadataFields.filter(field =>
+      !field.moduleDependencies || // No dependencies = always show
+      field.moduleDependencies[module] // Has dependency for this module
+    );
+  };
+
+  const metadataFields = getmetadataFields();
+
   const sharedProps = {
     provider: selectedProvider,
     consumerRef,
@@ -115,6 +172,7 @@ export function ProtectedConnectionLayout({
     setSelectedConnection,
     providerName,
     providerInfo,
+    metadataFields,
     onDisconnectSuccess,
   };
 

src/components/auth/BasicAuth/BasicAuthContent.tsx

@@ -25,6 +25,7 @@ type BasicAuthFormProps = {
   handleSubmit: (form: BasicCreds) => void;
   isButtonDisabled?: boolean;
   buttonVariant?: "ghost";
+  metadataFields: MetadataItemInput[];
 };
 
 type FormData = {
@@ -39,12 +40,12 @@ export function BasicAuthForm({
   handleSubmit,
   isButtonDisabled,
   buttonVariant,
+  metadataFields,
 }: BasicAuthFormProps) {
   const [formData, setFormData] = useState<FormData>({
     username: "",
     password: "",
   });
-  const metadataFields = providerInfo.metadata?.input || [];
   const { username, password } = formData;
   const { providerName } = useProvider(provider);
 
@@ -141,6 +142,7 @@ function BasicAuthContentForm({
   handleSubmit,
   error,
   isButtonDisabled,
+  metadataFields,
 }: LandingContentProps) {
   const { providerName } = useProvider(provider);
 
@@ -153,6 +155,7 @@ function BasicAuthContentForm({
         providerInfo={providerInfo}
         handleSubmit={handleSubmit}
         isButtonDisabled={isButtonDisabled}
+        metadataFields={metadataFields}
       />
     </AuthCardLayout>
   );

src/components/auth/BasicAuth/BasicAuthFlow.tsx

@@ -17,6 +17,7 @@ export function BasicAuthFlow({
   groupName,
   children,
   selectedConnection,
+  metadataFields,
 }: BasicAuthFlowProps) {
   const { projectIdOrName } = useProject();
   const createConnectionMutation = useCreateConnectionMutation();
@@ -61,6 +62,7 @@ export function BasicAuthFlow({
         providerInfo={providerInfo}
         handleSubmit={onNext}
         error={null}
+        metadataFields={metadataFields}
       />
     );
   }

src/components/auth/BasicAuth/BasicAuthFlowProps.tsx

@@ -1,4 +1,4 @@
-import { Connection, ProviderInfo } from "@generated/api/src";
+import { Connection, ProviderInfo, MetadataItemInput } from "@generated/api/src";
 
 export type BasicAuthFlowProps = {
   provider: string;
@@ -10,4 +10,5 @@ export type BasicAuthFlowProps = {
   children: JSX.Element;
   selectedConnection: Connection | null;
   setSelectedConnection: (connection: Connection | null) => void;
+  metadataFields: MetadataItemInput[];
 };

src/components/auth/BasicAuth/LandingContentProps.tsx

@@ -1,4 +1,4 @@
-import { ProviderInfo } from "@generated/api/src";
+import { ProviderInfo, MetadataItemInput } from "@generated/api/src";
 
 import { ProviderMetadata } from "../providerMetadata";
 
@@ -14,4 +14,5 @@ export type LandingContentProps = {
   handleSubmit: (form: BasicCreds) => void;
   error: string | null;
   isButtonDisabled?: boolean;
+  metadataFields: MetadataItemInput[];
 };