refactor(dashboard): create slimmed-down fragment for sharedWithMeSandboxes query (#8836)

Author: tristandubbeld

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

@@ -5271,6 +5271,33 @@ export type RecentlyAccessedBranchesLegacyQuery = {
   } | null;
 };
 
+export type CollaboratorSandboxFragment = {
+  __typename?: 'Sandbox';
+  id: string;
+  alias: string | null;
+  title: string | null;
+  description: string | null;
+  updatedAt: string;
+  viewCount: number;
+  isV2: boolean;
+  draft: boolean;
+  restricted: boolean;
+  privacy: number;
+  screenshotUrl: string | null;
+  source: { __typename?: 'Source'; template: string | null };
+  customTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    iconUrl: string | null;
+  } | null;
+  author: { __typename?: 'User'; username: string } | null;
+  collection: {
+    __typename?: 'Collection';
+    path: string;
+    id: any | null;
+  } | null;
+};
+
 export type SharedWithMeSandboxesQueryVariables = Exact<{
   [key: string]: never;
 }>;
@@ -5286,43 +5313,25 @@ export type SharedWithMeSandboxesQuery = {
       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;
       restricted: boolean;
-      authorId: any | null;
-      teamId: any | null;
+      privacy: number;
+      screenshotUrl: string | null;
       source: { __typename?: 'Source'; template: string | null };
       customTemplate: {
         __typename?: 'Template';
         id: any | null;
         iconUrl: string | null;
       } | null;
-      forkedTemplate: {
-        __typename?: 'Template';
-        id: any | null;
-        color: string | null;
-        iconUrl: string | null;
-      } | null;
+      author: { __typename?: 'User'; username: string } | null;
       collection: {
         __typename?: 'Collection';
         path: string;
         id: any | null;
       } | null;
-      author: { __typename?: 'User'; username: string } | null;
-      permissions: {
-        __typename?: 'SandboxProtectionSettings';
-        preventSandboxLeaving: boolean;
-        preventSandboxExport: boolean;
-      } | null;
     }>;
   } | null;
 };

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

