import { find , get , map } from 'lodash' ; import React from 'react' ; import type { Option } from 'react-select' ; import Select , { Creatable } from 'react-select' ; import type { IAccountDetails } from '@spinnaker/core' ; export interface INamespaceSelectorProps { onChange : ( namespace : string ) => void ; accounts : IAccountDetails [ ] ; selectedAccount : string ; selectedNamespace : string ; createable ? : boolean ; } export class NamespaceSelector extends React . Component < INamespaceSelectorProps > { public defaultProps = { createable : false } ; private getNamespaceOptions ( ) { const { accounts , selectedAccount , selectedNamespace } = this . props ; const selectedAccountDetails = find ( accounts , ( a ) => a . name === selectedAccount ) ; const namespaces = get ( selectedAccountDetails , 'namespaces' , [ ] ) ; const options = map ( namespaces , ( n ) => ( { label : n , value : n } ) ) ; if ( this . props . createable && selectedNamespace . includes ( '${' ) ) { options . push ( { label : selectedNamespace , value : selectedNamespace } ) ; } return options ; } public render ( ) { const componentProps = { clearable : false , options : this . getNamespaceOptions ( ) , value : this . props . selectedNamespace , onChange : ( option ) => this . props . onChange ( option . value . toString ( ) ) , } ; return this . props . createable ? < Creatable { ... componentProps } / > : < Select { ... componentProps } / > ; } }