Merge pull request #1189 from navikt/ORG-1577-fix-bug-where-paowner-i…

…s-not-included-in-put Fix bug where paowner is not included in all PUT requests
navikt · Sep 19, 2023 · c570154 · c570154
2 parents 87abf2e + 881bc4e
commit c570154
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 54 deletions.
diff --git a/apps/frontend/src/api/productAreaApi.ts b/apps/frontend/src/api/productAreaApi.ts
@@ -46,12 +46,12 @@ export const createProductArea = async (productarea: ProductAreaSubmitValues) =>
   }
 };
 
-export const editProductArea = async (productarea: ProductAreaSubmitValues) => {
+export const putProductArea = async (productAreaId: string, productarea: ProductAreaSubmitValues) => {
   ampli.logEvent("teamkatalog_edit_productarea");
-  return (await axios.put<ProductArea>(`${env.teamCatalogBaseUrl}/productarea/${productarea.id}`, productarea)).data;
+  return (await axios.put<ProductArea>(`${env.teamCatalogBaseUrl}/productarea/${productAreaId}`, productarea)).data;
 };
 
-export const mapProductAreaToFormValues = (productArea?: ProductArea) => {
+export function mapProductAreaToFormValues(productArea?: ProductArea): ProductAreaFormValues {
   let resourceList: OptionType[] = [];
   let ownerResourceId;
   if (productArea && productArea.paOwnerGroup) {
@@ -65,7 +65,8 @@ export const mapProductAreaToFormValues = (productArea?: ProductArea) => {
     }));
   }
 
-  const productAreaForm: ProductAreaFormValues = {
+  return {
+    id: productArea?.id,
     name: productArea?.name || "",
     areaType: productArea?.areaType || AreaType.OTHER,
     description: productArea?.description || "",
@@ -93,5 +94,43 @@ export const mapProductAreaToFormValues = (productArea?: ProductArea) => {
     ownerGroupResourceList: resourceList,
     ownerResourceId: ownerResourceId,
   };
-  return productAreaForm;
-};
+}
+
+export function mapProductAreaToSubmitValues(data: ProductAreaFormValues): ProductAreaSubmitValues {
+  const tagsMapped = data.tags.map((t: OptionType) => t.value);
+  let ownerNavId;
+  const ownerGroupMemberNavIdList =
+    data.ownerGroupResourceList.map((r) => {
+      return r.value;
+    }) || [];
+
+  if (data.ownerResourceId) {
+    ownerNavId = data.ownerResourceId.value;
+    return {
+      id: data?.id,
+      name: data.name,
+      status: data.status,
+      description: data.description,
+      areaType: data.areaType,
+      slackChannel: data?.slackChannel,
+      tags: tagsMapped,
+      ownerGroup:
+        data.areaType === AreaType.PRODUCT_AREA
+          ? {
+              ownerNavId: ownerNavId,
+              ownerGroupMemberNavIdList: ownerGroupMemberNavIdList,
+            }
+          : undefined,
+    };
+  }
+
+  return {
+    id: data?.id,
+    name: data.name,
+    status: data.status,
+    description: data.description,
+    areaType: data.areaType,
+    slackChannel: data?.slackChannel,
+    tags: tagsMapped,
+  };
+}
diff --git a/apps/frontend/src/pages/area/ModalArea.tsx b/apps/frontend/src/pages/area/ModalArea.tsx
@@ -15,10 +15,11 @@ import {
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
+import { mapProductAreaToSubmitValues } from "../../api/productAreaApi";
 import { getResourceById, useResourceSearch } from "../../api/resourceApi";
 import { useTagSearch } from "../../api/tagApi";
 import { BasicCreatableSelect, BasicSelect, SelectLayoutWrapper } from "../../components/select/CustomSelectComponents";
-import type { OptionType, ProductAreaFormValues, ProductAreaSubmitValues, Resource } from "../../constants";
+import type { ProductAreaFormValues, ProductAreaSubmitValues, Resource } from "../../constants";
 import { AreaType, Status } from "../../constants";
 import { markdownLink } from "../../util/config";
 import { intl } from "../../util/intl/intl";
@@ -87,45 +88,6 @@ export const ModalArea = (properties: ModalAreaProperties) => {
     },
   });
 
