Move the new role editor to a full-screen dialog

web/packages/teleport/src/Roles/RoleEditor/EditorHeader.tsx

@@ -17,9 +17,10 @@
  */
 
 import React from 'react';
-import { Flex, ButtonText, H2, Indicator, Box } from 'design';
+import { Flex, H2, Indicator, Box, ButtonIcon } from 'design';
 import { HoverTooltip } from 'design/Tooltip';
-import { Trash } from 'design/Icon';
+
+import { Cross, Trash } from 'design/Icon';
 
 import useTeleport from 'teleport/useTeleport';
 import { Role } from 'teleport/services/resources';
@@ -35,6 +36,7 @@ export const EditorHeader = ({
   isProcessing,
   standardEditorId,
   yamlEditorId,
+  onClose,
 }: {
   role?: Role;
   onDelete(): void;
@@ -43,6 +45,7 @@ export const EditorHeader = ({
   isProcessing: boolean;
   standardEditorId: string;
   yamlEditorId: string;
+  onClose(): void;
 }) => {
   const ctx = useTeleport();
   const isCreating = !role;
@@ -51,6 +54,9 @@ export const EditorHeader = ({
 
   return (
     <Flex alignItems="center" mb={3} gap={2}>
+      <ButtonIcon aria-label="Close" onClick={onClose}>
+        <Cross size="small" />
+      </ButtonIcon>
       <Box flex="1">
         <H2>
           {isCreating
@@ -77,14 +83,14 @@ export const EditorHeader = ({
               : 'You do not have access to delete a role'
           }
         >
-          <ButtonText
+          <ButtonIcon
             onClick={onDelete}
             disabled={!hasDeleteAccess}
             data-testid="delete"
             p={1}
           >
             <Trash size="medium" />
-          </ButtonText>
+          </ButtonIcon>
         </HoverTooltip>
       )}
     </Flex>

web/packages/teleport/src/Roles/RoleEditor/RoleEditor.story.tsx

@@ -16,21 +16,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { StoryObj } from '@storybook/react';
 import { delay, http, HttpResponse } from 'msw';
 import { Info } from 'design/Alert';
 import Flex from 'design/Flex';
+import { ButtonPrimary } from 'design/Button';
 
 import { createTeleportContext } from 'teleport/mocks/contexts';
 import TeleportContextProvider from 'teleport/TeleportContextProvider';
 import cfg from 'teleport/config';
 import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
-
 import { Access } from 'teleport/services/user';
+import useResources from 'teleport/components/useResources';
 
 import { withDefaults } from './withDefaults';
 import { RoleEditor } from './RoleEditor';
+import { RoleEditorDialog } from './RoleEditorDialog';
 
 export default {
   title: 'Teleport/Roles/Role Editor',
@@ -264,6 +266,30 @@ export const noAccess: StoryObj = {
   },
 };
 
+export const Dialog: StoryObj = {
+  render() {
+    const [open, setOpen] = useState(false);
+    const resources = useResources([], {});
+    return (
+      <>
+        <ButtonPrimary onClick={() => setOpen(true)}>Open</ButtonPrimary>
+        <RoleEditorDialog
+          resources={resources}
+          open={open}
+          onClose={() => setOpen(false)}
+          onSave={async () => setOpen(false)}
+          onDelete={async () => setOpen(false)}
+        />
+      </>
+    );
+  },
+  parameters: {
+    msw: {
+      handlers: [yamlifyHandler, parseHandler],
+    },
+  },
+};
+
 const dummyRoleYaml = `kind: role
 metadata:
   name: dummy-role

web/packages/teleport/src/Roles/RoleEditor/RoleEditor.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Alert, Flex } from 'design';
+import { Alert, Box, Flex } from 'design';
 import React, { useId, useState } from 'react';
 import { useAsync } from 'shared/hooks/useAsync';
 
@@ -27,6 +27,8 @@ import { yamlService } from 'teleport/services/yaml';
 import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
 import { CaptureEvent, userEventService } from 'teleport/services/userEvent';
 
+import DeleteRole from '../DeleteRole';
+
 import {
   roleEditorModelToRole,
   newRole,
@@ -47,7 +49,7 @@ export type RoleEditorProps = {
   originalRole?: RoleWithYaml;
   onCancel?(): void;
   onSave?(r: Partial<RoleWithYaml>): Promise<void>;
-  onDelete?(): void;
+  onDelete?(): Promise<void>;
 };
 
 /**
@@ -88,6 +90,8 @@ export const RoleEditor = ({
     standardModel.roleModel.requiresReset ? EditorTab.Yaml : EditorTab.Standard
   );
 
+  const [deleting, setDeleting] = useState(false);
+
   // Converts YAML representation to a standard editor model.
   const [parseAttempt, parseYaml] = useAsync(async () => {
     const parsedRole = await yamlService.parse<Role>(
@@ -181,32 +185,35 @@ export const RoleEditor = ({
     <Validation>
       {({ validator }) => (
         <Flex flexDirection="column" flex="1">
-          <EditorHeader
-            role={originalRole?.object}
-            onDelete={onDelete}
-            selectedEditorTab={selectedEditorTab}
-            onEditorTabChange={index => onTabChange(index, validator)}
-            isProcessing={isProcessing}
-            standardEditorId={standardEditorId}
-            yamlEditorId={yamlEditorId}
-          />
-          {saveAttempt.status === 'error' && (
-            <Alert mt={3} dismissible>
-              {saveAttempt.statusText}
-            </Alert>
-          )}
-          {parseAttempt.status === 'error' && (
-            <Alert mt={3} dismissible>
-              {parseAttempt.statusText}
-            </Alert>
-          )}
-          {yamlifyAttempt.status === 'error' && (
-            <Alert mt={3} dismissible>
-              {yamlifyAttempt.statusText}
-            </Alert>
-          )}
+          <Box mt={3} mx={3}>
+            <EditorHeader
+              role={originalRole?.object}
+              onDelete={() => setDeleting(true)}
+              selectedEditorTab={selectedEditorTab}
+              onEditorTabChange={index => onTabChange(index, validator)}
+              isProcessing={isProcessing}
+              standardEditorId={standardEditorId}
+              yamlEditorId={yamlEditorId}
+              onClose={onCancel}
+            />
+            {saveAttempt.status === 'error' && (
+              <Alert mt={3} dismissible>
+                {saveAttempt.statusText}
+              </Alert>
+            )}
+            {parseAttempt.status === 'error' && (
+              <Alert mt={3} dismissible>
+                {parseAttempt.statusText}
+              </Alert>
+            )}
+            {yamlifyAttempt.status === 'error' && (
+              <Alert mt={3} dismissible>
+                {yamlifyAttempt.statusText}
+              </Alert>
+            )}
+          </Box>
           {selectedEditorTab === EditorTab.Standard && (
-            <div id={standardEditorId}>
+            <Flex flexDirection="column" flex="1" id={standardEditorId}>
               <StandardEditor
                 originalRole={originalRole}
                 onSave={object => handleSave({ object })}
@@ -215,7 +222,7 @@ export const RoleEditor = ({
                 isProcessing={isProcessing}
                 onChange={setStandardModel}
               />
-            </div>
+            </Flex>
           )}
           {selectedEditorTab === EditorTab.Yaml && (
             <Flex flexDirection="column" flex="1" id={yamlEditorId}>
@@ -229,6 +236,13 @@ export const RoleEditor = ({
               />
             </Flex>
           )}
+          {deleting && (
+            <DeleteRole
+              name={originalRole.object.metadata.name}
+              onClose={() => setDeleting(false)}
+              onDelete={onDelete}
+            />
+          )}
         </Flex>
       )}
     </Validation>