feat(dataviewer): detachable fixes

packages/frontend-2/components/viewer/dataviewer/Row.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    :class="`w-full bg-foundation-2 hover:bg-blue-500/5 rounded px-1 py-1 border-l-2 text-xs ${
+    :class="`w-full bg-foundation-2 hover:bg-blue-500/5 rounded pl-1 py-1 border-l-2 text-xs ${
       expandable ? 'border-blue-500' : 'border-transparent'
     } ${expanded ? 'border-neutral-500 border-opacity-30' : ''}`"
   >
     <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
     <div
-      :class="`grid grid-cols-3 ${expandable ? 'cursor-pointer' : ''}`"
+      :class="`grid grid-cols-3 pr-1 ${expandable ? 'cursor-pointer' : ''}`"
       @click="handleExpand"
     >
       <div class="col-span-1 mr-1 flex items-center text-foreground-2 font-semibold">
@@ -14,16 +14,32 @@
           v-if="expandable"
           :class="`w-3 ${expanded ? 'rotate-90' : ''} transition shrink-0 `"
         />
-        <span class="select-all truncate">{{ prop.key }}</span>
+        <span class="select-all truncate" :title="`${prop.key} | ${prop.type}`">
+          {{ prop.key }}
+        </span>
       </div>
       <div v-if="!expandable" class="col-span-2 truncate select-all">
         {{ prop.value }}
       </div>
-      <div v-if="expandable" class="col-span-2 truncate">
+      <div
+        v-if="expandable"
+        class="col-span-2 truncate flex items-center justify-between"
+      >
         {{ prop.type }}
         <span v-if="prop.type === 'array'" class="text-foreground-2 text-xs">
           ({{ arrayLen }})
         </span>
+        <span v-if="isDetached" class="select-all truncate mr-1">
+          <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
+          <a
+            title="detached object - click to open in a new tab"
+            :href="selectionLink"
+            target="_blank"
+            class="hover:text-primary"
+          >
+            <ArrowUpRightIcon class="w-3" />
+          </a>
+        </span>
       </div>
     </div>
     <div v-if="expandable && expanded" class="w-full pl-1 pt-2">
@@ -32,7 +48,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ChevronRightIcon } from '@heroicons/vue/20/solid'
+import { ChevronRightIcon, ArrowUpRightIcon } from '@heroicons/vue/20/solid'
+import { modelRoute } from '~/lib/common/helpers/route'
+import { useInjectedViewerState } from '~/lib/viewer/composables/setup'
 const props = defineProps<{
   prop: {
     key: string
@@ -41,6 +59,8 @@ const props = defineProps<{
   }
 }>()
 
+const { projectId } = useInjectedViewerState()
+
 const expanded = ref(false)
 
 const expandable = computed(() => {
@@ -61,4 +81,14 @@ const handleExpand = () => {
   if (!expandable.value) return
   expanded.value = !expanded.value
 }
+
+const isDetached = computed(() => {
+  return !!(props.prop.value as { referencedId: string }).referencedId
+})
+
+const selectionLink = computed(() => {
+  const refId = (props.prop.value as { referencedId: string }).referencedId
+  if (!refId) return
+  return modelRoute(projectId.value, refId)
+})
 </script>