diff --git a/packages/compass-global-writes/src/components/shard-zones-description.tsx b/packages/compass-global-writes/src/components/shard-zones-description.tsx new file mode 100644 index 00000000000..0e3d7e395ed --- /dev/null +++ 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 ( + <> + Location Codes +
+ + Each document’s first field should include an ISO 3166-1 Alpha-2 code + for the location it belongs to. + + + 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{' '} + here. + + + {atlasMetadata?.projectId && atlasMetadata?.clusterName && ( + <> + Locations’ zone mapping can be changed by navigating to this + clusters{' '} + + Edit Configuration + {' '} + page and clicking the Configure Location Mappings’ link above the + map. + + )} + +
+ + ); +} 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 new file mode 100644 index 00000000000..fe58b3819d0 --- /dev/null +++ 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(, { + 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); + }); +});