From d9002ac25907dfc7f8033c08b662b79132747271 Mon Sep 17 00:00:00 2001
From: Jason Thomas <jason@openc3.com>
Date: Sat, 9 Nov 2024 12:00:41 -0700
Subject: [PATCH] BucketExplorer view files and breadcrumb paths

---
 .../tools/BucketExplorer/BucketExplorer.vue   |  67 ++++++++-
 .../src/tools/ScriptRunner/ScriptRunner.vue   | 115 ++-------------
 .../src/components/OutputDialog.vue           |  86 +++++------
 .../src/components/ace/EditorModes.js         | 139 ++++++++++++++++++
 playwright/tests/bucket-explorer.spec.ts      |  81 +++++++---
 5 files changed, 307 insertions(+), 181 deletions(-)
 create mode 100644 openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/ace/EditorModes.js

diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
index 2819eb393d..14a8e50587 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
@@ -77,7 +77,7 @@
         :items-per-page="-1"
         :items-per-page-options="[10, 20, 50, 100, -1]"
         v-model:sort-by="sortBy"
-        @click:row="fileClick"
+        @click:row.stop="fileClick"
         multi-sort
         density="compact"
         hover
@@ -92,11 +92,17 @@
               variant="text"
               density="compact"
               class="mt-1"
-              @click="backArrow"
+              @click.stop="backArrow"
               data-test="be-nav-back"
             />
             <span class=".text-body-1 ma-2 font-size" data-test="file-path">
-              /{{ path }}
+              <span
+                v-for="(part, index) in breadcrumbPath"
+                :key="index"
+                @click.stop="gotoPath(part.path)"
+                style="cursor: pointer"
+                >/&nbsp;{{ part.name }}&nbsp;
+              </span>
             </span>
             <v-spacer />
             <div class="pa-1 font-size">
@@ -127,9 +133,17 @@
         </template>
         <template v-slot:item.action="{ item }">
           <v-icon
+            v-if="item.icon === 'mdi-file' && !isBinary(item.name)"
+            @click="viewFile(item.name)"
             class="mr-3"
+            data-test="view-file"
+          >
+            mdi-eye
+          </v-icon>
+          <v-icon
             v-if="item.icon === 'mdi-file'"
             @click="downloadFile(item.name)"
+            class="mr-3"
             data-test="download-file"
           >
             mdi-download-box
@@ -217,17 +231,28 @@
         </v-card-text>
       </v-card>
     </v-dialog>
+    <output-dialog
+      type="File"
+      :content="dialogContent"
+      :name="dialogName"
+      :filename="dialogFilename"
+      v-model="showDialog"
+      v-if="showDialog"
+      @submit="showDialog = false"
+    />
   </div>
 </template>
 
 <script>
 import TopBar from '@openc3/tool-common/src/components/TopBar'
