random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-03-31 15:09:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add react editor and pass column headers

Browse Source
This commit is contained in:
Laurent Nguyen 2024-03-20 11:15:25 +01:00
parent 6f7c8f2a20
commit 8c1a89403a
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import { getErrorMessage, getErrorStack } from 'Common/ErrorHandlingUtils';
import { queryDocuments } from 'Common/dataAccess/queryDocuments'; import { queryDocuments } from 'Common/dataAccess/queryDocuments';
import { readDocument } from 'Common/dataAccess/readDocument'; import { readDocument } from 'Common/dataAccess/readDocument';
import { useDialog } from 'Explorer/Controls/Dialog'; import { useDialog } from 'Explorer/Controls/Dialog';
import { EditorReact } from 'Explorer/Controls/Editor/EditorReact';
import { querySampleDocuments, readSampleDocument } from 'Explorer/QueryCopilot/QueryCopilotUtilities'; import { querySampleDocuments, readSampleDocument } from 'Explorer/QueryCopilot/QueryCopilotUtilities';
import DocumentsTab from 'Explorer/Tabs/DocumentsTab'; import DocumentsTab from 'Explorer/Tabs/DocumentsTab';
import { dataExplorerLightTheme } from 'Explorer/Theme/ThemeUtil'; import { dataExplorerLightTheme } from 'Explorer/Theme/ThemeUtil';
@ -456,6 +457,11 @@ const DocumentsTabComponent: React.FunctionComponent<{
return () => resizeObserver.disconnect(); // clean up return () => resizeObserver.disconnect(); // clean up
}, []); }, []);
const columnHeaders = {
idHeader: isPreferredApiMongoDB ? "_id" : "id",
pkeyHeaders: partitionKeyPropertyHeaders
};
return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}> return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
<div <div
className="tab-pane active" className="tab-pane active"
@ -569,13 +575,29 @@ const DocumentsTabComponent: React.FunctionComponent<{
<Split> <Split>
<div style={{ minWidth: 480, width: "20%" }} <div style={{ minWidth: 480, width: "20%" }}
ref={tableContainerRef}> ref={tableContainerRef}>
<DocumentsTableComponent style={{ width: 200 }} items={tableItems} onSelectedItem={onSelectedDocument} size={tableContainerSizePx} /> <DocumentsTableComponent
style={{ width: 200 }}
items={tableItems}
onSelectedItem={onSelectedDocument}
size={tableContainerSizePx}
columnHeaders={columnHeaders}
/>
<a className="loadMore" role="button" onClick={() => loadNextPage(false)}>Load more</a> <a className="loadMore" role="button" onClick={() => loadNextPage(false)}>Load more</a>
</div> </div>
<div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div> <div style={{ minWidth: "20%", width: "100%" }}>
<EditorReact
language={"json"}
content={JSON.stringify(currentDocument, undefined, " ")}
isReadOnly={false}
ariaLabel={"Stored procedure body"}
lineNumbers={"on"}
theme={"_theme"}
onContentChanged={(newContent: string) => { }}
/>
</div>
</Split> </Split>
</div> </div>
</div > </div >
</FluentProvider>; </FluentProvider >;
} }

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

@ -11,6 +11,10 @@ export interface IDocumentsTableComponentProps {
items: DocumentsTableComponentItem[]; items: DocumentsTableComponentItem[];
onSelectedItem: (index: number) => void; onSelectedItem: (index: number) => void;
size: { height: number; width: number }; size: { height: number; width: number };
columnHeaders: {
idHeader: string;
partitionKeyHeader: string;
};
style?: React.CSSProperties; style?: React.CSSProperties;
} }