Fixed a bug that would clear role selections when editing a monitor. …

…Updated help text for role selection dropdown menu. Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
AWSHurneyt · Mar 14, 2024 · 553fc39 · 553fc39
1 parent 63b0b1b
commit 553fc39
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js b/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js
@@ -706,7 +706,12 @@ class DefineMonitor extends Component {
         )}
         {filterByBackendRolesEnabled ? (
           <div>
-            <MonitorSecurity errors={errors} httpClient={httpClient} isDarkMode={isDarkMode} />
+            <MonitorSecurity
+              values={values}
+              errors={errors}
+              httpClient={httpClient}
+              isDarkMode={isDarkMode}
+            />
             <EuiSpacer />
           </div>
         ) : null}

diff --git a/public/pages/CreateMonitor/containers/MonitorRoles/MonitorRoles.js b/public/pages/CreateMonitor/containers/MonitorRoles/MonitorRoles.js
@@ -6,10 +6,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import { EuiHealth, EuiHighlight } from '@elastic/eui';
-
+import { EuiLink, EuiText } from '@elastic/eui';
 import { FormikComboBox } from '../../../../components/FormControls';
 import { createReasonableWait } from '../MonitorIndex/utils/helpers';
+import { FORMIK_INITIAL_VALUES } from '../CreateMonitor/utils/constants';
+
+const RBAC_DOCUMENTATION =
+  'https://opensearch.org/docs/latest/observing-your-data/alerting/security/';
 
 const propTypes = {
   httpClient: PropTypes.object.isRequired,
@@ -19,11 +22,16 @@ class MonitorRoles extends React.Component {
   constructor(props) {
     super(props);
 
+    // Retrieve, and parse roles when editing a monitor
+    const roles = _.get(props, 'values.roles', FORMIK_INITIAL_VALUES.roles).map((role) => ({
+      label: role,
+    }));
+
     this.lastQuery = null;
     this.state = {
       isLoading: false,
       showingRoleQueryErrors: false,
-      options: [],
+      options: roles,
       roles: [],
     };
 
@@ -93,8 +101,20 @@ class MonitorRoles extends React.Component {
         name="roles"
         formRow
         rowProps={{
-          label: 'Backend roles',
-          helpText: 'You can optionally assign one or more backend roles to the monitor',
+          label: (
+            <div>
+              <EuiText size={'xs'}>
+                <strong>Backend roles</strong>
+                <i> - optional </i>
+              </EuiText>
+              <EuiText color={'subdued'} size={'xs'} style={{ width: '400px' }}>
+                Specify role-based access control (RBAC) backend roles.{' '}
+                <EuiLink external href={RBAC_DOCUMENTATION} target={'_blank'}>
+                  Learn more
+                </EuiLink>
+              </EuiText>
+            </div>
+          ),
           style: { paddingLeft: '10px' },
         }}
         inputProps={{
@@ -111,6 +131,7 @@ class MonitorRoles extends React.Component {
           onSearchChange: this.onSearchChange,
           isClearable: true,
           singleSelection: false,
+          selectedOptions: roles,
           'data-test-subj': 'rolesComboBox',
         }}
       />

diff --git a/public/pages/CreateMonitor/containers/MonitorSecurity/MonitorSecurity.js b/public/pages/CreateMonitor/containers/MonitorSecurity/MonitorSecurity.js
@@ -30,7 +30,7 @@ class MonitorSecurity extends Component {
     const { isMinimal } = this.props;
     const monitorRoleDisplay = (
       <>
-        <MonitorRoles httpClient={this.props.httpClient} />
+        <MonitorRoles values={this.props.values} httpClient={this.props.httpClient} />
       </>
     );