HOSTSD-300 Update filter select

src/dashboard/src/app/style-guide/page.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from '@/components/buttons';
 import { Checkbox } from '@/components/forms/checkbox';
-import { Select, FilterDropdown } from '@/components/forms/select';
+import { FilterDropdown, Select } from '@/components/forms/select';
 import { Text } from '@/components/forms/text';
 import { Toggle } from '@/components/forms/toggle';
 import styles from './StyleGuide.module.scss';
@@ -83,15 +83,15 @@ export default function Page() {
           <Select
             variant="filter"
             title="filter dropdown example using select"
-            options={[]}
+            options={mockOptions}
             label="Filter dropdown"
             placeholder="Default option"
           ></Select>
           <br />
           <Select
             variant="primary"
             title="simple dropdown example"
-            options={[]}
+            options={mockOptions}
             label="Simple dropdown"
             placeholder="Default option"
           ></Select>

src/dashboard/src/components/filter/FilteredOperatingSystemItems.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Select } from '@/components';
+import { FilterDropdown } from '@/components';
 import { IServerItemListModel } from '@/hooks';
 import { useFilteredOperatingSystemItems, useFilteredServerItems } from '@/hooks/filter';
 import { useOperatingSystemItems, useServerItems } from '@/hooks/lists';
@@ -41,9 +41,8 @@ export const FilteredOperatingSystemItems = ({}: IFilteredOperatingSystemItemsPr
   ]);
 
   return (
-    <Select
+    <FilterDropdown
       label="Operating system"
-      variant="filter"
       options={filteredOperatingSystemItemOptions}
       placeholder="Select OS"
       value={values.operatingSystemItem?.id ?? ''}

src/dashboard/src/components/filter/FilteredOrganizations.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Select } from '@/components';
+import { FilterDropdown } from '@/components';
 import { IOperatingSystemItemListModel, IServerItemListModel, useAuth } from '@/hooks';
 import {
   useFilteredOperatingSystemItems,
@@ -47,9 +47,8 @@ export const FilteredOrganizations = ({}: IFilteredOrganizationsProps) => {
   }, [setFilteredOrganizations, organizations, setValues, filteredOrganizations.length]);
 
   return filteredOrganizationOptions.length > 1 ? (
-    <Select
+    <FilterDropdown
       label="Organization"
-      variant="filter"
       options={filteredOrganizationOptions}
       placeholder="Select organization"
       value={values.organization?.id ?? ''}

src/dashboard/src/components/filter/FilteredServerItems.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Select } from '@/components';
+import { FilterDropdown } from '@/components';
 import { useFilteredServerItems } from '@/hooks/filter';
 import { useServerItems } from '@/hooks/lists';
 import { useFilteredStore } from '@/store';
@@ -26,9 +26,8 @@ export const FilteredServerItems = () => {
   }, [setFilteredServerItems, serverItems, setValues, filteredServerItems.length]);
 
   return (
-    <Select
+    <FilterDropdown
       label="Server"
-      variant="filter"
       options={filteredServerItemOptions}
       placeholder="Select server"
       value={values.serverItem?.serviceNowKey ?? ''}

src/dashboard/src/components/filter/FilteredTenants.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Select } from '@/components';
+import { FilterDropdown } from '@/components';
 import {
   IOperatingSystemItemListModel,
   IOrganizationListModel,
@@ -60,9 +60,8 @@ export const FilteredTenants = ({}: IFilteredTenantsProps) => {
   }, [filteredTenants.length, setFilteredTenants, setValues, tenants]);
 
   return filteredTenantOptions.length > 1 ? (
-    <Select
+    <FilterDropdown
       label="Tenant"
-      variant="filter"
       options={filteredTenantOptions}
       placeholder="Select tenant"
       value={values.tenant?.id ?? ''}