[Web] Separate Auth Connector UI into dedicated pages #50749
Conversation
rudream
added
no-changelog
rudream
force-pushed
the
yassine/auth-connector-ui
branch
from
08614c8 to
ee4039e
Compare
rudream
force-pushed
the
yassine/auth-connector-ui
branch
from
ee4039e to
89efbc5
Compare
| <Flex mr={4} alignItems="baseline"> | ||
| <H1>{title}</H1> | ||
| </Flex> |
There was a problem hiding this comment.
what is the reason for baseline here? there arent any other elements, could this just be a box?
| <Flex mr={4} alignItems="baseline"> | ||
| <H1>{title}</H1> | ||
| </Flex> |
There was a problem hiding this comment.
what is the reason for baseline here? there arent any other elements, could this just be a box?
| <Box textAlign="center" m={10}> | ||
| <Indicator /> | ||
| </Box> |
There was a problem hiding this comment.
if this margin is used to center, you could maybe use Flex with some justify and align instead of adding a bunch of margin. doesnt really matter tho
| {saveAttempt.status === 'failed' && ( | ||
| <Alert>{saveAttempt.statusText}</Alert> | ||
| )} |
There was a problem hiding this comment.
i think this is the alert, but its not full width
| <TextEditor | ||
| bg="levels.deep" | ||
| readOnly={false} | ||
| data={[{ content, type: 'yaml' }]} | ||
| onChange={setContent} | ||
| /> |
There was a problem hiding this comment.
this full width editor instead of being in a dialog is soooooo nice. feels much more "solid"
| <Link | ||
| color="text.main" | ||
| // This URL is the OSS documentation for auth connectors | ||
| href="https://goteleport.com/docs/setup/admin/github-sso/" | ||
| target="_blank" | ||
| > | ||
| view our documentation | ||
| </Link>{' '} | ||
| on how to configure a GitHub connector. | ||
| </P> | ||
| </DesktopDescription> |
There was a problem hiding this comment.
i think this should update to whatever type of connector we are trying to add. currently this says github even when on OIDC and SAML
| resource, err := ui.NewResourceItem(connector) | ||
| if err != nil { | ||
| return nil, trace.Wrap(err) | ||
| } | ||
|
|
||
| return resource, nil |
There was a problem hiding this comment.
nit:
| resource, err := ui.NewResourceItem(connector) | |
| if err != nil { | |
| return nil, trace.Wrap(err) | |
| } | |
| return resource, nil | |
| return ui.NewResourceItem(connector) |
| Please{' '} | ||
| <Link | ||
| color="text.main" | ||
| // This URL is the OSS documentation for auth connectors |
There was a problem hiding this comment.
nit: reads redundant
| // This URL is the OSS documentation for auth connectors |
| @@ -0,0 +1,122 @@ | |||
| /** | |||
| * Teleport | |||
| * Copyright (C) 2023 Gravitational, Inc. | |||
There was a problem hiding this comment.
| * Copyright (C) 2023 Gravitational, Inc. | |
| * Copyright (C) 2024 Gravitational, Inc. |
| const [content, setContent] = useState(templates['github']); | ||
| const [initialContent, setInitialContent] = useState(templates['github']); | ||
|
|
||
| const fetchAttempt = useAttempt(isNew ? 'success' : 'processing'); |
There was a problem hiding this comment.
Aren't we now favoring useAsync from shared/hooks/useAsync over useAttemptNext?
useAsync returns attempt and run which you can then call below in useEffect.
Same comment for saveAttempt below and in other files.
| // sso routes | ||
| /** | ||
| * ssoConnectorCreate is the dedicated page for creating a new auth connector. | ||
| */ | ||
| ssoConnectorCreate: '/web/sso/new/:connectorType(github|oidc|saml)', | ||
| ssoConnectorEdit: | ||
| '/web/sso/edit/:connectorType(github|oidc|saml)/:connectorName?', |
There was a problem hiding this comment.
suggestion: group these together in an object, makes it easier to find/update them later.
ssoConnector : {
Create: '/web/sso/new/:connectorType(github|oidc|saml)',
Edit: '/web/sso/edit/:connectorType(github|oidc|saml)/:connectorName?'
}
Purpose
Part of https://github.com/gravitational/teleport.e/issues/4989
ecounterpart: https://github.com/gravitational/teleport.e/pull/5789This PR adds separate dedicated pages for auth connectors to the UI, instead of the current flow which uses dialogs.
Figma designs: https://www.figma.com/design/v6GunK50D2VC7w7I2FBDNf/Access-(Management)?node-id=6862-43134&m=dev
Demo
Adding a new connector
Editing an existing connector