AAP-30986: Support deletion of WCA API_KEY from Admin Portal (Fronten…

…d) (#1333)

ansible_ai_connect_admin_portal/config/webpack.mock.api.keys.modelids.ts

@@ -0,0 +1,132 @@
+import {
+  delay,
+  DELAY_MS,
+  ERROR_DESCRIPTION,
+  ORG_ID,
+} from "./webpack.mock.globals";
+
+const webpackMockServer = require("webpack-mock-server");
+
+export default webpackMockServer.add((app, helper) => {
+  const KEY_FIELD = "key";
+  const MODEL_ID_FIELD = "model_id";
+  const LAST_UPDATED_FIELD = "last_update";
+
+  const keys = new Map<string, { key: string; last_update: Date }>();
+  const modelIds = new Map<string, { model_id: string; last_update: Date }>();
+
+  //API KEY RELATED ENDPOINTS
+  app.get("/api/v0/wca/apikey/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (keys.has(ORG_ID)) {
+      // Key response only contains the Last Updated field
+      const data = keys.get(ORG_ID);
+      res.json({ last_update: data[LAST_UPDATED_FIELD] });
+    } else {
+      res.json({});
+    }
+  });
+
+  app.get("/api/v0/wca/apikey/test/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (!keys.has(ORG_ID)) {
+      res.sendStatus(404);
+      return;
+    } else {
+      const data = keys.get(ORG_ID);
+      const key = data[KEY_FIELD];
+      if (key === "error-test") {
+        // Emulate a server-side error
+        res.status(500).json({ detail: ERROR_DESCRIPTION });
+        return;
+      }
+      if (key === "invalid-test") {
+        // Emulate an invalid API Key
+        res.sendStatus(400);
+        return;
+      }
+    }
+    res.sendStatus(200);
+  });
+
+  app.post("/api/v0/wca/apikey/", async (_req, res) => {
+    await delay(DELAY_MS);
+    const key = _req.body["key"];
+    if (key === "error") {
+      // Emulate a server-side error
+      res.status(500).json({ detail: ERROR_DESCRIPTION });
+      return;
+    }
+    if (key === "invalid") {
+      // Emulate an invalid API Key
+      res.sendStatus(400);
+      return;
+    }
+    const entry = { key: key, last_update: new Date() };
+    keys.set(ORG_ID, entry);
+    res.sendStatus(200);
+  });
+
+  app.delete("/api/v0/wca/apikey/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (keys.has(ORG_ID)) {
+      keys.delete(ORG_ID);
+      if (modelIds.has(ORG_ID)) {
+        modelIds.delete(ORG_ID);
+      }
+      res.sendStatus(200);
+    } else {
+      res.sendStatus(400);
+    }
+  });
+
+  //MODEL ID RELATED ENDPOINTS
+  app.get("/api/v0/wca/modelid/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (modelIds.has(ORG_ID)) {
+      res.json(modelIds.get(ORG_ID));
+    } else {
+      res.json({});
+    }
+  });
+
+  app.get("/api/v0/wca/modelid/test/", async (_req, res) => {
+    await delay(DELAY_MS);
+    if (!modelIds.has(ORG_ID)) {
+      res.sendStatus(404);
+      return;
+    } else {
+      const data = modelIds.get(ORG_ID);
+      const modelId = data[MODEL_ID_FIELD];
+      if (modelId === "error-test") {
+        // Emulate a server-side error
+        res.status(500).json({ detail: ERROR_DESCRIPTION });
+        return;
+      }
+      if (modelId === "invalid-test") {
+        // Emulate an invalid Model Id
+        res.sendStatus(400);
+        return;
+      }
+    }
+    res.sendStatus(200);
+  });
+
+  app.post("/api/v0/wca/modelid/", async (_req, res) => {
+    await delay(DELAY_MS);
+    const modelId = _req.body[MODEL_ID_FIELD];
+    if (modelId === "error") {
+      // Emulate a server-side error
+      res.status(500).json({ detail: ERROR_DESCRIPTION });
+      return;
+    }
+    if (modelId === "invalid") {
+      // Emulate an invalid Model Id
+      res.sendStatus(400);
+      return;
+    }
+    const entry = { model_id: modelId, last_update: new Date() };
+    modelIds.set(ORG_ID, entry);
+    res.sendStatus(200);
+  });
+});

ansible_ai_connect_admin_portal/config/webpackDevServer.config.js

@@ -124,8 +124,7 @@ module.exports = function (proxy, allowedHost) {
         logRequests: false,
         logResponses: false,
         entry: [
-          "config/webpack.mock.api.keys.ts",
-          "config/webpack.mock.api.modelids.ts",
+          "config/webpack.mock.api.keys.modelids.ts",
           "config/webpack.mock.api.telemetry.ts",
         ],
       });

ansible_ai_connect_admin_portal/public/static/console/static/locales/en/translation.json

@@ -10,9 +10,11 @@
   "APIKey": "IBM Cloud API Key",
   "APIKeyTooltip": "Used to authenticate with IBM watsonx Code Assistant.",
   "APIKeyDescription": "The API Key for IBM watsonx Code Assistant.",
+  "APIKeyDeletionConfirmation": "Are you sure you want to delete your IBM Cloud API Key?",
   "NoAPIKey": "No API Key has been submitted.",
   "AddAPIKey": "Add API Key",
   "UpdateAPIKey": "Update Key",
+  "DeleteAPIKey": "Delete Key",
   "ModelId": "Model Id",
   "ModelIdTooltip": "Used to control which Model is used for inference.",
   "ModelIdDescription": "The Id of the IBM watsonx Code Assistant Model to use for inference.",
@@ -28,6 +30,7 @@
   "HideText": "Hide",
   "KeyInvalidAlert": "IBM Cloud API key is invalid. Update the key to a valid value or your organization will be unable to use IBM watsonx Code Assistant.",
   "KeyError": "The key could not be saved.",
+  "KeyDeletionError": "The key could not be deleted",
   "KeyValidationError": "The key could not be validated.",
   "KeyValidationSuccess": "IBM Cloud API Key is valid.",
   "AddModelIdTitle": "Add Model Id",
@@ -40,6 +43,7 @@
   "ModelIdValidationTrialExpired": "Your trial to the generative AI model has expired. Refer to your IBM Cloud Account to re-enable access to the IBM watsonx Code Assistant.",
   "Save": "Save",
   "Cancel": "Cancel",
+  "Delete": "Delete",
   "SecretValue": "***********************************",
   "LastUpdated": "Last updated",
   "Loading": "Loading content",

ansible_ai_connect_admin_portal/src/ModelSettings.css

@@ -15,3 +15,7 @@
 .Loading {
     height: 200px;
 }
+
+.Hidden {
+    visibility: hidden;
+}

ansible_ai_connect_admin_portal/src/ModelSettings.tsx

@@ -43,6 +43,13 @@ export function ModelSettings() {
             setReloadWcaModelId(false);
             setMode("SET_MODEL_ID");
           }}
+          reload={() => {
+            setWcaKey({ status: "SUCCESS_NOT_FOUND" });
+            setWcaModelId({ status: "SUCCESS_NOT_FOUND" });
+            setReloadWcaKey(false);
+            setReloadWcaModelId(false);
+            setMode("OVERVIEW");
+          }}
         />
       )}
       {mode === "SET_WCA_KEY" && (