Notification page throws an error when the user/service mentioned con…

…tains * pattern (AthenZ#1149) Co-authored-by: pgote <[email protected]>
OferLevi85 · Oct 15, 2020 · 95a3bc5 · 95a3bc5
1 parent b9482f7
commit 95a3bc5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/components/pending-approval/PendingApprovalTableRow.js b/ui/src/components/pending-approval/PendingApprovalTableRow.js
@@ -23,6 +23,7 @@ import TextArea from '../denali/TextArea';
 import FlatPicker from '../flatpicker/FlatPicker';
 import Icon from '../denali/icons/Icon';
 import DateUtils from '../utils/DateUtils';
+import NameUtils from '../utils/NameUtils';
 
 const TableTd = styled.td`
     text-align: left;
@@ -109,7 +110,7 @@ export default class PendingApprovalTableRow extends React.Component {
     render() {
         const key =
             this.props.domainName + this.props.memberName + this.props.roleName;
-        const fpkey = key.replace(/\./g, '_');
+        const fpkey = NameUtils.getFlatPickrKey(key);
         let approveColor = this.props.checked
             ? colors.grey500
             : colors.green600;

diff --git a/ui/src/components/role/AddMemberForm.js b/ui/src/components/role/AddMemberForm.js
@@ -21,6 +21,7 @@ import FlatPicker from '../flatpicker/FlatPicker';
 import DateUtils from '../utils/DateUtils';
 import Color from '../denali/Color';
 import RequestUtils from '../utils/RequestUtils';
+import NameUtils from '../utils/NameUtils';
 
 const SectionsDiv = styled.div`
     width: 100%;
@@ -197,7 +198,7 @@ export default class AddMemberForm extends React.Component {
                         <FlatPicker
                             onChange={memberExpiryChanged}
                             clear={this.state.memberExpiry}
-                            id={this.props.role.replace(/\./g, '_')}
+                            id={NameUtils.getFlatPickrKey(this.props.role)}
                         />
                     </FlatPickrInputDiv>
                 </div>
@@ -208,7 +209,7 @@ export default class AddMemberForm extends React.Component {
                             clear={this.state.memberReviewReminder}
                             placeholder='Reminder (Optional)'
                             id={
-                                this.props.role.replace(/\./g, '_') +
+                                NameUtils.getFlatPickrKey(this.props.role) +
                                 '-reminder'
                             }
                         />

diff --git a/ui/src/components/utils/NameUtils.js b/ui/src/components/utils/NameUtils.js
@@ -26,6 +26,10 @@ class NameUtils {
         resource = resource.trim();
         return resource.includes(':') ? resource : `${domainId}:${resource}`;
     }
+
+    static getFlatPickrKey(key) {
+        return key.replace(/\./g, '_').replace(/\W/g, '_');
+    }
 }
 
 export default NameUtils;