Open folder on drag over it / Ignore thumbnail cache files (codesandbox#2951)

* refactor

* fix types

* add more types

* support drop folders

* ignore system file

* prevent drag inside children folder

* validation

* Apply discard changes

* fix types

* fix ts

* more type fixing


Co-authored-by: Christian Alfoni <[email protected]>
Co-authored-by: Sara Vieira <[email protected]>

Author: 3 people

README.md

@@ -251,4 +251,5 @@ Thanks goes to these wonderful people
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->

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

@@ -402,7 +402,7 @@ export const deletedUploadedFile: AsyncAction<{
 });
 
 export const filesUploaded: AsyncAction<{
-  files: any[];
+  files: { [k: string]: { dataURI: string; type: string } };
   directoryShortid: string;
 }> = withOwnedSandbox(
   async ({ state, effects, actions }, { files, directoryShortid }) => {
@@ -420,7 +420,7 @@ export const filesUploaded: AsyncAction<{
         }
       );
 
-      actions.files.massCreateModules({
+      await actions.files.massCreateModules({
         modules,
         directories,
         directoryShortid,

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

@@ -60,7 +60,7 @@ export const recoverFiles: Action = ({ effects, actions, state }) => {
 
 export const uploadFiles: AsyncAction<
   {
-    files: any[];
+    files: { [k: string]: { dataURI: string; type: string } };
     directoryShortid: string;
   },
   {

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.tsx

@@ -1,4 +1,4 @@
-import { Module, Directory } from '@codesandbox/common/lib/types';
+import { Directory, Module } from '@codesandbox/common/lib/types';
 import { useOvermind } from 'app/overmind';
 // eslint-disable-next-line import/extensions
 import getType from 'app/utils/get-type.ts';
@@ -8,18 +8,18 @@ import Entry from '../Entry';
 
 interface IModuleEntryProps {
   module: Module;
-  setCurrentModule: (id: string) => void;
-  markTabsNotDirty: () => void;
-  depth: number;
-  renameModule: (title: string, moduleShortid: string) => void;
-  deleteEntry: (shortid: string, title: string) => void;
-  discardModuleChanges: (shortid: string) => void;
-  getModulePath: (
+  setCurrentModule?: (id: string) => void;
+  markTabsNotDirty?: () => void;
+  depth?: number;
+  renameModule?: (title: string, moduleShortid: string) => void;
+  deleteEntry?: (shortid: string, title: string) => void;
+  discardModuleChanges?: (shortid: string, title: string) => void;
+  getModulePath?: (
     modules: Module[],
     directories: Directory[],
     id: string
   ) => string;
-  renameValidator: (id: string, title: string) => string | false | null;
+  renameValidator?: (id: string, title: string) => string | false | null;
 }
 
 const ModuleEntry: React.FC<IModuleEntryProps> = ({

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/index.tsx

@@ -1,26 +1,27 @@
 import { HIDDEN_DIRECTORIES } from '@codesandbox/common/lib/templates/constants/files';
-import { Module, Directory } from '@codesandbox/common/lib/types';
+import { Directory, Module } from '@codesandbox/common/lib/types';
 import { useOvermind } from 'app/overmind';
 import { sortBy } from 'lodash-es';
 import * as React from 'react';
-import DirectoryEntry from '..';
+
 import ModuleEntry from './ModuleEntry';
+import DirectoryEntry from '..';
 
 interface IDirectoryChildrenProps {
-  depth: number;
-  renameModule: (title: string, moduleShortid: string) => void;
-  setCurrentModule: (id: string) => void;
-  parentShortid: string;
-  deleteEntry: (shortid: string, title: string) => void;
-  isInProjectView: boolean;
-  markTabsNotDirty: () => void;
-  discardModuleChanges: (shortid: string) => void;
-  getModulePath: (
+  depth?: number;
+  renameModule?: (title: string, moduleShortid: string) => void;
+  setCurrentModule?: (id: string) => void;
+  parentShortid?: string;
+  deleteEntry?: (shortid: string, title: string) => void;
+  isInProjectView?: boolean;
+  markTabsNotDirty?: () => void;
+  discardModuleChanges: (moduleShortid: string, moduleName: string) => void;
+  getModulePath?: (
     modules: Module[],
     directories: Directory[],
     id: string
   ) => string;
-  renameValidator: (id: string, title: string) => string | false | null;
+  renameValidator?: (id: string, title: string) => string | false | null;
 }
 
 const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
@@ -36,10 +37,10 @@ const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
   renameValidator,
 }) => {
   const {
-    state: { isLoggedIn, editor: editorState },
-    actions: { files, editor },
+    state: {
+      editor: { currentSandbox, mainModule, currentModuleShortid },
+    },
   } = useOvermind();
-  const { currentSandbox, mainModule, currentModuleShortid } = editorState;
 
   const {
     id: sandboxId,
@@ -63,8 +64,6 @@ const DirectoryChildren: React.FC<IDirectoryChildrenProps> = ({
             key={dir.id}
             siblings={[...directories, ...modules]}
             depth={depth + 1}
-            signals={{ files, editor }}
-            store={{ editor: editorState, isLoggedIn }}
             id={dir.id}
             shortid={dir.shortid}
             title={dir.title}

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx

@@ -1,6 +1,6 @@
 import theme from '@codesandbox/common/lib/theme';
+import { Directory, Module } from '@codesandbox/common/lib/types';
 import { ContextMenu, Item } from 'app/components/ContextMenu';
-import { Module, Directory } from '@codesandbox/common/lib/types';
 import React, { useState } from 'react';
 import { DragSource } from 'react-dnd';
 import EditIcon from 'react-icons/lib/go/pencil';
@@ -18,33 +18,37 @@ import EntryTitle from './EntryTitle';
 import { EntryTitleInput } from './EntryTitleInput';
 
 interface IEntryProps {
-  renameValidator: (id: string, title: string) => string | false | null;
-  shortid: string;
+  renameValidator?: (id: string, title: string) => string | false | null;
+  shortid?: string;
   id: string;
-  title: string;
+  title?: string;
   rename?: (shortid: string, title: string) => void;
-  deleteEntry: (shortid: string, title: string) => void;
-  depth: number;
-  type: string;
-  active: boolean;
-  discardModuleChanges: (shortid: string, title: string) => void;
-  setCurrentModule: (id: string) => void;
-  connectDragSource: (node: JSX.Element) => JSX.Element;
-  onCreateDirectoryClick: () => boolean | void;
-  onCreateModuleClick: () => boolean | void;
-  onUploadFileClick: () => boolean | void;
-  onClick: () => void;
-  markTabsNotDirty: () => void;
+  deleteEntry?: (shortid: string, title: string) => void;
+  depth?: number;
+  root?: boolean;
+  isOpen?: boolean;
+  hasChildren?: boolean;
+  closeTree?: () => void;
+  type?: string;
+  active?: boolean;
+  discardModuleChanges?: (shortid: string, title: string) => void;
+  setCurrentModule?: (id: string) => void;
+  connectDragSource?: (node: JSX.Element) => JSX.Element;
+  onCreateDirectoryClick?: () => boolean | void;
+  onCreateModuleClick?: () => boolean | void;
+  onUploadFileClick?: () => boolean | void;
+  onClick?: () => void;
+  markTabsNotDirty?: () => void;
   onRenameCancel?: () => void;
-  getModulePath: (
+  getModulePath?: (
     modules: Module[],
     directories: Directory[],
     id: string
   ) => string;
-  isNotSynced: boolean;
-  isMainModule: boolean;
-  moduleHasError: boolean;
-  rightColors: string[];
+  isNotSynced?: boolean;
+  isMainModule?: boolean;
+  moduleHasError?: boolean;
+  rightColors?: string[];
   state?: string;
 }
 

…rkspace/Files/DirectoryEntry/elements.js …kspace/Files/DirectoryEntry/elements.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/elements.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/elements.tsx

@@ -4,7 +4,7 @@ export const EntryContainer = styled.div`
   position: relative;
 `;
 
-export const Overlay = styled.div`
+export const Overlay = styled.div<{ isOver: boolean }>`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -14,7 +14,7 @@ export const Overlay = styled.div`
   display: ${props => (props.isOver ? 'block' : 'none')};
 `;
 
-export const Opener = styled.div`
+export const Opener = styled.div<{ open: boolean }>`
   height: ${props => (props.open ? '100%' : '0px')};
   overflow: hidden;
 `;