Fleet UI: Add FMA gitops to FMA details and update activity feed

changes/24469-fleetctl-fma-apps

@@ -0,0 +1 @@
+* Added ability to add FMA via fleetctl YAML files

frontend/__mocks__/softwareMock.ts

@@ -294,6 +294,7 @@ const DEFAULT_FLEET_MAINTAINED_APP_DETAILS_MOCK: IFleetMaintainedAppDetails = {
   post_install_script: 'echo "Installed"',
   uninstall_script:
     "#!/bin/sh\n\n# Fleet extracts and saves package IDs\npkg_ids=$PACKAGE_ID",
+  slug: "applications/test-app",
   url: "http://www.testurl1234abcd.com/testapp",
 };
 

frontend/components/DataSet/_styles.scss

@@ -17,6 +17,8 @@
     font-weight: $bold;
     display: flex;
     gap: $pad-xsmall; // For deprecated sandbox icons
+    // white-space: nowrap; // Future-proofing: Prevents unexpected wrapping,
+    // consider uncommenting and testing if layout issues resurface.
   }
 
   dd {

frontend/interfaces/activity.ts

@@ -20,10 +20,11 @@ export enum ActivityType {
   CreatedTeam = "created_team",
   DeletedTeam = "deleted_team",
   LiveQuery = "live_query",
-  AppliedSpecPack = "applied_spec_pack",
-  AppliedSpecPolicy = "applied_spec_policy",
-  AppliedSpecSavedQuery = "applied_spec_saved_query",
-  AppliedSpecTeam = "applied_spec_team",
+  AppliedSpecPack = "applied_spec_pack", // fleetctl
+  AppliedSpecPolicy = "applied_spec_policy", // fleetctl
+  AppliedSpecSavedQuery = "applied_spec_saved_query", // fleetctl
+  AppliedSpecSoftware = "applied_spec_software", // fleetctl
+  AppliedSpecTeam = "applied_spec_team", // fleetctl
   EditedAgentOptions = "edited_agent_options",
   UserAddedBySSO = "user_added_by_sso",
   UserLoggedIn = "user_logged_in",

frontend/interfaces/software.ts

@@ -481,5 +481,6 @@ export interface IFleetMaintainedAppDetails {
   post_install_script: string;
   uninstall_script: string;
   url: string;
+  slug: string;
   software_title_id?: number; // null unless the team already has the software added (as a Fleet-maintained app, App Store (app), or custom package)
 }

frontend/pages/DashboardPage/cards/ActivityFeed/GlobalActivityItem/GlobalActivityItem.tests.tsx

@@ -172,6 +172,17 @@ describe("Activity Feed", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders an applied_spec_software type activity", () => {
+    const activity = createMockActivity({
+      type: ActivityType.AppliedSpecSoftware,
+    });
+    render(<GlobalActivityItem activity={activity} isPremiumTier />);
+
+    expect(
+      screen.getByText("edited software using fleetctl.")
+    ).toBeInTheDocument();
+  });
+
   it("renders an applied_spec_team type activity for a single team", () => {
     const activity = createMockActivity({
       type: ActivityType.AppliedSpecTeam,

frontend/pages/DashboardPage/cards/ActivityFeed/GlobalActivityItem/GlobalActivityItem.tsx

@@ -151,6 +151,9 @@ const TAGGED_TEMPLATES = {
       ? "edited a query using fleetctl."
       : "edited queries using fleetctl.";
   },
+  editSoftwareCtlActivityTemplate: () => {
+    return "edited software using fleetctl.";
+  },
   editTeamCtlActivityTemplate: (activity: IActivity) => {
     const count = activity.details?.teams?.length;
     return count === 1 && activity.details?.teams ? (
@@ -1102,6 +1105,9 @@ const getDetail = (activity: IActivity, isPremiumTier: boolean) => {
     case ActivityType.AppliedSpecSavedQuery: {
       return TAGGED_TEMPLATES.editQueryCtlActivityTemplate(activity);
     }
+    case ActivityType.AppliedSpecSoftware: {
+      return TAGGED_TEMPLATES.editSoftwareCtlActivityTemplate();
+    }
     case ActivityType.AppliedSpecTeam: {
       return TAGGED_TEMPLATES.editTeamCtlActivityTemplate(activity);
     }

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tests.tsx

@@ -11,6 +11,7 @@ describe("FleetAppDetailsModal", () => {
     platform: "darwin",
     version: "1.0.0",
     url: "https://example.com/app",
+    slug: "test-app/darwin",
     onCancel: noop,
   };
 
@@ -34,18 +35,25 @@ describe("FleetAppDetailsModal", () => {
     expect(screen.getByText("macOS")).toBeInTheDocument();
     expect(screen.getByText("Version")).toBeInTheDocument();
     expect(screen.getByText("1.0.0")).toBeInTheDocument();
+    expect(screen.getByText("Fleet-maintained app slug")).toBeInTheDocument();
+    expect(screen.getByText("test-app/darwin")).toBeInTheDocument();
     expect(screen.getByText("URL")).toBeInTheDocument();
     expect(
       screen.getAllByText("https://example.com/app").length
     ).toBeGreaterThan(0); // Tooltip renders text twice causing use of toBeInTheDocument to fail
   });
 
-  it("does not render URL field when url prop is not provided", () => {
+  it("does not render URL or slug field when respective props are not provided", () => {
     const render = createCustomRenderer();
-    const propsWithoutUrl = { ...defaultProps, url: undefined };
+    const propsWithoutUrl = {
+      ...defaultProps,
+      url: undefined,
+      slug: undefined,
+    };
 
     render(<FleetAppDetailsModal {...propsWithoutUrl} />);
 
     expect(screen.queryByText("URL")).not.toBeInTheDocument();
+    expect(screen.queryByText(/slug/i)).not.toBeInTheDocument();
   });
 });

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx

@@ -1,43 +1,119 @@
-import React from "react";
+import React, { useState } from "react";
+
+import { stringToClipboard } from "utilities/copy_text";
+import {
+  LEARN_MORE_ABOUT_BASE_LINK,
+  PLATFORM_DISPLAY_NAMES,
+} from "utilities/constants";
 
-import { PLATFORM_DISPLAY_NAMES } from "utilities/constants";
 import Modal from "components/Modal";
 import DataSet from "components/DataSet";
 import TooltipWrapper from "components/TooltipWrapper";
 import TooltipTruncatedText from "components/TooltipTruncatedText";
 import Button from "components/buttons/Button";
+import Icon from "components/Icon";
+import CustomLink from "components/CustomLink";
 
 const baseClass = "fleet-app-details-modal";
 
 interface IFleetAppDetailsModalProps {
   name: string;
   platform: string;
   version: string;
+  slug?: string;
   url?: string;
   onCancel: () => void;
 }
 
-const TOOLTIP_MESSAGE =
-  "Fleet downloads the package from the URL and stores it. Hosts download it from Fleet before install.";
+const SLUG_TOOLTIP_MESSAGE = (
+  <>
+    Used to manage apps in Gitops.{" "}
+    <CustomLink
+      newTab
+      url={`${LEARN_MORE_ABOUT_BASE_LINK}/gitops`}
+      text="Learn more"
+      variant="tooltip-link"
+    />
+  </>
+);
+
+const URL_TOOLTIP_MESSAGE = (
+  <>
+    Fleet downloads the package from the URL and stores it.
+    <br />
+    Hosts download it from Fleet before install.
+  </>
+);
 
 const FleetAppDetailsModal = ({
   name,
   platform,
   version,
+  slug,
   url,
   onCancel,
 }: IFleetAppDetailsModalProps) => {
+  const [copyMessage, setCopyMessage] = useState("");
+
+  const onCopySlug = (evt: React.MouseEvent) => {
+    evt.preventDefault();
+
+    stringToClipboard(slug)
+      .then(() => setCopyMessage("Copied!"))
+      .catch(() => setCopyMessage("Copy failed"));
+
+    // Clear message after 1 second
+    setTimeout(() => setCopyMessage(""), 1000);
+
+    return false;
+  };
+
   return (
     <Modal className={baseClass} title="Software details" onExit={onCancel}>
       <>
         <div className={`${baseClass}__modal-content`}>
           <DataSet title="Name" value={name} />
-          <DataSet title="Platform" value={PLATFORM_DISPLAY_NAMES[platform]} />
           <DataSet title="Version" value={version} />
+          {slug && (
+            <DataSet
+              title={
+                <TooltipWrapper
+                  tipContent={SLUG_TOOLTIP_MESSAGE}
+                  position="top-start"
+                >
+                  Fleet-maintained app slug
+                </TooltipWrapper>
+              }
+              value={
+                <>
+                  {slug}{" "}
+                  <div className={`${baseClass}__action-overlay`}>
+                    {copyMessage && (
+                      <div
+                        className={`${baseClass}__copy-message`}
+                      >{`${copyMessage} `}</div>
+                    )}
+                  </div>
+                  <Button
+                    variant="unstyled"
+                    className={`${baseClass}__copy-secret-icon`}
+                    onClick={onCopySlug}
+                  >
+                    <Icon name="copy" />
+                  </Button>
+                </>
+              }
+            />
+          )}
+          <DataSet title="Platform" value={PLATFORM_DISPLAY_NAMES[platform]} />
+
           {url && (
             <DataSet
               title={
-                <TooltipWrapper tipContent={TOOLTIP_MESSAGE}>
+                <TooltipWrapper
+                  tipContent={URL_TOOLTIP_MESSAGE}
+                  position="top-start"
+                >
                   URL
                 </TooltipWrapper>
               }

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/_styles.scss

@@ -1,9 +1,35 @@
 .fleet-app-details-modal {
   &__modal-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr; /* Left column takes 2/3, right column takes 1/3 */
+    grid-template-rows: auto auto; /* Two rows with automatic height */
+    gap: $pad-xlarge; /* Space between rows and columns */
+  }
+
+  &__modal-content > *:last-child {
+    grid-column: 1 / -1; /* Make the URL all columns */
+  }
+
+  // Used for gap between slug and copy icon
+  dd {
+    gap: $pad-xsmall;
+  }
+
+  &__copy-message {
+    @include copy-message;
+  }
+
+  &__action-overlay {
     display: flex;
-    column-gap: $pad-xxlarge;
-    row-gap: $pad-xlarge;
-    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    position: relative;
+    width: 0;
+    height: 16px;
+
+    span {
+      font-weight: $regular;
+    }
   }
 
   .react-tooltip {

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetMaintainedAppDetailsPage.tsx

@@ -303,6 +303,7 @@ const FleetMaintainedAppDetailsPage = ({
           name={fleetApp.name}
           platform={fleetApp.platform}
           version={fleetApp.version}
+          slug={fleetApp.slug}
           url={fleetApp.url}
           onCancel={() => setShowAppDetailsModal(false)}
         />