From f6425e686ce4fee38cd9f89fef87ab55101fe713 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 3 Dec 2024 09:08:11 -0500
Subject: [PATCH 1/5] Fleet UI: Update Dropdown to use react-select 5.4 and
 other cleanup (#24164)

---
 .../TeamsDropdown/TeamsDropdown.tsx           |   2 +-
 .../DropdownOptionTooltipWrapper/_styles.scss |   5 +-
 .../DropdownWrapper.stories.tsx               |  62 ++++
 .../DropdownWrapper/DropdownWrapper.tests.tsx | 102 ++++++
 .../DropdownWrapper/DropdownWrapper.tsx       | 340 ++++++++++++++++++
 .../forms/fields/DropdownWrapper/_styles.scss |  14 +
 .../forms/fields/DropdownWrapper/index.tsx    |   1 +
 frontend/interfaces/role.ts                   |  16 -
 .../UsersPage/UsersPage.tsx                   |   8 +-
 .../UserManagementPage/UserManagementPage.tsx |  14 +-
 .../SelectRoleForm/SelectRoleForm.tsx         |  65 ++--
 .../SelectedTeamsForm/SelectedTeamsForm.tsx   |  21 +-
 .../components/SelectedTeamsForm/_styles.scss |   2 +-
 .../components/UserForm/UserForm.tsx          |   1 -
 .../helpers/userManagementHelpers.ts          |  13 +-
 15 files changed, 568 insertions(+), 98 deletions(-)
 create mode 100644 frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.stories.tsx
 create mode 100644 frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tests.tsx
 create mode 100644 frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx
 create mode 100644 frontend/components/forms/fields/DropdownWrapper/_styles.scss
 create mode 100644 frontend/components/forms/fields/DropdownWrapper/index.tsx
 delete mode 100644 frontend/interfaces/role.ts

diff --git a/frontend/components/TeamsDropdown/TeamsDropdown.tsx b/frontend/components/TeamsDropdown/TeamsDropdown.tsx
index e38b1c1b13..bc59c6fb0c 100644
--- a/frontend/components/TeamsDropdown/TeamsDropdown.tsx
+++ b/frontend/components/TeamsDropdown/TeamsDropdown.tsx
@@ -18,7 +18,7 @@ import {
 
 import Icon from "components/Icon";
 
-interface INumberDropdownOption extends Omit<IDropdownOption, "value"> {
+export interface INumberDropdownOption extends Omit<IDropdownOption, "value"> {
   value: number; // Redefine the value property to be just number
 }
 
diff --git a/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/_styles.scss b/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/_styles.scss
index 7fcd24ad33..23bf82f070 100644
--- a/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/DropdownOptionTooltipWrapper/_styles.scss
@@ -1,7 +1,8 @@
 // Used with old react-select dropdown and
-// New react-select-5 ActionsDropdown.tsx
+// New react-select-5: ActionsDropdown.tsx, DropdownWrapper.tsx
 .Select > .Select-menu-outer,
-.actions-dropdown {
+.actions-dropdown,
+.react-select__option {
   .is-disabled * {
     color: $ui-fleet-black-50;
   }
diff --git a/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.stories.tsx b/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.stories.tsx
new file mode 100644
index 0000000000..ee0d223c58
--- /dev/null
+++ b/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.stories.tsx
@@ -0,0 +1,62 @@
+// stories/DropdownWrapper.stories.tsx
+
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import DropdownWrapper, {
+  IDropdownWrapper,
+  CustomOptionType,
+} from "./DropdownWrapper";
+
+// Define metadata for the story
+export default {
+  title: "Components/DropdownWrapper",
+  component: DropdownWrapper,
+  argTypes: {
+    onChange: { action: "changed" },
+  },
+} as Meta;
+
+// Define a template for the stories
+const Template: Story<IDropdownWrapper> = (args) => (
+  <DropdownWrapper {...args} />
+);
+
+// Sample options to be used in the dropdown
+const sampleOptions: CustomOptionType[] = [
+  { label: "Option 1", value: "option1", helpText: "Help text for option 1" },
+  {
+    label: "Option 2",
+    value: "option2",
+    tooltipContent: "Tooltip for option 2",
+  },
+  { label: "Option 3", value: "option3", isDisabled: true },
+];
+
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+  options: sampleOptions,
+  name: "dropdown-example",
+  label: "Select an option",
+};
+
+// Disabled story
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  isDisabled: true,
+};
+
+// With Help Text story
+export const WithHelpText = Template.bind({});
+WithHelpText.args = {
+  ...Default.args,
+  helpText: "This is some help text for the dropdown",
+};
+
+// With Error story
+export const WithError = Template.bind({});
+WithError.args = {
+  ...Default.args,
+  error: "This is an error message",
+};
diff --git a/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tests.tsx b/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tests.tsx
new file mode 100644
index 0000000000..2715876f8b
--- /dev/null
+++ b/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tests.tsx
@@ -0,0 +1,102 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DropdownWrapper, { CustomOptionType } from "./DropdownWrapper";
+
+const sampleOptions: CustomOptionType[] = [
+  {
+    label: "Option 1",
+    value: "option1",
+    tooltipContent: "Tooltip 1",
+    helpText: "Help text 1",
+  },
+  {
+    label: "Option 2",
+    value: "option2",
+    tooltipContent: "Tooltip 2",
+    helpText: "Help text 2",
+  },
+];
+
+describe("DropdownWrapper Component", () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("renders with help text", () => {
+    render(
+      <DropdownWrapper
+        options={sampleOptions}
+        value="option1"
+        onChange={mockOnChange}
+        name="test-dropdown"
+        label="Test Dropdown"
+        helpText="This is a help text."
+      />
+    );
+
+    expect(screen.getByText(/test dropdown/i)).toBeInTheDocument();
+    expect(screen.getByText(/this is a help text/i)).toBeInTheDocument();
+  });
+
+  test("calls onChange when an option is selected", async () => {
+    render(
+      <DropdownWrapper
+        options={sampleOptions}
+        value="option1"
+        onChange={mockOnChange}
+        name="test-dropdown"
+        label="Test Dropdown"
+        placeholder="Choose option"
+      />
+    );
+
+    // Open the dropdown
+    await userEvent.click(screen.getByText(/option 1/i));
+
+    // Select Option 2
+    await userEvent.click(screen.getByText(/option 2/i));
+
+    expect(mockOnChange).toHaveBeenCalledWith({
+      helpText: "Help text 2",
+      label: "Option 2",
+      tooltipContent: "Tooltip 2",
+      value: "option2",
+    });
+  });
+
+  test("renders error message when provided", () => {
+    render(
+      <DropdownWrapper
+        options={sampleOptions}
+        value="option1"
+        onChange={mockOnChange}
+        name="test-dropdown"
+        label="Test Dropdown"
+        error="This is an error message."
+      />
+    );
+
+    expect(screen.getByText(/this is an error message/i)).toBeInTheDocument();
+  });
+
+  test("displays no options message when no options are available", async () => {
+    render(
+      <DropdownWrapper
+        options={[]}
+        value=""
+        onChange={mockOnChange}
+        name="test-dropdown"
+        label="Test Dropdown"
+        placeholder="Choose option"
+      />
+    );
+
+    // Open dropdown
+    await userEvent.click(screen.getByText(/choose option/i));
+
+    expect(screen.getByText(/no results found/i)).toBeInTheDocument();
+  });
+});
diff --git a/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx b/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx
new file mode 100644
index 0000000000..51c5c3cd69
--- /dev/null
+++ b/frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx
@@ -0,0 +1,340 @@
+/**
+ * This is a new component built off react-select 5.4
+ * meant to replace Dropdown.jsx built off react-select 1.3
+ *
+ * See storybook component for current functionality
+ *
+ * Prototyped on UserForm.tsx but added and tested the following:
+ * Options: text, disabled, option helptext, option tooltip
+ * Other: label text, dropdown help text, dropdown error
+ */
+
+import classnames from "classnames";
+import React from "react";
+import Select, {
+  StylesConfig,
+  DropdownIndicatorProps,
+  OptionProps,
+  components,
+  PropsValue,
+  SingleValue,
+} from "react-select-5";
+
+import { COLORS } from "styles/var/colors";
+import { PADDING } from "styles/var/padding";
+
+import FormField from "components/forms/FormField";
+import DropdownOptionTooltipWrapper from "components/forms/fields/Dropdown/DropdownOptionTooltipWrapper";
+import Icon from "components/Icon";
+
+const getOptionBackgroundColor = (state: any) => {
+  return state.isSelected || state.isFocused
+    ? COLORS["ui-vibrant-blue-10"]
+    : "transparent";
+};
+
+export interface CustomOptionType {
+  label: string;
+  value: string;
+  tooltipContent?: string;
+  helpText?: string;
+  isDisabled?: boolean;
+}
+
+export interface IDropdownWrapper {
+  options: CustomOptionType[];
+  value?: PropsValue<CustomOptionType> | string;
+  onChange: (newValue: SingleValue<CustomOptionType>) => void;
+  name: string;
+  className?: string;
+  labelClassname?: string;
+  error?: string;
+  label?: JSX.Element | string;
+  helpText?: JSX.Element | string;
+  isSearchable?: boolean;
+  isDisabled?: boolean;
+  placeholder?: string;
+  menuPortalTarget?: HTMLElement | null;
+}
+
+const baseClass = "dropdown-wrapper";
+
+const DropdownWrapper = ({
+  options,
+  value,
+  onChange,
+  name,
+  className,
+  labelClassname,
+  error,
+  label,
+  helpText,
+  isSearchable,
+  isDisabled = false,
+  placeholder,
+  menuPortalTarget,
+}: IDropdownWrapper) => {
+  const wrapperClassNames = classnames(baseClass, className);
+
+  const handleChange = (newValue: SingleValue<CustomOptionType>) => {
+    onChange(newValue);
+  };
+
+  // Ability to handle value of type string or CustomOptionType
+  const getCurrentValue = () => {
+    if (typeof value === "string") {
+      return options.find((option) => option.value === value) || null;
+    }
+    return value;
+  };
+
+  interface CustomOptionProps
+    extends Omit<OptionProps<CustomOptionType, false>, "data"> {
+    data: CustomOptionType;
+  }
+
+  const CustomOption = (props: CustomOptionProps) => {
+    const { data, ...rest } = props;
+
+    const optionContent = (
+      <div className={`${baseClass}__option`}>
+        {data.label}
+        {data.helpText && (
+          <span className={`${baseClass}__help-text`}>{data.helpText}</span>
+        )}
+      </div>
+    );
+
+    return (
+      <components.Option {...rest} data={data}>
+        {data.tooltipContent ? (
+          <DropdownOptionTooltipWrapper tipContent={data.tooltipContent}>
+            {optionContent}
+          </DropdownOptionTooltipWrapper>
+        ) : (
+          optionContent
+        )}
+      </components.Option>
+    );
+  };
+
+  const CustomDropdownIndicator = (
+    props: DropdownIndicatorProps<any, false, any>
+  ) => {
+    const { isFocused, selectProps } = props;
+    const color =
+      isFocused || selectProps.menuIsOpen
+        ? "core-fleet-blue"
+        : "core-fleet-black";
+
+    return (
+      <components.DropdownIndicator
+        {...props}
+        className={`${baseClass}__indicator`}
+      >
+        <Icon
+          name="chevron-down"
+          color={color}
+          className={`${baseClass}__icon`}
+        />
+      </components.DropdownIndicator>
+    );
+  };
+
+  const customStyles: StylesConfig<CustomOptionType, false> = {
+    container: (provided) => ({
+      ...provided,
+      width: "100%",
+      height: "40px",
+    }),
+    control: (provided, state) => ({
+      ...provided,
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      backgroundColor: COLORS["ui-off-white"],
+      paddingLeft: "8px", // TODO: Update to match styleguide of (16px) when updating rest of UI (8px)
+      paddingRight: "8px",
+      cursor: "pointer",
+      boxShadow: "none",
+      borderRadius: "4px",
+      borderColor: state.isFocused
+        ? COLORS["core-fleet-blue"]
+        : COLORS["ui-fleet-black-10"],
+      "&:hover": {
+        boxShadow: "none",
+        borderColor: COLORS["core-fleet-blue"],
+        ".dropdown-wrapper__single-value": {
+          color: COLORS["core-vibrant-blue-over"],
+        },
+        ".dropdown-wrapper__indicator path": {
+          stroke: COLORS["core-vibrant-blue-over"],
+        },
+      },
+      // When tabbing
+      // Relies on --is-focused for styling as &:focus-visible cannot be applied
+      "&.dropdown-wrapper__control--is-focused": {
+        ".dropdown-wrapper__single-value": {
+          color: COLORS["core-vibrant-blue-over"],
+        },
+        ".dropdown-wrapper__indicator path": {
+          stroke: COLORS["core-vibrant-blue-over"],
+        },
+      },
+      ...(state.isDisabled && {
+        ".dropdown-wrapper__single-value": {
+          color: COLORS["ui-fleet-black-50"],
+        },
+        ".dropdown-wrapper__indicator path": {
+          stroke: COLORS["ui-fleet-black-50"],
+        },
+      }),
+      "&:active": {
+        ".dropdown-wrapper__single-value": {
+          color: COLORS["core-vibrant-blue-down"],
+        },
+        ".dropdown-wrapper__indicator path": {
+          stroke: COLORS["core-vibrant-blue-down"],
+        },
+      },
+      ...(state.menuIsOpen && {
+        ".dropdown-wrapper__indicator svg": {
+          transform: "rotate(180deg)",
+          transition: "transform 0.25s ease",
+        },
+      }),
+    }),
+    singleValue: (provided) => ({
+      ...provided,
+      fontSize: "16px",
+      margin: 0,
+      padding: 0,
+    }),
+    dropdownIndicator: (provided) => ({
+      ...provided,
+      display: "flex",
+      padding: "2px",
+      svg: {
+        transition: "transform 0.25s ease",
+      },
+    }),
+    menu: (provided) => ({
+      ...provided,
+      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
+      borderRadius: "4px",
+      zIndex: 6,
+      overflow: "hidden",
+      border: 0,
+      marginTop: 0,
+      maxHeight: "none",
+      position: "absolute",
+      left: "0",
+      animation: "fade-in 150ms ease-out",
+    }),
+    menuList: (provided) => ({
+      ...provided,
+      padding: PADDING["pad-small"],
+    }),
+    valueContainer: (provided) => ({
+      ...provided,
+      padding: 0,
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      padding: "10px 8px",
+      fontSize: "14px",
+      backgroundColor: getOptionBackgroundColor(state),
+      color: COLORS["core-fleet-black"],
+      "&:hover": {
+        backgroundColor: state.isDisabled
+          ? "transparent"
+          : COLORS["ui-vibrant-blue-10"],
+      },
+      "&:active": {
+        backgroundColor: state.isDisabled
+          ? "transparent"
+          : COLORS["ui-vibrant-blue-10"],
+      },
+      ...(state.isDisabled && {
+        color: COLORS["ui-fleet-black-50"],
+        fontStyle: "italic",
+        cursor: "not-allowed",
+        pointerEvents: "none",
+      }),
+      // Styles for custom option
+      ".dropdown-wrapper__option": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        width: "100%",
+      },
+      ".dropdown-wrapper__help-text": {
+        fontSize: "12px",
+        whiteSpace: "normal",
+        color: COLORS["ui-fleet-black-50"],
+        fontStyle: "italic",
+      },
+    }),
+    menuPortal: (base) => ({ ...base, zIndex: 999 }), // Not hidden beneath scrollable sections
+    noOptionsMessage: (provided) => ({
+      ...provided,
+      textAlign: "left",
+      fontSize: "14px",
+      padding: "10px 8px",
+    }),
+  };
+
+  const renderLabel = () => {
+    const labelWrapperClasses = classnames(
+      `${baseClass}__label`,
+      labelClassname,
+      {
+        [`${baseClass}__label--error`]: !!error,
+        [`${baseClass}__label--disabled`]: isDisabled,
+      }
+    );
+
+    if (!label) {
+      return "";
+    }
+
+    return (
+      <label className={labelWrapperClasses} htmlFor={name}>
+        {error || label}
+      </label>
+    );
+  };
+
+  return (
+    <FormField
+      name={name}
+      label={renderLabel()}
+      helpText={helpText}
+      type="dropdown"
+      className={wrapperClassNames}
+    >
+      <Select<CustomOptionType, false>
+        classNamePrefix="react-select"
+        isSearchable={isSearchable}
+        styles={customStyles}
+        options={options}
+        components={{
+          Option: CustomOption,
+          DropdownIndicator: CustomDropdownIndicator,
+          IndicatorSeparator: () => null,
+        }}
+        value={getCurrentValue()}
+        onChange={handleChange}
+        isDisabled={isDisabled}
+        menuPortalTarget={
+          menuPortalTarget === undefined ? document.body : menuPortalTarget
+        }
+        noOptionsMessage={() => "No results found"}
+        tabIndex={isDisabled ? -1 : 0} // Ensures disabled dropdown has no keyboard accessibility
+        placeholder={placeholder}
+      />
+    </FormField>
+  );
+};
+
+export default DropdownWrapper;
diff --git a/frontend/components/forms/fields/DropdownWrapper/_styles.scss b/frontend/components/forms/fields/DropdownWrapper/_styles.scss
new file mode 100644
index 0000000000..2a92f5ced6
--- /dev/null
+++ b/frontend/components/forms/fields/DropdownWrapper/_styles.scss
@@ -0,0 +1,14 @@
+// react-select's <Select/> styles prop customizes the styling of
+// the internal components and not external elements like labels
+// See customStyles in DropdownWrappr.tsx
+// https://react-select.com/styles
+.dropdown-wrapper {
+  &__label {
+    &--error {
+      color: $ui-error;
+    }
+    &--disabled {
+      color: $ui-fleet-black-50;
+    }
+  }
+}
diff --git a/frontend/components/forms/fields/DropdownWrapper/index.tsx b/frontend/components/forms/fields/DropdownWrapper/index.tsx
new file mode 100644
index 0000000000..7e83f80194
--- /dev/null
+++ b/frontend/components/forms/fields/DropdownWrapper/index.tsx
@@ -0,0 +1 @@
+export { default } from "./DropdownWrapper";
diff --git a/frontend/interfaces/role.ts b/frontend/interfaces/role.ts
deleted file mode 100644
index b645baa50d..0000000000
--- a/frontend/interfaces/role.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from "prop-types";
-import { UserRole } from "./user";
-
-export default PropTypes.shape({
-  disabled: PropTypes.bool,
-  label: PropTypes.string,
-  value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-  helpText: PropTypes.string,
-});
-
-export interface IRole {
-  disabled: boolean;
-  label: string;
-  value: UserRole;
-  helpText?: string;
-}
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPage.tsx
index 63bb85c823..a60b3f0661 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPage.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPage.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-  useEffect,
-} from "react";
+import React, { useCallback, useContext, useMemo, useState } from "react";
 import { useQuery } from "react-query";
 import { Link } from "react-router";
 
