feat(edge/jobs): migrate item view to react [EE-2220] (#11887)

app/react/edge/edge-jobs/ItemView/ItemView.tsx

@@ -0,0 +1,75 @@
+import { ListIcon, WrenchIcon } from 'lucide-react';
+
+import { useIdParam } from '@/react/hooks/useIdParam';
+import { useParamState } from '@/react/hooks/useParamState';
+
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+import { NavTabs } from '@@/NavTabs';
+
+import { useEdgeJob } from '../queries/useEdgeJob';
+
+import { UpdateEdgeJobForm } from './UpdateEdgeJobForm/UpdateEdgeJobForm';
+import { ResultsDatatable } from './ResultsDatatable/ResultsDatatable';
+
+const tabs = [
+  {
+    id: 0,
+    label: 'Configuration',
+    icon: WrenchIcon,
+  },
+  {
+    id: 1,
+    label: 'Results',
+    icon: ListIcon,
+  },
+] as const;
+
+export function ItemView() {
+  const id = useIdParam();
+
+  const [tabId = 0, setTabId] = useParamState('tab', (param) =>
+    param ? parseInt(param, 10) : 0
+  );
+
+  const edgeJobQuery = useEdgeJob(id);
+
+  if (!edgeJobQuery.data) {
+    return null;
+  }
+
+  const edgeJob = edgeJobQuery.data;
+
+  return (
+    <>
+      <PageHeader
+        title="Edge job details"
+        breadcrumbs={[{ label: 'Edge jobs', link: 'edge.jobs' }, edgeJob.Name]}
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <Widget.Body>
+              <NavTabs
+                selectedId={tabId}
+                onSelect={(id) => {
+                  setTabId(id);
+                }}
+                options={tabs}
+              />
+
+              {tabId === tabs[0].id && <UpdateEdgeJobForm edgeJob={edgeJob} />}
+
+              {tabId === tabs[1].id && (
+                <div className="mt-4">
+                  <ResultsDatatable jobId={edgeJob.Id} />
+                </div>
+              )}
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </>
+  );
+}