import React from 'react' ; import { FeatureBox , FeatureHeader , FeatureHeaderTitle , } from 'teleport/components/Layout' ; import { Indicator , Text , Box , Flex , Link , Alert , ButtonPrimary } from 'design' ; import ResourceEditor from 'teleport/components/ResourceEditor' ; import useResources from 'teleport/components/useResources' ; import EmptyList from './EmptyList' ; import ConnectorList from './ConnectorList' ; import DeleteConnectorDialog from './DeleteConnectorDialog' ; import useAuthConnectors , { State } from './useAuthConnectors' ; import templates from './templates' ; export default function Container ( ) { const state = useAuthConnectors ( ) ; return < AuthConnectors { ... state } / > ; } export function AuthConnectors ( props ) { const { attempt , items , remove , save } = props ; const isEmpty = items . length === 0 ; const resources = useResources ( items , templates ) ; const title = resources . status === 'creating' ? 'Creating a new github connector' : 'Editing github connector' ; function handleOnSave ( content ) { const isNew = resources . status === 'creating' ; return save ( content , isNew ) ; } return ( < FeatureBox > < FeatureHeader > < FeatureHeaderTitle > Auth Connectors < /FeatureHeaderTitle> < ButtonPrimary ml = "auto" width = "240px" onClick = { ( ) => resources . create ( 'github' ) } > New Github Connector < /ButtonPrimary> < /FeatureHeader> { attempt . status === 'failed' && < Alert children = { attempt . statusText } />} { attempt . status === 'processing' && ( < Box textAlign = "center" m = { 10 } > < Indicator /> < /Box>)} { attempt . status === 'success' && ( < Flex alignItems = "start" > { isEmpty && ( < Flex mt = "4" width = "100%" justifyContent = "center" > < EmptyList onCreate = { ( ) => resources . create ( 'github' ) } /> < /Flex>)} { ! isEmpty && ( < > < ConnectorList items = { items } onEdit = { resources . edit } onDelete = { resources . remove } / > < Box ml = "4" width = "240px" color = "text.primary" style = { { flexShrink : 0 } } > < Text typography = "h6" mb = { 3 } caps > Authentication Connectors < /Text> < Text typography = "subtitle1" mb = { 3 } > Authentication connectors allow Teleport to authenticate users via an external identity source such as Okta , Active Directory , GitHub , etc . This authentication method is frequently called single sign - on ( SSO ) . < /Text> < Text typography = "subtitle1" mb = { 2 } > Please { ' ' } < Link color = "light" href = "https://goteleport.com/docs/admin-guide/#github-oauth-20" target = "_blank" > view our documentation < /Link>{' '} on how to configure a GitHub connector . < /Text> < /Box> < />)} < /Flex>)} { ( resources . status === 'creating' || resources . status === 'editing' ) && ( < ResourceEditor title = { title } onSave = { handleOnSave } text = { resources . item . content } name = { resources . item . name } isNew = { resources . status === 'creating' } onClose = { resources . disregard } / > ) } { resources . status === 'removing' && ( < DeleteConnectorDialog name = { resources . item . name } onClose = { resources . disregard } onDelete = { ( ) => remove ( resources . item . name ) } />)} < /FeatureBox>); }