console: add quick add to query collections modal

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5955
GitOrigin-RevId: a0da0ac017620c4bb6baa7e7c27fb77790237ce5
This commit is contained in:
Daniele Cammareri 2022-09-21 09:36:57 +02:00 committed by hasura-bot
parent 876c906660
commit e065fd9ac7
2 changed files with 172 additions and 0 deletions

View File

@ -8,6 +8,7 @@ import { QueryCollection } from '@/metadata/types';
import { Tabs } from '@/new-components/Tabs'; import { Tabs } from '@/new-components/Tabs';
import ToolTip from '@/components/Common/Tooltip/Tooltip'; import ToolTip from '@/components/Common/Tooltip/Tooltip';
import { GraphQLFileUpload } from './GraphQLFileUpload'; import { GraphQLFileUpload } from './GraphQLFileUpload';
import { QuickAdd } from './QuickAdd';
const schema = z.discriminatedUnion('option', [ const schema = z.discriminatedUnion('option', [
z.object({ z.object({
@ -85,6 +86,14 @@ export const QueryCollectionOperationDialog = (
className="max-w-full" className="max-w-full"
label="Operation Name" label="Operation Name"
/> />
<QuickAdd
onAdd={operation => {
if (operation.name !== 'unnamed') {
options.setValue('name', operation.name);
}
options.setValue('query', operation.query);
}}
/>
<CodeEditorField <CodeEditorField
id="query" id="query"
name="query" name="query"

View File

@ -0,0 +1,163 @@
import React, { useEffect } from 'react';
import { Button } from '@/new-components/Button';
import { DropdownMenu } from '@/new-components/DropdownMenu';
import { FaChevronDown } from 'react-icons/fa';
import { parseQueryString } from './utils';
interface Operation {
name: string;
query: string;
}
const quickOperations: Operation[] = [
{
name: 'Introspection query',
query: `query IntrospectionQuery {
__schema {
queryType { name }
mutationType { name }
subscriptionType { name }
types {
...FullType
}
directives {
name
description
locations
args {
...InputValue
}
}
}
}
fragment FullType on __Type {
kind
name
description
fields(includeDeprecated: true) {
name
description
args {
...InputValue
}
type {
...TypeRef
}
isDeprecated
deprecationReason
}
inputFields {
...InputValue
}
interfaces {
...TypeRef
}
enumValues(includeDeprecated: true) {
name
description
isDeprecated
deprecationReason
}
possibleTypes {
...TypeRef
}
}
fragment InputValue on __InputValue {
name
description
type { ...TypeRef }
defaultValue
}
fragment TypeRef on __Type {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
ofType {
kind
name
}
}
}
}
}
}
}
}`,
},
];
interface QuickAddProps {
onAdd: (operation: Operation) => void;
}
export const QuickAdd = (props: QuickAddProps) => {
const { onAdd } = props;
const [graphiqlQueries, setGraphiqlQueries] = React.useState<Operation[]>([]);
useEffect(() => {
const graphiQlLocalStorage = localStorage.getItem('graphiql:query');
if (graphiQlLocalStorage) {
try {
setGraphiqlQueries(parseQueryString(graphiQlLocalStorage));
} catch (error) {
console.error(error);
}
}
}, []);
return (
<div className="max-w-xl flex justify-end">
<DropdownMenu
options={{
content: {
className: 'z-[101]',
},
}}
items={[
[...quickOperations, ...graphiqlQueries].map(operation => (
<div
key={operation.name}
onClick={() => onAdd(operation)}
className="cursor-pointer mx-1 px-xs py-1 rounded hover:bg-gray-100"
>
<p className="mb-0 font-semibold whitespace-nowrap">
{operation.name}
</p>
<p className="mb-0">{operation.query?.slice(0, 40)}...</p>
</div>
)),
]}
>
<Button
iconPosition="end"
size="sm"
icon={
<FaChevronDown className="transition-transform group-radix-state-open:rotate-180 w-3 h-3" />
}
>
<span className="font-bold">Quick Add</span>
</Button>
</DropdownMenu>
</div>
);
};