refactor: create custom draftSandbox fragment to reduce query payload (#8831)

Author: tristandubbeld

packages/app/src/app/graphql/types.ts

@@ -4702,7 +4702,6 @@ export type SandboxByPathFragment = {
   forkedTemplate: {
     __typename?: 'Template';
     id: any | null;
-    color: string | null;
     iconUrl: string | null;
   } | null;
   collection: {
@@ -4762,7 +4761,6 @@ export type SandboxesByPathQuery = {
         forkedTemplate: {
           __typename?: 'Template';
           id: any | null;
-          color: string | null;
           iconUrl: string | null;
         } | null;
         collection: {
@@ -4781,6 +4779,47 @@ export type SandboxesByPathQuery = {
   } | null;
 };
 
+export type DraftSandboxFragment = {
+  __typename?: 'Sandbox';
+  id: string;
+  alias: string | null;
+  title: string | null;
+  insertedAt: string;
+  updatedAt: string;
+  screenshotUrl: string | null;
+  isV2: boolean;
+  isFrozen: boolean;
+  privacy: number;
+  restricted: boolean;
+  draft: boolean;
+  viewCount: number;
+  authorId: any | null;
+  lastAccessedAt: any;
+  teamId: any | null;
+  source: { __typename?: 'Source'; template: string | null };
+  customTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    iconUrl: string | null;
+  } | null;
+  forkedTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    iconUrl: string | null;
+  } | null;
+  collection: {
+    __typename?: 'Collection';
+    path: string;
+    id: any | null;
+  } | null;
+  author: { __typename?: 'User'; username: string } | null;
+  permissions: {
+    __typename?: 'SandboxProtectionSettings';
+    preventSandboxLeaving: boolean;
+    preventSandboxExport: boolean;
+  } | null;
+};
+
 export type TeamDraftsQueryVariables = Exact<{
   teamId: Scalars['UUID4'];
   authorId: InputMaybe<Scalars['UUID4']>;
@@ -4798,20 +4837,17 @@ export type TeamDraftsQuery = {
         id: string;
         alias: string | null;
         title: string | null;
-        description: string | null;
-        lastAccessedAt: any;
         insertedAt: string;
         updatedAt: string;
-        removedAt: string | null;
-        privacy: number;
-        isFrozen: boolean;
         screenshotUrl: string | null;
-        viewCount: number;
-        likeCount: number;
         isV2: boolean;
-        draft: boolean;
+        isFrozen: boolean;
+        privacy: number;
         restricted: boolean;
+        draft: boolean;
+        viewCount: number;
         authorId: any | null;
+        lastAccessedAt: any;
         teamId: any | null;
         source: { __typename?: 'Source'; template: string | null };
         customTemplate: {
@@ -4822,7 +4858,6 @@ export type TeamDraftsQuery = {
         forkedTemplate: {
           __typename?: 'Template';
           id: any | null;
-          color: string | null;
           iconUrl: string | null;
         } | null;
         collection: {

packages/app/src/app/overmind/effects/gql/dashboard/queries.ts

@@ -124,7 +124,6 @@ const SANDBOX_BY_PATH_FRAGMENT = gql`
 
     forkedTemplate {
       id
-      color
       iconUrl
     }
 
@@ -169,6 +168,54 @@ export const sandboxesByPath: Query<
   ${sidebarCollectionDashboard}
 `;
 
+const DRAFT_SANDBOX_FRAGMENT = gql`
+  fragment draftSandbox on Sandbox {
+    id
+    alias
+    title
+    insertedAt
+    updatedAt
+    screenshotUrl
+    isV2
+    isFrozen
+    privacy
+    restricted
+    draft
+    viewCount
+    authorId
+    lastAccessedAt
+
+    source {
+      template
+    }
+
+    customTemplate {
+      id
+      iconUrl
+    }
+
+    forkedTemplate {
+      id
+      iconUrl
+    }
+
+    collection {
+      path
+      id
+    }
+
+    author {
+      username
+    }
+    teamId
+
+    permissions {
+      preventSandboxLeaving
+      preventSandboxExport
+    }
+  }
+`;
+
 export const getTeamDrafts: Query<
   TeamDraftsQuery,
   TeamDraftsQueryVariables
@@ -179,12 +226,12 @@ export const getTeamDrafts: Query<
       
       team(id: $teamId) {
         drafts(authorId: $authorId) {
-          ...sandboxFragmentDashboard
+          ...draftSandbox
         }
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${DRAFT_SANDBOX_FRAGMENT}
 `;
 
 export const getCollections: Query<

packages/app/src/app/overmind/namespaces/dashboard/actions.ts

@@ -6,6 +6,7 @@ import { uniq } from 'lodash-es';
 import {
   TemplateFragmentDashboardFragment,
   SandboxFragmentDashboardFragment,
+  DraftSandboxFragment,
   RepoFragmentDashboardFragment,
   ProjectFragment,
 } from 'app/graphql/types';
@@ -192,7 +193,7 @@ export const createFolder = async (
 export const getDrafts = async ({ state, effects }: Context) => {
   const { dashboard, activeTeam } = state;
   try {
-    let sandboxes: SandboxFragmentDashboardFragment[] = [];
+    let sandboxes: (SandboxFragmentDashboardFragment | DraftSandboxFragment)[] = [];
 
     if (activeTeam) {
       const data = await effects.gql.queries.getTeamDrafts({

packages/app/src/app/overmind/namespaces/dashboard/internalActions.ts

@@ -2,6 +2,7 @@ import { Context } from 'app/overmind';
 import {
   SandboxFragmentDashboardFragment,
   SandboxByPathFragment,
+  DraftSandboxFragment,
 } from 'app/graphql/types';
 
 /**
@@ -18,14 +19,14 @@ export const changeSandboxesInState = (
      * The mutation that happens on the sandbox, make sure to return a *new* sandbox here, to make sure
      * that we can still rollback easily in the future.
      */
-    sandboxMutation: <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment>(
+    sandboxMutation: <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment>(
       sandbox: T
     ) => T;
   }
 ) => {
   const changedSandboxes: Set<ReturnType<typeof sandboxMutation>> = new Set();
 
-  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment>(
+  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment>(
     sandbox: T
   ): T => {
     changedSandboxes.add(sandbox);
@@ -109,7 +110,7 @@ export const deleteSandboxesFromState = (
     ids: string[];
   }
 ) => {
-  const sandboxFilter = <T extends SandboxFragmentDashboardFragment>(
+  const sandboxFilter = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment>(
     sandbox: T
   ): boolean => !ids.includes(sandbox.id);
 

packages/app/src/app/overmind/namespaces/dashboard/state.ts

@@ -1,6 +1,7 @@
 import {
   SandboxFragmentDashboardFragment as Sandbox,
   SandboxByPathFragment,
+  DraftSandboxFragment,
   RepoFragmentDashboardFragment as Repo,
   TemplateFragmentDashboardFragment as Template,
   TeamFragmentDashboardFragment,
@@ -17,16 +18,16 @@ import { derived } from 'overmind';
 import { DELETE_ME_COLLECTION, OrderBy } from './types';
 
 export type DashboardSandboxStructure = {
-  DRAFTS: Sandbox[] | null;
+  DRAFTS: DraftSandboxFragment[] | null;
   TEMPLATES: Template[] | null;
   DELETED: RecentlyDeletedTeamSandboxesFragment[] | null;
-  RECENT_SANDBOXES: Sandbox[] | null;
+  RECENT_SANDBOXES: (Sandbox | DraftSandboxFragment)[] | null;
   RECENT_BRANCHES: Branch[] | null;
-  SEARCH: Sandbox[] | null;
+  SEARCH: (Sandbox | DraftSandboxFragment)[] | null;
   TEMPLATE_HOME: Template[] | null;
-  SHARED: Sandbox[] | null;
+  SHARED: (Sandbox | DraftSandboxFragment)[] | null;
   ALL: {
-    [path: string]: (Sandbox | SandboxByPathFragment)[];
+    [path: string]: (Sandbox | SandboxByPathFragment | DraftSandboxFragment)[];
   } | null;
   REPOS: {
     [path: string]: {
@@ -138,7 +139,7 @@ export const state: State = {
   },
   getFilteredSandboxes: derived(
     ({ orderBy }: State) => (
-      sandboxes: Array<Sandbox | RecentlyDeletedTeamSandboxesFragment | Template['sandbox']>
+      sandboxes: Array<Sandbox | SandboxByPathFragment | DraftSandboxFragment | RecentlyDeletedTeamSandboxesFragment | Template['sandbox']>
     ) => {
       const orderField = orderBy.field;
       const orderOrder = orderBy.order;

packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx

@@ -162,7 +162,7 @@ export const SandboxListItem = ({
           </Stack>
         </Column>
         <Column span={[0, 3, 3]} as={Stack} align="center">
-          {sandbox.removedAt ? (
+          {'removedAt' in sandbox && sandbox.removedAt ? (
             <Text
               size={3}
               variant={selected ? 'body' : 'muted'}

packages/app/src/app/pages/Dashboard/types.ts

@@ -5,6 +5,7 @@ import {
   BranchFragment as Branch,
   ProjectFragment as Repository,
   RecentlyDeletedTeamSandboxesFragment,
+  DraftSandboxFragment,
 } from 'app/graphql/types';
 import { Context } from 'app/overmind';
 import {
@@ -27,7 +28,8 @@ export type DashboardSandbox = {
         prNumber?: number;
         originalGit?: RepoFragmentDashboardFragment['originalGit'];
       })
-    | RecentlyDeletedTeamSandboxesFragment;
+    | RecentlyDeletedTeamSandboxesFragment
+    | DraftSandboxFragment;
   noDrag?: boolean;
 };