From 18dde52c9a4a9071e3fe11b3dd4fc71bf0c2212b Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Tue, 5 Mar 2024 05:07:21 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20update=20select=20?=
 =?UTF-8?q?input=20default=20icon=20and=20options=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project/deployments/FilterForm.tsx        | 25 ++++++++++++++++++-
 .../src/components/shared/Select/Select.tsx   | 15 +++++++----
 2 files changed, 34 insertions(+), 6 deletions(-)

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 <LoaderIcon />;
+      case StatusOptions.READY:
+        return <CheckRadioOutlineIcon />;
+      case StatusOptions.ERROR:
+        return <WarningTriangleIcon />;
+      case StatusOptions.ALL_STATUS:
+      default:
+        return <TrendingIcon />;
+    }
+  };
+
   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) => {
       </div>
       <div className="col-span-2 flex items-center">
         <Select
+          leftIcon={getOptionIcon(selectedStatus as StatusOptions)}
           options={statusOptions}
           clearable
           placeholder="All status"
diff --git a/packages/frontend/src/components/shared/Select/Select.tsx b/packages/frontend/src/components/shared/Select/Select.tsx
index b009e856..57aba469 100644
--- a/packages/frontend/src/components/shared/Select/Select.tsx
+++ b/packages/frontend/src/components/shared/Select/Select.tsx
@@ -10,7 +10,7 @@ import React, {
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { SelectTheme, selectTheme } from './Select.theme';
 import {
-  ChevronDownIcon,
+  ChevronGrabberHorizontal,
   CrossCircleIcon,
   WarningIcon,
 } from 'components/shared/CustomIcon';
@@ -293,10 +293,13 @@ export const Select = ({
   const renderLeftIcon = useMemo(() => {
     return (
       <div className={theme.iconContainer({ class: 'left-0 pl-4' })}>
-        {cloneIcon(leftIcon, { className: theme.icon(), 'aria-hidden': true })}
+        {cloneIcon(selectedItem?.leftIcon ? selectedItem.leftIcon : leftIcon, {
+          className: theme.icon(),
+          'aria-hidden': true,
+        })}
       </div>
     );
-  }, [cloneIcon, theme, leftIcon]);
+  }, [cloneIcon, theme, leftIcon, selectedItem]);
 
   const renderRightIcon = useMemo(() => {
     return (
@@ -310,7 +313,7 @@ export const Select = ({
         {rightIcon ? (
           cloneIcon(rightIcon, { className: theme.icon(), 'aria-hidden': true })
         ) : (
-          <ChevronDownIcon className={theme.icon()} />
+          <ChevronGrabberHorizontal className={theme.icon()} />
         )}
       </div>
     );
@@ -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,
             },
           )}
         />