Fix hashes in folder names on dashboard (#2096)

* Fix hashes in folder names on dashboard

Fixes #2080

* Fix nested folders

* Remove log

* Fix types

* Fix compile

* Fix typecheck

Author: CompuIves

packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/Folders.js

@@ -7,6 +7,10 @@ import { Folder, FoldersWrapper } from './elements';
 
 const Folders = ({ loading, me, history, match: { params }, teamId }) => {
   const getPath = name => (params.path ? `${params.path}/${name}` : '/' + name);
+  const getURL = name =>
+    params.path
+      ? `${params.path}/${encodeURIComponent(name)}`
+      : '/' + encodeURIComponent(name);
 
   if (loading) return null;
 
@@ -30,6 +34,7 @@ const Folders = ({ loading, me, history, match: { params }, teamId }) => {
               basePath={window.location.pathname}
               teamId={teamId}
               path={getPath(name)}
+              url={getURL(name)}
               folders={folders}
               foldersByPath={foldersByPath}
               name={name}

packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/index.js

@@ -12,7 +12,7 @@ import getMostUsedTemplate from '../../../utils/get-most-used-template';
 import { PATHED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
 
 const PathedSandboxes = props => {
-  const path = '/' + (props.match.params.path || '');
+  const path = '/' + decodeURIComponent(props.match.params.path || '');
   const teamId = props.match.params.teamId;
 
   document.title = `${basename(path) || 'Dashboard'} - CodeSandbox`;

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/CreateFolderEntry.js renamed to packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/CreateFolderEntry.tsx

@@ -17,7 +17,15 @@ import {
   CREATE_FOLDER_MUTATION,
 } from '../../../queries';
 
-export default ({ basePath, teamId, noFocus, close, depth }) => {
+interface Props {
+  basePath: string;
+  teamId: string | undefined;
+  close: () => void;
+  depth: number;
+  noFocus?: boolean;
+}
+
+export default ({ basePath, teamId, noFocus, close, depth }: Props) => {
   let input;
   return (
     <Mutation mutation={CREATE_FOLDER_MUTATION}>
@@ -42,12 +50,12 @@ export default ({ basePath, teamId, noFocus, close, depth }) => {
                 },
               },
               update: (proxy, { data: { createCollection } }) => {
-                const variables = {};
+                const variables: { teamId?: string } = {};
                 if (teamId) {
                   variables.teamId = teamId;
                 }
                 // Read the data from our cache for this query.
-                const d = proxy.readQuery({
+                const d = proxy.readQuery<{ me: any }>({
                   query: PATHED_SANDBOXES_FOLDER_QUERY,
                   variables,
                 });
@@ -74,7 +82,6 @@ export default ({ basePath, teamId, noFocus, close, depth }) => {
               <AddFolderIcon />
             </IconContainer>{' '}
             <Input
-              small
               placeholder="Folder Name"
               style={{ marginRight: '1rem' }}
               onBlur={close}

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.js renamed to packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import ChevronRight from 'react-icons/lib/md/chevron-right';
 
-export const Container = styled(NavLink)`
+export const Container = styled(NavLink)<{ depth?: number }>`
   transition: 0.25s ease all;
   display: flex;
   align-items: center;
@@ -38,7 +38,7 @@ export const IconContainer = styled.div`
   font-size: 1.125rem;
 `;
 
-export const AnimatedChevron = styled(ChevronRight)`
+export const AnimatedChevron = styled(ChevronRight)<{ open?: boolean }>`
   transition: 0.25s ease transform;
   transform: rotate(${props => (props.open ? 90 : 0)}deg);
   margin-right: 0.25rem;

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.js renamed to packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.tsx

@@ -39,9 +39,39 @@ import {
   RENAME_FOLDER_MUTATION,
 } from '../../../queries';
 
+type Props = {
+  name: string;
+  path: string;
+  url: string;
+  folders: { path: string }[];
+  foldersByPath: { [path: string]: string };
+  depth: number;
+  toToggle?: boolean;
+  allowCreate?: boolean;
+  open?: boolean;
+  basePath: string;
+  teamId: string;
+  onSelect: (params: { teamId: string; path: string }) => void;
+  currentPath: string;
+  currentTeamId: string;
+
+  // dnd handlers
+  canDrop?: boolean;
+  isOver?: boolean;
+  isDragging?: boolean;
+  connectDropTarget?: any;
+  connectDragSource?: any;
+};
+
+type State = {
+  open: boolean;
+  creatingDirectory: boolean;
+  renamingDirectory: boolean;
+};
+
 // eslint-disable-next-line import/no-mutable-exports
-let DropFolderEntry = null;
-class FolderEntry extends React.Component {
+let DropFolderEntry: React.ComponentClass<Props, State> = null;
+class FolderEntry extends React.Component<Props, State> {
   state = {
     open: this.props.open,
     creatingDirectory: false,
@@ -92,6 +122,7 @@ class FolderEntry extends React.Component {
     const {
       name,
       path,
+      url,
       folders,
       foldersByPath,
       depth,
@@ -109,7 +140,6 @@ class FolderEntry extends React.Component {
       currentTeamId,
     } = this.props;
 
-    const url = `${basePath}${path}`;
     const children = getDirectChildren(path, folders);
 
     const menuItems = [
@@ -138,7 +168,7 @@ class FolderEntry extends React.Component {
               },
             ],
             update: (cache, { data: { deleteCollection } }) => {
-              const variables = {};
+              const variables: { teamId?: string } = {};
               if (teamId) {
                 variables.teamId = teamId;
               }
@@ -189,7 +219,8 @@ class FolderEntry extends React.Component {
                 backgroundColor:
                   isOver && canDrop ? 'rgba(0, 0, 0, 0.3)' : undefined,
 
-                ...(currentPath === path && currentTeamId === teamId
+                ...(decodeURIComponent(currentPath) === path &&
+                currentTeamId === teamId
                   ? {
                       borderColor: theme.secondary(),
                       color: 'white',
@@ -230,12 +261,12 @@ class FolderEntry extends React.Component {
                           newTeamId: teamId,
                         },
                         update: (cache, { data: { renameCollection } }) => {
-                          const variables = {};
+                          const variables: { teamId?: string } = {};
                           if (teamId) {
                             variables.teamId = teamId;
                           }
 
-                          const cacheData = cache.readQuery({
+                          const cacheData = cache.readQuery<{ me: any }>({
                             query: PATHED_SANDBOXES_FOLDER_QUERY,
                             variables,
                           });
@@ -306,12 +337,14 @@ class FolderEntry extends React.Component {
           >
             {Array.from(children)
               .sort()
-              .map(childName => {
+              .map((childName: string) => {
                 const childPath = join(path, childName);
+                const childUrl = join(url, encodeURIComponent(childName));
 
                 return (
                   <DropFolderEntry
                     path={childPath}
+                    url={childUrl}
                     basePath={basePath}
                     teamId={teamId}
                     folders={folders}
@@ -361,6 +394,6 @@ DropFolderEntry = inject('store', 'signals')(
   DropTarget(['SANDBOX', 'FOLDER'], entryTarget, collectTarget)(
     DragSource('FOLDER', entrySource, collectSource)(observer(FolderEntry))
   )
-);
+) as any;
 
 export default DropFolderEntry;

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/index.js

@@ -103,12 +103,14 @@ class SandboxesItem extends React.Component {
                     .sort()
                     .map(name => {
                       const path = '/' + name;
+                      const url = basePath + '/' + encodeURIComponent(name);
                       return (
                         <FolderEntry
                           key={path}
                           basePath={basePath}
                           teamId={teamId}
                           path={path}
+                          url={url}
                           folders={folders}
                           foldersByPath={foldersByPath}
                           name={name}

packages/app/src/app/pages/Dashboard/utils/get-direct-children.js

@@ -9,7 +9,7 @@ function addSlash(path: string) {
 export default function getDirectChildren(
   currentPath: string,
   children: Array<{ path: string }>
-) {
+): Set<string> {
   const usedChildren = new Set();
 
   children.forEach(c => {