IndexingLogic consistency with logs and refactoring (#769)

improved indexingLogic components by the following: 1. Separation into view/container 2. Broke down larger components into more reusable and meaningful counterparts 3. Adding TS to files 4. Redesigned visuals for IndexingLogic matching Logs themes (GCP) 5. Removed Unnecessary Folder Structure of "Forms" and it is coupled tightly with the Modals 6. Removed dead code/Refactored Repeated Logic
near · Jun 5, 2024 · 051b9a2 · 051b9a2
1 parent ffceeef
commit 051b9a2
Show file tree

Hide file tree

Showing 18 changed files with 795 additions and 643 deletions.
diff --git a/frontend/replacement.dev.json b/frontend/replacement.dev.json
@@ -3,4 +3,4 @@
     "REPL_GRAPHQL_ENDPOINT": "https://near-queryapi.dev.api.pagoda.co",
     "REPL_EXTERNAL_APP_URL": "https://queryapi-frontend-vcqilefdcq-ew.a.run.app",
     "REPL_REGISTRY_CONTRACT_ID": "dev-queryapi.dataplatform.near"
-}
+}
diff --git a/frontend/src/components/Editor/BlockPicker.jsx b/frontend/src/components/Editor/BlockPicker.jsx
diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
@@ -17,7 +17,9 @@ import { block_details } from "./block_details";
 import ResizableLayoutEditor from "./ResizableLayoutEditor";
 import { ResetChangesModal } from "../Modals/resetChanges";
 import { FileSwitcher } from "./FileSwitcher";
-import EditorButtons from "./EditorButtons";
+import EditorMenuContainer from "./EditorViewContainer/EditorMenuContainer"
+import DeveloperToolsContainer from "./EditorViewContainer/DeveloperToolsContainer";
+
 import { PublishModal } from "../Modals/PublishModal";
 import { ForkIndexerModal } from "../Modals/ForkIndexerModal";
 import { getLatestBlockHeight } from "../../utils/getLatestBlockHeight";
@@ -32,6 +34,7 @@ import { InfoModal } from "@/core/InfoModal";
 import { useModal } from "@/contexts/ModalContext";
 import { GlyphContainer } from "./GlyphContainer";
 
+
 const Editor = ({ actionButtonText }) => {
   const {
     indexerDetails,
@@ -199,7 +202,7 @@ const Editor = ({ actionButtonText }) => {
       if (newDisposable != null) {
         console.log("Types successfully imported to Editor");
       }
-      
+
       disposableRef.current = newDisposable;
     }
   };
@@ -234,17 +237,17 @@ const Editor = ({ actionButtonText }) => {
       /getBlock\s*\([^)]*\)\s*{([\s\S]*)}/
     )[1];
     indexerName = indexerName.replaceAll(" ", "_");
-    let forkedFrom = 
+    let forkedFrom =
       (indexerDetails.forkedAccountId && indexerDetails.forkedIndexerName)
-      ? { account_id: indexerDetails.forkedAccountId, function_name: indexerDetails.forkedIndexerName }
-      : null;
+        ? { account_id: indexerDetails.forkedAccountId, function_name: indexerDetails.forkedIndexerName }
+        : null;
 
     const startBlock =
-    indexerConfig.startBlock === "startBlockHeight"
-      ? { HEIGHT: indexerConfig.height }
-      : indexerConfig.startBlock === "startBlockLatest"
-      ? "LATEST"
-      : "CONTINUE";  
+      indexerConfig.startBlock === "startBlockHeight"
+        ? { HEIGHT: indexerConfig.height }
+        : indexerConfig.startBlock === "startBlockLatest"
+          ? "LATEST"
+          : "CONTINUE";
 
     if (schemaValidationError?.type === FORMATTING_ERROR_TYPE) {
       setError(SCHEMA_FORMATTING_ERROR_MESSAGE);
@@ -464,14 +467,17 @@ const Editor = ({ actionButtonText }) => {
         }}
       >
         {!indexerDetails.code && !isCreateNewIndexer && (
-          <Alert className="px-3 pt-3" variant="danger">
-            Indexer Function could not be found. Are you sure this indexer
-            exists?
+          <Alert
+            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"
+          >
+            Indexer Function could not be found. Are you sure this indexer exists?
           </Alert>
+
         )}
         {(indexerDetails.code || isCreateNewIndexer) && (
           <>
-            <EditorButtons
+            <EditorMenuContainer
               handleFormating={handleFormating}
               handleCodeGen={handleCodeGen}
               error={error}
@@ -485,6 +491,26 @@ const Editor = ({ actionButtonText }) => {
               isUserIndexer={indexerDetails.accountId === currentUserAccountId}
               handleDeleteIndexer={handleDeleteIndexer}
             />
+            <DeveloperToolsContainer
+              handleFormating={handleFormating}
+              handleCodeGen={handleCodeGen}
+              error={error}
+              executeIndexerFunction={executeIndexerFunction}
+              heights={heights}
+              setHeights={setHeights}
+              isCreateNewIndexer={isCreateNewIndexer}
+              isExecuting={isExecutingIndexerFunction}
+              stopExecution={() => indexerRunner.stop()}
+              latestHeight={height}
+              isUserIndexer={indexerDetails.accountId === currentUserAccountId}
+              handleDeleteIndexer={handleDeleteIndexer}
+
+              fileName={fileName}
+              setFileName={setFileName}
+              diffView={diffView}
+              setDiffView={setDiffView}
+            />
+
             <ResetChangesModal handleReload={handleReload} />
             <PublishModal
               registerFunction={registerFunction}
@@ -506,21 +532,20 @@ const Editor = ({ actionButtonText }) => {
                 <Alert
                   dismissible="true"
                   onClose={() => setError()}
-                  className="px-3 pt-3"
+                  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}
                 </Alert>
               )}
               {debugMode && !debugModeInfoDisabled && (
                 <Alert
-                  className="px-3 pt-3"
+                  className="px-4 py-3 mb-4 font-semibold text-gray-700 text-sm text-center border border-blue-300 bg-blue-50 rounded-lg shadow-md"
                   dismissible="true"
                   onClose={() => setDebugModeInfoDisabled(true)}
                   variant="info"
                 >
-                  To debug, you will need to open your browser console window in
-                  order to see the logs.
+                  To debug, you will need to open your browser console window in order to see the logs.
                 </Alert>
               )}
               <FileSwitcher