feat: events workflow in wizard

frontend/src/components/Editor/EditorComponents/Editor.tsx

@@ -1,4 +1,4 @@
 import { request, useInitialPayload } from 'near-social-bridge';
 import type { ReactElement } from 'react';
 import type { Method, Event } from '@/pages/api/generateCode';
 
@@ -31,7 +31,7 @@
 
 declare const monaco: any;
 const INDEXER_TAB_NAME = 'indexer.js';
 const SCHEMA_TAB_NAME = 'schema.sql';
 const originalSQLCode = formatSQL(defaultSchema);
 const originalIndexingCode = formatIndexingCode(defaultCode);
 const pgSchemaTypeGen = new PgSchemaTypeGen();
@@ -71,7 +71,7 @@
   const [heights, setHeights] = useState<number[]>(initialHeights);
 
   const [diffView, setDiffView] = useState<boolean>(false);
   const [blockView, setBlockView] = useState<boolean>(false);
   const { showModal } = useModal();
 
   const [isExecutingIndexerFunction, setIsExecutingIndexerFunction] = useState<boolean>(false);
@@ -144,13 +144,13 @@
     const fetchData = async () => {
       try {
         const response = await fetchWizardData('');
-        const { wizardContractFilter, wizardMethods } = response;
+        const { wizardContractFilter, wizardMethods, wizardEvents } = response;
 
         if (wizardContractFilter === 'noFilter') {
           return;
         }
 
-        const codeResponse = await generateCode(wizardContractFilter, wizardMethods);
+        const codeResponse = await generateCode(wizardContractFilter, wizardMethods, wizardEvents);
         setIndexingCode(codeResponse.jsCode);
         setSchema(codeResponse.sqlCode);
       } catch (error: unknown) {
@@ -177,7 +177,7 @@
       monacoEditorRef.current.setPosition(savedCursorPosition || { lineNumber: 1, column: 1 });
       monacoEditorRef.current.focus();
     }
   }, [indexerDetails.code]);
 
   useEffect(() => {
     //* Load saved schema from local storage if it exists else load code from context
@@ -188,7 +188,7 @@
       schemaErrorHandler(schemaError);
       formattedSchema && setSchema(formattedSchema);
     }
   }, [indexerDetails.schema]);
 
   useEffect(() => {
     const { error: schemaError } = validateSQLSchema(schema);
@@ -201,11 +201,11 @@
     }
 
     handleCodeGen();
   }, [fileName]);
 
   useEffect(() => {
     cacheToLocal();
   }, [indexingCode, schema]);
 
   useEffect(() => {
     if (!monacoEditorRef.current) return;
@@ -216,16 +216,16 @@
     return () => {
       editorInstance.dispose();
     };
   }, [monacoEditorRef.current]);
 
   useEffect(() => {
     storageManager?.setSchemaTypes(schemaTypes);
     handleCodeGen();
   }, [schemaTypes, monacoMount]);
 
   useEffect(() => {
     storageManager?.setDebugList(heights);
   }, [heights]);
 
   const cacheToLocal = () => {
     if (!storageManager || !monacoEditorRef.current) return;

frontend/src/pages/api/generateCode.ts

@@ -38,8 +38,8 @@ export const validateRequestBody = (body: any): body is RequestBody => {
     isStringOrArray(body.contractFilter) &&
     Array.isArray(body.selectedMethods) &&
     body.selectedMethods.every(isValidMethod)
-    // && Array.isArray(body.selectedEvents) &&
-    // body.selectedEvents.every(isValidEvent)
+    && Array.isArray(body.selectedEvents) &&
+    body.selectedEvents.every(isValidEvent)
   );
 };
 
@@ -59,7 +59,6 @@ export default function handler(req: NextApiRequest, res: NextApiResponse): void
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
-
   if (req.method === 'OPTIONS') {
     res.status(200).end();
     return;
@@ -78,7 +77,6 @@ export default function handler(req: NextApiRequest, res: NextApiResponse): void
   }
 
   const { contractFilter, selectedMethods, selectedEvents } = req.body;
-
   const filterString = Array.isArray(contractFilter) ? contractFilter.join(', ') : contractFilter;
 
   const generator = new WizardCodeGenerator(filterString, selectedMethods, selectedEvents);

frontend/src/pages/query-api-editor/index.js

@@ -3,7 +3,6 @@ import React, { useContext, useEffect } from 'react';
 import { Alert } from 'react-bootstrap';
 
 import Editor from '@/components/Editor/EditorComponents/Editor';
-import GenerateCode from '@/components/Editor/EditorComponents/GenerateCode';
 import IndexerLogsContainer from '@/components/Logs/LogsViewContainer/IndexerLogsContainer';
 import { IndexerDetailsContext } from '@/contexts/IndexerDetailsContext';
 
