f-4087/update: add download by clicking on the icon on tooltip

f-4087/update: enhance key binding style

src/shared/components/ResourceEditor/ResourceEditor.less

@@ -205,6 +205,7 @@
       height: 24px;
       margin-left: 10px;
       color: @fusion-primary-color;
+      cursor: pointer;
     }
     .key-binding {
       margin-left: 10px;
@@ -220,3 +221,18 @@
   gap: 20px;
   width: 100%;
 }
+
+kbd {
+  background-color: #eee;
+  border-radius: 3px;
+  border: 1px solid #b4b4b4;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  color: #333;
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}

src/shared/components/ResourceEditor/useEditorTooltip.tsx

@@ -19,7 +19,9 @@ const downloadImg = require('../../images/DownloadingLoop.svg');
 type TTooltipCreator = Pick<
   TEditorPopoverResolvedData,
   'error' | 'resolvedAs' | 'results'
->;
+> & {
+  onDownload?: () => void;
+};
 
 function removePopoversFromDOM() {
   const popovers = document.querySelectorAll(
@@ -39,10 +41,12 @@ function createTooltipNode({
   tag,
   title,
   isDownloadable,
+  onDownload,
 }: {
   tag: string | null;
   title: string;
   isDownloadable?: boolean;
+  onDownload?: (ev: MouseEvent) => void;
 }) {
   const tooltipItemContent = document.createElement('div');
   tooltipItemContent.className = 'CodeMirror-hover-tooltip-item';
@@ -59,20 +63,32 @@ function createTooltipNode({
     const nodeDownload = document.createElement('img');
     nodeDownload.setAttribute('src', downloadImg);
     nodeDownload.classList.add('download-icon');
-    tooltipItemContent.appendChild(nodeDownload);
+    nodeDownload.onclick = onDownload ?? null;
     const keyBinding = document.createElement('span');
     keyBinding.className = 'key-binding';
     // the user has to click and press option key on mac or alt key on windows
     const userAgent = navigator.userAgent;
     const isMac = userAgent.indexOf('Mac') !== -1;
-    keyBinding.appendChild(
-      document.createTextNode(isMac ? '⌥ + Click' : 'Alt + Click')
-    );
+    const kbdOption = document.createElement('kbd');
+    kbdOption.innerText = isMac ? '⌥' : 'Alt';
+    const plus = document.createElement('span');
+    plus.innerText = ' + ';
+    const kbdClick = document.createElement('kbd');
+    kbdClick.innerText = 'Click';
+    keyBinding.appendChild(kbdOption);
+    keyBinding.appendChild(plus);
+    keyBinding.appendChild(kbdClick);
+    tooltipItemContent.appendChild(nodeDownload);
     tooltipItemContent.appendChild(keyBinding);
   }
   return tooltipItemContent;
 }
-function createTooltipContent({ resolvedAs, error, results }: TTooltipCreator) {
+function createTooltipContent({
+  resolvedAs,
+  error,
+  results,
+  onDownload,
+}: TTooltipCreator) {
   const tooltipContent = document.createElement('div');
   tooltipContent.className = clsx(
     `${CODEMIRROR_HOVER_CLASS}-content`,
@@ -91,6 +107,7 @@ function createTooltipContent({ resolvedAs, error, results }: TTooltipCreator) {
     const result = results as TDELink;
     tooltipContent.appendChild(
       createTooltipNode({
+        onDownload,
         tag: result.resource
           ? `${result.resource?.[0]}/${result.resource?.[1]}`
           : null,
@@ -161,6 +178,7 @@ function useEditorTooltip({
   projectLabel: string;
 }) {
   const nexus = useNexusContext();
+  const { downloadBinaryAsyncHandler } = useResolutionActions();
   const {
     config: { apiEndpoint },
   } = useSelector((state: RootState) => ({
@@ -203,22 +221,20 @@ function useEditorTooltip({
           hideTooltip(tooltip);
           tooltip.remove();
         }
-        node.removeEventListener('mouseout', cleanup);
         node.removeEventListener('click', cleanup);
-        node.removeEventListener('scroll', cleanup);
+        editorWrapper.removeEventListener('scroll', cleanup);
       }
 
-      node.addEventListener('mouseout', cleanup);
       node.addEventListener('click', cleanup);
-      node.addEventListener('scroll', cleanup);
+      editorWrapper.addEventListener('scroll', cleanup);
 
       const timeoutId: ReturnType<typeof setTimeout> = setTimeout(() => {
         if (tooltip) {
           hideTooltip(tooltip);
           tooltip.remove();
         }
         return clearTimeout(timeoutId);
-      }, 2000);
+      }, 3000);
 
       return tooltip;
     }
@@ -241,6 +257,22 @@ function useEditorTooltip({
               resolvedAs,
               error,
               results,
+              onDownload:
+                resolvedAs === 'resource' && (results as TDELink).isDownloadable
+                  ? () => {
+                      const result = results as TDELink;
+                      if (result.isDownloadable) {
+                        return downloadBinaryAsyncHandler({
+                          orgLabel: result.resource?.[0]!,
+                          projectLabel: result.resource?.[1]!,
+                          resourceId: result.resource?.[2]!,
+                          ext: result.resource?.[4] ?? 'json',
+                          title: result.title,
+                        });
+                      }
+                      return;
+                    }
+                  : undefined,
             });
             if (tooltipContent) {
               node.classList.remove('wait-for-tooltip');