fix: LOPS-322: [FE] Update CandidateTask preview to handle text

src/components/CandidateTaskView/CandidateTaskView.js

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import React, { forwardRef, useCallback, useRef } from "react";
 import { Block, Elem } from "../../utils/bem";
+import { Spinner } from "../Common/Spinner";
 import "./CandidateTaskView.styl";
 import { getRoot } from "mobx-state-tree";
 import { useEffect, useState } from "react";
@@ -12,17 +13,51 @@ const imgDefaultProps = {};
 if (isFF(FF_LSDV_4711)) imgDefaultProps.crossOrigin = 'anonymous';
 
 const DataItemVisual = forwardRef(({ columns, dataKey, data }, imageRef) => {
+  const [isInProgress, setIsInProgress] = useState();
+  const [fileContent, setFileContent] = useState();
+  const [isFileError, setIsFileError] = useState(false);
+  const isUrlData = /https?:\/\/.*/.test(data);
   const columnDefinition = columns.find(colData => colData.alias === dataKey);
 
+  useEffect(async () => {
+    if ( isUrlData && columnDefinition?.currentType === "Text" ) {
+      setIsInProgress(true);
+      setIsFileError(false);
+      const response = await fetch(data);
+
+      if (response.status === 200) {
+        setFileContent(response);
+      } else {
+        console.error("Error:", response);
+        setIsFileError(true);
+      }
+      setIsInProgress(false);
+    }
+  }, [isUrlData, data, columnDefinition]);
+
   if (columnDefinition?.currentType === "Image") {
     return (
       <Elem name="data-display" mod={{ image: true }}>
         <img {...imgDefaultProps} ref={imageRef} src={data} />
       </Elem>
     );
+  } else if (columnDefinition?.currentType === "Text" && isUrlData && !isFileError) {
+    return (
+      <Elem name="data-display" mod={{ text: true }}>
+        {isInProgress ? <Spinner /> : (
+          <Elem name='textdata' tag="pre">
+            {fileContent}
+          </Elem>
+        )}
+      </Elem>
+    );
+  } else if (isUrlData) {
+    <Elem name="data-display" mod={{ link: true }} >
+      <a href={data} target="_blank">{data}</a>
+    </Elem>;
   }
   return (
-    <Elem name="data-display" mod={{ text: true }} >
+    <Elem name="data-display" mod={{ [columnDefinition?.currentType ?? "text"]: true }} >
       {data}
     </Elem>
   );

src/components/Common/Spinner.js

@@ -4,21 +4,21 @@ import Running from "../../assets/running";
 
 const injector = inject(({ store }) => {
   return {
-    SDK: store.SDK,
+    SDK: store?.SDK,
   };
 });
 
 export const Spinner = injector(({ SDK, visible = true, ...props }) => {
   const size = React.useMemo(() => {
     switch (props.size) {
       case "large":
-        return SDK.spinnerSize?.large ?? 128;
+        return SDK?.spinnerSize?.large ?? 128;
       case "middle":
-        return SDK.spinnerSize?.middle ??48;
+        return SDK?.spinnerSize?.middle ?? 48;
       case "small":
-        return SDK.spinnerSize?.small ?? 24;
+        return SDK?.spinnerSize?.small ?? 24;
       default:
-        return SDK.spinnerSize?.middle ??48;
+        return SDK?.spinnerSize?.middle ?? 48;
     }
   }, [props.size]);
 
@@ -32,7 +32,7 @@ export const Spinner = injector(({ SDK, visible = true, ...props }) => {
     objectFit: "contain",
   };
 
-  const ExternalSpinner = SDK.spinner;
+  const ExternalSpinner = SDK?.spinner;
 
   return visible ? (
     <div