Fix URKL encoding hellscape; closes #2664 closes #2663

resources/scripts/api/server/files/getFileContents.ts

@@ -3,7 +3,7 @@ import http from '@/api/http';
 export default (server: string, file: string): Promise<string> => {
     return new Promise((resolve, reject) => {
         http.get(`/api/client/servers/${server}/files/contents`, {
-            params: { file: file.split('/').map(item => encodeURIComponent(item)).join('/') },
+            params: { file: encodeURI(decodeURI(file)) },
             transformResponse: res => res,
             responseType: 'text',
         })

resources/scripts/api/server/files/loadDirectory.ts

@@ -17,7 +17,7 @@ export interface FileObject {
 
 export default async (uuid: string, directory?: string): Promise<FileObject[]> => {
     const { data } = await http.get(`/api/client/servers/${uuid}/files/list`, {
-        params: { directory: directory?.split('/').map(item => encodeURIComponent(item)).join('/') },
+        params: { directory: encodeURI(directory ?? '/') },
     });
 
     return (data.data || []).map(rawDataToFileObject);

resources/scripts/api/server/files/saveFileContents.ts

@@ -2,7 +2,7 @@ import http from '@/api/http';
 
 export default async (uuid: string, file: string, content: string): Promise<void> => {
     await http.post(`/api/client/servers/${uuid}/files/write`, content, {
-        params: { file },
+        params: { file: encodeURI(decodeURI(file)) },
         headers: {
             'Content-Type': 'text/plain',
         },

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`}>