fixed mongo docuement create issue

This commit is contained in:
sunilyadav840 2021-07-11 21:45:15 +05:30
parent bbae8ae301
commit 8f1f3c1c65
2 changed files with 75 additions and 47 deletions

View File

@ -23,6 +23,17 @@ export interface IDocumentsTabContentState {
isAllDocumentsVisible: boolean;
}
export interface IDocument {
value: string;
id: string;
}
export interface IButton {
visible: boolean;
enabled: boolean;
isSelected?: boolean;
}
export const imageProps: Partial<IImageProps> = {
imageFit: ImageFit.centerContain,
width: 40,
@ -65,14 +76,10 @@ export function getPartitionKeyDefinition(
}
export function formatDocumentContent(row: DocumentId): string {
const { partitionKeyProperty, partitionKeyValue, rid, self, stringPartitionKeyValue, ts } = row;
const { partitionKeyProperty, partitionKeyValue, id } = row;
const documentContent = JSON.stringify({
partitionKeyProperty: partitionKeyProperty || "",
partitionKeyValue: partitionKeyValue || "",
rid: rid || "",
self: self || "",
stringPartitionKeyValue: stringPartitionKeyValue || "",
ts: ts || "",
_id1: id(),
[partitionKeyProperty]: partitionKeyValue || "",
});
const formattedDocumentContent = documentContent.replace(/,/g, ",\n").replace("{", "{\n").replace("}", "\n}");
return formattedDocumentContent;
@ -100,7 +107,7 @@ export function getFilterPlaceholder(isPreferredApiMongoDB: boolean): string {
export function getFilterSuggestions(isPreferredApiMongoDB: boolean): { value: string }[] {
const filterSuggestions = isPreferredApiMongoDB
? [{ value: `{"id": "foo"}` }, { value: "{ qty: { $gte: 20 } }" }]
? [{ value: `{"_id": "foo"}` }, { value: "{ qty: { $gte: 20 } }" }]
: [
{ value: 'WHERE c.id = "foo"' },
{ value: "ORDER BY c._ts DESC" },
@ -127,3 +134,13 @@ export const tabButtonVisibility = (visible: boolean, enabled: boolean): { visib
enabled,
};
};
export const getfilterText = (isPreferredApiMongoDB: boolean, filter: string): string => {
if (isPreferredApiMongoDB) {
if (filter) {
return `Filter : ${filter}`;
}
return "No filter applied";
}
return "Select * from C";
};

View File

@ -10,7 +10,7 @@ import {
SelectionMode,
Stack,
Text,
TextField,
TextField
} from "@fluentui/react";
import * as React from "react";
import SplitterLayout from "react-splitter-layout";
@ -48,26 +48,16 @@ import {
getDocumentItems,
getFilterPlaceholder,
getFilterSuggestions,
getfilterText,
getPartitionKeyDefinition,
hasShardKeySpecified,
IButton,
IDocumentsTabContentState,
imageProps,
tabButtonVisibility,
tabButtonVisibility
} from "./DocumentTabUtils";
export interface IDocument {
value: string;
id: string;
}
interface IButton {
visible: boolean;
enabled: boolean;
isSelected?: boolean;
}
const filterIcon: IIconProps = { iconName: "Filter" };
const intitalDocumentContent = `{ \n "id": "replace_with_new_document_id" \n }`;
export default class DocumentsTabContent extends React.Component<DocumentsTab, IDocumentsTabContentState> {
public newDocumentButton: IButton;
@ -76,6 +66,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
public saveExisitingDocumentButton: IButton;
public discardExisitingDocumentChangesButton: IButton;
public deleteExisitingDocumentButton: IButton;
public intitalDocumentContent: string;
constructor(props: DocumentsTab) {
super(props);
@ -86,11 +77,12 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
this.saveExisitingDocumentButton = tabButtonVisibility(false, false);
this.discardExisitingDocumentChangesButton = tabButtonVisibility(false, false);
this.deleteExisitingDocumentButton = tabButtonVisibility(false, false);
const isPreferredApiMongoDB = userContext.apiType === "Mongo";
const columns: IColumn[] = [
{
key: "_id",
name: userContext.apiType === "Mongo" ? "_id" : "id",
name: isPreferredApiMongoDB ? "_id" : "id",
minWidth: 90,
maxWidth: 140,
isResizable: true,
@ -99,7 +91,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
onRender: (item: DocumentId) => {
return (
<div onClick={() => this.handleRow(item)} className="documentIdItem">
{userContext.apiType === "Mongo" ? item.rid : item.id}
{isPreferredApiMongoDB ? item.id() : item.id}
</div>
);
},
@ -113,9 +105,19 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
isResizable: true,
isCollapsible: true,
data: "number",
onRender: (item: DocumentId) => {
return (
<div onClick={() => this.handleRow(item)} className="documentIdItem">
{item.partitionKeyValue}
</div>
);
},
},
];
this.intitalDocumentContent = `{ \n ${isPreferredApiMongoDB ? '"_id"' : '"id"'
}: "replace_with_new_document_id" \n }`;
this.state = {
columns: columns,
isModalSelection: false,
@ -125,7 +127,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
filter: "",
isFilterOptionVisible: true,
isEditorVisible: false,
documentContent: intitalDocumentContent,
documentContent: this.intitalDocumentContent,
documentIds: [],
documentSqlIds: [],
editorKey: "",
@ -189,7 +191,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
if (queryDocumentsData) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const nextDocumentIds = queryDocumentsData.documents.map((rawDocument: any) => {
const partitionKeyValue = rawDocument.partitionKeyValue;
const partitionKeyValue = rawDocument._partitionKeyValue;
return new DocumentId(this.props as DocumentsTab, rawDocument, partitionKeyValue);
});
this.setState({ documentIds: nextDocumentIds });
@ -246,12 +248,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
userContext.apiType === "Mongo"
? formatDocumentContent(row as DocumentId)
: formatSqlDocumentContent(row as Resource);
this.newDocumentButton = tabButtonVisibility(true, true);
this.saveNewDocumentButton = tabButtonVisibility(false, false);
this.discardNewDocumentChangesButton = tabButtonVisibility(false, false);
this.saveExisitingDocumentButton = tabButtonVisibility(true, false);
this.discardExisitingDocumentChangesButton = tabButtonVisibility(true, false);
this.deleteExisitingDocumentButton = tabButtonVisibility(true, true);
this.updateTabButtonVisibility();
userContext.apiType === "Mongo"
? this.updateContent(row as DocumentId, formattedDocumentContent)
@ -367,6 +364,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
selectedDocumentId,
documentContent
);
documentIds.forEach((documentId: DocumentId) => {
if (documentId.rid === updatedDocument._rid) {
const partitionKeyArray = extractPartitionKey(
@ -523,17 +521,6 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
: "Are you sure you want to delete the selected document ?";
const { isExecutionError, isExecuting, collection, tabTitle, partitionKey, partitionKeyProperty } = this.props;
const partitionKeyArray = extractPartitionKey(
this.state.selectedSqlDocumentId,
getPartitionKeyDefinition(partitionKey, partitionKeyProperty) as PartitionKeyDefinition
);
const partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
const selectedDocumentId = new DocumentId(
this.props as DocumentsTab,
this.state.selectedSqlDocumentId,
partitionKeyValue
);
const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
dataExplorerArea: Areas.Tab,
@ -549,8 +536,20 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
collection as ViewModels.Collection,
this.state.selectedDocumentId
);
this.queryDocumentsData();
} else {
const partitionKeyArray = extractPartitionKey(
this.state.selectedSqlDocumentId,
getPartitionKeyDefinition(partitionKey, partitionKeyProperty) as PartitionKeyDefinition
);
const partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
const selectedDocumentId = new DocumentId(
this.props as DocumentsTab,
this.state.selectedSqlDocumentId,
partitionKeyValue
);
await deleteSqlDocument(collection as ViewModels.Collection, selectedDocumentId);
this.querySqlDocumentsData();
}
TelemetryProcessor.traceSuccess(
Action.DeleteDocument,
@ -562,7 +561,6 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
);
this.setState({ isEditorVisible: false });
isExecuting(false);
this.querySqlDocumentsData();
} catch (error) {
isExecutionError(true);
isExecuting(false);
@ -597,9 +595,9 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
this.updateTabButton();
this.setState({
documentContent: intitalDocumentContent,
documentContent: this.intitalDocumentContent,
isEditorVisible: true,
editorKey: intitalDocumentContent,
editorKey: this.intitalDocumentContent,
});
};
@ -626,6 +624,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
const savedDocument = await createSqlDocuments(collection, document);
if (savedDocument) {
this.handleRowContent(savedDocument as Resource);
this.updateTabButtonVisibility();
TelemetryProcessor.traceSuccess(
Action.CreateDocument,
{
@ -655,6 +654,16 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
}
};
private updateTabButtonVisibility = (): void => {
this.newDocumentButton = tabButtonVisibility(true, true);
this.saveNewDocumentButton = tabButtonVisibility(false, false);
this.discardNewDocumentChangesButton = tabButtonVisibility(false, false);
this.saveExisitingDocumentButton = tabButtonVisibility(true, false);
this.discardExisitingDocumentChangesButton = tabButtonVisibility(true, false);
this.deleteExisitingDocumentButton = tabButtonVisibility(true, true);
this.updateTabButton();
};
public onSaveNewMongoDocumentClick = async (): Promise<void> => {
const parsedDocumentContent = JSON.parse(this.state.documentContent);
const {
@ -704,6 +713,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
);
if (savedDocument) {
this.handleLoadMoreDocument();
this.updateTabButtonVisibility();
TelemetryProcessor.traceSuccess(
Action.CreateDocument,
{
@ -811,6 +821,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
} = this.state;
const isPreferredApiMongoDB = userContext.apiType === "Mongo";
return (
<div>
{isFilterOptionVisible && (
@ -846,7 +857,7 @@ export default class DocumentsTabContent extends React.Component<DocumentsTab, I
)}
{!isFilterOptionVisible && (
<Stack horizontal verticalFill wrap className="documentTabNoFilterView">
<Text className="noFilterText">{isPreferredApiMongoDB ? "No filter applied" : "Select * from C"}</Text>
<Text className="noFilterText">{getfilterText(isPreferredApiMongoDB, filter)}</Text>
<PrimaryButton text="Edit Filter" onClick={() => this.setState({ isFilterOptionVisible: true })} />
</Stack>
)}