Fix URKL encoding hellscape; closes #2664 closes #2663

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -61,7 +61,7 @@ export default () => {
         setLoading(true);
         clearFlashes('files:view');
         fetchFileContent()
-            .then(content => saveFileContents(uuid, encodeURIComponent(name || hash.replace(/^#/, '')), content))
+            .then(content => saveFileContents(uuid, name || hash.replace(/^#/, ''), content))
             .then(() => {
                 if (name) {
                     history.push(`/server/${id}/files/edit#/${name}`);

resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx

@@ -33,10 +33,10 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
         .filter(directory => !!directory)
         .map((directory, index, dirs) => {
             if (!withinFileEditor && index === dirs.length - 1) {
-                return { name: decodeURIComponent(encodeURIComponent(directory)) };
+                return { name: directory };
             }
 
-            return { name: decodeURIComponent(encodeURIComponent(directory)), path: `/${dirs.slice(0, index + 1).join('/')}` };
+            return { name: directory, path: `/${dirs.slice(0, index + 1).join('/')}` };
         });
 
     const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -79,7 +79,7 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
             }
             {file &&
             <React.Fragment>
-                <span css={tw`px-1 text-neutral-300`}>{decodeURIComponent(encodeURIComponent(file))}</span>
+                <span css={tw`px-1 text-neutral-300`}>{decodeURI(file)}</span>
             </React.Fragment>
             }
         </div>

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -36,7 +36,7 @@ export default () => {
     useEffect(() => {
         clearFlashes('files');
         setSelectedFiles([]);
-        setDirectory(hash.length > 0 ? hash : '/');
+        setDirectory(hash.length > 0 ? decodeURI(hash) : '/');
     }, [ hash ]);
 
     useEffect(() => {

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -24,6 +24,8 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
     const history = useHistory();
     const match = useRouteMatch();
 
+    const destination = cleanDirectoryPath(`${directory}/${file.name}`).split('/').map(v => encodeURI(v)).join('/');
+
     const onRowClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         // Don't rely on the onClick to work with the generated URL. Because of the way this
         // component re-renders you'll get redirected into a nested directory structure since
@@ -32,7 +34,7 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
         // Just trust me future me, leave this be.
         if (!file.isFile) {
             e.preventDefault();
-            history.push(`#${cleanDirectoryPath(`${directory}/${file.name}`)}`);
+            history.push(`#${destination}`);
         }
     };
 
@@ -43,7 +45,7 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
             </div>
             :
             <NavLink
-                to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
+                to={`${match.url}/${file.isFile ? 'edit/' : ''}#${destination}`}
                 css={tw`flex flex-1 text-neutral-300 no-underline p-3 overflow-hidden truncate`}
                 onClick={onRowClick}
             >

resources/scripts/components/server/files/NewDirectoryButton.tsx

@@ -92,9 +92,7 @@ export default ({ className }: WithClassname) => {
                                 <span css={tw`text-neutral-200`}>This directory will be created as</span>
                                 &nbsp;/home/container/
                                 <span css={tw`text-cyan-200`}>
-                                    {decodeURIComponent(encodeURIComponent(
-                                        join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, ''),
-                                    ))}
+                                    {join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, '')}
                                 </span>
                             </p>
                             <div css={tw`flex justify-end`}>