feat(bulk-update): render document count and restyle query preview (#5140)

* handle doc count and style filter preview

* fix font family

* focus on right element, align filter

* fix tests

* fix use id

* remove disabled true

Author: mcasimir

packages/compass-crud/src/components/bulk-delete-modal.spec.tsx

@@ -69,7 +69,9 @@ describe('BulkDeleteModal Component', function () {
 
   it('shows the provided query', function () {
     renderBulkDeleteModal({ filterQuery: '{ a: 1 }' });
-    expect(screen.queryByDisplayValue('{ a: 1 }')).to.be.visible;
+    expect(screen.getByTestId('readonly-filter').textContent).to.equal(
+      '{ a: 1 }'
+    );
   });
 
   it('closes the modal when cancelled', function () {

packages/compass-crud/src/components/bulk-delete-modal.tsx

@@ -10,6 +10,7 @@ import {
   css,
   cx,
   spacing,
+  useId,
 } from '@mongodb-js/compass-components';
 import { ReadonlyFilter } from './readonly-filter';
 import ReadonlyDocument from './readonly-document';
@@ -87,8 +88,14 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
     </div>
   );
 
+  const exportButtonId = useId();
   return (
-    <Modal setOpen={onCancel} open={open} data-testid="bulk-delete-modal">
+    <Modal
+      initialFocus={`#${exportButtonId}`}
+      setOpen={onCancel}
+      open={open}
+      data-testid="bulk-delete-modal"
+    >
       <ModalHeader
         title={`Delete ${documentCount ?? ''} document${
           documentCount === 1 ? '' : 's'
@@ -106,6 +113,7 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
             leftGlyph={<Icon glyph="Code" />}
             onClick={onExportToLanguage}
             data-testid="export-button"
+            id={exportButtonId}
           >
             Export
           </Button>

packages/compass-crud/src/components/bulk-update-dialog.spec.tsx

@@ -45,10 +45,14 @@ describe('BulkUpdateDialog Component', function () {
   it('renders if open', function () {
     renderBulkUpdateDialog({ count: 42 });
 
+    expect(screen.getByTestId('modal-title').textContent).to.equal(
+      'Update 42 documents'
+    );
+
     // filter
-    expect(
-      screen.getByTestId('readonly-filter').getAttribute('value')
-    ).to.equal('{\n a: 1\n}');
+    expect(screen.getByTestId('readonly-filter').textContent).to.equal(
+      '{\n a: 1\n}'
+    );
 
     // update
     expect(screen.getByTestId('bulk-update-update').textContent).to.match(
@@ -66,13 +70,22 @@ describe('BulkUpdateDialog Component', function () {
       .exist;
   });
 
-  it('renders with count=undefined', function () {
+  it('hides document count if count is N/A', function () {
     renderBulkUpdateDialog({ count: undefined });
+
+    expect(screen.getByTestId('modal-title').textContent).to.equal(
+      'Update documents'
+    );
+
     expect(screen.getByRole('button', { name: 'Update documents' })).to.exist;
   });
 
-  it('renders with count=1', function () {
+  it('use singular if count is 1', function () {
     renderBulkUpdateDialog({ count: 1 });
+    expect(screen.getByTestId('modal-title').textContent).to.equal(
+      'Update 1 document'
+    );
+
     expect(screen.getByRole('button', { name: 'Update 1 document' })).to.exist;
   });
 

packages/compass-crud/src/components/bulk-update-dialog.tsx

@@ -23,6 +23,7 @@ import {
   Icon,
   InteractivePopover,
   TextInput,
+  useId,
 } from '@mongodb-js/compass-components';
 import type { Annotation } from '@mongodb-js/compass-editor';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
@@ -293,17 +294,28 @@ export default function BulkUpdateDialog({
     }
   }, [isOpen, wasOpen, updateText]);
 
+  const modalTitleAndButtonText = useMemo(() => {
+    if (typeof count !== 'number') {
+      return 'Update documents';
+    }
+
+    if (count === 1) {
+      return `Update 1 document`;
+    }
+
+    return `Update ${count} documents`;
+  }, [count]);
+
+  const bulkUpdateUpdateId = useId();
   return (
     <Modal
       open={isOpen}
       setOpen={closeBulkUpdateDialog}
       size="large"
       data-testid="bulk-update-dialog"
+      initialFocus={`#${bulkUpdateUpdateId} .cm-content`}
     >
-      <ModalHeader
-        title={`Update ${count ?? ''} document${count === 1 ? '' : 's'}`}
-        subtitle={ns}
-      />
+      <ModalHeader title={modalTitleAndButtonText} subtitle={ns} />
       <ModalBody>
         <div className={columnsStyles}>
           <div className={queryStyles}>
@@ -315,9 +327,12 @@ export default function BulkUpdateDialog({
             </div>
 
             <div className={cx(queryFieldStyles, updateFieldStyles)}>
-              <Label htmlFor="bulk-update-update">Update</Label>
+              <Label htmlFor={bulkUpdateUpdateId}>Update</Label>
               <Description className={descriptionStyles}>
-                <Link href="https://www.mongodb.com/docs/manual/reference/method/db.collection.updateMany/#std-label-update-many-update">
+                <Link
+                  tabIndex={0}
+                  href="https://www.mongodb.com/docs/manual/reference/method/db.collection.updateMany/#std-label-update-many-update"
+                >
                   Learn more about Update syntax
                 </Link>
               </Description>
@@ -331,7 +346,7 @@ export default function BulkUpdateDialog({
                 <CodemirrorMultilineEditor
                   text={text}
                   onChangeText={onChangeText}
-                  id="bulk-update-update"
+                  id={bulkUpdateUpdateId}
                   data-testid="bulk-update-update"
                   onBlur={() => ({})}
                   annotations={annotations}
@@ -398,7 +413,7 @@ export default function BulkUpdateDialog({
             onClick={runBulkUpdate}
             data-testid="update-button"
           >
-            Update {count ?? ''} document{count === 1 ? '' : 's'}
+            {modalTitleAndButtonText}
           </Button>
         </div>
       </ModalFooter>

packages/compass-crud/src/components/readonly-filter.tsx

@@ -1,43 +1,37 @@
 import React from 'react';
 
 import {
-  TextInput,
   InfoSprinkle,
   Label,
   css,
   spacing,
+  KeylineCard,
   fontFamilies,
+  useId,
 } from '@mongodb-js/compass-components';
 
-type QueryLabelProps = {
-  tooltip: string;
-  label: string;
-};
-
 const queryLabelStyles = css({
   display: 'flex',
   gap: spacing[2],
   alignItems: 'center',
-  height: '17px', // align with the Preview label
 });
 
-const QueryLabel: React.FunctionComponent<QueryLabelProps> = ({
-  tooltip,
-  label,
-}) => {
-  return (
-    <div className={queryLabelStyles}>
-      <Label htmlFor="readonly-filter">{label}</Label>
-      <InfoSprinkle align="right">{tooltip}</InfoSprinkle>
-    </div>
-  );
-};
-
-const textInputStyles = css({
-  input: {
-    fontFamily: fontFamilies.code,
-  },
+const readOnlyFilterStyles = css({
+  padding: spacing[2],
+  overflow: 'scroll',
   width: '100%',
+  whiteSpace: 'nowrap',
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  lineHeight: `${spacing[3] + 2}px`,
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+});
+
+const codeStyles = css({
+  fontSize: 14,
+  fontFamily: fontFamilies.code,
 });
 
 type ReadonlyFilterProps = {
@@ -49,21 +43,22 @@ export function ReadonlyFilter({
   queryLabel,
   filterQuery,
 }: ReadonlyFilterProps) {
+  const readOnlyFilterId = useId();
   return (
-    <TextInput
-      id="readonly-filter"
-      data-testid="readonly-filter"
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore the label can be any component, but it's weirdly typed to string
-      label={
-        <QueryLabel
-          label={queryLabel}
-          tooltip="Return to the Documents tab to edit this query."
-        />
-      }
-      disabled={true}
-      value={filterQuery}
-      className={textInputStyles}
-    />
+    <>
+      <div className={queryLabelStyles}>
+        <Label htmlFor={readOnlyFilterId}>{queryLabel}</Label>
+        <InfoSprinkle align="right">
+          Return to the Documents tab to edit this query.
+        </InfoSprinkle>
+      </div>
+      <KeylineCard
+        id={readOnlyFilterId}
+        data-testid="readonly-filter"
+        className={readOnlyFilterStyles}
+      >
+        <code className={codeStyles}>{filterQuery}</code>
+      </KeylineCard>
+    </>
   );
 }