[v13] Supporting changes for Cloud email invites (#32439)

lib/auth/init.go

@@ -737,9 +737,10 @@ type PresetRoleManager interface {
 	UpsertRole(ctx context.Context, role types.Role) error
 }
 
-// createPresetRoles creates preset role resources
-func createPresetRoles(ctx context.Context, rm PresetRoleManager) error {
-	roles := []types.Role{
+// GetPresetRoles returns a list of all preset roles expected to be available on
+// this cluster.
+func GetPresetRoles() []types.Role {
+	return []types.Role{
 		services.NewPresetGroupAccessRole(),
 		services.NewPresetEditorRole(),
 		services.NewPresetAccessRole(),
@@ -751,6 +752,11 @@ func createPresetRoles(ctx context.Context, rm PresetRoleManager) error {
 		services.NewPresetDeviceEnrollRole(),
 		services.NewPresetRequireTrustedDeviceRole(),
 	}
+}
+
+// createPresetRoles creates preset role resources
+func createPresetRoles(ctx context.Context, rm PresetRoleManager) error {
+	roles := GetPresetRoles()
 
 	g, gctx := errgroup.WithContext(ctx)
 	for _, role := range roles {

lib/web/apiserver.go

@@ -715,6 +715,7 @@ func (h *Handler) bindDefaultEndpoints() {
 	h.POST("/webapi/roles", h.WithAuth(h.upsertRoleHandle))
 	h.PUT("/webapi/roles/:name", h.WithAuth(h.upsertRoleHandle))
 	h.DELETE("/webapi/roles/:name", h.WithAuth(h.deleteRole))
+	h.GET("/webapi/presetroles", httplib.MakeHandler(h.getPresetRoles))
 
 	h.GET("/webapi/github", h.WithAuth(h.getGithubConnectorsHandle))
 	h.POST("/webapi/github", h.WithAuth(h.upsertGithubConnectorHandle))

lib/web/resources.go

@@ -29,6 +29,7 @@ import (
 	"github.com/gravitational/teleport/api/client/proto"
 	kubeproto "github.com/gravitational/teleport/api/gen/proto/go/teleport/kube/v1"
 	"github.com/gravitational/teleport/api/types"
+	"github.com/gravitational/teleport/lib/auth"
 	"github.com/gravitational/teleport/lib/client"
 	"github.com/gravitational/teleport/lib/defaults"
 	"github.com/gravitational/teleport/lib/httplib"
@@ -150,6 +151,15 @@ func upsertRole(ctx context.Context, clt resourcesAPIGetter, content, httpMethod
 	return ui.NewResourceItem(role)
 }
 
+// getPresetRoles returns a list of preset roles expected to be available on
+// this server. These are hard-coded for a given Teleport version, so this
+// should have the same security implications as the Teleport version exposed
+// via the public ping endpoint.
+func (h *Handler) getPresetRoles(w http.ResponseWriter, r *http.Request, p httprouter.Params) (interface{}, error) {
+	presets := auth.GetPresetRoles()
+	return ui.NewRoles(presets)
+}
+
 func (h *Handler) getGithubConnectorsHandle(w http.ResponseWriter, r *http.Request, params httprouter.Params, ctx *SessionContext) (interface{}, error) {
 	clt, err := ctx.GetClient()
 	if err != nil {

lib/web/ui/resource.go

@@ -35,6 +35,8 @@ type ResourceItem struct {
 	Kind string `json:"kind"`
 	// Name is a resource name.
 	Name string `json:"name"`
+	// Description is an optional resource description.
+	Description string `json:"description,omitempty"`
 	// Content is resource yaml content.
 	Content string `json:"content"`
 }
@@ -48,12 +50,14 @@ func NewResourceItem(resource types.Resource) (*ResourceItem, error) {
 
 	kind := resource.GetKind()
 	name := resource.GetName()
+	description := resource.GetMetadata().Description
 
 	return &ResourceItem{
-		ID:      fmt.Sprintf("%v:%v", kind, name),
-		Kind:    kind,
-		Name:    name,
-		Content: string(data[:]),
+		ID:          fmt.Sprintf("%v:%v", kind, name),
+		Kind:        kind,
+		Name:        name,
+		Description: description,
+		Content:     string(data[:]),
 	}, nil
 
 }

web/packages/shared/components/FieldSelect/FieldSelect.tsx

@@ -20,9 +20,12 @@ import { Box, LabelInput } from 'design';
 
 import { useRule } from 'shared/components/Validation';
 
-import Select, { Props as SelectProps } from './../Select';
+import Select, { Props as SelectProps } from '../Select';
+
+import { LabelTip, defaultRule } from './shared';
 
 export default function FieldSelect({
+  components,
   label,
   labelTip,
   value,
@@ -35,11 +38,13 @@ export default function FieldSelect({
   isMulti,
   menuPosition,
   rule = defaultRule,
+  stylesConfig,
   isSearchable = false,
   isSimpleValue = false,
   autoFocus = false,
   isDisabled = false,
   elevated = false,
+  inputId = 'select',
   ...styles
 }: Props) {
   const { valid, message } = useRule(rule(value));
@@ -48,13 +53,15 @@ export default function FieldSelect({
   return (
     <Box mb="4" {...styles}>
       {label && (
-        <LabelInput htmlFor={'select'} hasError={hasError}>
+        <LabelInput htmlFor={inputId} hasError={hasError}>
           {labelText}
           {labelTip && <LabelTip text={labelTip} />}
         </LabelInput>
       )}
       <Select
-        inputId="select"
+        components={components}
+        stylesConfig={stylesConfig}
+        inputId={inputId}
         name={name}
         menuPosition={menuPosition}
         hasError={hasError}
@@ -75,14 +82,6 @@ export default function FieldSelect({
   );
 }
 
-const defaultRule = () => () => ({ valid: true });
-
-const LabelTip = ({ text }) => (
-  <span
-    css={{ fontWeight: 'normal', textTransform: 'none' }}
-  >{` - ${text}`}</span>
-);
-
 type Props = SelectProps & {
   autoFocus?: boolean;
   label?: string;

web/packages/shared/components/FieldSelect/FieldSelectCreatable.tsx

@@ -0,0 +1,102 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { Box, LabelInput } from 'design';
+
+import { useRule } from 'shared/components/Validation';
+
+import {
+  SelectCreatable,
+  CreatableProps as SelectCreatableProps,
+} from '../Select';
+
+import { LabelTip, defaultRule } from './shared';
+
+export function FieldSelectCreatable({
+  components,
+  label,
+  labelTip,
+  value,
+  name,
+  onChange,
+  placeholder,
+  maxMenuHeight,
+  isClearable,
+  isMulti,
+  menuIsOpen,
+  menuPosition,
+  inputValue,
+  onKeyDown,
+  onInputChange,
+  onBlur,
+  rule = defaultRule,
+  stylesConfig,
+  isSearchable = false,
+  isSimpleValue = false,
+  autoFocus = false,
+  isDisabled = false,
+  elevated = false,
+  inputId = 'select',
+  ...styles
+}: CreatableProps) {
+  const { valid, message } = useRule(rule(value));
+  const hasError = Boolean(!valid);
+  const labelText = hasError ? message : label;
+  return (
+    <Box mb="4" {...styles}>
+      {label && (
+        <LabelInput htmlFor={inputId} hasError={hasError}>
+          {labelText}
+          {labelTip && <LabelTip text={labelTip} />}
+        </LabelInput>
+      )}
+      <SelectCreatable
+        components={components}
+        inputId={inputId}
+        name={name}
+        menuPosition={menuPosition}
+        hasError={hasError}
+        isSimpleValue={isSimpleValue}
+        isSearchable={isSearchable}
+        isClearable={isClearable}
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        onInputChange={onInputChange}
+        onBlur={onBlur}
+        inputValue={inputValue}
+        maxMenuHeight={maxMenuHeight}
+        placeholder={placeholder}
+        isMulti={isMulti}
+        autoFocus={autoFocus}
+        isDisabled={isDisabled}
+        elevated={elevated}
+        menuIsOpen={menuIsOpen}
+        stylesConfig={stylesConfig}
+      />
+    </Box>
+  );
+}
+
+type CreatableProps = SelectCreatableProps & {
+  autoFocus?: boolean;
+  label?: string;
+  rule?: (options: unknown) => () => unknown;
+  // styles
+  [key: string]: any;
+};

web/packages/shared/components/FieldSelect/index.ts

@@ -16,3 +16,5 @@ limitations under the License.
 
 import FieldSelect from './FieldSelect';
 export default FieldSelect;
+
+export { FieldSelectCreatable } from './FieldSelectCreatable';

web/packages/shared/components/FieldSelect/shared.tsx

@@ -0,0 +1,23 @@
+/*
+Copyright 2023 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const defaultRule = () => () => ({ valid: true });
+
+export const LabelTip = ({ text }) => (
+  <span
+    css={{ fontWeight: 'normal', textTransform: 'none' }}
+  >{` - ${text}`}</span>
+);

web/packages/shared/components/Select/Select.story.tsx

@@ -83,7 +83,7 @@ function SelectDark({ value, onChange, options }) {
   const [selected, setSelected] = React.useState([]);
 
   return (
-    <Flex flexDirection="column" width="330px">
+    <Flex flexDirection="column" width="330px" mr={5}>
       <DarkStyledSelect mb="206px">
         <Select
           value={value}

web/packages/shared/components/Select/Select.tsx

@@ -17,13 +17,19 @@ limitations under the License.
 import React from 'react';
 import ReactSelect from 'react-select';
 import ReactSelectAsync from 'react-select/async';
+import CreatableSelect from 'react-select/creatable';
 import styled from 'styled-components';
 import { width, space } from 'design/system';
 
-import { Props, AsyncProps } from './types';
+import { Props, AsyncProps, CreatableProps } from './types';
 
 export default function Select(props: Props) {
-  const { hasError = false, elevated = false, ...restOfProps } = props;
+  const {
+    hasError = false,
+    elevated = false,
+    stylesConfig,
+    ...restOfProps
+  } = props;
   return (
     <StyledSelect hasError={hasError} elevated={elevated}>
       <ReactSelect
@@ -34,6 +40,7 @@ export default function Select(props: Props) {
         isMulti={false}
         isSearchable={true}
         placeholder="Select..."
+        styles={stylesConfig}
         {...restOfProps}
       />
     </StyledSelect>
@@ -59,6 +66,20 @@ export function SelectAsync(props: AsyncProps) {
   );
 }
 
+export function SelectCreatable(props: CreatableProps) {
+  const { hasError = false, stylesConfig, ...restOfProps } = props;
+  return (
+    <StyledSelect hasError={hasError}>
+      <CreatableSelect
+        className="react-select-container"
+        classNamePrefix="react-select"
+        styles={stylesConfig}
+        {...restOfProps}
+      />
+    </StyledSelect>
+  );
+}
+
 export const StyledSelect = styled.div`
   .react-select-container {
     box-sizing: border-box;