mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-14 17:02:49 +03:00
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:
parent
8b0a4a117b
commit
a833379b86
@ -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>;
|
||||
|
||||
|
@ -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={
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
@ -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>
|
||||
);
|
||||
};
|
@ -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"
|
||||
/>
|
||||
);
|
||||
};
|
@ -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 ?? {}
|
||||
),
|
||||
|
Loading…
Reference in New Issue
Block a user