Support SSH port forwarding options in the role editor

Allows both modern and legacy options. Bails out on malformed options
and degrades to YAML mode.

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

@@ -17,13 +17,14 @@
  */
 
 import { memo, useId } from 'react';
+import { components, OptionProps } from 'react-select';
 import styled, { useTheme } from 'styled-components';
 
 import Box from 'design/Box';
 import Input from 'design/Input';
 import LabelInput from 'design/LabelInput';
 import { RadioGroup } from 'design/RadioGroup';
-import { H4 } from 'design/Text';
+import Text, { H4 } from 'design/Text';
 import Select from 'shared/components/Select';
 
 import { SectionProps } from './sections';
@@ -33,6 +34,8 @@ import {
   OptionsModel,
   requireMFATypeOptions,
   sessionRecordingModeOptions,
+  SSHPortForwardingModeOption,
+  sshPortForwardingModeOptions,
 } from './standardmodel';
 
 /**
@@ -53,6 +56,8 @@ export const Options = memo(function Options({
   const createDBUserModeId = `${id}-create-db-user-mode`;
   const defaultSessionRecordingModeId = `${id}-default-session-recording-mode`;
   const sshSessionRecordingModeId = `${id}-ssh-session-recording-mode`;
+  const sshPortForwardingModeId = `${id}-ssh-port-forwarding-mode`;
+
   return (
     <OptionsGridContainer
       border={1}
@@ -140,6 +145,18 @@ export const Options = memo(function Options({
         onChange={m => onChange?.({ ...value, sshSessionRecordingMode: m })}
       />
 
+      <OptionLabel htmlFor={sshPortForwardingModeId}>
+        Port Forwarding Mode
+      </OptionLabel>
+      <Select
+        components={sshPortForwardingModeComponents}
+        inputId={sshPortForwardingModeId}
+        isDisabled={isProcessing}
+        options={sshPortForwardingModeOptions}
+        value={value.sshPortForwardingMode}
+        onChange={m => onChange?.({ ...value, sshPortForwardingMode: m })}
+      />
+
       <OptionsHeader separator>Database</OptionsHeader>
 
       <Box>Create Database User</Box>
@@ -195,6 +212,20 @@ export const Options = memo(function Options({
   );
 });
 
+const SSHPortForwardingModeOptionComponent = (
+  props: OptionProps<SSHPortForwardingModeOption, false>
+) => {
+  return (
+    <components.Option {...props}>
+      {props.label} <Text typography="body3">{props.data.description}</Text>
+    </components.Option>
+  );
+};
+
+const sshPortForwardingModeComponents = {
+  Option: SSHPortForwardingModeOptionComponent,
+};
+
 const OptionsGridContainer = styled(Box)`
   display: grid;
   grid-template-columns: 1fr 1fr;