Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: editor DiffView now recognizes LaunchPad generated code and other cases #999

Merged
merged 5 commits into from
Aug 12, 2024
Merged

feat: editor DiffView now recognizes LaunchPad generated code and other cases #999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4f55849
feat: wrap generate code
Kevin101Zhang Aug 8, 2024
1744bbd
feat: diff editor is now aware of launchpad
Kevin101Zhang Aug 8, 2024
e89f023
merge
Kevin101Zhang Aug 9, 2024
dcb4e71
feat: added context diff view
Kevin101Zhang Aug 9, 2024
baf2464
chore
Kevin101Zhang Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions frontend/src/components/Editor/EditorComponents/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { request, useInitialPayload } from 'near-social-bridge';

Check warning on line 1 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

Run autofix to sort these imports!
import type { ReactElement } from 'react';
import type { Method, Event } from '@/pages/api/generateCode';

Expand Down Expand Up @@ -38,10 +38,11 @@

declare const monaco: any;
const INDEXER_TAB_NAME = 'indexer.js';
const SCHEMA_TAB_NAME = 'schema.sql';

Check warning on line 41 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

'SCHEMA_TAB_NAME' is assigned a value but never used. Allowed unused vars must match /^_/u
const originalSQLCode = formatSQL(defaultSchema);
const originalIndexingCode = formatIndexingCode(defaultCode);
const pgSchemaTypeGen = new PgSchemaTypeGen();

interface WizardResponse {
wizardContractFilter: string;
wizardMethods: Method[];
Expand All @@ -55,6 +56,9 @@
const Editor: React.FC = (): ReactElement => {
const { indexerDetails, isCreateNewIndexer } = useContext(IndexerDetailsContext);

const contextCode = indexerDetails.code && formatIndexingCode(indexerDetails.code);
const contextSchema = indexerDetails.schema && formatSQL(indexerDetails.schema);

const storageManager = useMemo(() => {
if (indexerDetails.accountId && indexerDetails.indexerName) {
return new QueryAPIStorageManager(indexerDetails.accountId, indexerDetails.indexerName);
Expand All @@ -78,7 +82,11 @@
const [heights, setHeights] = useState<number[]>(initialHeights);

const [diffView, setDiffView] = useState<boolean>(false);
const [blockView, setBlockView] = useState<boolean>(false);

Check warning on line 85 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

'setBlockView' is assigned a value but never used. Allowed unused vars must match /^_/u

const [launchPadDefaultCode, setLaunchPadDefaultCode] = useState<string>('');
const [launchPadDefaultSchema, setLaunchPadDefaultSchema] = useState<string>('');

const { showModal } = useModal();

const [isExecutingIndexerFunction, setIsExecutingIndexerFunction] = useState<boolean>(false);
Expand Down Expand Up @@ -158,14 +166,14 @@
const wrappedIndexingCode = wrapCode(jsCode) ? wrapCode(jsCode) : jsCode;
const { validatedCode, validatedSchema } = reformatAll(wrappedIndexingCode, sqlCode);

validatedCode && setIndexingCode(validatedCode);
validatedSchema && setSchema(validatedSchema);
validatedCode && (setIndexingCode(validatedCode), setLaunchPadDefaultCode(validatedCode));
validatedSchema && (setSchema(validatedSchema), setLaunchPadDefaultSchema(validatedSchema));
} catch (error: unknown) {
//todo: figure out best course of action for user if api fails
console.error(error);
}
})();
}, []);

Check warning on line 176 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'reformatAll'. Either include it or remove the dependency array

useEffect(() => {
//* Load saved code from local storage if it exists else load code from context
Expand All @@ -183,7 +191,7 @@
monacoEditorRef.current.setPosition(savedCursorPosition || { lineNumber: 1, column: 1 });
monacoEditorRef.current.focus();
}
}, [indexerDetails.code]);

Check warning on line 194 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has missing dependencies: 'fileName' and 'storageManager'. Either include them or remove the dependency array

useEffect(() => {
//* Load saved schema from local storage if it exists else load code from context
Expand All @@ -194,7 +202,7 @@
schemaErrorHandler(schemaError);
formattedSchema && setSchema(formattedSchema);
}
}, [indexerDetails.schema]);

Check warning on line 205 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'storageManager'. Either include it or remove the dependency array

useEffect(() => {
const { error: schemaError } = validateSQLSchema(schema);
Expand All @@ -207,11 +215,11 @@
}

handleCodeGen();
}, [fileName]);

Check warning on line 218 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has missing dependencies: 'handleCodeGen', 'indexingCode', and 'schema'. Either include them or remove the dependency array

useEffect(() => {
cacheToLocal();
}, [indexingCode, schema]);

Check warning on line 222 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'cacheToLocal'. Either include it or remove the dependency array

