Fixed Cypress tests

cypress.json

@@ -2,5 +2,5 @@
   "baseUrl": "http://localhost:3000",
   "viewportWidth": 1280,
   "viewportHeight": 800,
-  "defaultCommandTimeout": 8000
+  "defaultCommandTimeout": 15000
 }

cypress/integration/autocomplete.spec.ts

@@ -1,6 +1,6 @@
 describe('Autocomplete in the editor', () => {
   it('Should allow you to autocomplete XState imports', () => {
-    cy.visit('/');
+    cy.visit('/viz');
     cy.getMonacoEditor().type('{enter}{enter}ass');
 
     // Wait for the autocomplete to show up
@@ -12,7 +12,7 @@ describe('Autocomplete in the editor', () => {
   });
 
   it('Should allow you to autocomplete from xstate/lib/model', () => {
-    cy.visit('/');
+    cy.visit('/viz');
     cy.getMonacoEditor().type('{enter}{enter}createMod');
 
     // Wait for the autocomplete to show up

cypress/integration/canvas-actions.spec.ts

@@ -19,7 +19,7 @@ createMachine({
       }),
     );
 
-    cy.visit('/');
+    cy.visit('/viz');
 
     cy.getCanvas().findByRole('button', { name: 'MY_EVENT' }).click();
     cy.getCanvas()

cypress/integration/editor-persistence.spec.ts

@@ -11,7 +11,7 @@ describe('Editor persistence', () => {
   describe('When you have unsaved changes', () => {
     it('Should show the changes when you re-enter the page', () => {
       setup();
-      cy.visit('/');
+      cy.visit('/viz');
 
       cy.getMonacoEditor().type(`{enter}{enter}// Code changes`);
       /**
@@ -47,7 +47,7 @@ describe('Editor persistence', () => {
           text: `// Changes from the registry!`,
         },
       });
-      cy.visit('/?id=source-file-id');
+      cy.visit('/viz?id=source-file-id');
 
       cy.contains('// Old machine');
     });
@@ -79,7 +79,7 @@ describe('Editor persistence', () => {
         },
       });
 
-      cy.visit('/?id=source-file-id');
+      cy.visit('/viz?id=source-file-id');
 
       cy.contains('Changes from the registry!');
     });

cypress/integration/events-panel.spec.ts

@@ -19,7 +19,7 @@ createMachine({
       }),
     );
 
-    cy.visit('/');
+    cy.visit('/viz');
 
     cy.getCanvas().findByRole('button', { name: 'MY_EVENT' }).click();
     cy.getCanvas().findByRole('button', { name: 'OTHER_EVENT' }).click();
@@ -50,7 +50,7 @@ createMachine({
       }),
     );
 
-    cy.visit('/');
+    cy.visit('/viz');
 
     cy.getCanvas().findByRole('button', { name: 'MY_EVENT' }).click();
 
@@ -84,7 +84,7 @@ createMachine({
       }),
     );
 
-    cy.visit('/');
+    cy.visit('/viz');
 
     cy.getCanvas().findByRole('button', { name: 'MY_EVENT' }).click();
 

cypress/integration/forking.spec.ts

@@ -22,7 +22,7 @@ describe('Forking', () => {
         },
       });
 
-      cy.visit('/?id=source-file-id');
+      cy.visit('/viz?id=source-file-id');
 
       cy.getMonacoEditor().type(`{enter}{enter} // New Code Changes`);
 
@@ -63,7 +63,7 @@ describe('Forking', () => {
         },
       });
 
-      cy.visit('/?id=source-file-id');
+      cy.visit('/viz?id=source-file-id');
 
       cy.getMonacoEditor().type(`{enter}{enter} // New Code Changes`);
 

cypress/integration/gist.spec.ts

@@ -24,7 +24,7 @@ describe('Gists', () => {
       },
     });
     cy.intercept('https://api.github.com/gist-id.blob', dummyFile);
-    cy.visit('/?gist=gist-id');
+    cy.visit('/viz?gist=gist-id');
   };
 
   it('Should allow you to load a source file from a gist', () => {

cypress/integration/saving.spec.ts

@@ -14,7 +14,7 @@ describe('Saving', () => {
       },
     });
 
-    cy.visit('/');
+    cy.visit('/viz');
 
     cy.getMonacoEditor().type(`{enter}{enter} // New Code Changes`);
 
@@ -52,7 +52,7 @@ describe('Saving', () => {
       },
     });
 
-    cy.visit('/?id=source-file-id');
+    cy.visit('/viz?id=source-file-id');
 
     cy.getMonacoEditor().type(`{enter}{enter} // New Code Changes`);
 

cypress/integration/sign-up-flow.spec.ts

@@ -1,7 +1,7 @@
 describe('Sign up funnel', () => {
   describe('When you are logged out', () => {
     it('Should ask you to sign up when you save', () => {
-      cy.visit('/');
+      cy.visit('/viz');
       cy.findByRole('button', {
         name: /save/i,
       }).click();
@@ -18,7 +18,7 @@ describe('Sign up funnel', () => {
           },
         });
 
-        cy.visit('/?id=source-file-id');
+        cy.visit('/viz?id=source-file-id');
 
         cy.findByRole('button', {
           name: /fork/i,
@@ -46,7 +46,7 @@ describe('Sign up funnel', () => {
           },
         });
 
-        cy.visit('/?id=source-file-id');
+        cy.visit('/viz?id=source-file-id');
 
         // Need to wait for the canvas to load
         cy.getCanvas();

cypress/support/commands.ts

@@ -67,7 +67,7 @@ const visitInspector = () => {
     const inspector = inspect({
       iframe: () =>
         window.parent.document.querySelector<HTMLIFrameElement>('.aut-iframe'),
-      url: `${Cypress.config('baseUrl')!}?inspect`,
+      url: `${Cypress.config('baseUrl')!}/viz?inspect`,
     })!;
     state('@@viz/inspector', inspector);
   });

src/EditorPanel.tsx

@@ -9,8 +9,9 @@ import {
 } from '@chakra-ui/react';
 import type { Monaco } from '@monaco-editor/react';
 import { useActor, useMachine, useSelector } from '@xstate/react';
+import { editor, Range } from 'monaco-editor';
+import dynamic from 'next/dynamic';
 import React from 'react';
-import type { editor, Range } from 'monaco-editor';
 import { ActorRefFrom, assign, DoneInvokeEvent, send, spawn } from 'xstate';
 import { createModel } from 'xstate/lib/model';
 import { useAuth } from './authContext';
@@ -27,11 +28,6 @@ import {
 } from './sourceMachine';
 import type { AnyStateMachine } from './types';
 import { uniq } from './utils';
-import dynamic from 'next/dynamic';
-
-const EditorWithXStateImports = dynamic(
-  () => import('./EditorWithXStateImports'),
-);
 
 function buildGistFixupImportsText(usedXStateGistIdentifiers: string[]) {
   const rootNames: string[] = [];
@@ -76,6 +72,10 @@ class SyntaxError extends Error {
   }
 }
 
+const EditorWithXStateImports = dynamic(
+  () => import('./EditorWithXStateImports'),
+);
+
 const editorPanelModel = createModel(
   {
     code: '',
@@ -142,6 +142,7 @@ const editorPanelMachine = editorPanelModel.createMachine(
                 const getWorker =
                   await monaco.languages.typescript.getTypeScriptWorker();
                 const tsWorker = await getWorker(uri);
+
                 const usedXStateGistIdentifiers: string[] = await (
                   tsWorker as any
                 ).queryXStateGistIdentifiers(uri.toString());
@@ -519,18 +520,10 @@ export const EditorPanel: React.FC<{
                   onClick={onCreateNew}
                   variant="outline"
                 >
-                  Fork
+                  New
                 </Button>
               )}
             </HStack>
-            {sourceOwnershipStatus !== 'no-source' && (
-              <Button
-                leftIcon={<AddIcon fill="gray.200" />}
-                onClick={onCreateNew}
-              >
-                New
-              </Button>
-            )}
           </>
         )}
         {simulationMode === 'inspecting' && (