console (feature): add template and timeout props to the GDC connect UI

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9883
GitOrigin-RevId: 5370b18bcab90919b94c99bd0c74c260b515a6d8

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/ConnectGDCSourceWidget.stories.tsx

@@ -7,7 +7,7 @@ export default {
   component: ConnectGDCSourceWidget,
   decorators: [ReactQueryDecorator()],
   parameters: {
-    msw: handlers({ agentTestType: 'super_connector_agents_not_added' }),
+    msw: handlers({ agentTestType: 'super_connector_agents_added' }),
   },
 } as Meta<typeof ConnectGDCSourceWidget>;
 

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/ConnectGDCSourceWidget.tsx

@@ -24,6 +24,8 @@ import { GraphQLCustomization } from '../GraphQLCustomization/GraphQLCustomizati
 import { graphQLCustomizationSchema } from '../GraphQLCustomization/schema';
 import { adaptGraphQLCustomization } from '../GraphQLCustomization/utils/adaptResponse';
 import { generateGDCRequestPayload } from './utils/generateRequest';
+import { Timeout } from './components/Timeout';
+import { Template } from './components/Template';
 
 interface ConnectGDCSourceWidgetProps {
   driver: string;
@@ -53,6 +55,11 @@ const useFormValidationSchema = (driver: string) => {
           configSchemas.otherSchemas
         ),
         customization: graphQLCustomizationSchema.optional(),
+        timeout: z
+          .number()
+          .gte(0, { message: 'Timeout must be a postive number' })
+          .optional(),
+        template: z.string().optional(),
       });
 
       return { validationSchema, configSchemas };
@@ -136,6 +143,8 @@ export const ConnectGDCSourceWidget = (props: ConnectGDCSourceWidgetProps) => {
         name: metadataSource?.name,
         // This is a particularly weird case with metadata only valid for GDC sources.
         configuration: (metadataSource?.configuration as any).value,
+        timeout: (metadataSource?.configuration as any)?.timeout?.seconds,
+        template: (metadataSource?.configuration as any)?.template ?? '',
         customization: adaptGraphQLCustomization(
           metadataSource?.customization ?? {}
         ),
@@ -238,6 +247,19 @@ export const ConnectGDCSourceWidget = (props: ConnectGDCSourceWidgetProps) => {
                     references={data?.configSchemas.otherSchemas}
                   />
 
+                  <div className="mt-sm">
+                    <Collapsible
+                      triggerChildren={
+                        <div className="font-semibold text-muted">
+                          Advanced Settings
+                        </div>
+                      }
+                    >
+                      <Timeout name="timeout" />
+                      <Template name="template" />
+                    </Collapsible>
+                  </div>
+
                   <div className="mt-sm">
                     <Collapsible
                       triggerChildren={

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/components/Template.tsx

@@ -0,0 +1,33 @@
+import { CodeEditorField } from '../../../../../new-components/Form';
+import { IndicatorCard } from '../../../../../new-components/IndicatorCard';
+import { LearnMoreLink } from '../../../../../new-components/LearnMoreLink';
+
+export const Template = ({ name }: { name: string }) => {
+  return (
+    <div>
+      <IndicatorCard headline="Using Environment variables">
+        It's good practice to always use environment variables for any secrets
+        and avoid sensitive data from being exposed in your metadata as
+        plain-text. The{' '}
+        <code className="bg-slate-100 rounded text-red-600">template</code>{' '}
+        property can be used to provide environment variables set in your Hasura
+        instance to be used as connection parameters and uses{' '}
+        <LearnMoreLink
+          href="https://hasura.io/docs/latest/api-reference/kriti-templating"
+          text="Kriti Templating"
+          className="ml-0"
+        />
+        .
+        <br /> For example, to use an environment variable for{' '}
+        <code className="bg-slate-100 rounded text-red-600">jdbc_url</code>{' '}
+        would look like -
+        <div className="bg-gray-100 mt-sm py-sm">
+          <code>
+            {`{\"jdbc_url\": \"{{getEnvironmentVariable(\"SNOWFLAKE_JDBC_URL\")}}\"}`}
+          </code>
+        </div>
+      </IndicatorCard>
+      <CodeEditorField name={name} label="Template" />
+    </div>
+  );
+};

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/components/Timeout.stories.tsx

@@ -0,0 +1,33 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { Timeout } from './Timeout';
+import { Template } from './Template';
+import { ReactQueryDecorator } from '../../../../../storybook/decorators/react-query';
+import { SimpleForm } from '../../../../../new-components/Form';
+import { z } from 'zod';
+import { Button } from '../../../../../new-components/Button';
+
+export default {
+  component: Timeout,
+  decorators: [ReactQueryDecorator()],
+} as Meta<typeof Timeout>;
+
+export const BasicView: StoryFn<typeof Timeout> = () => {
+  return (
+    <SimpleForm
+      onSubmit={data => console.log(data)}
+      schema={z.object({
+        timeout: z
+          .number()
+          .gte(0, { message: 'Timeout must be a postive number' })
+          .optional(),
+        template: z.string().optional(),
+      })}
+    >
+      <div className="max-w-3xl">
+        <Timeout name="timeout" />
+        <Template name="template" />
+        <Button type="submit">Submit</Button>
+      </div>
+    </SimpleForm>
+  );
+};

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/components/Timeout.tsx

@@ -0,0 +1,11 @@
+import { NumberInputField } from '../../ConnectPostgresWidget/parts/NumberInput';
+
+export const Timeout = ({ name }: { name: string }) => {
+  return (
+    <NumberInputField
+      name={name}
+      label="Timeout (in seconds)"
+      placeholder="In Seconds"
+    />
+  );
+};

frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/ConnectGDCSourceWidget/utils/generateRequest.ts

@@ -13,7 +13,11 @@ export const generateGDCRequestPayload = ({
     driver,
     details: {
       name: values.name,
-      configuration: values.configuration,
+      configuration: {
+        value: values.configuration,
+        timeout: { seconds: values.timeout },
+        template: values.template,
+      },
       customization: generateGraphQLCustomizationInfo(
         values.customization ?? {}
       ),