feat: migrate DataclipViewer

Author: doc-han

assets/js/app.js

@@ -30,13 +30,11 @@ import topbar from '../vendor/topbar.cjs';
 import * as Hooks from './hooks';
 import JobEditor from './job-editor';
 import WorkflowEditor from './workflow-editor';
-import DataclipViewer from './dataclip-viewer';
 import LogViewer from './log-viewer';
 
 let hooks = {
   JobEditor,
   WorkflowEditor,
-  DataclipViewer,
   LogViewer,
   ...Hooks,
 };
@@ -123,6 +121,6 @@ window.liveSocket = liveSocket;
 
 // Testing helper to simulate a reconnect
 window.triggerReconnect = function triggerReconnect(timeout = 5000) {
-  liveSocket.disconnect(() => {});
+  liveSocket.disconnect(() => { });
   setTimeout(liveSocket.connect.bind(liveSocket), timeout);
 };

assets/js/dataclip-viewer/component.tsx

@@ -0,0 +1,53 @@
+import { MonacoEditor } from '#/monaco';
+import { useEffect, useState } from 'react';
+
+async function fetchDataclipContent(dataclipId: string) {
+  try {
+    const response = await fetch(`/dataclip/body/${dataclipId}`, {
+      cache: 'default',
+    });
+    if (!response.ok && response.status !== 304) {
+      throw new Error('Network response was not ok');
+    }
+
+    return await response.text();
+  } catch (error) {
+    console.error('Error fetching content:', error);
+    return 'Failed to load content';
+  }
+}
+
+export const DataclipViewer = ({ dataclipId }: { dataclipId: string }) => {
+  const [content, setContent] = useState<string>('');
+  console.log("farhan:", dataclipId)
+
+  useEffect(() => {
+    fetchDataclipContent(dataclipId).then(setContent);
+  }, [dataclipId]);
+
+  return (
+    <div className='h-full relative'>
+      <MonacoEditor
+        defaultLanguage="json"
+        theme="default"
+        value={content}
+        loading={<div>Loading...</div>}
+        options={{
+          readOnly: true,
+          lineNumbersMinChars: 3,
+          tabSize: 2,
+          scrollBeyondLastLine: false,
+          overviewRulerLanes: 0,
+          overviewRulerBorder: false,
+          fontFamily: 'Fira Code VF',
+          fontSize: 14,
+          fontLigatures: true,
+          minimap: {
+            enabled: false,
+          },
+          wordWrap: 'on',
+        }}
+      />
+    </div>
+  );
+};

assets/js/dataclip-viewer/index.tsx

@@ -20,6 +20,8 @@ defmodule LightningWeb.Components.Viewers do
 
   require Lightning.Run
 
+  import React
+
   @doc """
   Renders out a log line stream
 
@@ -191,21 +193,14 @@ defmodule LightningWeb.Components.Viewers do
   end
 
   attr :id, :string, required: true
-  attr :dataclip, :map, required: true
+  attr :dataclipId, :map, required: true
+
+  # react imports
+  jsx("assets/js/react/components/DataclipViewer.tsx")
 
   def dataclip_viewer(assigns) do
     ~H"""
-    <div
-      id={@id}
-      class="h-full relative"
-      phx-hook="DataclipViewer"
-      phx-update="ignore"
-      data-id={@dataclip.id}
-      data-target={"#{@id}-viewer"}
-    >
-      <.dataclip_type id={"#{@id}-type"} type={@dataclip.type} />
-      <div id={"#{@id}-viewer"} class="h-full"></div>
-    </div>
+    <.DataclipViewer id={@id} dataclipId={@dataclip.id} />
     """
   end