diff --git a/frontend/pages/admin/UserManagementPage/UserManagementPage.tsx b/frontend/pages/admin/UserManagementPage/UserManagementPage.tsx
index 4f4190de78..a12c06bb7c 100644
--- a/frontend/pages/admin/UserManagementPage/UserManagementPage.tsx
+++ b/frontend/pages/admin/UserManagementPage/UserManagementPage.tsx
@@ -1,7 +1,5 @@
 import React from "react";
 import { InjectedRouter } from "react-router";
-import SandboxGate from "components/Sandbox/SandboxGate";
-import SandboxMessage from "components/Sandbox/SandboxMessage";
 import UsersTable from "./components/UsersTable";
 
 const baseClass = "user-management";
@@ -17,17 +15,7 @@ const UserManagementPage = ({ router }: IUserManagementProps): JSX.Element => {
         Create new users, customize user permissions, and remove users from
         Fleet.
       </p>
-      <SandboxGate
-        fallbackComponent={() => (
-          <SandboxMessage
-            message="User management is only available in self-managed Fleet"
-            utmSource="fleet-ui-users-page"
-            className={`${baseClass}__sandbox-message`}
-          />
-        )}
-      >
-        <UsersTable router={router} />
-      </SandboxGate>
+      <UsersTable router={router} />
     </div>
   );
 };
diff --git a/frontend/pages/admin/UserManagementPage/components/SelectRoleForm/SelectRoleForm.tsx b/frontend/pages/admin/UserManagementPage/components/SelectRoleForm/SelectRoleForm.tsx
index a81d05df44..c0236b5f88 100644
--- a/frontend/pages/admin/UserManagementPage/components/SelectRoleForm/SelectRoleForm.tsx
+++ b/frontend/pages/admin/UserManagementPage/components/SelectRoleForm/SelectRoleForm.tsx
@@ -1,10 +1,9 @@
 import React, { useState, useContext } from "react";
-
 import { ITeam } from "interfaces/team";
 import { UserRole } from "interfaces/user";
-// ignore TS error for now until these are rewritten in ts.
-// @ts-ignore
-import Dropdown from "components/forms/fields/Dropdown";
+import { SingleValue } from "react-select-5";
+import DropdownWrapper from "components/forms/fields/DropdownWrapper";
+import { CustomOptionType } from "components/forms/fields/DropdownWrapper/DropdownWrapper";
 import { AppContext } from "context/app";
 import { roleOptions } from "../../helpers/userManagementHelpers";
 
