feat: select secrets

packages/web/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.tsx → packages/web/src/components/atoms/ReactSelect/CreatableMultiSelect/CreatableMultiSelect.tsx

@@ -6,13 +6,13 @@ import usePressEnter from '@hooks/usePressEnter';
 
 import {Option} from '@models/form';
 
-import {customStyles, customTheme} from './CreatableMultiSelect.styled';
 import {
   DefaultDropdownIndicator,
   DefaultMultiValueLabel,
   DefaultMultiValueRemove,
   DefaultOptionComponent,
-} from './DefaultComponents';
+} from '../DefaultComponents';
+import {customMultiValueStyles, customTheme} from '../ReactSelect.styled';
 
 type MultiSelectProps = {
   id?: string;
@@ -91,7 +91,7 @@ const CreatableMultiSelect: React.FC<MultiSelectProps> = props => {
       }}
       formatCreateLabel={formatCreateLabel}
       theme={customTheme}
-      styles={customStyles(validation, stylePlaceholderAsValue)}
+      styles={customMultiValueStyles(validation, stylePlaceholderAsValue)}
       components={{
         Option: CustomOptionComponent,
         MultiValueLabel: CustomMultiValueLabelComponent,

packages/web/src/components/atoms/ReactSelect/CreatableSingleSelect/CreatableSingleSelect.tsx

@@ -0,0 +1,100 @@
+import React, {KeyboardEvent, useRef} from 'react';
+import {OptionProps} from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+
+import usePressEnter from '@hooks/usePressEnter';
+
+import {Option} from '@models/form';
+
+import CustomSingleValue from '../CustomComponents/SingleValue';
+import {DefaultClearIndicator, DefaultOptionComponent} from '../DefaultComponents';
+import {customSingleValueStyles, customTheme} from '../ReactSelect.styled';
+
+type SingleSelectProps = {
+  options?: Option[];
+  placeholder: string;
+  formatCreateLabel: (input: string) => string;
+  value?: Option;
+  defaultValue?: Option;
+  onChange?: (value: any) => void;
+  onBlur?: (event: any) => void;
+  onCreateOption?: (input: string) => void;
+  validateCreation?: (inputValue: string) => boolean;
+  CustomOptionComponent?: (props: OptionProps<Option>) => JSX.Element;
+  isLoading?: boolean;
+  validation?: boolean;
+  dataTest?: string;
+  disabled?: boolean;
+  menuPlacement?: 'auto' | 'bottom' | 'top';
+  stylePlaceholderAsValue?: boolean;
+};
+
+const CreatableSingleSelect: React.FC<SingleSelectProps> = props => {
+  const {
+    options,
+    placeholder,
+    formatCreateLabel,
+    value,
+    defaultValue,
+    onChange,
+    onBlur,
+    onCreateOption,
+    validateCreation,
+    CustomOptionComponent = DefaultOptionComponent,
+    validation,
+    dataTest,
+    disabled = false,
+    menuPlacement = 'bottom',
+    stylePlaceholderAsValue = false,
+  } = props;
+
+  const ref = useRef(null);
+
+  const onEvent = usePressEnter();
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (validateCreation) {
+      // @ts-ignore
+      if (!validateCreation(ref.current.props.inputValue)) {
+        event.preventDefault();
+      }
+    } else {
+      event.preventDefault();
+    }
+  };
+
+  return (
+    <CreatableSelect
+      ref={ref}
+      value={value}
+      defaultValue={defaultValue}
+      menuPlacement={menuPlacement}
+      isClearable
+      onChange={onChange}
+      onBlur={onBlur}
+      onCreateOption={onCreateOption}
+      placeholder={placeholder}
+      options={options}
+      createOptionPosition="first"
+      onKeyDown={event => {
+        onEvent(event, () => {
+          handleKeyDown(event);
+        });
+      }}
+      formatCreateLabel={formatCreateLabel}
+      theme={customTheme}
+      styles={customSingleValueStyles(validation, stylePlaceholderAsValue)}
+      components={{
+        Option: CustomOptionComponent,
+        // removing default dropdown indicator
+        DropdownIndicator: () => null,
+        ClearIndicator: DefaultClearIndicator,
+        SingleValue: CustomSingleValue,
+      }}
+      data-test={dataTest}
+      isDisabled={disabled}
+      noOptionsMessage={() => null}
+    />
+  );
+};
+export default CreatableSingleSelect;

packages/web/src/components/atoms/ReactSelect/CreatableSingleSelect/index.ts

@@ -0,0 +1 @@
+export {default} from './CreatableSingleSelect';

packages/web/src/components/atoms/CreatableMultiSelect/CustomComponents/LabelsMultiValueLabel.tsx → packages/web/src/components/atoms/ReactSelect/CustomComponents/LabelsMultiValueLabel.tsx

@@ -4,7 +4,7 @@ import {SplitLabelText} from '@atoms';
 
 import {Option} from '@models/form';
 
-import {StyledMultiLabel} from '../CreatableMultiSelect.styled';
+import {StyledMultiLabel} from '../ReactSelect.styled';
 
 const LabelsMultiValueLabel = (props: MultiValueGenericProps<Option>) => {
   const {children} = props;

packages/web/src/components/atoms/ReactSelect/CustomComponents/LabelsOption.tsx

@@ -0,0 +1,33 @@
+import {OptionProps} from 'react-select';
+
+import {SplitLabelText} from '@atoms';
+
+import {Option} from '@models/form';
+
+import {labelRegex} from '@molecules/LabelsSelect/utils';
+
+import {StyledOption} from '../ReactSelect.styled';
+
+const LabelsOption = (props: OptionProps<Option>) => {
+  // @ts-ignore
+  const {children, innerRef, innerProps, value} = props;
+
+  const isChildren = typeof children === 'string';
+  const allowClick = labelRegex.test(value);
+
+  if (allowClick && isChildren) {
+    return (
+      // @ts-ignore
+      <StyledOption ref={innerRef} {...innerProps} data-test={`label-option-${children}`}>
+        <SplitLabelText value={children} />
+      </StyledOption>
+    );
+  }
+
+  return (
+    // @ts-ignore
+    <StyledOption ref={innerRef}>{children}</StyledOption>
+  );
+};
+
+export default LabelsOption;

packages/web/src/components/atoms/ReactSelect/CustomComponents/SecretOption.tsx

@@ -0,0 +1,26 @@
+import {OptionProps} from 'react-select';
+
+import {SplitLabelText} from '@atoms';
+
+import {Option} from '@models/form';
+
+import {labelRegex} from '@molecules/LabelsSelect/utils';
+
+import {StyledOption} from '../ReactSelect.styled';
+
+const SecretOption = (props: OptionProps<Option>) => {
+  // @ts-ignore
+  const {children, innerRef, innerProps, value} = props;
+
+  const isChildren = typeof children === 'string';
+  const isKeyValuePair = labelRegex.test(value);
+
+  return (
+    // @ts-ignore
+    <StyledOption ref={innerRef} {...innerProps} data-test={`secret-option-${children}`}>
+      {isKeyValuePair && isChildren ? <SplitLabelText value={children} isBordered /> : children}
+    </StyledOption>
+  );
+};
+
+export default SecretOption;

packages/web/src/components/atoms/ReactSelect/CustomComponents/SingleValue.tsx

@@ -0,0 +1,16 @@
+import {SingleValueProps, components} from 'react-select';
+
+import SplitLabelText from '@atoms/SplitLabelText';
+
+import {Option} from '@models/form';
+
+const CustomSingleValue = (props: SingleValueProps<Option>) => {
+  const {children} = props;
+  return (
+    <components.SingleValue {...props}>
+      <SplitLabelText value={String(children)} />
+    </components.SingleValue>
+  );
+};
+
+export default CustomSingleValue;

packages/web/src/components/atoms/ReactSelect/DefaultComponents/ClearIndicator.tsx

@@ -0,0 +1,15 @@
+import {ClearIndicatorProps, components} from 'react-select';
+
+import {ReactComponent as RemoveIcon} from '@assets/closeCircle.svg';
+
+import {Option} from '@models/form';
+
+const ClearIndicator = (props: ClearIndicatorProps<Option>) => {
+  return (
+    <components.ClearIndicator {...props}>
+      <RemoveIcon width={16} height={16} />
+    </components.ClearIndicator>
+  );
+};
+
+export default ClearIndicator;

packages/web/src/components/atoms/CreatableMultiSelect/DefaultComponents/DropdownIndicator.tsx → packages/web/src/components/atoms/ReactSelect/DefaultComponents/DropdownIndicator.tsx

@@ -1,6 +1,6 @@
 import {DownOutlined} from '@ant-design/icons';
 
-import {DropdownWrapper} from '../CreatableMultiSelect.styled';
+import {DropdownWrapper} from '../ReactSelect.styled';
 
 const DropdownIndicator = () => {
   return (

packages/web/src/components/atoms/CreatableMultiSelect/DefaultComponents/index.ts → packages/web/src/components/atoms/ReactSelect/DefaultComponents/index.ts

@@ -2,3 +2,4 @@ export {default as DefaultMultiValueLabel} from './MultiValueLabel';
 export {default as DefaultOptionComponent} from './Option';
 export {default as DefaultMultiValueRemove} from './MultiValueRemove';
 export {default as DefaultDropdownIndicator} from './DropdownIndicator';
+export {default as DefaultClearIndicator} from './ClearIndicator';

packages/web/src/components/atoms/CreatableMultiSelect/CreatableMultiSelect.styled.tsx → packages/web/src/components/atoms/ReactSelect/ReactSelect.styled.tsx

@@ -34,7 +34,35 @@ export const StyledMultiLabel = styled.div`
   padding: 3px 5px;
 `;
 
-export const customStyles: (
+const singleValueStyles: StylesConfig<Option, true, GroupBase<Option>> = {
+  singleValue: styles => ({
+    ...styles,
+    color: Colors.slate200,
+  }),
+};
+
+const multiValueStyles: StylesConfig<Option, true, GroupBase<Option>> = {
+  multiValue: styles => ({
+    ...styles,
+    background: 'transparent',
+    border: `1px solid ${Colors.slate700}`,
+  }),
+  multiValueLabel: styles => ({
+    ...styles,
+    color: Colors.slate200,
+    fontWeight: 400,
+    fontSize: 12,
+  }),
+  multiValueRemove: styles => ({
+    ...styles,
+    '&:hover': {
+      backgroundColor: 'transparent',
+      cursor: 'pointer',
+    },
+  }),
+};
+
+const customStyles: (
   validation?: boolean,
   stylePlaceholderAsValue?: boolean
 ) => StylesConfig<Option, true, GroupBase<Option>> = (validation = true, stylePlaceholderAsValue = false) => ({
@@ -65,24 +93,6 @@ export const customStyles: (
   }),
   menu: styles => ({...styles, backgroundColor: Colors.slate800}),
   menuList: styles => ({...styles, padding: 0}),
-  multiValue: styles => ({
-    ...styles,
-    background: 'transparent',
-    border: `1px solid ${Colors.slate700}`,
-  }),
-  multiValueLabel: styles => ({
-    ...styles,
-    color: Colors.slate200,
-    fontWeight: 400,
-    fontSize: 12,
-  }),
-  multiValueRemove: styles => ({
-    ...styles,
-    '&:hover': {
-      backgroundColor: 'transparent',
-      cursor: 'pointer',
-    },
-  }),
   noOptionsMessage: styles => ({
     ...styles,
     fontWeight: 400,
@@ -102,6 +112,22 @@ export const customStyles: (
   }),
 });
 
+export const customMultiValueStyles: (
+  validation?: boolean,
+  stylePlaceholderAsValue?: boolean
+) => StylesConfig<Option, true, GroupBase<Option>> = (validation = true, stylePlaceholderAsValue = false) => ({
+  ...customStyles(validation, stylePlaceholderAsValue),
+  ...multiValueStyles,
+});
+
+export const customSingleValueStyles: (
+  validation?: boolean,
+  stylePlaceholderAsValue?: boolean
+) => StylesConfig<Option, true, GroupBase<Option>> = (validation = true, stylePlaceholderAsValue = false) => ({
+  ...customStyles(validation, stylePlaceholderAsValue),
+  ...singleValueStyles,
+});
+
 export const customTheme: ThemeConfig = theme => {
   const {colors, ...rest} = theme;
 

packages/web/src/components/atoms/ReactSelect/index.ts

@@ -0,0 +1,2 @@
+export {default as CreatableMultiSelect} from './CreatableMultiSelect';
+export {default as CreatableSingleSelect} from './CreatableSingleSelect';

packages/web/src/components/atoms/SplitLabelText/SplitLabelText.styled.ts

@@ -1,6 +1,21 @@
 import styled from 'styled-components';
 
-export const SplitLabelTextContainer = styled.div`
+import Colors from '@styles/Colors';
+
+export const SplitLabelTextContainer = styled.div<{$isBordered: boolean}>`
   display: inline-flex;
   gap: 3px;
+
+  ${({$isBordered}) =>
+    $isBordered
+      ? `
+    border: 1px solid ${Colors.slate700};
+    &:hover {
+      border: 1px solid ${Colors.slate500};
+    }
+    `
+      : ''}
+  border-radius: 4px;
+
+  padding: 0 5px;
 `;