Merge branch 'develop' into f-4085/warning-not-resolvable-link

src/shared/App.less

@@ -236,22 +236,34 @@
   align-items: center;
   justify-content: center;
   gap: 10px;
+
   span {
     color: @fusion-blue-8;
   }
+
   .full-screen-switch {
-    border-color: #2e76bf !important;
-    background: linear-gradient(
-        0deg,
-        rgba(0, 58, 140, 0.3),
-        rgba(0, 58, 140, 0.3)
-      ),
+    border: 1px solid #2e76bf !important;
+    background: white;
+
+    .ant-switch-handle {
+      top: 1px;
+
+      &::before {
+        background: @fusion-blue-8;
+      }
+    }
+  }
+
+  .full-screen-switch.ant-switch-checked {
+    border: 1px solid #2e76bf !important;
+    background: linear-gradient(0deg, @fusion-blue-8, @fusion-blue-8),
       linear-gradient(0deg, rgba(46, 118, 191, 0.2), rgba(46, 118, 191, 0.2));
-    border: 1px solid #003a8c4d;
+
     .ant-switch-handle {
       top: 1px;
+
       &::before {
-        background: @fusion-daybreak-10;
+        background: white;
       }
     }
   }

src/shared/components/ImagePreview/ImagePreview.tsx

@@ -21,8 +21,9 @@ import {
   SortDescendingOutlined,
   DownloadOutlined,
 } from '@ant-design/icons';
-import { orderBy, isNil, create, isArray, isObject } from 'lodash';
+import { orderBy, isNil, isArray, isObject } from 'lodash';
 import { parseProjectUrl, parseResourceId } from '../Preview/Preview';
+import nexusUrlHardEncode from '../../utils/nexusEncode';
 
 import './ImagePreview.less';
 
