From 3a97f006b479c9460b6b9e4352954f139c617649 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Fri, 11 Oct 2024 12:48:27 +0200 Subject: [PATCH 01/13] feat(global-writes): zones list expandable rows --- package-lock.json | 232 ++++++++++++++---- packages/compass-components/package.json | 2 +- .../src/components/shard-zones-table.spec.tsx | 23 +- .../src/components/shard-zones-table.tsx | 107 ++++++-- 4 files changed, 296 insertions(+), 68 deletions(-) diff --git a/package-lock.json b/package-lock.json index 71e5a8b4954..4698d1af048 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", @@ -43836,6 +43810,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 +54167,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 +55901,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", @@ -55898,6 +55945,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..1505afbd01c 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", 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..06bd132d2e8 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; 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..dc8bcfd32af 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, { useMemo, useRef } from 'react'; import { Table, TableBody, @@ -8,6 +8,10 @@ import { Row, Cell, css, + useLeafyGreenTable, + type LGColumnDef, + type LeafyGreenTableRow, + flexRender, } from '@mongodb-js/compass-components'; import type { ShardZoneData } from '../store/reducer'; @@ -16,17 +20,81 @@ const containerStyles = css({ height: '400px', }); +interface ShardZoneRow { + locationName: string; + zone: string; +} + +interface ShardZoneExpandableRow extends ShardZoneRow { + subRows: ShardZoneRow[]; +} + +const columns: Array> = [ + { + accessorKey: 'locationName', + header: 'Location Name', + }, + { + accessorKey: 'zone', + header: 'Zone', + }, +]; + +const parseRow = ({ + isoCode, + readableName, + zoneName, + zoneLocations, +}: ShardZoneData): ShardZoneRow => ({ + locationName: `${readableName} (${isoCode})`, + zone: `${zoneName} (${zoneLocations.join(', ')})`, +}); + export function ShardZonesTable({ shardZones, }: { shardZones: ShardZoneData[]; }) { + const tableContainerRef = useRef(null); + + const data = useMemo(() => { + const grouppedZones = shardZones.reduce< + Record + >((groups, next) => { + const { typeOneIsoCode, isoCode } = next; + if (!groups[typeOneIsoCode]) { + groups[typeOneIsoCode] = { ...parseRow(next), subRows: [] }; + } + if (typeOneIsoCode === isoCode) { + Object.assign(groups[typeOneIsoCode], next); + } else { + groups[typeOneIsoCode].subRows.push(parseRow(next)); + } + return groups; + }, {}); + return Object.values(grouppedZones); + }, [shardZones]); + + const table = useLeafyGreenTable({ + containerRef: tableContainerRef, + data, + columns, + }); + + 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 @@ -34,20 +102,31 @@ export function ShardZonesTable({ - {shardZones.map( - ({ readableName, zoneName, zoneLocations, isoCode }, index) => { - return ( - - - {readableName} ({isoCode}) - - - {zoneName} ({zoneLocations.join(', ')}) + {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() + )} + + ); + })} - ); - } - )} + ))} + + ))}
); From d59656653ad05f34d5957d465aa42abb4eb0bcd9 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Fri, 11 Oct 2024 15:07:06 +0200 Subject: [PATCH 02/13] header --- .../src/components/shard-zones-table.tsx | 28 +++++++++++++++---- .../components/states/shard-key-correct.tsx | 1 - 2 files changed, 23 insertions(+), 6 deletions(-) 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 dc8bcfd32af..0294ea69a7b 100644 --- a/packages/compass-global-writes/src/components/shard-zones-table.tsx +++ b/packages/compass-global-writes/src/components/shard-zones-table.tsx @@ -12,11 +12,11 @@ import { type LGColumnDef, type LeafyGreenTableRow, flexRender, + type HeaderGroup, } from '@mongodb-js/compass-components'; import type { ShardZoneData } from '../store/reducer'; const containerStyles = css({ - maxWidth: '700px', height: '400px', }); @@ -33,10 +33,12 @@ const columns: Array> = [ { accessorKey: 'locationName', header: 'Location Name', + enableSorting: true, }, { accessorKey: 'zone', header: 'Zone', + enableSorting: true, }, ]; @@ -95,11 +97,27 @@ export function ShardZonesTable({ table={table} ref={tableContainerRef} > + + + + - - Location Name - Zone - + {table + .getHeaderGroups() + .map((headerGroup: HeaderGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ); + })} + + ))} {rows.map((row: LeafyGreenTableRow) => ( 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({ From 7a42df46704077690f0fc5dae54e3db777a853a6 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Fri, 11 Oct 2024 18:40:20 +0200 Subject: [PATCH 03/13] search wip --- .../src/components/shard-zones-table.tsx | 205 +++++++++++------- packages/compass-web/src/url-builder.ts | 4 + 2 files changed, 135 insertions(+), 74 deletions(-) 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 0294ea69a7b..be6666c2337 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,10 @@ -import React, { useMemo, useRef } from 'react'; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import { Table, TableBody, @@ -13,6 +19,7 @@ import { type LeafyGreenTableRow, flexRender, type HeaderGroup, + SearchInput, } from '@mongodb-js/compass-components'; import type { ShardZoneData } from '../store/reducer'; @@ -23,6 +30,7 @@ const containerStyles = css({ interface ShardZoneRow { locationName: string; zone: string; + searchable: string; } interface ShardZoneExpandableRow extends ShardZoneRow { @@ -50,102 +58,151 @@ const parseRow = ({ }: ShardZoneData): ShardZoneRow => ({ locationName: `${readableName} (${isoCode})`, zone: `${zoneName} (${zoneLocations.join(', ')})`, + searchable: readableName, }); +const parseData = (shardZones: ShardZoneData[]): ShardZoneExpandableRow[] => { + const grouppedZones = shardZones.reduce< + Record + >((groups, next) => { + const { typeOneIsoCode, isoCode } = next; + if (!groups[typeOneIsoCode]) { + 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); +}; + export function ShardZonesTable({ shardZones, }: { shardZones: ShardZoneData[]; }) { const tableContainerRef = useRef(null); + const [searchText, setSearchText] = useState(''); + const handleSearchTextChange = useCallback( + (e: React.ChangeEvent) => { + setSearchText(e.currentTarget.value); + }, + [setSearchText] + ); - const data = useMemo(() => { - const grouppedZones = shardZones.reduce< - Record - >((groups, next) => { - const { typeOneIsoCode, isoCode } = next; - if (!groups[typeOneIsoCode]) { - groups[typeOneIsoCode] = { ...parseRow(next), subRows: [] }; - } - if (typeOneIsoCode === isoCode) { - Object.assign(groups[typeOneIsoCode], next); - } else { - groups[typeOneIsoCode].subRows.push(parseRow(next)); - } - return groups; - }, {}); - return Object.values(grouppedZones); - }, [shardZones]); + const data = useMemo( + () => parseData(shardZones), + [shardZones] + ); + + const filteredData = useMemo( + () => + data.reduce((filtered, next) => { + const { searchable, subRows } = next; + if (searchable.includes(searchText)) { + filtered.push(next); + return filtered; + } + const matchingSubRows = subRows.filter((subRow) => + subRow.searchable.includes(searchText) + ); + if (matchingSubRows.length > 0) { + filtered.push({ + ...next, + subRows: matchingSubRows, + }); + } + return filtered; + }, []), + [data, searchText] + ); const table = useLeafyGreenTable({ containerRef: tableContainerRef, - data, + data: filteredData, columns, }); 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 + const rowsRef = useRef(rows); + rowsRef.current = rows; + useEffect(() => { + if (!searchText) return; + for (const row of rowsRef.current) { + if (row.subRows.length && !row.getIsExpanded()) { + console.log('expanding row', row.original, row.getIsExpanded()); + row.toggleExpanded(); + } + } + }, [searchText, rowsRef]); - - - - - - - {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 ( + <> + +
+ + {table + .getHeaderGroups() + .map((headerGroup: HeaderGroup) => ( + + {headerGroup.headers.map((header) => { return ( - + {flexRender( - cell.column.columnDef.cell, - cell.getContext() + 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 ( + + {(() => { + // console.log({ cell, context: cell.getContext() }); + return flexRender( + cell.column.columnDef.cell, + cell.getContext() + ); + })()} + + ); + })} + + ))} + + ))} + + + ); } 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 ''; } From 5be8560fb153fad5912491b481b323737cb6aa74 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Mon, 14 Oct 2024 15:25:41 +0200 Subject: [PATCH 04/13] fix expanding --- package-lock.json | 2 + packages/compass-global-writes/package.json | 3 +- .../src/components/shard-zones-table.tsx | 101 ++++++++---------- 3 files changed, 50 insertions(+), 56 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4698d1af048..55669d1e164 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45011,6 +45011,7 @@ "@mongodb-js/compass-field-store": "^9.19.1", "@mongodb-js/compass-logging": "^1.4.8", "@mongodb-js/compass-telemetry": "^1.2.1", + "@tanstack/table-core": "^8.14.0", "hadron-app-registry": "^9.2.7", "lodash": "^4.17.21", "mongodb-ns": "^2.4.2", @@ -56759,6 +56760,7 @@ "@mongodb-js/prettier-config-compass": "^1.0.2", "@mongodb-js/testing-library-compass": "^1.0.2", "@mongodb-js/tsconfig-compass": "^1.0.5", + "@tanstack/table-core": "^8.14.0", "@types/chai": "^4.2.21", "@types/chai-dom": "^0.0.10", "@types/mocha": "^9.0.0", diff --git a/packages/compass-global-writes/package.json b/packages/compass-global-writes/package.json index 095d2779729..749c3de4bc1 100644 --- a/packages/compass-global-writes/package.json +++ b/packages/compass-global-writes/package.json @@ -62,7 +62,8 @@ "react": "^17.0.2", "react-redux": "^8.1.3", "redux": "^4.2.1", - "redux-thunk": "^2.4.2" + "redux-thunk": "^2.4.2", + "@tanstack/table-core": "^8.14.0" }, "devDependencies": { "@mongodb-js/eslint-config-compass": "^1.1.7", 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 be6666c2337..3f967e8420f 100644 --- a/packages/compass-global-writes/src/components/shard-zones-table.tsx +++ b/packages/compass-global-writes/src/components/shard-zones-table.tsx @@ -1,10 +1,8 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; +import React, { useCallback, useMemo, useRef, useState } from 'react'; +import { + getFilteredRowModel, + type Row as ReactTableRow, +} from '@tanstack/table-core'; import { Table, TableBody, @@ -20,6 +18,7 @@ import { flexRender, type HeaderGroup, SearchInput, + type LGTableDataType, } from '@mongodb-js/compass-components'; import type { ShardZoneData } from '../store/reducer'; @@ -79,6 +78,13 @@ const parseData = (shardZones: ShardZoneData[]): ShardZoneExpandableRow[] => { return Object.values(grouppedZones); }; +const hasFilteredChildren = ( + row: ReactTableRow> +) => + row.subRows.filter( + (subRow) => Object.values(subRow.columnFilters).includes(true) // columnFilters: e.g. { __global__: true } + ).length > 0; + export function ShardZonesTable({ shardZones, }: { @@ -86,59 +92,47 @@ export function ShardZonesTable({ }) { const tableContainerRef = useRef(null); const [searchText, setSearchText] = useState(''); - const handleSearchTextChange = useCallback( - (e: React.ChangeEvent) => { - setSearchText(e.currentTarget.value); - }, - [setSearchText] - ); + const [expanded, setExpanded] = useState>({}); const data = useMemo( () => parseData(shardZones), [shardZones] ); - const filteredData = useMemo( - () => - data.reduce((filtered, next) => { - const { searchable, subRows } = next; - if (searchable.includes(searchText)) { - filtered.push(next); - return filtered; - } - const matchingSubRows = subRows.filter((subRow) => - subRow.searchable.includes(searchText) - ); - if (matchingSubRows.length > 0) { - filtered.push({ - ...next, - subRows: matchingSubRows, - }); - } - return filtered; - }, []), - [data, searchText] - ); - const table = useLeafyGreenTable({ containerRef: tableContainerRef, - data: filteredData, + 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 { rows } = table.getRowModel(); + const tableRef = useRef(table); + tableRef.current = table; - const rowsRef = useRef(rows); - rowsRef.current = rows; - useEffect(() => { - if (!searchText) return; - for (const row of rowsRef.current) { - if (row.subRows.length && !row.getIsExpanded()) { - console.log('expanding row', row.original, row.getIsExpanded()); - row.toggleExpanded(); - } - } - }, [searchText, rowsRef]); + const handleSearchTextChange = useCallback( + (e: React.ChangeEvent) => { + tableRef.current.setGlobalFilter(e.currentTarget.value); + }, + [tableRef] + ); + + const { rows } = table.getRowModel(); return ( <> @@ -187,13 +181,10 @@ export function ShardZonesTable({ {subRow.getVisibleCells().map((cell) => { return ( - {(() => { - // console.log({ cell, context: cell.getContext() }); - return flexRender( - cell.column.columnDef.cell, - cell.getContext() - ); - })()} + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} ); })} From 087c06c6e8a928c24c9a72ace2e3b3b1efc6adf3 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Mon, 14 Oct 2024 15:38:31 +0200 Subject: [PATCH 05/13] add tests --- .../src/components/shard-zones-table.spec.tsx | 66 +++++++++++++++++++ .../src/components/shard-zones-table.tsx | 3 +- 2 files changed, 67 insertions(+), 2 deletions(-) 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 06bd132d2e8..9bfd68bf525 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 @@ -55,4 +55,70 @@ 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; }); + + 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 3f967e8420f..2ffc7a33c88 100644 --- a/packages/compass-global-writes/src/components/shard-zones-table.tsx +++ b/packages/compass-global-writes/src/components/shard-zones-table.tsx @@ -29,7 +29,6 @@ const containerStyles = css({ interface ShardZoneRow { locationName: string; zone: string; - searchable: string; } interface ShardZoneExpandableRow extends ShardZoneRow { @@ -46,6 +45,7 @@ const columns: Array> = [ accessorKey: 'zone', header: 'Zone', enableSorting: true, + enableGlobalFilter: false, }, ]; @@ -57,7 +57,6 @@ const parseRow = ({ }: ShardZoneData): ShardZoneRow => ({ locationName: `${readableName} (${isoCode})`, zone: `${zoneName} (${zoneLocations.join(', ')})`, - searchable: readableName, }); const parseData = (shardZones: ShardZoneData[]): ShardZoneExpandableRow[] => { From 0e1daddf4f5e0daaa6ca90852844434ba5036dd8 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Tue, 15 Oct 2024 13:37:28 +0200 Subject: [PATCH 06/13] skip electron tests --- packages/compass-global-writes/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/compass-global-writes/package.json b/packages/compass-global-writes/package.json index 749c3de4bc1..270a532b60d 100644 --- a/packages/compass-global-writes/package.json +++ b/packages/compass-global-writes/package.json @@ -45,7 +45,6 @@ "test-cov": "nyc --compact=false --produce-source-map=false -x \"**/*.spec.*\" --reporter=lcov --reporter=text --reporter=html npm run test", "test-watch": "npm run test -- --watch", "test-ci": "npm run test-cov", - "test-ci-electron": "npm run test-electron", "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ." }, "dependencies": { From 15406f80bd763d1b87d8dc6214e3b436fb705f9c Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Tue, 15 Oct 2024 14:51:32 +0200 Subject: [PATCH 07/13] only skip specific tests --- packages/compass-global-writes/package.json | 1 + .../src/components/shard-zones-table.spec.tsx | 134 ++++++++++-------- 2 files changed, 74 insertions(+), 61 deletions(-) diff --git a/packages/compass-global-writes/package.json b/packages/compass-global-writes/package.json index 270a532b60d..749c3de4bc1 100644 --- a/packages/compass-global-writes/package.json +++ b/packages/compass-global-writes/package.json @@ -45,6 +45,7 @@ "test-cov": "nyc --compact=false --produce-source-map=false -x \"**/*.spec.*\" --reporter=lcov --reporter=text --reporter=html npm run test", "test-watch": "npm run test -- --watch", "test-ci": "npm run test-cov", + "test-ci-electron": "npm run test-electron", "reformat": "npm run eslint . -- --fix && npm run prettier -- --write ." }, "dependencies": { 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 9bfd68bf525..59862baf0f0 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 @@ -56,69 +56,81 @@ describe('Compass GlobalWrites Plugin', function () { expect(within(rows[2]).getByText('EMEA (Frankfurt)')).to.be.visible; }); - it('allows top level search', function () { - render( - - ); + 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; - }); + const searchInput = screen.getByLabelText('Search for a location'); + expect(searchInput).to.be.visible; + userEvent.type(searchInput, 'Slo'); + const rows = screen.getAllByRole('row'); + // screen.debug(rows[1]); + 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( - - ); + 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; + 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; + }); }); }); From 8da999aa4e24a100193ece04eea17cb8478a863c Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Fri, 18 Oct 2024 14:19:59 +0200 Subject: [PATCH 08/13] move tanstack import --- package-lock.json | 4 ++-- packages/compass-components/package.json | 1 + packages/compass-components/src/components/leafygreen.tsx | 5 +++++ packages/compass-global-writes/package.json | 3 +-- .../src/components/shard-zones-table.tsx | 8 +++----- 5 files changed, 12 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 55669d1e164..62cf9843702 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43775,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", @@ -45011,7 +45012,6 @@ "@mongodb-js/compass-field-store": "^9.19.1", "@mongodb-js/compass-logging": "^1.4.8", "@mongodb-js/compass-telemetry": "^1.2.1", - "@tanstack/table-core": "^8.14.0", "hadron-app-registry": "^9.2.7", "lodash": "^4.17.21", "mongodb-ns": "^2.4.2", @@ -55919,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", @@ -56760,7 +56761,6 @@ "@mongodb-js/prettier-config-compass": "^1.0.2", "@mongodb-js/testing-library-compass": "^1.0.2", "@mongodb-js/tsconfig-compass": "^1.0.5", - "@tanstack/table-core": "^8.14.0", "@types/chai": "^4.2.21", "@types/chai-dom": "^0.0.10", "@types/mocha": "^9.0.0", diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json index 1505afbd01c..eec0305867c 100644 --- a/packages/compass-components/package.json +++ b/packages/compass-components/package.json @@ -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..92fe9c4af32 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'; + export type { LGColumnDef, HeaderGroup, @@ -172,4 +175,6 @@ export { InfoSprinkle, flexRender, useLeafyGreenTable, + getFilteredRowModel, + type LgTableRowType, }; diff --git a/packages/compass-global-writes/package.json b/packages/compass-global-writes/package.json index 749c3de4bc1..095d2779729 100644 --- a/packages/compass-global-writes/package.json +++ b/packages/compass-global-writes/package.json @@ -62,8 +62,7 @@ "react": "^17.0.2", "react-redux": "^8.1.3", "redux": "^4.2.1", - "redux-thunk": "^2.4.2", - "@tanstack/table-core": "^8.14.0" + "redux-thunk": "^2.4.2" }, "devDependencies": { "@mongodb-js/eslint-config-compass": "^1.1.7", 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 2ffc7a33c88..44e058d9a43 100644 --- a/packages/compass-global-writes/src/components/shard-zones-table.tsx +++ b/packages/compass-global-writes/src/components/shard-zones-table.tsx @@ -1,8 +1,4 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'; -import { - getFilteredRowModel, - type Row as ReactTableRow, -} from '@tanstack/table-core'; import { Table, TableBody, @@ -19,6 +15,8 @@ import { type HeaderGroup, SearchInput, type LGTableDataType, + getFilteredRowModel, + LgTableRowType, } from '@mongodb-js/compass-components'; import type { ShardZoneData } from '../store/reducer'; @@ -78,7 +76,7 @@ const parseData = (shardZones: ShardZoneData[]): ShardZoneExpandableRow[] => { }; const hasFilteredChildren = ( - row: ReactTableRow> + row: LgTableRowType> ) => row.subRows.filter( (subRow) => Object.values(subRow.columnFilters).includes(true) // columnFilters: e.g. { __global__: true } From 90c177a3bf341cb4792e93e92c84d06324e0ea76 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Fri, 18 Oct 2024 15:52:12 +0200 Subject: [PATCH 09/13] type --- .../compass-global-writes/src/components/shard-zones-table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 44e058d9a43..7f41394aae8 100644 --- a/packages/compass-global-writes/src/components/shard-zones-table.tsx +++ b/packages/compass-global-writes/src/components/shard-zones-table.tsx @@ -16,7 +16,7 @@ import { SearchInput, type LGTableDataType, getFilteredRowModel, - LgTableRowType, + type LgTableRowType, } from '@mongodb-js/compass-components'; import type { ShardZoneData } from '../store/reducer'; From 69831d0ec7faedc355d2c04890ebc32de86f4ebf Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Wed, 23 Oct 2024 13:53:22 +0200 Subject: [PATCH 10/13] Update packages/compass-global-writes/src/components/shard-zones-table.spec.tsx Co-authored-by: Sergey Petushkov --- .../src/components/shard-zones-table.spec.tsx | 1 - 1 file changed, 1 deletion(-) 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 59862baf0f0..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 @@ -88,7 +88,6 @@ describe('Compass GlobalWrites Plugin', function () { expect(searchInput).to.be.visible; userEvent.type(searchInput, 'Slo'); const rows = screen.getAllByRole('row'); - // screen.debug(rows[1]); 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; From cc0bd0cdb1b04d539a8c55d15d1968150b598cc4 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Wed, 23 Oct 2024 13:54:12 +0200 Subject: [PATCH 11/13] Update packages/compass-global-writes/src/components/shard-zones-table.tsx Co-authored-by: Sergey Petushkov --- .../src/components/shard-zones-table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 7f41394aae8..c73ee2c93d3 100644 --- a/packages/compass-global-writes/src/components/shard-zones-table.tsx +++ b/packages/compass-global-writes/src/components/shard-zones-table.tsx @@ -78,9 +78,9 @@ const parseData = (shardZones: ShardZoneData[]): ShardZoneExpandableRow[] => { const hasFilteredChildren = ( row: LgTableRowType> ) => - row.subRows.filter( + row.subRows.some( (subRow) => Object.values(subRow.columnFilters).includes(true) // columnFilters: e.g. { __global__: true } - ).length > 0; + ); export function ShardZonesTable({ shardZones, From b5ff78928d74445e0d014693fd466ae66331022e Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Wed, 23 Oct 2024 14:13:13 +0200 Subject: [PATCH 12/13] add comment --- packages/compass-components/src/components/leafygreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compass-components/src/components/leafygreen.tsx b/packages/compass-components/src/components/leafygreen.tsx index 92fe9c4af32..a6f9b120553 100644 --- a/packages/compass-components/src/components/leafygreen.tsx +++ b/packages/compass-components/src/components/leafygreen.tsx @@ -55,7 +55,7 @@ import { useLeafyGreenTable, getFilteredRowModel, } from '@leafygreen-ui/table'; -import type { Row as LgTableRowType } from '@tanstack/table-core'; +import type { Row as LgTableRowType } from '@tanstack/table-core'; // TODO(COMPASS-8437): import from LG export type { LGColumnDef, From fa2012f7db5ef9660f983575b6b6465755e5ede7 Mon Sep 17 00:00:00 2001 From: Paula Stachova Date: Wed, 23 Oct 2024 14:17:32 +0200 Subject: [PATCH 13/13] Update packages/compass-global-writes/src/components/shard-zones-table.tsx Co-authored-by: Sergey Petushkov --- .../src/components/shard-zones-table.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 c73ee2c93d3..3453c36b613 100644 --- a/packages/compass-global-writes/src/components/shard-zones-table.tsx +++ b/packages/compass-global-writes/src/components/shard-zones-table.tsx @@ -62,9 +62,7 @@ const parseData = (shardZones: ShardZoneData[]): ShardZoneExpandableRow[] => { Record >((groups, next) => { const { typeOneIsoCode, isoCode } = next; - if (!groups[typeOneIsoCode]) { - groups[typeOneIsoCode] = { ...parseRow(next), subRows: [] }; - } + groups[typeOneIsoCode] ??= { ...parseRow(next), subRows: [] }; if (typeOneIsoCode === isoCode) { Object.assign(groups[typeOneIsoCode], parseRow(next)); } else {