disallow adding recipients by non-admins with monitoring permission (#21540)

enterprise/frontend/src/metabase-enterprise/audit_app/components/AuditNotificationEditModal/AuditNotificationEditModal.jsx

@@ -17,6 +17,7 @@ const propTypes = {
   onUpdate: PropTypes.func,
   onDelete: PropTypes.func,
   onClose: PropTypes.func,
+  isAdmin: PropTypes.bool,
 };
 
 const AuditNotificationEditModal = ({
@@ -24,6 +25,7 @@ const AuditNotificationEditModal = ({
   type,
   users,
   invalidRecipientText,
+  isAdmin,
   onUpdate,
   onDelete,
   onClose,
@@ -83,6 +85,7 @@ const AuditNotificationEditModal = ({
     >
       {channels.map((channel, index) => (
         <UserPicker
+          canAddItems={isAdmin}
           key={index}
           value={channel.recipients}
           validateValue={recipientIsValid}

enterprise/frontend/src/metabase-enterprise/audit_app/containers/AuditAlertEditModal/AuditAlertEditModal.jsx

@@ -4,9 +4,11 @@ import _ from "underscore";
 import { t } from "ttag";
 import Alerts from "metabase/entities/alerts";
 import Users from "metabase/entities/users";
+import { getUserIsAdmin } from "metabase/selectors/user";
 import AuditNotificationEditModal from "../../components/AuditNotificationEditModal";
 
 const mapStateToProps = (state, { alert }) => ({
+  isAdmin: getUserIsAdmin(state),
   item: alert,
   type: "alert",
   invalidRecipientText: domains =>

enterprise/frontend/src/metabase-enterprise/audit_app/containers/AuditSubscriptionEditModal/AuditSubscriptionEditModal.jsx

@@ -4,9 +4,11 @@ import _ from "underscore";
 import { t } from "ttag";
 import Pulses from "metabase/entities/pulses";
 import Users from "metabase/entities/users";
+import { getUserIsAdmin } from "metabase/selectors/user";
 import AuditNotificationEditModal from "../../components/AuditNotificationEditModal";
 
 const mapStateToProps = (state, { pulse }) => ({
+  isAdmin: getUserIsAdmin(state),
   item: pulse,
   type: "pulse",
   invalidRecipientText: domains =>

frontend/src/metabase/components/TokenField.jsx

@@ -60,6 +60,8 @@ export default class TokenField extends Component {
 
     color: "brand",
 
+    canAddItems: true,
+
     style: {},
     valueStyle: {},
     optionsStyle: {},
@@ -455,6 +457,8 @@ export default class TokenField extends Component {
       optionsStyle,
       optionsClassName,
       prefix,
+
+      canAddItems,
     } = this.props;
     let {
       inputValue,
@@ -533,23 +537,25 @@ export default class TokenField extends Component {
             )}
           </TokenFieldItem>
         ))}
-        <li className={cx("flex-full flex align-center mr1 mb1 p1")}>
-          <input
-            ref={this.inputRef}
-            style={{ ...defaultStyleValue, ...valueStyle }}
-            className={cx("full no-focus borderless px1")}
-            // set size to be small enough that it fits in a parameter.
-            size={10}
-            placeholder={placeholder}
-            value={isControlledInput ? inputValue : undefined}
-            defaultValue={isControlledInput ? undefined : inputValue}
-            onKeyDown={this.onInputKeyDown}
-            onChange={isControlledInput ? this.onInputChange : undefined}
-            onFocus={this.onInputFocus}
-            onBlur={this.onInputBlur}
-            onPaste={this.onInputPaste}
-          />
-        </li>
+        {canAddItems && (
+          <li className={cx("flex-full flex align-center mr1 mb1 p1")}>
+            <input
+              ref={this.inputRef}
+              style={{ ...defaultStyleValue, ...valueStyle }}
+              className={cx("full no-focus borderless px1")}
+              // set size to be small enough that it fits in a parameter.
+              size={10}
+              placeholder={placeholder}
+              value={isControlledInput ? inputValue : undefined}
+              defaultValue={isControlledInput ? undefined : inputValue}
+              onKeyDown={this.onInputKeyDown}
+              onChange={isControlledInput ? this.onInputChange : undefined}
+              onFocus={this.onInputFocus}
+              onBlur={this.onInputBlur}
+              onPaste={this.onInputPaste}
+            />
+          </li>
+        )}
       </ul>
     );
 

frontend/src/metabase/components/UserPicker/UserPicker.jsx

@@ -15,9 +15,10 @@ const propTypes = {
   validateValue: PropTypes.func,
   users: PropTypes.array.isRequired,
   onChange: PropTypes.func,
+  canAddItems: PropTypes.bool,
 };
 
-const UserPicker = ({ value, validateValue, users, onChange }) => {
+const UserPicker = ({ value, validateValue, users, canAddItems, onChange }) => {
   const placeholder = !value.length
     ? t`Enter user names or email addresses`
     : null;
@@ -71,6 +72,7 @@ const UserPicker = ({ value, validateValue, users, onChange }) => {
         multi
         updateOnInputBlur
         onChange={onChange}
+        canAddItems={canAddItems}
       />
     </UserPickerRoot>
   );

frontend/test/metabase/components/TokenField.unit.spec.js

@@ -158,6 +158,17 @@ describe("TokenField", () => {
     findWithinOptions(["bar"]);
   });
 
+  it("should not allow adding new items when canAddItems is false", () => {
+    render(
+      <TokenFieldWithStateAndDefaults
+        value={["foo"]}
+        options={["bar", "baz"]}
+        canAddItems={false}
+      />,
+    );
+    expect(screen.queryByRole("textbox")).toBeNull();
+  });
+
   it("should add freeform value if parseFreeformValue is provided", () => {
     render(
       <TokenFieldWithStateAndDefaults