Fleet UI: Hide version unknown, hide advanced options help text from script packages (#34647)

2025-10-24 09:42:55 -04:00
parent b91d13416e
commit 4a80de23f2
6 changed files with 110 additions and 41 deletions
@@ -21,8 +21,9 @@ describe("InstallerDetailsWidget", () => {
    softwareName: "Test Software",
    installerType: "package" as const,
    addedTimestamp: "2024-05-06T10:00:00Z",
-    versionInfo: <span>v1.2.3</span>,
+    version: "v1.2.3",
    isFma: false,
+    isScriptPackage: false,
  };

  it("renders the package icon when installerType is 'package'", () => {
@@ -42,6 +43,30 @@ describe("InstallerDetailsWidget", () => {
    expect(screen.getByText(/2 days ago/i)).toBeInTheDocument();
  });

+  it("does not render Version (unknown) info for a script package", () => {
+    render(
+      <InstallerDetailsWidget
+        {...defaultProps}
+        version={undefined}
+        isScriptPackage
+      />
+    );
+    expect(screen.queryByText(/Version \(unknown\)/i)).not.toBeInTheDocument();
+    expect(screen.getByText(/2 days ago/i)).toBeInTheDocument();
+  });
+
+  it("renders Version (unknown) info for a non-script package with no version info", () => {
+    render(
+      <InstallerDetailsWidget
+        {...defaultProps}
+        version={undefined}
+        isScriptPackage={false}
+      />
+    );
+    expect(screen.getByText(/Version \(unknown\)/i)).toBeInTheDocument();
+    expect(screen.getByText(/2 days ago/i)).toBeInTheDocument();
+  });
+
  it("renders only version info when addedTimestamp is not present", () => {
    render(
      <InstallerDetailsWidget {...defaultProps} addedTimestamp={undefined} />
@@ -3,10 +3,11 @@

 import React, { useState } from "react";
 import classnames from "classnames";
-import { stringToClipboard } from "utilities/copy_text";

+import { stringToClipboard } from "utilities/copy_text";
 import { internationalTimeFormat } from "utilities/helpers";
 import { addedFromNow } from "utilities/date_format";
+import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
 import { useCheckTruncatedElement } from "hooks/useCheckTruncatedElement";

 import Graphic from "components/Graphic";
@@ -14,6 +15,7 @@ import SoftwareIcon from "pages/SoftwarePage/components/icons/SoftwareIcon";
 import TooltipWrapper from "components/TooltipWrapper";
 import Button from "components/buttons/Button";
 import Icon from "components/Icon";
+import CustomLink from "components/CustomLink";

 const baseClass = "installer-details-widget";

@@ -52,9 +54,10 @@ interface IInstallerDetailsWidgetProps {
  softwareName: string;
  installerType: "package" | "vpp";
  addedTimestamp?: string;
-  versionInfo?: JSX.Element;
+  version?: string | null;
  sha256?: string | null;
  isFma: boolean;
+  isScriptPackage: boolean;
 }

 const InstallerDetailsWidget = ({
@@ -63,8 +66,9 @@ const InstallerDetailsWidget = ({
  installerType,
  addedTimestamp,
  sha256,
-  versionInfo,
+  version,
  isFma,
+  isScriptPackage,
 }: IInstallerDetailsWidgetProps) => {
  const classNames = classnames(baseClass, className);

@@ -92,6 +96,49 @@ const InstallerDetailsWidget = ({
  };

  const renderDetails = () => {
+    const renderVersionInfo = () => {
+      if (isScriptPackage) {
+        return null;
+      }
+
+      let versionInfo = <span>{version}</span>;
+
+      if (installerType === "vpp") {
+        versionInfo = (
+          <TooltipWrapper tipContent={<span>Updated every hour.</span>}>
+            <span>{version}</span>
+          </TooltipWrapper>
+        );
+      }
+
+      if (!version) {
+        versionInfo = (
+          <TooltipWrapper
+            tipContent={
+              <span>
+                Fleet couldn&apos;t read the version from {softwareName}.
+                {installerType === "package" && (
+                  <>
+                    {" "}
+                    <CustomLink
+                      newTab
+                      url={`${LEARN_MORE_ABOUT_BASE_LINK}/read-package-version`}
+                      text="Learn more"
+                      variant="tooltip-link"
+                    />
+                  </>
+                )}
+              </span>
+            }
+          >
+            <span>Version (unknown)</span>
+          </TooltipWrapper>
+        );
+      }
+
+      return <> &bull; {versionInfo}</>;
+    };
+
    const renderTimeStamp = () =>
      addedTimestamp ? (
        <>
@@ -143,7 +190,8 @@ const InstallerDetailsWidget = ({

    return (
      <>
-        {renderInstallerDisplayText(installerType, isFma)} &bull; {versionInfo}
+        {renderInstallerDisplayText(installerType, isFma)}
+        {renderVersionInfo()}
        {renderTimeStamp()}
        {renderSha256()}
      </>
@@ -266,36 +266,6 @@ const SoftwareInstallerCard = ({
    }
  }, [renderFlash, softwareId, name, teamId]);

-  let versionInfo = <span>{version}</span>;
-
-  if (installerType === "vpp") {
-    versionInfo = (
-      <TooltipWrapper tipContent={<span>Updated every hour.</span>}>
-        <span>{version}</span>
-      </TooltipWrapper>
-    );
-  }
-
-  if (installerType === "package" && !version) {
-    versionInfo = (
-      <TooltipWrapper
-        tipContent={
-          <span>
-            Fleet couldn&apos;t read the version from {name}.{" "}
-            <CustomLink
-              newTab
-              url={`${LEARN_MORE_ABOUT_BASE_LINK}/read-package-version`}
-              text="Learn more"
-              variant="tooltip-link"
-            />
-          </span>
-        }
-      >
-        <span>Version (unknown)</span>
-      </TooltipWrapper>
-    );
-  }
-
  const showActions =
    isGlobalAdmin || isGlobalMaintainer || isTeamAdmin || isTeamMaintainer;

@@ -307,10 +277,11 @@ const SoftwareInstallerCard = ({
            <InstallerDetailsWidget
              softwareName={softwareInstaller?.name || name}
              installerType={installerType}
-              versionInfo={versionInfo}
+              version={version}
              addedTimestamp={addedTimestamp}
              sha256={sha256}
              isFma={isFleetMaintainedApp}
+              isScriptPackage={isScriptPackage}
            />
            <div className={`${baseClass}__tags-wrapper`}>
              {Array.isArray(automaticInstallPolicies) &&
@@ -411,6 +382,7 @@ const SoftwareInstallerCard = ({
          iconUrl={iconUrl}
          softwarePackage={softwareInstaller as ISoftwarePackage}
          onExit={onToggleViewYaml}
+          isScriptPackage={isScriptPackage}
        />
      )}
    </Card>
@@ -6,7 +6,7 @@ import { NotificationContext } from "context/notification";
 import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
 import { getExtensionFromFileName } from "utilities/file/fileUtils";
 import FileSaver from "file-saver";
-import { ISoftwarePackage } from "interfaces/software";
+import { ISoftwarePackage, SCRIPT_PACKAGE_SOURCES } from "interfaces/software";
 import softwareAPI from "services/entities/software";

 import Modal from "components/Modal";
@@ -29,6 +29,7 @@ interface IViewYamlModalProps {
  iconUrl?: string | null;
  softwarePackage: ISoftwarePackage;
  onExit: () => void;
+  isScriptPackage?: boolean;
 }

 interface HandleDownloadParams {
@@ -47,6 +48,7 @@ const ViewYamlModal = ({
  iconUrl,
  softwarePackage,
  onExit,
+  isScriptPackage = false,
 }: IViewYamlModalProps) => {
  const { renderFlash } = useContext(NotificationContext);
  const { config } = useContext(AppContext);
@@ -227,6 +229,7 @@ const ViewYamlModal = ({
              ? onDownloadUninstallScript
              : undefined,
            onClickIcon: iconUrl ? onDownloadIcon : undefined,
+            hasAdvancedOptionsAvailable: !isScriptPackage,
          })}
        </p>
        <div className="modal-cta-wrap">
@@ -285,4 +285,18 @@ describe("renderYamlHelperText", () => {
      )
    ).toBeInTheDocument();
  });
+
+  it("does not render advanced options help text when hasAdvancedOptionsAvailable is false", () => {
+    render(
+      renderDownloadFilesText({
+        installScript: "echo install",
+        onClickInstallScript: noop,
+        hasAdvancedOptionsAvailable: false,
+      })
+    );
+
+    // Should not show the "Advanced options" instructional text
+    expect(screen.queryByText(/If you edited/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Advanced options/i)).not.toBeInTheDocument();
+  });
 });
@@ -14,6 +14,7 @@ interface RenderYamlHelperText {
  onClickPostInstallScript?: (evt: MouseEvent) => void;
  onClickUninstallScript?: (evt: MouseEvent) => void;
  onClickIcon?: (evt: MouseEvent) => void;
+  hasAdvancedOptionsAvailable?: boolean;
 }

 // Helper to join items with commas and Oxford comma before "and"
@@ -48,6 +49,7 @@ export const renderDownloadFilesText = ({
  onClickPostInstallScript,
  onClickUninstallScript,
  onClickIcon,
+  hasAdvancedOptionsAvailable = true,
 }: RenderYamlHelperText): JSX.Element => {
  const items: { key: string; element: JSX.Element }[] = [];

@@ -120,10 +122,15 @@ export const renderDownloadFilesText = ({
    <>
      Next, download your {joinWithCommasAnd(items)} and add{" "}
      {items.length === 1 ? "it" : "them"} to your repository using the{" "}
-      {items.length === 1 ? "path" : "paths"} above. If you edited{" "}
-      <b>Advanced options</b>, download and replace the{" "}
-      {items.length === 1 ? "file" : "files"} in your repository with the
-      updated {items.length === 1 ? "one" : "ones"}.
+      {items.length === 1 ? "path" : "paths"} above.
+      {hasAdvancedOptionsAvailable && (
+        <>
+          {" "}
+          If you edited <b>Advanced options</b>, download and replace the{" "}
+          {items.length === 1 ? "file" : "files"} in your repository with the
+          updated {items.length === 1 ? "one" : "ones"}.
+        </>
+      )}
    </>
  );
 };