import styled from 'styled-components' ; import React from 'react' ; import { Box , LabelInput } from 'design' ; import { SelectAsync , DarkStyledSelect } from 'shared/components/Select' ; import { useConsoleContext } from 'teleport/Console/consoleContextProvider' ; export default function ClusterSelector ( { value , onChange , defaultMenuIsOpen = false , ... styles } ) { const consoleCtx = useConsoleContext ( ) ; const [ errorMessage , setError ] = React . useState ( null ) ; const [ options , setOptions ] = React . useState < Option [ ] > ( [ ] ) ; const selectedOption = { value , label : value , } ; function onChangeOption ( option ) { onChange ( option . value ) ; } function onLoadOptions ( inputValue ) { let promise = Promise . resolve ( options ) ; if ( options . length === 0 ) { promise = consoleCtx . fetchClusters ( ) . then ( clusters => clusters . map ( o => ( { value : o . clusterId , label : o . clusterId , } ) ) ) . then ( options => { setOptions ( options ) ; return options ; } ) ; } return promise . then ( options => filterOptions ( inputValue , options ) ) . catch ( ( err ) => { setError ( err . message ) ; } ) ; } function getNoOptionsMessage ( ) { if ( errorMessage ) { return `Error: ${ errorMessage }` ; } return 'No leaf clusters found' ; } return ( < Box { ... styles } > < LabelInput > Clusters < /LabelInput> < StyledSelect > < SelectAsync noOptionsMessage = { getNoOptionsMessage } value = { selectedOption } onChange = { onChangeOption } loadOptions = { onLoadOptions } defaultMenuIsOpen = { defaultMenuIsOpen } hasError = { false } maxMenuHeight = { 400 } isSearchable isSimpleValue = { false } isClearable = { false } defaultOptions cacheOptions / > < /StyledSelect> < /Box>); } function filterOptions ( value = '' , options = [ ] ) { value = value . toLocaleLowerCase ( ) ; return options . filter ( o => { return o . value . toLocaleLowerCase ( ) . indexOf ( value ) !== - 1 ; } ) ; } type Option = { value : string ; label : string ; } ; const StyledSelect = styled ( DarkStyledSelect ) ( ( { theme } ) => `
  .react-select-container {
    background: ${ theme . colors . primary . light };
  }

  .react-select__single-value {
    color: white;
    padding: 0 4px;
    margin: 0;
  }
` ) ;