chore(compass-import-export): update styles, file error message, checkbox and radio-box-group deps (#4356)

Author: Anemy

package-lock.json

@@ -38,7 +38,7 @@
     "@leafygreen-ui/banner": "^7.0.1",
     "@leafygreen-ui/button": "^19.0.3",
     "@leafygreen-ui/card": "^9.0.2",
-    "@leafygreen-ui/checkbox": "^12.0.2",
+    "@leafygreen-ui/checkbox": "^12.0.8",
     "@leafygreen-ui/code": "^14.1.0",
     "@leafygreen-ui/confirmation-modal": "^4.0.1",
     "@leafygreen-ui/emotion": "^4.0.3",
@@ -57,7 +57,7 @@
     "@leafygreen-ui/pipeline": "^5.0.1",
     "@leafygreen-ui/popover": "^11.0.1",
     "@leafygreen-ui/portal": "^4.0.7",
-    "@leafygreen-ui/radio-box-group": "^12.0.1",
+    "@leafygreen-ui/radio-box-group": "^12.0.5",
     "@leafygreen-ui/radio-group": "^10.1.1",
     "@leafygreen-ui/segmented-control": "^7.0.0",
     "@leafygreen-ui/select": "^10.1.0",

packages/compass-components/package.json

@@ -25,7 +25,6 @@ const containerStyles = css({
 
 const formItemSmallStyles = css({
   display: 'flex',
-  flexFirection: 'row',
   alignItems: 'center',
   gap: spacing[1],
 });
@@ -48,6 +47,7 @@ const buttonSmallStyles = css({
   border: 'none',
   background: 'none',
   fontWeight: 'normal',
+  marginLeft: spacing[2],
 
   '&:hover': {
     background: 'none',

packages/compass-components/src/components/file-input.tsx

@@ -278,7 +278,7 @@ class InsertDocumentDialog extends React.PureComponent<
     return (
       <FormModal
         title="Insert Document"
-        subtitle={`To Collection ${this.props.ns}`}
+        subtitle={`To collection ${this.props.ns}`}
         className="insert-document-dialog"
         open={this.props.isOpen}
         onSubmit={this.handleInsert.bind(this)}

packages/compass-crud/src/components/insert-document-dialog.tsx

@@ -96,7 +96,7 @@ describe('Collection export', function () {
       expect(await exportModalQueryTextElement.getText()).to
         .equal(`db.getCollection('numbers').find(
   {i: 5},
-  {i: true,j: true,_id: false}
+  {i: 1,j: 1,_id: 0}
 )`);
 
       // Select CSV.
@@ -362,7 +362,7 @@ describe('Collection export', function () {
       expect(await exportModalQueryTextElement.getText()).to
         .equal(`db.getCollection('numbers').find(
   {i: 5},
-  {i: true,j: true,_id: false}
+  {i: 1,j: 1,_id: 0}
 )`);
 
       // Leave the file type on the default (JSON).
@@ -905,7 +905,7 @@ describe('Collection export', function () {
       expect(await exportModalQueryTextElement.getText()).to
         .equal(`db.getCollection('numbers-strings').find(
   {},
-  {iString: true,j: true,_id: false}
+  {iString: 1,j: 1,_id: 0}
 ).collation(
   {locale: 'en_US',numericOrdering: true}
 ).sort({iString: -1}).limit(2).skip(2)`);
@@ -996,7 +996,7 @@ describe('Collection export', function () {
       expect(await exportModalQueryTextElement.getText()).to
         .equal(`db.getCollection('numbers-strings').find(
   {},
-  {iString: true,j: true,_id: false}
+  {iString: 1,j: 1,_id: 0}
 ).collation(
   {locale: 'en_US',numericOrdering: true}
 ).sort({iString: -1}).limit(2).skip(2)`);

packages/compass-e2e-tests/tests/collection-export.test.ts

@@ -67,8 +67,8 @@ describe('ExportCodeView [Component]', function () {
       const codeText = screen.getByTestId(
         'export-collection-code-preview-wrapper'
       ).textContent;
-      expect(codeText).to.include('name: true');
-      expect(codeText).to.not.include('test: true');
+      expect(codeText).to.include('name: 1');
+      expect(codeText).to.not.include('test: 1');
     });
   });
 });

packages/compass-import-export/src/components/export-code-view.spec.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   Accordion,
+  Banner,
   Link,
   Radio,
   RadioGroup,
@@ -9,13 +10,12 @@ import {
 } from '@mongodb-js/compass-components';
 
 import type { ExportJSONFormat } from '../export/export-json';
-import { Banner } from '@mongodb-js/compass-components';
 
 const radioGroupStyles = css({
   margin: `${spacing[3]}px 0`,
 });
 
-const bannerStyles = css({
+const bannerContainerStyles = css({
   margin: `${spacing[2]}px 0`,
 });
 
@@ -26,6 +26,14 @@ function JSONFileTypeOptions({
   jsonFormat: ExportJSONFormat;
   setJSONFormatVariant: (jsonFormatVariant: ExportJSONFormat) => void;
 }) {
+  const relaxedWarningBannerContainerRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    // When the user selects relaxed we scroll to show the warning at the bottom.
+    if (jsonFormat === 'relaxed') {
+      relaxedWarningBannerContainerRef.current?.scrollIntoView();
+    }
+  }, [jsonFormat]);
+
   return (
     <Accordion
       text="Advanced JSON Format"
@@ -68,12 +76,17 @@ function JSONFileTypeOptions({
       >
         Learn more about JSON format
       </Link>
-      {jsonFormat === 'relaxed' && (
-        <Banner className={bannerStyles} variant="warning">
-          Large numbers (&gt;= 2^^53) will lose precision with the relaxed EJSON
-          format. This format is not recommended for data integrity.
-        </Banner>
-      )}
+      <div
+        className={bannerContainerStyles}
+        ref={relaxedWarningBannerContainerRef}
+      >
+        {jsonFormat === 'relaxed' && (
+          <Banner variant="warning">
+            Large numbers (&gt;= 2^^53) will lose precision with the relaxed
+            EJSON format. This format is not recommended for data integrity.
+          </Banner>
+        )}
+      </div>
     </Accordion>
   );
 }