diff --git a/package-lock.json b/package-lock.json
index 71e5a8b4954..62cf9843702 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5915,32 +5915,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
- "node_modules/@leafygreen-ui/table": {
- "version": "12.6.1",
- "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-12.6.1.tgz",
- "integrity": "sha512-7WcSYVUGHxiekp8BW13n+Q8pICdOuaY68iPJUdrn3HTRF2nkUQ4v2+4XMCQqUbIdSAWb6Lxb2esWmlArqQ/csA==",
- "dependencies": {
- "@leafygreen-ui/checkbox": "^12.1.1",
- "@leafygreen-ui/emotion": "^4.0.7",
- "@leafygreen-ui/hooks": "^8.1.2",
- "@leafygreen-ui/icon": "^12.0.0",
- "@leafygreen-ui/icon-button": "^15.0.20",
- "@leafygreen-ui/lib": "^13.2.1",
- "@leafygreen-ui/palette": "^4.0.7",
- "@leafygreen-ui/polymorphic": "^1.3.6",
- "@leafygreen-ui/tokens": "^2.5.1",
- "@leafygreen-ui/typography": "^18.2.3",
- "@tanstack/react-table": "^8.13.2",
- "lodash": "^4.17.21",
- "polished": "^4.2.2",
- "react-keyed-flatten-children": "^1.3.0",
- "react-transition-group": "^4.4.5",
- "react-virtual": "^2.10.4"
- },
- "peerDependencies": {
- "@leafygreen-ui/leafygreen-provider": "^3.1.11"
- }
- },
"node_modules/@leafygreen-ui/tabs": {
"version": "11.1.13",
"resolved": "https://registry.npmjs.org/@leafygreen-ui/tabs/-/tabs-11.1.13.tgz",
@@ -43789,7 +43763,7 @@
"@leafygreen-ui/search-input": "^2.1.5",
"@leafygreen-ui/segmented-control": "^8.2.10",
"@leafygreen-ui/select": "^11.2.2",
- "@leafygreen-ui/table": "^12.6.1",
+ "@leafygreen-ui/table": "^12.7.0",
"@leafygreen-ui/tabs": "^11.1.13",
"@leafygreen-ui/text-area": "^8.1.2",
"@leafygreen-ui/text-input": "^12.1.26",
@@ -43801,6 +43775,7 @@
"@react-aria/interactions": "^3.9.1",
"@react-aria/utils": "^3.13.1",
"@react-aria/visually-hidden": "^3.3.1",
+ "@tanstack/table-core": "^8.14.0",
"bson": "^6.8.0",
"focus-trap-react": "^9.0.2",
"hadron-document": "^8.6.4",
@@ -43836,6 +43811,102 @@
"typescript": "^5.0.4"
}
},
+ "packages/compass-components/node_modules/@leafygreen-ui/hooks": {
+ "version": "8.2.1",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-8.2.1.tgz",
+ "integrity": "sha512-yozp+WfMo1aNzQJG4WOa4eoxEEMK3T7Q7D2AObRWEPR+jPeeocsBKSHoAkUsfJ/8AklQ+LIWM1SvtUm4iuLXtQ==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@leafygreen-ui/lib": "^13.3.0",
+ "lodash": "^4.17.21"
+ }
+ },
+ "packages/compass-components/node_modules/@leafygreen-ui/table": {
+ "version": "12.7.0",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-12.7.0.tgz",
+ "integrity": "sha512-zsenGdk7yXu7aFELSDlGa1yjv4Q6C4KfL4o8MEqAZYXlZqzsB6z/QiZRJfVjti4vIYWVENC2GwDSLRAAUDGuuQ==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@leafygreen-ui/checkbox": "^13.1.0",
+ "@leafygreen-ui/emotion": "^4.0.8",
+ "@leafygreen-ui/hooks": "^8.1.3",
+ "@leafygreen-ui/icon": "^12.5.4",
+ "@leafygreen-ui/icon-button": "^15.0.21",
+ "@leafygreen-ui/lib": "^13.6.0",
+ "@leafygreen-ui/palette": "^4.0.9",
+ "@leafygreen-ui/polymorphic": "^2.0.0",
+ "@leafygreen-ui/tokens": "^2.11.0",
+ "@leafygreen-ui/typography": "^19.2.0",
+ "@lg-tools/test-harnesses": "^0.1.2",
+ "@tanstack/react-table": "^8.13.2",
+ "lodash": "^4.17.21",
+ "polished": "^4.2.2",
+ "react-keyed-flatten-children": "^1.3.0",
+ "react-transition-group": "^4.4.5",
+ "react-virtual": "^2.10.4"
+ },
+ "peerDependencies": {
+ "@leafygreen-ui/leafygreen-provider": "^3.1.12"
+ }
+ },
+ "packages/compass-components/node_modules/@leafygreen-ui/table/node_modules/@leafygreen-ui/checkbox": {
+ "version": "13.1.2",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/checkbox/-/checkbox-13.1.2.tgz",
+ "integrity": "sha512-rdn55oDiywyk/t3wKnJKbzDn6CUtCCSm4PQF6t4svZWVaHvNzDgTDjHy5D1s8MYpFQbqhsWbJhf17tpRrzY/Mw==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@leafygreen-ui/a11y": "^1.4.13",
+ "@leafygreen-ui/emotion": "^4.0.8",
+ "@leafygreen-ui/hooks": "^8.1.4",
+ "@leafygreen-ui/lib": "^13.4.0",
+ "@leafygreen-ui/palette": "^4.0.10",
+ "@leafygreen-ui/tokens": "^2.5.2",
+ "@leafygreen-ui/typography": "^19.0.0",
+ "@lg-tools/test-harnesses": "^0.1.2",
+ "react-transition-group": "^4.4.5"
+ },
+ "peerDependencies": {
+ "@leafygreen-ui/leafygreen-provider": "^3.1.12"
+ }
+ },
+ "packages/compass-components/node_modules/@leafygreen-ui/table/node_modules/@leafygreen-ui/polymorphic": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/polymorphic/-/polymorphic-2.0.2.tgz",
+ "integrity": "sha512-OjP+hPG/cwADShcGa1SZdm51G2wVpbNqpU0B3GonEAvGLcAvG4LDMXa7BWo3GDliNkPtVMS86w0eZzEDmLfKmQ==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@leafygreen-ui/lib": "^13.6.0",
+ "lodash": "^4.17.21"
+ }
+ },
+ "packages/compass-components/node_modules/@leafygreen-ui/table/node_modules/@leafygreen-ui/typography": {
+ "version": "19.3.0",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-19.3.0.tgz",
+ "integrity": "sha512-pgTRcc4usW/S9nDDzkf5Ac/JPEybhWtOnDpmrp99mAJHM6tH48Pd1HjRNHWjn6bnh0nXWjwANXX1ZEe+8ggCNg==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@leafygreen-ui/emotion": "^4.0.8",
+ "@leafygreen-ui/icon": "^12.6.0",
+ "@leafygreen-ui/lib": "^13.6.1",
+ "@leafygreen-ui/palette": "^4.0.10",
+ "@leafygreen-ui/polymorphic": "^2.0.0",
+ "@leafygreen-ui/tokens": "^2.9.0"
+ },
+ "peerDependencies": {
+ "@leafygreen-ui/leafygreen-provider": "^3.1.12"
+ }
+ },
+ "packages/compass-components/node_modules/@leafygreen-ui/tokens": {
+ "version": "2.11.0",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-2.11.0.tgz",
+ "integrity": "sha512-/0G+UaDpLBLLtEP1mjGjiDnqReHufUTUkteqNUsyTOz1bpfejoo1anu3f6dZDqNlxoKhHZEEngQ+HvP1l1RJVw==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@leafygreen-ui/lib": "^13.7.0",
+ "@leafygreen-ui/palette": "^4.0.9",
+ "polished": "^4.2.2"
+ }
+ },
"packages/compass-components/node_modules/sinon": {
"version": "9.2.4",
"resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz",
@@ -54097,29 +54168,6 @@
}
}
},
- "@leafygreen-ui/table": {
- "version": "12.6.1",
- "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-12.6.1.tgz",
- "integrity": "sha512-7WcSYVUGHxiekp8BW13n+Q8pICdOuaY68iPJUdrn3HTRF2nkUQ4v2+4XMCQqUbIdSAWb6Lxb2esWmlArqQ/csA==",
- "requires": {
- "@leafygreen-ui/checkbox": "^12.1.1",
- "@leafygreen-ui/emotion": "^4.0.7",
- "@leafygreen-ui/hooks": "^8.1.2",
- "@leafygreen-ui/icon": "^12.0.0",
- "@leafygreen-ui/icon-button": "^15.0.20",
- "@leafygreen-ui/lib": "^13.2.1",
- "@leafygreen-ui/palette": "^4.0.7",
- "@leafygreen-ui/polymorphic": "^1.3.6",
- "@leafygreen-ui/tokens": "^2.5.1",
- "@leafygreen-ui/typography": "^18.2.3",
- "@tanstack/react-table": "^8.13.2",
- "lodash": "^4.17.21",
- "polished": "^4.2.2",
- "react-keyed-flatten-children": "^1.3.0",
- "react-transition-group": "^4.4.5",
- "react-virtual": "^2.10.4"
- }
- },
"@leafygreen-ui/tabs": {
"version": "11.1.13",
"resolved": "https://registry.npmjs.org/@leafygreen-ui/tabs/-/tabs-11.1.13.tgz",
@@ -55854,7 +55902,7 @@
"@leafygreen-ui/search-input": "^2.1.5",
"@leafygreen-ui/segmented-control": "^8.2.10",
"@leafygreen-ui/select": "^11.2.2",
- "@leafygreen-ui/table": "^12.6.1",
+ "@leafygreen-ui/table": "^12.7.0",
"@leafygreen-ui/tabs": "^11.1.13",
"@leafygreen-ui/text-area": "^8.1.2",
"@leafygreen-ui/text-input": "^12.1.26",
@@ -55871,6 +55919,7 @@
"@react-aria/interactions": "^3.9.1",
"@react-aria/utils": "^3.13.1",
"@react-aria/visually-hidden": "^3.3.1",
+ "@tanstack/table-core": "^8.14.0",
"@types/chai": "^4.2.21",
"@types/chai-dom": "^0.0.10",
"@types/mocha": "^9.0.0",
@@ -55898,6 +55947,89 @@
"typescript": "^5.0.4"
},
"dependencies": {
+ "@leafygreen-ui/hooks": {
+ "version": "8.2.1",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-8.2.1.tgz",
+ "integrity": "sha512-yozp+WfMo1aNzQJG4WOa4eoxEEMK3T7Q7D2AObRWEPR+jPeeocsBKSHoAkUsfJ/8AklQ+LIWM1SvtUm4iuLXtQ==",
+ "requires": {
+ "@leafygreen-ui/lib": "^13.3.0",
+ "lodash": "^4.17.21"
+ }
+ },
+ "@leafygreen-ui/table": {
+ "version": "12.7.0",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/table/-/table-12.7.0.tgz",
+ "integrity": "sha512-zsenGdk7yXu7aFELSDlGa1yjv4Q6C4KfL4o8MEqAZYXlZqzsB6z/QiZRJfVjti4vIYWVENC2GwDSLRAAUDGuuQ==",
+ "requires": {
+ "@leafygreen-ui/checkbox": "^13.1.0",
+ "@leafygreen-ui/emotion": "^4.0.8",
+ "@leafygreen-ui/hooks": "^8.1.3",
+ "@leafygreen-ui/icon": "^12.5.4",
+ "@leafygreen-ui/icon-button": "^15.0.21",
+ "@leafygreen-ui/lib": "^13.6.0",
+ "@leafygreen-ui/palette": "^4.0.9",
+ "@leafygreen-ui/polymorphic": "^2.0.0",
+ "@leafygreen-ui/tokens": "^2.11.0",
+ "@leafygreen-ui/typography": "^19.2.0",
+ "@lg-tools/test-harnesses": "^0.1.2",
+ "@tanstack/react-table": "^8.13.2",
+ "lodash": "^4.17.21",
+ "polished": "^4.2.2",
+ "react-keyed-flatten-children": "^1.3.0",
+ "react-transition-group": "^4.4.5",
+ "react-virtual": "^2.10.4"
+ },
+ "dependencies": {
+ "@leafygreen-ui/checkbox": {
+ "version": "13.1.2",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/checkbox/-/checkbox-13.1.2.tgz",
+ "integrity": "sha512-rdn55oDiywyk/t3wKnJKbzDn6CUtCCSm4PQF6t4svZWVaHvNzDgTDjHy5D1s8MYpFQbqhsWbJhf17tpRrzY/Mw==",
+ "requires": {
+ "@leafygreen-ui/a11y": "^1.4.13",
+ "@leafygreen-ui/emotion": "^4.0.8",
+ "@leafygreen-ui/hooks": "^8.1.4",
+ "@leafygreen-ui/lib": "^13.4.0",
+ "@leafygreen-ui/palette": "^4.0.10",
+ "@leafygreen-ui/tokens": "^2.5.2",
+ "@leafygreen-ui/typography": "^19.0.0",
+ "@lg-tools/test-harnesses": "^0.1.2",
+ "react-transition-group": "^4.4.5"
+ }
+ },
+ "@leafygreen-ui/polymorphic": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/polymorphic/-/polymorphic-2.0.2.tgz",
+ "integrity": "sha512-OjP+hPG/cwADShcGa1SZdm51G2wVpbNqpU0B3GonEAvGLcAvG4LDMXa7BWo3GDliNkPtVMS86w0eZzEDmLfKmQ==",
+ "requires": {
+ "@leafygreen-ui/lib": "^13.6.0",
+ "lodash": "^4.17.21"
+ }
+ },
+ "@leafygreen-ui/typography": {
+ "version": "19.3.0",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-19.3.0.tgz",
+ "integrity": "sha512-pgTRcc4usW/S9nDDzkf5Ac/JPEybhWtOnDpmrp99mAJHM6tH48Pd1HjRNHWjn6bnh0nXWjwANXX1ZEe+8ggCNg==",
+ "requires": {
+ "@leafygreen-ui/emotion": "^4.0.8",
+ "@leafygreen-ui/icon": "^12.6.0",
+ "@leafygreen-ui/lib": "^13.6.1",
+ "@leafygreen-ui/palette": "^4.0.10",
+ "@leafygreen-ui/polymorphic": "^2.0.0",
+ "@leafygreen-ui/tokens": "^2.9.0"
+ }
+ }
+ }
+ },
+ "@leafygreen-ui/tokens": {
+ "version": "2.11.0",
+ "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-2.11.0.tgz",
+ "integrity": "sha512-/0G+UaDpLBLLtEP1mjGjiDnqReHufUTUkteqNUsyTOz1bpfejoo1anu3f6dZDqNlxoKhHZEEngQ+HvP1l1RJVw==",
+ "requires": {
+ "@leafygreen-ui/lib": "^13.7.0",
+ "@leafygreen-ui/palette": "^4.0.9",
+ "polished": "^4.2.2"
+ }
+ },
"sinon": {
"version": "9.2.4",
"resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz",
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
index 3c8cf00994d..eec0305867c 100644
--- a/packages/compass-components/package.json
+++ b/packages/compass-components/package.json
@@ -64,7 +64,7 @@
"@leafygreen-ui/search-input": "^2.1.5",
"@leafygreen-ui/segmented-control": "^8.2.10",
"@leafygreen-ui/select": "^11.2.2",
- "@leafygreen-ui/table": "^12.6.1",
+ "@leafygreen-ui/table": "^12.7.0",
"@leafygreen-ui/tabs": "^11.1.13",
"@leafygreen-ui/text-area": "^8.1.2",
"@leafygreen-ui/text-input": "^12.1.26",
@@ -76,6 +76,7 @@
"@react-aria/interactions": "^3.9.1",
"@react-aria/utils": "^3.13.1",
"@react-aria/visually-hidden": "^3.3.1",
+ "@tanstack/table-core": "^8.14.0",
"bson": "^6.8.0",
"focus-trap-react": "^9.0.2",
"hadron-document": "^8.6.4",
diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx
index 5684476e0b8..a6f9b120553 100644
--- a/packages/compass-components/src/components/leafygreen.tsx
+++ b/packages/compass-components/src/components/leafygreen.tsx
@@ -53,7 +53,10 @@ import {
TableBody,
flexRender,
useLeafyGreenTable,
+ getFilteredRowModel,
} from '@leafygreen-ui/table';
+import type { Row as LgTableRowType } from '@tanstack/table-core'; // TODO(COMPASS-8437): import from LG
+
export type {
LGColumnDef,
HeaderGroup,
@@ -172,4 +175,6 @@ export {
InfoSprinkle,
flexRender,
useLeafyGreenTable,
+ getFilteredRowModel,
+ type LgTableRowType,
};
diff --git a/packages/compass-global-writes/src/components/shard-zones-table.spec.tsx b/packages/compass-global-writes/src/components/shard-zones-table.spec.tsx
index 5aae046e76e..870bc8297fe 100644
--- a/packages/compass-global-writes/src/components/shard-zones-table.spec.tsx
+++ b/packages/compass-global-writes/src/components/shard-zones-table.spec.tsx
@@ -1,6 +1,11 @@
import React from 'react';
import { expect } from 'chai';
-import { render, screen, within } from '@mongodb-js/testing-library-compass';
+import {
+ render,
+ screen,
+ userEvent,
+ within,
+} from '@mongodb-js/testing-library-compass';
import { ShardZonesTable } from './shard-zones-table';
import { type ShardZoneData } from '../store/reducer';
@@ -26,9 +31,23 @@ describe('Compass GlobalWrites Plugin', function () {
},
];
- it('renders the Location name & Zone for all items', function () {
+ it('renders the Location name & Zone for top level zones', function () {
render();
+ const rows = screen.getAllByRole('row');
+ expect(rows).to.have.lengthOf(2); // 1 header, 1 item
+ expect(within(rows[1]).getByText('Germany (DE)')).to.be.visible;
+ expect(within(rows[1]).getByText('EMEA (Frankfurt)')).to.be.visible;
+ });
+
+ it('subrows can be expanded', function () {
+ render();
+
+ const expandBtn = screen.getByRole('button', { name: 'Expand row' });
+ expect(expandBtn).to.be.visible;
+
+ userEvent.click(expandBtn);
+
const rows = screen.getAllByRole('row');
expect(rows).to.have.lengthOf(3); // 1 header, 2 items
expect(within(rows[1]).getByText('Germany (DE)')).to.be.visible;
@@ -36,4 +55,81 @@ describe('Compass GlobalWrites Plugin', function () {
expect(within(rows[2]).getByText('Germany - Berlin (DE-BE)')).to.be.visible;
expect(within(rows[2]).getByText('EMEA (Frankfurt)')).to.be.visible;
});
+
+ describe('search', function () {
+ before(function () {
+ if (
+ process.env.NODE_ENV === 'test' &&
+ process.env.npm_lifecycle_event === 'test-electron'
+ ) {
+ // TODO(COMPASS-8368)
+ this.skip();
+ }
+ });
+ it('allows top level search', function () {
+ render(
+
+ );
+
+ const searchInput = screen.getByLabelText('Search for a location');
+ expect(searchInput).to.be.visible;
+ userEvent.type(searchInput, 'Slo');
+ const rows = screen.getAllByRole('row');
+ expect(rows).to.have.lengthOf(2); // 1 header, 1 item
+ expect(within(rows[1]).getByText('Slovakia (SK)')).to.be.visible;
+ expect(within(rows[1]).getByText('Zone 2 (Location 2)')).to.be.visible;
+ });
+
+ it('allows subZone search', function () {
+ render(
+
+ );
+
+ const searchInput = screen.getByLabelText('Search for a location');
+ expect(searchInput).to.be.visible;
+ userEvent.type(searchInput, 'Bra');
+ const rows = screen.getAllByRole('row');
+ expect(rows).to.have.lengthOf(3); // 1 header, 2 items
+ expect(within(rows[1]).getByText('Slovakia (SK)')).to.be.visible;
+ expect(within(rows[1]).getByText('Zone 2 (Location 2)')).to.be.visible;
+ expect(within(rows[2]).getByText('Slovakia - Bratislava (SK-BA)')).to.be
+ .visible;
+ expect(within(rows[2]).getByText('Zone 2 (Location 2)')).to.be.visible;
+ });
+ });
});
diff --git a/packages/compass-global-writes/src/components/shard-zones-table.tsx b/packages/compass-global-writes/src/components/shard-zones-table.tsx
index abc866c668d..3453c36b613 100644
--- a/packages/compass-global-writes/src/components/shard-zones-table.tsx
+++ b/packages/compass-global-writes/src/components/shard-zones-table.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
import {
Table,
TableBody,
@@ -8,47 +8,187 @@ import {
Row,
Cell,
css,
+ useLeafyGreenTable,
+ type LGColumnDef,
+ type LeafyGreenTableRow,
+ flexRender,
+ type HeaderGroup,
+ SearchInput,
+ type LGTableDataType,
+ getFilteredRowModel,
+ type LgTableRowType,
} from '@mongodb-js/compass-components';
import type { ShardZoneData } from '../store/reducer';
const containerStyles = css({
- maxWidth: '700px',
height: '400px',
});
+interface ShardZoneRow {
+ locationName: string;
+ zone: string;
+}
+
+interface ShardZoneExpandableRow extends ShardZoneRow {
+ subRows: ShardZoneRow[];
+}
+
+const columns: Array> = [
+ {
+ accessorKey: 'locationName',
+ header: 'Location Name',
+ enableSorting: true,
+ },
+ {
+ accessorKey: 'zone',
+ header: 'Zone',
+ enableSorting: true,
+ enableGlobalFilter: false,
+ },
+];
+
+const parseRow = ({
+ isoCode,
+ readableName,
+ zoneName,
+ zoneLocations,
+}: ShardZoneData): ShardZoneRow => ({
+ locationName: `${readableName} (${isoCode})`,
+ zone: `${zoneName} (${zoneLocations.join(', ')})`,
+});
+
+const parseData = (shardZones: ShardZoneData[]): ShardZoneExpandableRow[] => {
+ const grouppedZones = shardZones.reduce<
+ Record
+ >((groups, next) => {
+ const { typeOneIsoCode, isoCode } = next;
+ groups[typeOneIsoCode] ??= { ...parseRow(next), subRows: [] };
+ if (typeOneIsoCode === isoCode) {
+ Object.assign(groups[typeOneIsoCode], parseRow(next));
+ } else {
+ groups[typeOneIsoCode].subRows.push(parseRow(next));
+ }
+ return groups;
+ }, {});
+ return Object.values(grouppedZones);
+};
+
+const hasFilteredChildren = (
+ row: LgTableRowType>
+) =>
+ row.subRows.some(
+ (subRow) => Object.values(subRow.columnFilters).includes(true) // columnFilters: e.g. { __global__: true }
+ );
+
export function ShardZonesTable({
shardZones,
}: {
shardZones: ShardZoneData[];
}) {
+ const tableContainerRef = useRef(null);
+ const [searchText, setSearchText] = useState('');
+ const [expanded, setExpanded] = useState>({});
+
+ const data = useMemo(
+ () => parseData(shardZones),
+ [shardZones]
+ );
+
+ const table = useLeafyGreenTable({
+ containerRef: tableContainerRef,
+ data,
+ columns,
+ state: {
+ globalFilter: searchText,
+ expanded,
+ },
+ onGlobalFilterChange: setSearchText,
+ onExpandedChange: setExpanded,
+ enableGlobalFilter: true,
+ getFilteredRowModel: getFilteredRowModel(),
+ getIsRowExpanded: (row) => {
+ return (
+ (searchText && hasFilteredChildren(row)) ||
+ (typeof expanded !== 'boolean' && expanded[row.id])
+ );
+ },
+ globalFilterFn: 'auto',
+ filterFromLeafRows: true,
+ maxLeafRowFilterDepth: 2,
+ });
+
+ const tableRef = useRef(table);
+ tableRef.current = table;
+
+ const handleSearchTextChange = useCallback(
+ (e: React.ChangeEvent) => {
+ tableRef.current.setGlobalFilter(e.currentTarget.value);
+ },
+ [tableRef]
+ );
+
+ const { rows } = table.getRowModel();
+
return (
- // TODO(COMPASS-8336):
- // Add search
- // group zones by ShardZoneData.typeOneIsoCode
- // and display them in a single row that can be expanded
-
-
-
- Location Name
- Zone
-
-
-
- {shardZones.map(
- ({ readableName, zoneName, zoneLocations, isoCode }, index) => {
- return (
-
- |
- {readableName} ({isoCode})
- |
-
- {zoneName} ({zoneLocations.join(', ')})
- |
-
- );
- }
- )}
-
-
+ <>
+
+
+
+ {table
+ .getHeaderGroups()
+ .map((headerGroup: HeaderGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ );
+ })}
+
+ ))}
+
+
+ {rows.map((row: LeafyGreenTableRow) => (
+
+ {row.getVisibleCells().map((cell) => {
+ return (
+ |
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ |
+ );
+ })}
+ {row.subRows.map((subRow) => (
+
+ {subRow.getVisibleCells().map((cell) => {
+ return (
+ |
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+ |
+ );
+ })}
+
+ ))}
+
+ ))}
+
+
+
);
}
diff --git a/packages/compass-global-writes/src/components/states/shard-key-correct.tsx b/packages/compass-global-writes/src/components/states/shard-key-correct.tsx
index 05a29add5a8..746f1a78923 100644
--- a/packages/compass-global-writes/src/components/states/shard-key-correct.tsx
+++ b/packages/compass-global-writes/src/components/states/shard-key-correct.tsx
@@ -36,7 +36,6 @@ const codeBlockContainerStyles = css({
display: 'flex',
flexDirection: 'column',
gap: spacing[100],
- maxWidth: '700px',
});
const paragraphStyles = css({
diff --git a/packages/compass-web/src/url-builder.ts b/packages/compass-web/src/url-builder.ts
index 646e2a3ed3b..104a61b778e 100644
--- a/packages/compass-web/src/url-builder.ts
+++ b/packages/compass-web/src/url-builder.ts
@@ -23,6 +23,8 @@ function getCollectionSubTabFromRoute(
return 'Indexes';
case 'validation':
return 'Validation';
+ case 'global-writes':
+ return 'GlobalWrites';
default:
return undefined;
}
@@ -40,6 +42,8 @@ function getRouteFromCollectionSubTab(subTab: CollectionSubtab): string {
return 'indexes';
case 'Validation':
return 'validation';
+ case 'GlobalWrites':
+ return 'global-writes';
default:
return '';
}