feat: inspect instance in new tab

Akryum · Sep 3, 2024 · 46d6065 · 46d6065
1 parent b07312d
commit 46d6065
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 3 deletions.
diff --git a/packages/app/components/resource/ResourceInstanceValueReferences.vue b/packages/app/components/resource/ResourceInstanceValueReferences.vue
@@ -340,6 +340,7 @@ onBeforeUnmount(() => {
               :selected-instance-ids="selectedIds[m].value"
               empty-placeholder="No instances referenced"
               dim-inactive-instances
+              inspect-column
               class="h-full"
               @select="instance => selectedIds[m].value = [instance.id]"
               @select-multiple="instances => selectedIds[m].value = instances.map(i => i.id)"

diff --git a/packages/app/components/resource/ResourceReferencesPreview.vue b/packages/app/components/resource/ResourceReferencesPreview.vue
@@ -119,6 +119,7 @@ function openSelection() {
         :instances="instances"
         empty-placeholder="No instances referenced"
         dim-inactive-instances
+        inspect-column
         class="resource-table flex-1"
         @select="instance => selectedIds = [instance.id]"
         @dblclick="openSelection()"

diff --git a/packages/app/components/resource/ResourceTable.vue b/packages/app/components/resource/ResourceTable.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   dimInactiveInstances?: boolean
   emptyPlaceholder?: string
   readonly?: boolean
+  inspectColumn?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -158,7 +159,7 @@ watch(() => props.selectedInstanceIds, (value) => {
     <div class="flex divide-x divide-gray-200 dark:divide-gray-800 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-10 min-w-max">
       <slot name="header-start" />
 
-      <div v-for="i in 3" :key="i" class="w-[42px] flex-none" />
+      <div v-for="i in inspectColumn ? 4 : 3" :key="i" class="w-[42px] flex-none" />
 
       <ResourceTableColumnHeader
         v-for="col in cols"
@@ -180,7 +181,8 @@ watch(() => props.selectedInstanceIds, (value) => {
         :selected="selectedInstanceIds?.includes(instance.id)"
         :selected-ids="selectedInstanceIds"
         :dim="dimInactiveInstances && !instance.active"
-        :readonly="readonly"
+        :readonly
+        :inspect-column
         class="last:!border-b border-gray-200 dark:border-gray-800"
         @click="onRowClick(instance, $event)"
         @dblclick="emit('activate', instance)"

diff --git a/packages/app/components/resource/ResourceTableRow.vue b/packages/app/components/resource/ResourceTableRow.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
   selectedIds?: string[]
   dim?: boolean
   readonly?: boolean
+  inspectColumn?: boolean
 }>()
 
 const scrollEl = ref<HTMLElement | null>(null)
@@ -56,6 +57,21 @@ async function openResolverFile(col: Col) {
     })
   }
 }
+
+// Inspect column
+
+const router = useRouter()
+
+function inspectInNewTab() {
+  const route = router.resolve({
+    name: 'db-resources-resourceName-instances-instanceId',
+    params: {
+      resourceName: props.resourceType.name,
+      instanceId: props.instance.id,
+    },
+  })
+  window.open(route.href, '_blank')
+}
 </script>
 
 <template>
@@ -86,6 +102,28 @@ async function openResolverFile(col: Col) {
       >
         <slot name="start" />
 
+        <!-- Inspect -->
+        <Tooltip
+          v-if="inspectColumn"
+          class="w-[42px] opacity-50 hover:opacity-100 flex-none"
+          :class="{
+            'cursor-pointer': !readonly,
+          }"
+          aria-role="button"
+          aria-label="Toggle active"
+          @click.stop="inspectInNewTab()"
+        >
+          <div class="flex items-center justify-center w-full h-full">
+            <UIcon
+              name="i-ph-arrow-square-out"
+            />
+          </div>
+
+          <template #popper>
+            Inspect instance in new tab
+          </template>
+        </Tooltip>
+
         <!-- Active -->
         <Tooltip
           class="w-[42px] opacity-50 hover:opacity-100 flex-none"

diff --git a/packages/app/nuxt.config.ts b/packages/app/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: {
-    enabled: false,
+    enabled: true,
   },
 
   ssr: false,