@@ -114,7 +115,7 @@ const fetchImageResources = async ({
       const rawData = await nexus.File.get(
         orgLabel,
         projectLabel,
-        parseResourceId(contentUrl),
+        nexusUrlHardEncode(contentUrl),
         { as: 'blob' }
       );
       const blob = new Blob([rawData as string], {

src/shared/components/Preview/Preview.tsx

@@ -15,6 +15,7 @@ import useNotification from '../../hooks/useNotification';
 import TableViewerContainer from '../../containers/TableViewerContainer';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store/reducers';
+import nexusUrlHardEncode from '../../utils/nexusEncode';
 
 export const parseResourceId = (url: string) => {
   const fileUrlPattern = /files\/([\w-]+)\/([\w-]+)\/(.*)/;
@@ -244,14 +245,14 @@ const Preview: React.FC<{
       contentUrl = url;
       options.rev = parseInt(rev, 10);
     }
+
     try {
       const rawData = await nexus.File.get(
         orgLabel,
         projectLabel,
-        encodeURIComponent(contentUrl),
+        nexusUrlHardEncode(contentUrl),
         options
       );
-
       downloadBlobHelper(rawData, asset.name);
     } catch (error) {
       notification.error({

src/shared/components/ResourceEditor/ResourcesLRUCache.ts

@@ -4,6 +4,16 @@ import LRUCache from 'lru-cache';
 
 // TODO: Use nexus.httpGet to prepare for using http cache headers
 // since the nexus SDK can not accept the headers as an argument
+
+const parseResourceId = (url: string) => {
+  const fileUrlPattern = /files\/([\w-]+)\/([\w-]+)\/(.*)/;
+  if (fileUrlPattern.test(url)) {
+    const [, , , resourceId] = url.match(fileUrlPattern) as string[];
+    return decodeURIComponent(resourceId.split('?rev=')[0]);
+  }
+  return decodeURIComponent(url);
+};
+
 const lookByProjectResolver = async ({
   nexus,
   apiEndpoint,
@@ -18,7 +28,9 @@ const lookByProjectResolver = async ({
   resourceId: string;
 }): Promise<Resource> => {
   return await nexus.httpGet({
-    path: `${apiEndpoint}/resolvers/${orgLabel}/${projectLabel}/_/${resourceId}`,
+    path: `${apiEndpoint}/resolvers/${orgLabel}/${projectLabel}/_/${encodeURIComponent(
+      parseResourceId(resourceId)
+    )}`,
   });
 };
 const lookBySearchApi = async ({
@@ -31,7 +43,9 @@ const lookBySearchApi = async ({
   resourceId: string;
 }): Promise<TPagedResources> => {
   return await nexus.httpGet({
-    path: `${apiEndpoint}/resources?locate=${resourceId}`,
+    path: `${apiEndpoint}/resources?locate=${encodeURIComponent(
+      parseResourceId(resourceId)
+    )}`,
   });
 };
 

src/shared/components/ResourceEditor/editorUtils.ts

@@ -174,7 +174,7 @@ export async function editorLinkResolutionHandler({
         apiEndpoint,
         orgLabel,
         projectLabel,
-        resourceId: encodeURIComponent(url),
+        resourceId: url,
       },
     }));
   }

src/shared/components/ResourceEditor/useResolutionActions.tsx

@@ -15,6 +15,7 @@ import {
 import { parseResourceId } from '../Preview/Preview';
 import { download } from '../../utils/download';
 import { getDataExplorerResourceItemArray } from './editorUtils';
+import nexusUrlHardEncode from '../../utils/nexusEncode';
 
 const useResolvedLinkEditorPopover = () => {
   const nexus = useNexusContext();
@@ -76,7 +77,7 @@ const useResolvedLinkEditorPopover = () => {
       const data = await nexus.File.get(
         orgLabel,
         projectLabel,
-        encodeURIComponent(parseResourceId(resourceId)),
+        nexusUrlHardEncode(parseResourceId(resourceId)),
         { as: 'blob' }
       );
       return download(title, ext ?? 'json', data);

src/shared/containers/AnalysisPlugin/AnalysisPluginContainer.tsx

@@ -29,7 +29,8 @@ import {
   AnalysisAssetSparqlQueryRowResult,
   ReportGeneration,
 } from '../../types/plugins/report';
-import useNotification from '../../../shared/hooks/useNotification';
+import useNotification from '../../hooks/useNotification';
+import nexusUrlHardEncode from '../../utils/nexusEncode';
 
 async function fetchImageObjectUrl(
   nexus: NexusClient,
@@ -41,7 +42,7 @@ async function fetchImageObjectUrl(
   const rawData = await nexus.File.get(
     orgLabel,
     projectLabel,
-    encodeURIComponent(imageResourceId),
+    nexusUrlHardEncode(imageResourceId),
     {
       as: 'blob',
     }

src/shared/containers/ResourceActionsContainer.tsx

@@ -154,12 +154,15 @@ const ResourceActionsContainer: React.FunctionComponent<{
     },
     downloadFile: async () => {
       try {
-        const data = await nexus.File.get(
-          orgLabel,
-          projectLabel,
-          parseResourceId(resource._self),
-          { as: 'blob' }
-        );
+        const data = await nexus.httpGet({
+          path: resource._self,
+          headers: {
+            Accept: 'application/json',
+          },
+          context: {
+            as: 'blob',
+          },
+        });
         return download(
           resource._filename || getResourceLabel(resource),
           resource._mediaType,

src/shared/containers/TableViewerContainer.tsx

@@ -5,7 +5,8 @@ import * as csvParser from 'csv-string';
 
 import TableViewer from '../components/TableViewer';
 import useNotification from '../hooks/useNotification';
-import { parseResourceId } from '../../shared/components/Preview/Preview';
+import { parseResourceId } from '../components/Preview/Preview';
+import nexusUrlHardEncode from '../utils/nexusEncode';
 
 const TableViewerContainer: React.FC<{
   resourceUrl: string;
@@ -27,7 +28,7 @@ const TableViewerContainer: React.FC<{
     await nexus.File.get(
       orgLabel,
       projectLabel,
-      encodeURIComponent(resourceId),
+      nexusUrlHardEncode(resourceId),
       {
         as: 'text',
       }

src/shared/molecules/DataExplorerGraphFlowMolecules/NavigationStackItem.tsx

@@ -99,23 +99,7 @@ const NavigationStackItem = ({
       }
     >
       {collapseRightBtn()}
-      <div className="navigation-stack-item__wrapper">
-        <Tooltip
-          placement="bottomRight"
-          overlayClassName="navigation-item-tooltip"
-          title={
-            <div>
-              {orgProject && <Tag>{orgProject}</Tag>}
-              <span className="tooltip-self">{decodeURIComponent(_self)}</span>
-            </div>
-          }
-        >
-          <FullscreenOutlined
-            className="icon"
-            role="open-navigation-item"
-            onClick={onClick}
-          />
-        </Tooltip>
+      <div className="navigation-stack-item__wrapper" onClick={onClick}>
         {orgProject && <span className="org-project">{orgProject}</span>}
         {title && <div className="title">{title}</div>}
         {types && (

src/shared/molecules/DataExplorerGraphFlowMolecules/styles.less

@@ -16,11 +16,18 @@
     justify-items: center;
     justify-content: center;
     align-content: start;
-    padding: 3px 5px;
+    padding: 10px 5px;
     height: 100%;
     min-height: 0;
     background-color: @fusion-main-bg;
     position: relative;
+    user-select: none;
+    cursor: pointer;
+    &:hover {
+      background-color: white;
+      color: @fusion-primary-color;
+      box-shadow: 0 2px 12px rgba(#333, 0.12);
+    }
 
     &.more {
       background-color: white;
@@ -53,7 +60,7 @@
     .org-project {
       writing-mode: vertical-rl;
       transform: rotate(-180deg);
-      background-color: #bfbfbfbe;
+      background-color: #bfbfbf7c;
       padding: 5px 1px;
       font-size: 10px;
       border-radius: 4px;
@@ -129,6 +136,7 @@
     &.right {
       border-top-left-radius: 4px;
       border-bottom-left-radius: 4px;
+
       svg {
         transform: rotate(180deg);
       }
@@ -166,21 +174,26 @@
   gap: 5px;
   z-index: 90;
   border: none;
+
   &:hover {
     text-shadow: 0 2px 12px rgba(#333, 0.12);
+
     span {
       color: #377af5;
     }
+
     svg {
       transform: scale(1.1);
       transition: transform 0.2s ease-in-out;
     }
   }
+
   span {
     font-weight: 700;
     font-size: 16px;
     color: @fusion-daybreak-8;
   }
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;

src/shared/molecules/MyDataTable/MyDataTable.tsx

@@ -132,7 +132,7 @@ export const notifyTotalSizeExeeced = () => {
     key: 'data-panel-size-exceeded',
   });
 };
-const getTypesTrancated = (text: string | string[]) => {
+export const getTypesTrancated = (text: string | string[]) => {
   let types = '';
   let typesWithUrl = text;
   if (isArray(text)) {

src/shared/organisms/DataExplorerGraphFlowContent/DataExplorerGraphFlowContent.tsx

@@ -25,11 +25,11 @@ const DataExplorerContentPage = ({}) => {
             rev={current?.resource?.[3]!}
             defaultEditable={false}
             defaultExpanded={false}
-            showMetadataToggle={false}
-            showFullScreen={false}
             tabChange={false}
-            showExpanded={false}
-            showControlPanel={false}
+            showFullScreen={false}
+            showMetadataToggle={true}
+            showExpanded={true}
+            showControlPanel={true}
           />
         </Fragment>
       ) : (

src/shared/organisms/DataExplorerGraphFlowNavigationStack/NavigationStack.spec.tsx

@@ -379,7 +379,7 @@ describe('NavigationStack', () => {
     rerender(app);
     // select by class and role of open-naivation-item
     const forthNodeNavigationItem = container.querySelector(
-      '.navigation-stack-item.left.item-4 .navigation-stack-item__wrapper > .icon[role="open-navigation-item"]'
+      '.navigation-stack-item.left.item-4 .navigation-stack-item__wrapper'
     );
     expect(forthNodeNavigationItem).not.toBeNull();
     expect(forthNodeNavigationItem).toBeInTheDocument();

src/shared/utils/nexusEncode.ts

@@ -0,0 +1,5 @@
+const nexusUrlHardEncode = (url: string): string => {
+  return encodeURIComponent(decodeURIComponent(url));
+};
+
+export default nexusUrlHardEncode;