Move the new role editor to a full-screen dialog #49881
Conversation
Also tightens some constraints about standard role editor conformance.
| <P> | ||
| TAG serves as a powerful tool for both technical and security | ||
| teams to maintain robust access control structures, ensuring | ||
| security, compliance, and operational efficiency. | ||
| </P> |
There was a problem hiding this comment.
Isn't the name just Teleport Policy now and not TAG? Also, if it is still TAG, should we instead use the full name Teleport Access Graph for those not in the know?
There was a problem hiding this comment.
Oh, yes, @zmb3 already pointed it out. The copy turned out to be outdated. I'll update it.
| <Flex> | ||
| <Box flex="1" width="min-content"> | ||
| <P3> | ||
| TAG serves as a powerful tool for both technical and |
I'm adding paddings, but I have genuinely no idea how to make it properly react to the size here. The logic behind the layout should be "the promo box should have the width of the image, unless there is no room, then make it smaller, but don't collapse it to 0 while loading, and don't extend the container past the image size even if the text elements want to do it". If you know how to express it, please let me know. :) |
i think just adding paddings is fine here tbh |
bl-nero
added
the
no-changelog
| // to play well with the StepSlider below. Trying to use implicit | ||
| // width in combination with `width: min-content` inside a | ||
| // StepSlider child caused a miscalculation of child's height. | ||
| width={promoImageWidth + 2 * 2} |
There was a problem hiding this comment.
could we just use +4 in that case?
There was a problem hiding this comment.
I went with "2*2", because I hoped it makes it more clear that I'm adjusting for 2 borders of 2 pixels.
| // I found hardcoding the width of the container to be the only way | ||
| // to play well with the StepSlider below. Trying to use implicit | ||
| // width in combination with `width: min-content` inside a | ||
| // StepSlider child caused a miscalculation of child's height. | ||
| width={promoImageWidth + 2 * 2} |
There was a problem hiding this comment.
Regarding responsiveness, here's something you could try:
Patch
Copy then pbpaste | git apply
diff --git a/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx b/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
index 4b32c3e04b..ff05755e2d 100644
--- a/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
+++ b/web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
@@ -109,17 +109,17 @@ export function RoleEditorAdapter({
)}
</Flex>
<Flex flex="1" alignItems="center" justifyContent="center" m={3}>
- <Box>
+ <Box maxWidth={782} minWidth={300}>
<H1 mb={2}>Teleport Policy</H1>
- <Flex mb={4}>
- <Box flex="1" width="min-content">
+ <Flex mb={4} gap={4} flexWrap="wrap" justifyContent="space-between">
+ <Box flex="1" minWidth="30ch">
<P>
Teleport Policy will visualize resource access paths as you
create and edit roles so you can always see what you are
granting before you push a role into production.
</P>
</Box>
- <Flex flex="0 0 auto" ml={6} alignItems="start">
+ <Flex flex="0 0 auto" alignItems="start">
<ButtonLockedFeature noIcon py={0} width={undefined}>
Contact Sales
</ButtonLockedFeature>
@@ -137,24 +137,13 @@ export function RoleEditorAdapter({
flexDirection="column"
bg={theme.colors.levels.surface}
borderRadius={3}
- // I found hardcoding the width of the container to be the only way
- // to play well with the StepSlider below. Trying to use implicit
- // width in combination with `width: min-content` inside a
- // StepSlider child caused a miscalculation of child's height.
- width={promoImageWidth + 2 * 2}
>
<Box
border={2}
borderRadius={3}
borderColor={theme.colors.interactive.tonal.neutral[0]}
>
- {/* Note: image dimensions hardcoded to prevent UI glitches while
- loading. */}
- <Image
- src={tagpromo}
- width={promoImageWidth}
- height={promoImageHeight}
- />
+ <Image src={tagpromo} width="100%" />
</Box>
<StepSlider flows={promoFlows} currFlow="default" />
</Flex>
@@ -164,9 +153,6 @@ export function RoleEditorAdapter({
);
}
-const promoImageWidth = 782;
-const promoImageHeight = 401;
-
const promoFlows = {
default: [PromoPanel1, PromoPanel2],
};
The key is setting some max width for the entire box, so that the text doesn't just take all possible width.
I'm not 100% sure if this satisfies all your requirements, but it looks good enough IMHO.
loading-image.mov
There was a problem hiding this comment.
Of course! It seems so obvious now. Thanks!
There was a problem hiding this comment.
I was actually surprised that we don't have default responsive styles for <img>. But I suppose we don't use images that often.
There was a problem hiding this comment.
I think it was supposed to be width: 100%; height: auto, but in this case it doesn't matter because of that max-width on the parent.
https://stackoverflow.com/questions/15458650/make-an-image-responsive-the-simplest-way
web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
Outdated
Show resolved
Hide resolved
web/packages/teleport/src/Roles/RoleEditor/RoleEditorAdapter.tsx
Outdated
Show resolved
Hide resolved
|
@bl-nero - this PR will require admin approval to merge due to its size. Consider breaking it up into a series smaller changes. |
* Add admin rule tab to the role editor Also tightens some constraints about standard role editor conformance. * Add a way to delete an admin rule * Add the options panel to role editor * Move RoleEditorAdapter to a separate file * Move the role editor to a full-screen dialog * Review * Review * Review * Lint * Review
* Add admin rule tab to the role editor Also tightens some constraints about standard role editor conformance. * Add a way to delete an admin rule * Add the options panel to role editor * Move RoleEditorAdapter to a separate file * Move the role editor to a full-screen dialog * Review * Review * Review * Lint * Review
To turn on the new UI, go to developer tools -> Application -> Local storage and add a
grv_teleport_use_new_role_editorkey set totrue. This will be lifted once UI is good to be released.Demo
Figma
Requires #49801
Contributes to #46612