web/satellite: encode file browser URL components

File paths may contain characters that have special meaning when placed
in URLs. For example, a folder name may contain a pound symbol (#)
which is the URL fragment delimiter. This causes the characters that
succeed this symbol to not be considered part of the primary resource
identifier as they should be, resulting in navigation errors.
This change resolves this issue.

Resolves #5522

Change-Id: I59972321795375ec5981c3e9c505e35f998022d6

web/satellite/src/components/browser/FileEntry.vue

@@ -161,7 +161,8 @@ const dropdownOpen = computed((): boolean => {
  */
 const link = computed((): string => {
     const browserRoot = store.state.files.browserRoot;
-    const pathAndKey = store.state.files.path + props.file.Key;
+    const uriParts = (store.state.files.path + props.file.Key).split('/');
+    const pathAndKey = uriParts.map(part => encodeURIComponent(part)).join('/');
     return pathAndKey.length > 0
         ? browserRoot + pathAndKey + '/'
         : browserRoot;