Fleet UI: More custom display name edits, update delete software modal copy (#36081)

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/DeleteSoftwareModal/DeleteSoftwareModal.tsx

@@ -19,7 +19,8 @@ const DELETE_SW_INSTALLED_DURING_SETUP_ERROR_MSG =
 interface IDeleteSoftwareModalProps {
   softwareId: number;
   teamId: number;
-  softwareInstallerName?: string;
+  softwareTitleName?: string;
+  softwareDisplayName?: string;
   onExit: () => void;
   onSuccess: () => void;
   gitOpsModeEnabled?: boolean;
@@ -28,7 +29,8 @@ interface IDeleteSoftwareModalProps {
 const DeleteSoftwareModal = ({
   softwareId,
   teamId,
-  softwareInstallerName,
+  softwareTitleName,
+  softwareDisplayName,
   onExit,
   onSuccess,
   gitOpsModeEnabled,
@@ -71,21 +73,24 @@ const DeleteSoftwareModal = ({
           </InfoBanner>
         )}
         <p>
-          Software won&apos;t be uninstalled from existing hosts, but any
-          pending installs and uninstalls{" "}
-          {softwareInstallerName ? (
-            <>
-              for <b> {softwareInstallerName}</b>{" "}
-            </>
-          ) : (
-            ""
-          )}
-          will be canceled.
-        </p>
-        <p>
-          Installs or uninstalls currently running on a host will still
-          complete, but results won&apos;t appear in Fleet.
+          Are you sure you want to delete{" "}
+          <strong>{softwareDisplayName || softwareTitleName}</strong>?
         </p>
+        <ul>
+          <li>
+            Software won&apos;t be uninstalled from existing hosts, but any
+            pending installs and uninstalls will be canceled.
+          </li>{" "}
+          <li>
+            Installs or uninstalls currently running on a host will still
+            complete, but results won&apos;t appear in Fleet.
+          </li>
+          <li>
+            Installed software will appear as{" "}
+            <strong>{softwareTitleName}</strong> in software inventories and
+            will use the default icon.
+          </li>
+        </ul>
         <p>You cannot undo this action.</p>
         <div className="modal-cta-wrap">
           <Button

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tests.tsx

@@ -30,11 +30,11 @@ const MOCK_PROPS = {
 };
 
 describe("EditIconModal", () => {
-  it("renders with the correct modal title for package, FileUploader, Preview tabs, save button", () => {
+  it("renders with the correct modal title for software, FileUploader, Preview tabs, save button", () => {
     const render = createCustomRenderer({ withBackendMock: true });
     render(<EditIconModal {...MOCK_PROPS} />);
 
-    expect(screen.getByText(/edit package/i)).toBeInTheDocument();
+    expect(screen.getByText(/edit software/i)).toBeInTheDocument();
     expect(screen.getByText("Choose file")).toBeInTheDocument();
     expect(screen.getByText("Preview")).toBeInTheDocument();
     expect(screen.getByText("Fleet")).toBeInTheDocument();

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditIconModal/EditIconModal.tsx

@@ -588,7 +588,7 @@ const EditIconModal = ({
         helpText={
           <>
             Optional. If left blank, Fleet will use{" "}
-            <strong>{previewInfo.name}</strong>.
+            <strong>{software.name}</strong>.
           </>
         }
         autofocus
@@ -745,7 +745,7 @@ const EditIconModal = ({
   return (
     <Modal
       className={baseClass}
-      title={isSoftwarePackage ? "Edit package" : "Edit app"}
+      title="Edit software"
       onExit={onExitEditIconModal}
     >
       <>

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/EditSoftwareModal/EditSoftwareModal.tsx

@@ -338,7 +338,7 @@ const EditSoftwareModal = ({
     <>
       <Modal
         className={editSoftwareModalClasses}
-        title="Edit software"
+        title={isSoftwarePackage(software) ? "Edit package" : "Edit app"}
         onExit={onExit}
         width="large"
       >

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareInstallerCard/SoftwareInstallerCard.tsx

@@ -155,6 +155,7 @@ export const SoftwareActionButtons = ({
 
 interface ISoftwareInstallerCardProps {
   softwareTitleName: string;
+  softwareDisplayName: string;
   isScriptPackage?: boolean;
   isIosOrIpadosApp?: boolean;
   name: string;
@@ -183,6 +184,7 @@ interface ISoftwareInstallerCardProps {
 // of packages we should consider refactoring this to be more dynamic.
 const SoftwareInstallerCard = ({
   softwareTitleName,
+  softwareDisplayName,
   isScriptPackage = false,
   isIosOrIpadosApp = false,
   name,
@@ -383,7 +385,8 @@ const SoftwareInstallerCard = ({
         <DeleteSoftwareModal
           gitOpsModeEnabled={gitOpsModeEnabled}
           softwareId={softwareId}
-          softwareInstallerName={softwareInstaller?.name}
+          softwareDisplayName={softwareDisplayName}
+          softwareTitleName={softwareTitleName}
           teamId={teamId}
           onExit={() => setShowDeleteModal(false)}
           onSuccess={onDeleteSuccess}

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareTitleDetailsPage.tsx

@@ -142,6 +142,7 @@ const SoftwareTitleDetailsPage = ({
 
     const {
       softwareTitleName,
+      softwareDisplayName,
       softwarePackage,
       name,
       version,
@@ -157,6 +158,7 @@ const SoftwareTitleDetailsPage = ({
     return (
       <SoftwareInstallerCard
         softwareTitleName={softwareTitleName}
+        softwareDisplayName={softwareDisplayName}
         isScriptPackage={isScriptPackage}
         isIosOrIpadosApp={isIosOrIpadosApp}
         softwareInstaller={softwarePackage}

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/helpers.tests.ts

@@ -3,10 +3,11 @@ import { getInstallerCardInfo } from "./helpers";
 
 describe("SoftwareTitleDetailsPage helpers", () => {
   describe("getPackageCardInfo", () => {
-    it("returns the correct data for a software package", () => {
+    it("returns the correct data for a software package (and without a custom display_name)", () => {
       const softwareTitle: ISoftwareTitleDetails = {
         id: 1,
         name: "Test Software",
+        // display_name: undefined
         icon_url: "https://example.com/icon.png",
         versions: [{ id: 1, version: "1.0.0", vulnerabilities: [] }],
         software_package: {
@@ -38,6 +39,7 @@ describe("SoftwareTitleDetailsPage helpers", () => {
       expect(packageCardInfo).toEqual({
         softwarePackage: softwareTitle.software_package,
         name: "TestPackage.pkg", // packages should display the package name not the software title name
+        softwareDisplayName: "Test Software",
         version: "1.0.0",
         addedTimestamp: "2021-01-01T00:00:00Z",
         softwareTitleName: "Test Software",
@@ -51,7 +53,7 @@ describe("SoftwareTitleDetailsPage helpers", () => {
         isSelfService: true,
       });
     });
-    it("returns the correct data for an app store app", () => {
+    it("returns the correct data for an app store app (and with a custom display name)", () => {
       const softwareTitle: ISoftwareTitleDetails = {
         id: 1,
         name: "Test Software",
@@ -83,6 +85,7 @@ describe("SoftwareTitleDetailsPage helpers", () => {
       expect(packageCardInfo).toEqual({
         softwarePackage: softwareTitle.app_store_app,
         name: "Test Software", // apps should display the software title name (backend should ensure the app name and software title name match)
+        softwareDisplayName: "Test App",
         version: "1.0.1",
         addedTimestamp: "2020-01-01T00:00:00.000Z",
         softwareTitleName: "Test Software",

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/helpers.ts

@@ -26,6 +26,7 @@ export const getInstallerCardInfo = (softwareTitle: ISoftwareTitleDetails) => {
 
   return {
     softwareTitleName: softwareTitle.name,
+    softwareDisplayName: softwareTitle.display_name || softwareTitle.name,
     softwarePackage: installerData,
     name: (isPackage && installerData.name) || softwareTitle.name,
     version:

frontend/pages/SoftwarePage/components/cards/SoftwareDetailsSummary/SoftwareDetailsSummary.tsx

@@ -110,16 +110,18 @@ const SoftwareDetailsSummary = ({
           renderSoftwareIcon()
         )}
         <dl className={`${baseClass}__info`}>
-          <h1>
-            {ROLLING_ARCH_LINUX_VERSIONS.includes(displayName) ? (
-              // wrap a tooltip around the "rolling" suffix
-              <>
-                {displayName.slice(0, -8)}
-                <TooltipWrapperArchLinuxRolling />
-              </>
-            ) : (
-              <TooltipTruncatedText value={displayName} />
-            )}
+          <div className={`${baseClass}__title-edit-icon`}>
+            <h1>
+              {ROLLING_ARCH_LINUX_VERSIONS.includes(displayName) ? (
+                // wrap a tooltip around the "rolling" suffix
+                <>
+                  {displayName.slice(0, -8)}
+                  <TooltipWrapperArchLinuxRolling />
+                </>
+              ) : (
+                <TooltipTruncatedText value={displayName} />
+              )}
+            </h1>
             {onClickEditIcon && (
               <div className={`${baseClass}__edit-icon`}>
                 <Button
@@ -131,7 +133,7 @@ const SoftwareDetailsSummary = ({
                 </Button>
               </div>
             )}
-          </h1>
+          </div>
           <dl className={`${baseClass}__description-list`}>
             {!!type && <DataSet title="Type" value={type} />}
 

frontend/pages/SoftwarePage/components/cards/SoftwareDetailsSummary/_styles.scss

@@ -10,20 +10,25 @@
   &__info {
     flex-grow: 1;
     align-self: center;
+    min-width: 0; // Required to truncate name with edit icon
 
     .truncated-tooltip {
       font-weight: $regular;
     }
   }
 
-  h1 {
-    font-size: $pad-large;
-    font-weight: bold;
+  &__title-edit-icon {
     display: flex;
     align-items: center;
     gap: $pad-medium;
   }
 
+  h1 {
+    font-size: $pad-large;
+    font-weight: bold;
+    overflow: hidden; // Required to truncate name with edit icon
+  }
+
   &__description-list {
     display: flex;
     flex-direction: row;

frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/InstallSoftwareModal.tsx

@@ -150,7 +150,7 @@ const InstallSoftwareModal = ({
       const foundTitle = titlesAvailableForInstall?.find(
         (title) => title.id === value
       );
-      return foundTitle ? foundTitle.name : "";
+      return foundTitle ? foundTitle.display_name || foundTitle.name : "";
     };
 
     return {
@@ -171,7 +171,7 @@ const InstallSoftwareModal = ({
         )
         .map((title) => {
           return {
-            label: title.name,
+            label: title.display_name || title.name,
             value: title.id,
             helpText: generateSoftwareOptionHelpText(title),
           };
@@ -205,7 +205,7 @@ const InstallSoftwareModal = ({
           if (currentSoftware) {
             options = [
               {
-                label: currentSoftware.name,
+                label: currentSoftware.display_name || currentSoftware.name,
                 value: currentSoftware.id,
                 helpText: generateSoftwareOptionHelpText(currentSoftware),
               },