feat: resource dialog enhancements (#356)

* feat: resource dialog enhancements

* update

web/src/components/ResourcesDialog.tsx

@@ -1,5 +1,5 @@
 import copy from "copy-to-clipboard";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useLoading from "../hooks/useLoading";
 import { resourceService } from "../services";
@@ -10,6 +10,7 @@ import showPreviewImageDialog from "./PreviewImageDialog";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
 import "../less/resources-dialog.less";
+import * as utils from "../helpers/utils";
 
 type Props = DialogProps;
 
@@ -120,6 +121,20 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
     });
   };
 
+  const handleResourceNameOrTypeMouseEnter = useCallback((event: React.MouseEvent, nameOrType: string) => {
+    const tempDiv = document.createElement("div");
+    tempDiv.className = "usage-detail-container pop-up";
+    const bounding = utils.getElementBounding(event.target as HTMLElement);
+    tempDiv.style.left = bounding.left + "px";
+    tempDiv.style.top = bounding.top - 2 + "px";
+    tempDiv.innerHTML = `<span>${nameOrType}</span>`;
+    document.body.appendChild(tempDiv);
+  }, []);
+
+  const handleResourceNameOrTypeMouseLeave = useCallback(() => {
+    document.body.querySelectorAll("div.usage-detail-container.pop-up").forEach((node) => node.remove());
+  }, []);
+
   return (
     <>
       <div className="dialog-header-container">
@@ -145,9 +160,9 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
         ) : (
           <div className="resource-table-container">
             <div className="fields-container">
-              <span className="field-text">ID</span>
+              <span className="field-text id-text">ID</span>
               <span className="field-text name-text">NAME</span>
-              <span className="field-text">TYPE</span>
+              <span className="field-text type-text">TYPE</span>
               <span></span>
             </div>
             {state.resources.length === 0 ? (
@@ -155,9 +170,23 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
             ) : (
               state.resources.map((resource) => (
                 <div key={resource.id} className="resource-container">
-                  <span className="field-text">{resource.id}</span>
+                  <span className="field-text id-text">{resource.id}</span>
-                  <span className="field-text name-text">{resource.filename}</span>
+                  <span className="field-text name-text">
-                  <span className="field-text">{resource.type}</span>
+                    <span
+                      onMouseEnter={(e) => handleResourceNameOrTypeMouseEnter(e, resource.filename)}
+                      onMouseLeave={handleResourceNameOrTypeMouseLeave}
+                    >
+                      {resource.filename}
+                    </span>
+                  </span>
+                  <span className="field-text type-text">
+                    <span
+                      onMouseEnter={(e) => handleResourceNameOrTypeMouseEnter(e, resource.type)}
+                      onMouseLeave={handleResourceNameOrTypeMouseLeave}
+                    >
+                      {resource.type}
+                    </span>
+                  </span>
                   <div className="buttons-container">
                     <Dropdown
                       actionsClassName="!w-28"

web/src/less/resources-dialog.less

@@ -4,7 +4,7 @@
   @apply px-4;
 
   > .dialog-container {
-    @apply w-128 max-w-full mb-8;
+    @apply w-180 max-w-full mb-8;
 
     > .dialog-content-container {
       @apply flex flex-col justify-start items-start w-full;
@@ -29,7 +29,7 @@
         @apply flex flex-col justify-start items-start w-full;
 
         > .fields-container {
-          @apply px-2 py-2 w-full grid grid-cols-5 border-b;
+          @apply px-2 py-2 w-full grid grid-cols-10 border-b;
 
           > .field-text {
             @apply font-mono text-gray-400;
@@ -41,7 +41,7 @@
         }
 
         > .resource-container {
-          @apply px-2 py-2 w-full grid grid-cols-5;
+          @apply px-2 py-2 w-full grid grid-cols-10;
 
           > .buttons-container {
             @apply w-full flex flex-row justify-end items-center;
@@ -51,9 +51,17 @@
         .field-text {
           @apply w-full truncate text-base pr-2 last:pr-0;
 
-          &.name-text {
+          &.id-text {
             @apply col-span-2;
           }
+
+          &.name-text {
+            @apply col-span-4;
+          }
+
+          &.type-text {
+            @apply col-span-3;
+          }
         }
       }
     }