feat: context values - implement multi-select dropdown on envs (#6239)

Author: talissoncosta

frontend/common/types/responses.ts

@@ -34,6 +34,8 @@ export type Operator = {
   hideValue?: boolean
   warning?: string
   valuePlaceholder?: string
+  append?: string
+  type?: string
 }
 export type ChangeRequestSummary = {
   id: number

frontend/web/components/base/select/MultiSelect.tsx

@@ -0,0 +1,51 @@
+import { MultiValueProps } from 'react-select/lib/components/MultiValue'
+import { MultiSelectOption } from './MultiSelect'
+
+export const CustomMultiValue = ({
+    color,
+    data,
+    removeProps,
+  }: MultiValueProps<MultiSelectOption> & { color?: string }) => {
+    return (
+      <div
+        className='d-flex align-items-center gap-x-1'
+        style={{
+          backgroundColor: color,
+          borderRadius: '4px',
+          color: 'white',
+          fontSize: '12px',
+          maxWidth: '150px',
+          overflow: 'hidden',
+          padding: '2px 6px',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          maxHeight: '24px'
+        }}
+      >
+        <span
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {data.label}
+        </span>
+        <button
+            {...removeProps}
+            style={{
+            cursor: 'pointer',
+            fontSize: '14px',
+            lineHeight: '1',
+            backgroundColor: 'transparent',
+            border: 'none',
+            padding: 0,
+            margin: 0,
+            color: 'white',
+          }}
+        >
+          ×
+        </button>
+      </div>
+    )
+  }

frontend/web/components/base/select/multi-select/CustomMultiValue.tsx

@@ -0,0 +1,61 @@
+import { OptionProps } from 'react-select/lib/components/Option'
+import { MultiSelectOption } from './MultiSelect'
+import Icon from 'components/Icon'
+import { useEffect, useRef } from 'react'
+
+export const CustomOption = ({
+    children,
+    color,
+    ...props
+  }: OptionProps<MultiSelectOption> & { color?: string }) => {
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+      if (props.isFocused && ref.current) {
+        ref.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        })
+      }
+    }, [props.isFocused])
+
+    return (
+      <div
+        ref={ref}
+        {...props.innerProps}
+        role="option"
+        aria-selected={props.isSelected}
+        aria-disabled={props.isDisabled}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '8px 12px',
+          cursor: props.isDisabled ? 'not-allowed' : 'pointer',
+          backgroundColor: props.isFocused ? '#f0f0f0' : 'transparent',
+          gap: '8px',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', flex: 1, wordWrap: 'break-word', minWidth: 0, gap: '8px' }}>
+          {color && (
+            <div
+              aria-hidden="true"
+              style={{
+                backgroundColor: color,
+                borderRadius: '2px',
+                flexShrink: 0,
+                height: '12px',
+                width: '12px',
+              }}
+            />
+          )}
+          <span style={{ flex: 1, wordWrap: 'break-word', minWidth: 0 }}>{children}</span>
+        </div>
+        {props.isSelected && (
+          <div aria-hidden="true">
+            <Icon width={14} name='checkmark-circle' fill='#6837fc' />
+          </div>
+        )}
+      </div>
+    )
+  }

frontend/web/components/base/select/multi-select/CustomOption.tsx

@@ -0,0 +1,35 @@
+import { MultiSelectOption } from "./MultiSelect"
+import { MultiValueProps } from "react-select/lib/components/MultiValue"
+
+export const InlineMultiValue = (props: MultiValueProps<MultiSelectOption>) => {
+    const { data } = props
+    const selectedOptions = props.getValue() as MultiSelectOption[]
+    const currentIndex = selectedOptions.findIndex((opt) => opt.value === data.value)
+
+    if (currentIndex !== 0) return null
+
+    let formattedText: string
+    if (selectedOptions.length === 1) {
+      formattedText = selectedOptions[0].label
+    } else if (selectedOptions.length === 2) {
+      formattedText = `${selectedOptions[0].label} and ${selectedOptions[1].label}`
+    } else {
+      const allButLast = selectedOptions.slice(0, -1).map((opt) => opt.label).join(', ')
+      const last = selectedOptions[selectedOptions.length - 1].label
+      formattedText = `${allButLast} and ${last}`
+    }
+
+    return (
+      <div 
+        title={formattedText}
+        style={{
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        maxWidth: '100%',
+        fontWeight: '500',
+      }}>
+        {formattedText}
+      </div>
+    )
+  }