From 7dee429cc2d2d462d5b1f90a886a292cacbbacfa Mon Sep 17 00:00:00 2001 From: Krishan Sharma Date: Fri, 18 Aug 2023 08:28:38 +0000 Subject: [PATCH] Adds a description to the license numbers displayed in license selection dropdown screens. --- gui/src/components/App/index.js | 10 ++---- .../EntitlementSelector.spec.js | 36 ++++++++++++++----- .../components/EntitlementSelector/index.js | 16 +++++++-- 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/gui/src/components/App/index.js b/gui/src/components/App/index.js index 01ee6405..a246de20 100644 --- a/gui/src/components/App/index.js +++ b/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 = ; } // 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 = ; - } + overlayContent = ; + } // in all other cases, we will either ask for the token, else if (!dialog) { overlayContent = ( diff --git a/gui/src/components/EntitlementSelector/EntitlementSelector.spec.js b/gui/src/components/EntitlementSelector/EntitlementSelector.spec.js index 18383bba..e7d16187 100644 --- a/gui/src/components/EntitlementSelector/EntitlementSelector.spec.js +++ b/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,9 +73,9 @@ describe("EntitlementSelector Component", () => { const { getByRole } = render(); 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 () => { @@ -77,8 +83,8 @@ describe("EntitlementSelector Component", () => { ); 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" }, + ]); + + }); + }); diff --git a/gui/src/components/EntitlementSelector/index.js b/gui/src/components/EntitlementSelector/index.js index d9b022ad..e252b8f2 100644 --- a/gui/src/components/EntitlementSelector/index.js +++ b/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) => (