feat: Add UI for Start with a Query Flow CLOUDP-311785

[rubydong]

Description

Added ui without functionality for the query flow

active state

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• If this change updates the UI, screenshots/videos are added and a design review is requested
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

Dependents

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[Anemy]

We want the language here to be language="javascript-expression" so that it accepts shell syntax like

{
  _id: ObjectId("66db48fd73f134799d529645")
}

That's the default language of this property of the component so a change we can do is remove this line:

Suggested change

language="json"

We should also remove the initialJSONFoldAll prop then too and update the data-testid to not mention json.

[Anemy]

Do we want to have field autocompletion here? Here's an example of where we do that elsewhere:

compass/packages/compass-query-bar/src/components/option-editor.tsx

Line 265 in 1086d07

completer={completer}

The createQueryAutocompleter function is the one that's useful there.

[Anemy]

Can we move the createQueryAutocompleter into a useMemo? That way we don't re-create the auto completer on each render:

const completer = useMemo(() => createQueryAutocompleter({
  fields: schemaFields,
  serverVersion,
}), [schemaFields, serverVersion]);

[Anemy]

Maybe Show suggested index instead?

Suggested change

	Show me suggested index
	Show suggested index

[Anemy]

We should use the CodemirrorMultilineEditor instead of the Inline Editor here. The inline editor is designed for places like the query bar where the query is typically in one line.

[Anemy]

Having the padding here makes it so that the editor can't be focused when the user clicks on the margin. We should have it so that the padding here is actually in the editor.

It's a bit hacky, but we can do:

const editorStyles = css({
  '& .cm-content': {
    padding: spacing[600]
  }
});

and pass the editorStyles as the className to the CodemirrorMultilineEditor.

[Anemy]

We should show a focus ring when the user is in the editor. It's mostly for accessibility, showing that the user is focused on that element.
We can do that by passing the focus ring classname:

  const focusRingProps = useFocusRing({
    outer: true,
    focusWithin: true,
    hover: true,
  });
  
   {...} 
   
   <div className={focusRingProps.className}>

We do something similar in the option-editor:

compass/packages/compass-query-bar/src/components/option-editor.tsx

Line 126 in 1086d07

const focusRingProps = useFocusRing({