refactor: remove fields from deleted sandboxes query and fix type errors (#8829)

* refactor: remove irrelevant fields from query and fix type errors

* fix: recover Stats component

* fix: runtime and typechecks for potentially undefined properties

* chore: rename fragment to not include fragment twice

* fix(dashboard): use type guard instead of type assertion in search items filter

* fix(dashboard): support filtering deleted sandboxes with reduced field set

* fix: handle null/undefined fields for deleted sandboxes

Author: tristandubbeld

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

@@ -4636,6 +4636,20 @@ export type JoinEligibleWorkspaceMutation = {
   joinEligibleWorkspace: { __typename?: 'Team'; id: any };
 };
 
+export type RecentlyDeletedTeamSandboxesFragment = {
+  __typename?: 'Sandbox';
+  id: string;
+  alias: string | null;
+  isV2: boolean;
+  removedAt: string | null;
+  title: string | null;
+  collection: {
+    __typename?: 'Collection';
+    id: any | null;
+    path: string;
+  } | null;
+};
+
 export type RecentlyDeletedTeamSandboxesQueryVariables = Exact<{
   teamId: Scalars['UUID4'];
 }>;
@@ -4651,44 +4665,13 @@ export type RecentlyDeletedTeamSandboxesQuery = {
         __typename?: 'Sandbox';
         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;
-        restricted: boolean;
-        authorId: any | null;
-        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;
-          color: string | null;
-          iconUrl: string | null;
-        } | null;
+        removedAt: string | null;
+        title: string | null;
         collection: {
           __typename?: 'Collection';
-          path: string;
           id: any | null;
-        } | null;
-        author: { __typename?: 'User'; username: string } | null;
-        permissions: {
-          __typename?: 'SandboxProtectionSettings';
-          preventSandboxLeaving: boolean;
-          preventSandboxExport: boolean;
+          path: string;
         } | null;
       }>;
     } | null;

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

@@ -60,6 +60,23 @@ import {
   githubRepoFragment,
 } from './fragments';
 
+const RECENTLY_DELETED_TEAM_SANDBOXES_FRAGMENT = gql`
+fragment recentlyDeletedTeamSandboxes on Sandbox {
+  id
+
+  alias
+
+  collection {
+    id
+    path
+  }
+
+  isV2
+  removedAt
+  title
+}
+`;
+
 export const deletedTeamSandboxes: Query<
   RecentlyDeletedTeamSandboxesQuery,
   RecentlyDeletedTeamSandboxesQueryVariables
