feat: Highlight selected options

frontend/web/components/EnvironmentSelect.tsx

@@ -25,11 +25,7 @@ const EnvironmentSelect: FC<EnvironmentSelectType> = ({
   ...rest
 }) => {
   const { data } = useGetEnvironmentsQuery({ projectId: `${projectId}` })
-  const foundValue = useMemo(
-    () =>
-      data?.results?.find((environment) => `${environment[idField]}` === value),
-    [value, data, idField],
-  )
+
   const environments = useMemo(() => {
     return (data?.results || [])
       ?.map((v) => ({
@@ -43,16 +39,23 @@ const EnvironmentSelect: FC<EnvironmentSelectType> = ({
         return true
       })
   }, [data?.results, ignore, idField])
+
+  const foundValue = useMemo(
+    () =>
+      environments.find((environment) => `${environment.value}` === `${value}`),
+    [value, environments],
+  )
+
   if (readOnly) {
-    return <div className='mb-2'>{foundValue?.name}</div>
+    return <div className='mb-2'>{foundValue?.label}</div>
   }
   return (
     <div>
       <Select
         {...rest}
         value={
           foundValue
-            ? { label: foundValue.name, value: `${foundValue.id}` }
+            ? foundValue
             : {
                 label:
                   label ||

frontend/web/project/project-components.js

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react'
-import Select from 'react-select'
+import Select, { components } from 'react-select'
 import Button from 'components/base/forms/Button'
 import Paging from 'components/Paging'
 import ToggleChip from 'components/ToggleChip'
@@ -12,6 +12,8 @@ import ProjectProvider from 'common/providers/ProjectProvider'
 import AccountProvider from 'common/providers/AccountProvider'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import Panel from 'components/base/grid/Panel'
+import { checkmark, checkmarkCircle } from 'ionicons/icons'
+import { IonIcon } from '@ionic/react'
 
 window.AppActions = require('../../common/dispatcher/app-actions')
 window.Actions = require('../../common/dispatcher/action-constants')
@@ -80,6 +82,21 @@ window.Loader = class extends PureComponent {
 window.Tooltip = Tooltip
 
 global.ToggleChip = ToggleChip
+
+// Custom Option component to show the tick mark next to selected option in the dropdown
+const Option = (props) => {
+  return (
+    <components.Option {...props}>
+      <div className={'d-flex justify-content-between align-items-center'}>
+        {props.data.label}
+        {props.isSelected && (
+          <IonIcon icon={checkmarkCircle} className='text-primary' />
+        )}
+      </div>
+    </components.Option>
+  )
+}
+
 global.Select = class extends PureComponent {
   static displayName = 'Select'
 
@@ -122,6 +139,7 @@ global.Select = class extends PureComponent {
           className={`react-select ${props.size ? props.size : ''}`}
           classNamePrefix='react-select'
           {...props}
+          components={{ ...(props.components || {}), Option }}
         />
       </div>
     )