add sandbox count for folder (codesandbox#4012)

Author: SaraVieira

packages/app/src/app/graphql/schema.graphql

@@ -1,5 +1,5 @@
 # source: https://codesandbox.io/api/graphql
-# timestamp: Tue Apr 28 2020 12:51:15 GMT+0200 (Central European Summer Time)
+# timestamp: Wed Apr 29 2020 14:46:25 GMT+0200 (Central European Summer Time)
 
 schema {
   query: RootQuery

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

@@ -1346,7 +1346,9 @@ export type AllCollectionsQuery = { __typename?: 'RootQueryType' } & {
   me: Maybe<
     { __typename?: 'CurrentUser' } & {
       collections: Array<
-        { __typename?: 'Collection' } & SidebarCollectionDashboardFragment
+        { __typename?: 'Collection' } & {
+          sandboxes: Array<{ __typename?: 'Sandbox' } & Pick<Sandbox, 'id'>>;
+        } & SidebarCollectionDashboardFragment
       >;
     }
   >;

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

@@ -74,6 +74,9 @@ export const getCollections: Query<
     me {
       collections(teamId: $teamId) {
         ...sidebarCollectionDashboard
+        sandboxes {
+          id
+        }
       }
     }
   }

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

@@ -161,6 +161,7 @@ export const getAllFolders: AsyncAction = withLoadApp(
         const split = collection.path.split('/');
         return {
           ...collection,
+          sandboxes: collection.sandboxes.length,
           parent: split.slice(0, split.length - 1).find(a => a) || '',
           level: split.length - 2,
           name: split[split.length - 1],
@@ -170,12 +171,17 @@ export const getAllFolders: AsyncAction = withLoadApp(
       state.dashboard.allCollections = [
         {
           id: 'drafts-fake-id',
+          sandboxes: (
+            data.me.collections.find(folder => folder.path === '/') || {
+              sandboxes: [],
+            }
+          ).sandboxes.length,
           parent: '',
           name: 'Drafts',
           level: 0,
           path: '/drafts',
         },
-        ...collectionsByLevel.filter(c => c.id),
+        ...collectionsByLevel.filter(c => c.id && c.name),
       ];
     } catch {
       effects.notificationToast.error(

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

@@ -19,6 +19,7 @@ export type DELETE_ME_COLLECTION = Collection & {
   name: string;
   level: number;
   parent: string;
+  sandboxes: number;
 };
 
 export enum sandboxesTypes {

packages/app/src/app/pages/NewDashboard/Components/Filters/ViewOptions/index.tsx

@@ -35,6 +35,7 @@ export const ViewOptions: FunctionComponent = () => {
         <Menu.List>
           {STATES.map(viewState => (
             <Menu.Item
+              key={viewState.key}
               field={viewState.key}
               onSelect={() => viewModeChanged({ mode: viewState.key })}
             >

packages/app/src/app/pages/NewDashboard/Components/FolderCard/index.tsx

@@ -1,17 +1,18 @@
 import React, { useState } from 'react';
 import { Link as LinkBase } from 'react-router-dom';
-import { Stack, Text, Input, Link } from '@codesandbox/components';
+import { Stack, Text, Input, Link, Element } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
 import { join, dirname } from 'path';
 import { MenuOptions } from './Menu';
 
 type Props = {
   name: string;
+  sandboxes: number;
   path: string;
 };
 
-export const FolderCard = ({ name, path, ...props }: Props) => {
+export const FolderCard = ({ name, path, sandboxes, ...props }: Props) => {
   const { actions } = useOvermind();
   const [edit, setEdit] = useState(false);
   const [newName, setNewName] = useState(name);
@@ -66,18 +67,23 @@ export const FolderCard = ({ name, path, ...props }: Props) => {
           </svg>
         </Stack>
         <Stack justify="space-between" align="center" marginLeft={4}>
-          {edit ? (
-            <form onSubmit={editFolderName}>
-              <Input
-                value={newName}
-                onChange={e => setNewName(e.target.value)}
-              />
-            </form>
-          ) : (
-            <Text size={3} weight="medium" paddingTop={2}>
-              {name}
+          <Element>
+            {edit ? (
+              <form onSubmit={editFolderName}>
+                <Input
+                  value={newName}
+                  onChange={e => setNewName(e.target.value)}
+                />
+              </form>
+            ) : (
+              <Text size={3} weight="medium" paddingTop={2}>
+                {name}
+              </Text>
+            )}
+            <Text marginTop={2} size={3} block variant="muted">
+              {sandboxes} {sandboxes === 1 ? 'sandbox' : 'sandboxes'}
             </Text>
-          )}
+          </Element>
           <MenuOptions path={path} setEdit={setEdit} />
         </Stack>
       </Stack>