Add Role Diff Visual to Role editor

This will enable a role diff viewer from Teleport Policy if the client
has Teleport policy enabled

Author: avatus

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

@@ -16,13 +16,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useId, useState } from 'react';
+import { useCallback, useEffect, useId, useState } from 'react';
 
 import { Alert, Box, Flex } from 'design';
 import Validation, { Validator } from 'shared/components/Validation';
 import { useAsync } from 'shared/hooks/useAsync';
 
+import cfg from 'teleport/config';
 import { Role, RoleWithYaml } from 'teleport/services/resources';
+import { storageService } from 'teleport/services/storageService';
 import { CaptureEvent, userEventService } from 'teleport/services/userEvent';
 import { yamlService } from 'teleport/services/yaml';
 import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
@@ -46,6 +48,7 @@ export type RoleEditorProps = {
   originalRole?: RoleWithYaml;
   onCancel?(): void;
   onSave?(r: Partial<RoleWithYaml>): Promise<void>;
+  onRoleUpdate?(r: Role): void;
 };
 
 /**
@@ -57,7 +60,10 @@ export const RoleEditor = ({
   originalRole,
   onCancel,
   onSave,
+  onRoleUpdate,
 }: RoleEditorProps) => {
+  const roleTesterEnabled =
+    cfg.isPolicyEnabled && storageService.getAccessGraphRoleTesterEnabled();
   const idPrefix = useId();
   // These IDs are needed to connect accessibility attributes between the
   // standard/YAML tab switcher and the switched panels.
@@ -66,6 +72,12 @@ export const RoleEditor = ({
 
   const [standardModel, dispatch] = useStandardModel(originalRole?.object);
 
+  useEffect(() => {
+    if (standardModel.validationResult.isValid) {
+      onRoleUpdate?.(roleEditorModelToRole(standardModel.roleModel));
+    }
+  }, [standardModel, onRoleUpdate]);
+
   const [yamlModel, setYamlModel] = useState<YamlEditorModel>({
     content: originalRole?.yaml ?? '',
     isDirty: !originalRole, // New role is dirty by default.
@@ -87,6 +99,20 @@ export const RoleEditor = ({
     return roleToRoleEditorModel(parsedRole, originalRole?.object);
   });
 
+  // The standard editor will automatically preview the changes based on state updates
+  // but the yaml editor needs to be told when to update (the preview button)
+  const handleYamlPreview = useCallback(async () => {
+    if (!onRoleUpdate) {
+      return;
+    }
+    // error will be handled by the parseYaml attempt. we only continue if parsed returns a value (success)
+    const [parsed] = await parseYaml();
+    if (!parsed) {
+      return;
+    }
+    onRoleUpdate(roleEditorModelToRole(parsed));
+  }, [onRoleUpdate, parseYaml]);
+
   // Converts standard editor model to a YAML representation.
   const [yamlifyAttempt, yamlifyRole] = useAsync(
     async () =>
@@ -216,6 +242,7 @@ export const RoleEditor = ({
                 isProcessing={isProcessing}
                 onCancel={handleCancel}
                 originalRole={originalRole}
+                onPreview={roleTesterEnabled ? handleYamlPreview : undefined}
               />
             </Flex>
           )}

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

@@ -16,13 +16,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useTheme } from 'styled-components';
 
 import { Danger } from 'design/Alert';
 import Flex from 'design/Flex';
 import { Indicator } from 'design/Indicator';
 import { useAsync } from 'shared/hooks/useAsync';
+import { debounce } from 'shared/utils/highbar';
 
 import { State as ResourcesState } from 'teleport/components/useResources';
 import { Role, RoleWithYaml } from 'teleport/services/resources';
@@ -68,6 +69,11 @@ export function RoleEditorAdapter({
     convertToRole(originalContent);
   }, [originalContent]);
 
+  const onRoleUpdate = useCallback(
+    debounce(roleDiffProps.updateRoleDiff, 500),
+    []
+  );
+
   return (
     <Flex flex="1">
       <Flex
@@ -90,26 +96,29 @@ export function RoleEditorAdapter({
         {convertAttempt.status === 'error' && (
           <Danger>{convertAttempt.statusText}</Danger>
         )}
+        {roleDiffProps?.errorMessage && (
+          <Danger>{roleDiffProps.errorMessage}</Danger>
+        )}
         {convertAttempt.status === 'success' && (
           <RoleEditor
             originalRole={convertAttempt.data}
             onCancel={onCancel}
             onSave={onSave}
+            onRoleUpdate={onRoleUpdate}
           />
         )}
       </Flex>
-      <Flex flex="1" alignItems="center" justifyContent="center" m={3}>
-        {/* TODO (avatus) this component will not be rendered until the Access Diff feature is implemented */}
-        {roleDiffProps ? (
-          <roleDiffProps.RoleDiffComponent />
-        ) : (
+      {roleDiffProps ? (
+        roleDiffProps.roleDiffElement
+      ) : (
+        <Flex flex="1" alignItems="center" justifyContent="center" m={3}>
           <PolicyPlaceholder
             currentFlow={
               resources.status === 'creating' ? 'creating' : 'updating'
             }
           />
-        )}
-      </Flex>
+        </Flex>
+      )}
     </Flex>
   );
 }

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

