Merge pull request #3496 from kris6673/unlicensed-message

KelvinTegelaar · web-flow · commit d27a744a2c4d · 2025-01-28T14:07:36.000+01:00
Add User ID display and fallback message for empty license translations
diff --git a/src/components/CippCards/CippUserInfoCard.jsx b/src/components/CippCards/CippUserInfoCard.jsx
@@ -91,6 +91,11 @@ export const CippUserInfoCard = (props) => {
             )
           }
         />
+        <PropertyListItem
+          divider
+          label="User ID"
+          value={isFetching ? <Skeleton variant="text" width={120} /> : user?.id || "N/A"}
+        />
         <PropertyListItem
           divider
           label="Email Address"
diff --git a/src/pages/identity/administration/users/user/bec.jsx b/src/pages/identity/administration/users/user/bec.jsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { ApiGetCall } from "/src/api/ApiCall";
 import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
 import CalendarIcon from "@heroicons/react/24/outline/CalendarIcon";
-import { CheckCircle, Download, Mail } from "@mui/icons-material";
+import { CheckCircle, Download, Mail, Fingerprint } from "@mui/icons-material";
 import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
 import tabOptions from "./tabOptions";
 import ReactTimeAgo from "react-time-ago";
@@ -142,34 +142,32 @@ const Page = () => {
     return "No mailbox permission changes found.";
   };
 
+  const subtitle = userRequest.isSuccess
+    ? [
+        {
+          icon: <Mail />,
+          text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.userPrincipalName} />,
+        },
+        {
+          icon: <Fingerprint />,
+          text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.id} />,
+        },
+        {
+          icon: <CalendarIcon />,
+          text: (
+            <>
+              Created: <ReactTimeAgo date={new Date(userRequest.data?.[0]?.createdDateTime)} />
+            </>
+          ),
+        },
+      ]
+    : [];
+
   return (
     <HeaderedTabbedLayout
       tabOptions={tabOptions}
       title={userRequest.isSuccess ? userRequest.data?.[0]?.displayName : ""}
-      subtitle={
-        userRequest.isSuccess
-          ? [
-              {
-                icon: <Mail />,
-                text: (
-                  <CippCopyToClipBoard
-                    type="chip"
-                    text={userRequest.data?.[0]?.userPrincipalName}
-                  />
-                ),
-              },
-              {
-                icon: <CalendarIcon />,
-                text: (
-                  <>
-                    Created:{" "}
-                    <ReactTimeAgo date={new Date(userRequest.data?.[0]?.createdDateTime)} />
-                  </>
-                ),
-              },
-            ]
-          : []
-      }
+      subtitle={subtitle}
       isFetching={userRequest.isFetching}
     >
       {/* Loading State: Show only Remediation Card and Check 1 with Loading Skeleton */}
diff --git a/src/pages/identity/administration/users/user/conditional-access.jsx b/src/pages/identity/administration/users/user/conditional-access.jsx
@@ -4,7 +4,7 @@ import { useSettings } from "/src/hooks/use-settings";
 import { useRouter } from "next/router";
 import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
 import CalendarIcon from "@heroicons/react/24/outline/CalendarIcon";
-import { Mail, Forward } from "@mui/icons-material";
+import { Mail, Forward, Fingerprint } from "@mui/icons-material";
 import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
 import tabOptions from "./tabOptions";
 import ReactTimeAgo from "react-time-ago";
@@ -41,6 +41,10 @@ const Page = () => {
           icon: <Mail />,
           text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.userPrincipalName} />,
         },
