in gui/frontend/src/modules/mrs/dialogs/MrsObjectFieldEditor.tsx [352:637]
public override render(): ComponentChild {
const { values, getCurrentDbObject } = this.props;
const { sqlPreview } = this.state;
const data = values as IMrsObjectFieldEditorData;
const schemaTreeOptions: ITreeGridOptions = {
treeColumn: "json",
treeChildIndent: -6,
selectionType: SelectionType.None,
showHeader: false,
layout: "fitColumns",
verticalGridLines: false,
horizontalGridLines: false,
};
const schemaTreeColumns: ColumnDefinition[] = [{
title: "Json",
field: "json",
resizable: true,
hozAlign: "left",
editable: true,
widthGrow: 2,
editor: this.editorHost,
formatter: this.treeGridJsonColumnFormatter,
cellEdited: this.handleCellEdited,
cellDblClick: this.handleCellDblClick,
}, {
title: "Relational",
field: "relational",
resizable: false,
hozAlign: "left",
editable: true,
widthGrow: 3,
editor: this.editorHost,
formatter: this.treeGridRelationalColumnFormatter,
cellEdited: this.handleCellEdited,
cellDblClick: this.handleCellDblClick,
}];
const sdkLang = (data.showSdkOptions !== undefined) ? String(MrsSdkLanguage[
data.showSdkOptions]) : "";
let sql = "";
if (sqlPreview === true) {
MrsObjectFieldEditor.updateMrsObjectFields(data);
// Update the local DB Object reference if the DB Object has been updated by the main editor
data.dbObject = getCurrentDbObject();
// Build the SQL DDL statement
sql = MrsObjectFieldEditor.buildDataMappingViewSql(data) ?? "";
}
const mrsObject = this.findMrsObjectById(data.currentMrsObjectId);
let mrsObjectSelectionCaption;
if (data.showSdkOptions === undefined) {
if (mrsObject?.kind === MrsObjectKind.Parameters) {
mrsObjectSelectionCaption = "Parameters";
} else {
mrsObjectSelectionCaption = `Result ${String(mrsObject?.position)}`;
}
} else {
mrsObjectSelectionCaption = mrsObject?.name;
}
return (<Container
className={this.getEffectiveClassNames(["mrsObjectFieldEditor",
(data.showSdkOptions !== undefined) ? "showSdkOptions" : undefined])}
orientation={Orientation.TopDown}
>
<Container
className={"settings"}
orientation={Orientation.LeftToRight}
crossAlignment={ContentAlignment.Start}
>
<Container
className={"settingsMain"}
orientation={Orientation.LeftToRight}
crossAlignment={ContentAlignment.Center}
>
<Container
className={"labelWithInput"}
orientation={Orientation.LeftToRight}
crossAlignment={ContentAlignment.Center}
>
<Label>DB Object:</Label>
<Input id="dbObject" value={data.dbObject.name} onChange={this.dbObjectNameChanged} />
</Container>
{(data.dbObject.objectType === MrsDbObjectType.Procedure ||
data.dbObject.objectType === MrsDbObjectType.Function ||
data.dbObject.objectType === MrsDbObjectType.Script) &&
<Container
className={"mrsObject"}
orientation={Orientation.LeftToRight}
crossAlignment={ContentAlignment.Center}
>
<Dropdown
id={"mrsObjectName"}
selection={mrsObjectSelectionCaption}
onSelect={(accept: boolean, sel) => {
const val = [...sel];
if (val.length > 0 && val[0] !== "") {
let newMrsObject;
// Either MrsObject kind + index entries are listed when showSdkOptions is not
// enabled
if (data.showSdkOptions === undefined) {
if (val[0] === "Parameters") {
newMrsObject = data.mrsObjects.find((obj) => {
return obj.kind = MrsObjectKind.Parameters;
});
} else {
newMrsObject = data.mrsObjects.find((obj) => {
return val[0] === `Result ${String(obj?.position)}`;
});
}
} else {
// Or the actual MrsObject names
newMrsObject = data.mrsObjects.find((obj) => {
return val[0] === obj.name;
});
}
void this.setCurrentMrsObject(newMrsObject);
}
}}
>
{data.mrsObjects.map((obj) => {
let itemName;
// MrsObject kind + index entries are listed when showSdkOptions is not enabled
if (data.showSdkOptions === undefined) {
if (obj.kind === MrsObjectKind.Parameters) {
itemName = "Parameters";
} else {
itemName = `Result ${String(obj?.position)}`;
}
} else {
// Or the actual MrsObject names
itemName = obj.name;
}
return <DropdownItem
caption={itemName}
key={itemName}
id={itemName}
/>;
})}
</Dropdown>
{(data.dbObject.objectType === MrsDbObjectType.Procedure
&& mrsObject?.kind !== MrsObjectKind.Parameters) &&
<Button onClick={this.removeCurrentMrsObject} imageOnly={true}
data-tooltip="Remove the current result set definition">
<Icon src={Codicon.Remove} width={11} height={11} />
</Button>
}
{data.dbObject.objectType === MrsDbObjectType.Procedure &&
<Button className="addMrsObjectBtn" onClick={this.addMrsObject}
data-tooltip="Add a result set definition returned by this stored procedure">
<Icon src={Codicon.Add} width={11} height={11} />
<Label caption="Add Result" />
</Button>
}
</Container>
}
</Container>
<Container
className={"settingsRight"}
orientation={Orientation.RightToLeft}
crossAlignment={ContentAlignment.Center}
>
{data.dbObject.objectType !== MrsDbObjectType.Script &&
<>
<Button
className="sqlCopyBtn"
key="sqlCopyBtn"
data-tooltip="Copy SQL to Clipboard"
onClick={this.copySqlToClipboard}
imageOnly={true}
>
<Icon src={Codicon.Copy} width={11} height={11} data-tooltip="inherit" />
</Button>
<Button
className={this.getEffectiveClassNames(
["sqlPreviewBtn", sqlPreview ? "buttonActivated" : undefined])}
key="sqlPreviewBtn"
data-tooltip="Toggle MRS SQL Preview"
onClick={this.toggleSqlPreview}
imageOnly={true}
>
<Icon src={Codicon.Search} width={11} height={11} data-tooltip="inherit" />
<Label caption="SQL Preview" data-tooltip="inherit" />
</Button>
</>
}
<div className="divider" />
{!sqlPreview &&
<>
<Container
className={"labelWithInput"}
orientation={Orientation.LeftToRight}
crossAlignment={ContentAlignment.Center}
>
<Dropdown
id={"sdkLanguage"}
placeholder="SDK Language"
data-tooltip={"Select a SDK language to display the specific interface " +
"names and datatypes"}
selection={sdkLang}
optional={true}
onSelect={(accept: boolean, sel) => {
const val = [...sel];
if (val.length > 0 && val[0] !== "") {
const lang: MrsSdkLanguage = MrsSdkLanguage[
val[0] as keyof typeof MrsSdkLanguage];
data.showSdkOptions = lang;
} else {
data.showSdkOptions = undefined;
}
this.updateStateData(data);
}}
>
{Object.values(MrsSdkLanguage).map((lang) => {
if (!(Number(lang) >= 0)) {
return <DropdownItem
caption={String(lang)}
key={String(lang)}
id={String(lang)}
/>;
} else {
return undefined;
}
})}
</Dropdown>
</Container>
<div className="divider" />
</>
}
</Container>
</Container>
{sqlPreview === false &&
<TreeGrid
className={this.getEffectiveClassNames(["mrsObjectTreeGrid"])}
ref={this.tableRef}
options={schemaTreeOptions}
columns={schemaTreeColumns}
tableData={data.currentTreeItems}
onRowExpanded={this.handleRowExpanded}
onRowCollapsed={this.handleRowCollapsed}
isRowExpanded={this.isRowExpanded}
onFormatRow={this.treeGridRowFormatter}
/>
}
{sqlPreview === true &&
<Container className="sqlPreview"
orientation={Orientation.LeftToRight}
crossAlignment={ContentAlignment.Start}
>
<CodeEditor initialContent={sql}
language="mysql" readonly={true}
lineNumbers={"off"}
font={{
fontFamily: "var(--msg-monospace-font-family)",
fontSize: 12,
lineHeight: 18,
}}
minimap={{
enabled: false,
}}
scrollbar={{
useShadows: true,
verticalHasArrows: false,
horizontalHasArrows: false,
vertical: "auto",
horizontal: "auto",
verticalScrollbarSize: 8,
horizontalScrollbarSize: 8,
}}
/>
</Container>
}
</Container>
);
}