allow selection of country for named locations

Author: KelvinTegelaar

src/pages/tenant/conditional/list-named-locations/index.js

@@ -11,6 +11,7 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 import { LocationOn } from "@mui/icons-material";
+import countryList from "/src/data/countryList.json";
 
 const Page = () => {
   const pageTitle = "Named Locations";
@@ -62,8 +63,18 @@ const Page = () => {
         namedLocationId: "id",
         change: "!addLocation",
       },
-      fields: [{ type: "textField", name: "input", label: "Country Code" }],
-      confirmText: "Enter a two-letter country code, e.g., US.",
+      fields: [
+        {
+          type: "autoComplete",
+          name: "input",
+          label: "Country",
+          options: countryList.map(({ Code, Name }) => ({
+            value: Code,
+            label: `${Name} (${Code})`,
+          })),
+        },
+      ],
+      confirmText: "Select a country to add to this named location.",
       condition: (row) => row["@odata.type"] == "#microsoft.graph.countryNamedLocation",
     },
     {
@@ -75,8 +86,18 @@ const Page = () => {
         namedLocationId: "id",
         change: "!removeLocation",
       },
-      fields: [{ type: "textField", name: "input", label: "Country Code" }],
-      confirmText: "Enter a two-letter country code, e.g., US.",
+      fields: [
+        {
+          type: "autoComplete",
+          name: "input",
+          label: "Country",
+          options: countryList.map(({ Code, Name }) => ({
+            value: Code,
+            label: `${Name} (${Code})`,
+          })),
+        },
+      ],
+      confirmText: "Select a country to remove from this named location.",
       condition: (row) => row["@odata.type"] == "#microsoft.graph.countryNamedLocation",
     },
     {

src/utils/get-cipp-formatting.js

@@ -32,6 +32,13 @@ import { getCippTranslation } from "./get-cipp-translation";
 import DOMPurify from "dompurify";
 import { getSignInErrorCodeTranslation } from "./get-cipp-signin-errorcode-translation";
 import { CollapsibleChipList } from "../components/CippComponents/CollapsibleChipList";
+import countryList from "../data/countryList.json";
+
+// Helper function to convert country codes to country names
+const getCountryNameFromCode = (countryCode) => {
+  const country = countryList.find((c) => c.Code === countryCode);
+  return country ? country.Name : countryCode;
+};
 
 export const getCippFormatting = (data, cellName, type, canReceive, flatten = true) => {
   const isText = type === "text";
@@ -416,6 +423,19 @@ export const getCippFormatting = (data, cellName, type, canReceive, flatten = tr
     return isText ? data : <CippCopyToClipBoard text={data} type="chip" />;
   }
 
+  if (cellName === "countriesAndRegions") {
+    if (Array.isArray(data)) {
+      const countryNames = data
+        .filter((item) => item !== null && item !== undefined)
+        .map((countryCode) => getCountryNameFromCode(countryCode));
+
+      return isText ? countryNames.join(", ") : renderChipList(countryNames);
+    } else {
+      const countryName = getCountryNameFromCode(data);
+      return isText ? countryName : <CippCopyToClipBoard text={countryName} type="chip" />;
+    }
+  }
+
   if (cellName === "excludedTenants") {
     // Handle null or undefined data
     if (data === null || data === undefined) {