Visual editor for .quilt/catalog/config.yaml

catalog/CHANGELOG.md

@@ -18,6 +18,7 @@ where verb is one of
 
 ## Changes
 
+- [Added] Visual editor for `.quilt/catalog/config.yaml` ([#4261](https://github.com/quiltdata/quilt/pull/4261))
 - [Added] Admin: Tabulator Settings (open query) ([#4255](https://github.com/quiltdata/quilt/pull/4255))
 - [Added] Visual editor for `quilt_summarize.json` ([#4254](https://github.com/quiltdata/quilt/pull/4254))
 - [Added] Support "html" type in `quilt_summarize.json` ([#4252](https://github.com/quiltdata/quilt/pull/4252))

catalog/app/components/FileEditor/FileEditor.tsx

@@ -18,6 +18,9 @@
 export { detect, isSupportedFileType } from './loader'
 
 const QuiltSummarize = React.lazy(() => import('./QuiltConfigEditor/QuiltSummarize'))
+const BucketPreferences = React.lazy(
+  () => import('./QuiltConfigEditor/BucketPreferences'),
+)
 
 interface EditorProps extends EditorState {
   className: string
@@ -35,7 +38,11 @@
   onChange,
   editing,
 }: EditorProps) {
-  if (editing.brace !== '__quiltConfig' && editing.brace !== '__quiltSummarize') {
+  if (
+    editing.brace !== '__quiltConfig' &&
+    editing.brace !== '__quiltSummarize' &&
+    editing.brace !== '__bucketPreferences'
+  ) {
     loadMode(editing.brace || 'plain_text') // TODO: loaders#typeText.brace
   }
 
@@ -51,6 +58,8 @@
     switch (editing.brace) {
       case '__quiltConfig':
         return <QuiltConfigEditor {...initialProps} handle={handle} />
+      case '__bucketPreferences':
+        return <BucketPreferences {...initialProps} />
       case '__quiltSummarize':
         return <QuiltSummarize {...initialProps} />
       default:
@@ -75,6 +84,8 @@
       switch (editing.brace) {
         case '__quiltConfig':
           return <QuiltConfigEditor {...props} handle={handle} />
+        case '__bucketPreferences':
+          return <BucketPreferences {...props} />
         case '__quiltSummarize':
           return <QuiltSummarize {...props} />
         default:

catalog/app/components/FileEditor/QuiltConfigEditor/BucketPreferences/BucketPreferences.spec.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+import { createMuiTheme } from '@material-ui/core'
+
+import BucketPreferences from './BucketPreferences'
+
+const theme = createMuiTheme()
+const noop = () => {}
+
+jest.mock(
+  'constants/config',
+  jest.fn(() => ({})),
+)
+
+jest.mock(
+  'utils/BucketConfig',
+  jest.fn(() => ({
+    useRelevantBucketConfigs: () => [],
+  })),
+)
+
+jest.mock(
+  '@material-ui/core',
+  jest.fn(() => ({
+    ...jest.requireActual('@material-ui/core'),
+    Checkbox: jest.fn(({ checked }: { checked: boolean }) => (
+      <div id="checkbox">{checked}</div>
+    )),
+    TextField: jest.fn(({ value }: { value: React.ReactNode }) => (
+      <div id="text-field">{value}</div>
+    )),
+    Select: jest.fn(({ options, value }: { options?: string[]; value: string }) => (
+      <div id="select">
+        {value} from [{options?.join(', ')}]
+      </div>
+    )),
+    makeStyles: jest.fn((cb: any) => () => {
+      const classes = typeof cb === 'function' ? cb(theme) : cb
+      return Object.keys(classes).reduce(
+        (acc, key) => ({
+          [key]: key,
+          ...acc,
+        }),
+        {},
+      )
+    }),
+  })),
+)
+
+jest.mock(
+  '@material-ui/lab',
+  jest.fn(() => ({
+    ...jest.requireActual('@material-ui/core'),
+    Autocomplete: jest.fn(({ options, value }: { options?: string[]; value: string }) => (
+      <div id="autocomplete">
+        {value} from [{options?.join(', ')}]
+      </div>
+    )),
+  })),
+)
+
+describe('components/FileEditor/QuiltConfigEditor/BucketPreferences/BucketPreferences', () => {
+  it('render form with default values', () => {
+    const tree = renderer
+      .create(<BucketPreferences className="root" error={null} onChange={noop} />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})