Fix unreleased UI bugs for software installers (#18928)

frontend/pages/SoftwarePage/components/SoftwareInstallDetails/SoftwareInstallDetails.tsx

@@ -86,6 +86,7 @@ export const SoftwareInstallDetails = ({
     },
     {
       refetchOnWindowFocus: false,
+      staleTime: 3000,
       select: (data) => data.results,
     }
   );

frontend/pages/SoftwarePage/components/VersionCell/VersionCell.tsx

@@ -48,7 +48,7 @@ const VersionCell = <T extends { version: string }>({
 
   // only one version, no need for tooltip
   const cellText = generateText(versions);
-  if (!versions) {
+  if (!versions || versions.length <= 1) {
     return <>{cellText}</>;
   }
 

frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx

@@ -853,9 +853,7 @@ const HostDetailsPage = ({
                 router={router}
                 queryParams={queryParams}
                 pathname={location.pathname}
-                onShowSoftwareDetails={(software) =>
-                  setSelectedSoftwareDetails(software)
-                }
+                onShowSoftwareDetails={setSelectedSoftwareDetails}
               />
               {host?.platform === "darwin" && macadmins?.munki?.version && (
                 <MunkiIssuesCard

frontend/pages/hosts/details/cards/Software/Software.tsx

@@ -243,4 +243,4 @@ const SoftwareCard = ({
     </Card>
   );
 };
-export default SoftwareCard;
+export default React.memo(SoftwareCard);

frontend/pages/hosts/details/cards/Software/SoftwareDetailsModal/SoftwareDetailsModal.tsx

@@ -13,6 +13,8 @@ import Button from "components/buttons/Button";
 import DataSet from "components/DataSet";
 import { dateAgo } from "utilities/date_format";
 
+import { SoftwareInstallDetails } from "pages/SoftwarePage/components/SoftwareInstallDetails";
+
 const baseClass = "software-details-modal";
 
 const generateVulnerabilitiesValue = (vulnerabilities: string[]) => {
@@ -40,7 +42,7 @@ const SoftwareDetailsInfo = ({
   source,
   bundleIdentifier,
 }: ISoftwareDetailsInfoProps) => {
-  const { vulnerabilities } = installedVersion;
+  const { vulnerabilities, installed_paths } = installedVersion;
 
   return (
     <div className={`${baseClass}__details-info`}>
@@ -57,19 +59,21 @@ const SoftwareDetailsInfo = ({
           />
         )}
       </div>
-      <div className={`${baseClass}__row`}>
-        <DataSet
-          className={`${baseClass}__file-path-data-set`}
-          title="File path"
-          value={
-            <div className={`${baseClass}__file-path-values`}>
-              {installedVersion.installed_paths.map((path) => (
-                <span key={path}>{path}</span>
-              ))}
-            </div>
-          }
-        />
-      </div>
+      {!!installed_paths?.length && (
+        <div className={`${baseClass}__row`}>
+          <DataSet
+            className={`${baseClass}__file-path-data-set`}
+            title="File path"
+            value={
+              <div className={`${baseClass}__file-path-values`}>
+                {installed_paths.map((path) => (
+                  <span key={path}>{path}</span>
+                ))}
+              </div>
+            }
+          />
+        </div>
+      )}
       {vulnerabilities && vulnerabilities.length !== 0 && (
         <div className={`${baseClass}__row`}>
           <DataSet
@@ -91,6 +95,8 @@ const SoftwareDetailsModal = ({
   software,
   onExit,
 }: ISoftwareDetailsModalProps) => {
+  const installUuid = software.last_install?.install_uuid || "";
+
   const renderSoftwareDetails = () => {
     const { installed_versions } = software;
 
@@ -98,16 +104,18 @@ const SoftwareDetailsModal = ({
     // software type atm.
     if (!installed_versions || installed_versions.length === 0) {
       return (
-        <DataSet
-          title="Type"
-          value={formatSoftwareType({ source: software.source })}
-        />
+        <div className={`${baseClass}__software-details`}>
+          <DataSet
+            title="Type"
+            value={formatSoftwareType({ source: software.source })}
+          />
+        </div>
       );
     }
 
     return (
       <div className={`${baseClass}__software-details`}>
-        {installed_versions.map((installedVersion) => {
+        {installed_versions?.map((installedVersion) => {
           return (
             <SoftwareDetailsInfo
               key={installedVersion.version}
@@ -130,7 +138,9 @@ const SoftwareDetailsModal = ({
             <Tab>Install Details</Tab>
           </TabList>
           <TabPanel>{renderSoftwareDetails()}</TabPanel>
-          <TabPanel>test 2</TabPanel>
+          <TabPanel>
+            <SoftwareInstallDetails installUuid={installUuid} />
+          </TabPanel>
         </Tabs>
       </TabsWrapper>
     );

frontend/pages/hosts/details/cards/Software/SoftwareDetailsModal/_styles.scss

@@ -1,4 +1,7 @@
 .software-details-modal {
+  &__software-details {
+    margin-top: 24px;
+  }
 
   &__details-info {
     display: flex;
@@ -43,4 +46,12 @@
       white-space: nowrap;
     }
   }
+
+  .modal__content {
+    margin-top: $pad-small;
+  }
+
+  .react-tabs__tab-panel {
+    margin-top: $pad-large;
+  }
 }