feat: extend new revert logic to "custom instructions" (#304)

* remove jsonforms

* extract <FormButtons />

* better naming

* reuse form hook for custom instructions

* add pending state for form buttons

* make workspace name uneditable for the default workspace

* add sidenote when workspace cannot be renamed

Author: kantord

eslint.config.js

@@ -238,5 +238,5 @@ export default tseslint.config(
         },
       ],
     },
-  }
+  },
 );

package-lock.json

@@ -28,7 +28,6 @@
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@sinclair/typebox": "^0.34.16",
     "@stacklok/ui-kit": "^1.0.1-1",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-query-devtools": "^5.66.0",

package.json

@@ -0,0 +1,43 @@
+import { FormState } from "@/hooks/useFormState";
+import { Button } from "@stacklok/ui-kit";
+import { FlipBackward } from "@untitled-ui/icons-react";
+
+type Props<T> = {
+  canSubmit: boolean;
+  formErrorMessage?: string;
+  formSideNote?: string;
+  formState: FormState<T>;
+  children?: React.ReactNode;
+  isPending: boolean;
+};
+export function FormButtons<T>({
+  formErrorMessage,
+  formState,
+  canSubmit,
+  isPending,
+  children,
+  formSideNote,
+}: Props<T>) {
+  return (
+    <div className="flex gap-2 items-center">
+      {formSideNote && <div className="p-1 text-secondary">{formSideNote}</div>}
+      {formErrorMessage && (
+        <div className="p-1 text-red-700">{formErrorMessage}</div>
+      )}
+      {formState.isDirty && (
+        <Button variant="tertiary" onPress={formState.resetForm}>
+          <FlipBackward />
+          Revert changes
+        </Button>
+      )}
+      {children}
+      <Button
+        isPending={isPending}
+        isDisabled={!canSubmit || !formState.isDirty || isPending}
+        type="submit"
+      >
+        Save
+      </Button>
+    </div>
+  );
+}

src/components/FormButtons.tsx

@@ -14,8 +14,8 @@ it("shows zero in alerts counts when no alerts", async () => {
         mockConversation({
           alertsConfig: { numAlerts: 0 },
         }),
-      ])
-    )
+      ]),
+    ),
   );
   render(<TableMessages />);
 
@@ -26,12 +26,12 @@ it("shows zero in alerts counts when no alerts", async () => {
   expect(
     screen.getByRole("button", {
       name: /malicious packages count/i,
-    })
+    }),
   ).toHaveTextContent("0");
   expect(
     screen.getByRole("button", {
       name: /secrets count/i,
-    })
+    }),
   ).toHaveTextContent("0");
 });
 
@@ -42,8 +42,8 @@ it("shows count of malicious alerts in row", async () => {
         mockConversation({
           alertsConfig: { numAlerts: 10, type: "malicious" },
         }),
-      ])
-    )
+      ]),
+    ),
   );
   render(<TableMessages />);
 
@@ -54,7 +54,7 @@ it("shows count of malicious alerts in row", async () => {
   expect(
     screen.getByRole("button", {
       name: /malicious packages count/i,
-    })
+    }),
   ).toHaveTextContent("10");
 });
 
@@ -65,8 +65,8 @@ it("shows count of secret alerts in row", async () => {
         mockConversation({
           alertsConfig: { numAlerts: 10, type: "secret" },
         }),
-      ])
-    )
+      ]),
+    ),
   );
   render(<TableMessages />);
 
@@ -77,6 +77,6 @@ it("shows count of secret alerts in row", async () => {
   expect(
     screen.getByRole("button", {
       name: /secrets count/i,
-    })
+    }),
   ).toHaveTextContent("10");
 });

src/features/dashboard-messages/components/__tests__/table-messages.alerts.test.tsx

@@ -12,16 +12,16 @@ it("only displays a limited number of items in the table", async () => {
   server.use(
     http.get(mswEndpoint("/api/v1/workspaces/:workspace_name/messages"), () => {
       return HttpResponse.json(
-        Array.from({ length: 30 }).map(() => mockConversation())
+        Array.from({ length: 30 }).map(() => mockConversation()),
       );
-    })
+    }),
   );
 
   render(<TableMessages />);
 
   await waitFor(() => {
     expect(
-      within(screen.getByTestId("messages-table")).getAllByRole("row")
+      within(screen.getByTestId("messages-table")).getAllByRole("row"),
     ).toHaveLength(16);
   });
 });
