Fleet UI: Update Dropdown to use react-select 5.4 and other cleanup

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
 }
 

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;
   }

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",
+};