Calibration procedure progress indicator

app/__tests__/unit/root.test.tsx

@@ -9,7 +9,7 @@ describe("root loader", () => {
       params: {},
       context: {},
     });
-    const data = await response.json();
+    const data = await response;
     expect(data).toEqual({
       theme: "dark",
       ENV: {
@@ -29,7 +29,7 @@ describe("root loader", () => {
       params: {},
       context: {},
     });
-    const data = await response.json();
+    const data = await response;
     expect(data.theme).toEqual("light");
   });
 });

app/components/CalibratorActionForm.client.tsx

@@ -93,7 +93,11 @@ function CustomSubmitButton(props: SubmitButtonProps) {
   const { uiSchema } = props;
   const { norender } = getSubmitButtonOptions(uiSchema);
   if (norender) {
-    return null;
+    return (
+      <div className="card-actions justify-end align-bottom">
+        <div className={`btn btn-disabled`}>done</div>
+      </div>
+    );
   }
 
   return (
@@ -113,6 +117,7 @@ export default function CalibratorActionForm({
   action: {
     input_schema: { properties: object } | RJSFSchema;
     description: string;
+    is_complete: boolean;
   };
   index: number;
   dispatchAction: (action: FormData) => void;
@@ -125,13 +130,20 @@ export default function CalibratorActionForm({
     description: "",
   };
 
+  const uiSchema = {
+    "ui:submitButtonOptions": {
+      norender: action.is_complete,
+    },
+  };
+
   return (
     <div className="card bg-base-100 shadow-xl">
       <div className="card-body flex-1">
         <Form
           className="flex flex-col gap-4 flex-1 justify-between"
           validator={validator}
           schema={schemaToUse}
+          uiSchema={uiSchema}
           onSubmit={({ formData }) => {
             dispatchAction(formData);
           }}

app/components/EditJson.client.tsx

@@ -6,6 +6,8 @@ import {
   JsonEditor,
   NodeData,
   TypeFilterFunction,
+  githubDarkTheme,
+  githubLightTheme,
 } from "json-edit-react";
 import { loader as rootLoader } from "~/root";
 import { checkType } from "~/utils/checkType";
@@ -24,7 +26,7 @@ export function EditJson({
     theme: "dark",
   };
 
-  const editorTheme = theme === "dark" ? "githubDark" : "githubLight";
+  const editorTheme = theme === "dark" ? githubDarkTheme : githubLightTheme;
 
   const customizeText = ({ key, value }: NodeData) => {
     switch (key) {

app/components/HardwareTable.tsx

@@ -87,10 +87,10 @@ export function HardwareTable({
             {allButton}
           </div>
         </td>
-        <td className="flex justify-end">
+        <td className="flex justify-end font-sans">
           <Link
             className={clsx(
-              "btn btn-outline ",
+              "btn btn-outline",
               key === hardwareName &&
                 currentPath === "calibrate" &&
                 "btn-active",

app/components/VialGrid.tsx

@@ -9,7 +9,7 @@ const DataTable = ({
 }: {
   id: string;
   vialIndex: number;
-  data: { [key: string]: number | null };
+  data: { [key: string]: number };
   excludedProperties?: string[];
 }) => {
   return (
@@ -26,7 +26,7 @@ const DataTable = ({
         </thead>
         <tbody>
           {Object.keys(data).map((mainKey) =>
-            Object.keys(data[mainKey]).map((subKey, subIndex) => {
+            Object.keys(data[mainKey]).map((subKey: string, subIndex) => {
               let renderSubKey = true;
               if (excludedProperties.includes(subKey)) {
                 renderSubKey = false;
@@ -58,9 +58,8 @@ const DataTable = ({
                   )}
                   {renderSubKey && (
                     <td>
-                      {data[mainKey][subKey] !== null &&
-                        data[mainKey][subKey].toString()}
-                      {data[mainKey][subKey] == null && "-"}
+                      {data[mainKey][subKey]}
+                      {!data[mainKey][subKey] && "-"}
                     </td>
                   )}
                 </tr>
@@ -116,14 +115,12 @@ export function VialGrid({
           <span className="block text-[5vw] leading-none">{index}</span>
         </div>
         {hasData && (
-          <div className="relative z-10">
-            <DataTable
-              data={data}
-              id={id}
-              vialIndex={index}
-              excludedProperties={excludedProperties}
-            />
-          </div>
+          <DataTable
+            data={data}
+            id={id}
+            vialIndex={index}
+            excludedProperties={excludedProperties}
+          />
         )}
       </div>
     );

app/components/__tests__/unit/EditJson.test.tsx

@@ -1,7 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { createRemixStub } from "@remix-run/testing";
-import { json } from "@remix-run/node";
 import { data } from "./testData";
 import { EditJson } from "../../EditJson.client";
 
@@ -10,7 +9,7 @@ const RemixStub = createRemixStub([
     path: "/",
     Component: () => <EditJson data={data} mode="view" setData={() => null} />,
     loader() {
-      return json({ theme: "dark" });
+      return { theme: "dark" };
     },
   },
 ]);

app/components/__tests__/unit/Navbar.test.tsx

@@ -2,14 +2,13 @@ import { render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
 import Navbar from "~/components/Navbar";
 import { createRemixStub } from "@remix-run/testing";
-import { json } from "@remix-run/node";
 
 const RemixStub = createRemixStub([
   {
     path: "/",
     Component: () => <Navbar pathname="/devices/list" />,
     loader() {
-      return json({ theme: "dark" });
+      return { theme: "dark" };
     },
   },
 ]);

app/components/__tests__/unit/ThemeController.test.tsx

@@ -1,15 +1,14 @@
 import { render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { createRemixStub } from "@remix-run/testing";
-import { json } from "@remix-run/node";
 import ThemeController from "~/components/ThemeController";
 
 const RemixStub = createRemixStub([
   {
     path: "/",
     Component: () => <ThemeController />,
     loader: () => {
-      return json({ theme: "dark" });
+      return { theme: "dark" };
     },
   },
 ]);

app/root.tsx

@@ -6,7 +6,6 @@ import {
   Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
-  json,
   useLoaderData,
   useLocation,
   useMatches,
@@ -66,7 +65,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
     // succeed anyway the local device is already in the db
   }
   // make the theme available to the client side, daisy ui uses it to set the theme
-  return json({ theme: cookie.theme, ENV: getClientEnv() });
+  return { theme: cookie.theme, ENV: getClientEnv() };
 }
 
 export default function App() {

app/routes/devices.$id.config.tsx

@@ -112,7 +112,6 @@ export async function action({ request }: ActionFunctionArgs) {
         }
         return redirect(`/devices/${id}/config?mode=view`);
       } catch (error) {
-        console.log("IDK", error);
         return submission.reply({
           formErrors: [
             "unable to update device",