chore(field-store): replace fields-changed events with useFields hooks …

…COMPASS-7562 (#5304)

* chore(field-store): add useAutocompleteFields and useFieldsSchema hooks to replace field store fields-changed event

* chore(aggregations): replace fields store slice and event subscription with a hook

* chore(crud): replace fields store slice and event subscription with a hook

* chore(indexes): replace fields store slice and event subscription with a hook

* chore(query-bar): replace fields store slice and event subscription with a hook

* chore(schema-validation): replace fields store slice and event subscription with a hook

* chore(aggregations): pass namespace to the list

* fix(indexes): filter out _id field from autocomplete fields

packages/compass-aggregations/package.json

@@ -43,6 +43,7 @@
     "@mongodb-js/compass-components": "^1.21.1",
     "@mongodb-js/compass-crud": "^13.23.1",
     "@mongodb-js/compass-editor": "^0.20.1",
+    "@mongodb-js/compass-field-store": "^9.0.14",
     "@mongodb-js/compass-generative-ai": "^0.7.1",
     "@mongodb-js/compass-logging": "^1.2.10",
     "@mongodb-js/compass-utils": "^0.5.9",
@@ -109,6 +110,7 @@
     "@mongodb-js/compass-components": "^1.21.1",
     "@mongodb-js/compass-crud": "^13.23.1",
     "@mongodb-js/compass-editor": "^0.20.1",
+    "@mongodb-js/compass-field-store": "^9.0.14",
     "@mongodb-js/compass-generative-ai": "^0.7.1",
     "@mongodb-js/compass-logging": "^1.2.10",
     "@mongodb-js/compass-utils": "^0.5.9",

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.spec.tsx

@@ -16,11 +16,11 @@ const renderPipelineEditor = (
   render(
     <Provider store={configureStore()}>
       <PipelineEditor
+        namespace="test.test"
         pipelineText="[{$match: {}}]"
         syntaxErrors={[]}
         serverError={null}
         serverVersion="4.2"
-        fields={[]}
         onChangePipelineText={() => {}}
         num_stages={1}
         {...props}

packages/compass-aggregations/src/components/pipeline-builder-workspace/pipeline-as-text-workspace/pipeline-editor.tsx

@@ -19,6 +19,7 @@ import type { MongoServerError } from 'mongodb';
 import { changeEditorValue } from '../../../modules/pipeline-builder/text-editor-pipeline';
 import type { PipelineParserError } from '../../../modules/pipeline-builder/pipeline-parser/utils';
 import { useLoggerAndTelemetry } from '@mongodb-js/compass-logging/provider';
+import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
 
 const containerStyles = css({
   position: 'relative',
@@ -58,24 +59,25 @@ const errorContainerStyles = css({
 });
 
 export type PipelineEditorProps = {
+  namespace: string;
   num_stages: number;
   pipelineText: string;
   syntaxErrors: PipelineParserError[];
   serverError: MongoServerError | null;
   serverVersion: string;
-  fields: { name: string }[];
   onChangePipelineText: (value: string) => void;
 };
 
 export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
+  namespace,
   num_stages,
   pipelineText,
   serverError,
   syntaxErrors,
   serverVersion,
-  fields,
   onChangePipelineText,
 }) => {
+  const fields = useAutocompleteFields(namespace);
   const { track } = useLoggerAndTelemetry('COMPASS-AGGREGATIONS-UI');
   const editorInitialValueRef = useRef<string>(pipelineText);
   const editorCurrentValueRef = useRef<string>(pipelineText);
@@ -158,6 +160,7 @@ export const PipelineEditor: React.FunctionComponent<PipelineEditorProps> = ({
 };
 
 const mapState = ({
+  namespace,
   pipelineBuilder: {
     textEditor: {
       pipeline: {
@@ -170,14 +173,13 @@ const mapState = ({
     },
   },
   serverVersion,
-  fields,
 }: RootState) => ({
+  namespace,
   num_stages: pipeline.length,
   pipelineText,
   serverError: pipelineServerError ?? outputStageServerError,
   syntaxErrors,
   serverVersion,
-  fields,
 });
 
 const mapDispatch = {

packages/compass-aggregations/src/components/pipeline-results-workspace/index.spec.tsx

@@ -15,6 +15,7 @@ const renderPipelineResultsWorkspace = (
   render(
     <Provider store={configureStore()}>
       <PipelineResultsWorkspace
+        namespace="test.test"
         documents={[]}
         isLoading={false}
         isError={false}

packages/compass-aggregations/src/components/pipeline-results-workspace/index.tsx

@@ -98,6 +98,7 @@ const OutResultBanner: React.FunctionComponent<{
 };
 
 type PipelineResultsWorkspaceProps = {
+  namespace: string;
   documents: HadronDocument[];
   isLoading?: boolean;
   isError?: boolean;
@@ -114,6 +115,7 @@ type PipelineResultsWorkspaceProps = {
 export const PipelineResultsWorkspace: React.FunctionComponent<
   PipelineResultsWorkspaceProps
 > = ({
+  namespace,
   documents,
   isLoading,
   error,
@@ -175,7 +177,11 @@ export const PipelineResultsWorkspace: React.FunctionComponent<
     results = <PipelineEmptyResults />;
   } else {
     results = (
-      <PipelineResultsList documents={documents} view={resultsViewType} />
+      <PipelineResultsList
+        namespace={namespace}
+        documents={documents}
+        view={resultsViewType}
+      />
     );
   }
 
@@ -195,6 +201,7 @@ const mapState = (state: RootState) => {
   const stageOperator = getStageOperator(lastStage) ?? '';
 
   return {
+    namespace,
     documents,
     isLoading: loading,
     error,

packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-list.spec.tsx

@@ -7,7 +7,13 @@ import PipelineResultsList from './pipeline-results-list';
 
 describe('PipelineResultsList', function () {
   it('does not render when documents are empty', function () {
-    render(<PipelineResultsList documents={[]} view="document" />);
+    render(
+      <PipelineResultsList
+        namespace="test.test"
+        documents={[]}
+        view="document"
+      />
+    );
     expect(() => {
       screen.getByTestId('document-list-item');
     }).to.throw;
@@ -16,6 +22,7 @@ describe('PipelineResultsList', function () {
   it('renders list view', function () {
     render(
       <PipelineResultsList
+        namespace="test.test"
         documents={[
           new HadronDocument({ id: 1 }),
           new HadronDocument({ id: 2 }),
@@ -31,6 +38,7 @@ describe('PipelineResultsList', function () {
   it('renders json view', function () {
     render(
       <PipelineResultsList
+        namespace="test.test"
         documents={[
           new HadronDocument({ id: 3 }),
           new HadronDocument({ id: 4 }),

packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-list.tsx

@@ -10,9 +10,10 @@ const containerStyles = css({
 });
 
 const PipelineResultsList: React.FunctionComponent<{
+  namespace: string;
   documents: HadronDocument[];
   view: ResultsViewType;
-}> = ({ documents, view }) => {
+}> = ({ namespace, documents, view }) => {
   const copyToClipboard = useCallback((doc: HadronDocument) => {
     const str = doc.toEJSON();
     void navigator.clipboard.writeText(str);
@@ -27,6 +28,7 @@ const PipelineResultsList: React.FunctionComponent<{
 
   return (
     <DocumentView
+      namespace={namespace}
       isEditable={false}
       docs={documents}
       copyToClipboard={copyToClipboard}