mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-19 17:01:13 +00:00
751 lines
22 KiB
TypeScript
751 lines
22 KiB
TypeScript
import { extractPartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
|
||
import {
|
||
DetailsList,
|
||
DetailsListLayoutMode,
|
||
IColumn,
|
||
IIconProps,
|
||
IImageProps,
|
||
Image,
|
||
ImageFit,
|
||
List,
|
||
PrimaryButton,
|
||
SelectionMode,
|
||
Stack,
|
||
Text,
|
||
TextField
|
||
} from "@fluentui/react";
|
||
import * as React from "react";
|
||
import SplitterLayout from "react-splitter-layout";
|
||
import CloseIcon from "../../../images/close-black.svg";
|
||
import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
|
||
import DiscardIcon from "../../../images/discard.svg";
|
||
import DocumentWaterMark from "../../../images/DocumentWaterMark.svg";
|
||
import NewDocumentIcon from "../../../images/NewDocument.svg";
|
||
import SaveIcon from "../../../images/save-cosmos.svg";
|
||
import { Areas } from "../../Common/Constants";
|
||
// import { createDocument } from "../../Common/dataAccess/createDocument";
|
||
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
|
||
import { logError } from "../../Common/Logger";
|
||
import { createDocument, deleteDocument, queryDocuments, updateDocument } from "../../Common/MongoProxyClient";
|
||
import * as ViewModels from "../../Contracts/ViewModels";
|
||
import { Action } from "../../Shared/Telemetry/TelemetryConstants";
|
||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||
import { userContext } from "../../UserContext";
|
||
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
|
||
import { EditorReact } from "../Controls/Editor/EditorReact";
|
||
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
|
||
import DocumentId from "../Tree/DocumentId";
|
||
import ObjectId from "../Tree/ObjectId";
|
||
import DocumentsTab from "./DocumentsTab1";
|
||
import { formatDocumentContent, getPartitionKeyDefinition, hasShardKeySpecified } from "./DocumentTabUtils";
|
||
|
||
const filterIcon: IIconProps = { iconName: "Filter" };
|
||
|
||
export interface IDocumentsTabContentState {
|
||
columns: IColumn[];
|
||
isModalSelection: boolean;
|
||
isCompactMode: boolean;
|
||
announcedMessage?: string;
|
||
isSuggestionVisible: boolean;
|
||
filter: string;
|
||
isFilterOptionVisible: boolean;
|
||
isEditorVisible: boolean;
|
||
documentContent: string;
|
||
documentIds: Array<DocumentId>;
|
||
editorKey: string;
|
||
selectedDocumentId?: DocumentId;
|
||
isEditorContentEdited: boolean;
|
||
}
|
||
|
||
export interface IDocument {
|
||
value: string;
|
||
id: string;
|
||
}
|
||
|
||
interface IButton {
|
||
visible: boolean;
|
||
enabled: boolean;
|
||
isSelected?: boolean;
|
||
}
|
||
|
||
const imageProps: Partial<IImageProps> = {
|
||
imageFit: ImageFit.centerContain,
|
||
width: 40,
|
||
height: 40,
|
||
style: { marginTop: "15px" },
|
||
};
|
||
|
||
const filterSuggestions = [{ value: `{"id": "foo"}` }, { value: "{ qty: { $gte: 20 } }" }];
|
||
const intitalDocumentContent = `{ \n "id": "replace_with_new_document_id" \n }`;
|
||
const idHeader = userContext.apiType === "Mongo" ? "_id" : "id";
|
||
|
||
export default class DocumentsTabContent extends React.Component<DocumentsTab, IDocumentsTabContentState> {
|
||
public newDocumentButton: IButton;
|
||
public saveNewDocumentButton: IButton;
|
||
public discardNewDocumentChangesButton: IButton;
|
||
public saveExisitingDocumentButton: IButton;
|
||
public discardExisitingDocumentChangesButton: IButton;
|
||
public deleteExisitingDocumentButton: IButton;
|
||
|
||
constructor(props: DocumentsTab) {
|
||
super(props);
|
||
|
||
this.newDocumentButton = {
|
||
visible: true,
|
||
enabled: true,
|
||
};
|
||
this.saveNewDocumentButton = {
|
||
visible: false,
|
||
enabled: true,
|
||
};
|
||
this.discardNewDocumentChangesButton = {
|
||
visible: false,
|
||
enabled: false,
|
||
};
|
||
this.saveExisitingDocumentButton = {
|
||
visible: false,
|
||
enabled: false,
|
||
};
|
||
this.discardExisitingDocumentChangesButton = {
|
||
visible: false,
|
||
enabled: false,
|
||
};
|
||
this.deleteExisitingDocumentButton = {
|
||
visible: false,
|
||
enabled: false,
|
||
};
|
||
|
||
const columns: IColumn[] = [
|
||
{
|
||
key: "_id",
|
||
name: idHeader,
|
||
minWidth: 90,
|
||
maxWidth: 140,
|
||
isResizable: true,
|
||
isCollapsible: true,
|
||
data: "string",
|
||
onRender: (item: DocumentId) => {
|
||
return (
|
||
<div onClick={() => this.handleRow(item)} className="documentIdItem">
|
||
{item.rid}
|
||
</div>
|
||
);
|
||
},
|
||
isPadded: true,
|
||
},
|
||
{
|
||
key: "column2",
|
||
name: props.partitionKeyPropertyHeader,
|
||
minWidth: 50,
|
||
maxWidth: 60,
|
||
isResizable: true,
|
||
isCollapsible: true,
|
||
data: "number",
|
||
},
|
||
];
|
||
|
||
this.state = {
|
||
columns: columns,
|
||
isModalSelection: false,
|
||
isCompactMode: false,
|
||
announcedMessage: undefined,
|
||
isSuggestionVisible: false,
|
||
filter: "",
|
||
isFilterOptionVisible: true,
|
||
isEditorVisible: false,
|
||
documentContent: intitalDocumentContent,
|
||
documentIds: [],
|
||
editorKey: "",
|
||
isEditorContentEdited: false,
|
||
};
|
||
}
|
||
|
||
componentDidMount(): void {
|
||
this.props.isExecuting(true);
|
||
this.updateTabButton();
|
||
if (userContext.apiType === "Mongo") {
|
||
this.queryDocumentsData();
|
||
}
|
||
}
|
||
|
||
queryDocumentsData = async (): Promise<void> => {
|
||
this.props.isExecuting(true);
|
||
this.props.isExecutionError(false);
|
||
try {
|
||
const { filter } = this.state;
|
||
const query: string = filter || "{}";
|
||
const queryDocumentsData = await queryDocuments(
|
||
this.props.collection.databaseId,
|
||
this.props.collection as ViewModels.Collection,
|
||
true,
|
||
query,
|
||
undefined
|
||
);
|
||
if (queryDocumentsData) {
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const nextDocumentIds = queryDocumentsData.documents.map((rawDocument: any) => {
|
||
const partitionKeyValue = rawDocument.partitionKeyValue;
|
||
return new DocumentId(this.props as DocumentsTab, rawDocument, partitionKeyValue);
|
||
});
|
||
this.setState({ documentIds: nextDocumentIds });
|
||
}
|
||
if (this.props.onLoadStartKey !== undefined) {
|
||
TelemetryProcessor.traceSuccess(
|
||
Action.Tab,
|
||
{
|
||
databaseName: this.props.collection.databaseId,
|
||
collectionName: this.props.collection.id(),
|
||
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: this.props.tabTitle(),
|
||
},
|
||
this.props.onLoadStartKey
|
||
);
|
||
}
|
||
this.props.isExecuting(false);
|
||
} catch (error) {
|
||
if (this.props.onLoadStartKey !== undefined) {
|
||
TelemetryProcessor.traceFailure(
|
||
Action.Tab,
|
||
{
|
||
databaseName: this.props.collection.databaseId,
|
||
collectionName: this.props.collection.id(),
|
||
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: this.props.tabTitle(),
|
||
error: getErrorMessage(error),
|
||
errorStack: getErrorStack(error),
|
||
},
|
||
this.props.onLoadStartKey
|
||
);
|
||
}
|
||
this.props.isExecuting(false);
|
||
}
|
||
};
|
||
|
||
handleRow = (row: DocumentId): void => {
|
||
if (this.state.isEditorContentEdited) {
|
||
const isChangesConfirmed = window.confirm("Your unsaved changes will be lost.")
|
||
if (isChangesConfirmed) {
|
||
this.handleRowContent(row);
|
||
this.setState({ isEditorContentEdited: false });
|
||
return;
|
||
}
|
||
} else {
|
||
this.handleRowContent(row);
|
||
}
|
||
};
|
||
|
||
handleRowContent = (row: DocumentId): void => {
|
||
const formattedDocumentContent = formatDocumentContent(row);
|
||
this.newDocumentButton = {
|
||
visible: false,
|
||
enabled: false,
|
||
};
|
||
this.saveNewDocumentButton = {
|
||
visible: false,
|
||
enabled: false,
|
||
};
|
||
this.discardNewDocumentChangesButton = {
|
||
visible: false,
|
||
enabled: false,
|
||
};
|
||
this.saveExisitingDocumentButton = {
|
||
visible: true,
|
||
enabled: false,
|
||
};
|
||
this.discardExisitingDocumentChangesButton = {
|
||
visible: true,
|
||
enabled: false,
|
||
};
|
||
this.deleteExisitingDocumentButton = {
|
||
visible: true,
|
||
enabled: true,
|
||
};
|
||
this.setState(
|
||
{
|
||
documentContent: formattedDocumentContent,
|
||
isEditorVisible: true,
|
||
editorKey: row.rid,
|
||
selectedDocumentId: row,
|
||
},
|
||
() => {
|
||
this.updateTabButton();
|
||
}
|
||
);
|
||
}
|
||
|
||
formatDocumentContent = (row: DocumentId): string => {
|
||
const { partitionKeyProperty, partitionKeyValue, rid, self, stringPartitionKeyValue, ts } = row;
|
||
const documentContent = JSON.stringify({
|
||
partitionKeyProperty: partitionKeyProperty || "",
|
||
partitionKeyValue: partitionKeyValue || "",
|
||
rid: rid || "",
|
||
self: self || "",
|
||
stringPartitionKeyValue: stringPartitionKeyValue || "",
|
||
ts: ts || "",
|
||
});
|
||
const formattedDocumentContent = documentContent.replace(/,/g, ",\n").replace("{", "{\n").replace("}", "\n}");
|
||
return formattedDocumentContent;
|
||
};
|
||
|
||
handleFilter = (): void => {
|
||
this.queryDocumentsData();
|
||
this.setState({
|
||
isSuggestionVisible: false,
|
||
});
|
||
};
|
||
|
||
private async updateMongoDocument(): Promise<void> {
|
||
const { selectedDocumentId, documentContent, documentIds } = this.state;
|
||
const { isExecutionError, isExecuting, tabTitle, collection, partitionKey, partitionKeyProperty } = this.props;
|
||
isExecutionError(false);
|
||
isExecuting(true);
|
||
const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: tabTitle(),
|
||
});
|
||
|
||
try {
|
||
const updatedDocument = await updateDocument(
|
||
collection.databaseId,
|
||
collection as ViewModels.Collection,
|
||
selectedDocumentId,
|
||
documentContent
|
||
);
|
||
documentIds.forEach((documentId: DocumentId) => {
|
||
if (documentId.rid === updatedDocument._rid) {
|
||
const partitionKeyArray = extractPartitionKey(
|
||
updatedDocument,
|
||
getPartitionKeyDefinition(partitionKey, partitionKeyProperty) as PartitionKeyDefinition
|
||
);
|
||
|
||
const partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
|
||
|
||
const id = new ObjectId(this.props as DocumentsTab, updatedDocument, partitionKeyValue);
|
||
documentId.id(id.id());
|
||
}
|
||
});
|
||
TelemetryProcessor.traceSuccess(
|
||
Action.UpdateDocument,
|
||
{
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: tabTitle(),
|
||
},
|
||
startKey
|
||
);
|
||
this.setState({ isEditorContentEdited: false });
|
||
isExecuting(false);
|
||
} catch (error) {
|
||
isExecutionError(true);
|
||
const errorMessage = getErrorMessage(error);
|
||
window.alert(errorMessage);
|
||
TelemetryProcessor.traceFailure(
|
||
Action.UpdateDocument,
|
||
{
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: tabTitle(),
|
||
error: errorMessage,
|
||
errorStack: getErrorStack(error),
|
||
},
|
||
startKey
|
||
);
|
||
isExecuting(false);
|
||
}
|
||
}
|
||
|
||
protected getTabsButtons(): CommandButtonComponentProps[] {
|
||
const buttons: CommandButtonComponentProps[] = [];
|
||
const label = "New Document";
|
||
if (this.newDocumentButton.visible) {
|
||
buttons.push({
|
||
iconSrc: NewDocumentIcon,
|
||
iconAlt: label,
|
||
onCommandClick: this.onNewDocumentClick,
|
||
commandButtonLabel: label,
|
||
ariaLabel: label,
|
||
hasPopup: false,
|
||
disabled: !this.newDocumentButton.enabled,
|
||
});
|
||
}
|
||
|
||
if (this.saveNewDocumentButton.visible) {
|
||
const label = "Save";
|
||
buttons.push({
|
||
iconSrc: SaveIcon,
|
||
iconAlt: label,
|
||
onCommandClick: this.onSaveNewDocumentClick,
|
||
commandButtonLabel: label,
|
||
ariaLabel: label,
|
||
hasPopup: false,
|
||
disabled: !this.saveNewDocumentButton.enabled,
|
||
});
|
||
}
|
||
|
||
if (this.discardNewDocumentChangesButton.visible) {
|
||
const label = "Discard";
|
||
buttons.push({
|
||
iconSrc: DiscardIcon,
|
||
iconAlt: label,
|
||
onCommandClick: this.onRevertNewDocumentClick,
|
||
commandButtonLabel: label,
|
||
ariaLabel: label,
|
||
hasPopup: false,
|
||
disabled: !this.discardNewDocumentChangesButton.enabled,
|
||
});
|
||
}
|
||
|
||
if (this.saveExisitingDocumentButton.visible) {
|
||
const label = "Update";
|
||
buttons.push({
|
||
...this,
|
||
updateMongoDocument: this.updateMongoDocument,
|
||
iconSrc: SaveIcon,
|
||
iconAlt: label,
|
||
onCommandClick: this.onSaveExisitingDocumentClick,
|
||
commandButtonLabel: label,
|
||
ariaLabel: label,
|
||
hasPopup: false,
|
||
disabled: !this.saveExisitingDocumentButton.enabled,
|
||
});
|
||
}
|
||
|
||
if (this.discardExisitingDocumentChangesButton.visible) {
|
||
const label = "Discard";
|
||
buttons.push({
|
||
...this,
|
||
setState: this.setState,
|
||
iconSrc: DiscardIcon,
|
||
iconAlt: label,
|
||
onCommandClick: this.onRevertExisitingDocumentClick,
|
||
commandButtonLabel: label,
|
||
ariaLabel: label,
|
||
hasPopup: false,
|
||
disabled: !this.discardExisitingDocumentChangesButton.enabled,
|
||
});
|
||
}
|
||
|
||
if (this.deleteExisitingDocumentButton.visible) {
|
||
const label = "Delete";
|
||
buttons.push({
|
||
...this,
|
||
iconSrc: DeleteDocumentIcon,
|
||
iconAlt: label,
|
||
onCommandClick: this.onDeleteExisitingDocumentClick,
|
||
commandButtonLabel: label,
|
||
ariaLabel: label,
|
||
hasPopup: false,
|
||
disabled: !this.deleteExisitingDocumentButton.enabled,
|
||
});
|
||
}
|
||
|
||
return buttons;
|
||
}
|
||
|
||
private onSaveExisitingDocumentClick(): void {
|
||
this.updateMongoDocument();
|
||
}
|
||
|
||
private async onDeleteExisitingDocumentClick(): Promise<void> {
|
||
const msg = userContext.apiType !== "Mongo"
|
||
? "Are you sure you want to delete the selected item ?"
|
||
: "Are you sure you want to delete the selected document ?";
|
||
|
||
const {
|
||
isExecutionError,
|
||
isExecuting,
|
||
collection,
|
||
} = this.props;
|
||
|
||
if (window.confirm(msg)) {
|
||
try {
|
||
isExecuting(true)
|
||
await deleteDocument(collection.databaseId, collection as ViewModels.Collection, this.state.selectedDocumentId);
|
||
isExecuting(false)
|
||
} catch (error) {
|
||
console.error(error);
|
||
isExecutionError(true);
|
||
isExecuting(false)
|
||
}
|
||
}
|
||
}
|
||
|
||
private onRevertExisitingDocumentClick(): void {
|
||
this.setState({
|
||
documentContent: formatDocumentContent(this.state.selectedDocumentId),
|
||
editorKey: Math.random().toString(),
|
||
});
|
||
}
|
||
|
||
private onNewDocumentClick = () => {
|
||
this.newDocumentButton = {
|
||
visible: true,
|
||
enabled: false,
|
||
};
|
||
this.saveNewDocumentButton = {
|
||
visible: true,
|
||
enabled: true,
|
||
};
|
||
|
||
this.discardNewDocumentChangesButton = {
|
||
visible: true,
|
||
enabled: true,
|
||
};
|
||
this.updateTabButton();
|
||
this.setState({
|
||
documentContent: intitalDocumentContent,
|
||
isEditorVisible: true,
|
||
editorKey: intitalDocumentContent,
|
||
});
|
||
};
|
||
|
||
private onSaveNewDocumentClick = () => {
|
||
if (userContext.apiType === "Mongo") {
|
||
this.onSaveNewMongoDocumentClick();
|
||
}
|
||
};
|
||
|
||
public onSaveNewMongoDocumentClick = async (): Promise<void> => {
|
||
const parsedDocumentContent = JSON.parse(this.state.documentContent);
|
||
const {
|
||
partitionKey,
|
||
partitionKeyProperty,
|
||
displayedError,
|
||
tabTitle,
|
||
isExecutionError,
|
||
isExecuting,
|
||
collection,
|
||
} = this.props;
|
||
displayedError("");
|
||
|
||
const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: tabTitle(),
|
||
});
|
||
|
||
if (
|
||
partitionKeyProperty &&
|
||
partitionKeyProperty !== "_id" &&
|
||
!hasShardKeySpecified(parsedDocumentContent, partitionKey, partitionKeyProperty)
|
||
) {
|
||
const message = `The document is lacking the shard property: ${partitionKeyProperty}`;
|
||
displayedError(message);
|
||
TelemetryProcessor.traceFailure(
|
||
Action.CreateDocument,
|
||
{
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: tabTitle(),
|
||
error: message,
|
||
},
|
||
startKey
|
||
);
|
||
logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
|
||
throw new Error("Document without shard key");
|
||
}
|
||
|
||
isExecutionError(false);
|
||
isExecuting(true);
|
||
try {
|
||
const savedDocument = await createDocument(
|
||
collection.databaseId,
|
||
collection as ViewModels.Collection,
|
||
partitionKeyProperty,
|
||
parsedDocumentContent
|
||
);
|
||
if (savedDocument) {
|
||
this.handleLoadMoreDocument();
|
||
TelemetryProcessor.traceSuccess(
|
||
Action.CreateDocument,
|
||
{
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: tabTitle(),
|
||
},
|
||
startKey
|
||
);
|
||
}
|
||
this.setState({ isEditorContentEdited: false });
|
||
this.queryDocumentsData();
|
||
isExecuting(false);
|
||
} catch (error) {
|
||
isExecutionError(true);
|
||
const errorMessage = getErrorMessage(error);
|
||
window.alert(errorMessage);
|
||
TelemetryProcessor.traceFailure(
|
||
Action.CreateDocument,
|
||
{
|
||
dataExplorerArea: Areas.Tab,
|
||
tabTitle: tabTitle(),
|
||
error: errorMessage,
|
||
errorStack: getErrorStack(error),
|
||
},
|
||
startKey
|
||
);
|
||
isExecuting(false);
|
||
}
|
||
};
|
||
|
||
private onRevertNewDocumentClick = () => {
|
||
this.newDocumentButton = {
|
||
visible: true,
|
||
enabled: true,
|
||
};
|
||
this.saveNewDocumentButton = {
|
||
visible: true,
|
||
enabled: false,
|
||
};
|
||
|
||
this.discardNewDocumentChangesButton = {
|
||
visible: true,
|
||
enabled: false,
|
||
};
|
||
|
||
this.updateTabButton();
|
||
this.setState({
|
||
isEditorVisible: false,
|
||
isEditorContentEdited: false,
|
||
});
|
||
|
||
};
|
||
|
||
onRenderCell = (item: { value: string }): JSX.Element => {
|
||
return (
|
||
<div
|
||
className="documentTabSuggestions"
|
||
onClick={() =>
|
||
this.setState({
|
||
filter: item.value,
|
||
isSuggestionVisible: false,
|
||
})
|
||
}
|
||
>
|
||
<Text>{item.value}</Text>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
handleLoadMoreDocument = (): void => {
|
||
this.queryDocumentsData();
|
||
this.setState({ isSuggestionVisible: false });
|
||
};
|
||
|
||
private updateTabButton = (): void => {
|
||
useCommandBar.getState().setContextButtons(this.getTabsButtons());
|
||
};
|
||
|
||
private handleDocumentContentChange = (newContent: string): void => {
|
||
if (this.saveExisitingDocumentButton.visible) {
|
||
this.saveExisitingDocumentButton = {
|
||
visible: true,
|
||
enabled: true,
|
||
};
|
||
this.discardExisitingDocumentChangesButton = {
|
||
visible: true,
|
||
enabled: true,
|
||
};
|
||
|
||
this.updateTabButton();
|
||
}
|
||
|
||
this.setState({
|
||
documentContent: newContent,
|
||
isEditorContentEdited: true,
|
||
});
|
||
};
|
||
|
||
public render(): JSX.Element {
|
||
const {
|
||
columns,
|
||
isCompactMode,
|
||
isSuggestionVisible,
|
||
filter,
|
||
isFilterOptionVisible,
|
||
isEditorVisible,
|
||
documentContent,
|
||
documentIds,
|
||
editorKey,
|
||
} = this.state;
|
||
|
||
return (
|
||
<div>
|
||
{isFilterOptionVisible && (
|
||
<div>
|
||
<div>
|
||
<Stack horizontal verticalFill wrap>
|
||
<TextField
|
||
iconProps={filterIcon}
|
||
placeholder="Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
|
||
className="documentTabSearchBar"
|
||
onFocus={() => this.setState({ isSuggestionVisible: true })}
|
||
onChange={(_event, newInput?: string) => {
|
||
this.setState({ filter: newInput });
|
||
}}
|
||
value={filter}
|
||
/>
|
||
<PrimaryButton text="Apply Filter" onClick={this.handleFilter} className="documentTabFiltetButton" />
|
||
<Image
|
||
src={CloseIcon}
|
||
alt="Close icon"
|
||
{...imageProps}
|
||
onClick={() => this.setState({ isFilterOptionVisible: false })}
|
||
/>
|
||
</Stack>
|
||
</div>
|
||
{isSuggestionVisible && (
|
||
<div className="filterSuggestions">
|
||
<List items={filterSuggestions} onRenderCell={this.onRenderCell} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
{!isFilterOptionVisible && (
|
||
<Stack horizontal verticalFill wrap className="documentTabNoFilterView">
|
||
<Text className="noFilterText">No filter applied</Text>
|
||
<PrimaryButton text="Edit Filter" onClick={() => this.setState({ isFilterOptionVisible: true })} />
|
||
</Stack>
|
||
)}
|
||
<div className="splitterWrapper" onClick={() => this.setState({ isSuggestionVisible: false })}>
|
||
<SplitterLayout primaryIndex={0} secondaryInitialSize={1000}>
|
||
<div className="leftSplitter">
|
||
<DetailsList
|
||
items={documentIds}
|
||
compact={isCompactMode}
|
||
columns={columns}
|
||
selectionMode={SelectionMode.none}
|
||
getKey={this.getKey}
|
||
setKey="none"
|
||
layoutMode={DetailsListLayoutMode.justified}
|
||
isHeaderVisible={true}
|
||
/>
|
||
<Text onClick={this.handleLoadMoreDocument} className="documentLoadMore" block={true}>
|
||
Load More
|
||
</Text>
|
||
</div>
|
||
{isEditorVisible ? (
|
||
<div className="react-editor">
|
||
<EditorReact
|
||
language={"json"}
|
||
content={documentContent}
|
||
isReadOnly={false}
|
||
ariaLabel={"Document json"}
|
||
onContentChanged={this.handleDocumentContentChange}
|
||
lineNumbers="on"
|
||
editorKey={editorKey}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div className="documentTabWatermark">
|
||
<Image src={DocumentWaterMark} alt="Document watermark" />
|
||
<Text className="documentCreateText">Create new or work with existing document(s).</Text>
|
||
</div>
|
||
)}
|
||
</SplitterLayout>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
private getKey(item: DocumentId): string {
|
||
return item.rid;
|
||
}
|
||
}
|