Adds a description to the license numbers displayed in license selection dropdown screens.

Author: krisctl

gui/src/components/App/index.js

@@ -168,18 +168,14 @@ function App() {
         // TODO Inline confirmation component build
         overlayContent = dialog;
     }    
-    // Give precendence to token auth over licensing info ie. once after token auth is done, show licensing if not provided.
+    // Give precedence to token auth over licensing info ie. once after token auth is done, show licensing if not provided.
     else if((!licensingProvided) && hasFetchedServerStatus && (!authEnabled || isAuthenticated)) {    
         overlayContent = <LicensingGatherer role="licensing" aria-describedby="license-window" />;
     } 
     // Show license selector if the user has entitlements and is not currently entitled
     else if (hasEntitlements && !isEntitled) {
-        const options = licensingInfo.entitlements.map((entitlement) => ({
-            label: entitlement.license_number,
-            value: entitlement.id,
-          }));
-        overlayContent = <EntitlementSelector options={options} />;
-  }
+        overlayContent = <EntitlementSelector options={licensingInfo.entitlements} />;
+    }
     // in all other cases, we will either ask for the token, 
     else if (!dialog) {
         overlayContent = (

gui/src/components/EntitlementSelector/EntitlementSelector.spec.js

@@ -5,10 +5,12 @@ import EntitlementSelector from "./index";
 import App from "../App";
 import { render, fireEvent } from "../../test/utils/react-test";
 import userEvent from "@testing-library/user-event";
+import { filterAndFormatEntitlements, defaultLicenseUnavailableMsg } from "./index";
 
 describe("EntitlementSelector Component", () => {
   let initialState;
 
+
   beforeEach(() => {
     initialState = {
       triggerPosition: { x: 539, y: 0 },
@@ -47,9 +49,13 @@ describe("EntitlementSelector Component", () => {
   });
 
   const options = [
-    { value: "license1", label: "Entitlement1" },
-    { value: "license2", label: "Entitlement2" },
-    { value: "license3", label: "Entitlement3" },
+    { id: "entitlement1", label: "label1", license_number: "license1" },
+    { id: "entitlement2", label: "label2", license_number: "license2" },
+    { id: "entitlement3", label: "label3", license_number: "license3" },
+    { id: "entitlement4", label: "label4", license_number: null },
+    { id: "entitlement5", label: "label5", license_number: "" },
+    { id: "entitlement6", label: null, license_number: "license6" },
+    { id: "entitlement7", label: "", license_number: "license7" },
   ];
 
   function setup(jsx) {
@@ -67,18 +73,18 @@ describe("EntitlementSelector Component", () => {
     const { getByRole } = render(<EntitlementSelector options={options} />);
 
     let comboBox = getByRole("combobox");
-    expect(comboBox.length).toBe(3);
-    expect(comboBox).toHaveValue("license1");
-    expect(getByRole("option", { name: "Entitlement1" }).selected).toBe(true);
+    expect(comboBox.length).toBeGreaterThanOrEqual(3);
+    expect(comboBox).toHaveValue("entitlement1");
+    expect(getByRole("option", { name: "license1 - label1" }).selected).toBe(true);
   });
 
   it("should select correct value on change", async () => {
     const { user, getByRole } = setup(
       <EntitlementSelector options={options} />
     );
     let comboBox = getByRole("combobox");
-    await user.selectOptions(comboBox, "license2");
-    expect(comboBox).toHaveValue("license2");
+    await user.selectOptions(comboBox, "entitlement2");
+    expect(comboBox).toHaveValue("entitlement2");
   });
 
   it("should fire onClick Event for submit button without crashing", () => {
@@ -101,4 +107,18 @@ describe("EntitlementSelector Component", () => {
       container.querySelector("#entitlement-selection")
     ).not.toBeInTheDocument();
   });
+
+  it("should filter and format entitlements correctly", async () => {
+    const formattedEntitlements = filterAndFormatEntitlements(options);
+
+    expect(formattedEntitlements).toEqual([
+      { label: "license1 - label1", value: "entitlement1" },
+      { label: "license2 - label2", value: "entitlement2" },
+      { label: "license3 - label3", value: "entitlement3" },
+      { label: `license6 - ${defaultLicenseUnavailableMsg}`, value: "entitlement6" },
+      { label: `license7 - ${defaultLicenseUnavailableMsg}`, value: "entitlement7" },
+    ]);
+
+  });
+
 });

gui/src/components/EntitlementSelector/index.js

@@ -4,9 +4,21 @@ import { useState } from "react";
 import { useDispatch } from "react-redux";
 import { fetchUpdateLicensing } from "../../actionCreators";
 
+export const defaultLicenseUnavailableMsg = "License description unavailable";
+
+export function filterAndFormatEntitlements(entitlements) {
+  return entitlements
+    .filter(entitlement => entitlement.license_number && entitlement.license_number.trim() !== "")
+    .map(entitlement => ({
+      label: `${entitlement.license_number} - ${entitlement.label || defaultLicenseUnavailableMsg}`,
+      value: entitlement.id,
+    }));
+};
+
 function EntitlementSelector({ options }) {
   const dispatch = useDispatch();
-  const [selectedEntitlement, setSelected] = useState(options[0].value);
+  const filteredOptions = filterAndFormatEntitlements(options);
+  const [selectedEntitlement, setSelected] = useState(filteredOptions[0].value);
 
   function updateEntitlement(event) {
     event.preventDefault();
@@ -38,7 +50,7 @@ function EntitlementSelector({ options }) {
               value={selectedEntitlement}
               onChange={(e) => setSelected(e.target.value)}
             >
-              {options.map((entitlement) => (
+              {filteredOptions.map((entitlement) => (
                 <option value={entitlement.value} key={entitlement.label}>
                   {entitlement.label}
                 </option>