From 6ec4d291121dabedcf2d96c15203c1a88e60d6fb Mon Sep 17 00:00:00 2001 From: kevin Date: Tue, 2 Jul 2024 14:55:35 -0400 Subject: [PATCH 01/16] feat: refactor index.js --- frontend/src/pages/query-api-editor/index.js | 30 ++++++-------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/frontend/src/pages/query-api-editor/index.js b/frontend/src/pages/query-api-editor/index.js index 5e047f8d..5ca12874 100644 --- a/frontend/src/pages/query-api-editor/index.js +++ b/frontend/src/pages/query-api-editor/index.js @@ -11,34 +11,20 @@ const QueryApiEditorPage = ({ router }) => { const { setAccountId, setIndexerName, showLogsView } = useContext(IndexerDetailsContext); useEffect(() => { - if (accountId == undefined || indexerName == undefined) { - return; - } + if (!accountId || !indexerName) return; setAccountId(accountId); setIndexerName(indexerName); - }, [accountId, indexerName, setAccountId, setIndexerName]); + }, [accountId, indexerName]); - if (accountId == undefined || indexerName == undefined) { + if (!accountId || !indexerName) { return ( - <> - - Both accountId and IndexerName need to be specified in the URL. - - + + Both accountId and IndexerName need to be specified in the URL. + ); } - return ( - <> - {showLogsView ? ( - - ) : ( - - )} - - ); + + return showLogsView ? : ; }; export default withRouter(QueryApiEditorPage); From 7e79923ff83d710f1556ef14d316086218e5084d Mon Sep 17 00:00:00 2001 From: kevin Date: Tue, 2 Jul 2024 14:57:55 -0400 Subject: [PATCH 02/16] chore: added logging method for debugging purposes --- .../components/Editor/QueryApiStorageManager.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/frontend/src/components/Editor/QueryApiStorageManager.tsx b/frontend/src/components/Editor/QueryApiStorageManager.tsx index a52c8acf..65cc9297 100644 --- a/frontend/src/components/Editor/QueryApiStorageManager.tsx +++ b/frontend/src/components/Editor/QueryApiStorageManager.tsx @@ -65,4 +65,18 @@ export default class QueryAPIStorageManager { getDebugList(): any { return this.getFromLocalStorage(this.debugListStorageKey); } + + // public logStorageState(): void { + // console.log('Indexer Code Storage Key:', this.indexerCodeStorageKey); + // console.log('Schema Code Storage Key:', this.schemaCodeStorageKey); + // console.log('Schema Types Storage Key:', this.schemaTypesStorageKey); + // console.log('Cursor Position Key:', this.cursorPositionKey); + // console.log('Debug List Storage Key:', this.debugListStorageKey); + + // console.log('Stored Indexer Code:', this.getIndexerCode()); + // console.log('Stored Schema Code:', this.getSchemaCode()); + // console.log('Stored Schema Types:', this.getSchemaTypes()); + // console.log('Stored Cursor Position:', this.getCursorPosition()); + // console.log('Stored Debug List:', this.getDebugList()); + // } } From dd783dcd7572aa729ef8eaf1a5342952afcdd12a Mon Sep 17 00:00:00 2001 From: kevin Date: Tue, 2 Jul 2024 15:19:19 -0400 Subject: [PATCH 03/16] feat: refactor Editor --- frontend/replacement.dev.json | 2 +- .../Editor/EditorComponents/Editor.tsx | 99 ++++++------- .../EditorMenuContainer.tsx | 16 +-- .../src/contexts/IndexerDetailsContext.tsx | 131 +++++++++++------- 4 files changed, 125 insertions(+), 123 deletions(-) diff --git a/frontend/replacement.dev.json b/frontend/replacement.dev.json index 1a233cb9..1b56e05b 100644 --- a/frontend/replacement.dev.json +++ b/frontend/replacement.dev.json @@ -1,6 +1,6 @@ { "REPL_ACCOUNT_ID": "dev-queryapi.dataplatform.near", "REPL_GRAPHQL_ENDPOINT": "https://near-queryapi.dev.api.pagoda.co", - "REPL_EXTERNAL_APP_URL": "https://queryapi-frontend-vcqilefdcq-ew.a.run.app", + "REPL_EXTERNAL_APP_URL": "http://localhost:3000", "REPL_REGISTRY_CONTRACT_ID": "dev-queryapi.dataplatform.near" } diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index 836eea02..04f2cd02 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -15,7 +15,6 @@ import { } from '@/constants/Strings'; import { IndexerDetailsContext } from '@/contexts/IndexerDetailsContext'; import { useModal } from '@/contexts/ModalContext'; -import { InfoModal } from '@/core/InfoModal'; import { defaultCode, defaultSchema, defaultSchemaTypes, formatIndexingCode, formatSQL } from '@/utils/formatters'; import { getLatestBlockHeight } from '@/utils/getLatestBlockHeight'; import IndexerRunner from '@/utils/indexerRunner'; @@ -30,9 +29,12 @@ import { FileSwitcher } from './FileSwitcher'; import { GlyphContainer } from './GlyphContainer'; import ResizableLayoutEditor from './ResizableLayoutEditor'; +declare const monaco: any; const INDEXER_TAB_NAME = 'indexer.js'; const SCHEMA_TAB_NAME = 'schema.sql'; -declare const monaco: any; +const originalSQLCode = formatSQL(defaultSchema); +const originalIndexingCode = formatIndexingCode(defaultCode); +const pgSchemaTypeGen = new PgSchemaTypeGen(); const Editor: React.FC = (): ReactElement => { const { indexerDetails, debugMode, isCreateNewIndexer } = useContext(IndexerDetailsContext); @@ -44,10 +46,6 @@ const Editor: React.FC = (): ReactElement => { const [error, setError] = useState(); const [fileName, setFileName] = useState(INDEXER_TAB_NAME); - - const [originalSQLCode, setOriginalSQLCode] = useState(formatSQL(defaultSchema)); - const [originalIndexingCode, setOriginalIndexingCode] = useState(formatIndexingCode(defaultCode)); - const [indexingCode, setIndexingCode] = useState(originalIndexingCode); const [schema, setSchema] = useState(originalSQLCode); const [cursorPostion, setCursorPosition] = useState<{ lineNumber: number; column: number }>({ @@ -80,7 +78,6 @@ const Editor: React.FC = (): ReactElement => { }; const indexerRunner = useMemo(() => new IndexerRunner(handleLog), []); - const pgSchemaTypeGen = new PgSchemaTypeGen(); const disposableRef = useRef(null); const monacoEditorRef = useRef(null); @@ -118,31 +115,33 @@ const Editor: React.FC = (): ReactElement => { codeError ? setError(CODE_FORMATTING_ERROR_MESSAGE) : setError(undefined); }, 500); - useEffect(() => { - if (indexerDetails.code != null) { - const { data: formattedCode, error: codeError } = validateJSCode(indexerDetails.code); + const schemaErrorHandler = (schemaError: any): void => { + if (schemaError?.type === FORMATTING_ERROR_TYPE) setError(SCHEMA_FORMATTING_ERROR_MESSAGE); + if (schemaError?.type === TYPE_GENERATION_ERROR_TYPE) setError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); + return; + } - if (codeError) { - setError(CODE_FORMATTING_ERROR_MESSAGE); - } + const indexerErrorHandler = (codeError: any): void => { + if (codeError) setError(CODE_GENERAL_ERROR_MESSAGE); + return; + } - if (formattedCode) { - setOriginalIndexingCode(formattedCode); - setIndexingCode(formattedCode); - } + useEffect(() => { + const savedCode = storageManager?.getIndexerCode(); + if (savedCode) setIndexingCode(savedCode) + else if (indexerDetails.code) { + const { data: formattedCode, error: codeError } = validateJSCode(indexerDetails.code); + if (codeError) setError(CODE_FORMATTING_ERROR_MESSAGE); + formattedCode && setIndexingCode(formattedCode); } }, [indexerDetails.code]); useEffect(() => { - if (indexerDetails.schema != null) { + const savedSchema = storageManager?.getSchemaCode(); + if (savedSchema) setSchema(savedSchema) + else if (indexerDetails.schema) { const { data: formattedSchema, error: schemaError } = validateSQLSchema(indexerDetails.schema); - - if (schemaError?.type === FORMATTING_ERROR_TYPE) { - setError(SCHEMA_FORMATTING_ERROR_MESSAGE); - } else if (schemaError?.type === TYPE_GENERATION_ERROR_TYPE) { - setError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); - } - + schemaErrorHandler(schemaError); formattedSchema && setSchema(formattedSchema); } }, [indexerDetails.schema]); @@ -150,38 +149,29 @@ const Editor: React.FC = (): ReactElement => { useEffect(() => { const { error: schemaError } = validateSQLSchema(schema); const { error: codeError } = validateJSCode(indexingCode); - - if (schemaError?.type === FORMATTING_ERROR_TYPE) { - setError(SCHEMA_FORMATTING_ERROR_MESSAGE); - } else if (schemaError?.type === TYPE_GENERATION_ERROR_TYPE) { - setError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); - } else if (codeError) setError(CODE_GENERAL_ERROR_MESSAGE); - else { - setError(undefined); - handleCodeGen(); + if (schemaError) { + schemaErrorHandler(schemaError); + return; } - if (fileName === SCHEMA_TAB_NAME) debouncedValidateSQLSchema(schema); + if (codeError) { + indexerErrorHandler(codeError); + return; + } + handleCodeGen(); }, [fileName]); useEffect(() => { - const savedCode = storageManager?.getIndexerCode(); - const savedSchema = storageManager?.getSchemaCode(); - if (savedSchema) setSchema(savedSchema); - if (savedCode) setIndexingCode(savedCode); - }, [indexerDetails.accountId, indexerDetails.indexerName]); - - useEffect(() => { - storageManager?.setSchemaCode(schema); - storageManager?.setIndexerCode(indexingCode); storageManager?.setCursorPosition(cursorPostion); - }, [schema, indexingCode, cursorPostion]); + }, [cursorPostion]); useEffect(() => { + console.log('Editor useEffect 6'); storageManager?.setSchemaTypes(schemaTypes); handleCodeGen(); }, [schemaTypes, monacoMount]); useEffect(() => { + console.log('Editor useEffect 7'); storageManager?.setDebugList(heights); }, [heights]); @@ -249,6 +239,7 @@ const Editor: React.FC = (): ReactElement => { }; const handleEditorWillMount = (editor: any, monaco: any) => { + console.log('monaco mount effect'); if (!diffView) { const decorations = editor.deltaDecorations( [], @@ -297,17 +288,16 @@ const Editor: React.FC = (): ReactElement => { const handleOnChangeSchema = (_schema: string) => { setSchema(_schema); + storageManager?.setSchemaCode(schema); debouncedValidateSQLSchema(_schema); }; const handleOnChangeCode = (_code: string) => { setIndexingCode(_code); + storageManager?.setIndexerCode(indexingCode); debouncedValidateCode(_code); }; - const handleRegisterIndexerWithErrors = (args: any) => { - request('register-function', args); - }; return ( <> @@ -341,8 +331,6 @@ const Editor: React.FC = (): ReactElement => { //Reset Indexer Modal setSchema={setSchema} setSchemaTypes={setSchemaTypes} - setOriginalIndexingCode={setOriginalIndexingCode} - setOriginalSQLCode={setOriginalSQLCode} //Publish Modal actionButtonText={'publish'} schema={schema} @@ -412,17 +400,8 @@ const Editor: React.FC = (): ReactElement => { )} - handleRegisterIndexerWithErrors(data)} - onCancelButtonPressed={hideModal} - onClose={hideModal} - /> ); }; -export default Editor; +export default React.memo(Editor); diff --git a/frontend/src/components/Editor/EditorViewContainer/EditorMenuContainer.tsx b/frontend/src/components/Editor/EditorViewContainer/EditorMenuContainer.tsx index 3c6f2373..663657ef 100644 --- a/frontend/src/components/Editor/EditorViewContainer/EditorMenuContainer.tsx +++ b/frontend/src/components/Editor/EditorViewContainer/EditorMenuContainer.tsx @@ -37,8 +37,6 @@ interface EditorMenuContainerProps { // reset code setSchema: (schema: string) => void; setSchemaTypes: (schemaTypes: string) => void; - setOriginalIndexingCode: (code: string) => void; - setOriginalSQLCode: (code: string) => void; // publish actionButtonText: string; schema: string; @@ -57,8 +55,6 @@ const EditorMenuContainer: React.FC = ({ // reset code setSchema, setSchemaTypes, - setOriginalIndexingCode, - setOriginalSQLCode, // publish actionButtonText, schema, @@ -118,11 +114,9 @@ const EditorMenuContainer: React.FC = ({ const unformattedIndexerCode = wrapCode(data.code); const unformattedSchemaCode = data.schema; if (unformattedIndexerCode !== null) { - setOriginalIndexingCode(unformattedIndexerCode); setIndexingCode(unformattedIndexerCode); } if (unformattedSchemaCode !== null) { - setOriginalSQLCode(unformattedSchemaCode); setSchema(unformattedSchemaCode); } // todo add reformatting (reformatAll) @@ -146,17 +140,17 @@ const EditorMenuContainer: React.FC = ({ const forkedFrom = indexerDetails.forkedAccountId && indexerDetails.forkedIndexerName ? { - account_id: indexerDetails.forkedAccountId, - function_name: indexerDetails.forkedIndexerName, - } + account_id: indexerDetails.forkedAccountId, + function_name: indexerDetails.forkedIndexerName, + } : null; const startBlock = indexerConfig.startBlock === 'startBlockHeight' ? { HEIGHT: indexerConfig.height } : indexerConfig.startBlock === 'startBlockLatest' - ? 'LATEST' - : 'CONTINUE'; + ? 'LATEST' + : 'CONTINUE'; if (schemaValidationError?.type === FORMATTING_ERROR_TYPE) { setError(SCHEMA_FORMATTING_ERROR_MESSAGE); diff --git a/frontend/src/contexts/IndexerDetailsContext.tsx b/frontend/src/contexts/IndexerDetailsContext.tsx index 5bedbf0d..6c536f2d 100644 --- a/frontend/src/contexts/IndexerDetailsContext.tsx +++ b/frontend/src/contexts/IndexerDetailsContext.tsx @@ -1,5 +1,5 @@ import { useInitialPayload } from 'near-social-bridge'; -import React, { createContext, useEffect, useState } from 'react'; +import React, { createContext, useEffect, useState, useMemo, useCallback } from 'react'; import { getLatestBlockHeight } from '@/utils/getLatestBlockHeight'; import { queryIndexerFunctionDetails } from '@/utils/queryIndexerFunction'; @@ -19,6 +19,7 @@ interface IndexerDetails { interface IndexerDetailsContextProps { indexerDetails: IndexerDetails; + setIndexerDetails: (details: IndexerDetails) => void; showResetCodeModel: boolean; setShowResetCodeModel: (bool: boolean) => void; showPublishModal: boolean; @@ -39,7 +40,6 @@ interface IndexerDetailsContextProps { setForkedAccountId: (accountId?: string) => void; forkedIndexerName?: string; setForkedIndexerName: (indexerName?: string) => void; - setIndexerDetails: (details: IndexerDetails) => void; showLogsView: boolean; setShowLogsView: (showLogsView: boolean) => void; } @@ -55,25 +55,25 @@ export const IndexerDetailsContext = createContext({ forkedAccountId: null, forkedIndexerName: null, }, + setIndexerDetails: () => { }, showResetCodeModel: false, - setShowResetCodeModel: () => {}, + setShowResetCodeModel: () => { }, showPublishModal: false, - setShowPublishModal: () => {}, + setShowPublishModal: () => { }, showForkIndexerModal: false, - setShowForkIndexerModal: () => {}, + setShowForkIndexerModal: () => { }, debugMode: false, - setDebugMode: () => {}, + setDebugMode: () => { }, latestHeight: 0, - setLatestHeight: () => {}, + setLatestHeight: () => { }, isCreateNewIndexer: false, - setIsCreateNewIndexer: () => {}, - setAccountId: () => {}, - setIndexerName: () => {}, - setForkedAccountId: () => {}, - setForkedIndexerName: () => {}, - setIndexerDetails: () => {}, + setIsCreateNewIndexer: () => { }, + setAccountId: () => { }, + setIndexerName: () => { }, + setForkedAccountId: () => { }, + setForkedIndexerName: () => { }, showLogsView: false, - setShowLogsView: () => {}, + setShowLogsView: () => { }, }); interface IndexerDetailsProviderProps { @@ -103,13 +103,13 @@ export const IndexerDetailsProvider: React.FC = ({ const [latestHeight, setLatestHeight] = useState(0); const [isCreateNewIndexer, setIsCreateNewIndexer] = useState(false); - const activeView = useInitialPayload(); // Adjust the type according to what useInitialPayload returns + const activeView = useInitialPayload(); useEffect(() => { if (activeView === 'status') setShowLogsView(true); }, [activeView]); - const requestIndexerDetails = async (): Promise => { + const requestIndexerDetails = useCallback(async (): Promise => { if (!accountId || !indexerName) return undefined; const data = await queryIndexerFunctionDetails(accountId, indexerName); if (data) { @@ -125,13 +125,14 @@ export const IndexerDetailsProvider: React.FC = ({ }; return details; } - }; + }, [accountId, indexerName]); useEffect(() => { - (async () => { + const fetchData = async () => { const latestHeight = await getLatestBlockHeight(); setLatestHeight(latestHeight); - })(); + }; + fetchData(); }, []); useEffect(() => { @@ -145,42 +146,70 @@ export const IndexerDetailsProvider: React.FC = ({ })); return; } - (async () => { + const fetchIndexerDetails = async () => { const indexer = await requestIndexerDetails(); if (indexer) { setIndexerDetails(indexer); } - })(); - }, [accountId, indexerName, forkedAccountId, forkedIndexerName, isCreateNewIndexer]); + }; + fetchIndexerDetails(); + }, [ + accountId, + indexerName, + forkedAccountId, + forkedIndexerName, + isCreateNewIndexer, + requestIndexerDetails, + setIndexerDetails, + ]); - return ( - - {children} - + const contextValue = useMemo( + () => ({ + accountId, + indexerName, + setAccountId, + setIndexerName, + setForkedAccountId, + setForkedIndexerName, + indexerDetails, + setIndexerDetails, + showResetCodeModel, + setShowResetCodeModel, + showPublishModal, + setShowPublishModal, + showForkIndexerModal, + setShowForkIndexerModal, + debugMode, + setDebugMode, + latestHeight, + setLatestHeight, + isCreateNewIndexer, + setIsCreateNewIndexer, + showLogsView, + setShowLogsView, + }), + [ + accountId, + indexerName, + setAccountId, + setIndexerName, + setForkedAccountId, + setForkedIndexerName, + indexerDetails, + setIndexerDetails, + showResetCodeModel, + setShowResetCodeModel, + showPublishModal, + setShowPublishModal, + showForkIndexerModal, + setShowForkIndexerModal, + debugMode, + setDebugMode, + latestHeight, + isCreateNewIndexer, + showLogsView, + ], ); + + return {children}; }; From 46537844eb122b279778d11595820954ea9531dc Mon Sep 17 00:00:00 2001 From: kevin Date: Tue, 2 Jul 2024 19:01:53 -0400 Subject: [PATCH 04/16] feat: refactor removed dead code for debug mode, added debug mode to a tooltip --- .../Editor/EditorComponents/Editor.tsx | 15 +------ .../Editor/EditorView/DeveloperToolsView.jsx | 41 ++++++++++--------- .../DeveloperToolsContainer.tsx | 4 ++ 3 files changed, 27 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index c5457700..8437b8e7 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -59,7 +59,6 @@ const Editor: React.FC = (): ReactElement => { const initialHeights = storageManager ? storageManager.getDebugList() || [] : []; const [heights, setHeights] = useState(initialHeights); - const [debugModeInfoDisabled, setDebugModeInfoDisabled] = useState(false); const [diffView, setDiffView] = useState(false); const [blockView, setBlockView] = useState(false); const { openModal, showModal, data, message, hideModal } = useModal(); @@ -401,7 +400,7 @@ const Editor: React.FC = (): ReactElement => { height: '100%', }} > - {error && ( + {/* {error && ( setError(undefined)} @@ -410,17 +409,7 @@ const Editor: React.FC = (): ReactElement => { > {error} - )} - {debugMode && !debugModeInfoDisabled && ( - setDebugModeInfoDisabled(true)} - variant="info" - > - To debug, you will need to open your browser console window in order to see the logs. - - )} + )} */} {/* @ts-ignore remove after refactoring Resizable Editor to ts*/} diff --git a/frontend/src/components/Editor/EditorView/DeveloperToolsView.jsx b/frontend/src/components/Editor/EditorView/DeveloperToolsView.jsx index 26cbd0f0..aa3633a7 100644 --- a/frontend/src/components/Editor/EditorView/DeveloperToolsView.jsx +++ b/frontend/src/components/Editor/EditorView/DeveloperToolsView.jsx @@ -26,7 +26,7 @@ const DeveloperToolsView = ({ return (
-
+
Developer Tools
@@ -59,9 +59,8 @@ const DeveloperToolsView = ({
Diff View @@ -74,22 +73,24 @@ const DeveloperToolsView = ({ }} />
-
- Debug Mode - { - setDebugMode(e.target.checked); - }} - /> -
+ + +
+ Debug Mode + { + setDebugMode(e.target.checked); + }} + /> +
+
diff --git a/frontend/src/components/Editor/EditorViewContainer/DeveloperToolsContainer.tsx b/frontend/src/components/Editor/EditorViewContainer/DeveloperToolsContainer.tsx index c4f8d285..454deb04 100644 --- a/frontend/src/components/Editor/EditorViewContainer/DeveloperToolsContainer.tsx +++ b/frontend/src/components/Editor/EditorViewContainer/DeveloperToolsContainer.tsx @@ -14,6 +14,8 @@ interface DeveloperToolsContainerProps { latestHeight: number | undefined; diffView: boolean; setDiffView: React.Dispatch>; + // debugModeInfoDisabled: boolean; + // setDebugModeInfoDisabled: React.Dispatch>; } const DeveloperToolsContainer: React.FC = ({ @@ -27,6 +29,8 @@ const DeveloperToolsContainer: React.FC = ({ latestHeight, diffView, setDiffView, + // debugModeInfoDisabled, + // setDebugModeInfoDisabled, }) => { const { setShowResetCodeModel, debugMode, setDebugMode } = useContext(IndexerDetailsContext); From 0ca93ed74d099d4f7475496c5267901260b3a342 Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 3 Jul 2024 15:28:22 -0400 Subject: [PATCH 05/16] feat: replaced error alert with tooltip --- .../src/components/Common/Icons/AlertIcon.js | 10 ++++++++ .../Editor/EditorComponents/Editor.tsx | 14 +++++------ .../Editor/EditorComponents/FileSwitcher.jsx | 11 +++++++-- .../Editor/EditorView/DeveloperToolsView.jsx | 10 ++++---- .../EditorMenuContainer.tsx | 10 ++++---- .../src/contexts/IndexerDetailsContext.tsx | 24 +++++++++---------- frontend/src/pages/query-api-editor/index.js | 2 +- 7 files changed, 50 insertions(+), 31 deletions(-) create mode 100644 frontend/src/components/Common/Icons/AlertIcon.js diff --git a/frontend/src/components/Common/Icons/AlertIcon.js b/frontend/src/components/Common/Icons/AlertIcon.js new file mode 100644 index 00000000..5c634f7d --- /dev/null +++ b/frontend/src/components/Common/Icons/AlertIcon.js @@ -0,0 +1,10 @@ +import React from 'react'; + +const AlertIcon = () => { + return ( +
+ ! +
+ ); +}; +export default AlertIcon; diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index 8437b8e7..324c83a8 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -37,7 +37,8 @@ const originalIndexingCode = formatIndexingCode(defaultCode); const pgSchemaTypeGen = new PgSchemaTypeGen(); const Editor: React.FC = (): ReactElement => { - const { indexerDetails, debugMode, isCreateNewIndexer } = useContext(IndexerDetailsContext); + const { indexerDetails, isCreateNewIndexer } = useContext(IndexerDetailsContext); + const storageManager = useMemo(() => { if (indexerDetails.accountId && indexerDetails.indexerName) { return new QueryAPIStorageManager(indexerDetails.accountId, indexerDetails.indexerName); @@ -118,17 +119,17 @@ const Editor: React.FC = (): ReactElement => { if (schemaError?.type === FORMATTING_ERROR_TYPE) setError(SCHEMA_FORMATTING_ERROR_MESSAGE); if (schemaError?.type === TYPE_GENERATION_ERROR_TYPE) setError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); return; - } + }; const indexerErrorHandler = (codeError: any): void => { if (codeError) setError(CODE_GENERAL_ERROR_MESSAGE); return; - } + }; useEffect(() => { //* Load saved code from local storage if it exists else load code from context const savedCode = storageManager?.getIndexerCode(); - if (savedCode) setIndexingCode(savedCode) + if (savedCode) setIndexingCode(savedCode); else if (indexerDetails.code) { const { data: formattedCode, error: codeError } = validateJSCode(indexerDetails.code); if (codeError) setError(CODE_FORMATTING_ERROR_MESSAGE); @@ -147,7 +148,7 @@ const Editor: React.FC = (): ReactElement => { useEffect(() => { //* Load saved schema from local storage if it exists else load code from context const savedSchema = storageManager?.getSchemaCode(); - if (savedSchema) setSchema(savedSchema) + if (savedSchema) setSchema(savedSchema); else if (indexerDetails.schema) { const { data: formattedSchema, error: schemaError } = validateSQLSchema(indexerDetails.schema); schemaErrorHandler(schemaError); @@ -340,7 +341,6 @@ const Editor: React.FC = (): ReactElement => { debouncedValidateCode(_code); }; - return ( <>
{ {error} )} */} - + {/* @ts-ignore remove after refactoring Resizable Editor to ts*/} +
{!isCreateNewIndexer && (
Diff View @@ -76,8 +77,9 @@ const DeveloperToolsView = ({
Debug Mode diff --git a/frontend/src/components/Editor/EditorViewContainer/EditorMenuContainer.tsx b/frontend/src/components/Editor/EditorViewContainer/EditorMenuContainer.tsx index 663657ef..aa56a261 100644 --- a/frontend/src/components/Editor/EditorViewContainer/EditorMenuContainer.tsx +++ b/frontend/src/components/Editor/EditorViewContainer/EditorMenuContainer.tsx @@ -140,17 +140,17 @@ const EditorMenuContainer: React.FC = ({ const forkedFrom = indexerDetails.forkedAccountId && indexerDetails.forkedIndexerName ? { - account_id: indexerDetails.forkedAccountId, - function_name: indexerDetails.forkedIndexerName, - } + account_id: indexerDetails.forkedAccountId, + function_name: indexerDetails.forkedIndexerName, + } : null; const startBlock = indexerConfig.startBlock === 'startBlockHeight' ? { HEIGHT: indexerConfig.height } : indexerConfig.startBlock === 'startBlockLatest' - ? 'LATEST' - : 'CONTINUE'; + ? 'LATEST' + : 'CONTINUE'; if (schemaValidationError?.type === FORMATTING_ERROR_TYPE) { setError(SCHEMA_FORMATTING_ERROR_MESSAGE); diff --git a/frontend/src/contexts/IndexerDetailsContext.tsx b/frontend/src/contexts/IndexerDetailsContext.tsx index 6c536f2d..4a2848a0 100644 --- a/frontend/src/contexts/IndexerDetailsContext.tsx +++ b/frontend/src/contexts/IndexerDetailsContext.tsx @@ -55,25 +55,25 @@ export const IndexerDetailsContext = createContext({ forkedAccountId: null, forkedIndexerName: null, }, - setIndexerDetails: () => { }, + setIndexerDetails: () => {}, showResetCodeModel: false, - setShowResetCodeModel: () => { }, + setShowResetCodeModel: () => {}, showPublishModal: false, - setShowPublishModal: () => { }, + setShowPublishModal: () => {}, showForkIndexerModal: false, - setShowForkIndexerModal: () => { }, + setShowForkIndexerModal: () => {}, debugMode: false, - setDebugMode: () => { }, + setDebugMode: () => {}, latestHeight: 0, - setLatestHeight: () => { }, + setLatestHeight: () => {}, isCreateNewIndexer: false, - setIsCreateNewIndexer: () => { }, - setAccountId: () => { }, - setIndexerName: () => { }, - setForkedAccountId: () => { }, - setForkedIndexerName: () => { }, + setIsCreateNewIndexer: () => {}, + setAccountId: () => {}, + setIndexerName: () => {}, + setForkedAccountId: () => {}, + setForkedIndexerName: () => {}, showLogsView: false, - setShowLogsView: () => { }, + setShowLogsView: () => {}, }); interface IndexerDetailsProviderProps { diff --git a/frontend/src/pages/query-api-editor/index.js b/frontend/src/pages/query-api-editor/index.js index 5ca12874..f37916ac 100644 --- a/frontend/src/pages/query-api-editor/index.js +++ b/frontend/src/pages/query-api-editor/index.js @@ -23,7 +23,7 @@ const QueryApiEditorPage = ({ router }) => { ); } - + return showLogsView ? : ; }; From ae28567712da0b23123569c3f44ca6a8a1d68f6a Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 5 Jul 2024 15:42:05 -0400 Subject: [PATCH 06/16] feat: added error handler to indexer --- .../{AlertIcon.js => AlertSquareIcon.js} | 4 +- .../Common/Icons/CheckMarkSquareIcon.js | 17 +++ .../Editor/EditorComponents/Editor.tsx | 111 +++++------------- .../Editor/EditorComponents/FileSwitcher.jsx | 35 ++++-- .../Editor/EditorView/EditorMenuView.jsx | 4 +- .../EditorMenuContainer.tsx | 14 +-- frontend/widgets/src/QueryApi.Dashboard.jsx | 24 ---- 7 files changed, 83 insertions(+), 126 deletions(-) rename frontend/src/components/Common/Icons/{AlertIcon.js => AlertSquareIcon.js} (76%) create mode 100644 frontend/src/components/Common/Icons/CheckMarkSquareIcon.js diff --git a/frontend/src/components/Common/Icons/AlertIcon.js b/frontend/src/components/Common/Icons/AlertSquareIcon.js similarity index 76% rename from frontend/src/components/Common/Icons/AlertIcon.js rename to frontend/src/components/Common/Icons/AlertSquareIcon.js index 5c634f7d..b3df8580 100644 --- a/frontend/src/components/Common/Icons/AlertIcon.js +++ b/frontend/src/components/Common/Icons/AlertSquareIcon.js @@ -1,10 +1,10 @@ import React from 'react'; -const AlertIcon = () => { +const AlertSquareIcon = () => { return (
!
); }; -export default AlertIcon; +export default AlertSquareIcon; diff --git a/frontend/src/components/Common/Icons/CheckMarkSquareIcon.js b/frontend/src/components/Common/Icons/CheckMarkSquareIcon.js new file mode 100644 index 00000000..2b25571a --- /dev/null +++ b/frontend/src/components/Common/Icons/CheckMarkSquareIcon.js @@ -0,0 +1,17 @@ +import React from 'react'; + +const CheckMarkSquareIcon = () => { + return ( +
+ + + +
+ ); +}; + +export default CheckMarkSquareIcon; diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index 324c83a8..10f73494 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -6,8 +6,6 @@ import { useDebouncedCallback } from 'use-debounce'; import primitives from '!!raw-loader!./primitives.d.ts'; import { - CODE_FORMATTING_ERROR_MESSAGE, - CODE_GENERAL_ERROR_MESSAGE, FORMATTING_ERROR_TYPE, SCHEMA_FORMATTING_ERROR_MESSAGE, SCHEMA_TYPE_GENERATION_ERROR_MESSAGE, @@ -45,7 +43,8 @@ const Editor: React.FC = (): ReactElement => { } else return null; }, [indexerDetails.accountId, indexerDetails.indexerName]); - const [error, setError] = useState(); + const [indexerError, setIndexerError] = useState(); + const [schemaError, setSchemaError] = useState(); const [fileName, setFileName] = useState(INDEXER_TAB_NAME); const [indexingCode, setIndexingCode] = useState(originalIndexingCode); const [schema, setSchema] = useState(originalSQLCode); @@ -62,7 +61,7 @@ const Editor: React.FC = (): ReactElement => { const [diffView, setDiffView] = useState(false); const [blockView, setBlockView] = useState(false); - const { openModal, showModal, data, message, hideModal } = useModal(); + const { showModal } = useModal(); const [isExecutingIndexerFunction, setIsExecutingIndexerFunction] = useState(false); const { height, currentUserAccountId }: { height?: number; currentUserAccountId?: string } = @@ -81,58 +80,37 @@ const Editor: React.FC = (): ReactElement => { const disposableRef = useRef(null); const monacoEditorRef = useRef(null); - const parseGlyphError = ( - error?: { message: string }, - line?: { start: { line: number; column: number }; end: { line: number; column: number } }, - ) => { - const { line: startLine, column: startColumn } = line?.start || { line: 1, column: 1 }; - const { line: endLine, column: endColumn } = line?.end || { line: 1, column: 1 }; - const displayedError = error?.message || 'No Errors'; - - monacoEditorRef.current.deltaDecorations( - [decorations], - [ - { - range: new monaco.Range(startLine, startColumn, endLine, endColumn), - options: { - isWholeLine: true, - glyphMarginClassName: error ? 'glyphError' : 'glyphSuccess', - glyphMarginHoverMessage: { value: displayedError }, - }, - }, - ], - ); - }; - const debouncedValidateSQLSchema = useDebouncedCallback((_schema: string) => { const { error, location } = validateSQLSchema(_schema); - error ? parseGlyphError(error as any, location as any) : parseGlyphError(); - return; + schemaErrorHandler(error); }, 500); const debouncedValidateCode = useDebouncedCallback((_code: string) => { - const { error: codeError } = validateJSCode(_code); - codeError ? setError(CODE_FORMATTING_ERROR_MESSAGE) : setError(undefined); + const { error } = validateJSCode(_code); + indexerErrorHandler(error); }, 500); const schemaErrorHandler = (schemaError: any): void => { - if (schemaError?.type === FORMATTING_ERROR_TYPE) setError(SCHEMA_FORMATTING_ERROR_MESSAGE); - if (schemaError?.type === TYPE_GENERATION_ERROR_TYPE) setError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); + if (schemaError?.type === FORMATTING_ERROR_TYPE) setSchemaError(SCHEMA_FORMATTING_ERROR_MESSAGE); + if (schemaError?.type === TYPE_GENERATION_ERROR_TYPE) setSchemaError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); + if (!schemaError) setSchemaError(undefined); return; }; - const indexerErrorHandler = (codeError: any): void => { - if (codeError) setError(CODE_GENERAL_ERROR_MESSAGE); + const indexerErrorHandler = (indexerError: any): void => { + if (indexerError) setIndexerError(indexerError); + if (!indexerError) setIndexerError(undefined); return; }; useEffect(() => { + console.log('Editor useEffect 1'); //* Load saved code from local storage if it exists else load code from context const savedCode = storageManager?.getIndexerCode(); if (savedCode) setIndexingCode(savedCode); else if (indexerDetails.code) { const { data: formattedCode, error: codeError } = validateJSCode(indexerDetails.code); - if (codeError) setError(CODE_FORMATTING_ERROR_MESSAGE); + indexerErrorHandler(codeError); formattedCode && setIndexingCode(formattedCode); } //* Load saved cursor position from local storage if it exists else set cursor to start @@ -146,6 +124,7 @@ const Editor: React.FC = (): ReactElement => { }, [indexerDetails.code]); useEffect(() => { + console.log('Editor useEffect 2'); //* Load saved schema from local storage if it exists else load code from context const savedSchema = storageManager?.getSchemaCode(); if (savedSchema) setSchema(savedSchema); @@ -157,22 +136,19 @@ const Editor: React.FC = (): ReactElement => { }, [indexerDetails.schema]); useEffect(() => { - //* Revalidate code and schema on file switch const { error: schemaError } = validateSQLSchema(schema); const { error: codeError } = validateJSCode(indexingCode); - if (schemaError) { - schemaErrorHandler(schemaError); - return; - } - if (codeError) { - indexerErrorHandler(codeError); + + if (schemaError || codeError) { + if (schemaError) schemaErrorHandler(schemaError); + if (codeError) indexerErrorHandler(codeError); return; } + handleCodeGen(); }, [fileName]); useEffect(() => { - //* Cache code and schema to local storage on change cacheToLocal(); }, [indexingCode, schema]); @@ -188,13 +164,11 @@ const Editor: React.FC = (): ReactElement => { }, [monacoEditorRef.current]); useEffect(() => { - console.log('Editor useEffect 6'); storageManager?.setSchemaTypes(schemaTypes); handleCodeGen(); }, [schemaTypes, monacoMount]); useEffect(() => { - console.log('Editor useEffect 7'); storageManager?.setDebugList(heights); }, [heights]); @@ -243,23 +217,9 @@ const Editor: React.FC = (): ReactElement => { const reformatAll = (indexingCode: string, schema: string) => { const { data: validatedCode, error: codeError } = validateJSCode(indexingCode); const { data: validatedSchema, error: schemaError } = validateSQLSchema(schema); - - let formattedCode = validatedCode; - let formattedSchema = validatedSchema; - if (codeError) { - formattedCode = indexingCode; - setError(CODE_FORMATTING_ERROR_MESSAGE); - } else if (schemaError?.type === FORMATTING_ERROR_TYPE) { - formattedSchema = schema; - setError(SCHEMA_FORMATTING_ERROR_MESSAGE); - } else if (schemaError?.type === TYPE_GENERATION_ERROR_TYPE) { - formattedSchema = schema; - setError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); - } else { - setError(undefined); - } - - return { formattedCode, formattedSchema }; + indexerErrorHandler(codeError); + schemaErrorHandler(schemaError); + return { validatedCode, validatedSchema }; }; const handleCodeGen = () => { @@ -268,18 +228,17 @@ const Editor: React.FC = (): ReactElement => { attachTypesToMonaco(); // Just in case schema types have been updated but weren't added to monaco } catch (_error) { console.error('Error generating types for saved schema.\n', _error); - setError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); + setSchemaError(SCHEMA_TYPE_GENERATION_ERROR_MESSAGE); } }; const handleFormating = () => { - const { formattedCode, formattedSchema } = reformatAll(indexingCode, schema); - formattedCode && setIndexingCode(formattedCode); - formattedSchema && setSchema(formattedSchema); + const { validatedCode, validatedSchema } = reformatAll(indexingCode, schema); + validatedCode && setIndexingCode(validatedCode); + validatedSchema && setSchema(validatedSchema); }; const handleEditorWillMount = (editor: any, monaco: any) => { - console.log('monaco mount effect'); if (!diffView) { const decorations = editor.deltaDecorations( [], @@ -365,7 +324,7 @@ const Editor: React.FC = (): ReactElement => { isUserIndexer={indexerDetails.accountId === currentUserAccountId} handleDeleteIndexer={handleDeleteIndexer} isCreateNewIndexer={isCreateNewIndexer} - error={error} + schemaError={schemaError} //Fork Indexer Modal indexingCode={indexingCode} setIndexingCode={setIndexingCode} @@ -376,7 +335,7 @@ const Editor: React.FC = (): ReactElement => { //Publish Modal actionButtonText={'publish'} schema={schema} - setError={setError} + setSchemaError={setSchemaError} showModal={showModal} /> { height: '100%', }} > - {/* {error && ( - setError(undefined)} - className="px-4 py-3 mb-4 font-semibold text-red-700 text-sm text-center border border-red-300 bg-red-50 rounded-lg shadow-md" - variant="danger" - > - {error} - - )} */} - + {/* @ts-ignore remove after refactoring Resizable Editor to ts*/} @@ -13,20 +15,33 @@ export function FileSwitcher({ fileName, setFileName, showAlert, error }) { } border-r border-gray-400 last:border-r-0`} onClick={() => setFileName('indexer.js')} > - Indexer.js + Indexer.js +
+ {indexerError ? ( + + + + ) : ( + + )} +
{!isCreateNewIndexer && (