Admin bucket page long query config (redesign)

.github/workflows/deploy-catalog.yaml

@@ -5,6 +5,7 @@ on:
     branches:
       - master
       - admin-bucket-page-long-query-config
+      - admin-bucket-page-long-query-config-redesign
     paths:
       - '.github/workflows/deploy-catalog.yaml'
       - 'catalog/**'

catalog/app/components/FileEditor/TextEditor.tsx

@@ -2,7 +2,6 @@ import * as brace from 'brace'
 import cx from 'classnames'
 import * as React from 'react'
 import * as M from '@material-ui/core'
-import * as Lab from '@material-ui/lab'
 
 import Lock from 'components/Lock'
 
@@ -12,16 +11,26 @@ import 'brace/theme/eclipse'
 
 const useEditorTextStyles = M.makeStyles((t) => ({
   root: {
-    border: `1px solid ${t.palette.divider}`,
+    display: 'flex',
+    flexDirection: 'column',
     position: 'relative',
     width: '100%',
   },
   editor: {
-    height: '100%',
+    border: `1px solid ${t.palette.divider}`,
+    flexGrow: 1,
     resize: 'vertical',
   },
   error: {
-    marginTop: t.spacing(1),
+    '& $editor': {
+      borderColor: t.palette.error.main,
+    },
+    '& $helperText': {
+      color: t.palette.error.main,
+    },
+  },
+  helperText: {
+    marginTop: t.spacing(0.5),
   },
 }))
 
@@ -63,7 +72,7 @@ export default function TextEditor({
     editor.setValue(initialValue, -1)
     if (leadingChange) {
       // Initially fill the value in the parent component.
-      // TODO: Re-design fetching data, so leading onChange wan't be necessary
+      // TODO: Re-design fetching data, so leading onChange won't be necessary
       //       probably, by putting data fetch into FileEditor/State
       onChange(editor.getValue())
       editor.focus()
@@ -77,12 +86,12 @@ export default function TextEditor({
   }, [leadingChange, onChange, ref, type.brace, initialValue])
 
   return (
-    <div className={cx(classes.root, className)}>
+    <div className={cx(classes.root, className, { [classes.error]: !!error })}>
       <div className={classes.editor} ref={ref} />
       {error && (
-        <Lab.Alert severity="error" className={classes.error} variant="outlined">
+        <M.Typography className={classes.helperText} variant="body2">
           {error.message}
-        </Lab.Alert>
+        </M.Typography>
       )}
       {disabled && <Lock />}
     </div>