F4085: Warning not resolvable link

src/shared/components/ResourceEditor/ResourceEditor.less

@@ -205,7 +205,9 @@
       height: 24px;
       margin-left: 10px;
       color: @fusion-primary-color;
+      cursor: pointer;
     }
+
     .key-binding {
       margin-left: 10px;
       color: @fusion-primary-color;
@@ -220,3 +222,48 @@
   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;
+}
+
+.CodeMirror-hover-tooltip-warning {
+  .warning-text {
+    background-color: rgba(red, 0.12);
+    margin-top: -4px;
+    padding: 5px 10px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    font-weight: 600;
+  }
+
+  .warning-info {
+    padding: 4px 10px;
+    font-size: 13px;
+    line-height: 18px;
+    color: #0974ca;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 5px;
+    border-bottom: 1px solid #f0efef;
+    margin-bottom: 5px;
+    .warning-info-icon {
+      margin-top: 3px;
+      width: 16px;
+      height: 16px;
+      object-fit: cover;
+    }
+  }
+}

src/shared/components/ResourceEditor/useEditorTooltip.tsx

@@ -3,6 +3,7 @@ import CodeMirror from 'codemirror';
 import clsx from 'clsx';
 import { useNexusContext } from '@bbp/react-nexus';
 import { useSelector } from 'react-redux';
+import * as pluralize from 'pluralize';
 import {
   CODEMIRROR_HOVER_CLASS,
   TEditorPopoverResolvedData,
@@ -15,11 +16,14 @@ import { RootState } from '../../store/reducers';
 import useResolutionActions from './useResolutionActions';
 
 const downloadImg = require('../../images/DownloadingLoop.svg');
+const infoImg = require('../../images/InfoCircleLine.svg');
 
 type TTooltipCreator = Pick<
   TEditorPopoverResolvedData,
   'error' | 'resolvedAs' | 'results'
->;
+> & {
+  onDownload?: () => void;
+};
 
 function removePopoversFromDOM() {
   const popovers = document.querySelectorAll(
@@ -39,10 +43,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 +65,61 @@ 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 createWarningHeader(count: number) {
+  const warningHeader = document.createElement('div');
+  warningHeader.className = 'CodeMirror-hover-tooltip-warning';
+  const warningText = document.createElement('div');
+  warningText.className = 'warning-text';
+  warningText.appendChild(
+    document.createTextNode(
+      `We could not resolve this ID to an existing resource as configured in your project, you might need to create this resource or update the resolver configuration of this project.`
+    )
+  );
+  const warningInfo = document.createElement('div');
+  warningInfo.className = 'warning-info';
+  const warningInfoIcon = document.createElement('img');
+  warningInfoIcon.className = 'warning-info-icon';
+  warningInfoIcon.setAttribute('src', infoImg);
+  warningInfo.appendChild(warningInfoIcon);
+  warningInfo.appendChild(
+    document.createTextNode(
+      `For your information, searching across all projects where you have read access, we found the following matching ${pluralize(
+        'resource',
+        count
+      )}:`
+    )
+  );
+  warningHeader.appendChild(warningText);
+  warningHeader.appendChild(warningInfo);
+  return warningHeader;
+}
+function createTooltipContent({
+  resolvedAs,
+  error,
+  results,
+  onDownload,
+}: TTooltipCreator) {
   const tooltipContent = document.createElement('div');
   tooltipContent.className = clsx(
     `${CODEMIRROR_HOVER_CLASS}-content`,
@@ -89,8 +136,11 @@ function createTooltipContent({ resolvedAs, error, results }: TTooltipCreator) {
   }
   if (resolvedAs === 'resource') {
     const result = results as TDELink;
+    const warningHeader = createWarningHeader(1);
+    tooltipContent.appendChild(warningHeader);
     tooltipContent.appendChild(
       createTooltipNode({
+        onDownload,
         tag: result.resource
           ? `${result.resource?.[0]}/${result.resource?.[1]}`
           : null,
@@ -101,6 +151,8 @@ function createTooltipContent({ resolvedAs, error, results }: TTooltipCreator) {
     return tooltipContent;
   }
   if (resolvedAs === 'resources') {
+    const warningHeader = createWarningHeader((results as TDELink[]).length);
+    tooltipContent.appendChild(warningHeader);
     tooltipContent.appendChild(
       createTooltipNode({
         tag: 'Multiple',
@@ -161,6 +213,7 @@ function useEditorTooltip({
   projectLabel: string;
 }) {
   const nexus = useNexusContext();
+  const { downloadBinaryAsyncHandler } = useResolutionActions();
   const {
     config: { apiEndpoint },
   } = useSelector((state: RootState) => ({
@@ -203,22 +256,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 +292,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');