@@ -25,10 +24,6 @@ const QueryApiEditorPage = ({ router }) => {
     );
   }
 
-  if (accountId == 'test' && indexerName == 'test') {
-    return <GenerateCode />;
-  }
-
   return showLogsView ? <IndexerLogsContainer /> : <Editor />;
 };
 

frontend/src/test/api/generateCode.test.ts

@@ -23,8 +23,8 @@ const createRequestResponseMocks = (
   };
 };
 
-describe('generateCode API', () => {
-  it('should return generated JS and SQL code for valid input', async () => {
+describe('generateCode API ', () => {
+  it('should return generated JS and SQL code for valid input methods', async () => {
     const { req, res } = createRequestResponseMocks('POST', {
       contractFilter: 'filter',
       selectedMethods: [
@@ -65,6 +65,56 @@ describe('generateCode API', () => {
           },
         },
       ],
+      selectedEvents: [],
+    });
+
+    handler(req, res);
+
+    expect(res._getStatusCode()).toBe(200);
+    const responseData = JSON.parse(res._getData());
+    console.log(responseData);
+  });
+
+  it('should return generated JS and SQL code for valid input events', async () => {
+    const { req, res } = createRequestResponseMocks('POST', {
+      contractFilter: 'filter',
+      selectedMethods: [],
+      selectedEvents: [{
+        event_name: 'register',
+        schema: {
+          type: 'object',
+          properties: {
+            function_name: {
+              type: 'string',
+            },
+            code: {
+              type: 'string',
+            },
+            schema: {
+              type: 'string',
+            },
+            start_block_height: {
+              type: 'integer',
+            },
+            filter_json: {
+              type: 'string',
+            },
+          },
+          required: ['function_name', 'code', 'schema', 'start_block_height', 'filter_json'],
+        },
+      },
+      {
+        event_name: 'remove_indexer_function',
+        schema: {
+          type: 'object',
+          properties: {
+            function_name: {
+              type: 'string',
+            },
+          },
+          required: ['function_name'],
+        },
+      },],
     });
 
     handler(req, res);
@@ -73,6 +123,7 @@ describe('generateCode API', () => {
     const responseData = JSON.parse(res._getData());
     console.log(responseData);
   });
+
   it('should handle empty arrays correctly because I mean maybe they just want something to do with contractName?', async () => {
     const { req, res } = createRequestResponseMocks('POST', {
       contractFilter: 'filter',

frontend/widgets/src/QueryApi.Dashboard.jsx

@@ -46,6 +46,7 @@ const [activeTab, setActiveTab] = useState(props.view === "create-new-indexer" ?
 const [activeIndexerTabView, setActiveIndexerTabView] = useState(props.activeIndexerView ?? "editor");
 const [selectedIndexer, setSelectedIndexer] = useState(props.selectedIndexerPath);
 
+const [wizardEvents, setWizardEvents] = useState({});
 const [wizardMethods, setWizardMethods] = useState({});
 const [wizardContractFilter, setWizardContractFilter] = useState('');
 
@@ -109,6 +110,7 @@ return (
               setSelectedIndexer: setSelectedIndexer,
               setWizardContractFilter: setWizardContractFilter,
               setWizardMethods: setWizardMethods,
+              setWizardEvents: setWizardEvents,
             }}
           />
         </Section>
@@ -131,6 +133,7 @@ return (
               path: "create-new-indexer",
               wizardContractFilter: wizardContractFilter,
               wizardMethods: wizardMethods,
+              wizardEvents: wizardEvents,
             }}
           />
         </Section>

frontend/widgets/src/QueryApi.Editor.jsx

@@ -4,7 +4,7 @@ const activeView = props.activeView || "editor";
 let accountId = props.accountId || context.accountId;
 let externalAppUrl = `${REPL_EXTERNAL_APP_URL}/${path}?accountId=${accountId}`;
 
-const { wizardContractFilter, wizardMethods } = props;
+const { wizardContractFilter, wizardMethods, wizardEvents } = props;
 
 if (props.indexerName) {
   externalAppUrl += `&indexerName=${props.indexerName}`;
@@ -60,7 +60,8 @@ let deleteIndexer = (request) => {
 const getLaunchpadCode = (request, response) => {
   const wizardContractFilter = wizardContractFilter ?? 'noFilter';
   const wizardMethods = wizardMethods;
-  response(request).send({ wizardContractFilter, wizardMethods });
+  const wizardEvents = wizardEvents;
+  response(request).send({ wizardContractFilter, wizardMethods, wizardEvents });
 }
 
 /**