@@ -25,13 +25,17 @@ import useTeleport from 'teleport/useTeleport';
 
 export const EditorSaveCancelButton = ({
   onSave,
+  onPreview,
   onCancel,
-  disabled,
+  saveDisabled,
+  previewDisabled = true,
   isEditing,
 }: {
   onSave?(): void;
+  onPreview?(): void;
   onCancel?(): void;
-  disabled: boolean;
+  saveDisabled: boolean;
+  previewDisabled?: boolean;
   isEditing?: boolean;
 }) => {
   const ctx = useTeleport();
@@ -45,32 +49,45 @@ export const EditorSaveCancelButton = ({
     hoverTooltipContent = 'You do not have access to create roles';
   }
 
+  const saveButton = (
+    <Box width="50%">
+      <HoverTooltip tipContent={hoverTooltipContent}>
+        <ButtonPrimary
+          width="100%"
+          size="large"
+          onClick={onSave}
+          disabled={
+            saveDisabled ||
+            (isEditing && !roleAccess.edit) ||
+            (!isEditing && !roleAccess.create)
+          }
+        >
+          {isEditing ? 'Save Changes' : 'Create Role'}
+        </ButtonPrimary>
+      </HoverTooltip>
+    </Box>
+  );
+  const cancelButton = (
+    <ButtonSecondary width="50%" onClick={onCancel}>
+      Cancel
+    </ButtonSecondary>
+  );
+
+  const previewButton = (
+    <ButtonPrimary width="50%" onClick={onPreview} disabled={previewDisabled}>
+      Preview
+    </ButtonPrimary>
+  );
+
   return (
     <Flex
       gap={2}
       p={3}
       borderTop={1}
       borderColor={theme.colors.interactive.tonal.neutral[0]}
     >
-      <Box width="50%">
-        <HoverTooltip tipContent={hoverTooltipContent}>
-          <ButtonPrimary
-            width="100%"
-            size="large"
-            onClick={onSave}
-            disabled={
-              disabled ||
-              (isEditing && !roleAccess.edit) ||
-              (!isEditing && !roleAccess.create)
-            }
-          >
-            {isEditing ? 'Save Changes' : 'Create Role'}
-          </ButtonPrimary>
-        </HoverTooltip>
-      </Box>
-      <ButtonSecondary width="50%" onClick={onCancel}>
-        Cancel
-      </ButtonSecondary>
+      {saveButton}
+      {onPreview ? previewButton : cancelButton}
     </Flex>
   );
 };

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

@@ -214,7 +214,7 @@ export const StandardEditor = ({
       <EditorSaveCancelButton
         onSave={() => handleSave()}
         onCancel={onCancel}
-        disabled={
+        saveDisabled={
           isProcessing ||
           standardEditorModel.roleModel.requiresReset ||
           !standardEditorModel.isDirty

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

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { useState } from 'react';
+
 import { Flex } from 'design';
 import TextEditor from 'shared/components/TextEditor';
 
@@ -30,6 +32,7 @@ type YamlEditorProps = {
   isProcessing: boolean;
   onChange?(y: YamlEditorModel): void;
   onSave?(content: string): void;
+  onPreview?(): void;
   onCancel?(): void;
 };
 
@@ -39,13 +42,25 @@ export const YamlEditor = ({
   yamlEditorModel,
   onChange,
   onSave,
+  onPreview,
   onCancel,
 }: YamlEditorProps) => {
   const isEditing = !!originalRole;
+  const [wasPreviewed, setHasPreviewed] = useState(!onPreview);
 
   const handleSave = () => onSave?.(yamlEditorModel.content);
 
+  const handlePreview = () => {
+    // handlePreview should only be called if `onPreview` exists, but adding
+    // the extra safety here to protect against potential misuse
+    onPreview?.();
+    setHasPreviewed(true);
+  };
+
   function handleSetYaml(newContent: string) {
+    if (onPreview) {
+      setHasPreviewed(false);
+    }
     onChange?.({
       isDirty: originalRole?.yaml !== newContent,
       content: newContent,
@@ -63,8 +78,12 @@ export const YamlEditor = ({
       </Flex>
       <EditorSaveCancelButton
         onSave={handleSave}
+        onPreview={onPreview ? handlePreview : undefined}
         onCancel={onCancel}
-        disabled={isProcessing || !yamlEditorModel.isDirty}
+        saveDisabled={isProcessing || !yamlEditorModel.isDirty || !wasPreviewed}
+        previewDisabled={
+          isProcessing || wasPreviewed || !yamlEditorModel.isDirty
+        }
         isEditing={isEditing}
       />
     </Flex>

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

@@ -271,19 +271,25 @@ test('renders the role diff component', async () => {
       list: true,
     },
   });
-  const RoleDiffComponent = () => <div>i am rendered</div>;
+  const roleDiffElement = <div>i am rendered</div>;
+
   render(
     <MemoryRouter>
       <ContextProvider ctx={ctx}>
         <Roles
           {...defaultState()}
-          roleDiffProps={{ RoleDiffComponent, updateRoleDiff: () => null }}
+          roleDiffProps={{
+            roleDiffElement,
+            updateRoleDiff: () => null,
+            errorMessage: 'there is an error here',
+          }}
         />
       </ContextProvider>
     </MemoryRouter>
   );
   await openEditor();
   expect(screen.getByText('i am rendered')).toBeInTheDocument();
+  expect(screen.getByText('there is an error here')).toBeInTheDocument();
 });
 
 async function openEditor() {

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

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ComponentType, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { Alert, Box, Button, Flex, H3, Link } from 'design';
@@ -50,8 +50,9 @@ import { State, useRoles } from './useRoles';
 
 // RoleDiffProps are an optional set of props to render the role diff visualizer.
 type RoleDiffProps = {
-  RoleDiffComponent: ComponentType;
-  updateRoleDiff: (role: Role) => Promise<void>;
+  roleDiffElement: React.ReactNode;
+  updateRoleDiff: (role: Role) => void;
+  errorMessage: string;
 };
 
 export type RolesProps = {

web/packages/teleport/src/services/storageService/storageService.ts

@@ -265,6 +265,13 @@ export const storageService = {
     return this.getParsedJSONValue(KeysEnum.ACCESS_GRAPH_SQL_ENABLED, false);
   },
 
+  getAccessGraphRoleTesterEnabled(): boolean {
+    return this.getParsedJSONValue(
+      KeysEnum.ACCESS_GRAPH_ROLE_TESTER_ENABLED,
+      false
+    );
+  },
+
   getExternalAuditStorageCtaDisabled(): boolean {
     return this.getParsedJSONValue(
       KeysEnum.EXTERNAL_AUDIT_STORAGE_CTA_DISABLED,

web/packages/teleport/src/services/storageService/types.ts

@@ -30,6 +30,8 @@ export const KeysEnum = {
   ACCESS_GRAPH_QUERY: 'grv_teleport_access_graph_query',
   ACCESS_GRAPH_ENABLED: 'grv_teleport_access_graph_enabled',
   ACCESS_GRAPH_SQL_ENABLED: 'grv_teleport_access_graph_sql_enabled',
+  ACCESS_GRAPH_ROLE_TESTER_ENABLED:
+    'grv_teleport_access_graph_role_tester_enabled',
   ACCESS_LIST_PREFERENCES: 'grv_teleport_access_list_preferences',
   EXTERNAL_AUDIT_STORAGE_CTA_DISABLED:
     'grv_teleport_external_audit_storage_disabled',