fix(ui): ui improvements (#574)

vitest-dev · Jan 18, 2022 · 730e354 · 730e354
1 parent 9ef5997
commit 730e354
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 26 deletions.
diff --git a/packages/ui/client/components/CodeMirror.vue b/packages/ui/client/components/CodeMirror.vue
@@ -39,6 +39,7 @@ onMounted(async() => {
     ...props,
     ...attrs,
     mode: modeMap[props.mode || ''] || props.mode,
+    readOnly: props.readOnly ? 'nocursor' : undefined,
     extraKeys: {
       'Cmd-S': function(cm) {
         emit('save', cm.getValue())

diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
@@ -40,28 +40,49 @@ const changeViewMode = (view: Params['view']) => {
           {{ current?.filepath }}
         </div>
         <div class="flex text-lg">
-          <IconButton v-tooltip.bottom="'Open in editor'" icon="i-carbon-launch" :disabled="!current?.filepath" @click="open" />
+          <IconButton
+            v-tooltip.bottom="'Open in editor'"
+            icon="i-carbon-launch"
+            :disabled="!current?.filepath"
+            @click="open"
+          />
         </div>
       </div>
       <div flex="~" items-center bg-header border="b base" text-sm h-37px>
-        <button tab-button :class="{ 'tab-button-active': viewMode == null }" @click="changeViewMode(null)">
+        <button
+          tab-button
+          :class="{ 'tab-button-active': viewMode == null }"
+          @click="changeViewMode(null)"
+        >
           Report
         </button>
-        <button tab-button :class="{ 'tab-button-active': viewMode === 'graph' }" @click="changeViewMode('graph')">
+        <button
+          tab-button
+          :class="{ 'tab-button-active': viewMode === 'graph' }"
+          @click="changeViewMode('graph')"
+        >
           Module Graph
         </button>
-        <button tab-button :class="{ 'tab-button-active': viewMode === 'editor' }" @click="changeViewMode('editor')">
+        <button
+          tab-button
+          :class="{ 'tab-button-active': viewMode === 'editor' }"
+          @click="changeViewMode('editor')"
+        >
           Code
         </button>
-        <button tab-button :class="{ 'tab-button-active': viewMode === 'console' }" @click="changeViewMode('console')">
+        <button
+          tab-button
+          :class="{ 'tab-button-active': viewMode === 'console', 'op20': viewMode !== 'console' && currentLogs?.length === 0 }"
+          @click="changeViewMode('console')"
+        >
           Console ({{ currentLogs?.length || 0 }})
         </button>
       </div>
     </div>
 
     <div flex flex-col flex-1 overflow="hidden">
       <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" />
-      <ViewEditor v-if="viewMode === 'editor'" :file="current" />
+      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" />
       <ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" />
       <ViewReport v-else-if="!viewMode" :file="current" />
     </div>

diff --git a/packages/ui/client/components/Modal.vue b/packages/ui/client/components/Modal.vue
@@ -10,7 +10,7 @@
     />
     <div
       class="bg-base border-base absolute transition-all duration-200 ease-out"
-      :class="positionClass"
+      :class="[positionClass, 'scrolls']"
       :style="modelValue ? {}: {transform}"
     >
       <slot />

diff --git a/packages/ui/client/components/ModuleTransformResultView.vue b/packages/ui/client/components/ModuleTransformResultView.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { client } from '~/composables/client'
 const props = defineProps<{ id: string }>()
-defineEmits<{ (e: 'close'): void }>()
+const emit = defineEmits<{ (e: 'close'): void }>()
 
 const result = asyncComputed(() => client.rpc.getTransformResult(props.id))
 const ext = computed(() => props.id?.split(/\./g).pop() || 'js')
 
 const source = computed(() => result.value?.source?.trim() || '')
 const code = computed(() => result.value?.code?.replace(/\/\/# sourceMappingURL=.*\n/, '').trim() || '')
+const sourceMap = computed(() => ({
+  mappings: result.value?.map?.mappings ?? '',
+  version: result.value?.map?.version,
+}))
+
+onKeyStroke('Escape', () => {
+  emit('close')
+})
 // TODO: sourcemap https://evanw.github.io/source-map-visualization/
 </script>
 
@@ -18,7 +26,7 @@ const code = computed(() => result.value?.code?.replace(/\/\/# sourceMappingURL=
       <p op50 font-mono text-sm>
         {{ id }}
       </p>
-      <IconButton absolute top-5px right-5px icon="i-carbon-close" text-2xl @click="$emit('close')" />
+      <IconButton icon="i-carbon-close" absolute top-5px right-5px text-2xl @click="emit('close')" />
     </div>
     <div v-if="!result" p-5>
       No transform result found for this module.
@@ -32,13 +40,23 @@ const code = computed(() => result.value?.code?.replace(/\/\/# sourceMappingURL=
           Transformed
         </div>
         <div>
-          <CodeMirror :model-value="source" v-bind="{ lineNumbers:true }" :mode="ext" />
+          <CodeMirror :model-value="source" read-only v-bind="{ lineNumbers: true }" :mode="ext" />
         </div>
         <div>
-          <CodeMirror :model-value="code" v-bind="{ lineNumbers:true }" :mode="ext" />
+          <CodeMirror :model-value="code" read-only v-bind="{ lineNumbers: true }" :mode="ext" />
         </div>
       </div>
-      <pre>{{ result }}</pre>
+      <template v-if="sourceMap.mappings !== ''">
+        <div p="x3 y-1" bg-overlay border="base b t">
+          Source map (v{{ sourceMap.version }})
+        </div>
+        <CodeMirror
+          :model-value="sourceMap.mappings"
+          read-only
+          v-bind="{ lineNumbers: true }"
+          :mode="ext"
+        />
+      </template>
     </template>
   </div>
 </template>
diff --git a/packages/ui/client/components/views/ViewConsoleOutput.vue b/packages/ui/client/components/views/ViewConsoleOutput.vue
@@ -31,4 +31,7 @@ function getTaskName(id?: string) {
       </div>
     </div>
   </div>
+  <p v-else p6>
+    Log something in your test and it would print here. (e.g. <pre inline>console.log(foo)</pre>)
+  </p>
 </template>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
@@ -23,11 +23,13 @@ const editor = ref<any>()
 
 const cm = computed<CodeMirror.EditorFromTextArea | undefined>(() => editor.value?.cm)
 const failed = computed(() => props.file?.tasks.filter(i => i.result?.state === 'fail') || [])
+const hasBeenEdited = ref(false)
 
 const widgets: CodeMirror.LineWidget[] = []
 const handles: CodeMirror.LineHandle[] = []
 
 async function onSave(content: string) {
+  hasBeenEdited.value = true
   await client.rpc.writeFile(props.file!.filepath, content)
 }
 
@@ -53,7 +55,7 @@ watch([cm, failed], () => {
         widgets.push(cm.value!.addLineWidget(pos.line - 1, el))
       }
     })
-    cm.value?.clearHistory() // Prevent getting access to initial state
+    if (!hasBeenEdited.value) cm.value?.clearHistory() // Prevent getting access to initial state
   }, 100)
 }, { flush: 'post' })
 </script>

diff --git a/packages/ui/client/components/views/ViewModuleGraph.vue b/packages/ui/client/components/views/ViewModuleGraph.vue
@@ -16,6 +16,11 @@ const modalShow = ref(false)
 const selectedModule = ref<string | null>()
 const controller = ref<ModuleGraphController | undefined>()
 
+watchEffect(() => {
+  if (modalShow.value === false)
+    setTimeout(() => selectedModule.value = undefined, 300)
+}, { flush: 'post' })
+
 onMounted(() => {
   resetGraphController()
 })
@@ -118,7 +123,13 @@ function bindOnClick(selection: Selection<SVGCircleElement, ModuleNode, SVGGElem
   <div h-full min-h-75 flex-1 overflow="hidden">
     <div>
       <div flex items-center gap-4 px-3 py-2>
-        <div v-for="node of controller?.nodeTypes.sort()" :key="node" flex="~ gap-1" items-center select-none>
+        <div
+          v-for="node of controller?.nodeTypes.sort()"
+          :key="node"
+          flex="~ gap-1"
+          items-center
+          select-none
+        >
           <input
             :id="`type-${node}`"
             type="checkbox"
@@ -131,27 +142,23 @@ function bindOnClick(selection: Selection<SVGCircleElement, ModuleNode, SVGGElem
             ws-nowrap
             overflow-hidden
             capitalize
-            truncate :for="`type-${node}`"
+            truncate
+            :for="`type-${node}`"
             border-b-2
-            :style="{ 'border-color': `var(--color-node-${node})`}"
-          >
-            {{ node }} Modules
-          </label>
+            :style="{ 'border-color': `var(--color-node-${node})` }"
+          >{{ node }} Modules</label>
         </div>
         <div flex-auto />
         <div>
-          <IconButton
-            icon="i-carbon-reset"
-            @click="resetGraphController"
-          />
+          <IconButton v-tooltip.bottom="'Reset'" icon="i-carbon-reset" @click="resetGraphController" />
         </div>
       </div>
     </div>
     <div ref="el" />
     <Modal v-model="modalShow" direction="right">
       <template v-if="selectedModule">
         <Suspense>
-          <ModuleTransformResultView :id="selectedModule" @close="modalShow=false" />
+          <ModuleTransformResultView :id="selectedModule" @close="modalShow = false" />
         </Suspense>
       </template>
     </Modal>

diff --git a/packages/ui/client/directives/tooltip.ts b/packages/ui/client/directives/tooltip.ts
@@ -17,7 +17,6 @@ const tooltip: Directive = (el: Element, { value, oldValue, modifiers }) => {
     instance === undefined // mount if instance not yet created, else update content
       ? tippy(el, {
         delay: 200,
-        hideOnClick: false,
         ...config,
       })
       : value !== oldValue && instance.setProps(config)

diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
@@ -163,5 +163,7 @@ html.dark {
   margin-right: unset !important;
   padding-bottom: unset !important;
 }
-
+.CodeMirror-sizer {
+  border-right: none;
+}