@@ -397,6 +397,40 @@ export const recentlyAccessedBranches: Query<
   ${branchFragment}
 `;
 
+const COLLABORATOR_SANDBOX_FRAGMENT = gql`
+  fragment collaboratorSandbox on Sandbox {
+    id
+    alias
+    title
+    description
+    updatedAt
+    viewCount
+    isV2
+    draft
+    restricted
+    privacy
+    screenshotUrl
+
+    source {
+      template
+    }
+
+    customTemplate {
+      id
+      iconUrl
+    }
+
+    author {
+      username
+    }
+
+    collection {
+      path
+      id
+    }
+  }
+`;
+
 export const sharedWithmeSandboxes: Query<
   SharedWithMeSandboxesQuery,
   SharedWithMeSandboxesQueryVariables
@@ -406,11 +440,11 @@ export const sharedWithmeSandboxes: Query<
       id
       
       collaboratorSandboxes {
-        ...sandboxFragmentDashboard
+        ...collaboratorSandbox
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${COLLABORATOR_SANDBOX_FRAGMENT}
 `;
 
 export const getTeam: Query<GetTeamQuery, GetTeamQueryVariables> = gql`

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

@@ -28,18 +28,18 @@ import {
   sortByLastAccessed,
 } from './utils';
 
-import { OrderBy, PageTypes, sandboxesTypes } from './types';
+import { OrderBy, PageTypes, sandboxesTypes, DashboardSandboxFragment } from './types';
 import * as internalActions from './internalActions';
 
 // Type guards to check if sandbox has specific properties
 function hasIsFrozen(
-  sandbox: SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment | SearchTeamSandboxFragment
+  sandbox: DashboardSandboxFragment
 ): sandbox is SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment {
   return 'isFrozen' in sandbox;
 }
 
 function hasPermissions(
-  sandbox: SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment | SearchTeamSandboxFragment
+  sandbox: DashboardSandboxFragment
 ): sandbox is SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment {
   return 'permissions' in sandbox;
 }

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

@@ -1,10 +1,5 @@
 import { Context } from 'app/overmind';
-import {
-  SandboxFragmentDashboardFragment,
-  SandboxByPathFragment,
-  DraftSandboxFragment,
-  SearchTeamSandboxFragment,
-} from 'app/graphql/types';
+import { DashboardSandboxFragment } from './types';
 
 /**
  * Change sandbox frozen in state and returns the sandboxes that have changed in their old state
@@ -20,14 +15,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 | DraftSandboxFragment | SearchTeamSandboxFragment>(
+    sandboxMutation: <T extends DashboardSandboxFragment>(
       sandbox: T
     ) => T;
   }
 ) => {
   const changedSandboxes: Set<ReturnType<typeof sandboxMutation>> = new Set();
 
-  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment | SearchTeamSandboxFragment>(
+  const doMutateSandbox = <T extends DashboardSandboxFragment>(
     sandbox: T
   ): T => {
     changedSandboxes.add(sandbox);
@@ -111,7 +106,7 @@ export const deleteSandboxesFromState = (
     ids: string[];
   }
 ) => {
-  const sandboxFilter = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment | SearchTeamSandboxFragment>(
+  const sandboxFilter = <T extends DashboardSandboxFragment>(
     sandbox: T
   ): boolean => !ids.includes(sandbox.id);
 

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

@@ -10,6 +10,7 @@ import {
   ProjectWithBranchesFragment as RepositoryWithBranches,
   RecentlyDeletedTeamSandboxesFragment,
   SearchTeamSandboxFragment,
+  CollaboratorSandboxFragment,
 } from 'app/graphql/types';
 import isSameWeek from 'date-fns/isSameWeek';
 import { sortBy } from 'lodash-es';
@@ -26,7 +27,7 @@ export type DashboardSandboxStructure = {
   RECENT_BRANCHES: Branch[] | null;
   SEARCH: (Sandbox | DraftSandboxFragment | SearchTeamSandboxFragment)[] | null;
   TEMPLATE_HOME: Template[] | null;
-  SHARED: (Sandbox | DraftSandboxFragment)[] | null;
+  SHARED: (Sandbox | DraftSandboxFragment | CollaboratorSandboxFragment)[] | null;
   ALL: {
     [path: string]: (Sandbox | SandboxByPathFragment | DraftSandboxFragment)[];
   } | null;
@@ -51,7 +52,7 @@ export type State = {
   viewMode: 'grid' | 'list';
   orderBy: OrderBy;
   getFilteredSandboxes: (
-    sandboxes: Array<Sandbox | SandboxByPathFragment | RecentlyDeletedTeamSandboxesFragment | Repo | Template['sandbox'] | SearchTeamSandboxFragment>
+    sandboxes: Array<Sandbox | SandboxByPathFragment | RecentlyDeletedTeamSandboxesFragment | Repo | Template['sandbox'] | SearchTeamSandboxFragment | CollaboratorSandboxFragment>
   ) => Sandbox[];
   deletedSandboxesByTime: {
     week: RecentlyDeletedTeamSandboxesFragment[];
@@ -140,7 +141,7 @@ export const state: State = {
   },
   getFilteredSandboxes: derived(
     ({ orderBy }: State) => (
-      sandboxes: Array<Sandbox | SandboxByPathFragment | DraftSandboxFragment | RecentlyDeletedTeamSandboxesFragment | Template['sandbox'] | SearchTeamSandboxFragment>
+      sandboxes: Array<Sandbox | SandboxByPathFragment | DraftSandboxFragment | RecentlyDeletedTeamSandboxesFragment | Template['sandbox'] | SearchTeamSandboxFragment | CollaboratorSandboxFragment>
     ) => {
       const orderField = orderBy.field;
       const orderOrder = orderBy.order;

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

@@ -1,4 +1,18 @@
-import { SidebarCollectionDashboardFragment as Collection } from 'app/graphql/types';
+import {
+  SidebarCollectionDashboardFragment as Collection,
+  SandboxFragmentDashboardFragment,
+  SandboxByPathFragment,
+  DraftSandboxFragment,
+  SearchTeamSandboxFragment,
+  CollaboratorSandboxFragment,
+} from 'app/graphql/types';
+
+export type DashboardSandboxFragment =
+  | SandboxFragmentDashboardFragment
+  | SandboxByPathFragment
+  | DraftSandboxFragment
+  | SearchTeamSandboxFragment
+  | CollaboratorSandboxFragment;
 
 export type PageTypes =
   | 'search'