@@ -13,29 +12,19 @@ interface ISelectRoleFormProps {
   currentTeam?: ITeam;
   teams: ITeam[];
   onFormChange: (teams: ITeam[]) => void;
-  label: string | string[];
   isApiOnly?: boolean;
 }
 
 const generateSelectedTeamData = (
   allTeams: ITeam[],
-  updatedTeam?: any
+  updatedTeam?: Partial<ITeam>
 ): ITeam[] => {
-  const filtered = allTeams.map(
-    (teamItem): ITeam => {
-      const teamRole =
-        teamItem.id === updatedTeam?.id ? updatedTeam.role : teamItem.role;
-      return {
-        description: teamItem.description,
-        id: teamItem.id,
-        host_count: teamItem.host_count,
-        user_count: teamItem.user_count,
-        name: teamItem.name,
-        role: teamRole,
-      };
-    }
+  return allTeams.map(
+    (teamItem): ITeam => ({
+      ...teamItem,
+      role: teamItem.id === updatedTeam?.id ? updatedTeam.role! : teamItem.role,
+    })
   );
-  return filtered;
 };
 
 const SelectRoleForm = ({
@@ -43,33 +32,33 @@ const SelectRoleForm = ({
   currentTeam,
   teams,
   onFormChange,
-  label,
   isApiOnly,
 }: ISelectRoleFormProps): JSX.Element => {
   const { isPremiumTier } = useContext(AppContext);
 
-  const [selectedRole, setSelectedRole] = useState(
-    defaultTeamRole.toLowerCase()
-  );
+  const [selectedRole, setSelectedRole] = useState<CustomOptionType>({
+    value: defaultTeamRole.toLowerCase(),
+    label: defaultTeamRole,
+  });
 
-  const updateSelectedRole = (newRoleValue: UserRole) => {
-    const updatedTeam = { ...currentTeam };
-
-    updatedTeam.role = newRoleValue;
-
-    onFormChange(generateSelectedTeamData(teams, updatedTeam));
-
-    setSelectedRole(newRoleValue);
+  const updateSelectedRole = (newRoleValue: SingleValue<CustomOptionType>) => {
+    if (newRoleValue) {
+      const updatedTeam = {
+        ...currentTeam,
+        role: newRoleValue.value as UserRole,
+      };
+      onFormChange(generateSelectedTeamData(teams, updatedTeam));
+      setSelectedRole(newRoleValue);
+    }
   };
 
   return (
-    <Dropdown
-      label={label}
-      value={selectedRole}
+    <DropdownWrapper
+      name="Team role"
       options={roleOptions({ isPremiumTier, isApiOnly })}
-      searchable={false}
-      onChange={(newRoleValue: UserRole) => updateSelectedRole(newRoleValue)}
-      testId={`${name}-checkbox`}
+      value={selectedRole}
+      onChange={updateSelectedRole}
+      isSearchable={false}
     />
   );
 };
diff --git a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/SelectedTeamsForm.tsx b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/SelectedTeamsForm.tsx
index 86ffa85ee5..4f8635f995 100644
--- a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/SelectedTeamsForm.tsx
+++ b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/SelectedTeamsForm.tsx
@@ -3,8 +3,9 @@ import React, { useState } from "react";
 import { ITeam } from "interfaces/team";
 import { UserRole } from "interfaces/user";
 import Checkbox from "components/forms/fields/Checkbox";
-// @ts-ignore
-import Dropdown from "components/forms/fields/Dropdown";
+import { SingleValue } from "react-select-5";
+import DropdownWrapper from "components/forms/fields/DropdownWrapper";
+import { CustomOptionType } from "components/forms/fields/DropdownWrapper/DropdownWrapper";
 import { roleOptions } from "../../helpers/userManagementHelpers";
 
 interface ITeamCheckboxListItem extends ITeam {
@@ -62,7 +63,7 @@ const generateSelectedTeamData = (
 const updateFormState = (
   prevTeamItems: ITeamCheckboxListItem[],
   teamId: number,
-  newValue: UserRole | boolean | undefined
+  newValue: SingleValue<CustomOptionType> | boolean | undefined
 ): ITeamCheckboxListItem[] => {
   const prevItemIndex = prevTeamItems.findIndex((item) => item.id === teamId);
   const prevItem = prevTeamItems[prevItemIndex];
@@ -70,7 +71,7 @@ const updateFormState = (
   if (typeof newValue === "boolean") {
     prevItem.isChecked = newValue;
   } else {
-    prevItem.role = newValue;
+    prevItem.role = newValue?.value as UserRole;
   }
 
   return [...prevTeamItems];
@@ -87,7 +88,7 @@ const useSelectedTeamState = (
 
   const updateSelectedTeams = (
     teamId: number,
-    newValue: UserRole | boolean
+    newValue: CustomOptionType | boolean
   ) => {
     setTeamsFormList((prevState) => {
       const updatedTeamFormList = updateFormState(prevState, teamId, newValue);
@@ -127,15 +128,15 @@ const SelectedTeamsForm = ({
             >
               {name}
             </Checkbox>
-            <Dropdown
+            <DropdownWrapper
+              name={name}
               value={role}
               className={`${baseClass}__role-dropdown`}
               options={roleOptions({ isPremiumTier: true, isApiOnly })}
-              searchable={false}
-              onChange={(newValue: UserRole) =>
-                updateSelectedTeams(teamItem.id, newValue)
+              isSearchable={false}
+              onChange={(newValue: SingleValue<CustomOptionType>) =>
+                updateSelectedTeams(teamItem.id, newValue as CustomOptionType)
               }
-              testId={`${name}-checkbox`}
             />
           </div>
         );
diff --git a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
index 2fc392ae21..dc2629b80f 100644
--- a/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/components/SelectedTeamsForm/_styles.scss
@@ -13,7 +13,7 @@
     justify-content: space-between;
 
     .form-field--dropdown {
-      width: auto;
+      width: 154px; // Matches dropdown
     }
   }
 
diff --git a/frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx b/frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx
index 0e74b29c58..c89dc37dcc 100644
--- a/frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx
+++ b/frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx
@@ -370,7 +370,6 @@ const UserForm = ({
             </>
           ) : (
             <SelectRoleForm
-              label="Role"
               currentTeam={currentTeam || formData.teams[0]}
               teams={formData.teams}
               defaultTeamRole={defaultTeamRole || "observer"}
diff --git a/frontend/pages/admin/UserManagementPage/helpers/userManagementHelpers.ts b/frontend/pages/admin/UserManagementPage/helpers/userManagementHelpers.ts
index 60bc3ba6c3..60ba9120b8 100644
--- a/frontend/pages/admin/UserManagementPage/helpers/userManagementHelpers.ts
+++ b/frontend/pages/admin/UserManagementPage/helpers/userManagementHelpers.ts
@@ -1,8 +1,8 @@
 import { isEqual } from "lodash";
 
+import { CustomOptionType } from "components/forms/fields/DropdownWrapper/DropdownWrapper";
 import { IInvite } from "interfaces/invite";
 import { IUser, IUserUpdateBody, IUpdateUserFormData } from "interfaces/user";
-import { IRole } from "interfaces/role";
 import { IFormData } from "../components/UserForm/UserForm";
 
 type ICurrentUserData = Pick<
@@ -10,7 +10,7 @@ type ICurrentUserData = Pick<
   "global_role" | "teams" | "name" | "email" | "sso_enabled"
 >;
 
-interface IRoleOptionsParams {
+export interface IRoleOptionsParams {
   isPremiumTier?: boolean;
   isApiOnly?: boolean;
 }
@@ -58,20 +58,17 @@ const generateUpdateData = (
 export const roleOptions = ({
   isPremiumTier,
   isApiOnly,
-}: IRoleOptionsParams): IRole[] => {
-  const roles: IRole[] = [
+}: IRoleOptionsParams): CustomOptionType[] => {
+  const roles: CustomOptionType[] = [
     {
-      disabled: false,
       label: "Observer",
       value: "observer",
     },
     {
-      disabled: false,
       label: "Maintainer",
       value: "maintainer",
     },
     {
-      disabled: false,
       label: "Admin",
       value: "admin",
     },
@@ -79,14 +76,12 @@ export const roleOptions = ({
 
   if (isPremiumTier) {
     roles.splice(1, 0, {
-      disabled: false,
       label: "Observer+",
       value: "observer_plus",
     });
 
     if (isApiOnly) {
       roles.splice(3, 0, {
-        disabled: false,
         label: "GitOps",
         value: "gitops",
       });

From a0b03b0c6eb4adbf38e1c86a06d47d9a242fe5fb Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 3 Dec 2024 09:09:53 -0500
Subject: [PATCH 2/5] Fleet UI: Add ModalFooter component to help handle sticky
 footers (#24169)

---
 frontend/components/Modal/Modal.tsx           |   5 -
 frontend/components/Modal/_styles.scss        |  13 +-
 .../ModalFooter/ModalFooter.stories.tsx       |  63 ++++++++
 .../components/ModalFooter/ModalFooter.tsx    |  44 ++++++
 frontend/components/ModalFooter/_styles.scss  |  27 ++++
 frontend/components/ModalFooter/index.ts      |   1 +
 .../RunScriptDetailsModal.tsx                 |  49 +++++--
 .../ScriptDetailsModal/ScriptDetailsModal.tsx | 137 +++++++++++-------
 .../ScriptDetailsModal/_styles.scss           |   3 +-
 9 files changed, 266 insertions(+), 76 deletions(-)
 create mode 100644 frontend/components/ModalFooter/ModalFooter.stories.tsx
 create mode 100644 frontend/components/ModalFooter/ModalFooter.tsx
 create mode 100644 frontend/components/ModalFooter/_styles.scss
 create mode 100644 frontend/components/ModalFooter/index.ts

diff --git a/frontend/components/Modal/Modal.tsx b/frontend/components/Modal/Modal.tsx
index d3947370a2..8049b47441 100644
--- a/frontend/components/Modal/Modal.tsx
+++ b/frontend/components/Modal/Modal.tsx
@@ -37,7 +37,6 @@ export interface IModalProps {
    * */
   disableClosingModal?: boolean;
   className?: string;
-  actionsFooter?: JSX.Element;
 }
 
 const Modal = ({
@@ -51,7 +50,6 @@ const Modal = ({
   isContentDisabled = false,
   disableClosingModal = false,
   className,
-  actionsFooter,
 }: IModalProps): JSX.Element => {
   useEffect(() => {
     const closeWithEscapeKey = (e: KeyboardEvent) => {
@@ -127,9 +125,6 @@ const Modal = ({
           )}
           <div className={contentClasses}>{children}</div>
         </div>
-        {actionsFooter && (
-          <div className={`${baseClass}__actions-footer`}>{actionsFooter}</div>
-        )}
       </div>
     </div>
   );
diff --git a/frontend/components/Modal/_styles.scss b/frontend/components/Modal/_styles.scss
index ef41106731..747f6e58f2 100644
--- a/frontend/components/Modal/_styles.scss
+++ b/frontend/components/Modal/_styles.scss
@@ -25,17 +25,9 @@
   &__content-wrapper {
     margin-top: $pad-large;
     font-size: $x-small;
-    // New pattern of max height modals pushed to 4.61 with PR #24019
-    overflow: visible;
 
     .input-field {
       width: 100%;
-
-      &::placeholder {
-        font-size: $x-small;
-        font-style: italic;
-        line-height: 24px;
-      }
     }
 
     form .modal-cta-wrap,
@@ -142,6 +134,11 @@
   }
 }
 
+.modal-scrollable-content {
+  overflow-y: auto;
+  max-height: 705px;
+}
+
 .modal-cta-wrap {
   align-self: flex-end;
   display: flex;
diff --git a/frontend/components/ModalFooter/ModalFooter.stories.tsx b/frontend/components/ModalFooter/ModalFooter.stories.tsx
new file mode 100644
index 0000000000..802f76f9f0
--- /dev/null
+++ b/frontend/components/ModalFooter/ModalFooter.stories.tsx
@@ -0,0 +1,63 @@
+/* eslint-disable no-alert */
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Button from "components/buttons/Button";
+import Icon from "components/Icon";
+import ActionsDropdown from "components/ActionsDropdown";
+import ModalFooter from "./ModalFooter";
+
+export default {
+  title: "Components/ModalFooter",
+  component: ModalFooter,
+} as Meta;
+
+const Template: Story = (args) => (
+  <ModalFooter primaryButtons={<></>} {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  primaryButtons: (
+    <>
+      <ActionsDropdown
+        className="modal-footer__manage-automations-dropdown"
+        onChange={(value) => alert(`Selected action: ${value}`)}
+        placeholder="More actions"
+        isSearchable={false}
+        options={[
+          { value: "action1", label: "Action 1" },
+          { value: "action2", label: "Action 2" },
+        ]}
+        menuPlacement="top"
+      />
+      <Button onClick={() => alert("Done clicked")} variant="brand">
+        Done
+      </Button>
+    </>
+  ),
+  secondaryButtons: (
+    <>
+      <Button variant="icon" onClick={() => alert("Download clicked")}>
+        <Icon name="download" />
+      </Button>
+      <Button variant="icon" onClick={() => alert("Delete clicked")}>
+        <Icon name="trash" color="ui-fleet-black-75" />
+      </Button>
+    </>
+  ),
+  isTopScrolling: false,
+};
+
+export const WithTopScrolling = Template.bind({});
+WithTopScrolling.args = {
+  ...Default.args,
+  isTopScrolling: true,
+};
+
+export const WithoutSecondaryButtons = Template.bind({});
+WithoutSecondaryButtons.args = {
+  primaryButtons: Default.args.primaryButtons,
+  secondaryButtons: undefined,
+  isTopScrolling: false,
+};
diff --git a/frontend/components/ModalFooter/ModalFooter.tsx b/frontend/components/ModalFooter/ModalFooter.tsx
new file mode 100644
index 0000000000..4b24cc6db0
--- /dev/null
+++ b/frontend/components/ModalFooter/ModalFooter.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import classnames from "classnames";
+import { COLORS } from "styles/var/colors";
+
+const baseClass = "modal-footer";
+
+interface IModalFooterProps {
+  primaryButtons: JSX.Element;
+  secondaryButtons?: JSX.Element;
+  className?: string;
+  /** Renders a line above action buttons to indicate scrollability */
+  isTopScrolling?: boolean;
+}
+
+const ModalFooter = ({
+  primaryButtons,
+  secondaryButtons,
+  className,
+  isTopScrolling = false,
+}: IModalFooterProps): JSX.Element => {
+  const classes = classnames(className, `${baseClass}__content-wrapper`);
+
+  return (
+    <div
+      className={classes}
+      style={{
+        borderTop: isTopScrolling
+          ? `1px solid ${COLORS["ui-fleet-black-50"]}`
+          : "none",
+      }}
+    >
+      <div className={`${baseClass}__primary-buttons-wrapper`}>
+        {primaryButtons}
+      </div>
+      {secondaryButtons && (
+        <div className={`${baseClass}__secondary-buttons-wrapper`}>
+          {secondaryButtons}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ModalFooter;
diff --git a/frontend/components/ModalFooter/_styles.scss b/frontend/components/ModalFooter/_styles.scss
new file mode 100644
index 0000000000..679551e1d8
--- /dev/null
+++ b/frontend/components/ModalFooter/_styles.scss
@@ -0,0 +1,27 @@
+.modal-footer {
+  &__content-wrapper {
+    align-self: flex-end;
+    display: flex;
+    flex-direction: row-reverse;
+    padding-top: $pad-medium;
+    justify-content: space-between;
+  }
+
+  // Styles both primary-actions and secondary-actions
+  &__primary-buttons-wrapper,
+  &__secondary-buttons_wrapper {
+    display: flex;
+    justify-content: space-between;
+    gap: $pad-medium;
+    align-items: center;
+  }
+
+  // Align primary actions right if no secondary actions
+  > :last-child {
+    margin-left: auto;
+  }
+
+  .button__text-icon {
+    padding: 11px;
+  }
+}
diff --git a/frontend/components/ModalFooter/index.ts b/frontend/components/ModalFooter/index.ts
new file mode 100644
index 0000000000..6a36137070
--- /dev/null
+++ b/frontend/components/ModalFooter/index.ts
@@ -0,0 +1 @@
+export { default } from "./ModalFooter";
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
index bbca7060f1..56dcaa2ad2 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useQuery } from "react-query";
 
 import scriptsAPI, { IScriptResultResponse } from "services/entities/scripts";
@@ -10,6 +10,7 @@ import Icon from "components/Icon";
 import Textarea from "components/Textarea";
 import DataError from "components/DataError/DataError";
 import Spinner from "components/Spinner/Spinner";
+import ModalFooter from "components/ModalFooter";
 
 const baseClass = "run-script-details-modal";
 
@@ -166,6 +167,17 @@ const RunScriptDetailsModal = ({
   onCancel,
   isHidden = false,
 }: IRunScriptDetailsModalProps) => {
+  // For scrollable modal
+  const [isTopScrolling, setIsTopScrolling] = useState(false);
+  const topDivRef = useRef<HTMLDivElement>(null);
+  const checkScroll = () => {
+    if (topDivRef.current) {
+      const isScrolling =
+        topDivRef.current.scrollHeight > topDivRef.current.clientHeight;
+      setIsTopScrolling(isScrolling);
+    }
+  };
+
   const { data, isLoading, isError } = useQuery<IScriptResultResponse>(
     ["runScriptDetailsModal", scriptExecutionId],
     () => {
@@ -174,6 +186,13 @@ const RunScriptDetailsModal = ({
     { refetchOnWindowFocus: false, enabled: !!scriptExecutionId }
   );
 
+  // For scrollable modal
+  useEffect(() => {
+    checkScroll();
+    window.addEventListener("resize", checkScroll);
+    return () => window.removeEventListener("resize", checkScroll);
+  }, [data]); // Re-run when data changes
+
   const renderContent = () => {
     let content = <></>;
 
@@ -206,18 +225,24 @@ const RunScriptDetailsModal = ({
     }
 
     return (
-      <>
-        <div className={`${baseClass}__modal-content`}>{content}</div>
-      </>
+      <div
+        className={`${baseClass}__modal-content modal-scrollable-content`}
+        ref={topDivRef}
+      >
+        {content}
+      </div>
     );
   };
 
   const renderFooter = () => (
-    <div className={`primary-actions ${baseClass}__host-script-actions`}>
-      <Button onClick={onCancel} variant="brand">
-        Done
-      </Button>
-    </div>
+    <ModalFooter
+      isTopScrolling={isTopScrolling}
+      primaryButtons={
+        <Button onClick={onCancel} variant="brand">
+          Done
+        </Button>
+      }
+    />
   );
   return (
     <Modal
@@ -226,9 +251,11 @@ const RunScriptDetailsModal = ({
       onEnter={onCancel}
       className={baseClass}
       isHidden={isHidden}
-      actionsFooter={renderFooter()}
     >
-      {renderContent()}
+      <>
+        {renderContent()}
+        {renderFooter()}
+      </>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/ScriptDetailsModal.tsx b/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
index ca13c7d3de..2664445127 100644
--- a/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
+++ b/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/ScriptDetailsModal.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useContext, ReactNode } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+  useEffect,
+} from "react";
 import { format } from "date-fns";
 import {
   useQuery,
@@ -15,6 +21,7 @@ import { IHostScript } from "interfaces/script";
 import { IApiError, getErrorReason } from "interfaces/errors";
 
 import Modal from "components/Modal";
+import ModalFooter from "components/ModalFooter";
 import Button from "components/buttons/Button";
 import Spinner from "components/Spinner";
 import Icon from "components/Icon";
@@ -68,6 +75,17 @@ const ScriptDetailsModal = ({
   isHidden = false,
   onClickRunDetails,
 }: IScriptDetailsModalProps) => {
+  // For scrollable modal
+  const [isTopScrolling, setIsTopScrolling] = useState(false);
+  const topDivRef = useRef<HTMLDivElement>(null);
+  const checkScroll = () => {
+    if (topDivRef.current) {
+      const isScrolling =
+        topDivRef.current.scrollHeight > topDivRef.current.clientHeight;
+      setIsTopScrolling(isScrolling);
+    }
+  };
+
   const { currentUser } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
 
@@ -87,6 +105,14 @@ const ScriptDetailsModal = ({
       enabled: !selectedScriptContent && !!selectedScriptDetails?.script_id,
     }
   );
+
+  // For scrollable modal
+  useEffect(() => {
+    checkScroll();
+    window.addEventListener("resize", checkScroll);
+    return () => window.removeEventListener("resize", checkScroll);
+  }, [scriptContent]); // Re-run when data changes
+
   const getScriptContent = async () => {
     try {
       const content = selectedScriptContent || scriptContent;
@@ -157,60 +183,64 @@ const ScriptDetailsModal = ({
     ]
   );
 
-  const shouldShowFooter = () => {
-    return !isLoadingScriptContent && selectedScriptDetails !== undefined;
-  };
+  const shouldShowFooter =
+    !isLoadingScriptContent && selectedScriptDetails !== undefined;
 
   const renderFooter = () => {
     if (!shouldShowFooter) {
-      return <></>;
+      return null;
     }
 
     return (
-      <>
-        <div className={`secondary-actions ${baseClass}__script-actions`}>
-          <Button
-            className={`${baseClass}__action-button`}
-            variant="icon"
-            onClick={() => onClickDownload()}
-          >
-            <Icon name="download" />
-          </Button>
-          <Button
-            className={`${baseClass}__action-button`}
-            variant="icon"
-            onClick={onDelete}
-          >
-            <Icon name="trash" color="ui-fleet-black-75" />
-          </Button>
-        </div>
-        <div className={`primary-actions ${baseClass}__host-script-actions`}>
-          {showHostScriptActions && selectedScriptDetails && (
-            <div className={`${baseClass}__manage-automations-wrapper`}>
-              <ActionsDropdown
-                className={`${baseClass}__manage-automations-dropdown`}
-                onChange={(value) =>
-                  onSelectMoreActions(
-                    value,
+      <ModalFooter
+        isTopScrolling={isTopScrolling}
+        secondaryButtons={
+          <>
+            <Button
+              className={`${baseClass}__action-button`}
+              variant="icon"
+              onClick={() => onClickDownload()}
+            >
+              <Icon name="download" />
+            </Button>
+            <Button
+              className={`${baseClass}__action-button`}
+              variant="icon"
+              onClick={onDelete}
+            >
+              <Icon name="trash" color="ui-fleet-black-75" />
+            </Button>
+          </>
+        }
+        primaryButtons={
+          <>
+            {showHostScriptActions && selectedScriptDetails && (
+              <div className={`${baseClass}__manage-automations-wrapper`}>
+                <ActionsDropdown
+                  className={`${baseClass}__manage-automations-dropdown`}
+                  onChange={(value) =>
+                    onSelectMoreActions(
+                      value,
+                      selectedScriptDetails as IHostScript
+                    )
+                  }
+                  placeholder="More actions"
+                  isSearchable={false}
+                  options={generateActionDropdownOptions(
+                    currentUser,
+                    hostTeamId || null,
                     selectedScriptDetails as IHostScript
-                  )
-                }
-                placeholder="More actions"
-                isSearchable={false}
-                options={generateActionDropdownOptions(
-                  currentUser,
-                  hostTeamId || null,
-                  selectedScriptDetails as IHostScript
-                )}
-                menuPlacement="top"
-              />
-            </div>
-          )}
-          <Button onClick={onCancel} variant="brand">
-            Done
-          </Button>
-        </div>
-      </>
+                  )}
+                  menuPlacement="top"
+                />
+              </div>
+            )}
+            <Button onClick={onCancel} variant="brand">
+              Done
+            </Button>
+          </>
+        }
+      />
     );
   };
 
@@ -224,7 +254,10 @@ const ScriptDetailsModal = ({
     }
 
     return (
-      <div className={`${baseClass}__script-content`}>
+      <div
+        className={`${baseClass}__script-content  modal-scrollable-content`}
+        ref={topDivRef}
+      >
         <span>Script content:</span>
         <Textarea className={`${baseClass}__script-content-textarea`}>
           {scriptContent}
@@ -249,10 +282,12 @@ const ScriptDetailsModal = ({
       title={selectedScriptDetails?.name || "Script details"}
       width="large"
       onExit={onCancel}
-      actionsFooter={shouldShowFooter() ? renderFooter() : undefined}
       isHidden={isHidden}
     >
-      {renderContent()}
+      <>
+        {renderContent()}
+        {shouldShowFooter ? renderFooter() : undefined}
+      </>
     </Modal>
   );
 };
diff --git a/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/_styles.scss b/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/_styles.scss
index 817ae074d1..5afce776db 100644
--- a/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/_styles.scss
+++ b/frontend/pages/ManageControlsPage/Scripts/components/ScriptDetailsModal/_styles.scss
@@ -7,7 +7,8 @@
 
   &__script-content-textarea {
     font-family: "SourceCodePro";
+    min-height: 150px;
     max-height: 572px;
-    overflow: auto;
+    overflow: scroll;
   }
 }

From d00ab6a986570345b416cfa1ea6290b81fafff79 Mon Sep 17 00:00:00 2001
From: Dante Catalfamo <43040593+dantecatalfamo@users.noreply.github.com>
Date: Tue, 3 Dec 2024 10:04:49 -0500
Subject: [PATCH 3/5] Stop hiding Windows MDM WSTEP config flags (#24289)

---
 changes/23462-show-windows-mdm-wstep-options |  1 +
 server/config/config.go                      | 13 -------------
 2 files changed, 1 insertion(+), 13 deletions(-)
 create mode 100644 changes/23462-show-windows-mdm-wstep-options

diff --git a/changes/23462-show-windows-mdm-wstep-options b/changes/23462-show-windows-mdm-wstep-options
new file mode 100644
index 0000000000..8df6b93139
--- /dev/null
+++ b/changes/23462-show-windows-mdm-wstep-options
@@ -0,0 +1 @@
+- Display Windows MDM WSTEP flags in `fleet --help`.
diff --git a/server/config/config.go b/server/config/config.go
index 821c8547fc..bdfe0898dc 100644
--- a/server/config/config.go
+++ b/server/config/config.go
@@ -1316,19 +1316,6 @@ func (man Manager) addConfigs() {
 		"calendar.periodicity", 0,
 		"How much time to wait between processing calendar integration.",
 	)
-
-	// Hide Microsoft/Windows MDM flags as we don't want it to be discoverable for users for now
-	betaMDMFlags := []string{
-		"mdm.windows_wstep_identity_cert",
-		"mdm.windows_wstep_identity_key",
-		"mdm.windows_wstep_identity_cert_bytes",
-		"mdm.windows_wstep_identity_key_bytes",
-	}
-	for _, mdmFlag := range betaMDMFlags {
-		if flag := man.command.PersistentFlags().Lookup(flagNameFromConfigKey(mdmFlag)); flag != nil {
-			flag.Hidden = true
-		}
-	}
 }
 
 func (man Manager) hideConfig(name string) {

From 2dda7a1eb0795e7c3b6b392e8e5beee9354417a7 Mon Sep 17 00:00:00 2001
From: Martin Angers <martin.n.angers@gmail.com>
Date: Tue, 3 Dec 2024 11:01:22 -0500
Subject: [PATCH 4/5] Replace deprecated pkcs7 package with a maintained fork
 (#24313)

---
 changes/21908-replace-mozilla-pkcs7        | 1 +
 go.mod                                     | 4 ++--
 go.sum                                     | 2 --
 server/service/apple_mdm.go                | 2 +-
 server/service/integration_mdm_dep_test.go | 2 +-
 5 files changed, 5 insertions(+), 6 deletions(-)
 create mode 100644 changes/21908-replace-mozilla-pkcs7

diff --git a/changes/21908-replace-mozilla-pkcs7 b/changes/21908-replace-mozilla-pkcs7
new file mode 100644
index 0000000000..65fc8d79bf
--- /dev/null
+++ b/changes/21908-replace-mozilla-pkcs7
@@ -0,0 +1 @@
+* Replaced the internal use of the deprecated `go.mozilla.org/pkcs7` package with the maintained fork `github.com/smallstep/pkcs7`.
diff --git a/go.mod b/go.mod
index e5939b1ae1..d016df2348 100644
--- a/go.mod
+++ b/go.mod
@@ -74,6 +74,7 @@ require (
 	github.com/mattermost/xml-roundtrip-validator v0.0.0-20201213122252-bcd7e1b9601e
 	github.com/mattn/go-sqlite3 v1.14.22
 	github.com/micromdm/micromdm v1.9.0
+	github.com/micromdm/nanolib v0.2.0
 	github.com/mitchellh/go-ps v1.0.0
 	github.com/mitchellh/gon v0.2.6-0.20231031204852-2d4f161ccecd
 	github.com/mna/redisc v1.3.2
@@ -118,7 +119,6 @@ require (
 	go.elastic.co/apm/module/apmsql/v2 v2.6.2
 	go.elastic.co/apm/v2 v2.6.2
 	go.etcd.io/bbolt v1.3.9
-	go.mozilla.org/pkcs7 v0.0.0-20210826202110-33d05740a352
 	go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux v0.56.0
 	go.opentelemetry.io/otel v1.31.0
 	go.opentelemetry.io/otel/exporters/otlp/otlptrace v1.31.0
@@ -279,7 +279,6 @@ require (
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/mattn/go-runewidth v0.0.9 // indirect
 	github.com/mattn/go-tty v0.0.3 // indirect
-	github.com/micromdm/nanolib v0.2.0 // indirect
 	github.com/mitchellh/copystructure v1.2.0 // indirect
 	github.com/mitchellh/go-homedir v1.1.0 // indirect
 	github.com/mitchellh/mapstructure v1.4.3 // indirect
@@ -323,6 +322,7 @@ require (
 	github.com/yashtewari/glob-intersection v0.1.0 // indirect
 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
 	go.elastic.co/fastjson v1.1.0 // indirect
+	go.mozilla.org/pkcs7 v0.0.0-20210826202110-33d05740a352 // indirect
 	go.opencensus.io v0.24.0 // indirect
 	go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.49.0 // indirect
 	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.49.0 // indirect
diff --git a/go.sum b/go.sum
index e00f1410fe..1379e90641 100644
--- a/go.sum
+++ b/go.sum
@@ -846,8 +846,6 @@ github.com/lib/pq v1.10.9 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
 github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 h1:6E+4a0GO5zZEnZ81pIr0yLvtUWk2if982qA3F3QD6H4=
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
-github.com/macadmins/osquery-extension v1.2.1 h1:p7tAAhfEjUjoMQJNb+X7Qc3FraVqGZqMhZ1BYJbrlaw=
-github.com/macadmins/osquery-extension v1.2.1/go.mod h1:q0BnBuYocHBRB+m3AQwdQNETH5a2KzVT3S8TKMHo9Lk=
 github.com/macadmins/osquery-extension v1.2.3 h1:PAAQVRBnpOwnzEUROiJbrjDf9RPwcAfJrNAkXUcjS3Y=
 github.com/macadmins/osquery-extension v1.2.3/go.mod h1:cNd/9INYpAYJFjfmAEJKgiuHgDkGuFMPu6GVrn7oups=
 github.com/magiconair/properties v1.8.0/go.mod h1:PppfXfuXeibc/6YijjN8zIbojt8czPbwD3XqdrwzmxQ=
diff --git a/server/service/apple_mdm.go b/server/service/apple_mdm.go
index 984e4df684..76564ffc12 100644
--- a/server/service/apple_mdm.go
+++ b/server/service/apple_mdm.go
@@ -51,7 +51,7 @@ import (
 	"github.com/go-kit/log/level"
 	"github.com/google/uuid"
 	"github.com/groob/plist"
-	"go.mozilla.org/pkcs7"
+	"github.com/smallstep/pkcs7"
 )
 
 const (
diff --git a/server/service/integration_mdm_dep_test.go b/server/service/integration_mdm_dep_test.go
index bf46168b94..c63a6a2916 100644
--- a/server/service/integration_mdm_dep_test.go
+++ b/server/service/integration_mdm_dep_test.go
@@ -38,9 +38,9 @@ import (
 	"github.com/groob/plist"
 	"github.com/jmoiron/sqlx"
 	micromdm "github.com/micromdm/micromdm/mdm/mdm"
+	"github.com/smallstep/pkcs7"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
-	"go.mozilla.org/pkcs7"
 )
 
 type profileAssignmentReq struct {

From b312bb99e5fc9b813f7d6186aebbf7bfbdb54675 Mon Sep 17 00:00:00 2001
From: Luke Heath <luke@fleetdm.com>
Date: Tue, 3 Dec 2024 10:03:37 -0600
Subject: [PATCH 5/5] Adding changes for Fleet v4.60.0 (#23817) (#24294)

---
 CHANGELOG.md                                  | 49 +++++++++++++++++++
 changes/14899-yara-rules                      |  1 -
 ...5-improve-memory-usage-software-installers |  1 -
 changes/21338-scope-profile-pending-rebuild   |  1 -
 .../21633-windows-auto-enrollment-info-banner |  1 -
 changes/21709-activities-automation-activity  |  1 -
 changes/21888-dequeue-pending-scripts         |  1 -
 .../22162-exclude-labels-fix-default-behavior |  1 -
 changes/22187-gitops-software-relative-paths  |  1 -
 changes/22224-query-log-destinations          |  1 -
 changes/22269-software-title-updated-at       |  1 -
 changes/22359-gitops-mult-abm                 |  2 -
 changes/22361-os-update-ade-sso               |  2 -
 changes/22437-linux-lock-black-screen         |  1 -
 changes/22446-scripts-modal                   |  1 -
 changes/22575-ui-for-include-any-labels       |  2 -
 changes/22576-labels-include-any-gitops       |  1 -
 changes/22578-db-schema                       |  1 -
 changes/22581-cron-updates                    |  1 -
 changes/22606-keyboard-accessiblity           |  1 -
 changes/22702-linux-encryption-frontend       |  1 -
 changes/22773-fma-uninstall-fix               |  1 -
 changes/22810-fleetd-enroll-activity          |  1 -
 changes/22891-zstd-deb-packages               |  1 -
 changes/22985-disable-forms-keyboard-access   |  1 -
 .../23016-add-chrome-host-text-area-height    |  2 -
 changes/23021-abm-cert-pem                    |  1 -
 changes/23078-allow-skipping-vuln-details     |  1 -
 ...te-mock-service-worker-package-for-secutiy |  1 -
 changes/23200-ade-enroll                      |  2 -
 changes/23213-okta-verify                     |  1 -
 changes/23247-vpp-app-install                 |  2 -
 changes/23492-software-batch-status-code      |  1 -
 changes/23525-ndes-errors                     |  1 -
 changes/23540-pe-sfx                          |  1 -
 ...-create-update-label-returns-outdated-info |  1 -
 changes/23651-reenter-password                |  1 -
 ...3669-dismiss-error-flash-on-url-change-dup |  1 -
 changes/24024-no-setup-exp                    |  2 -
 charts/fleet/Chart.yaml                       |  4 +-
 charts/fleet/values.yaml                      |  2 +-
 .../dogfood/terraform/aws/variables.tf        |  2 +-
 .../dogfood/terraform/gcp/variables.tf        |  2 +-
 infrastructure/guardduty/.terraform.lock.hcl  |  4 +-
 infrastructure/guardduty/main.tf              |  2 +-
 .../infrastructure/cloudtrail/main.tf         |  2 +-
 .../elastic-agent/.terraform.lock.hcl         |  4 +-
 .../infrastructure/elastic-agent/main.tf      |  2 +-
 .../guardduty-alerts/.terraform.lock.hcl      |  4 +-
 .../infrastructure/guardduty-alerts/main.tf   |  2 +-
 .../infrastructure/spend_alerts/main.tf       |  2 +-
 terraform/addons/vuln-processing/variables.tf |  4 +-
 terraform/byo-vpc/byo-db/byo-ecs/variables.tf |  4 +-
 terraform/byo-vpc/byo-db/variables.tf         |  4 +-
 terraform/byo-vpc/example/main.tf             |  2 +-
 terraform/byo-vpc/variables.tf                |  4 +-
 terraform/example/main.tf                     |  4 +-
 terraform/variables.tf                        |  4 +-
 tools/fleetctl-npm/package.json               |  2 +-
 59 files changed, 79 insertions(+), 75 deletions(-)
 delete mode 100644 changes/14899-yara-rules
 delete mode 100644 changes/20595-improve-memory-usage-software-installers
 delete mode 100644 changes/21338-scope-profile-pending-rebuild
 delete mode 100644 changes/21633-windows-auto-enrollment-info-banner
 delete mode 100644 changes/21709-activities-automation-activity
 delete mode 100644 changes/21888-dequeue-pending-scripts
 delete mode 100644 changes/22162-exclude-labels-fix-default-behavior
 delete mode 100644 changes/22187-gitops-software-relative-paths
 delete mode 100644 changes/22224-query-log-destinations
 delete mode 100644 changes/22269-software-title-updated-at
 delete mode 100644 changes/22359-gitops-mult-abm
 delete mode 100644 changes/22361-os-update-ade-sso
 delete mode 100644 changes/22437-linux-lock-black-screen
 delete mode 100644 changes/22446-scripts-modal
 delete mode 100644 changes/22575-ui-for-include-any-labels
 delete mode 100644 changes/22576-labels-include-any-gitops
 delete mode 100644 changes/22578-db-schema
 delete mode 100644 changes/22581-cron-updates
 delete mode 100644 changes/22606-keyboard-accessiblity
 delete mode 100644 changes/22702-linux-encryption-frontend
 delete mode 100644 changes/22773-fma-uninstall-fix
 delete mode 100644 changes/22810-fleetd-enroll-activity
 delete mode 100644 changes/22891-zstd-deb-packages
 delete mode 100644 changes/22985-disable-forms-keyboard-access
 delete mode 100644 changes/23016-add-chrome-host-text-area-height
 delete mode 100644 changes/23021-abm-cert-pem
 delete mode 100644 changes/23078-allow-skipping-vuln-details
 delete mode 100644 changes/23128-update-mock-service-worker-package-for-secutiy
 delete mode 100644 changes/23200-ade-enroll
 delete mode 100644 changes/23213-okta-verify
 delete mode 100644 changes/23247-vpp-app-install
 delete mode 100644 changes/23492-software-batch-status-code
 delete mode 100644 changes/23525-ndes-errors
 delete mode 100644 changes/23540-pe-sfx
 delete mode 100644 changes/23597-fix-create-update-label-returns-outdated-info
 delete mode 100644 changes/23651-reenter-password
 delete mode 100644 changes/23669-dismiss-error-flash-on-url-change-dup
 delete mode 100644 changes/24024-no-setup-exp

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec554cea35..bf3831e84a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,52 @@
+## Fleet 4.60.0 (Nov 27, 2024)
+
+### Endpoint operations
+- Added support for labels_include_any to gitops.
+- Added major improvements to keyboard accessibility throughout app (e.g. checkboxes, dropdowns, table navigation).
+- Added activity item for `fleetd` enrollment with host serial and display name.
+- Added capability for Fleet to serve YARA rules to agents over HTTPS authenticated via node key (requires osquery 5.14+).
+- Added a query to allow users to turn on/off automations while being transparent of the current log destination.
+- Updated UI to allow users to view scripts (from both the scripts page and host details page) without downloading them.
+- Updated activity feed to generate an activity when activity automations are enabled, edited, or disabled.
+- Cancelled pending script executions when a script is edited or deleted.
+
+### Device management (MDM)
+- Added better handling of timeout and insufficient permissions errors in NDES SCEP proxy.
+- Added info banner for cloud customers to help with their windows autoenrollment setup.
+- Added DB support for "include any" label profile deployment.
+- Added support for "include any" label/profile relationships to the profile reconciliation machinery.
+- Added `team_identifier` signature information to Apple macOS applications to the `/api/latest/fleet/hosts/:id/software` API endpoint.
+- Added indicator of how fresh a software title's host and version counts are on the title's details page.
+- Added UI for allowing users to install custom profiles on hosts that include any of the defined labels.
+- Added UI features supporting disk encryption for Ubuntu and Fedora Linux.
+- Added support for deb packages compressed with zstd.
+
+### Vulnerability management
+- Allowed skipping computationally heavy population of vulnerability details when populating host software on hosts list endpoint (`GET /api/latest/fleet/hosts`) when using Fleet Premium (`populate_software=without_vulnerability_descriptions`).
+
+### Bug fixes and improvements
+- Improved memory usage of the Fleet server when uploading a large software installer file. Note that the installer will now use (temporary) disk space and sufficient storage space is required.
+- Improved performance of adding and removing profiles to large teams by an order of magnitude.
+- Disabled accessibility via keyboard for forms that are disabled via a slider.
+- Updated software batch endpoint status code from 200 (OK) to 202 (Accepted).
+- Updated a package used for testing (msw) to improve security.
+- Updated to reboot linux machine on unlock to work around GDM bug on Ubuntu 24.04.
+- Updated GitOps to return an error if the deprecated `apple_bm_default_team` key is used and there are more than 1 ABM tokens in Fleet.
+- Dismissed error flash on the my device page when navigating to another URL.
+- Modified the Fleet setup experience feature to not run if there is no software or script configured for the setup experience.
+- Set a more accurate minimum height for the Add hosts > ChromeOS > Policy for extension field, avoiding a scrollbar.
+- Added UI prompt for user to reenter the password if SCEP/NDES url or username has changed.
+- Updated ABM public key to download as as PEM format instead of CRT.
+- Fixed issue with uploading macOS software packages that do not have a top level `Distribution.xml`, but do have a top level `PackageInfo.xml`. For example, Okta Verify.app.
+- Fixed some cases where Fleet Maintained Apps generated incorrect uninstall scripts.
+- Fixed a bug where a device that was removed from ABM and then added back wouldn't properly re-enroll in Fleet MDM.
+- Fixed name/version parsing issue with PE (EXE) installer self-extracting archives such as Opera.
+- Fixed a bug where the create and update label endpoints could return outdated information in a deployment using a mysql replica.
+- Fixed the MDM configuration profiles deployment when based on excluded labels.
+- Fixed gitops path resolution for installer queries and scripts to always be relative to where the query file or script is referenced. This change breaks existing YAML files that had to account for previous inconsistent behavior (e.g. installers in a subdirectory referencing scripts elsewhere).
+- Fixed issue where minimum OS version enforcement was not being applied during Apple ADE if MDM IdP integration was enabled.
+- Fixed a bug where users would be allowed to attempt an install of an App Store app on a host that was not MDM enrolled.
+
 ## Fleet 4.59.1 (Nov 18, 2024)
 
 ### Bug fixes
diff --git a/changes/14899-yara-rules b/changes/14899-yara-rules
deleted file mode 100644
index 2c92188cfc..0000000000
--- a/changes/14899-yara-rules
+++ /dev/null
@@ -1 +0,0 @@
-* Added capability for Fleet to serve yara rules to agents over HTTPS authenticated via node key (requires osquery 5.14+).
\ No newline at end of file
diff --git a/changes/20595-improve-memory-usage-software-installers b/changes/20595-improve-memory-usage-software-installers
deleted file mode 100644
index 7e15f3b935..0000000000
--- a/changes/20595-improve-memory-usage-software-installers
+++ /dev/null
@@ -1 +0,0 @@
-* Improved memory usage of the Fleet server when uploading a large software installer file. Note that the installer will now use (temporary) disk space and sufficient storage space is required.
diff --git a/changes/21338-scope-profile-pending-rebuild b/changes/21338-scope-profile-pending-rebuild
deleted file mode 100644
index 59e4883955..0000000000
--- a/changes/21338-scope-profile-pending-rebuild
+++ /dev/null
@@ -1 +0,0 @@
-- Speed up adding and removing profiles to large teams by an order of magnitude
diff --git a/changes/21633-windows-auto-enrollment-info-banner b/changes/21633-windows-auto-enrollment-info-banner
deleted file mode 100644
index 86cdfafdaf..0000000000
--- a/changes/21633-windows-auto-enrollment-info-banner
+++ /dev/null
@@ -1 +0,0 @@
-- add info banner for cloud customers to help with their windows autoenrollment setup
diff --git a/changes/21709-activities-automation-activity b/changes/21709-activities-automation-activity
deleted file mode 100644
index bc47a6e273..0000000000
--- a/changes/21709-activities-automation-activity
+++ /dev/null
@@ -1 +0,0 @@
-* Generate an activity when activity automations are enabled, edited, or disabled.
diff --git a/changes/21888-dequeue-pending-scripts b/changes/21888-dequeue-pending-scripts
deleted file mode 100644
index 3852ee09c3..0000000000
--- a/changes/21888-dequeue-pending-scripts
+++ /dev/null
@@ -1 +0,0 @@
-* Cancelled pending script executions when a script is edited or deleted.
diff --git a/changes/22162-exclude-labels-fix-default-behavior b/changes/22162-exclude-labels-fix-default-behavior
deleted file mode 100644
index 41524c8c03..0000000000
--- a/changes/22162-exclude-labels-fix-default-behavior
+++ /dev/null
@@ -1 +0,0 @@
-* Fixed the MDM configuration profiles deployment when based on excluded labels - prior to this fix, hosts were considered "not a member" of the label by default, even if they had not yet returned results for the excluded labels. The fix checks the label's creation time vs the host's last reported label results timestamp to prevent deploying a configuration profile if it does not yet know if the host is a member or not of those labels.
diff --git a/changes/22187-gitops-software-relative-paths b/changes/22187-gitops-software-relative-paths
deleted file mode 100644
index 8f1ce8f480..0000000000
--- a/changes/22187-gitops-software-relative-paths
+++ /dev/null
@@ -1 +0,0 @@
-* GitOps: Fixed path resolution for installer queries and scripts to always be relative to where the query file or script is referenced. This change breaks existing YAML files that had to account for previous inconsistent behavior (e.g. installers in a subdirectory referencing scripts elsewhere).
\ No newline at end of file
diff --git a/changes/22224-query-log-destinations b/changes/22224-query-log-destinations
deleted file mode 100644
index b6172a331b..0000000000
--- a/changes/22224-query-log-destinations
+++ /dev/null
@@ -1 +0,0 @@
-- Creating a query allow users to turn on/off automations while being transparent of the current log destination
diff --git a/changes/22269-software-title-updated-at b/changes/22269-software-title-updated-at
deleted file mode 100644
index dfc3f12769..0000000000
--- a/changes/22269-software-title-updated-at
+++ /dev/null
@@ -1 +0,0 @@
-* Added indicator of how fresh a software title's host and version counts are on the title's details page
diff --git a/changes/22359-gitops-mult-abm b/changes/22359-gitops-mult-abm
deleted file mode 100644
index b7a7801edb..0000000000
--- a/changes/22359-gitops-mult-abm
+++ /dev/null
@@ -1,2 +0,0 @@
-- Updates GitOps to return an error if the deprecated `apple_bm_default_team` key is used and there
-  are more than 1 ABM tokens in Fleet.
\ No newline at end of file
diff --git a/changes/22361-os-update-ade-sso b/changes/22361-os-update-ade-sso
deleted file mode 100644
index 40221866fb..0000000000
--- a/changes/22361-os-update-ade-sso
+++ /dev/null
@@ -1,2 +0,0 @@
-- Fixed issue where minimum OS version enforcement was not being applied during Apple ADE if MDM
-  IdP integration was enabled.
diff --git a/changes/22437-linux-lock-black-screen b/changes/22437-linux-lock-black-screen
deleted file mode 100644
index edfd4dc8d4..0000000000
--- a/changes/22437-linux-lock-black-screen
+++ /dev/null
@@ -1 +0,0 @@
-- Reboot linux machine on unlock to work around GDM bug on Ubuntu 24.04
diff --git a/changes/22446-scripts-modal b/changes/22446-scripts-modal
deleted file mode 100644
index 1e06aea931..0000000000
--- a/changes/22446-scripts-modal
+++ /dev/null
@@ -1 +0,0 @@
-- Users can view scripts in the UI (from both the scripts page and host details page) without downloading them
diff --git a/changes/22575-ui-for-include-any-labels b/changes/22575-ui-for-include-any-labels
deleted file mode 100644
index 5f66f8396b..0000000000
--- a/changes/22575-ui-for-include-any-labels
+++ /dev/null
@@ -1,2 +0,0 @@
-- add UI for allowing users to install custom profiles on hosts that include any of the defined
-labels
diff --git a/changes/22576-labels-include-any-gitops b/changes/22576-labels-include-any-gitops
deleted file mode 100644
index 228171c7d1..0000000000
--- a/changes/22576-labels-include-any-gitops
+++ /dev/null
@@ -1 +0,0 @@
-- Add support for labels_include_any to gitops
diff --git a/changes/22578-db-schema b/changes/22578-db-schema
deleted file mode 100644
index 281c14a6b9..0000000000
--- a/changes/22578-db-schema
+++ /dev/null
@@ -1 +0,0 @@
-- Adds DB support for "include any" label profile deployment
\ No newline at end of file
diff --git a/changes/22581-cron-updates b/changes/22581-cron-updates
deleted file mode 100644
index f228460a04..0000000000
--- a/changes/22581-cron-updates
+++ /dev/null
@@ -1 +0,0 @@
-- Adds support for "include any" label/profile relationships to the profile reconciliation machinery.
\ No newline at end of file
diff --git a/changes/22606-keyboard-accessiblity b/changes/22606-keyboard-accessiblity
deleted file mode 100644
index 6f863e248a..0000000000
--- a/changes/22606-keyboard-accessiblity
+++ /dev/null
@@ -1 +0,0 @@
-- Fleet UI: Major improvements to keyboard accessibility throughout app (e.g. checkboxes, dropdowns, table navigation)
\ No newline at end of file
diff --git a/changes/22702-linux-encryption-frontend b/changes/22702-linux-encryption-frontend
deleted file mode 100644
index a35d242375..0000000000
--- a/changes/22702-linux-encryption-frontend
+++ /dev/null
@@ -1 +0,0 @@
-- Added UI features supporting disk encryption for Ubuntu and Fedora Linux.
diff --git a/changes/22773-fma-uninstall-fix b/changes/22773-fma-uninstall-fix
deleted file mode 100644
index 74c4390533..0000000000
--- a/changes/22773-fma-uninstall-fix
+++ /dev/null
@@ -1 +0,0 @@
-- Fix some cases where Fleet Maintained Apps generated incorrect uninstall scripts
diff --git a/changes/22810-fleetd-enroll-activity b/changes/22810-fleetd-enroll-activity
deleted file mode 100644
index b9b9380a05..0000000000
--- a/changes/22810-fleetd-enroll-activity
+++ /dev/null
@@ -1 +0,0 @@
-Added activity item for fleetd enrollment with host serial and display name.
diff --git a/changes/22891-zstd-deb-packages b/changes/22891-zstd-deb-packages
deleted file mode 100644
index f523dd6272..0000000000
--- a/changes/22891-zstd-deb-packages
+++ /dev/null
@@ -1 +0,0 @@
-- Add support for deb packages compressed with zstd
diff --git a/changes/22985-disable-forms-keyboard-access b/changes/22985-disable-forms-keyboard-access
deleted file mode 100644
index 2e90b69dc5..0000000000
--- a/changes/22985-disable-forms-keyboard-access
+++ /dev/null
@@ -1 +0,0 @@
-- Fleet UI: Disable accessibility via keyboard for forms that are disabled via a slider
diff --git a/changes/23016-add-chrome-host-text-area-height b/changes/23016-add-chrome-host-text-area-height
deleted file mode 100644
index 7616f4bfa0..0000000000
--- a/changes/23016-add-chrome-host-text-area-height
+++ /dev/null
@@ -1,2 +0,0 @@
-* Set a more elegant minimum height for the Add hosts > ChromeOS > Policy for extension field,
-avoiding a scrollbar.
diff --git a/changes/23021-abm-cert-pem b/changes/23021-abm-cert-pem
deleted file mode 100644
index c1890e07bb..0000000000
--- a/changes/23021-abm-cert-pem
+++ /dev/null
@@ -1 +0,0 @@
-- Download ABM public key as PEM format instead of CRT
diff --git a/changes/23078-allow-skipping-vuln-details b/changes/23078-allow-skipping-vuln-details
deleted file mode 100644
index 7a29933976..0000000000
--- a/changes/23078-allow-skipping-vuln-details
+++ /dev/null
@@ -1 +0,0 @@
-* Allowed skipping computationally heavy population of vulnerability details when populating host software on hosts list endpoint (`GET /api/latest/fleet/hosts`) when using Fleet Premium (`populate_software=without_vulnerability_descriptions`)
\ No newline at end of file
diff --git a/changes/23128-update-mock-service-worker-package-for-secutiy b/changes/23128-update-mock-service-worker-package-for-secutiy
deleted file mode 100644
index aa9a3e47af..0000000000
--- a/changes/23128-update-mock-service-worker-package-for-secutiy
+++ /dev/null
@@ -1 +0,0 @@
-- update a package used for testing (msw) to improve security
diff --git a/changes/23200-ade-enroll b/changes/23200-ade-enroll
deleted file mode 100644
index 6a6c597bf4..0000000000
--- a/changes/23200-ade-enroll
+++ /dev/null
@@ -1,2 +0,0 @@
-- Fixes a bug where a device that was removed from ABM and then added back wouldn't properly
-  re-enroll in Fleet MDM
\ No newline at end of file
diff --git a/changes/23213-okta-verify b/changes/23213-okta-verify
deleted file mode 100644
index 6fd38a9e47..0000000000
--- a/changes/23213-okta-verify
+++ /dev/null
@@ -1 +0,0 @@
-Fixed issue with uploading macOS software packages that do not have a top level Distribution.xml, but do have a top level PackageInfo.xml. For example, Okta Verify.app
diff --git a/changes/23247-vpp-app-install b/changes/23247-vpp-app-install
deleted file mode 100644
index 97a62eb9df..0000000000
--- a/changes/23247-vpp-app-install
+++ /dev/null
@@ -1,2 +0,0 @@
-- Fixes a bug where users would be allowed to attempt an install of an App Store app on a host that
-  was not MDM enrolled.
\ No newline at end of file
diff --git a/changes/23492-software-batch-status-code b/changes/23492-software-batch-status-code
deleted file mode 100644
index 9ab51770d9..0000000000
--- a/changes/23492-software-batch-status-code
+++ /dev/null
@@ -1 +0,0 @@
-* Updated software batch endpoint status code from 200 (OK) to 202 (Accepted)
\ No newline at end of file
diff --git a/changes/23525-ndes-errors b/changes/23525-ndes-errors
deleted file mode 100644
index 409723e809..0000000000
--- a/changes/23525-ndes-errors
+++ /dev/null
@@ -1 +0,0 @@
-Added better handling of timeout and insufficient permissions errors in NDES SCEP proxy.
diff --git a/changes/23540-pe-sfx b/changes/23540-pe-sfx
deleted file mode 100644
index 63c241a8be..0000000000
--- a/changes/23540-pe-sfx
+++ /dev/null
@@ -1 +0,0 @@
-Fixed name/version parsing issue with PE (EXE) installer self-extracting archives such as Opera.
diff --git a/changes/23597-fix-create-update-label-returns-outdated-info b/changes/23597-fix-create-update-label-returns-outdated-info
deleted file mode 100644
index 3a5e26e5aa..0000000000
--- a/changes/23597-fix-create-update-label-returns-outdated-info
+++ /dev/null
@@ -1 +0,0 @@
-* Fixed a bug where the create and update label endpoints could return outdated information in a deployment using a mysql replica.
diff --git a/changes/23651-reenter-password b/changes/23651-reenter-password
deleted file mode 100644
index b3fc7df44d..0000000000
--- a/changes/23651-reenter-password
+++ /dev/null
@@ -1 +0,0 @@
-- Fleet UI: Prompt user to reenter the password if SCEP/NDES url or username has changed
diff --git a/changes/23669-dismiss-error-flash-on-url-change-dup b/changes/23669-dismiss-error-flash-on-url-change-dup
deleted file mode 100644
index 125774f81f..0000000000
--- a/changes/23669-dismiss-error-flash-on-url-change-dup
+++ /dev/null
@@ -1 +0,0 @@
-* Dismiss error flash on the my device page when navigating to another URL.
\ No newline at end of file
diff --git a/changes/24024-no-setup-exp b/changes/24024-no-setup-exp
deleted file mode 100644
index 44ab42bcf0..0000000000
--- a/changes/24024-no-setup-exp
+++ /dev/null
@@ -1,2 +0,0 @@
-- Modifies the Fleet setup experience feature to not run if there is no software or script
-  configured for the setup experience.
\ No newline at end of file
diff --git a/charts/fleet/Chart.yaml b/charts/fleet/Chart.yaml
index f9b80ed1e3..aeb5a838e0 100644
--- a/charts/fleet/Chart.yaml
+++ b/charts/fleet/Chart.yaml
@@ -4,11 +4,11 @@ name: fleet
 keywords:
   - fleet
   - osquery
-version: v6.2.2
+version: v6.2.3
 home: https://github.com/fleetdm/fleet
 sources:
   - https://github.com/fleetdm/fleet.git
-appVersion: v4.59.1
+appVersion: v4.60.0
 dependencies:
   - name: mysql
     condition: mysql.enabled
diff --git a/charts/fleet/values.yaml b/charts/fleet/values.yaml
index 7e1c7f7916..231c8bb22b 100644
--- a/charts/fleet/values.yaml
+++ b/charts/fleet/values.yaml
@@ -3,7 +3,7 @@
 hostName: fleet.localhost
 replicas: 3 # The number of Fleet instances to deploy
 imageRepository: fleetdm/fleet
-imageTag: v4.59.1 # Version of Fleet to deploy
+imageTag: v4.60.0 # Version of Fleet to deploy
 podAnnotations: {} # Additional annotations to add to the Fleet pod
 serviceAccountAnnotations: {} # Additional annotations to add to the Fleet service account
 resources:
diff --git a/infrastructure/dogfood/terraform/aws/variables.tf b/infrastructure/dogfood/terraform/aws/variables.tf
index cd04b77c50..097ee9befe 100644
--- a/infrastructure/dogfood/terraform/aws/variables.tf
+++ b/infrastructure/dogfood/terraform/aws/variables.tf
@@ -56,7 +56,7 @@ variable "database_name" {
 
 variable "fleet_image" {
   description = "the name of the container image to run"
-  default     = "fleetdm/fleet:v4.59.1"
+  default     = "fleetdm/fleet:v4.60.0"
 }
 
 variable "software_inventory" {
diff --git a/infrastructure/dogfood/terraform/gcp/variables.tf b/infrastructure/dogfood/terraform/gcp/variables.tf
index deb96bc38e..4cc4956f10 100644
--- a/infrastructure/dogfood/terraform/gcp/variables.tf
+++ b/infrastructure/dogfood/terraform/gcp/variables.tf
@@ -68,7 +68,7 @@ variable "redis_mem" {
 }
 
 variable "image" {
-  default = "fleetdm/fleet:v4.59.1"
+  default = "fleetdm/fleet:v4.60.0"
 }
 
 variable "software_installers_bucket_name" {
diff --git a/infrastructure/guardduty/.terraform.lock.hcl b/infrastructure/guardduty/.terraform.lock.hcl
index 5b743eb544..f8978d7aa6 100644
--- a/infrastructure/guardduty/.terraform.lock.hcl
+++ b/infrastructure/guardduty/.terraform.lock.hcl
@@ -2,8 +2,8 @@
 # Manual edits may be lost in future updates.
 
 provider "registry.terraform.io/hashicorp/aws" {
-  version     = "4.59.1"
-  constraints = ">= 3.0.0, >= 4.8.0, >= 4.9.0, ~> 4.59.1"
+  version     = "4.60.0"
+  constraints = ">= 3.0.0, >= 4.8.0, >= 4.9.0, ~> 4.60.0"
   hashes = [
     "h1:fuIdjl9f2JEH0TLoq5kc9NIPbJAAV7YBbZ8fvNp5XSg=",
     "zh:0341a460210463a0bebd5c12ce13dc49bd8cae2399b215418c5efa607fed84e4",
diff --git a/infrastructure/guardduty/main.tf b/infrastructure/guardduty/main.tf
index fdeb7607e0..f1ce03a274 100644
--- a/infrastructure/guardduty/main.tf
+++ b/infrastructure/guardduty/main.tf
@@ -2,7 +2,7 @@ terraform {
   required_providers {
     aws = {
       source  = "hashicorp/aws"
-      version = "~> 4.59.1"
+      version = "~> 4.60.0"
     }
   }
   backend "s3" {
diff --git a/infrastructure/infrastructure/cloudtrail/main.tf b/infrastructure/infrastructure/cloudtrail/main.tf
index 0eaff5aff2..a000f06d08 100644
--- a/infrastructure/infrastructure/cloudtrail/main.tf
+++ b/infrastructure/infrastructure/cloudtrail/main.tf
@@ -2,7 +2,7 @@ terraform {
   required_providers {
     aws = {
       source  = "hashicorp/aws"
-      version = "~> 4.59.1"
+      version = "~> 4.60.0"
     }
   }
   backend "s3" {
diff --git a/infrastructure/infrastructure/elastic-agent/.terraform.lock.hcl b/infrastructure/infrastructure/elastic-agent/.terraform.lock.hcl
index c327efe675..4ed29230cf 100644
--- a/infrastructure/infrastructure/elastic-agent/.terraform.lock.hcl
+++ b/infrastructure/infrastructure/elastic-agent/.terraform.lock.hcl
@@ -2,8 +2,8 @@
 # Manual edits may be lost in future updates.
 
 provider "registry.terraform.io/hashicorp/aws" {
-  version     = "4.59.1"
-  constraints = ">= 3.63.0, ~> 4.59.1"
+  version     = "4.60.0"
+  constraints = ">= 3.63.0, ~> 4.60.0"
   hashes = [
     "h1:fuIdjl9f2JEH0TLoq5kc9NIPbJAAV7YBbZ8fvNp5XSg=",
     "zh:0341a460210463a0bebd5c12ce13dc49bd8cae2399b215418c5efa607fed84e4",
diff --git a/infrastructure/infrastructure/elastic-agent/main.tf b/infrastructure/infrastructure/elastic-agent/main.tf
index 78f310682b..41f8b21f8e 100644
--- a/infrastructure/infrastructure/elastic-agent/main.tf
+++ b/infrastructure/infrastructure/elastic-agent/main.tf
@@ -20,7 +20,7 @@ terraform {
   required_providers {
     aws = {
       source  = "hashicorp/aws"
-      version = "~> 4.59.1"
+      version = "~> 4.60.0"
     }
   }
   backend "s3" {
diff --git a/infrastructure/infrastructure/guardduty-alerts/.terraform.lock.hcl b/infrastructure/infrastructure/guardduty-alerts/.terraform.lock.hcl
index 5b743eb544..f8978d7aa6 100644
--- a/infrastructure/infrastructure/guardduty-alerts/.terraform.lock.hcl
+++ b/infrastructure/infrastructure/guardduty-alerts/.terraform.lock.hcl
@@ -2,8 +2,8 @@
 # Manual edits may be lost in future updates.
 
 provider "registry.terraform.io/hashicorp/aws" {
-  version     = "4.59.1"
-  constraints = ">= 3.0.0, >= 4.8.0, >= 4.9.0, ~> 4.59.1"
+  version     = "4.60.0"
+  constraints = ">= 3.0.0, >= 4.8.0, >= 4.9.0, ~> 4.60.0"
   hashes = [
     "h1:fuIdjl9f2JEH0TLoq5kc9NIPbJAAV7YBbZ8fvNp5XSg=",
     "zh:0341a460210463a0bebd5c12ce13dc49bd8cae2399b215418c5efa607fed84e4",
diff --git a/infrastructure/infrastructure/guardduty-alerts/main.tf b/infrastructure/infrastructure/guardduty-alerts/main.tf
index 4d0e0f4a68..698cfd3e22 100644
--- a/infrastructure/infrastructure/guardduty-alerts/main.tf
+++ b/infrastructure/infrastructure/guardduty-alerts/main.tf
@@ -15,7 +15,7 @@ terraform {
   required_providers {
     aws = {
       source  = "hashicorp/aws"
-      version = "~> 4.59.1"
+      version = "~> 4.60.0"
     }
   }
   backend "s3" {
diff --git a/infrastructure/infrastructure/spend_alerts/main.tf b/infrastructure/infrastructure/spend_alerts/main.tf
index 837d69399e..7af7ceac54 100644
--- a/infrastructure/infrastructure/spend_alerts/main.tf
+++ b/infrastructure/infrastructure/spend_alerts/main.tf
@@ -2,7 +2,7 @@ terraform {
   required_providers {
     aws = {
       source  = "hashicorp/aws"
-      version = "~> 4.59.1"
+      version = "~> 4.60.0"
     }
   }
   backend "s3" {
diff --git a/terraform/addons/vuln-processing/variables.tf b/terraform/addons/vuln-processing/variables.tf
index b372a36ff8..bdf2ae161c 100644
--- a/terraform/addons/vuln-processing/variables.tf
+++ b/terraform/addons/vuln-processing/variables.tf
@@ -24,7 +24,7 @@ variable "fleet_config" {
     vuln_processing_cpu                  = optional(number, 2048)
     vuln_data_stream_mem                 = optional(number, 1024)
     vuln_data_stream_cpu                 = optional(number, 512)
-    image                                = optional(string, "fleetdm/fleet:v4.59.1")
+    image                                = optional(string, "fleetdm/fleet:v4.60.0")
     family                               = optional(string, "fleet-vuln-processing")
     sidecars                             = optional(list(any), [])
     extra_environment_variables          = optional(map(string), {})
@@ -82,7 +82,7 @@ variable "fleet_config" {
     vuln_processing_cpu                  = 2048
     vuln_data_stream_mem                 = 1024
     vuln_data_stream_cpu                 = 512
-    image                                = "fleetdm/fleet:v4.59.1"
+    image                                = "fleetdm/fleet:v4.60.0"
     family                               = "fleet-vuln-processing"
     sidecars                             = []
     extra_environment_variables          = {}
diff --git a/terraform/byo-vpc/byo-db/byo-ecs/variables.tf b/terraform/byo-vpc/byo-db/byo-ecs/variables.tf
index 580e94cbf5..2ffd63d25a 100644
--- a/terraform/byo-vpc/byo-db/byo-ecs/variables.tf
+++ b/terraform/byo-vpc/byo-db/byo-ecs/variables.tf
@@ -16,7 +16,7 @@ variable "fleet_config" {
     mem                          = optional(number, 4096)
     cpu                          = optional(number, 512)
     pid_mode                     = optional(string, null)
-    image                        = optional(string, "fleetdm/fleet:v4.59.1")
+    image                        = optional(string, "fleetdm/fleet:v4.60.0")
     family                       = optional(string, "fleet")
     sidecars                     = optional(list(any), [])
     depends_on                   = optional(list(any), [])
@@ -119,7 +119,7 @@ variable "fleet_config" {
     mem                          = 512
     cpu                          = 256
     pid_mode                     = null
-    image                        = "fleetdm/fleet:v4.59.1"
+    image                        = "fleetdm/fleet:v4.60.0"
     family                       = "fleet"
     sidecars                     = []
     depends_on                   = []
diff --git a/terraform/byo-vpc/byo-db/variables.tf b/terraform/byo-vpc/byo-db/variables.tf
index 16c7d7a1e9..4259c64f02 100644
--- a/terraform/byo-vpc/byo-db/variables.tf
+++ b/terraform/byo-vpc/byo-db/variables.tf
@@ -77,7 +77,7 @@ variable "fleet_config" {
     mem                          = optional(number, 4096)
     cpu                          = optional(number, 512)
     pid_mode                     = optional(string, null)
-    image                        = optional(string, "fleetdm/fleet:v4.59.1")
+    image                        = optional(string, "fleetdm/fleet:v4.60.0")
     family                       = optional(string, "fleet")
     sidecars                     = optional(list(any), [])
     depends_on                   = optional(list(any), [])
@@ -205,7 +205,7 @@ variable "fleet_config" {
     mem                          = 512
     cpu                          = 256
     pid_mode                     = null
-    image                        = "fleetdm/fleet:v4.59.1"
+    image                        = "fleetdm/fleet:v4.60.0"
     family                       = "fleet"
     sidecars                     = []
     depends_on                   = []
diff --git a/terraform/byo-vpc/example/main.tf b/terraform/byo-vpc/example/main.tf
index 855ab59f9f..bca3bd652c 100644
--- a/terraform/byo-vpc/example/main.tf
+++ b/terraform/byo-vpc/example/main.tf
@@ -17,7 +17,7 @@ provider "aws" {
 }
 
 locals {
-  fleet_image = "fleetdm/fleet:v4.59.1"
+  fleet_image = "fleetdm/fleet:v4.60.0"
   domain_name = "example.com"
 }
 
diff --git a/terraform/byo-vpc/variables.tf b/terraform/byo-vpc/variables.tf
index 4c8e173387..ad32f036b5 100644
--- a/terraform/byo-vpc/variables.tf
+++ b/terraform/byo-vpc/variables.tf
@@ -170,7 +170,7 @@ variable "fleet_config" {
     mem                          = optional(number, 4096)
     cpu                          = optional(number, 512)
     pid_mode                     = optional(string, null)
-    image                        = optional(string, "fleetdm/fleet:v4.59.1")
+    image                        = optional(string, "fleetdm/fleet:v4.60.0")
     family                       = optional(string, "fleet")
     sidecars                     = optional(list(any), [])
     depends_on                   = optional(list(any), [])
@@ -298,7 +298,7 @@ variable "fleet_config" {
     mem                          = 512
     cpu                          = 256
     pid_mode                     = null
-    image                        = "fleetdm/fleet:v4.59.1"
+    image                        = "fleetdm/fleet:v4.60.0"
     family                       = "fleet"
     sidecars                     = []
     depends_on                   = []
diff --git a/terraform/example/main.tf b/terraform/example/main.tf
index 81ff3cd693..5bffd00bab 100644
--- a/terraform/example/main.tf
+++ b/terraform/example/main.tf
@@ -63,8 +63,8 @@ module "fleet" {
 
   fleet_config = {
     # To avoid pull-rate limiting from dockerhub, consider using our quay.io mirror
-    # for the Fleet image. e.g. "quay.io/fleetdm/fleet:v4.59.1"
-    image = "fleetdm/fleet:v4.59.1" # override default to deploy the image you desire
+    # for the Fleet image. e.g. "quay.io/fleetdm/fleet:v4.60.0"
+    image = "fleetdm/fleet:v4.60.0" # override default to deploy the image you desire
     # See https://fleetdm.com/docs/deploy/reference-architectures#aws for appropriate scaling
     # memory and cpu.
     autoscaling = {
diff --git a/terraform/variables.tf b/terraform/variables.tf
index 6bb2f22317..1f42b20ff8 100644
--- a/terraform/variables.tf
+++ b/terraform/variables.tf
@@ -218,7 +218,7 @@ variable "fleet_config" {
     mem                          = optional(number, 4096)
     cpu                          = optional(number, 512)
     pid_mode                     = optional(string, null)
-    image                        = optional(string, "fleetdm/fleet:v4.59.1")
+    image                        = optional(string, "fleetdm/fleet:v4.60.0")
     family                       = optional(string, "fleet")
     sidecars                     = optional(list(any), [])
     depends_on                   = optional(list(any), [])
@@ -346,7 +346,7 @@ variable "fleet_config" {
     mem                          = 512
     cpu                          = 256
     pid_mode                     = null
-    image                        = "fleetdm/fleet:v4.59.1"
+    image                        = "fleetdm/fleet:v4.60.0"
     family                       = "fleet"
     sidecars                     = []
     depends_on                   = []
diff --git a/tools/fleetctl-npm/package.json b/tools/fleetctl-npm/package.json
index d9d07156ca..5dd2236b30 100644
--- a/tools/fleetctl-npm/package.json
+++ b/tools/fleetctl-npm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fleetctl",
-  "version": "v4.59.1",
+  "version": "v4.60.0",
   "description": "Installer for the fleetctl CLI tool",
   "bin": {
     "fleetctl": "./run.js"