Revert "Revert "Merge pull request #308 from statelyai/matt/updated-v…

…iz-with-new-registry-links-and-altered-source-file-queries""

This reverts commit a2cbf77.

.graphqlconfig.yml

@@ -1 +1 @@
-schema: https://api-prod.stately.ai
+schema: https://api-dev.stately.ai

codegen.yml

@@ -1,5 +1,5 @@
 schema:
-  - https://api-prod.stately.ai
+  - https://api-dev.stately.ai
 documents:
   - 'src/graphql/**/*.graphql'
 generates:

cypress/integration/saving.spec.ts

@@ -5,8 +5,10 @@ describe('Saving', () => {
     const sourceFileToBeCreated = {
       id: 'source-file-id',
       name: 'My awesome source file',
-      owner: {
-        id: 'id',
+      system: {
+        owner: {
+          id: 'id',
+        },
       },
     };
 
@@ -22,9 +24,11 @@ describe('Saving', () => {
       },
       createSourceFile: {
         id: 'source-file-id',
-        name: 'Source File',
-        owner: {
-          id: 'id',
+        system: {
+          name: 'Source File',
+          owner: {
+            id: 'id',
+          },
         },
       },
     });
@@ -53,16 +57,20 @@ describe('Saving', () => {
       getSourceFile: {
         id: 'source-file-id',
         text: '// New File',
-        name: 'Source File',
-        owner: {
-          id: 'id',
+        system: {
+          name: 'Source File',
+          owner: {
+            id: 'id',
+          },
         },
       },
       updateSourceFile: {
         id: 'source-file-id',
-        name: 'Source File',
-        owner: {
-          id: 'id',
+        system: {
+          name: 'Source File',
+          owner: {
+            id: 'id',
+          },
         },
       },
     });

src/App.tsx

@@ -39,11 +39,13 @@ const VizHead = () => {
 
   return (
     <AppHead
-      title={[sourceRegistryData.name, defaultHeadProps.title]
+      title={[sourceRegistryData.system?.name, defaultHeadProps.title]
         .filter(Boolean)
         .join(' | ')}
-      ogTitle={sourceRegistryData.name || defaultHeadProps.ogTitle}
-      description={sourceRegistryData.name || defaultHeadProps.description}
+      ogTitle={sourceRegistryData.system?.name || defaultHeadProps.ogTitle}
+      description={
+        sourceRegistryData.system?.name || defaultHeadProps.description
+      }
       ogImageUrl={registryLinks.sourceFileOgImage(sourceRegistryData.id)}
     />
   );

src/CanvasHeader.tsx

@@ -24,7 +24,8 @@ export const CanvasHeader: React.FC = () => {
 
   const loggedInUserData = useLoggedInUserData();
   const registryData = sourceState.context.sourceRegistryData;
-  const userOwnsSource = loggedInUserData?.id === registryData?.owner?.id;
+  const userOwnsSource =
+    loggedInUserData?.id === registryData?.system?.owner?.id;
   return (
     <HStack zIndex={1} justifyContent="space-between" height="3rem">
       <Link
@@ -52,7 +53,7 @@ export const CanvasHeader: React.FC = () => {
       {registryData && (
         <Stack direction="row" spacing="4" alignItems="center" pr="4">
           <Text fontWeight="semibold" fontSize="sm" color="gray.100">
-            {registryData?.name || 'Unnamed Source'}
+            {registryData?.system?.name || 'Unnamed Source'}
           </Text>
           <HStack>
             <LikeButton />
@@ -65,28 +66,31 @@ export const CanvasHeader: React.FC = () => {
                 size="sm"
               />
               <MenuList>
-                {userOwnsSource && sourceState.context.sourceID && (
+                {userOwnsSource &&
+                  sourceState.context.sourceRegistryData?.system?.id && (
+                    <MenuItem
+                      as="a"
+                      href={registryLinks.editSystem(
+                        sourceState.context.sourceRegistryData?.system?.id,
+                      )}
+                    >
+                      <HStack spacing="3">
+                        <EditIcon />
+                        <Text>Edit</Text>
+                      </HStack>
+                    </MenuItem>
+                  )}
+                {registryData.system?.owner && (
                   <MenuItem
                     as="a"
-                    href={registryLinks.editSourceFile(
-                      sourceState.context.sourceID,
+                    href={registryLinks.viewUserById(
+                      registryData?.system?.owner?.id,
                     )}
-                  >
-                    <HStack spacing="3">
-                      <EditIcon />
-                      <Text>Edit</Text>
-                    </HStack>
-                  </MenuItem>
-                )}
-                {registryData.owner && (
-                  <MenuItem
-                    as="a"
-                    href={registryLinks.viewUserById(registryData?.owner?.id)}
                   >
                     <HStack spacing="3">
                       <Avatar
-                        src={registryData.owner?.avatarUrl || ''}
-                        name={registryData.owner?.displayName || ''}
+                        src={registryData.system?.owner?.avatarUrl || ''}
+                        name={registryData.system?.owner?.displayName || ''}
                         size="xs"
                         height="24px"
                         width="24px"

src/EditorPanel.tsx

@@ -140,12 +140,13 @@ const editorPanelMachine = editorPanelModel.createMachine(
               src: async (ctx) => {
                 const monaco = ctx.monacoRef!;
                 const uri = monaco.Uri.parse(ctx.mainFile);
-                const getWorker = await monaco.languages.typescript.getTypeScriptWorker();
+                const getWorker =
+                  await monaco.languages.typescript.getTypeScriptWorker();
                 const tsWorker = await getWorker(uri);
 
-                const usedXStateGistIdentifiers: string[] = await (tsWorker as any).queryXStateGistIdentifiers(
-                  uri.toString(),
-                );
+                const usedXStateGistIdentifiers: string[] = await (
+                  tsWorker as any
+                ).queryXStateGistIdentifiers(uri.toString());
 
                 if (usedXStateGistIdentifiers.length > 0) {
                   const fixupImportsText = buildGistFixupImportsText(
@@ -335,7 +336,7 @@ const getSourceOwnershipStatus = (sourceState: SourceMachineState) => {
   if (!sourceState.matches('no_source')) {
     if (
       sourceState.context.loggedInUserId ===
-      sourceState.context.sourceRegistryData?.owner?.id
+      sourceState.context.sourceRegistryData?.system?.owner?.id
     ) {
       sourceStatus = 'user-owns-source';
     } else {

src/graphql/SourceFileFragment.graphql

@@ -1,13 +1,16 @@
 fragment SourceFile on SourceFile {
   id
   updatedAt
-  name
   text
   youHaveLiked
   likesCount
-  owner {
+  system {
     id
-    avatarUrl
-    displayName
+    name
+    owner {
+      id
+      displayName
+      avatarUrl
+    }
   }
 }

src/registryLinks.ts

@@ -1,8 +1,8 @@
 export const registryLinks = {
   viewUserById: (id: string) =>
     `${process.env.NEXT_PUBLIC_REGISTRY_PUBLIC_URL}/user/${id}`,
-  editSourceFile: (id: string) =>
-    `${process.env.NEXT_PUBLIC_REGISTRY_PUBLIC_URL}/file/${id}/edit`,
+  editSystem: (id: string) =>
+    `${process.env.NEXT_PUBLIC_REGISTRY_PUBLIC_URL}/systems/${id}/edit`,
   sourceFileOgImage: (id: string) =>
     `${process.env.NEXT_PUBLIC_REGISTRY_PUBLIC_URL}/machines/${id}.png`,
 };

src/sourceMachine.ts

@@ -344,7 +344,8 @@ export const makeSourceMachine = (params: {
                   always: [
                     {
                       cond: (ctx) => {
-                        const ownerId = ctx.sourceRegistryData?.owner?.id;
+                        const ownerId =
+                          ctx.sourceRegistryData?.system?.owner?.id;
 
                         if (!ownerId || !ctx.loggedInUserId) return false;