random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Disable table selection for Fabric/read-only (#1855) 

* Disable table selection for Fabric/read-only

* Update unit tests

* Fix format

---------

Co-authored-by: Laurent Nguyen <languye@microsoft.com>
This commit is contained in:
Laurent Nguyen 2024-06-03 19:11:16 +02:00 committed by GitHub
parent 495296602a
commit b76d83d8e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 1011 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -1779,6 +1779,9 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
selectedRows={selectedRows}
size={tableContainerSizePx}
columnHeaders={columnHeaders}
isSelectionDisabled={
configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
}
/>
{tableItems.length > 0 && (
<a

8
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
View File

@ -24,6 +24,7 @@ describe("DocumentsTableComponent", () => {
idHeader: ID_HEADER,
partitionKeyHeaders: [PARTITION_KEY_HEADER],
},
isSelectionDisabled: false,
});
it("should render documents and partition keys in header", () => {
@ -31,4 +32,11 @@ describe("DocumentsTableComponent", () => {
const wrapper = mount(<DocumentsTableComponent {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("should not render selection column when isSelectionDisabled is true", () => {
const props: IDocumentsTableComponentProps = createMockProps();
props.isSelectionDisabled = true;
const wrapper = mount(<DocumentsTableComponent {...props} />);
expect(wrapper).toMatchSnapshot();
});
});

30
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
View File

@ -41,6 +41,7 @@ export interface IDocumentsTableComponentProps {
size: { height: number; width: number };
columnHeaders: ColumnHeaders;
style?: React.CSSProperties;
isSelectionDisabled?: boolean;
}
interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@ -61,6 +62,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
style,
size,
columnHeaders,
isSelectionDisabled,
}: IDocumentsTableComponentProps) => {
const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
@ -127,12 +129,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
const { item, selected, appearance, onClick, onKeyDown } = data[index];
return (
<TableRow aria-rowindex={index + 2} style={style} key={item.id} aria-selected={selected} appearance={appearance}>
<TableSelectionCell
checked={selected}
checkboxIndicator={{ "aria-label": "Select row" }}
onClick={onClick}
onKeyDown={onKeyDown}
/>
{!isSelectionDisabled && (
<TableSelectionCell
checked={selected}
checkboxIndicator={{ "aria-label": "Select row" }}
onClick={onClick}
onKeyDown={onKeyDown}
/>
)}
{columns.map((column) => (
<TableCell
key={column.columnId}
@ -226,12 +230,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
<Table className="documentsTable" noNativeElements {...tableProps}>
<TableHeader className="documentsTableHeader">
<TableRow style={{ width: size ? size.width - 15 : "100%" }}>
<TableSelectionCell
checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
onClick={toggleAllRows}
onKeyDown={toggleAllKeydown}
checkboxIndicator={{ "aria-label": "Select all rows " }}
/>
{!isSelectionDisabled && (
<TableSelectionCell
checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
onClick={toggleAllRows}
onKeyDown={toggleAllKeydown}
checkboxIndicator={{ "aria-label": "Select all rows " }}
/>
)}
{columns.map((column /* index */) => (
<Menu openOnContext key={column.columnId}>
<MenuTrigger>

1
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
View File

@ -532,6 +532,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
"partitionKeyHeaders": Array [],
}
}
isSelectionDisabled={true}
items={Array []}
onItemClicked={[Function]}
onSelectedRowsChange={[Function]}

981
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
View File

@ -1,5 +1,985 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DocumentsTableComponent should not render selection column when isSelectionDisabled is true 1`] = `
<DocumentsTableComponent
columnHeaders={
Object {
"idHeader": "id",
"partitionKeyHeaders": Array [
"partitionKey",
],
}
}
isSelectionDisabled={true}
items={
Array [
Object {
"id": "1",
"partitionKey": "pk1",
},
Object {
"id": "2",
"partitionKey": "pk2",
},
Object {
"id": "3",
"partitionKey": "pk3",
},
]
}
onItemClicked={[Function]}
onSelectedRowsChange={[Function]}
selectedRows={Set {}}
size={
Object {
"height": 0,
"width": 0,
}
}
>
<Table
aria-label="Filtered documents table"
className="documentsTable"
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":3}}"
noNativeElements={true}
role="grid"
size="extra-small"
style={
Object {
"minWidth": "fit-content",
}
}
>
<div
aria-label="Filtered documents table"
className="fui-Table documentsTable ___1kbqy50_18rlg51 fgkb47j fhovq9v ftgm304"
data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":3}}"
role="grid"
style={
Object {
"minWidth": "fit-content",
}
}
>
<TableHeader
className="documentsTableHeader"
>
<div
className="fui-TableHeader documentsTableHeader ___oeyxrt0_1baslyg ftgm304"
role="rowgroup"
>
<TableRow
style={
Object {
"width": -15,
}
}
>
<div
className="fui-TableRow ___lntl370_1bdwmey f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb fy9rknc f22iagw f122n59"
role="row"
style={
Object {
"width": -15,
}
}
>
<Menu
key="id"
openOnContext={true}
>
<ContextSelector.Provider
value={
Object {
"checkedValues": Object {},
"hasCheckmarks": false,
"hasIcons": false,
"inline": false,
"isSubmenu": false,
"menuPopoverRef": Object {
"current": null,
},
"mountNode": null,
"onCheckedValueChange": [Function],
"open": false,
"openOnContext": true,
"openOnHover": false,
"persistOnItemClick": false,
"setOpen": [Function],
"triggerId": "menu17",
"triggerRef": Object {
"current": <div
class="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
data-tabster="{\\"restorer\\":{\\"type\\":1}}"
id="menu17"
role="columnheader"
style="width: 50px; min-width: 50px; max-width: 50px;"
>
<div
class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
role="presentation"
>
id
</div>
<span
class="fui-TableHeaderCell__aside"
>
<div
aria-hidden="true"
aria-label="Resize column"
aria-valuetext="50 pixels"
class="fui-TableResizeHandle ___l1ulde0_1gn6xqj f1euv43f f1e31b4d f15twtuk f1yab3r1 fjw5fx7 f1hu3pq6 fn2i5td f19f4twv f1eybr6b fc3en1c fk73vx1 f13u1uyl fezquic f19g0ac f1tkae59 ftqa4ok f15pjodv ftgrb5f f2df6js fshsryb f11ef69 f12lb1dx fu4ulse fw2wsqs f1swzn7y"
data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
role="separator"
/>
</span>
</div>,
},
}
}
>
<MenuTrigger
key=".0"
>
<TableHeaderCell
aside={
<TableResizeHandle
aria-hidden={true}
aria-label="Resize column"
aria-valuetext="50 pixels"
data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
onBlur={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
role="separator"
/>
}
className="documentsTableCell"
data-tabster="{\\"restorer\\":{\\"type\\":1}}"
id="menu17"
key="id"
onContextMenu={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
>
<div
className="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
data-tabster="{\\"restorer\\":{\\"type\\":1}}"
id="menu17"
onContextMenu={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
role="columnheader"
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
>
<div
className="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="presentation"
>
id
</div>
<span
className="fui-TableHeaderCell__aside"
>
<TableResizeHandle
aria-hidden={true}
aria-label="Resize column"
aria-valuetext="50 pixels"
data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
onBlur={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
role="separator"
>
<div
aria-hidden={true}
aria-label="Resize column"
aria-valuetext="50 pixels"
className="fui-TableResizeHandle ___l1ulde0_1gn6xqj f1euv43f f1e31b4d f15twtuk f1yab3r1 fjw5fx7 f1hu3pq6 fn2i5td f19f4twv f1eybr6b fc3en1c fk73vx1 f13u1uyl fezquic f19g0ac f1tkae59 ftqa4ok f15pjodv ftgrb5f f2df6js fshsryb f11ef69 f12lb1dx fu4ulse fw2wsqs f1swzn7y"
data-tabster="{\\"focusable\\":{\\"ignoreKeydown\\":{\\"ArrowLeft\\":true,\\"ArrowRight\\":true}}}"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
onTouchStart={[Function]}
role="separator"
/>
</TableResizeHandle>
</span>
</div>
</TableHeaderCell>
</MenuTrigger>
</ContextSelector.Provider>
</Menu>
<Menu
key="partitionKey"
openOnContext={true}
>
<ContextSelector.Provider
value={
Object {
"checkedValues": Object {},
"hasCheckmarks": false,
"hasIcons": false,
"inline": false,
"isSubmenu": false,
"menuPopoverRef": Object {
"current": null,
},
"mountNode": null,
"onCheckedValueChange": [Function],
"open": false,
"openOnContext": true,
"openOnHover": false,
"persistOnItemClick": false,
"setOpen": [Function],
"triggerId": "menu18",
"triggerRef": Object {
"current": <div
class="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
data-tabster="{\\"restorer\\":{\\"type\\":1}}"
id="menu18"
role="columnheader"
style="width: 50px; min-width: 50px; max-width: 50px;"
>
<div
class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
role="presentation"
>
<span
title="partitionKey"
>
partitionKey
</span>
</div>
</div>,
},
}
}
>
<MenuTrigger
key=".0"
>
<TableHeaderCell
aside={null}
className="documentsTableCell"
data-tabster="{\\"restorer\\":{\\"type\\":1}}"
id="menu18"
key="partitionKey"
onContextMenu={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
>
<div
className="fui-TableHeaderCell documentsTableCell ___19selgd_3kxzd70 figsok6 f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fhix6mv fha7anx f1fmzww4 fs9qmxf f187m4uq f145mzao f1uha7eq f10pi13n f22iagw fqerorx f1neuvcm fkjuxzh f10tiqix"
data-tabster="{\\"restorer\\":{\\"type\\":1}}"
id="menu18"
onContextMenu={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
role="columnheader"
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
>
<div
className="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="presentation"
>
<span
title="partitionKey"
>
partitionKey
</span>
</div>
</div>
</TableHeaderCell>
</MenuTrigger>
</ContextSelector.Provider>
</Menu>
</div>
</TableRow>
</div>
</TableHeader>
<TableBody>
<div
className="fui-TableBody ___oeyxrt0_1baslyg ftgm304"
role="rowgroup"
>
<List
direction="ltr"
height={-53}
itemCount={3}
itemData={
Array [
Object {
"appearance": "none",
"item": Object {
"id": "1",
"partitionKey": "pk1",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 0,
"selected": false,
},
Object {
"appearance": "none",
"item": Object {
"id": "2",
"partitionKey": "pk2",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 1,
"selected": false,
},
Object {
"appearance": "none",
"item": Object {
"id": "3",
"partitionKey": "pk3",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 2,
"selected": false,
},
]
}
itemSize={30}
layout="vertical"
overscanCount={2}
style={
Object {
"overflowY": "scroll",
}
}
useIsScrolling={false}
width={0}
>
<div
onScroll={[Function]}
style={
Object {
"WebkitOverflowScrolling": "touch",
"direction": "ltr",
"height": -53,
"overflow": "auto",
"overflowY": "scroll",
"position": "relative",
"width": 0,
"willChange": "transform",
}
}
>
<div
style={
Object {
"height": 90,
"pointerEvents": undefined,
"width": "100%",
}
}
>
<RenderRow
data={
Array [
Object {
"appearance": "none",
"item": Object {
"id": "1",
"partitionKey": "pk1",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 0,
"selected": false,
},
Object {
"appearance": "none",
"item": Object {
"id": "2",
"partitionKey": "pk2",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 1,
"selected": false,
},
Object {
"appearance": "none",
"item": Object {
"id": "3",
"partitionKey": "pk3",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 2,
"selected": false,
},
]
}
index={0}
key="0"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 0,
"width": "100%",
}
}
>
<TableRow
appearance="none"
aria-rowindex={2}
aria-selected={false}
key="1"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 0,
"width": "100%",
}
}
>
<div
aria-rowindex={2}
aria-selected={false}
className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
role="row"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 0,
"width": "100%",
}
}
>
<TableCell
className="documentsTableCell"
key="id"
onClick={[Function]}
onKeyDown={[Function]}
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={0}
>
<div
className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
onClick={[Function]}
onKeyDown={[Function]}
role="cell"
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={0}
>
<TableCellLayout
title="1"
truncate={true}
>
<div
className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
title="1"
>
<div
className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
>
<span
className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
>
1
</span>
</div>
</div>
</TableCellLayout>
</div>
</TableCell>
<TableCell
className="documentsTableCell"
key="partitionKey"
onClick={[Function]}
onKeyDown={[Function]}
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={-1}
>
<div
className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
onClick={[Function]}
onKeyDown={[Function]}
role="cell"
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={-1}
>
<TableCellLayout
title="pk1"
truncate={true}
>
<div
className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
title="pk1"
>
<div
className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
>
<span
className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
>
pk1
</span>
</div>
</div>
</TableCellLayout>
</div>
</TableCell>
</div>
</TableRow>
</RenderRow>
<RenderRow
data={
Array [
Object {
"appearance": "none",
"item": Object {
"id": "1",
"partitionKey": "pk1",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 0,
"selected": false,
},
Object {
"appearance": "none",
"item": Object {
"id": "2",
"partitionKey": "pk2",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 1,
"selected": false,
},
Object {
"appearance": "none",
"item": Object {
"id": "3",
"partitionKey": "pk3",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 2,
"selected": false,
},
]
}
index={1}
key="1"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 30,
"width": "100%",
}
}
>
<TableRow
appearance="none"
aria-rowindex={3}
aria-selected={false}
key="2"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 30,
"width": "100%",
}
}
>
<div
aria-rowindex={3}
aria-selected={false}
className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
role="row"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 30,
"width": "100%",
}
}
>
<TableCell
className="documentsTableCell"
key="id"
onClick={[Function]}
onKeyDown={[Function]}
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={0}
>
<div
className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
onClick={[Function]}
onKeyDown={[Function]}
role="cell"
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={0}
>
<TableCellLayout
title="2"
truncate={true}
>
<div
className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
title="2"
>
<div
className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
>
<span
className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
>
2
</span>
</div>
</div>
</TableCellLayout>
</div>
</TableCell>
<TableCell
className="documentsTableCell"
key="partitionKey"
onClick={[Function]}
onKeyDown={[Function]}
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={-1}
>
<div
className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
onClick={[Function]}
onKeyDown={[Function]}
role="cell"
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={-1}
>
<TableCellLayout
title="pk2"
truncate={true}
>
<div
className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
title="pk2"
>
<div
className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
>
<span
className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
>
pk2
</span>
</div>
</div>
</TableCellLayout>
</div>
</TableCell>
</div>
</TableRow>
</RenderRow>
<RenderRow
data={
Array [
Object {
"appearance": "none",
"item": Object {
"id": "1",
"partitionKey": "pk1",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 0,
"selected": false,
},
Object {
"appearance": "none",
"item": Object {
"id": "2",
"partitionKey": "pk2",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 1,
"selected": false,
},
Object {
"appearance": "none",
"item": Object {
"id": "3",
"partitionKey": "pk3",
},
"onClick": [Function],
"onKeyDown": [Function],
"rowId": 2,
"selected": false,
},
]
}
index={2}
key="2"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 60,
"width": "100%",
}
}
>
<TableRow
appearance="none"
aria-rowindex={4}
aria-selected={false}
key="3"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 60,
"width": "100%",
}
}
>
<div
aria-rowindex={4}
aria-selected={false}
className="fui-TableRow ___1iajlcl_snm7au0 f19n0e5 f1ewtqcl f1jazu75 f1xeqee6 fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f1wfn5kd f1g4hkjv f15ngxrw fjbbrdp f1t94bn6 feu1g3u f1uorfem fw60kww fy9rknc f22iagw f122n59"
role="row"
style={
Object {
"height": 30,
"left": 0,
"position": "absolute",
"right": undefined,
"top": 60,
"width": "100%",
}
}
>
<TableCell
className="documentsTableCell"
key="id"
onClick={[Function]}
onKeyDown={[Function]}
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={0}
>
<div
className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
onClick={[Function]}
onKeyDown={[Function]}
role="cell"
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={0}
>
<TableCellLayout
title="3"
truncate={true}
>
<div
className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
title="3"
>
<div
className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
>
<span
className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
>
3
</span>
</div>
</div>
</TableCellLayout>
</div>
</TableCell>
<TableCell
className="documentsTableCell"
key="partitionKey"
onClick={[Function]}
onKeyDown={[Function]}
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={-1}
>
<div
className="fui-TableCell documentsTableCell ___o2cmzw0_1ilyrce f10pi13n f1nbblvp f1vdfbxk f1ov4xf1 f1f5gg8d fz36nt7 f9znhxp fqrak0z f1o2ludy f1kjnpwc fxmnebo f1witrsb f22iagw f10tiqix f122n59 fqerorx f1neuvcm fkjuxzh f1pha7fy"
onClick={[Function]}
onKeyDown={[Function]}
role="cell"
style={
Object {
"maxWidth": 50,
"minWidth": 50,
"width": 50,
}
}
tabIndex={-1}
>
<TableCellLayout
title="pk3"
truncate={true}
>
<div
className="fui-TableCellLayout ___16owy0g_d3kle00 f22iagw f122n59 fsnqrgy fylz90v fqerorx f1neuvcm fkjuxzh f1p9o1ba"
title="pk3"
>
<div
className="fui-TableCellLayout__content ___1vq3ijp_1wyv0tp f22iagw f1vx9l62 f1p9o1ba"
>
<span
className="fui-TableCellLayout__main ___1q6a9l3_1koyf1t f1p9o1ba fz5stix f1cmbuwj"
>
pk3
</span>
</div>
</div>
</TableCellLayout>
</div>
</TableCell>
</div>
</TableRow>
</RenderRow>
</div>
</div>
</List>
</div>
</TableBody>
</div>
</Table>
</DocumentsTableComponent>
`;
exports[`DocumentsTableComponent should render documents and partition keys in header 1`] = `
<DocumentsTableComponent
columnHeaders={
@ -10,6 +990,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
],
}
}
isSelectionDisabled={false}
items={
Array [
Object {