add files

mongodb-js · Oct 29, 2024 · a6ae221 · a6ae221
1 parent 7196ba6
commit a6ae221
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/packages/compass-global-writes/src/components/shard-zones-description.tsx b/packages/compass-global-writes/src/components/shard-zones-description.tsx
@@ -0,0 +1,53 @@
+import {
+  Body,
+  css,
+  Link,
+  spacing,
+  Subtitle,
+} from '@mongodb-js/compass-components';
+import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import React from 'react';
+
+const paragraphStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[100],
+});
+
+export function ShardZonesDescription() {
+  const { atlasMetadata } = useConnectionInfo();
+  return (
+    <>
+      <Subtitle>Location Codes</Subtitle>
+      <div className={paragraphStyles}>
+        <Body>
+          Each document’s first field should include an ISO 3166-1 Alpha-2 code
+          for the location it belongs to.
+        </Body>
+        <Body>
+          We also support ISO 3166-2 subdivision codes for countries containing
+          a cloud provider data center (both ISO 3166-1 and ISO 3166-2 codes may
+          be used for these countries). All valid country codes and the zones to
+          which they map are listed in the table below. Additionally, you can
+          view a list of all location codes{' '}
+          <Link href="/static/atlas/country_iso_codes.txt">here</Link>.
+        </Body>
+        <Body>
+          {atlasMetadata?.projectId && atlasMetadata?.clusterName && (
+            <>
+              Locations’ zone mapping can be changed by navigating to this
+              clusters{' '}
+              <Link
+                href={`/v2/${atlasMetadata?.projectId}#/clusters/edit/${atlasMetadata?.clusterName}`}
+              >
+                Edit Configuration
+              </Link>{' '}
+              page and clicking the Configure Location Mappings’ link above the
+              map.
+            </>
+          )}
+        </Body>
+      </div>
+    </>
+  );
+}
diff --git a/packages/compass-global-writes/src/components/shard-zones-descripton.spec.tsx b/packages/compass-global-writes/src/components/shard-zones-descripton.spec.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { expect } from 'chai';
+import { screen } from '@mongodb-js/testing-library-compass';
+import type { ConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import { renderWithStore } from '../../tests/create-store';
+import { ShardZonesDescription } from './shard-zones-description';
+
+describe('ShardZonesDescription', () => {
+  it('Provides link to Edit Configuration', async function () {
+    const connectionInfo = {
+      id: 'testConnection',
+      connectionOptions: {
+        connectionString: 'mongodb://test',
+      },
+      atlasMetadata: {
+        projectId: 'project1',
+        clusterName: 'myCluster',
+      } as ConnectionInfo['atlasMetadata'],
+    };
+    await renderWithStore(<ShardZonesDescription />, {
+      connectionInfo,
+    });
+
+    const link = await screen.findByRole('link', {
+      name: /Edit Configuration/,
+    });
+    const expectedHref = `/v2/${connectionInfo.atlasMetadata?.projectId}#/clusters/edit/${connectionInfo.atlasMetadata?.clusterName}`;
+
+    expect(link).to.be.visible;
+    expect(link).to.have.attribute('href', expectedHref);
+  });
+});