chore: Update API key functionality when creating model

Author: steverydz

static/js/publisher/pages/Models/CreateModelForm.tsx

@@ -9,7 +9,6 @@ import { checkModelNameExists, setPageTitle } from "../../utils";
 
 import {
   modelsListState,
-  newModelState,
   filteredModelsListState,
 } from "../../state/modelsState";
 import {
@@ -33,7 +32,8 @@ function CreateModelForm({
   const location = useLocation();
   const { id } = useParams();
   const brandId = useAtomValue(brandIdState);
-  const [newModel, setNewModel] = useAtom(newModelState);
+  const [newModelName, setNewModelName] = useState("");
+  const [apiKey, setApiKey] = useState("");
   const stores = useAtom(brandStoresState);
   const currentStore = stores[0].find((store: Store) => store.id === id);
   const modelsList = useAtomValue(filteredModelsListState);
@@ -47,10 +47,11 @@ function CreateModelForm({
     setShowErrorNotification(true);
     setIsSaving(false);
     setModelsList((oldModelsList: Array<Model>) => {
-      return oldModelsList.filter((model) => model.name !== newModel.name);
+      return oldModelsList.filter((model) => model.name !== newModelName);
     });
     navigate(`/admin/${id}/models`);
-    setNewModel({ name: "", apiKey: "" });
+    setNewModelName("");
+    setApiKey("");
     setTimeout(() => {
       setShowErrorNotification(false);
     }, 5000);
@@ -66,8 +67,8 @@ function CreateModelForm({
       formData.set("name", newModel.name);
       formData.set("api_key", newModel.apiKey);
 
-      setNewModel({ name: "", apiKey: "" });
-
+      setNewModelName("");
+      setApiKey("");
       setModelsList((oldModelsList: Array<Model>) => {
         return [
           {
@@ -115,7 +116,7 @@ function CreateModelForm({
     <form
       onSubmit={(event) => {
         event.preventDefault();
-        mutation.mutate({ name: newModel.name, apiKey: newModel.apiKey });
+        mutation.mutate({ name: newModelName, apiKey });
       }}
       style={{ height: "100%" }}
     >
@@ -144,14 +145,13 @@ function CreateModelForm({
               placeholder="e.g. display-name-123"
               label="Name"
               help="Name should contain lowercase alphanumeric characters and hyphens only"
-              value={newModel.name}
+              value={newModelName}
               onChange={(e) => {
-                const value = e.target.value;
-                setNewModel({ ...newModel, name: value });
+                setNewModelName(e.target.value);
               }}
               error={
-                checkModelNameExists(newModel.name, modelsList)
-                  ? `Model ${newModel.name} already exists`
+                checkModelNameExists(newModelName, modelsList)
+                  ? `Model ${newModelName} already exists`
                   : null
               }
               required
@@ -160,21 +160,20 @@ function CreateModelForm({
               type="text"
               id="api-key-field"
               label="API key"
-              value={newModel.apiKey}
-              placeholder="yx6dnxsWQ3XUB5gza8idCuMvwmxtk1xBpa9by8TuMit5dgGnv"
+              value={apiKey}
               className="read-only-dark"
-              readOnly
+              required
+              maxLength={50}
+              onChange={(e) => {
+                setApiKey(e.target.value);
+              }}
+              help={`API key should be 50 alphanumeric characters long (${apiKey.length}/50)`}
             />
             <Button
               type="button"
               className="u-no-margin--bottom"
               onClick={() => {
-                setNewModel({
-                  ...newModel,
-                  apiKey: randomstring.generate({
-                    length: 50,
-                  }),
-                });
+                setApiKey(randomstring.generate({ length: 50 }));
               }}
             >
               Generate key
@@ -188,7 +187,8 @@ function CreateModelForm({
                 className="p-button u-no-margin--bottom"
                 to={`/admin/${id}/models`}
                 onClick={() => {
-                  setNewModel({ name: "", apiKey: "" });
+                  setNewModelName("");
+                  setApiKey("");
                   setShowErrorNotification(false);
                 }}
               >
@@ -199,8 +199,9 @@ function CreateModelForm({
                 appearance="positive"
                 className="u-no-margin--bottom u-no-margin--right"
                 disabled={
-                  !newModel.name ||
-                  checkModelNameExists(newModel.name, modelsList)
+                  !newModelName ||
+                  apiKey.length !== 50 ||
+                  checkModelNameExists(newModelName, modelsList)
                 }
               >
                 Add model

static/js/publisher/pages/Models/__tests__/CreateModelForm.test.tsx

@@ -30,24 +30,54 @@ const renderComponent = () => {
 };
 
 describe("CreateModelForm", () => {
-  it("disables 'Add model' button if no new model name", async () => {
+  it("disables 'Add model' button if no new model name or API key", async () => {
     renderComponent();
     expect(screen.getByRole("button", { name: "Add model" })).toHaveAttribute(
       "aria-disabled",
       "true",
     );
   });
 
-  it("enables 'Add model' button if there is a new model name", async () => {
+  it("disables 'Add model' button if new model name but no API key", async () => {
     const user = userEvent.setup();
     renderComponent();
     await user.type(
       screen.getByRole("textbox", { name: "Name" }),
       "test-model-name",
     );
+    expect(screen.getByRole("button", { name: "Add model" })).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("disables 'Add model' button if new API key but no new model name", async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.type(
+      screen.getByRole("textbox", { name: "API key" }),
+      "AJXdC7aAMrQfElvccQAV0lPkJ0bEnmdjDxuL6C1Di0kxILmiyk",
+    );
+    expect(screen.getByRole("button", { name: "Add model" })).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("enables 'Add model' button if there is a new model name and API key", async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.type(
+      screen.getByRole("textbox", { name: "Name" }),
+      "test-model-name",
+    );
+    await user.type(
+      screen.getByRole("textbox", { name: "API key" }),
+      "AJXdC7aAMrQfElvccQAV0lPkJ0bEnmdjDxuL6C1Di0kxILmiyk",
+    );
     expect(
       screen.getByRole("button", { name: "Add model" }),
-    ).not.toBeDisabled();
+    ).not.toHaveAttribute("aria-disabled");
   });
 
   it("generates an API key when clicking 'Generate key'", async () => {