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