review

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

@@ -101,7 +101,7 @@ const AccessRule = memo(function AccessRule({
         isDisabled={isProcessing}
         options={resourceKindOptions}
         value={resources}
-        onChange={r => setRule?.({ ...value, resources: r })}
+        onChange={r => setRule({ ...value, resources: r })}
         rule={precomputed(validation.fields.resources)}
       />
       <FieldSelect
@@ -110,7 +110,7 @@ const AccessRule = memo(function AccessRule({
         isDisabled={isProcessing}
         options={verbOptions}
         value={verbs}
-        onChange={v => setRule?.({ ...value, verbs: v })}
+        onChange={v => setRule({ ...value, verbs: v })}
         rule={precomputed(validation.fields.verbs)}
         mb={0}
       />

web/packages/teleport/src/Roles/RoleEditor/StandardEditor/useStandardModel.ts

@@ -107,47 +107,47 @@ const reduce = (
       return updateRoleModel(state, payload);
 
     case 'set-metadata':
-      return patchRoleModel(state, { metadata: payload });
+      return updateRoleModel(state, { metadata: payload });
 
     case 'set-options':
-      return patchRoleModel(state, { options: payload });
+      return updateRoleModel(state, { options: payload });
 
     case 'add-resource-access':
-      return patchRoleModel(state, {
+      return updateRoleModel(state, {
         resources: [
           ...state.roleModel.resources,
           newResourceAccess(payload.kind),
         ],
       });
 
     case 'set-resource-access':
-      return patchRoleModel(state, {
+      return updateRoleModel(state, {
         resources: state.roleModel.resources.map(r =>
           r.kind === payload.kind ? payload : r
         ),
       });
 
     case 'remove-resource-access':
-      return patchRoleModel(state, {
+      return updateRoleModel(state, {
         resources: state.roleModel.resources.filter(
           r => r.kind !== payload.kind
         ),
       });
 
     case 'add-access-rule':
-      return patchRoleModel(state, {
+      return updateRoleModel(state, {
         rules: [...state.roleModel.rules, newRuleModel()],
       });
 
     case 'set-access-rule':
-      return patchRoleModel(state, {
+      return updateRoleModel(state, {
         rules: state.roleModel.rules.map(r =>
           r.id === payload.id ? payload : r
         ),
       });
 
     case 'remove-access-rule':
-      return patchRoleModel(state, {
+      return updateRoleModel(state, {
         rules: state.roleModel.rules.filter(r => r.id !== payload.id),
       });
 
@@ -157,23 +157,6 @@ const reduce = (
   }
 };
 
-const patchRoleModel = (
-  { roleModel, originalRole, validationResult }: StandardEditorModel,
-  roleModelPatch: Partial<RoleEditorModel>
-): StandardEditorModel => {
-  const newRoleModel = { ...roleModel, ...roleModelPatch };
-  return {
-    roleModel: newRoleModel,
-    originalRole,
-    isDirty: hasModifiedFields(newRoleModel, originalRole),
-    validationResult: validateRoleEditorModel(
-      newRoleModel,
-      roleModel,
-      validationResult
-    ),
-  };
-};
-
 /**
  * Creates a new model state given existing state and a patch to
  * RoleEditorModel. Validates the state and recognizes whether it's dirty (i.e.

web/packages/teleport/src/Roles/RoleEditor/StandardEditor/validation.ts

@@ -61,7 +61,7 @@ export type RoleEditorModelValidationResult = {
  * The purpose of this is less about the performance of the validation process
  * itself, and more about enabling memoization-based rendering optimizations:
  * UI components that take either entire or partial validation results can be
- * cached if the validation results don't changed.
+ * cached if the validation results don't change.
  *
  * Note that we can't use `useMemo` here, because `validateRoleEditorModel` is
  * called from the state reducer. Also `highbar.memoize` was not applicable, as