Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve standard role editor compatibility alerts #52860

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Improve standard role editor compatibility alerts #52860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion web/packages/teleport/src/Roles/RoleEditor/RoleEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,10 @@
*/

import { useCallback, useEffect, useId, useState } from 'react';
import styled from 'styled-components';

import { Alert, Box, ButtonSecondary, ButtonWarning, Flex, P2 } from 'design';
import { Danger } from 'design/Alert';
import { Danger, Info } from 'design/Alert';
import Dialog, {
DialogContent,
DialogHeader,
Expand Down Expand Up @@ -275,6 +276,16 @@ export const RoleEditor = ({
</CatchError>
</Flex>
)}
{/* Hiding instead of unmounting the info alert allows us to keep
the dismissed state throughout the lifetime of the role editor
without keeping this state in the editor model. */}
<ShowHide hidden={selectedEditorTab !== EditorTab.Yaml}>
<Info dismissible mx={3} mb={3} alignItems="flex-start">
Not all YAML edits can be represented in the standard editor.
You may have to revert changes in the YAML if you return to
using the standard editor.
</Info>
</ShowHide>
{selectedEditorTab === EditorTab.Yaml && (
<Flex flexDirection="column" flex="1" id={yamlEditorId}>
<YamlEditor
Expand Down Expand Up @@ -351,3 +362,7 @@ const ErrorAlert = ({ error }: { error: Error }) =>
{error.message}
</Danger>
);

const ShowHide = styled.div<{ hidden: boolean }>`
display: ${props => (props.hidden ? 'none' : '')};
`;
2 changes: 1 addition & 1 deletion web/packages/teleport/src/Roles/RoleEditor/StandardEditor/RequiresResetToStandard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const RequiresResetToStandard = ({
setDialogOpen(false);
};
return (
<Info>
<Info alignItems="flex-start">
<Text>
This role is too complex to be edited in the standard editor. To
continue editing, go back to YAML editor or reset the affected fields to
Expand Down
174 changes: 85 additions & 89 deletions web/packages/teleport/src/Roles/RoleEditor/StandardEditor/StandardEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,32 @@ export const StandardEditor = ({

return (
<>
<Box mb={3} mx={3}>
<SlideTabs
appearance="round"
hideStatusIconOnActiveTab
tabs={[
tabSpec(
StandardEditorTab.Overview,
validator.state.validating && !validationResult.metadata.valid
),
tabSpec(
StandardEditorTab.Resources,
validator.state.validating &&
validationResult.resources.some(s => !s.valid)
),
tabSpec(
StandardEditorTab.AccessRules,
validator.state.validating &&
validationResult.rules.some(s => !s.valid)
),
tabSpec(StandardEditorTab.Options, false),
]}
activeIndex={currentTab}
onChange={setCurrentTab}
/>
</Box>

{roleModel.conversionErrors.length > 0 && (
<Box mx={3}>
<RequiresResetToStandard
Expand All @@ -142,99 +168,70 @@ export const StandardEditor = ({
/>
</Box>
)}

<EditorWrapper
mute={standardEditorModel.roleModel.requiresReset}
data-testid="standard-editor"
flex="1 1 0"
flexDirection="column"
px={3}
pb={3}
css={`
overflow-y: auto;
`}
>
<Box mb={3} mx={3}>
<SlideTabs
appearance="round"
hideStatusIconOnActiveTab
tabs={[
tabSpec(
StandardEditorTab.Overview,
validator.state.validating && !validationResult.metadata.valid
),
tabSpec(
StandardEditorTab.Resources,
validator.state.validating &&
validationResult.resources.some(s => !s.valid)
),
tabSpec(
StandardEditorTab.AccessRules,
validator.state.validating &&
validationResult.rules.some(s => !s.valid)
),
tabSpec(StandardEditorTab.Options, false),
]}
activeIndex={currentTab}
onChange={setCurrentTab}
<Box
id={tabElementIDs[StandardEditorTab.Overview]}
style={{
display: currentTab === StandardEditorTab.Overview ? '' : 'none',
}}
>
<MetadataSection
value={roleModel.metadata}
isProcessing={isProcessing}
validation={validationResult.metadata}
onChange={metadata =>
dispatch({ type: 'set-metadata', payload: metadata })
}
/>
</Box>
<Flex
flex="1 1 0"
flexDirection="column"
px={3}
pb={3}
css={`
overflow-y: auto;
`}
<Box
id={tabElementIDs[StandardEditorTab.Resources]}
style={{
display: currentTab === StandardEditorTab.Resources ? '' : 'none',
}}
>
<Box
id={tabElementIDs[StandardEditorTab.Overview]}
style={{
display: currentTab === StandardEditorTab.Overview ? '' : 'none',
}}
>
<MetadataSection
value={roleModel.metadata}
isProcessing={isProcessing}
validation={validationResult.metadata}
onChange={metadata =>
dispatch({ type: 'set-metadata', payload: metadata })
}
/>
</Box>
<Box
id={tabElementIDs[StandardEditorTab.Resources]}
style={{
display: currentTab === StandardEditorTab.Resources ? '' : 'none',
}}
>
<ResourcesTab
value={roleModel.resources}
isProcessing={isProcessing}
validation={validationResult.resources}
dispatch={dispatch}
/>
</Box>
<Box
id={tabElementIDs[StandardEditorTab.AccessRules]}
style={{
display:
currentTab === StandardEditorTab.AccessRules ? '' : 'none',
}}
>
<AccessRules
isProcessing={isProcessing}
value={roleModel.rules}
dispatch={dispatch}
validation={validationResult.rules}
/>
</Box>
<Box
id={tabElementIDs[StandardEditorTab.Options]}
style={{
display: currentTab === StandardEditorTab.Options ? '' : 'none',
}}
>
<Options
isProcessing={isProcessing}
value={roleModel.options}
onChange={setOptions}
/>
</Box>
</Flex>
<ResourcesTab
value={roleModel.resources}
isProcessing={isProcessing}
validation={validationResult.resources}
dispatch={dispatch}
/>
</Box>
<Box
id={tabElementIDs[StandardEditorTab.AccessRules]}
style={{
display: currentTab === StandardEditorTab.AccessRules ? '' : 'none',
}}
>
<AccessRules
isProcessing={isProcessing}
value={roleModel.rules}
dispatch={dispatch}
validation={validationResult.rules}
/>
</Box>
<Box
id={tabElementIDs[StandardEditorTab.Options]}
style={{
display: currentTab === StandardEditorTab.Options ? '' : 'none',
}}
>
<Options
isProcessing={isProcessing}
value={roleModel.options}
onChange={setOptions}
/>
</Box>
</EditorWrapper>
<ActionButtonsContainer>
{isEditing || currentTab === StandardEditorTab.Options ? (
Expand Down Expand Up @@ -277,8 +274,7 @@ const validationErrorTabStatus = {
} as const;

export const EditorWrapper = styled(Flex)<{ mute?: boolean }>`
flex-direction: column;
flex: 1;
opacity: ${p => (p.mute ? 0.4 : 1)};
pointer-events: ${p => (p.mute ? 'none' : '')};
overflow-y: auto;
`;
Loading