v1.9.2

Develop v1.9.2

Author: bilalesi

package.json

@@ -11,7 +11,7 @@
     "start": "NODE_ENV=development  DEBUG=* webpack --mode development --config-name server && node dist/server.js",
     "build": "NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192  webpack --mode production",
     "test": "jest",
-    "test:watch": "jest --watch",
+    "test:watch": "jest --watch --maxWorkers=4",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "test-ui": "API_ENDPOINT=http://test start-server-and-test start http://localhost:8000 cy:run",
@@ -211,7 +211,10 @@
     ],
     "globals": {
       "FUSION_VERSION": "1.0.0",
-      "COMMIT_HASH": "9013fa343"
+      "COMMIT_HASH": "9013fa343",
+      "ts-jest": {
+        "isolatedModules": true
+      }
     },
     "watchPathIgnorePatterns": [
       "node_modules"

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/Icons/LeftSpeedArrow.tsx

@@ -0,0 +1,36 @@
+import { SVGProps } from 'react';
+
+const LeftSpeedArrow = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M11.92 19.92L4 12l7.92-7.92l1.41 1.42l-5.5 5.5H22v2H7.83l5.51 5.5l-1.42 1.42M4 12V2H2v20h2V12Z"
+      ></path>
+    </svg>
+  );
+};
+const LeftArrow = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20v-2z"
+      ></path>
+    </svg>
+  );
+};
+export { LeftArrow };
+export default LeftSpeedArrow;

src/shared/components/Icons/RightSpeedArrow.tsx

@@ -0,0 +1,37 @@
+import { SVGProps } from 'react';
+
+const RightSpeedArrow = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M12.08 4.08L20 12l-7.92 7.92l-1.41-1.42l5.5-5.5H2v-2h14.17l-5.5-5.5l1.41-1.42M20 12v10h2V2h-2v10Z"
+      ></path>
+    </svg>
+  );
+};
+
+const RightArrow = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="m12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8l-8-8z"
+      ></path>
+    </svg>
+  );
+};
+export { RightArrow };
+export default RightSpeedArrow;

src/shared/components/ResourceEditor/CodeEditor.tsx

@@ -38,6 +38,7 @@ const CodeEditor = forwardRef<codemiror.Editor | undefined, TCodeEditor>(
               foldCode: true,
               indentUnit: INDENT_UNIT,
               gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+              lineWiseCopyCut: true,
               extraKeys: {
                 'Ctrl-Q': keyFoldCode,
               },

src/shared/components/ResourceEditor/ResourceEditor.less

@@ -61,6 +61,29 @@
   color: @error-color;
 }
 
+.CodeMirror-url-copy {
+  cursor: pointer !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999 !important;
+  width: 25px !important;
+  height: 25px !important;
+  border-radius: 4px !important;
+  padding: 0px !important;
+  background-color: #fff !important;
+  border: 1px solid rgba(#333, 0.12) !important;
+  box-shadow: 0 2px 12px 0 rgba(#333, 0.12) !important;
+  &.copied {
+    width: max-content !important;
+    padding: 2px 4px !important;
+  }
+  .copied {
+    color: #333 !important;
+    margin-left: 3px;
+  }
+}
+
 .code-mirror-editor {
   .cm-fusion-resource-link:not(.cm-property) {
     color: #0974ca !important;
@@ -205,7 +228,9 @@
       height: 24px;
       margin-left: 10px;
       color: @fusion-primary-color;
+      cursor: pointer;
     }
+
     .key-binding {
       margin-left: 10px;
       color: @fusion-primary-color;
@@ -220,3 +245,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/editorUtils.ts

@@ -31,6 +31,7 @@ export type TEditorPopoverResolvedData = {
   left: number;
   results?: TDELink | TDELink[];
   resolvedAs: TEditorPopoverResolvedAs;
+  resolver?: 'resolver-api' | 'search-api';
   error?: any;
 };
 type TDeltaError = Error & {
@@ -48,6 +49,7 @@ type TReturnedResolvedData = Omit<
 export const LINE_HEIGHT = 15;
 export const INDENT_UNIT = 4;
 export const CODEMIRROR_HOVER_CLASS = 'CodeMirror-hover-tooltip';
+export const CODEMIRROR_COPY_URL_CLASS = 'CodeMirror-url-copy';
 export const CODEMIRROR_LINK_CLASS = 'fusion-resource-link';
 const NEAR_BY = [0, 0, 0, 5, 0, -5, 5, 0, -5, 0];
 const isDownloadableLink = (resource: Resource) => {
@@ -104,6 +106,7 @@ export function getTokenAndPosAt(e: MouseEvent, current: CodeMirror.Editor) {
     if (token && url === text) {
       return {
         url,
+        pos,
         coords: {
           left: editorRect.left,
           top: coords.top + LINE_HEIGHT,
@@ -187,6 +190,7 @@ export async function editorLinkResolutionHandler({
       // next-action: open resource editor
       return {
         resolvedAs: 'resource',
+        resolver: 'resolver-api',
         results: {
           isDownloadable,
           _self: details._self,
@@ -217,6 +221,7 @@ export async function editorLinkResolutionHandler({
         const entity = getOrgAndProjectFromResourceObject(result);
         return {
           resolvedAs: 'resource',
+          resolver: 'search-api',
           results: {
             isDownloadable,
             _self: result._self,
@@ -233,6 +238,7 @@ export async function editorLinkResolutionHandler({
       // next-action: open resources list in the popover
       return {
         resolvedAs: 'resources',
+        resolver: 'search-api',
         results: details._results.map((item: Resource) => {
           const isDownloadable = isDownloadableLink(item);
           const entity = getOrgAndProjectFromResourceObject(item);