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
This commit is contained in:
Vijay Prasanna 2023-07-24 20:55:44 +05:30 committed by hasura-bot
parent 8b0a4a117b
commit a833379b86
6 changed files with 105 additions and 2 deletions

View File

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

View File

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

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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"
/>
);
};

View File

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