useEffect(() => {
if (!monacoEditorRef.current) return;
Expand All @@ -222,12 +230,12 @@
return () => {
editorInstance.dispose();
};
}, [monacoEditorRef.current]);

Check warning on line 233 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has a missing dependency: 'handleCursorChange'. Either include it or remove the dependency array. Mutable values like 'monacoEditorRef.current' aren't valid dependencies because mutating them doesn't re-render the component

useEffect(() => {
storageManager?.setSchemaTypes(schemaTypes);
handleCodeGen();
}, [schemaTypes, monacoMount]);

Check warning on line 238 in frontend/src/components/Editor/EditorComponents/Editor.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook useEffect has missing dependencies: 'handleCodeGen' and 'storageManager'. Either include them or remove the dependency array

useEffect(() => {
storageManager?.setDebugList(heights);
Expand Down Expand Up @@ -471,6 +479,10 @@
schema={schema}
isCreateNewIndexer={isCreateNewIndexer}
onMount={handleEditorWillMount}
launchPadDefaultCode={launchPadDefaultCode}
launchPadDefaultSchema={launchPadDefaultSchema}
contextCode={contextCode}
contextSchema={contextSchema}
/>
</GlyphContainer>
</div>
Expand Down
15 changes: 10 additions & 5 deletions frontend/src/components/Editor/EditorComponents/ResizableLayoutEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const containerStyle = {
display: 'flex',
flexDirection: 'row',
width: '100%',
height: '100%',
height: '100vh',
};

const editorContainerStyle = {
Expand Down Expand Up @@ -145,6 +145,10 @@ export default function ResizableLayoutEditor({
indexingCode,
onMount,
isCreateNewIndexer,
launchPadDefaultCode,
launchPadDefaultSchema,
contextCode,
contextSchema,
}) {
const {
dragBarRef: dragBarRefConsole,
Expand All @@ -157,23 +161,24 @@ export default function ResizableLayoutEditor({
sizeThresholdFirst: 60,
sizeThresholdSecond: 20,
});

const defaultCode = launchPadDefaultCode ? launchPadDefaultCode : contextCode ? contextCode : originalIndexingCode;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious. Would it be easier instead, to have a state variable for original code? And we just set it whenever we transition to the Editor page? I feel that would make this workflow friendly to ANY scenario where we change to the Editor component. Or making it a prop that must be passed in.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, we don't default to anything or have a chain of things to try. We instead expect the application to correctly populate it according to its situation before going into Editor.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component needs some refactoring for sure when I get the chance. It hasnt been touched at all. As you can see its still a jsx page. It currently houses 2 actual components that make sense together but id prefer we separate them into different files. ResizableEditor and
ResizableLayoutEditor are the two components it currently houses. Ideally after I refactor them in a separate PR, there would be a transition to TS, and we can figure out a component that follows a view/viewmodal controllor type design pattern. Frankly the simplest way to change it would be to have the current ResizableLayoutEditor be a view that just focuses on render and the other component be a Container that houses the logic.

But in reality there should be a large refactor if I wasnt heavily focused on features.
The Editor page is currently handling too many cases. My last effort was focused on transitioning the entirety of the file to TS and abtracting smaller components such as publish modals, local storage class, the developer menu, and etc.

But currently some useEffects only apply to a case where they are on a published indexer and others revolve around a state when they are unpublished. A lot of logic such as storage and etc are only applicable with the published indexer state. With the introduction of the Launchpad this further complicated the Editor page as now we have more than just defaultCode/default Schema so some functionality was added. There are plenty of oddities such as local storage has no reason to even run on a forked/launchpad/newIndexer and adding functionality like that not would only complicate the page even further. In essence the page itself needs more refactoring.

Ideally, My intial throught was to breakdown the Editor into 2 specific states therefore simplifying the use/unuse of logic we have in the Editor page current.

Editor Page when forked/launchpad/createnewIndexer (Trial state).
Editor Page when on published indexer (Published State).

This way we are on the Editor page with what we need and we dont actually need to fetch for anything until the user makes an edit. When they Publish they will only have their an actual indexerName therefore a route is created. so we can redirect them.

Its something I can focus on during/after our transition post BOS.

const defaultSchema = launchPadDefaultSchema ? launchPadDefaultSchema : contextSchema ? contextSchema : originalSQLCode;
return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
{/* Code Editor */}
<div ref={firstRefEditor} style={{ overflow: 'auto' }}>
<ResizableEditor
accountId={accountId}
fileName={fileName}
indexingCode={indexingCode}
blockView={blockView}
diffView={diffView}
onChangeCode={onChangeCode}
onChangeSchema={onChangeSchema}
block_details={block_details}
originalSQLCode={originalSQLCode}
originalIndexingCode={originalIndexingCode}
indexingCode={indexingCode}
originalIndexingCode={defaultCode}
schema={schema}
originalSQLCode={defaultSchema}
onMount={onMount}
/>
</div>
Expand Down
Loading