import React from 'react' ; import { Indicator , Box } from 'design' ; import { Danger } from 'design/Alert' ; import useTeleport from 'teleport/useTeleport' ; import { FeatureBox , FeatureHeader , FeatureHeaderTitle , } from 'teleport/components/Layout' ; import DesktopList from './DesktopList' ; import useDesktops , { State } from './useDesktops' ; export default function Container ( ) { const ctx = useTeleport ( ) ; const state = useDesktops ( ctx ) ; return < Desktops { ... state } / > ; } export function Desktops ( props ) { const { attempt , username , clusterId , desktops , getWindowsLoginOptions , openRemoteDesktopTab , } = props ; return ( < FeatureBox > < FeatureHeader alignItems = "center" justifyContent = "space-between" > < FeatureHeaderTitle > Desktops ( preview ) < /FeatureHeaderTitle> < /FeatureHeader> { attempt . status === 'processing' && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { attempt . status === 'failed' && < Danger > { attempt . statusText } < /Danger>} { attempt . status === 'success' && ( < > < DesktopList desktops = { desktops } username = { username } clusterId = { clusterId } onLoginMenuOpen = { getWindowsLoginOptions } onLoginSelect = { openRemoteDesktopTab } / > < />)} < /FeatureBox>); }