random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-07-03 02:25:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Disable column selection for Mongo. Remove extra refresh button

Browse Source
This commit is contained in:
Laurent Nguyen 2024-08-23 17:16:43 +02:00
parent 26b6de4c53
commit 5e92a0c5d7
3 changed files with 32 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,9 @@
import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos"; import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
import { Button, Input, TableRowId, makeStyles, shorthands } from "@fluentui/react-components"; import { Button, Input, TableRowId, makeStyles, shorthands } from "@fluentui/react-components";
import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons"; import { Dismiss16Filled } from "@fluentui/react-icons";
import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants"; import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils"; import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
import MongoUtility from "Common/MongoUtility"; import MongoUtility from "Common/MongoUtility";
import { StyleConstants } from "Common/StyleConstants";
import { createDocument } from "Common/dataAccess/createDocument"; import { createDocument } from "Common/dataAccess/createDocument";
import { import {
deleteDocument as deleteNoSqlDocument, deleteDocument as deleteNoSqlDocument,
@ -104,17 +103,6 @@ export const useDocumentsTabStyles = makeStyles({
...shorthands.outline("1px", "dotted"), ...shorthands.outline("1px", "dotted"),
}, },
}, },
floatingControlsContainer: {
position: "relative",
},
floatingControls: {
position: "absolute",
top: "6px",
right: 0,
float: "right",
backgroundColor: "white",
zIndex: 1,
},
}); });
export class DocumentsTabV2 extends TabsBase { export class DocumentsTabV2 extends TabsBase {
@ -2007,21 +1995,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
> >
<Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}> <Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
<div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}> <div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
<div className={styles.floatingControlsContainer}>
<div className={styles.floatingControls}>
<Button
appearance="transparent"
aria-label="Refresh"
size="small"
icon={<ArrowClockwise16Filled />}
style={{
color: StyleConstants.AccentMedium,
}}
onClick={() => refreshDocumentsGrid(false)}
onKeyDown={onRefreshKeyInput}
/>
</div>
</div>
<div className={styles.tableContainer}> <div className={styles.tableContainer}>
<div <div
style={ style={
@ -2040,12 +2013,13 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
size={tableContainerSizePx} size={tableContainerSizePx}
selectedColumnIds={selectedColumnIds} selectedColumnIds={selectedColumnIds}
columnDefinitions={columnDefinitions} columnDefinitions={columnDefinitions}
isSelectionDisabled={ isRowSelectionDisabled={
configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
} }
onColumnSelectionChange={onColumnSelectionChange} onColumnSelectionChange={onColumnSelectionChange}
defaultColumnSelection={getInitialColumnSelection()} defaultColumnSelection={getInitialColumnSelection()}
collection={_collection} collection={_collection}
isColumnSelectionDisabled={isPreferredApiMongoDB}
/> />
</div> </div>
</div> </div>

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

@ -25,7 +25,7 @@ describe("DocumentsTableComponent", () => {
{ id: ID_HEADER, label: "ID", isPartitionKey: false }, { id: ID_HEADER, label: "ID", isPartitionKey: false },
{ id: PARTITION_KEY_HEADER, label: "Partition Key", isPartitionKey: true }, { id: PARTITION_KEY_HEADER, label: "Partition Key", isPartitionKey: true },
], ],
isSelectionDisabled: false, isRowSelectionDisabled: false,
collection: { collection: {
databaseId: "db", databaseId: "db",
id: ((): string => "coll") as ko.Observable<string>, id: ((): string => "coll") as ko.Observable<string>,
@ -44,7 +44,7 @@ describe("DocumentsTableComponent", () => {
it("should not render selection column when isSelectionDisabled is true", () => { it("should not render selection column when isSelectionDisabled is true", () => {
const props: IDocumentsTableComponentProps = createMockProps(); const props: IDocumentsTableComponentProps = createMockProps();
props.isSelectionDisabled = true; props.isRowSelectionDisabled = true;
const wrapper = mount(<DocumentsTableComponent {...props} />); const wrapper = mount(<DocumentsTableComponent {...props} />);
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });

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

@ -74,10 +74,11 @@ export interface IDocumentsTableComponentProps {
selectedColumnIds: string[]; selectedColumnIds: string[];
columnDefinitions: ColumnDefinition[]; columnDefinitions: ColumnDefinition[];
style?: React.CSSProperties; style?: React.CSSProperties;
isSelectionDisabled?: boolean; isRowSelectionDisabled?: boolean;
collection: ViewModels.CollectionBase; collection: ViewModels.CollectionBase;
onColumnSelectionChange?: (newSelectedColumnIds: string[]) => void; onColumnSelectionChange?: (newSelectedColumnIds: string[]) => void;
defaultColumnSelection?: string[]; defaultColumnSelection?: string[];
isColumnSelectionDisabled?: boolean;
} }
interface TableRowData extends RowStateBase<DocumentsTableComponentItem> { interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@ -105,10 +106,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
size, size,
selectedColumnIds, selectedColumnIds,
columnDefinitions, columnDefinitions,
isSelectionDisabled, isRowSelectionDisabled: isSelectionDisabled,
collection, collection,
onColumnSelectionChange, onColumnSelectionChange,
defaultColumnSelection, defaultColumnSelection,
isColumnSelectionDisabled,
}: IDocumentsTableComponentProps) => { }: IDocumentsTableComponentProps) => {
const styles = useDocumentsTabStyles(); const styles = useDocumentsTabStyles();
@ -239,9 +241,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
<MenuItem icon={<ArrowResetRegular />} onClick={(e) => onSortClick(e, undefined, undefined)}> <MenuItem icon={<ArrowResetRegular />} onClick={(e) => onSortClick(e, undefined, undefined)}>
Reset sorting Reset sorting
</MenuItem> </MenuItem>
<MenuItem key="editcolumns" icon={<EditRegular />} onClick={openColumnSelectionPane}> {!isColumnSelectionDisabled && (
Edit columns <MenuItem key="editcolumns" icon={<EditRegular />} onClick={openColumnSelectionPane}>
</MenuItem> Edit columns
</MenuItem>
)}
<MenuDivider /> <MenuDivider />
<MenuItem <MenuItem
key="keyboardresize" key="keyboardresize"
@ -250,22 +254,24 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
> >
Resize with left/right arrow keys Resize with left/right arrow keys
</MenuItem> </MenuItem>
<MenuItem {!isColumnSelectionDisabled && (
key="remove" <MenuItem
icon={<DeleteRegular />} key="remove"
onClick={() => { icon={<DeleteRegular />}
// Remove column id from selectedColumnIds onClick={() => {
const index = selectedColumnIds.indexOf(column.id); // Remove column id from selectedColumnIds
if (index === -1) { const index = selectedColumnIds.indexOf(column.id);
return; if (index === -1) {
} return;
const newSelectedColumnIds = [...selectedColumnIds]; }
newSelectedColumnIds.splice(index, 1); const newSelectedColumnIds = [...selectedColumnIds];
onColumnSelectionChange(newSelectedColumnIds); newSelectedColumnIds.splice(index, 1);
}} onColumnSelectionChange(newSelectedColumnIds);
> }}
Remove column >
</MenuItem> Remove column
</MenuItem>
)}
</MenuList> </MenuList>
</MenuPopover> </MenuPopover>
</Menu> </Menu>