feat: context values - implement multi-select dropdown on envs

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/multi-select/CustomMultiValue.tsx

@@ -0,0 +1,52 @@
+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'
+        style={{
+          backgroundColor: color,
+          borderRadius: '4px',
+          color: 'white',
+          fontSize: '12px',
+          maxWidth: '150px',
+          overflow: 'hidden',
+          padding: '2px 6px',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          maxHeight: '24px'
+        }}
+      >
+        <span
+          className='mr-1'
+          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/CustomOption.tsx

@@ -0,0 +1,33 @@
+
+import { OptionProps } from 'react-select/lib/components/Option'
+import { MultiSelectOption } from './MultiSelect'
+
+export const CustomOption = ({
+    children,
+    color,
+    ...props
+  }: OptionProps<MultiSelectOption> & { color?: string }) => {
+    return (
+      <div
+        {...props.innerProps}
+        className={`d-flex align-items-center p-2 ${
+          props.isFocused ? 'bg-light' : ''
+        }`}
+        style={{ cursor: 'pointer' }}
+      >
+        {color && (
+          <div
+            style={{
+              backgroundColor: color,
+              borderRadius: '2px',
+              flexShrink: 0,
+              height: '12px',
+              marginRight: '8px',
+              width: '12px',
+            }}
+          />
+        )}
+        <span>{children}</span>
+      </div>
+    )
+  }

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import { components } from 'react-select/lib/components'
+import { ValueContainerProps } from 'react-select/lib/components/containers'
+import { MultiSelectOption } from './MultiSelect'
+
+export const CustomValueContainer = ({
+  children,
+  selectProps,
+  ...props
+}: ValueContainerProps<MultiSelectOption>) => {
+  const { value } = selectProps
+  const selectedOptions = (value || []) as MultiSelectOption[]
+
+  const formattedText = formatSelectedLabels(selectedOptions)
+
+  return (
+    // @ts-ignore - react-select components.ValueContainer is a valid component
+    <components.ValueContainer {...props} selectProps={selectProps}>
+      {selectedOptions.length > 0 && (
+        <div
+          className='react-select__single-value'
+          style={{
+            position: 'absolute',
+            maxWidth: 'calc(100% - 16px)',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            boxSizing: 'border-box',
+          }}
+        >
+          {formattedText}
+        </div>
+      )}
+      <div style={{ opacity: selectedOptions.length > 0 ? 0 : 1 }}>
+        {children}
+      </div>
+    </components.ValueContainer>
+  )
+}
+
+function formatSelectedLabels(options: MultiSelectOption[]): string {
+  if (options.length === 0) return ''
+  if (options.length === 1) return options[0].label
+  if (options.length === 2) return `${options[0].label} and ${options[1].label}`
+
+  // 3+ items: "Item1, Item2, Item3 and Item4"
+  const allButLast = options.slice(0, -1).map((opt) => opt.label).join(', ')
+  const last = options[options.length - 1].label
+  return `${allButLast} and ${last}`
+}