Add the options panel to role editor

api/types/constants.go

@@ -21,6 +21,11 @@ import (
 )
 
 const (
+	// The `Kind*` constants in this const block identify resource kinds used for
+	// storage an/or and access control. Please keep these in sync with the
+	// `ResourceKind` enum in
+	// `web/packages/teleport/src/services/resources/types.ts`.
+
 	// DefaultAPIGroup is a default group of permissions API,
 	// lets us to add different permission types
 	DefaultAPIGroup = "gravitational.io/teleport"

web/packages/design/src/index.ts

@@ -34,7 +34,7 @@ import CardSuccess, { CardSuccessLogin } from './CardSuccess';
 import { Indicator } from './Indicator';
 import Input from './Input';
 import Label from './Label';
-import LabelInput from './LabelInput';
+import { LabelInput } from './LabelInput';
 import LabelState from './LabelState';
 import Link from './Link';
 import { Mark } from './Mark';

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

@@ -42,7 +42,7 @@ export default {
       }
       return (
         <TeleportContextProvider ctx={ctx}>
-          <Flex flexDirection="column" width="500px" height="800px">
+          <Flex flexDirection="column" width="700px" height="800px">
             <Story />
           </Flex>
         </TeleportContextProvider>

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

@@ -20,6 +20,8 @@ import { Alert, Flex } from 'design';
 import React, { useId, useState } from 'react';
 import { useAsync } from 'shared/hooks/useAsync';
 
+import Validation, { Validator } from 'shared/components/Validation';
+
 import { Role, RoleWithYaml } from 'teleport/services/resources';
 import { yamlService } from 'teleport/services/yaml';
 import { YamlSupportedResourceKind } from 'teleport/services/yaml/types';
@@ -119,11 +121,18 @@ export const RoleEditor = ({
     yamlifyAttempt.status === 'processing' ||
     saveAttempt.status === 'processing';
 
-  async function onTabChange(activeIndex: EditorTab) {
+  async function onTabChange(activeIndex: EditorTab, validator: Validator) {
     // The code below is not idempotent, so we need to protect ourselves from
     // an accidental model replacement.
     if (activeIndex === selectedEditorTab) return;
 
+    // Validate the model on tab switch, because the server-side yamlification
+    // requires model to be valid. However, if it's OK, we reset the validator.
+    // We don't want it to be validating at this point, since the user didn't
+    // attempt to submit the form.
+    if (!validator.validate()) return;
+    validator.reset();
+
     switch (activeIndex) {
       case EditorTab.Standard: {
         if (!yamlModel.content) {
@@ -169,55 +178,59 @@ export const RoleEditor = ({
   }
 
   return (
-    <Flex flexDirection="column" flex="1">
-      <EditorHeader
-        role={originalRole?.object}
-        onDelete={onDelete}
-        selectedEditorTab={selectedEditorTab}
-        onEditorTabChange={onTabChange}
-        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>
-      )}
-      {selectedEditorTab === EditorTab.Standard && (
-        <div id={standardEditorId}>
-          <StandardEditor
-            originalRole={originalRole}
-            onSave={object => handleSave({ object })}
-            onCancel={handleCancel}
-            standardEditorModel={standardModel}
-            isProcessing={isProcessing}
-            onChange={setStandardModel}
-          />
-        </div>
-      )}
-      {selectedEditorTab === EditorTab.Yaml && (
-        <Flex flexDirection="column" flex="1" id={yamlEditorId}>
-          <YamlEditor
-            yamlEditorModel={yamlModel}
-            onChange={setYamlModel}
-            onSave={async yaml => void (await handleSave({ yaml }))}
+    <Validation>
+      {({ validator }) => (
+        <Flex flexDirection="column" flex="1">
+          <EditorHeader
+            role={originalRole?.object}
+            onDelete={onDelete}
+            selectedEditorTab={selectedEditorTab}
+            onEditorTabChange={index => onTabChange(index, validator)}
             isProcessing={isProcessing}
-            onCancel={handleCancel}
-            originalRole={originalRole}
+            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>
+          )}
+          {selectedEditorTab === EditorTab.Standard && (
+            <div id={standardEditorId}>
+              <StandardEditor
+                originalRole={originalRole}
+                onSave={object => handleSave({ object })}
+                onCancel={handleCancel}
+                standardEditorModel={standardModel}
+                isProcessing={isProcessing}
+                onChange={setStandardModel}
+              />
+            </div>
+          )}
+          {selectedEditorTab === EditorTab.Yaml && (
+            <Flex flexDirection="column" flex="1" id={yamlEditorId}>
+              <YamlEditor
+                yamlEditorModel={yamlModel}
+                onChange={setYamlModel}
+                onSave={async yaml => void (await handleSave({ yaml }))}
+                isProcessing={isProcessing}
+                onCancel={handleCancel}
+                originalRole={originalRole}
+              />
+            </Flex>
+          )}
         </Flex>
       )}
-    </Flex>
+    </Validation>
   );
 };