UI – Restore search/filter to empty SW versions table; empty state up…

…date for SW title details w/o versions (#21098) ## Parts 1b and 2 for #21053 1b: <img width="1502" alt="Screenshot 2024-08-06 at 12 14 30 PM" src="https://github.com/user-attachments/assets/19dc67ca-adde-49ff-a884-b9ebaa15b1d7"> 2: <img width="1502" alt="Screenshot 2024-08-06 at 12 13 28 PM" src="https://github.com/user-attachments/assets/951bdf0b-adfc-41a1-b668-2d0b53addbe4"> - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
fleetdm · Aug 6, 2024 · 232947b · 232947b
1 parent 12132b3
commit 232947b
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 28 deletions.
diff --git a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/SoftwareOSTable.tsx b/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/SoftwareOSTable.tsx
@@ -174,7 +174,7 @@ const SoftwareOSTable = ({
           <EmptySoftwareTable
             tableName="operating systems"
             isSoftwareDisabled={!isSoftwareEnabled}
-            isNotDetectingSoftware // non-searchable table renders not detecting by default
+            noSearchQuery // non-searchable table renders not detecting by default
           />
         )}
         defaultSortHeader={orderKey}

diff --git a/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareTitleDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareTitleDetailsPage.tsx
@@ -101,8 +101,8 @@ const SoftwareTitleDetailsPage = ({
     }
   );
 
-  const hasSoftwarePackage = !!softwareTitle?.software_package;
-  const hasAppStoreApp = !!softwareTitle?.app_store_app;
+  const isAvailableForInstall =
+    !!softwareTitle?.software_package || !!softwareTitle?.app_store_app;
 
   const onDeleteInstaller = useCallback(() => {
     if (softwareTitle?.versions?.length) {
@@ -132,7 +132,7 @@ const SoftwareTitleDetailsPage = ({
     const showPackageCard =
       currentTeamId !== APP_CONTEXT_ALL_TEAMS_ID &&
       hasPermission &&
-      (hasSoftwarePackage || hasAppStoreApp);
+      isAvailableForInstall;
 
     if (showPackageCard) {
       const packageCardData = getPackageCardInfo(title);
@@ -203,6 +203,7 @@ const SoftwareTitleDetailsPage = ({
               isIPadOSOrIOSApp={["ios_apps", "ipados_apps"].includes(
                 softwareTitle.source
               )}
+              isAvailableForInstall={isAvailableForInstall}
             />
           </Card>
         </>

diff --git a/...warePage/SoftwareTitleDetailsPage/SoftwareTitleDetailsTable/SoftwareTitleDetailsTable.tsx b/...warePage/SoftwareTitleDetailsPage/SoftwareTitleDetailsTable/SoftwareTitleDetailsTable.tsx
@@ -21,19 +21,27 @@ const DEFAULT_SORT_DIRECTION = "desc";
 
 const baseClass = "software-title-details-table";
 
-const NoVersionsDetected = (): JSX.Element => {
+const NoVersionsDetected = (isAvailableForInstall = false): JSX.Element => {
   return (
     <EmptyTable
-      header="No versions detected for this software item."
+      header={
+        isAvailableForInstall
+          ? "No versions detected."
+          : "No versions detected for this software item."
+      }
       info={
-        <>
-          Expecting to see versions?{" "}
-          <CustomLink
-            url={GITHUB_NEW_ISSUE_LINK}
-            text="File an issue on GitHub"
-            newTab
-          />
-        </>
+        isAvailableForInstall ? (
+          "Install this software on a host to see versions."
+        ) : (
+          <>
+            Expecting to see versions?{" "}
+            <CustomLink
+              url={GITHUB_NEW_ISSUE_LINK}
+              text="File an issue on GitHub"
+              newTab
+            />
+          </>
+        )
       }
     />
   );
@@ -45,6 +53,7 @@ interface ISoftwareTitleDetailsTableProps {
   isLoading: boolean;
   teamIdForApi?: number;
   isIPadOSOrIOSApp: boolean;
+  isAvailableForInstall?: boolean;
 }
 
 interface IRowProps extends Row {
@@ -59,6 +68,7 @@ const SoftwareTitleDetailsTable = ({
   isLoading,
   teamIdForApi,
   isIPadOSOrIOSApp,
+  isAvailableForInstall,
 }: ISoftwareTitleDetailsTableProps) => {
   const handleRowSelect = (row: IRowProps) => {
     const hostsBySoftwareParams = {
@@ -94,7 +104,7 @@ const SoftwareTitleDetailsTable = ({
       columnConfigs={softwareTableHeaders}
       data={data}
       isLoading={isLoading}
-      emptyComponent={NoVersionsDetected}
+      emptyComponent={() => NoVersionsDetected(isAvailableForInstall)}
       showMarkAllPages={false}
       isAllPagesSelected={false}
       defaultSortHeader={DEFAULT_SORT_HEADER}

diff --git a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/SoftwareTable.tsx b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/SoftwareTable.tsx
@@ -179,12 +179,8 @@ const SoftwareTable = ({
     return generateTableConfig(router, teamId);
   }, [generateTableConfig, data, router, teamId]);
 
-  // determines if a user be able to search in the table
-  const searchable =
-    isSoftwareEnabled &&
-    ((tableData && tableData.length > 0) ||
-      query !== "" ||
-      softwareFilter !== "allSoftware");
+  // determines if a user should be able to search in the table
+  const searchable = isSoftwareEnabled;
 
   const handleShowVersionsToggle = () => {
     const queryParams: Record<string, string | number | undefined> = {
@@ -338,7 +334,7 @@ const SoftwareTable = ({
           <EmptySoftwareTable
             softwareFilter={softwareFilter}
             isSoftwareDisabled={!isSoftwareEnabled}
-            isNotDetectingSoftware={query === ""}
+            noSearchQuery={query === ""}
           />
         )}
         defaultSortHeader={orderKey}

diff --git a/...age/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTable.tsx b/...age/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTable.tsx
@@ -261,7 +261,7 @@ const SoftwareVulnerabilitiesTable = ({
           <EmptySoftwareTable
             tableName="vulnerabilities"
             isSoftwareDisabled={!isSoftwareEnabled}
-            isNotDetectingSoftware={query === ""}
+            noSearchQuery={query === ""}
           />
         )}
         defaultSortHeader={orderKey}

diff --git a/frontend/pages/SoftwarePage/components/EmptySoftwareTable/EmptySoftwareTable.tsx b/frontend/pages/SoftwarePage/components/EmptySoftwareTable/EmptySoftwareTable.tsx
@@ -13,8 +13,8 @@ export interface IEmptySoftwareTableProps {
   /** tableName is displayed in the search empty state */
   tableName?: string;
   isSoftwareDisabled?: boolean;
-  /** isNotDetectingSoftware renders empty states when no search string is present */
-  isNotDetectingSoftware?: boolean;
+  /** noSearchQuery is true when there is no search string filtering the results */
+  noSearchQuery?: boolean;
   /** isCollectingSoftware is only used on the Dashboard page with a TODO to revisit */
   isCollectingSoftware?: boolean;
 }
@@ -36,7 +36,7 @@ const EmptySoftwareTable = ({
   softwareFilter = "allSoftware",
   tableName = "software",
   isSoftwareDisabled,
-  isNotDetectingSoftware,
+  noSearchQuery,
   isCollectingSoftware,
 }: IEmptySoftwareTableProps): JSX.Element => {
   const softwareTypeText = generateTypeText(tableName, softwareFilter);
@@ -46,7 +46,7 @@ const EmptySoftwareTable = ({
     info: `Expecting to see ${softwareTypeText}? Check back later.`,
   };
 
-  if (isNotDetectingSoftware && softwareFilter === "allSoftware") {
+  if (noSearchQuery && softwareFilter === "allSoftware") {
     emptySoftware.header = "No software detected";
   }
 

diff --git a/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx b/frontend/pages/hosts/details/cards/Software/HostSoftwareTable/HostSoftwareTable.tsx
@@ -196,7 +196,7 @@ const HostSoftwareTable = ({
         platformText={APPLE_PLATFORM_DISPLAY_NAMES[platform as ApplePlatform]}
       />
     ) : (
-      <EmptySoftwareTable isNotDetectingSoftware={searchQuery === ""} />
+      <EmptySoftwareTable noSearchQuery={searchQuery === ""} />
     );
   }, [hostSoftwareFilter, platform, searchQuery]);