From f2e60c33393459c9a90a2002a1692eb9ed57632c Mon Sep 17 00:00:00 2001
From: Guillaume Belanger <guillaume.belanger@canonical.com>
Date: Wed, 29 Nov 2023 12:23:38 -0500
Subject: [PATCH] fix: Subscriber page crashes when webui returns nil (#193)

---
 components/CreateSubscriberModal.tsx | 70 +++++++++++++++++++---------
 pages/api/subscriber/index.ts        | 15 +++---
 utils/createSubscriber.tsx           |  3 --
 3 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/components/CreateSubscriberModal.tsx b/components/CreateSubscriberModal.tsx
index baec786c..c2fb4310 100644
--- a/components/CreateSubscriberModal.tsx
+++ b/components/CreateSubscriberModal.tsx
@@ -31,14 +31,22 @@ const CreateSubscriberModal = ({ toggleModal }: Props) => {
   const queryClient = useQueryClient();
 
   const SubscriberSchema = Yup.object().shape({
-    imsi: Yup.string().min(14).max(15)
-      .matches(/^[0-9]+$/, { message: 'Only numbers are allowed.'})
+    imsi: Yup.string()
+      .min(14)
+      .max(15)
+      .matches(/^[0-9]+$/, { message: "Only numbers are allowed." })
       .required("IMSI must be 14 or 15 digits"),
-    opc: Yup.string().length(32)
-      .matches(/^[A-Za-z0-9]+$/, { message: 'Only alphanumeric characters are allowed.'})
+    opc: Yup.string()
+      .length(32)
+      .matches(/^[A-Za-z0-9]+$/, {
+        message: "Only alphanumeric characters are allowed.",
+      })
       .required("OPC must be a 32 character hexadecimal"),
-    key: Yup.string().length(32)
-      .matches(/^[A-Za-z0-9]+$/, { message: 'Only alphanumeric characters are allowed.'})
+    key: Yup.string()
+      .length(32)
+      .matches(/^[A-Za-z0-9]+$/, {
+        message: "Only alphanumeric characters are allowed.",
+      })
       .required("Key must be a 32 character hexadecimal"),
     sequenceNumber: Yup.string().required("Sequence number is required"),
     deviceGroup: Yup.string().required(""),
@@ -57,7 +65,6 @@ const CreateSubscriberModal = ({ toggleModal }: Props) => {
     onSubmit: async (values) => {
       await createSubscriber({
         imsi: values.imsi,
-        plmnId: "20893",
         opc: values.opc,
         key: values.key,
         sequenceNumber: values.sequenceNumber,
@@ -73,27 +80,39 @@ const CreateSubscriberModal = ({ toggleModal }: Props) => {
     queryFn: getNetworkSlices,
   });
 
-  const selectedSlice = slices.find((slice) => slice.SliceName === formik.values.selectedSlice);
+  const selectedSlice = slices.find(
+    (slice) => slice.SliceName === formik.values.selectedSlice,
+  );
 
-  const setDeviceGroup = useCallback((deviceGroup: string) => {
-    if (formik.values.deviceGroup !== deviceGroup) {
-      formik.setFieldValue("deviceGroup", deviceGroup);
-    }
-  }, [formik]);
+  const setDeviceGroup = useCallback(
+    (deviceGroup: string) => {
+      if (formik.values.deviceGroup !== deviceGroup) {
+        formik.setFieldValue("deviceGroup", deviceGroup);
+      }
+    },
+    [formik],
+  );
 
   useEffect(() => {
-    if (selectedSlice && selectedSlice["site-device-group"] && selectedSlice["site-device-group"].length === 1) {
+    if (
+      selectedSlice &&
+      selectedSlice["site-device-group"] &&
+      selectedSlice["site-device-group"].length === 1
+    ) {
       setDeviceGroup(selectedSlice["site-device-group"][0]);
     } else {
       setDeviceGroup("");
     }
   }, [slices, selectedSlice, setDeviceGroup]);
 
-  const setSelectedSlice = useCallback((newSlice: string) => {
-    if (formik.values.selectedSlice !== newSlice) {
-      formik.setFieldValue("selectedSlice", newSlice);
-    }
-  }, [formik]);
+  const setSelectedSlice = useCallback(
+    (newSlice: string) => {
+      if (formik.values.selectedSlice !== newSlice) {
+        formik.setFieldValue("selectedSlice", newSlice);
+      }
+    },
+    [formik],
+  );
 
   useEffect(() => {
     if (!selectedSlice && slices.length > 0) {
@@ -101,7 +120,10 @@ const CreateSubscriberModal = ({ toggleModal }: Props) => {
     }
   }, [slices, selectedSlice, setSelectedSlice]);
 
-  const deviceGroupOptions = selectedSlice && selectedSlice["site-device-group"] ? selectedSlice["site-device-group"] : [];
+  const deviceGroupOptions =
+    selectedSlice && selectedSlice["site-device-group"]
+      ? selectedSlice["site-device-group"]
+      : [];
 
   return (
     <Modal
@@ -162,7 +184,9 @@ const CreateSubscriberModal = ({ toggleModal }: Props) => {
           stacked
           required
           {...formik.getFieldProps("sequenceNumber")}
-          error={formik.touched.sequenceNumber ? formik.errors.sequenceNumber : null}
+          error={
+            formik.touched.sequenceNumber ? formik.errors.sequenceNumber : null
+          }
         />
         <Select
           id="network-slice"
@@ -170,7 +194,9 @@ const CreateSubscriberModal = ({ toggleModal }: Props) => {
           stacked
           required
           {...formik.getFieldProps("selectedSlice")}
-          error={formik.touched.selectedSlice ? formik.errors.selectedSlice : null}
+          error={
+            formik.touched.selectedSlice ? formik.errors.selectedSlice : null
+          }
           options={[
             {
               disabled: true,
diff --git a/pages/api/subscriber/index.ts b/pages/api/subscriber/index.ts
index 22fb1afe..959d6f3f 100644
--- a/pages/api/subscriber/index.ts
+++ b/pages/api/subscriber/index.ts
@@ -1,9 +1,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
 
-
 const WEBUI_ENDPOINT = process.env.WEBUI_ENDPOINT;
 
-
 export default async function handleSubscribers(req: NextApiRequest, res: NextApiResponse) {
   switch (req.method) {
     case "GET":
@@ -14,7 +12,6 @@ export default async function handleSubscribers(req: NextApiRequest, res: NextAp
   }
 }
 
-
 async function handleGET(req: NextApiRequest, res: NextApiResponse) {
   const url = `${WEBUI_ENDPOINT}/api/subscriber/`;
 
@@ -27,18 +24,20 @@ async function handleGET(req: NextApiRequest, res: NextApiResponse) {
     });
 
     if (!response.ok) {
-      throw new Error(
-        `Error retrieving subscriber. Error code: ${response.status}`
-      );
+      throw new Error(`Error retrieving subscriber. Error code: ${response.status}`);
     }
 
-    const data = await response.json();
+    let data = await response.json();
+
+    if (!Array.isArray(data) || data.length === 0) {
+      data = [];
+    }
 
     res.status(200).json(data);
   } catch (error) {
     console.error("Error details:", error);
     res.status(500).json({
-      error: "An error occurred while retrieving subscriber",
+      error: "An error occurred while retrieving subscribers",
     });
   }
 }
diff --git a/utils/createSubscriber.tsx b/utils/createSubscriber.tsx
index 73027e43..bc62fb4e 100644
--- a/utils/createSubscriber.tsx
+++ b/utils/createSubscriber.tsx
@@ -1,6 +1,5 @@
 interface CreateSubscriberArgs {
   imsi: string;
-  plmnId: string;
   opc: string;
   key: string;
   sequenceNumber: string;
@@ -9,7 +8,6 @@ interface CreateSubscriberArgs {
 
 export const createSubscriber = async ({
   imsi,
-  plmnId,
   opc,
   key,
   sequenceNumber,
@@ -17,7 +15,6 @@ export const createSubscriber = async ({
 }: CreateSubscriberArgs) => {
   const subscriberData = {
     UeId: imsi,
-    plmnId: plmnId,
     opc: opc,
     key: key,
     sequenceNumber: sequenceNumber,