+import OutputDialog from '@openc3/tool-common/src/components/OutputDialog'
 import Api from '@openc3/tool-common/src/services/api'
 import axios from 'axios'
 
 export default {
   components: {
     TopBar,
+    OutputDialog,
   },
   data() {
     return {
@@ -244,6 +269,10 @@ export default {
       path: '',
       file: null,
       files: [],
+      showDialog: false,
+      dialogName: '',
+      dialogContent: '',
+      dialogFilename: '',
       sortBy: [
         {
           key: 'modified',
@@ -293,6 +322,13 @@ export default {
         .reduce((a, b) => a + (b.size ? b.size : 0), 0)
         .toLocaleString()
     },
+    breadcrumbPath() {
+      const parts = this.path.split('/')
+      return parts.map((part, index) => ({
+        name: part,
+        path: parts.slice(0, index + 1).join('/') + '/',
+      }))
+    },
   },
   created() {
     Api.get('/openc3-api/storage/buckets').then((response) => {
@@ -332,6 +368,14 @@ export default {
     },
   },
   methods: {
+    isBinary(filename) {
+      let ext = filename.split('.').pop()
+      return ['gz', 'bin', 'gem', 'zip'].includes(ext)
+    },
+    gotoPath(path) {
+      this.path = path
+      this.update()
+    },
     update() {
       this.$router.push({
         name: 'Bucket Explorer',
@@ -391,6 +435,23 @@ export default {
         this.update()
       }
     },
+    viewFile(filename) {
+      let root = this.root.toUpperCase()
+      if (this.mode === 'volume') {
+        root = root.slice(1)
+      }
+      Api.get(
+        `/openc3-api/storage/download_file/${encodeURIComponent(
+          this.path,
+        )}${filename}?${this.mode}=OPENC3_${root}_${this.mode.toUpperCase()}`,
+      ).then((response) => {
+        this.dialogName = filename
+        this.dialogFilename = filename
+        // Decode Base64 string
+        this.dialogContent = window.atob(response.data.contents)
+        this.showDialog = true
+      })
+    },
     downloadFile(filename) {
       let root = this.root.toUpperCase()
       let api = 'download'
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
index fc08210faa..b3d3b60743 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
@@ -404,12 +404,7 @@
 import axios from 'axios'
 import Cable from '@openc3/tool-common/src/services/cable.js'
 import Api from '@openc3/tool-common/src/services/api'
-import * as ace from 'ace-builds'
-import 'ace-builds/src-min-noconflict/mode-ruby'
-import 'ace-builds/src-min-noconflict/mode-python'
-import 'ace-builds/src-min-noconflict/theme-twilight'
-import 'ace-builds/src-min-noconflict/ext-language_tools'
-import 'ace-builds/src-min-noconflict/ext-searchbox'
+import EditorModes from '@openc3/tool-common/src/components/ace/EditorModes'
 import { format } from 'date-fns'
 import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
@@ -470,6 +465,7 @@ export default {
     ScriptLogMessages,
     CriticalCmdDialog,
   },
+  mixins: [EditorModes],
   data() {
     return {
       title: 'Script Runner',
@@ -1006,11 +1002,11 @@ export default {
   mounted: async function () {
     this.editor = ace.edit(this.$refs.editor)
     this.editor.setTheme('ace/theme/twilight')
-    const openC3RubyMode = this.buildOpenC3RubyMode()
-    const openC3PythonMode = this.buildOpenC3PythonMode()
-    this.openC3RubyMode = new openC3RubyMode()
-    this.openC3PythonMode = new openC3PythonMode()
-    this.editor.session.setMode(this.openC3RubyMode)
+    const RubyMode = this.buildRubyMode()
+    const PythonMode = this.buildPythonMode()
+    this.rubyMode = new RubyMode()
+    this.pythonMode = new PythonMode()
+    this.editor.session.setMode(this.rubyMode)
     this.editor.session.setTabSize(2)
     this.editor.session.setUseWrapMode(true)
     this.editor.$blockScrolling = Infinity
@@ -1066,19 +1062,6 @@ export default {
         await this.reloadFile(false)
       }
     }
-    // TODO: Potentially still bad interactions with autoSave
-    // see https://github.com/OpenC3/cosmos/issues/915
-    // this.autoSaveInterval = setInterval(async () => {
-    //   // Only save if not-running, modified, and visible (e.g. not open in another tab)
-    //   if (
-    //     !this.scriptId &&
-    //     this.fileModified.length > 0 &&
-    //     document.visibilityState === 'visible'
-    //   ) {
-    //     await this.saveFile('auto')
-    //   }
-    // }, 60000) // Save every minute
-
     this.updateInterval = setInterval(async () => {
       this.processReceived()
     }, 100) // Every 100ms
@@ -1158,86 +1141,6 @@ export default {
         this.inputMetadata.show = true
       })
     },
-    buildLanguageMode(HighlightRules, FoldMode) {
-      let oop = ace.require('ace/lib/oop')
-      let apis = Object.getOwnPropertyNames(OpenC3Api.prototype)
-        .filter((a) => a !== 'constructor')
-        .filter((a) => a !== 'exec')
-        // Add the Public apis in api_shared but not in OpenC3Api
-        .concat([
-          'check',
-          'check_raw',
-          'check_formatted',
-          'check_with_units',
-          'check_exception',
-          'check_tolerance',
-          'check_expression',
-          'wait',
-          'wait_tolerance',
-          'wait_expression',
-          'wait_check',
-          'wait_check_tolerance',
-          'wait_check_expression',
-          'wait_packet',
-          'wait_check_packet',
-          'disable_instrumentation',
-          'set_line_delay',
-          'get_line_delay',
-          'set_max_output',
-          'get_max_output',
-        ])
-      let regex = new RegExp(`(\\b${apis.join('\\b|\\b')}\\b)`)
-      let OpenC3HighlightRules = function () {
-        HighlightRules.call(this)
-        // add openc3 rules to the rules
-        for (let rule in this.$rules) {
-          this.$rules[rule].unshift({
-            regex: regex,
-            token: 'support.function',
-          })
-        }
-      }
-      oop.inherits(OpenC3HighlightRules, HighlightRules)
-
-      let MatchingBraceOutdent = ace.require(
-        'ace/mode/matching_brace_outdent',
-      ).MatchingBraceOutdent
-      let CstyleBehaviour = ace.require(
-        'ace/mode/behaviour/cstyle',
-      ).CstyleBehaviour
-      let Mode = function () {
-        this.HighlightRules = OpenC3HighlightRules
-        this.$outdent = new MatchingBraceOutdent()
-        this.$behaviour = new CstyleBehaviour()
-        this.foldingRules = new FoldMode()
-        this.indentKeywords = this.foldingRules.indentKeywords
-      }
-      return [oop, Mode]
-    },
-    buildOpenC3RubyMode() {
-      const [oop, Mode] = this.buildLanguageMode(
-        ace.require('ace/mode/ruby_highlight_rules').RubyHighlightRules,
-        ace.require('ace/mode/folding/ruby').FoldMode,
-      )
-      let RubyMode = ace.require('ace/mode/ruby').Mode
-      oop.inherits(Mode, RubyMode)
-      ;(function () {
-        this.$id = 'ace/mode/openc3'
-      }).call(Mode.prototype)
-      return Mode
-    },
-    buildOpenC3PythonMode() {
-      const [oop, Mode] = this.buildLanguageMode(
-        ace.require('ace/mode/python_highlight_rules').PythonHighlightRules,
-        ace.require('ace/mode/folding/pythonic').FoldMode,
-      )
-      let PythonMode = ace.require('ace/mode/python').Mode
-      oop.inherits(Mode, PythonMode)
-      ;(function () {
-        this.$id = 'ace/mode/openc3'
-      }).call(Mode.prototype)
-      return Mode
-    },
     messageSortOrder(order) {
       // See ScriptLogMessages for these strings
       if (order === 'Newest on Top' && this.messagesNewestOnTop === false) {
@@ -2297,9 +2200,9 @@ class TestSuite(Suite):
       document.title = `${parts.pop()} (${parts.join('/')})`
 
       if (this.filename.split('.').pop() === 'py') {
-        this.editor.session.setMode(this.openC3PythonMode)
+        this.editor.session.setMode(this.pythonMode)
       } else {
-        this.editor.session.setMode(this.openC3RubyMode)
+        this.editor.session.setMode(this.rubyMode)
       }
       this.currentFilename = null
       this.editor.session.setValue(file.contents)
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/OutputDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/OutputDialog.vue
index dd60f1e590..14fbbcb883 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/OutputDialog.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/OutputDialog.vue
@@ -23,14 +23,14 @@
 <template>
   <v-dialog v-model="show" width="85vw">
     <v-card>
-      <v-system-bar>
+      <v-toolbar height="24">
         <v-spacer />
         <span v-text="title" />
         <v-spacer />
         <div class="mx-2">
-          <v-tooltip top>
-            <template v-slot:activator="{ on, attrs }">
-              <div v-on="on" v-bind="attrs">
+          <v-tooltip location="top">
+            <template v-slot:activator="{ props }">
+              <div v-bind="props">
                 <v-icon data-test="downloadIcon" @click="download">
                   mdi-download
                 </v-icon>
@@ -39,25 +39,20 @@
             <span> Download </span>
           </v-tooltip>
         </div>
-      </v-system-bar>
+      </v-toolbar>
       <v-card-text>
         <pre class="editor" ref="editor"></pre>
       </v-card-text>
-      <v-card-actions class="px-2">
+      <v-card-actions class="pr-6 pb-4 pt-0">
         <v-spacer />
-        <v-btn variant="flat" @click="close"> Ok </v-btn>
+        <v-btn variant="flat" @click="show = !show"> Ok </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
-import * as ace from 'ace-builds'
-import 'ace-builds/src-min-noconflict/mode-ruby'
-import 'ace-builds/src-min-noconflict/mode-json'
-import 'ace-builds/src-min-noconflict/theme-twilight'
-import 'ace-builds/src-min-noconflict/ext-language_tools'
-import 'ace-builds/src-min-noconflict/ext-searchbox'
+import EditorModes from './ace/EditorModes'
 
 export default {
   props: {
@@ -67,23 +62,46 @@ export default {
     },
     type: String,
     name: String,
-    value: Boolean, // value is the default prop when using v-model
+    modelValue: Boolean,
     filename: {
       type: String,
       required: false,
     },
   },
+  mixins: [EditorModes],
   data() {
     return {
       editor: null,
+      mode: null,
     }
   },
   mounted() {
-    const openPluginMode = this.buildPluginMode()
     this.editor = ace.edit(this.$refs.editor)
     this.editor.setTheme('ace/theme/twilight')
-    this.editor.session.setMode(new openPluginMode())
-    this.editor.session.setTabSize(2)
+    let languageMode = null
+    const fileExtension = this.filename ? this.filename.split('.').pop() : 'txt'
+    switch (fileExtension) {
+      case 'txt':
+      case 'rb':
+        const RubyMode = this.buildRubyMode()
+        languageMode = new RubyMode()
+        break
+      case 'py':
+        const PythonMode = this.buildPythonMode()
+        languageMode = new PythonMode()
+        break
+      case 'md':
+        const MarkdownMode = this.buildMarkdownMode()
+        languageMode = new MarkdownMode()
+        break
+      default:
+        const JsonMode = this.buildJsonMode()
+        languageMode = new JsonMode()
+        this.editor.setOptions({
+          useWorker: false,
+        })
+    }
+    this.editor.session.setMode(languageMode)
     this.editor.session.setUseWrapMode(true)
     this.editor.$blockScrolling = Infinity
     this.editor.setHighlightActiveLine(false)
@@ -92,7 +110,7 @@ export default {
     this.editor.focus()
     this.editor.setReadOnly(true)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.editor) {
       this.editor.destroy()
     }
@@ -100,10 +118,10 @@ export default {
   computed: {
     show: {
       get() {
-        return this.value
+        return this.modelValue
       },
       set(value) {
-        this.$emit('input', value) // input is the default event when using v-model
+        this.$emit('update:modelValue', value)
       },
     },
     title: function () {
@@ -128,33 +146,6 @@ export default {
       link.setAttribute('download', filename)
       link.click()
     },
-    buildPluginMode() {
-      let oop = ace.require('ace/lib/oop')
-      let JsonHighlightRules = ace.require(
-        'ace/mode/json_highlight_rules'
-      ).JsonHighlightRules
-
-      let MatchingBraceOutdent = ace.require(
-        'ace/mode/matching_brace_outdent'
-      ).MatchingBraceOutdent
-      let CstyleBehaviour = ace.require(
-        'ace/mode/behaviour/cstyle'
-      ).CstyleBehaviour
-      let FoldMode = ace.require('ace/mode/folding/ruby').FoldMode
-      let Mode = function () {
-        this.HighlightRules = JsonHighlightRules
-        this.$outdent = new MatchingBraceOutdent()
-        this.$behaviour = new CstyleBehaviour()
-        this.foldingRules = new FoldMode()
-        this.indentKeywords = this.foldingRules.indentKeywords
-      }
-      let RubyMode = ace.require('ace/mode/ruby').Mode
-      oop.inherits(Mode, RubyMode)
-      ;(function () {
-        this.$id = 'ace/mode/openc3'
-      }).call(Mode.prototype)
-      return Mode
-    },
   },
 }
 </script>
@@ -162,7 +153,6 @@ export default {
 <style scoped>
 .editor {
   height: 75vh;
-  width: 80vw;
   position: relative;
   font-size: 16px;
 }
diff --git a/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/ace/EditorModes.js b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/ace/EditorModes.js
new file mode 100644
index 0000000000..11d6f3f8b7
--- /dev/null
+++ b/openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/ace/EditorModes.js
@@ -0,0 +1,139 @@
+/*
+# Copyright 2024 OpenC3, Inc.
+# All Rights Reserved.
+#
+# This program is free software; you can modify and/or redistribute it
+# under the terms of the GNU Affero General Public License
+# as published by the Free Software Foundation; version 3 with
+# attribution addendums as found in the LICENSE.txt
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+
+# This file may also be used under the terms of a commercial license
+# if purchased from OpenC3, Inc.
+*/
+
+import * as ace from 'ace-builds'
+import 'ace-builds/src-min-noconflict/mode-ruby'
+import 'ace-builds/src-min-noconflict/mode-python'
+import 'ace-builds/src-min-noconflict/mode-json'
+import 'ace-builds/src-min-noconflict/mode-markdown'
+import 'ace-builds/src-min-noconflict/theme-twilight'
+import 'ace-builds/src-min-noconflict/ext-language_tools'
+import 'ace-builds/src-min-noconflict/ext-searchbox'
+import { OpenC3Api } from '@openc3/tool-common/src/services/openc3-api'
+
+export default {
+  data: {
+    configKey: '',
+  },
+  methods: {
+    buildLanguageMode(HighlightRules, FoldMode) {
+      let oop = ace.require('ace/lib/oop')
+      let apis = Object.getOwnPropertyNames(OpenC3Api.prototype)
+        .filter((a) => a !== 'constructor')
+        .filter((a) => a !== 'exec')
+        // Add the Public apis in api_shared but not in OpenC3Api
+        .concat([
+          'check',
+          'check_raw',
+          'check_formatted',
+          'check_with_units',
+          'check_exception',
+          'check_tolerance',
+          'check_expression',
+          'wait',
+          'wait_tolerance',
+          'wait_expression',
+          'wait_check',
+          'wait_check_tolerance',
+          'wait_check_expression',
+          'wait_packet',
+          'wait_check_packet',
+          'disable_instrumentation',
+          'set_line_delay',
+          'get_line_delay',
+          'set_max_output',
+          'get_max_output',
+        ])
+      let regex = new RegExp(`(\\b${apis.join('\\b|\\b')}\\b)`)
+      let OpenC3HighlightRules = function () {
+        HighlightRules.call(this)
+        // add openc3 rules to the rules
+        for (let rule in this.$rules) {
+          this.$rules[rule].unshift({
+            regex: regex,
+            token: 'support.function',
+          })
+        }
+      }
+      oop.inherits(OpenC3HighlightRules, HighlightRules)
+
+      let MatchingBraceOutdent = ace.require(
+        'ace/mode/matching_brace_outdent',
+      ).MatchingBraceOutdent
+      let CstyleBehaviour = ace.require(
+        'ace/mode/behaviour/cstyle',
+      ).CstyleBehaviour
+      let Mode = function () {
+        this.HighlightRules = OpenC3HighlightRules
+        this.$outdent = new MatchingBraceOutdent()
+        this.$behaviour = new CstyleBehaviour()
+        this.foldingRules = new FoldMode()
+        this.indentKeywords = this.foldingRules.indentKeywords
+      }
+      return [oop, Mode]
+    },
+    buildRubyMode() {
+      const [oop, Mode] = this.buildLanguageMode(
+        ace.require('ace/mode/ruby_highlight_rules').RubyHighlightRules,
+        ace.require('ace/mode/folding/ruby').FoldMode,
+      )
+      let RubyMode = ace.require('ace/mode/ruby').Mode
+      oop.inherits(Mode, RubyMode)
+      ;(function () {
+        this.$id = 'ace/mode/openc3'
+      }).call(Mode.prototype)
+      return Mode
+    },
+    buildPythonMode() {
+      const [oop, Mode] = this.buildLanguageMode(
+        ace.require('ace/mode/python_highlight_rules').PythonHighlightRules,
+        ace.require('ace/mode/folding/pythonic').FoldMode,
+      )
+      let PythonMode = ace.require('ace/mode/python').Mode
+      oop.inherits(Mode, PythonMode)
+      ;(function () {
+        this.$id = 'ace/mode/openc3'
+      }).call(Mode.prototype)
+      return Mode
+    },
+    buildJsonMode() {
+      const [oop, Mode] = this.buildLanguageMode(
+        ace.require('ace/mode/json_highlight_rules').JsonHighlightRules,
+        ace.require('ace/mode/folding/ruby').FoldMode,
+      )
+      let JsonMode = ace.require('ace/mode/json').Mode
+      oop.inherits(Mode, JsonMode)
+      ;(function () {
+        this.$id = 'ace/mode/openc3'
+      }).call(Mode.prototype)
+      return Mode
+    },
+    buildMarkdownMode() {
+      const [oop, Mode] = this.buildLanguageMode(
+        ace.require('ace/mode/markdown_highlight_rules').MarkdownHighlightRules,
+        ace.require('ace/mode/folding/markdown').FoldMode,
+      )
+      let MarkdownMode = ace.require('ace/mode/markdown').Mode
+      oop.inherits(Mode, MarkdownMode)
+      ;(function () {
+        this.$id = 'ace/mode/openc3'
+      }).call(Mode.prototype)
+      return Mode
+    },
+  },
+}
diff --git a/playwright/tests/bucket-explorer.spec.ts b/playwright/tests/bucket-explorer.spec.ts
index 34254552e3..d1427cd9b2 100644
--- a/playwright/tests/bucket-explorer.spec.ts
+++ b/playwright/tests/bucket-explorer.spec.ts
@@ -34,18 +34,20 @@ test('navigate config bucket', async ({ page, utils }) => {
   await page.getByText('config').click()
   await expect(page).toHaveURL(/.*\/tools\/bucketexplorer\/config%2F/)
   await page.getByRole('cell', { name: 'DEFAULT' }).click()
-  await expect(page.locator('[data-test="file-path"]')).toHaveText('/DEFAULT/')
+  await expect(page.locator('[data-test="file-path"]')).toHaveText(
+    '/ DEFAULT /',
+  )
   await expect(page).toHaveURL(/.*\/tools\/bucketexplorer\/config%2FDEFAULT%2F/)
   await page.getByRole('cell', { name: 'targets', exact: true }).click()
   await expect(page.locator('[data-test="file-path"]')).toHaveText(
-    '/DEFAULT/targets/',
+    '/ DEFAULT / targets /',
   )
   await expect(page).toHaveURL(
     /.*\/tools\/bucketexplorer\/config%2FDEFAULT%2Ftargets%2F/,
   )
   await page.getByRole('cell', { name: 'INST', exact: true }).click()
   await expect(page.locator('[data-test="file-path"]')).toHaveText(
-    '/DEFAULT/targets/INST/',
+    '/ DEFAULT / targets / INST /',
   )
   await expect(page).toHaveURL(
     /.*\/tools\/bucketexplorer\/config%2FDEFAULT%2Ftargets%2FINST%2F/,
@@ -71,13 +73,15 @@ test('navigate config bucket', async ({ page, utils }) => {
 
   await page.locator('[data-test="be-nav-back"]').click()
   await expect(page.locator('[data-test="file-path"]')).toHaveText(
-    '/DEFAULT/targets/',
+    '/ DEFAULT / targets /',
   )
   await expect(page).toHaveURL(
     /.*\/tools\/bucketexplorer\/config%2FDEFAULT%2Ftargets%2F/,
   )
   await page.locator('[data-test="be-nav-back"]').click()
-  await expect(page.locator('[data-test="file-path"]')).toHaveText('/DEFAULT/')
+  await expect(page.locator('[data-test="file-path"]')).toHaveText(
+    '/ DEFAULT /',
+  )
   await expect(page).toHaveURL(/.*\/tools\/bucketexplorer\/config%2FDEFAULT%2F/)
   await page.locator('[data-test="be-nav-back"]').click()
   await expect(page.locator('[data-test="file-path"]')).toHaveText('/')
@@ -94,7 +98,7 @@ test('navigate gems volume', async ({ page, utils }) => {
   await expect(page).toHaveURL(/.*\/tools\/bucketexplorer\/%2Fgems%2F/)
   await page.getByRole('cell', { name: 'cosmoscache' }).click()
   await expect(page.locator('[data-test="file-path"]')).toHaveText(
-    '/cosmoscache/',
+    '/ cosmoscache /',
   )
   await expect(page).toHaveURL(
     /.*\/tools\/bucketexplorer\/%2Fgems%2Fcosmoscache%2F/,
@@ -108,7 +112,7 @@ test('navigate gems volume', async ({ page, utils }) => {
   // Reload and ensure we get to the same place
   await page.reload()
   await expect(page.locator('[data-test="file-path"]')).toHaveText(
-    '/cosmoscache/',
+    '/ cosmoscache /',
   )
   await expect(page).toHaveURL(
     /.*\/tools\/bucketexplorer\/%2Fgems%2Fcosmoscache%2F/,
@@ -143,7 +147,9 @@ test('upload and delete', async ({ page, utils }) => {
   await expect(page).toHaveURL(/.*\/tools\/bucketexplorer\/config%2F/)
   await expect(page.locator('[data-test="file-path"]')).toHaveText('/')
   await page.getByRole('cell', { name: 'DEFAULT' }).click()
-  await expect(page.locator('[data-test="file-path"]')).toHaveText('/DEFAULT/')
+  await expect(page.locator('[data-test="file-path"]')).toHaveText(
+    '/ DEFAULT /',
+  )
 
   // Upload something to make sure the tmp dir exists
   await expect(page.getByLabel('prepended action')).toBeVisible()
@@ -152,11 +158,13 @@ test('upload and delete', async ({ page, utils }) => {
     await page.getByLabel('prepended action').click(),
   ])
   await fileChooser1.setFiles('package.json')
-  await page.locator('[data-test="upload-file-path"] input').fill('DEFAULT/tmp/tmp.json')
+  await page
+    .locator('[data-test="upload-file-path"] input')
+    .fill('DEFAULT/tmp/tmp.json')
   await page.locator('[data-test="upload-file-submit-btn"]').click()
 
   await expect(page.locator('[data-test="file-path"]')).toHaveText(
-    '/DEFAULT/tmp/',
+    '/ DEFAULT / tmp /',
   )
   await utils.sleep(5000) // Ensure the table is rendered before getting the count
   let count = await page.locator('tbody > tr').count()
@@ -196,7 +204,7 @@ test('upload and delete', async ({ page, utils }) => {
     .fill('DEFAULT/tmp/TEST/tmp/myfile.json')
   await page.locator('[data-test="upload-file-submit-btn"]').click()
   await expect(page.locator('[data-test="file-path"]')).toHaveText(
-    '/DEFAULT/tmp/TEST/tmp/',
+    '/ DEFAULT / tmp / TEST / tmp /',
   )
   await page
     .locator('tr:has-text("myfile.json") [data-test="delete-file"]')
@@ -225,12 +233,16 @@ test('navigate logs and tools bucket', async ({ page, utils }) => {
   await expect(page).toHaveURL(/.*\/tools\/bucketexplorer\/logs%2F/)
 
   await page.getByRole('cell', { name: 'DEFAULT' }).click()
-  await expect(page.locator('[data-test="file-path"]')).toHaveText('/DEFAULT/')
+  await expect(page.locator('[data-test="file-path"]')).toHaveText(
+    '/ DEFAULT /',
+  )
   await expect(page).toHaveURL(/.*\/tools\/bucketexplorer\/logs%2FDEFAULT%2F/)
   await expect(page.locator('tbody > tr').first()).toHaveText(/\w+_logs/)
   // Reload and ensure we get to the same place
   await page.reload()
-  await expect(page.locator('[data-test="file-path"]')).toHaveText('/DEFAULT/')
+  await expect(page.locator('[data-test="file-path"]')).toHaveText(
+    '/ DEFAULT /',
+  )
   await expect(page).toHaveURL(/.*\/tools\/bucketexplorer\/logs%2FDEFAULT%2F/)
   // Ensure the log files have the correct dates
   let date = format(new Date(), 'yyyyMMdd')
@@ -254,7 +266,12 @@ test('navigate logs and tools bucket', async ({ page, utils }) => {
   }
 })
 
-test('auto refreshes to update files', async ({ page, utils, toolPath, context }) => {
+test('auto refreshes to update files', async ({
+  page,
+  utils,
+  toolPath,
+  context,
+}) => {
   // Upload something from the first tab to make sure the tmp dir exists
   await page.getByText('config').click()
   await expect(page.getByLabel('prepended action')).toBeVisible()
@@ -263,21 +280,27 @@ test('auto refreshes to update files', async ({ page, utils, toolPath, context }
     await page.getByLabel('prepended action').click(),
   ])
   await fileChooser1.setFiles('package.json')
-  await page.locator('[data-test="upload-file-path"] input').fill('DEFAULT/tmp/package1.json')
+  await page
+    .locator('[data-test="upload-file-path"] input')
+    .fill('DEFAULT/tmp/package1.json')
   await page.locator('[data-test="upload-file-submit-btn"]').click()
 
   // Open another tab and navigate to the tmp dir
   const pageTwo = await context.newPage()
   pageTwo.goto(toolPath)
   await pageTwo.getByText('config').click()
-  await pageTwo.getByRole('cell', { name: 'DEFAULT' }).click();
-  await pageTwo.getByRole('cell', { name: 'tmp' }).click();
+  await pageTwo.getByRole('cell', { name: 'DEFAULT' }).click()
+  await pageTwo.getByRole('cell', { name: 'tmp' }).click()
 
   // Set the refresh interval on the second tab to be really slow
   await pageTwo.locator('[data-test=bucket-explorer-file]').click()
   await pageTwo.locator('[data-test=bucket-explorer-file-options]').click()
-  await pageTwo.locator('.v-dialog [data-test=refresh-interval] input').fill('1000')
-  await pageTwo.locator('.v-dialog [data-test=refresh-interval] input').press('Enter')
+  await pageTwo
+    .locator('.v-dialog [data-test=refresh-interval] input')
+    .fill('1000')
+  await pageTwo
+    .locator('.v-dialog [data-test=refresh-interval] input')
+    .press('Enter')
   await pageTwo.locator('.v-dialog').press('Escape')
 
   // Upload a file from the first tab
@@ -287,23 +310,33 @@ test('auto refreshes to update files', async ({ page, utils, toolPath, context }
     await page.getByLabel('prepended action').click(),
   ])
   await fileChooser2.setFiles('package.json')
-  await page.locator('[data-test="upload-file-path"] input').fill('DEFAULT/tmp/package2.json')
+  await page
+    .locator('[data-test="upload-file-path"] input')
+    .fill('DEFAULT/tmp/package2.json')
   await page.locator('[data-test="upload-file-submit-btn"]').click()
 
   // The second tab shouldn't have refreshed yet, so the file shouldn't be there
   await utils.sleep(5000) // Ensure the table is rendered before checking
-  await expect(pageTwo.getByRole('cell', { name: 'package2.json' })).not.toBeVisible()
+  await expect(
+    pageTwo.getByRole('cell', { name: 'package2.json' }),
+  ).not.toBeVisible()
 
   // Set the refresh interval on the second tab to 1s
   await pageTwo.locator('[data-test=bucket-explorer-file]').click()
   await pageTwo.locator('[data-test=bucket-explorer-file-options]').click()
-  await pageTwo.locator('.v-dialog [data-test=refresh-interval] input').fill('1')
-  await pageTwo.locator('.v-dialog [data-test=refresh-interval] input').press('Enter')
+  await pageTwo
+    .locator('.v-dialog [data-test=refresh-interval] input')
+    .fill('1')
+  await pageTwo
+    .locator('.v-dialog [data-test=refresh-interval] input')
+    .press('Enter')
   await pageTwo.locator('.v-dialog').press('Escape')
 
   // Second tab should auto refresh in 1s and then the file should be there
   await utils.sleep(5000) // Ensure the table is rendered before checking
-  await expect(pageTwo.getByRole('cell', { name: 'package2.json' })).toBeVisible()
+  await expect(
+    pageTwo.getByRole('cell', { name: 'package2.json' }),
+  ).toBeVisible()
 
   // Cleanup
   await page