+        {
+          icon: <Fingerprint />,
+          text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.id} />,
+        },
         {
           icon: <CalendarIcon />,
           text: (
diff --git a/src/pages/identity/administration/users/user/devices.jsx b/src/pages/identity/administration/users/user/devices.jsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { ApiGetCall } from "/src/api/ApiCall";
 import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
 import CalendarIcon from "@heroicons/react/24/outline/CalendarIcon";
-import { Check, Mail } from "@mui/icons-material";
+import { Check, Mail, Fingerprint } from "@mui/icons-material";
 import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
 import tabOptions from "./tabOptions";
 import ReactTimeAgo from "react-time-ago";
@@ -50,6 +50,10 @@ const Page = () => {
           icon: <Mail />,
           text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.userPrincipalName} />,
         },
+        {
+          icon: <Fingerprint />,
+          text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.id} />,
+        },
         {
           icon: <CalendarIcon />,
           text: (
diff --git a/src/pages/identity/administration/users/user/edit.jsx b/src/pages/identity/administration/users/user/edit.jsx
@@ -9,7 +9,7 @@ import { useEffect } from "react";
 import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
 import { getCippLicenseTranslation } from "/src/utils/get-cipp-license-translation";
 import CalendarIcon from "@heroicons/react/24/outline/CalendarIcon";
-import { Mail } from "@mui/icons-material";
+import { Mail, Fingerprint } from "@mui/icons-material";
 import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
 import tabOptions from "./tabOptions";
 import { CippCopyToClipBoard } from "../../../../../components/CippComponents/CippCopyToClipboard";
@@ -55,11 +55,15 @@ const Page = () => {
           icon: <Mail />,
           text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.userPrincipalName} />,
         },
+        {
+          icon: <Fingerprint />,
+          text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.id} />,
+        },
         {
           icon: <CalendarIcon />,
           text: (
             <>
-              Created <CippTimeAgo data={userRequest.data?.[0]?.createdDateTime} />
+              Created: <CippTimeAgo data={userRequest.data?.[0]?.createdDateTime} />
             </>
           ),
         },
diff --git a/src/pages/identity/administration/users/user/exchange.jsx b/src/pages/identity/administration/users/user/exchange.jsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { ApiGetCall } from "/src/api/ApiCall";
 import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
 import CalendarIcon from "@heroicons/react/24/outline/CalendarIcon";
-import { Check, Error, Mail } from "@mui/icons-material";
+import { Check, Error, Mail, Fingerprint } from "@mui/icons-material";
 import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
 import tabOptions from "./tabOptions";
 import { CippTimeAgo } from "../../../../../components/CippComponents/CippTimeAgo";
@@ -101,11 +101,15 @@ const Page = () => {
             <CippCopyToClipBoard type="chip" text={graphUserRequest.data?.[0]?.userPrincipalName} />
           ),
         },
+        {
+          icon: <Fingerprint />,
+          text: <CippCopyToClipBoard type="chip" text={graphUserRequest.data?.[0]?.id} />,
+        },
         {
           icon: <CalendarIcon />,
           text: (
             <>
-              Created <CippTimeAgo data={graphUserRequest.data?.[0]?.createdDateTime} />
+              Created: <CippTimeAgo data={graphUserRequest.data?.[0]?.createdDateTime} />
             </>
           ),
         },
diff --git a/src/pages/identity/administration/users/user/index.jsx b/src/pages/identity/administration/users/user/index.jsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { ApiGetCall } from "/src/api/ApiCall";
 import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
 import CalendarIcon from "@heroicons/react/24/outline/CalendarIcon";
-import { AdminPanelSettings, Check, Group, Mail } from "@mui/icons-material";
+import { AdminPanelSettings, Check, Group, Mail, Fingerprint } from "@mui/icons-material";
 import { HeaderedTabbedLayout } from "../../../../../layouts/HeaderedTabbedLayout";
 import tabOptions from "./tabOptions";
 import { CippCopyToClipBoard } from "../../../../../components/CippComponents/CippCopyToClipboard";
@@ -122,11 +122,15 @@ const Page = () => {
           icon: <Mail />,
           text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.userPrincipalName} />,
         },
+        {
+          icon: <Fingerprint />,
+          text: <CippCopyToClipBoard type="chip" text={userRequest.data?.[0]?.id} />,
+        },
         {
           icon: <CalendarIcon />,
           text: (
             <>
-              Created <CippTimeAgo data={userRequest.data?.[0]?.createdDateTime} />
+              Created: <CippTimeAgo data={userRequest.data?.[0]?.createdDateTime} />
             </>
           ),
         },
diff --git a/src/utils/get-cipp-license-translation.js b/src/utils/get-cipp-license-translation.js
@@ -21,5 +21,9 @@ export const getCippLicenseTranslation = (licenseArray) => {
     }
   });
 
-  return licenses.join(", ");
+  const result = licenses.join(", ");
+  if (!result) {
+    return "No Licenses Assigned";
+  }
+  return result;
 };

Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,11 @@ export const CippUserInfoCard = (props) => {`
`91`	`91`	`)`
`92`	`92`	`}`
`93`	`93`	`/>`
	`94`	`+ <PropertyListItem`
	`95`	`+ divider`
	`96`	`+ label="User ID"`
	`97`	`+ value={isFetching ? <Skeleton variant="text" width={120} /> : user?.id \|\| "N/A"}`
	`98`	`+ />`
`94`	`99`	`<PropertyListItem`
`95`	`100`	`divider`
`96`	`101`	`label="Email Address"`