mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 01:12:56 +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,
|
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>;
|
||||||
|
|
||||||
|
@ -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={
|
||||||
|
@ -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,
|
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 ?? {}
|
||||||
),
|
),
|
||||||
|
Loading…
Reference in New Issue
Block a user