diff --git a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
index 5cf4c200..78324eff 100644
--- a/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/FilterForm.tsx
@@ -1,7 +1,14 @@
import React, { useEffect, useState } from 'react';
import { Input } from 'components/shared/Input';
-import { CrossCircleIcon, SearchIcon } from 'components/shared/CustomIcon';
+import {
+ CheckRadioOutlineIcon,
+ CrossCircleIcon,
+ LoaderIcon,
+ SearchIcon,
+ TrendingIcon,
+ WarningTriangleIcon,
+} from 'components/shared/CustomIcon';
import { DatePicker } from 'components/shared/DatePicker';
import { Value } from 'react-calendar/dist/cjs/shared/types';
import { Select, SelectOption } from 'components/shared/Select';
@@ -43,10 +50,25 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
setDateRange(value.updateAtRange);
}, [value]);
+ const getOptionIcon = (status: StatusOptions) => {
+ switch (status) {
+ case StatusOptions.BUILDING:
+ return ;
+ case StatusOptions.READY:
+ return ;
+ case StatusOptions.ERROR:
+ return ;
+ case StatusOptions.ALL_STATUS:
+ default:
+ return ;
+ }
+ };
+
const statusOptions = Object.values(StatusOptions)
.map((status) => ({
label: status,
value: status,
+ leftIcon: getOptionIcon(status),
}))
.filter((status) => status.value !== StatusOptions.ALL_STATUS);
@@ -78,6 +100,7 @@ const FilterForm = ({ value, onChange }: FilterFormProps) => {
);
@@ -356,7 +359,7 @@ export const Select = ({
onClick={() => !dropdownOpen && openMenu()}
>
{/* Left icon */}
- {leftIcon && renderLeftIcon}
+ {renderLeftIcon}
{/* Multiple input values */}
{isMultipleHasValue &&
@@ -387,6 +390,8 @@ export const Select = ({
'w-6': isMultipleHasValueButNotSearchable && !hideValues,
// Add margin to the X icon
'ml-6': isMultipleHasValueButNotSearchable && clearable,
+ // Add padding if there's a left icon
+ 'pl-6': leftIcon,
},
)}
/>