fixup: use Banner for EFC errors

mongodb-js · Mar 30, 2022 · 7292c5d · 7292c5d
1 parent 0526509
commit 7292c5d
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/...tion-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx b/...tion-form/src/components/advanced-options-tabs/csfle-tab/encrypted-field-config-input.tsx
@@ -4,14 +4,19 @@ import {
   encryptedFieldConfigToText,
   textToEncryptedFieldConfig,
 } from '../../../utils/csfle-handler';
-import { Label } from '@mongodb-js/compass-components';
+import { Label, Banner, css, spacing } from '@mongodb-js/compass-components';
 
 import 'ace-builds';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'mongodb-ace-mode';
 import 'mongodb-ace-theme';
 
+const errorContainerStyles = css({
+  padding: spacing[3],
+  width: '100%',
+});
+
 /**
  * Options for the ACE editor.
  */
@@ -62,8 +67,10 @@ function EncryptedFieldConfigInput({
         setOptions={OPTIONS}
       />
       {
-        /* TODO: proper error message display! */ errorMessage && (
-          <div>{errorMessage}</div>
+        errorMessage && (
+          <div className={errorContainerStyles}>
+            <Banner variant="danger">{errorMessage}</Banner>
+          </div>
         )
       }
     </div>