chore(compass-crud): remove less and unused styles from compass-crud (#…

…5019)

packages/compass-components/src/components/icons/document-icon.tsx

@@ -13,7 +13,6 @@ const DocumentIcon: React.FunctionComponent = () => {
 
   return (
     <svg
-      className="document-list-zero-state-graphic"
       width="72"
       height="72"
       viewBox="0 0 72 72"

packages/compass-crud/src/components/document-json-view.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
-import { css, cx, KeylineCard } from '@mongodb-js/compass-components';
+import { css, cx, KeylineCard, spacing } from '@mongodb-js/compass-components';
 
 import type { JSONEditorProps } from './json-editor';
 import JSONEditor from './json-editor';
 import type Document from 'hadron-document';
 
-/**
- * The full document list container class.
- */
-const LIST_CLASS = 'document-json';
+const listStyles = css({
+  listStyle: 'none',
+  position: 'relative',
+  width: '100%',
+});
 
-/**
- * The list item class.
- */
-const LIST_ITEM_CLASS = `${LIST_CLASS}-item`;
+const listItemStyles = css({
+  position: 'relative',
+  marginBottom: spacing[2],
 
-/**
- * The list item test id.
- */
-const LIST_ITEM_TEST_ID = LIST_ITEM_CLASS;
+  '&:last-child': {
+    marginBottom: 0,
+    borderBottom: '0px solid transparent',
+  },
+});
 
 export type DocumentJsonViewProps = {
   docs: Document[];
@@ -54,7 +55,7 @@ class DocumentJsonView extends React.Component<DocumentJsonViewProps> {
   renderDocuments() {
     return this.props.docs.map((doc, i) => {
       return (
-        <li className={LIST_ITEM_CLASS} data-testid={LIST_ITEM_TEST_ID} key={i}>
+        <li className={listItemStyles} data-testid="document-json-item" key={i}>
           <KeylineCard className={keylineCardCSS}>
             <JSONEditor
               key={doc.uuid}
@@ -82,7 +83,7 @@ class DocumentJsonView extends React.Component<DocumentJsonViewProps> {
    */
   render() {
     return (
-      <ol className={cx(LIST_CLASS, this.props.className)}>
+      <ol className={cx(listStyles, this.props.className)}>
         {this.renderDocuments()}
       </ol>
     );

packages/compass-crud/src/components/document-list-view.spec.tsx

@@ -26,7 +26,7 @@ describe('<DocumentListView />', function () {
       );
 
       it('renders all the documents', function () {
-        const wrapper = component.find('.document');
+        const wrapper = component.find('[data-testid="readonly-document"]');
         expect(wrapper).to.have.length(2);
       });
     });

packages/compass-crud/src/components/document-list-view.tsx

@@ -1,26 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { KeylineCard, cx } from '@mongodb-js/compass-components';
+import { KeylineCard, css, cx, spacing } from '@mongodb-js/compass-components';
 
 import type { DocumentProps } from './document';
 import Document from './document';
 import type HadronDocument from 'hadron-document';
 import type { BSONObject } from '../stores/crud-store';
 
-/**
- * The full document list container class.
- */
-const LIST_CLASS = 'document-list';
+const listStyles = css({
+  listStyle: 'none',
+  position: 'relative',
+  width: '100%',
+});
 
-/**
- * The list item class.
- */
-const LIST_ITEM_CLASS = `${LIST_CLASS}-item`;
+const listItemStyles = css({
+  position: 'relative',
+  marginBottom: spacing[1],
 
-/**
- * The list item test id.
- */
-const LIST_ITEM_TEST_ID = LIST_ITEM_CLASS;
+  '&:last-child': {
+    marginBottom: 0,
+    borderBottom: '0 solid transparent',
+  },
+});
 
 export type DocumentListViewProps = {
   docs: (HadronDocument | BSONObject)[];
@@ -52,8 +53,8 @@ class DocumentListView extends React.Component<DocumentListViewProps> {
     return this.props.docs.map((doc, index) => {
       return (
         <li
-          className={LIST_ITEM_CLASS}
-          data-testid={LIST_ITEM_TEST_ID}
+          className={listItemStyles}
+          data-testid="document-list-item"
           key={index}
         >
           <KeylineCard>
@@ -81,7 +82,10 @@ class DocumentListView extends React.Component<DocumentListViewProps> {
    */
   render() {
     return (
-      <ol className={cx(LIST_CLASS, this.props.className)}>
+      <ol
+        className={cx(listStyles, this.props.className)}
+        data-testid="document-list"
+      >
         {this.renderDocuments()}
       </ol>
     );

packages/compass-crud/src/components/document-list.tsx

@@ -31,7 +31,6 @@ import {
   DOCUMENTS_STATUSES_ALL,
 } from '../constants/documents-statuses';
 
-import './index.less';
 import type {
   CrudStore,
   BSONObject,
@@ -54,6 +53,22 @@ const tableStyles = css({
   paddingLeft: spacing[3],
 });
 
+const documentsContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  width: '100%',
+  height: '100%',
+  flexGrow: 1,
+  position: 'relative',
+});
+
+const loaderContainerStyles = css({
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
 export type DocumentListProps = {
   store: CrudStore;
   openInsertDocumentDialog?: (doc: BSONObject, cloned: boolean) => void;
@@ -179,7 +194,7 @@ class DocumentList extends React.Component<DocumentListProps> {
    */
   renderFetching() {
     return (
-      <div className="loader">
+      <div className={loaderContainerStyles}>
         <CancelLoader
           data-testid="fetching-documents"
           progressText="Fetching Documents"
@@ -288,7 +303,7 @@ class DocumentList extends React.Component<DocumentListProps> {
       this.props.status === DOCUMENTS_STATUS_FETCHED_CUSTOM
     ) {
       return (
-        <div className="document-list-zero-state">
+        <div data-testid="document-list-zero-state">
           <EmptyContent
             icon={DocumentIcon}
             title="No results"
@@ -299,7 +314,7 @@ class DocumentList extends React.Component<DocumentListProps> {
     }
 
     return (
-      <div className="document-list-zero-state">
+      <div data-testid="document-list-zero-state">
         <EmptyContent
           icon={DocumentIcon}
           title="This collection has no data"
@@ -329,7 +344,7 @@ class DocumentList extends React.Component<DocumentListProps> {
    */
   render() {
     return (
-      <div className="compass-documents">
+      <div className={documentsContainerStyles}>
         <WorkspaceContainer
           toolbar={
             <CrudToolbar

packages/compass-crud/src/components/editable-document.spec.tsx

@@ -38,12 +38,14 @@ describe('<EditableDocument />', function () {
     });
 
     it('renders the list div', function () {
-      const component = wrapper.find('.document');
+      const component = wrapper.find('[data-testid="editable-document"]');
       (expect(component) as any).to.be.present();
     });
 
     it('renders the base element list', function () {
-      const component = wrapper.find('.document-elements');
+      const component = wrapper.find(
+        '[data-testid="editable-document-elements"]'
+      );
       (expect(component) as any).to.be.present();
     });
 

packages/compass-crud/src/components/editable-document.tsx

@@ -2,36 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import type { Document } from 'hadron-document';
 import HadronDocument from 'hadron-document';
-import { DocumentList } from '@mongodb-js/compass-components';
-import type { CrudActions } from '../stores/crud-store';
+import { DocumentList, css } from '@mongodb-js/compass-components';
 import { withPreferences } from 'compass-preferences-model';
-import { getInsightsForDocument } from '../utils';
-
-/**
- * The base class.
- */
-const BASE = 'document';
 
-/**
- * The contents class.
- */
-const CONTENTS = `${BASE}-contents`;
+import { documentStyles, documentContentStyles } from './readonly-document';
+import { getInsightsForDocument } from '../utils';
+import type { CrudActions } from '../stores/crud-store';
 
-/**
- * The contents class.
- */
-const ELEMENTS = `${BASE}-elements`;
+const documentElementsContainerStyles = css({
+  position: 'relative',
+});
 
 /**
  * The initial field limit.
  */
 const INITIAL_FIELD_LIMIT = 25;
 
-/**
- * The test id.
- */
-const TEST_ID = 'editable-document';
-
 export type EditableDocumentProps = {
   doc: Document;
   expandAll?: boolean;
@@ -192,22 +178,6 @@ class EditableDocument extends React.Component<
     this.setState({ expandAll: !this.state.expandAll });
   }
 
-  /**
-   * Get the current style of the document div.
-   *
-   * @returns {String} The document class name.
-   */
-  style() {
-    let style = BASE;
-    if (this.state.editing) {
-      style = style.concat(' document-is-editing');
-    }
-    if (this.state.deleting) {
-      style = style.concat(' document-is-deleting');
-    }
-    return style;
-  }
-
   /**
    * Render the actions component.
    *
@@ -286,9 +256,14 @@ class EditableDocument extends React.Component<
    */
   render() {
     return (
-      <div className={this.style()} data-testid={TEST_ID}>
-        <div className={CONTENTS}>
-          <div className={ELEMENTS}>{this.renderElements()}</div>
+      <div className={documentStyles} data-testid="editable-document">
+        <div className={documentContentStyles}>
+          <div
+            className={documentElementsContainerStyles}
+            data-testid="editable-document-elements"
+          >
+            {this.renderElements()}
+          </div>
           {this.renderActions()}
         </div>
         {this.renderFooter()}