-  const mapDataToSubmit = (data: ProductAreaFormValues) => {
-    const tagsMapped = data.tags.map((t: OptionType) => t.value);
-    let ownerNavId;
-    const ownerGroupMemberNavIdList =
-      data.ownerGroupResourceList.map((r) => {
-        return r.value;
-      }) || [];
-
-    if (data.ownerResourceId) {
-      ownerNavId = data.ownerResourceId.value;
-      return {
-        id: data?.id,
-        name: data.name,
-        status: data.status,
-        description: data.description,
-        areaType: data.areaType,
-        slackChannel: data?.slackChannel,
-        tags: tagsMapped,
-        ownerGroup:
-          data.areaType === AreaType.PRODUCT_AREA
-            ? {
-                ownerNavId: ownerNavId,
-                ownerGroupMemberNavIdList: ownerGroupMemberNavIdList,
-              }
-            : undefined,
-      };
-    }
-
-    return {
-      id: data?.id,
-      name: data.name,
-      status: data.status,
-      description: data.description,
-      areaType: data.areaType,
-      slackChannel: data?.slackChannel,
-      tags: tagsMapped,
-    };
-  };
-
   useEffect(() => {
     (async () => {
       let ownerResponse;
@@ -407,8 +369,8 @@ export const ModalArea = (properties: ModalAreaProperties) => {
             </div>
           )}
 
-          <div className=".sticky-modal-actions">
-            <Button onClick={handleSubmit((data) => onSubmitForm(mapDataToSubmit(data)))} type="submit">
+          <div className="sticky-modal-actions">
+            <Button onClick={handleSubmit((data) => onSubmitForm(mapProductAreaToSubmitValues(data)))} type="submit">
               Lagre
             </Button>
 

diff --git a/apps/frontend/src/pages/area/ProductAreaPage.tsx b/apps/frontend/src/pages/area/ProductAreaPage.tsx
@@ -6,7 +6,12 @@ import { useParams } from "react-router-dom";
 
 import { getAllClusters } from "../../api/clusterApi";
 import { NotificationType } from "../../api/notificationApi";
-import { editProductArea, getProductArea, mapProductAreaToFormValues } from "../../api/productAreaApi";
+import {
+  getProductArea,
+  mapProductAreaToFormValues,
+  mapProductAreaToSubmitValues,
+  putProductArea,
+} from "../../api/productAreaApi";
 import { AllCharts } from "../../components/charts/AllCharts";
 import { CardContainer, ClusterCard } from "../../components/common/Card";
 import { DescriptionSection } from "../../components/common/DescriptionSection";
@@ -65,8 +70,12 @@ export const ProductAreaPage = () => {
     }
   }, [productArea]);
 
-  const handleSubmit = async (values: ProductAreaSubmitValues) => {
-    const response = await editProductArea({ ...values, id: productArea?.id });
+  const handleSubmit = async (productAreaSubmitValues: ProductAreaSubmitValues) => {
+    if (!productArea) {
+      throw new Error("productArea must be defined");
+    }
+
+    const response = await putProductArea(productArea.id, productAreaSubmitValues);
     if (response.id) {
       setShowModal(false);
       await productAreasQuery.refetch();
@@ -79,8 +88,9 @@ export const ProductAreaPage = () => {
         throw new Error("productArea must be defined");
       }
 
-      return await editProductArea({
-        ...productArea,
+      // TODO: ProductArea PUT request/response and form input vs form submit values are a proper mess and should be fixed some day
+      return await putProductArea(productArea.id, {
+        ...mapProductAreaToSubmitValues(mapProductAreaToFormValues(productArea)),
         members: updatedMemberList,
         areaType: productArea.areaType || AreaType.OTHER,
       });

diff --git a/apps/frontend/src/pages/cluster/ModalCluster.tsx b/apps/frontend/src/pages/cluster/ModalCluster.tsx
@@ -254,7 +254,7 @@ export const ModalCluster = (properties: ModalAreaProperties) => {
             </div>
           </div>
 
-          <div className=".sticky-modal-actions">
+          <div className="sticky-modal-actions">
             <Button onClick={handleSubmit((data) => onSubmitForm(mapDataToSubmit(data)))} type="submit">
               Lagre
             </Button>