@@ -30,9 +30,9 @@ it("allows pagination", async () => {
   server.use(
     http.get(mswEndpoint("/api/v1/workspaces/:workspace_name/messages"), () => {
       return HttpResponse.json(
-        Array.from({ length: 35 }).map(() => mockConversation())
+        Array.from({ length: 35 }).map(() => mockConversation()),
       );
-    })
+    }),
   );
 
   render(<TableMessages />);
@@ -42,10 +42,10 @@ it("allows pagination", async () => {
       await userEvent.click(screen.getByRole("button", { name: /next/i }));
 
       expect(
-        within(screen.getByTestId("messages-table")).getAllByRole("row").length
+        within(screen.getByTestId("messages-table")).getAllByRole("row").length,
       ).toBeLessThan(16);
     },
-    { timeout: 5000 }
+    { timeout: 5000 },
   );
 
   // on the last page, we cannot go further
@@ -63,7 +63,7 @@ it("allows pagination", async () => {
     expect(screen.getByRole("button", { name: /next/i })).toBeEnabled();
 
     expect(
-      within(screen.getByTestId("messages-table")).getAllByRole("row").length
+      within(screen.getByTestId("messages-table")).getAllByRole("row").length,
     ).toEqual(16);
   });
 });

src/features/dashboard-messages/components/__tests__/table-messages.pagination.test.tsx

@@ -12,7 +12,7 @@ it.each(TABLE_MESSAGES_COLUMNS)("contains $children header", async (column) => {
     expect(
       screen.getByRole("columnheader", {
         name: column.children as string,
-      })
+      }),
     ).toBeVisible();
   });
 });

src/features/dashboard-messages/components/__tests__/table-messages.test.tsx

@@ -15,24 +15,24 @@ test("shows correct count of all packages", async () => {
               type: "secret",
               numAlerts: 1,
             },
-          })
+          }),
         ),
         ...Array.from({ length: 13 }).map(() =>
           mockConversation({
             alertsConfig: {
               type: "malicious",
               numAlerts: 1,
             },
-          })
+          }),
         ),
       ]);
-    })
+    }),
   );
 
   const { getByRole } = render(
     <TabsMessages>
       <div>foo</div>
-    </TabsMessages>
+    </TabsMessages>,
   );
 
   await waitFor(() => {
@@ -50,16 +50,16 @@ test("shows correct count of malicious packages", async () => {
               type: "malicious",
               numAlerts: 1,
             },
-          })
-        )
+          }),
+        ),
       );
-    })
+    }),
   );
 
   const { getByRole } = render(
     <TabsMessages>
       <div>foo</div>
-    </TabsMessages>
+    </TabsMessages>,
   );
 
   await waitFor(() => {
@@ -77,16 +77,16 @@ test("shows correct count of secret packages", async () => {
               type: "secret",
               numAlerts: 1,
             },
-          })
-        )
+          }),
+        ),
       );
-    })
+    }),
   );
 
   const { getByRole } = render(
     <TabsMessages>
       <div>foo</div>
-    </TabsMessages>
+    </TabsMessages>,
   );
 
   await waitFor(() => {

src/features/dashboard-messages/components/__tests__/tabs-messages.test.tsx

@@ -2,7 +2,7 @@ import { Conversation } from "@/api/generated";
 
 export function filterMessagesBySubstring(
   conversation: Conversation,
-  substring: string | null
+  substring: string | null,
 ): boolean {
   if (conversation == null) return false;
   if (substring === null) return true;
@@ -14,10 +14,10 @@ export function filterMessagesBySubstring(
       if (curr.answer) acc.push(curr.answer.message);
       return acc;
     },
-    [] as string[]
+    [] as string[],
   );
 
   return [...messages].some((i) =>
-    i?.toLowerCase().includes(substring.toLowerCase())
+    i?.toLowerCase().includes(substring.toLowerCase()),
   );
 }