mongodb-js · mabaasit · Sep 27, 2024 · Sep 23, 2024 · Sep 23, 2024 · Sep 23, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-global-writes/package.json b/packages/compass-global-writes/package.json
@@ -53,10 +53,13 @@
     "@mongodb-js/compass-collection": "^4.41.0",
     "@mongodb-js/compass-components": "^1.29.4",
     "@mongodb-js/compass-connections": "^1.42.0",
+    "@mongodb-js/compass-field-store": "^9.17.0",
     "@mongodb-js/compass-logging": "^1.4.7",
     "@mongodb-js/compass-telemetry": "^1.1.7",
     "hadron-app-registry": "^9.2.6",
+    "mongodb-ns": "^2.4.2",
     "react": "^17.0.2",
+    "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2"
   },

diff --git a/packages/compass-global-writes/src/components/index.spec.tsx b/packages/compass-global-writes/src/components/index.spec.tsx
@@ -1,12 +1,29 @@
 import React from 'react';
 import { expect } from 'chai';
-import { render, screen } from '@mongodb-js/testing-library-compass';
+import { screen } from '@mongodb-js/testing-library-compass';
 import { GlobalWrites } from './index';
+import { renderWithStore } from './../../tests/create-store';
 
 describe('Compass GlobalWrites Plugin', function () {
-  it('renders a Plugin', function () {
-    render(<GlobalWrites />);
-    expect(screen.getByText('This feature is currently in development.')).to
-      .exist;
+  it('renders plugin in NOT_READY state', function () {
+    renderWithStore(<GlobalWrites shardingStatus={'NOT_READY'} />);
+    expect(screen.getByText(/loading/i)).to.exist;
+  });
+
+  it('renders plugin in UNSHARDED state', function () {
+    renderWithStore(<GlobalWrites shardingStatus={'UNSHARDED'} />);
+    expect(screen.getByTestId('shard-collection-button')).to.exist;
+  });
+
+  it('renders plugin in SUBMITTING_FOR_SHARDING state', function () {
+    renderWithStore(
+      <GlobalWrites shardingStatus={'SUBMITTING_FOR_SHARDING'} />
+    );
+    expect(screen.getByTestId('shard-collection-button')).to.exist;
+  });
+
+  it('renders plugin in SHARDING state', function () {
+    renderWithStore(<GlobalWrites shardingStatus={'SHARDING'} />);
+    expect(screen.getByText(/sharding your collection/i)).to.exist;
   });
 });
diff --git a/packages/compass-global-writes/src/components/index.tsx b/packages/compass-global-writes/src/components/index.tsx
@@ -1,34 +1,75 @@
+import React from 'react';
+import { connect } from 'react-redux';
 import {
   css,
   spacing,
   WorkspaceContainer,
-  Body,
+  SpinLoaderWithLabel,
 } from '@mongodb-js/compass-components';
-import React from 'react';
+import type { RootState, ShardingStatus } from '../store/reducer';
+import { ShardingStatuses } from '../store/reducer';
+import UnshardedState from './states/unsharded';
+import ShardingState from './states/sharding';
 
 const containerStyles = css({
-  paddingLeft: spacing[3],
-  paddingRight: spacing[3],
+  paddingLeft: spacing[400],
+  paddingRight: spacing[400],
   display: 'flex',
   width: '100%',
   height: '100%',
 });
 
+const workspaceContentStyles = css({
+  paddingTop: spacing[400],
+});
+
 const centeredContent = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   height: '100%',
 });
 
-export function GlobalWrites() {
+type GlobalWritesProps = {
+  shardingStatus: ShardingStatus;
+};
+
+function ShardingStateView({
+  shardingStatus,
+}: {
+  shardingStatus: ShardingStatus;
+}) {
+  if (shardingStatus === ShardingStatuses.NOT_READY) {
+    return (
+      <div className={centeredContent}>
+        <SpinLoaderWithLabel progressText="Loading …" />
+      </div>
+    );
+  }
+
+  if (
+    shardingStatus === ShardingStatuses.UNSHARDED ||
+    shardingStatus === ShardingStatuses.SUBMITTING_FOR_SHARDING
+  ) {
+    return <UnshardedState />;
+  }
+
+  if (shardingStatus === ShardingStatuses.SHARDING) {
+    return <ShardingState />;
+  }
+
+  return null;
+}
+
+export function GlobalWrites({ shardingStatus }: GlobalWritesProps) {
   return (
     <div className={containerStyles}>
-      <WorkspaceContainer>
-        <Body className={centeredContent}>
-          This feature is currently in development.
-        </Body>
+      <WorkspaceContainer className={workspaceContentStyles}>
+        <ShardingStateView shardingStatus={shardingStatus} />
       </WorkspaceContainer>
     </div>
   );
 }
+export default connect((state: RootState) => ({
+  shardingStatus: state.status,
+}))(GlobalWrites);
diff --git a/packages/compass-global-writes/src/components/states/sharding.spec.tsx b/packages/compass-global-writes/src/components/states/sharding.spec.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { expect } from 'chai';
+import { screen } from '@mongodb-js/testing-library-compass';
+import { ShardingState } from './sharding';
+import { renderWithStore } from '../../../tests/create-store';
+
+function renderWithProps(
+  props?: Partial<React.ComponentProps<typeof ShardingState>>
+) {
+  return renderWithStore(<ShardingState {...props} />);
+}
+
+describe('Sharding', function () {
+  it('renders the info banner', function () {
+    renderWithProps();
+    expect(screen.getByRole('alert')).to.exist;
+  });
+});
diff --git a/packages/compass-global-writes/src/components/states/sharding.tsx b/packages/compass-global-writes/src/components/states/sharding.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  Banner,
+  BannerVariant,
+  Body,
+  css,
+  Link,
+  spacing,
+} from '@mongodb-js/compass-components';
+import { connect } from 'react-redux';
+
+const nbsp = '\u00a0';
+
+const containerStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[400],
+});
+
+export function ShardingState() {
+  return (
+    <div className={containerStyles}>
+      <Banner variant={BannerVariant.Info}>
+        <strong>Sharding your collection …</strong>
+        {nbsp}this should not take too long.
+      </Banner>
+      <Body>
+        Once your collection is sharded, this tab will show instructions on
+        document ‘location’ field formatting, and provide some common command
+        examples.
+      </Body>
+      <Link
+        href="https://www.mongodb.com/docs/atlas/global-clusters/"
+        hideExternalIcon
+      >
+        You can read more about Global Writes in our documentation.
+      </Link>
+    </div>
+  );
+}
+
+export default connect()(ShardingState);