console: add quick add to query collections modal

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/5955
GitOrigin-RevId: a0da0ac017620c4bb6baa7e7c27fb77790237ce5

console/src/features/QueryCollections/components/QueryCollectionOperationDialog/QueryCollectionOperationDialog.tsx

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

console/src/features/QueryCollections/components/QueryCollectionOperationDialog/QuickAdd.tsx

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