Change SliceName to slice-name because of replacement in the backend

Signed-off-by: gatici <[email protected]>
canonical · Nov 8, 2024 · 43bf58a · 43bf58a
1 parent 9fc8dbe
commit 43bf58a
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 21 deletions.
diff --git a/app/(network)/network-configuration/page.tsx b/app/(network)/network-configuration/page.tsx
@@ -117,13 +117,13 @@ const NetworkConfiguration = () => {
         {networkSlices.length > 0 && (
           <>
               {networkSlices.map((slice) => (
-                <Card key={slice.SliceName}>
-                  <h2 className="p-heading--5">{slice.SliceName}</h2>
+                <Card key={slice["slice-name"]}>
+                  <h2 className="p-heading--5">{slice["slice-name"]}</h2>
                   <NetworkSliceTable slice={slice} />
                   <hr />
                   <div className="u-align--right">
                     {getEditButton(slice)}
-                    {getDeleteButton(slice.SliceName, slice["site-device-group"])}
+                    {getDeleteButton(slice["slice-name"], slice["site-device-group"])}
                   </div>
                 </Card>
               ))}

diff --git a/components/NetworkSliceGroups.tsx b/components/NetworkSliceGroups.tsx
@@ -38,7 +38,7 @@ export const NetworkSliceGroups: React.FC<NetworkSliceTableProps> = ({
     }));
   };
   const { data: deviceGroupContent = [], isLoading } = useQuery({
-    queryKey: [queryKeys.deviceGroups, slice.SliceName, slice["site-device-group"]?.join(",")],
+    queryKey: [queryKeys.deviceGroups, slice["slice-name"], slice["site-device-group"]?.join(",")],
     queryFn: () => getDeviceGroupsFromNetworkSlice(slice),
     enabled: isExpanded,
   });
@@ -163,7 +163,7 @@ export const NetworkSliceGroups: React.FC<NetworkSliceTableProps> = ({
                 content:
                   (<div className="u-align--right">
                     {getEditButton(deviceGroup_id)}
-                    {getDeleteButton(deviceGroup?.["group-name"], deviceGroup?.["imsis"] , slice.SliceName)}
+                    {getDeleteButton(deviceGroup?.["group-name"], deviceGroup?.["imsis"] , slice["slice-name"])}
                   </div>
                   ),
                 className: "u-align--right",

diff --git a/components/NetworkSliceModal.tsx b/components/NetworkSliceModal.tsx
@@ -62,7 +62,7 @@ const NetworkSliceModal = ({ networkSlice, toggleModal }: NetworkSliceModalProps
   });
 
   const modalTitle = () => {
-      return networkSlice?.SliceName ? ("Edit Network Slice: " + networkSlice.SliceName) : "Create Network Slice"
+      return networkSlice?.["slice-name"] ? ("Edit Network Slice: " + networkSlice?.["slice-name"]) : "Create Network Slice"
   }
 
   const buttonText = () => {
@@ -81,7 +81,7 @@ const NetworkSliceModal = ({ networkSlice, toggleModal }: NetworkSliceModalProps
     initialValues: {
       mcc: networkSlice?.["site-info"]["plmn"].mcc || "",
       mnc: networkSlice?.["site-info"]["plmn"].mnc || "",
-      name: networkSlice?.SliceName || "",
+      name: networkSlice?.["slice-name"] || "",
       upf: getUpfFromNetworkSlice(),
       gnbList: networkSlice?.["site-info"].gNodeBs || [],
     },

diff --git a/components/NetworkSliceTable.tsx b/components/NetworkSliceTable.tsx
@@ -27,17 +27,17 @@ export const NetworkSliceTable: React.FC<NetworkSliceTableProps> = ({
       queryKey: [queryKeys.networkSlices],
     });
     await queryClient.invalidateQueries({
-      queryKey: [queryKeys.deviceGroups, slice.SliceName],
+      queryKey: [queryKeys.deviceGroups, slice["slice-name"]],
     });
   };
 
   return (
     <>
-      {isModalVisible && slice?.SliceName && (
+      {isModalVisible && slice?.["slice-name"] && (
         <DeviceGroupModal
           toggleModal={toggleModal}
           onDeviceGroupAction={handleDeviceGroupCreated}
-          networkSliceName={slice.SliceName}
+          networkSliceName={slice["slice-name"]}
         />
       )}
       <MainTable
@@ -60,7 +60,7 @@ export const NetworkSliceTable: React.FC<NetworkSliceTableProps> = ({
                 className: "u-align--right",
               },
             ],
-            key: `mcc-${slice.SliceName}`,
+            key: `mcc-${slice["slice-name"]}`,
           },
           {
             columns: [
@@ -70,7 +70,7 @@ export const NetworkSliceTable: React.FC<NetworkSliceTableProps> = ({
                 className: "u-align--right",
               },
             ],
-            key: `mnc-${slice.SliceName}`,
+            key: `mnc-${slice["slice-name"]}`,
           },
           {
             columns: [
@@ -83,7 +83,7 @@ export const NetworkSliceTable: React.FC<NetworkSliceTableProps> = ({
                 className: "u-align--right",
               },
             ],
-            key: `upf-${slice.SliceName}`,
+            key: `upf-${slice["slice-name"]}`,
           },
           {
             columns: [
@@ -94,7 +94,7 @@ export const NetworkSliceTable: React.FC<NetworkSliceTableProps> = ({
                 className: "u-align--right",
               },
             ],
-            key: `gNodeBs-${slice.SliceName}`,
+            key: `gNodeBs-${slice["slice-name"]}`,
           },
           {
             columns: [
@@ -149,7 +149,7 @@ export const NetworkSliceTable: React.FC<NetworkSliceTableProps> = ({
               <NetworkSliceGroups slice={slice} isExpanded={isExpanded} />
             ),
             expanded: isExpanded,
-            key: `device-groups-${slice.SliceName}`,
+            key: `device-groups-${slice["slice-name"]}`,
           },
         ]}
       />

diff --git a/components/SubscriberModal.tsx b/components/SubscriberModal.tsx
@@ -45,7 +45,7 @@ const SubscriberModal = ({ toggleModal, subscriber, slices, deviceGroups}: Props
   const oldNetworkSlice = slices.find(
     (slice) => slice["site-device-group"]?.includes(oldDeviceGroupName)
   );
-  const oldNetworkSliceName : string = oldNetworkSlice ? oldNetworkSlice["SliceName"] : "";
+  const oldNetworkSliceName : string = oldNetworkSlice ? oldNetworkSlice["slice-name"] : "";
 
   const SubscriberSchema = Yup.object().shape({
     imsi: Yup.string()
@@ -130,7 +130,7 @@ const SubscriberModal = ({ toggleModal, subscriber, slices, deviceGroups}: Props
   };
 
   const selectedSlice = slices.find(
-    (slice) => slice.SliceName === formik.values.selectedSlice,
+    (slice) => slice["slice-name"] === formik.values.selectedSlice,
   );
 
   const setDeviceGroup = useCallback(
@@ -148,7 +148,7 @@ const SubscriberModal = ({ toggleModal, subscriber, slices, deviceGroups}: Props
       : [];
 
   useEffect(() => {
-    if (subscriber && selectedSlice && oldNetworkSliceName == selectedSlice.SliceName) {
+    if (subscriber && selectedSlice && oldNetworkSliceName == selectedSlice["slice-name"]) {
       setDeviceGroup(oldDeviceGroupName);
     }
     else if (selectedSlice && selectedSlice["site-device-group"]?.length === 1){
@@ -245,8 +245,8 @@ const SubscriberModal = ({ toggleModal, subscriber, slices, deviceGroups}: Props
               value: "",
             },
             ...slices.map((slice) => ({
-              label: slice.SliceName,
-              value: slice.SliceName,
+              label: slice["slice-name"],
+              value: slice["slice-name"],
             })),
           ]}
         />

diff --git a/components/types.tsx b/components/types.tsx
@@ -1,6 +1,6 @@
 export type NetworkSlice = {
   name: string;
-  SliceName: string;
+  "slice-name": string;
   "slice-id": {
     sst: string;
     sd: string;