Add ability to create folders (codesandbox#4016)

* create folders

* remove columns

* add template filters

Author: SaraVieira

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

@@ -1,8 +1,6 @@
 import {
   UnmakeSandboxesTemplateMutation,
   UnmakeSandboxesTemplateMutationVariables,
-  CreateCommentMutation,
-  CreateCollectionMutationVariables,
   RenameFolderMutation,
   DeleteFolderMutation,
   DeleteFolderMutationVariables,
@@ -35,6 +33,8 @@ import {
   _RenameSandboxMutationVariables,
   MakeSandboxesTemplateMutation,
   MakeSandboxesTemplateMutationVariables,
+  CreateFolderMutation,
+  CreateFolderMutationVariables,
 } from 'app/graphql/types';
 import gql from 'graphql-tag';
 import { Query } from 'overmind-graphql';
@@ -58,8 +58,8 @@ export const createTeam: Query<
 `;
 
 export const createFolder: Query<
-  CreateCommentMutation,
-  CreateCollectionMutationVariables
+  CreateFolderMutation,
+  CreateFolderMutationVariables
 > = gql`
   mutation createFolder($path: String!, $teamId: ID) {
     createCollection(path: $path, teamId: $teamId) {

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

@@ -191,6 +191,51 @@ export const getAllFolders: AsyncAction = withLoadApp(
   }
 );
 
+export const createFolder: AsyncAction<string> = async (
+  { effects, state },
+  path
+) => {
+  if (!state.dashboard.allCollections) return;
+  const split = path.split('/');
+  const oldFolders = state.dashboard.allCollections;
+  state.dashboard.allCollections = [
+    {
+      path,
+      id: 'FAKE_ID',
+      sandboxes: 0,
+      parent: split.slice(0, split.length - 1).find(a => a) || '',
+      level: split.length - 2,
+      name: split[split.length - 1],
+    },
+    ...state.dashboard.allCollections,
+  ];
+  try {
+    const { createCollection } = await effects.gql.mutations.createFolder({
+      // only way to pass, null is a value in the BE
+      // @ts-ignore
+      teamId: state.dashboard.activeTeam || undefined,
+      path,
+    });
+
+    state.dashboard.allCollections = state.dashboard.allCollections.map(
+      folder => {
+        if (folder.id === 'FAKE_ID') {
+          return {
+            ...folder,
+            id: createCollection.id,
+            path: createCollection.path,
+          };
+        }
+
+        return folder;
+      }
+    );
+  } catch {
+    state.dashboard.allCollections = [...oldFolders];
+    effects.notificationToast.error('There was a problem creating your folder');
+  }
+};
+
 export const getDrafts: AsyncAction = withLoadApp(
   async ({ state, effects }) => {
     const { dashboard } = state;
@@ -585,7 +630,9 @@ export const recoverSandboxes: AsyncAction<string[]> = async (
     await effects.gql.mutations.addSandboxToFolder({
       sandboxIds: ids,
       collectionPath: '/',
-      teamId: state.dashboard.activeTeam,
+      // only way to pass, null is a value in the BE
+      // @ts-ignore
+      teamId: state.dashboard.activeTeam || undefined,
     });
   } catch (error) {
     state.dashboard.sandboxes.DELETED = [...oldDeleted];

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

@@ -7,27 +7,37 @@ import { join, dirname } from 'path';
 import { MenuOptions } from './Menu';
 
 type Props = {
-  name: string;
-  sandboxes: number;
-  path: string;
+  name?: string;
+  sandboxes?: number;
+  path?: string;
+  newFolder?: (a: string) => void;
 };
 
-export const FolderCard = ({ name, path, sandboxes, ...props }: Props) => {
+export const FolderCard = ({
+  newFolder,
+  name,
+  path,
+  sandboxes,
+  ...props
+}: Props) => {
   const { actions } = useOvermind();
   const [edit, setEdit] = useState(false);
   const [newName, setNewName] = useState(name);
 
   const editFolderName = async e => {
     e.preventDefault();
+    if (newFolder) {
+      return newFolder(newName);
+    }
     await actions.dashboard.renameFolder({
       path,
       newPath: join(dirname(path), newName),
     });
-    setEdit(false);
+    return setEdit(false);
   };
 
   return (
-    <Link as={LinkBase} to={`/new-dashboard/all` + path}>
+    <Link as={newFolder ? Element : LinkBase} to={`/new-dashboard/all` + path}>
       <Stack
         direction="vertical"
         gap={2}
@@ -68,7 +78,7 @@ export const FolderCard = ({ name, path, sandboxes, ...props }: Props) => {
         </Stack>
         <Stack justify="space-between" align="center" marginLeft={4}>
           <Element>
-            {edit ? (
+            {edit || newFolder ? (
               <form onSubmit={editFolderName}>
                 <Input
                   value={newName}
@@ -81,10 +91,10 @@ export const FolderCard = ({ name, path, sandboxes, ...props }: Props) => {
               </Text>
             )}
             <Text marginTop={2} size={3} block variant="muted">
-              {sandboxes} {sandboxes === 1 ? 'sandbox' : 'sandboxes'}
+              {sandboxes || 0} {sandboxes === 1 ? 'sandbox' : 'sandboxes'}
             </Text>
           </Element>
-          <MenuOptions path={path} setEdit={setEdit} />
+          {path ? <MenuOptions path={path} setEdit={setEdit} /> : null}
         </Stack>
       </Stack>
     </Link>

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

@@ -1,16 +1,25 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
 import css from '@styled-system/css';
-import { Stack, Text } from '@codesandbox/components';
+import { Stack, Text, Button } from '@codesandbox/components';
 import { Breadcrumbs } from '../Breadcrumbs';
 import { Filters } from '../Filters';
 
 type Props = {
   templates?: any[];
   path?: string;
   title?: string;
+  match: any;
+  createNewFolder: () => void;
 };
 
-export const Header = ({ templates, path, title }: Props) => (
+export const HeaderComponent = ({
+  createNewFolder,
+  match,
+  templates,
+  path,
+  title,
+}: Props) => (
   <Stack
     align="center"
     justify="space-between"
@@ -30,7 +39,25 @@ export const Header = ({ templates, path, title }: Props) => (
     ) : (
       <Breadcrumbs param={path} />
     )}
-
-    {templates && <Filters possibleTemplates={templates} />}
+    <Stack gap={4} align="center">
+      {match.path.includes('all') && (
+        <Button
+          onClick={createNewFolder}
+          variant="link"
+          css={css({
+            fontSize: 3,
+            color: 'mutedForeground',
+            padding: 0,
+            width: 'auto',
+          })}
+        >
+          + New Folder
+        </Button>
+      )}
+      {templates && <Filters possibleTemplates={templates} />}
+    </Stack>
   </Stack>
 );
+
+// @ts-ignore
+export const Header = withRouter(HeaderComponent);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Element } from '@codesandbox/components';
 import { withRouter } from 'react-router-dom';
 import { useOvermind } from 'app/overmind';
 import { SandboxItem } from '../SandboxItem';
@@ -10,7 +11,11 @@ export const SandboxComponent = props => {
   } = useOvermind();
 
   if (dashboard.viewMode === 'list' || props.match.path.includes('deleted')) {
-    return <SandboxItem {...props} />;
+    return (
+      <Element style={{ gridColumn: '1/-1' }}>
+        <SandboxItem {...props} />
+      </Element>
+    );
   }
   return <SandboxCard {...props} />;
 };

packages/app/src/app/pages/NewDashboard/Content/routes/All/index.tsx

@@ -11,6 +11,7 @@ import { SkeletonCard } from '../../../Components/SandboxCard';
 
 export const AllPage = ({ match: { params }, history }) => {
   const [level, setLevel] = useState(0);
+  const [creating, setCreating] = useState(false);
   const param = params.path || '';
   const cleanParam = param.split(' ').join('');
   const {
@@ -43,6 +44,12 @@ export const AllPage = ({ match: { params }, history }) => {
     }
   }, [param, actions.dashboard, activeTeam]);
 
+  const createNewFolder = (name: string) => {
+    setCreating(false);
+    const newPath = params.path ? `/${param}/${name}` : `${param}/${name}`;
+    actions.dashboard.createFolder(newPath);
+  };
+
   const getFoldersByPath =
     allCollections &&
     allCollections.filter(
@@ -51,20 +58,21 @@ export const AllPage = ({ match: { params }, history }) => {
 
   return (
     <Element style={{ height: '100%', position: 'relative' }}>
-      <Header path={param} templates={getPossibleTemplates(allCollections)} />
+      <Header
+        path={param}
+        templates={getPossibleTemplates(allCollections)}
+        createNewFolder={() => setCreating(true)}
+      />
       {allCollections ? (
         <SandboxGrid>
+          {creating && <FolderCard key="fake" newFolder={createNewFolder} />}
           {getFoldersByPath.map(folder => (
-            <Column>
-              <FolderCard key={folder.id} {...folder} />
-            </Column>
+            <FolderCard key={folder.id} {...folder} />
           ))}
           {sandboxes.ALL &&
             sandboxes.ALL[cleanParam] &&
             sandboxes.ALL[cleanParam].map(sandbox => (
-              <Column>
-                <Sandbox key={sandbox.id} sandbox={sandbox} />
-              </Column>
+              <Sandbox key={sandbox.id} sandbox={sandbox} />
             ))}
         </SandboxGrid>
       ) : (

packages/app/src/app/pages/NewDashboard/Content/routes/Recent/SandboxesGroup.tsx

@@ -19,9 +19,7 @@ export const SandboxesGroup = ({ title, time }) => {
       </Text>
       <SandboxGrid>
         {getFilteredSandboxes(recentSandboxesByTime[time]).map(sandbox => (
-          <Column>
-            <Sandbox key={sandbox.id} sandbox={sandbox} />
-          </Column>
+          <Sandbox key={sandbox.id} sandbox={sandbox} />
         ))}
       </SandboxGrid>
     </>

packages/app/src/app/pages/NewDashboard/Content/routes/Templates/index.tsx

@@ -22,13 +22,11 @@ export const Templates = () => {
 
   return (
     <Element css={css({ position: 'relative' })}>
-      <Header title="Templates" />
+      <Header title="Templates" templates={[]} />
       {sandboxes.TEMPLATES ? (
         <SandboxGrid>
           {sandboxes.TEMPLATES.map(({ sandbox }) => (
-            <Column>
-              <Sandbox template sandbox={sandbox} key={sandbox.id} />
-            </Column>
+            <Sandbox template sandbox={sandbox} key={sandbox.id} />
           ))}
         </SandboxGrid>
       ) : (