hunk.code_window: import static com.appsmith.server.acl.AclPermission.EXECUTE_ACTIONS;
   import static com.appsmith.server.acl.AclPermission.EXECUTE_DATASOURCES;
   import static com.appsmith.server.acl.AclPermission.MANAGE_DATASOURCES;
   import static com.appsmith.server.acl.AclPermission.MANAGE_PAGES;
   import static com.appsmith.server.acl.AclPermission.READ_ACTIONS;
  
hunk.labels: keep keep add keep keep keep
hunk.after_edit: import static com.appsmith.server.acl.AclPermission.MANAGE_ACTIONS;
  
hunk.file_path: app/server/appsmith-server/src/main/java/com/appsmith/server/services/ActionServiceImpl.java
hunk.type: add
file: import React from "react";
  import Select, { InputActionMeta } from "react-select";
  import { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
  
  import { theme } from "constants/DefaultTheme";
  import { SelectComponents } from "react-select/src/components";
  
  type DropdownProps = {
    options: Array<{
      value: string;
      label: string;
    }>;
    placeholder: string;
    isLoading?: boolean;
    input: WrappedFieldInputProps;
    meta: WrappedFieldMetaProps;
    components: SelectComponents<any>;
    onCreateOption: (inputValue: string) => void;
    formatCreateLabel?: (value: string) => React.ReactNode;
    noOptionsMessage?: (obj: { inputValue: string }) => string;
    inputValue?: string;
    onInputChange: (value: string, actionMeta: InputActionMeta) => void;
  };
  
  const selectStyles = {
    placeholder: (provided: any) => ({
      ...provided,
      color: "#a3b3bf",
    }),
    multiValue: (provided: any) => ({
      ...provided,
      backgroundColor: "rgba(104,113,239,0.1)",
      border: "1px solid rgba(104, 113, 239, 0.5)",
      borderRadius: `${theme.radii[1]}px`,
      padding: "2px 5px",
      fontSize: "14px",
      maxWidth: "95%",
      position: "relative",
      display: "inline-block",
      transform: "none",
    }),
    multiValueRemove: () => {
      return {
        display: "none",
      };
    },
    container: (styles: any) => ({
      ...styles,
      flex: 1,
      zIndex: "5",
    }),
    control: (styles: any, state: any) => ({
      ...styles,
      minHeight: "32px",
      border: state.isFocused
        ? `${theme.colors.secondary} solid 1px`
        : `${theme.colors.inputInactiveBorders} solid 1px`,
      boxShadow: state.isFocused ? "none" : "none",
      "&:hover": {
        border: `${theme.colors.secondary} solid 1px`,
      },
    }),
    indicatorsContainer: (provided: any) => ({
      ...provided,
      height: "30px",
    }),
    clearIndicator: (provided: any) => ({
      ...provided,
      padding: "5px",
    }),
    dropdownIndicator: (provided: any) => ({
      ...provided,
      padding: "5px",
    }),
  };
  
  class CreatableDropdown extends React.Component<DropdownProps> {
    render() {
      const {
        placeholder,
        options,
        isLoading,
        input,
        noOptionsMessage,
        components,
        inputValue,
        onInputChange,
      } = this.props;
      const optionalProps: Partial<DropdownProps> = {};
      if (noOptionsMessage) optionalProps.noOptionsMessage = noOptionsMessage;
      if (components) optionalProps.components = components;
      if (inputValue) optionalProps.inputValue = inputValue;
      if (onInputChange) optionalProps.onInputChange = onInputChange;
  
      return (
        <Select
          isMulti
          placeholder={placeholder}
          options={options}
          styles={selectStyles}
          isLoading={isLoading}
          {...input}
          onChange={value => {
            const formattedValue = value;
            if (formattedValue && formattedValue.length > 1) {
              formattedValue.shift();
            }
  
            input.onChange(formattedValue);
          }}
          onBlur={() => input.value}
          isClearable
          {...optionalProps}
        />
      );
    }
  }
  
  export default CreatableDropdown;
  