Fleet UI: Fix software actions dropdown styling bug (#25102)

changes/24335-dropdown-styling-bug

@@ -0,0 +1 @@
+- Fleet UI: Fix software actions dropdown styling bug

frontend/components/ActionsDropdown/ActionsDropdown.tsx

@@ -29,9 +29,7 @@ interface IActionsDropdownProps {
 }
 
 const getOptionBackgroundColor = (state: any) => {
-  return state.isSelected || state.isFocused
-    ? COLORS["ui-vibrant-blue-10"]
-    : "transparent";
+  return state.isFocused ? COLORS["ui-vibrant-blue-10"] : "transparent";
 };
 
 const getLeftMenuAlign = (menuAlign: "right" | "left" | "default") => {
@@ -238,6 +236,7 @@ const ActionsDropdown = ({
         }}
         controlShouldRenderValue={false} // Doesn't change placeholder text to selected text
         isOptionSelected={() => false} // Hides any styling on selected option
+        value={null} // Prevent an option from being selected
         className={dropdownClassnames}
         classNamePrefix={`${baseClass}-select`}
         isOptionDisabled={(option) => !!option.disabled}

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/SoftwarePackageCard.tsx

@@ -189,8 +189,8 @@ const SoftwareActionsDropdown = ({
   onDeleteClick,
   onEditSoftwareClick,
 }: IActionsDropdownProps) => {
-  const onSelect = (value: string) => {
-    switch (value) {
+  const onSelect = (action: string) => {
+    switch (action) {
       case "download":
         onDownloadClick();
         break;
@@ -208,10 +208,9 @@ const SoftwareActionsDropdown = ({
   return (
     <div className={`${baseClass}__actions`}>
       <ActionsDropdown
-        className={`${baseClass}__host-actions-dropdown`}
+        className={`${baseClass}__software-actions-dropdown`}
         onChange={onSelect}
         placeholder="Actions"
-        isSearchable={false}
         options={
           isSoftwarePackage
             ? [...SOFTWARE_PACKAGE_DROPDOWN_OPTIONS]

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwarePackageCard/_styles.scss

@@ -87,20 +87,6 @@
     align-items: center;
   }
 
-  &__actions {
-    @include button-dropdown;
-    color: $core-fleet-black;
-    .Select-multi-value-wrapper {
-      width: 55px;
-    }
-    .Select > .Select-menu-outer {
-      left: -120px;
-    }
-    .Select-placeholder {
-      color: $core-fleet-black;
-    }
-  }
-
   &__download-icon {
     display: flex;
     justify-content: center;