@@ -73,12 +90,12 @@ export const deletedTeamSandboxes: Query<
           showDeleted: true
           orderBy: { field: "updated_at", direction: DESC }
         ) {
-          ...sandboxFragmentDashboard
+          ...recentlyDeletedTeamSandboxes
         }
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${RECENTLY_DELETED_TEAM_SANDBOXES_FRAGMENT}
 `;
 
 export const sandboxesByPath: Query<

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

@@ -151,6 +151,13 @@ export const deleteSandboxesFromState = (
             repoSandbox.sandboxes = newSandboxes;
           }
         });
+      } else if (type === 'DELETED') {
+        const newSandboxes = sandboxStructure[type].filter(
+          sandbox => !ids.includes(sandbox.id)
+        );
+        if (newSandboxes.length !== sandboxStructure[type].length) {
+          dashboard.sandboxes[type] = newSandboxes;
+        }
       } else if (type !== 'RECENT_BRANCHES') {
         const newSandboxes = sandboxStructure[type].filter(sandboxFilter);
         if (newSandboxes.length !== sandboxStructure[type].length) {

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

@@ -6,6 +6,7 @@ import {
   BranchFragment as Branch,
   ProjectFragment as Repository,
   ProjectWithBranchesFragment as RepositoryWithBranches,
+  RecentlyDeletedTeamSandboxesFragment,
 } from 'app/graphql/types';
 import isSameWeek from 'date-fns/isSameWeek';
 import { sortBy } from 'lodash-es';
@@ -17,7 +18,7 @@ import { DELETE_ME_COLLECTION, OrderBy } from './types';
 export type DashboardSandboxStructure = {
   DRAFTS: Sandbox[] | null;
   TEMPLATES: Template[] | null;
-  DELETED: Sandbox[] | null;
+  DELETED: RecentlyDeletedTeamSandboxesFragment[] | null;
   RECENT_SANDBOXES: Sandbox[] | null;
   RECENT_BRANCHES: Branch[] | null;
   SEARCH: Sandbox[] | null;
@@ -47,11 +48,11 @@ export type State = {
   viewMode: 'grid' | 'list';
   orderBy: OrderBy;
   getFilteredSandboxes: (
-    sandboxes: Array<Sandbox | Repo | Template['sandbox']>
+    sandboxes: Array<Sandbox | RecentlyDeletedTeamSandboxesFragment | Repo | Template['sandbox']>
   ) => Sandbox[];
   deletedSandboxesByTime: {
-    week: Sandbox[];
-    older: Sandbox[];
+    week: RecentlyDeletedTeamSandboxesFragment[];
+    older: RecentlyDeletedTeamSandboxesFragment[];
   };
   contributions: Branch[] | null;
   /**
@@ -104,8 +105,7 @@ export const state: State = {
         week: [],
         older: [],
       };
-    const noTemplateSandboxes = deletedSandboxes.filter(s => !s.customTemplate);
-    const timeSandboxes = noTemplateSandboxes.reduce(
+    const timeSandboxes = deletedSandboxes.reduce(
       (accumulator, currentValue) => {
         if (!currentValue.removedAt) return accumulator;
         if (isSameWeek(new Date(currentValue.removedAt), new Date())) {
@@ -137,7 +137,7 @@ export const state: State = {
   },
   getFilteredSandboxes: derived(
     ({ orderBy }: State) => (
-      sandboxes: Array<Sandbox | Template['sandbox']>
+      sandboxes: Array<Sandbox | RecentlyDeletedTeamSandboxesFragment | Template['sandbox']>
     ) => {
       const orderField = orderBy.field;
       const orderOrder = orderBy.order;
@@ -156,7 +156,7 @@ export const state: State = {
           return field.toLowerCase();
         }
 
-        if (orderField === 'views') {
+        if ('viewCount' in sandbox && orderField === 'views') {
           return sandbox.viewCount;
         }
 

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

@@ -1,19 +1,20 @@
 import { Icon, Stack, Text } from '@codesandbox/components';
-import { SandboxFragmentDashboardFragment as Sandbox } from 'app/graphql/types';
 import React from 'react';
 
 export interface SandboxBadgeProps {
-  sandbox: Sandbox;
-  restricted: boolean;
+  isSandboxV2: boolean;
+  isSandboxTemplate: boolean;
+  isSandboxRestricted: boolean;
 }
 
 export const SandboxBadge: React.FC<SandboxBadgeProps> = ({
-  sandbox,
-  restricted,
+  isSandboxV2,
+  isSandboxTemplate,
+  isSandboxRestricted,
 }) => {
-  const isDevbox = sandbox.isV2;
-  const isRestricted = restricted;
-  const isTemplate = !!sandbox.customTemplate;
+  const isDevbox = isSandboxV2;
+  const isRestricted = isSandboxRestricted;
+  const isTemplate = isSandboxTemplate;
 
   const boxIcon = isDevbox ? 'server' : 'boxDevbox';
   let boxTypeLabel = isDevbox ? 'Devbox' : 'Sandbox';

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

@@ -73,9 +73,11 @@ const SandboxTitle: React.FC<SandboxTitleProps> = React.memo(
           </form>
         ) : (
           <Stack gap={3} align="flex-start" css={{ overflow: 'hidden' }}>
-            <Element css={{ flexShrink: 0 }}>
-              <TemplateIcon width="16" height="16" />
-            </Element>
+            {TemplateIcon && (
+              <Element css={{ flexShrink: 0 }}>
+                <TemplateIcon width="16" height="16" />
+              </Element>
+            )}
 
             {interaction === 'button' ? (
               <InteractiveOverlay.Button
@@ -160,13 +162,17 @@ const SandboxStats: React.FC<SandboxStatsProps> = React.memo(
         className="sandbox-stats"
       >
         <Stack gap={2} align="center">
-          <PrivacyIcon />
+          {PrivacyIcon && <PrivacyIcon />}
           {isFrozen && (
             <Icon size={16} title={`Protected ${boxType}`} name="frozen" />
           )}
           {noDrag ? null : timeAgoText}
         </Stack>
-        <SandboxBadge sandbox={sandbox} restricted={restricted} />
+        <SandboxBadge
+          isSandboxV2={sandbox.isV2}
+          isSandboxTemplate={('customTemplate' in sandbox && !!sandbox.customTemplate)}
+          isSandboxRestricted={restricted}
+        />
       </Stack>
     );
   }
@@ -297,7 +303,7 @@ export const SandboxCard = ({
           <SandboxStats
             noDrag={noDrag}
             timeAgo={timeAgo}
-            isFrozen={sandbox.isFrozen && !sandbox.customTemplate}
+            isFrozen={('isFrozen' in sandbox && sandbox.isFrozen) && !('customTemplate' in sandbox && !!sandbox.customTemplate)}
             PrivacyIcon={PrivacyIcon}
             restricted={restricted}
             sandbox={sandbox}

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

@@ -21,7 +21,6 @@ export const SandboxListItem = ({
   sandboxLocation,
   username,
   timeAgo,
-  viewCount,
   TemplateIcon,
   PrivacyIcon,
   screenshotUrl,
@@ -115,7 +114,9 @@ export const SandboxListItem = ({
                   : null]: `url(${screenshotUrl})`,
               }}
             >
-              {screenshotUrl ? null : <TemplateIcon width="16" height="16" />}
+              {!screenshotUrl && TemplateIcon && (
+                <TemplateIcon width="16" height="16" />
+              )}
             </Stack>
             <Element css={{ overflow: 'hidden' }}>
               {editing ? (
@@ -131,7 +132,7 @@ export const SandboxListItem = ({
               ) : (
                 <Tooltip label={sandboxTitle}>
                   <Stack gap={1} align="center">
-                    <PrivacyIcon />
+                    {PrivacyIcon ? <PrivacyIcon /> : null}
                     <Text
                       size={3}
                       weight="medium"
@@ -151,7 +152,13 @@ export const SandboxListItem = ({
         {/* Column span 0 on mobile because the Grid is bugged */}
         <Column span={[0, 2, 2]}>
           <Stack align="center">
-            <SandboxBadge sandbox={sandbox} restricted={restricted} />
+            <SandboxBadge
+              isSandboxV2={sandbox.isV2}
+              isSandboxTemplate={
+                'customTemplate' in sandbox && !!sandbox.customTemplate
+              }
+              isSandboxRestricted={restricted}
+            />
           </Stack>
         </Column>
         <Column span={[0, 3, 3]} as={Stack} align="center">