chore: factor out the readonly input used in Bulk Update and Bulk Del…

…ete modals COMPASS-7387 (#5048) * factor out the readonly input used in Bulk Update and Bulk Delete modals * update test id
mongodb-js · Nov 2, 2023 · 9772128 · 9772128
1 parent 7891970
commit 9772128
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-crud/src/components/bulk-delete-modal.tsx b/packages/compass-crud/src/components/bulk-delete-modal.tsx
@@ -5,14 +5,12 @@ import {
   ModalBody,
   ModalFooter,
   Button,
-  TextInput,
   KeylineCard,
   css,
   cx,
   spacing,
-  InfoSprinkle,
-  Label,
 } from '@mongodb-js/compass-components';
+import { ReadonlyFilter } from './readonly-filter';
 import ReadonlyDocument from './readonly-document';
 
 const modalFooterSpacingStyles = css({
@@ -60,29 +58,6 @@ const previewStyles = css({
   minHeight: '200px',
 });
 
-type QueryLabelProps = {
-  tooltip: string;
-  label: string;
-};
-
-const queryLabelStyles = css({
-  display: 'flex',
-  gap: spacing[2],
-  alignItems: 'center',
-});
-
-const QueryLabel: React.FunctionComponent<QueryLabelProps> = ({
-  tooltip,
-  label,
-}) => {
-  return (
-    <div className={queryLabelStyles}>
-      <Label htmlFor="template-dropdown">{label}</Label>
-      <InfoSprinkle align="right">{tooltip}</InfoSprinkle>
-    </div>
-  );
-};
-
 type BulkDeleteModalProps = {
   open: boolean;
   documentCount: number;
@@ -127,18 +102,7 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
         variant={'danger'}
       />
       <ModalBody variant={'danger'} className={modalBodySpacingStyles}>
-        <TextInput
-          // 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="Query"
-              tooltip="Return to the Documents tab to edit this query."
-            />
-          }
-          disabled={true}
-          value={filterQuery}
-        />
+        <ReadonlyFilter queryLabel="Query" filterQuery={filterQuery} />
         <div>
           <b>Preview (sample of {sampleDocuments.length} documents)</b>
           {preview}

diff --git a/packages/compass-crud/src/components/bulk-update-dialog.spec.tsx b/packages/compass-crud/src/components/bulk-update-dialog.spec.tsx
@@ -46,7 +46,7 @@ describe('BulkUpdateDialog Component', function () {
 
     // filter
     expect(
-      screen.getByTestId('bulk-update-filter').getAttribute('value')
+      screen.getByTestId('readonly-filter').getAttribute('value')
     ).to.equal('{\n a: 1\n}');
 
     // update

diff --git a/packages/compass-crud/src/components/bulk-update-dialog.tsx b/packages/compass-crud/src/components/bulk-update-dialog.tsx
@@ -1,9 +1,7 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import Document from './document';
+import type { UpdatePreview } from 'mongodb-data-service';
 import HadronDocument from 'hadron-document';
-
 import { toJSString } from 'mongodb-query-parser';
-
 import {
   FormModal,
   css,
@@ -16,17 +14,16 @@ import {
   KeylineCard,
   Description,
   Link,
-  InfoSprinkle,
   useDarkMode,
-  TextInput,
   usePrevious,
 } from '@mongodb-js/compass-components';
-
 import type { Annotation } from '@mongodb-js/compass-editor';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 
+import Document from './document';
 import type { BSONObject } from '../stores/crud-store';
-import type { UpdatePreview } from 'mongodb-data-service';
+
+import { ReadonlyFilter } from './readonly-filter';
 
 const columnsStyles = css({
   marginTop: spacing[4],
@@ -124,30 +121,6 @@ export type BulkUpdateDialogProps = {
   runBulkUpdate: () => void;
 };
 
-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="template-dropdown">{label}</Label>
-      <InfoSprinkle align="right">{tooltip}</InfoSprinkle>
-    </div>
-  );
-};
-
 export default function BulkUpdateDialog({
   isOpen,
   ns,
@@ -219,18 +192,9 @@ export default function BulkUpdateDialog({
       <div className={columnsStyles}>
         <div className={queryStyles}>
           <div className={queryFieldStyles}>
-            <TextInput
-              data-testid="bulk-update-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="Filter"
-                  tooltip="Return to the Documents tab to edit this query."
-                />
-              }
-              disabled={true}
-              value={toJSString(filter) ?? ''}
+            <ReadonlyFilter
+              queryLabel="Filter"
+              filterQuery={toJSString(filter) ?? ''}
             />
           </div>
 

diff --git a/packages/compass-crud/src/components/readonly-filter.tsx b/packages/compass-crud/src/components/readonly-filter.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import {
+  TextInput,
+  InfoSprinkle,
+  Label,
+  css,
+  spacing,
+  fontFamilies,
+} 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,
+  },
+});
+
+type ReadonlyFilterProps = {
+  queryLabel: string;
+  filterQuery: string;
+};
+
+export function ReadonlyFilter({
+  queryLabel,
+  filterQuery,
+}: ReadonlyFilterProps) {
+  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}
+    />
+  );
+}