feat(global-writes): add unsharded state COMPASS-8276 (#6289)

* setup plugin

* service and clean up

* show tab only if global writes is supported

* clean up

* fix ts

* clean up

* depcheck

* correct version of redux in lock file

* depcheck again

* feedback

* warning

* show warning

* title tooltip

* unsharded view and tests

* sharding in progress

* small clean up

* correct nums

* error toasts

* fix html

* tests

* clean up

* pedantic details

* add missing header

* check

* clean up lock file

* clean action name

* func to component

* fix check

* use state when waiting for server to accept sharding

* name fix

* clean up

* assert as correct type

* add test

* remove assertion

* add back assertion

* avoid cutting off radio buttons

* npm i

packages/compass-global-writes/package.json

@@ -56,7 +56,10 @@
     "@mongodb-js/compass-logging": "^1.4.8",
     "@mongodb-js/compass-telemetry": "^1.2.0",
     "hadron-app-registry": "^9.2.7",
+    "@mongodb-js/compass-field-store": "^9.18.0",
+    "mongodb-ns": "^2.4.2",
     "react": "^17.0.2",
+    "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.2"
   },

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;
   });
 });

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);

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;
+  });
+});

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);