import React from 'react' ; import { TestLayout } from 'teleport/Console/Console.story' ; import ConsoleContext from 'teleport/Console/consoleContext' ; import ClusterSelector from './ClusterSelector' ; import ThemeProvider from './../ThemeProvider' ; export default { title : 'Teleport/Console/DocumentNodes/ClusterSelector' , } ; export const Component = ( ) => { const ctx = mockContext ( ) ; return renderlusterSelector ( ctx , { defaultMenuIsOpen : true , } ) ; } ; export const Loading = ( ) => { const ctx = mockContext ( ) ; ctx . fetchClusters = ( ) => { return new Promise < any > ( ( ) => null ) ; } ; return renderlusterSelector ( ctx , { defaultMenuIsOpen : true , } ) ; } ; export const Failed = ( ) => { const ctx = mockContext ( ) ; ctx . fetchClusters = ( ) => { return Promise . reject ( new Error ( 'server error' ) ) ; } ; return renderlusterSelector ( ctx , { defaultMenuIsOpen : true , } ) ; } ; function renderlusterSelector ( ctx , { ... props } = { } ) { return ( < TestLayout ctx = { ctx } > < ThemeProvider > < ClusterSelector mx = "auto" open = { true } value = { 'clusterId' } width = "400px" maxMenuHeight = { 200 } onChange = { ( ) => null } { ... props } /> < /ThemeProvider> < /TestLayout>); } function mockContext ( ) { const ctx = new ConsoleContext ( ) ; ctx . fetchClusters = ( ) => { return Promise . resolve < any > ( clusters ) ; } ; return ctx ; } const clusters = [ { clusterId : 'cluster-Cordelia-Lynch' , } , { clusterId : 'cluster-Cameron-Smith' , } , { clusterId : 'cluster-Agnes-Lee' , } , { clusterId : 'cluster-Victor-Nguyen' , } , { clusterId : 'cluster-Catherine-Dennis' , } , { clusterId : 'cluster-Bertha-Maldonado' , } , { clusterId : 'cluster-Hulda-Mullins' , } , { clusterId : 'cluster-Mary-Andrews' , } , ] ;