in gui/frontend/src/components/ResultView/ResultTabView.tsx [183:466]
public render(): ComponentChild {
const { resultSets, contextId, hideTabs, showMaximizeButton, showMaximized } = this.props;
const { currentResultSet } = this.state;
const className = this.getEffectiveClassNames(["resultHost"]);
this.viewRefs.clear();
const pages: ITabviewPage[] = [];
if (resultSets?.output && resultSets.output.length > 0) {
pages.push({
id: "output",
caption: `Output`,
content: (
<ActionOutput
output={resultSets.output}
contextId={contextId}
showIndexes={resultSets.sets.length > 0 || resultSets.output.length > 1}
/>
),
});
}
const toggleStateButton = <Button
id="toggleStateButton"
imageOnly={true}
data-tooltip="Maximize Result Tab"
onClick={this.handleResultToggle}
>
<Icon
src={showMaximized ? Assets.toolbar.normalizeIcon : Assets.toolbar.maximizeIcon}
data-tooltip="inherit"
/>
</Button>;
const currentEditingInfo = this.#editingInfo.get(currentResultSet?.resultId ?? "");
const editModeActive = currentEditingInfo !== undefined;
const updatable = currentResultSet?.updatable ?? false;
resultSets.sets.forEach((resultSet: IResultSet, index) => {
const editingInfo = this.#editingInfo.get(resultSet?.resultId ?? "");
const editModeActive = editingInfo !== undefined;
const ref = createRef<ResultView>();
this.viewRefs.set(resultSet.resultId, ref);
let topRowIndex = this.topRowIndexes.get(resultSet.resultId);
const selectedRowIndex = editingInfo?.selectedRowIndex;
if (selectedRowIndex !== undefined) {
topRowIndex = selectedRowIndex;
}
if (!showMaximized || resultSet === currentResultSet) {
let caption;
if (resultSet.index !== undefined) {
caption = `Result #${resultSet.index + 1}`;
} else {
caption = `Result #${index + 1}`;
}
if (resultSet.subIndex !== undefined) {
caption += `.${resultSet.subIndex + 1}`;
}
let content;
if (resultSet === currentResultSet && editingInfo?.previewActive) {
content = (
<SQLPreview
statements={this.generateStatements(editingInfo)}
errors={editingInfo.errors}
onStatementClick={this.handleStatementClick}
/>
);
} else {
content = (
<ResultView
ref={ref}
topRowIndex={topRowIndex}
selectRow={selectedRowIndex}
resultSet={resultSet}
editable={updatable}
rowChanges={editingInfo?.rowChanges}
editModeActive={editModeActive}
onFieldEditStart={this.onFieldEditStart}
onFieldEdited={this.onFieldEdited}
onFieldEditCancel={this.onFieldEditCancel}
onToggleRowDeletionMarks={this.onToggleRowDeletionMarks}
onVerticalScroll={this.onVerticalScroll}
onAction={this.onAction}
/>
);
}
pages.push({
id: resultSet.resultId,
caption,
auxiliary: showMaximizeButton === "tab" && toggleStateButton,
content,
canClose: true,
});
}
});
// Show editing information if we have it, otherwise use the execution info.
let statusInfo = currentEditingInfo?.statusInfo;
if (!statusInfo) {
if (currentResultSet && this.#affectedRows.has(currentResultSet.resultId)) {
const affectedRows = this.#affectedRows.get(currentResultSet.resultId)!;
const rowText = formatWithNumber("row", affectedRows);
statusInfo = {
text: `${rowText} updated`,
};
} else if (currentResultSet?.data.executionInfo) {
statusInfo = currentResultSet?.data.executionInfo;
}
}
const currentPage = currentResultSet?.data.currentPage ?? 0;
const hasMorePages = currentResultSet?.data.hasMoreRows ?? false;
const gotError = statusInfo && statusInfo.type === MessageType.Error;
const gotResponse = statusInfo && statusInfo.type === MessageType.Response;
const editButtonTooltip = updatable ? (editModeActive ? "Editing" : "Start Editing") : "Data not editable";
return (
<Container
className={className}
orientation={Orientation.TopDown}
>
<Tabview
className="resultTabview"
stretchTabs={false}
hideSingleTab={hideTabs === "single"}
showTabs={hideTabs !== "always"}
selectedId={currentResultSet?.resultId ?? "output"}
tabPosition={TabPosition.Top}
pages={pages}
canReorderTabs={true}
onSelectTab={this.handleTabSelection}
closeTabs={this.closeTabs}
canCloseTab={this.canClose}
/>
{
statusInfo && <ResultStatus statusInfo={statusInfo}>
{
!gotError && !gotResponse && <Toolbar dropShadow={false} >
<Label className="autoHide">View:</Label>
<Dropdown
id="viewStyleDropDown"
selection={currentEditingInfo?.previewActive ? "preview" : "grid"}
iconOnly={true}
data-tooltip="Select a View Section for the Result Set"
onSelect={this.selectViewStyle}
>
<DropdownItem
id="grid"
caption="Data Grid"
picture={<Icon src={Assets.toolbar.gridIcon} data-tooltip="inherit" />}
/>
<DropdownItem
id="preview"
caption="Preview Changes"
picture={<Icon src={Assets.toolbar.previewIcon} data-tooltip="inherit" />}
disabled={!currentEditingInfo}
/>
</Dropdown>
<Divider vertical={true} />
<Label className="autoHide">Pages:</Label>
<Button
id="previousPageButton"
imageOnly={true}
disabled={currentPage === 0}
data-tooltip="Previous Page"
onClick={this.previousPage}
>
<Icon src={Assets.toolbar.pagePreviousIcon} data-tooltip="inherit" />
</Button>
<Button
id="nextPageButton"
imageOnly={true}
disabled={!hasMorePages}
data-tooltip="Next Page"
onClick={this.nextPage}
>
<Icon src={Assets.toolbar.pageNextIcon} data-tooltip="inherit" />
</Button>
<Divider vertical={true} />
<Label className="autoHide">Edit:</Label>
<Button
id="editButton"
imageOnly={true}
disabled={!updatable || editModeActive}
data-tooltip={editButtonTooltip}
onClick={this.startEditingFirstField}
>
<Icon src={Assets.toolbar.editIcon2} data-tooltip="inherit" />
</Button>
<Button
id="previewButton"
imageOnly={true}
disabled={!currentEditingInfo}
data-tooltip="Preview Changes"
onClick={this.previewChanges}
>
<Icon src={Assets.toolbar.previewIcon} data-tooltip="inherit" />
</Button>
<Button
id="applyButton"
imageOnly={true}
disabled={!currentEditingInfo}
data-tooltip="Apply Changes"
onClick={() => { return this.commitChanges(); }}
>
<Icon src={Assets.toolbar.commitIcon} data-tooltip="inherit" />
</Button>
<Button
id="rollbackButton"
imageOnly={true}
disabled={!currentEditingInfo}
data-tooltip="Rollback Changes"
onClick={this.cancelEditingAndRollbackChanges}
>
<Icon src={Assets.toolbar.rollbackIcon} data-tooltip="inherit" />
</Button>
<Button
id="refreshButton"
imageOnly={true}
disabled={!!currentEditingInfo}
data-tooltip="Refresh"
onClick={this.refresh}
>
<Icon src={Assets.toolbar.refreshIcon2} data-tooltip="inherit" />
</Button>
<Divider id="editSeparator" vertical={true} />
{showMaximizeButton === "statusBar" && toggleStateButton}
{showMaximizeButton === "statusBar" && <Divider vertical={true} />}
<Button
id="showActionMenu"
imageOnly={true}
data-tooltip="Show Action Menu"
onClick={this.showActionMenu}
>
<Icon src={Assets.toolbar.menuIcon} data-tooltip="inherit" />
</Button>
</Toolbar>
}
</ResultStatus>
}
<Menu
id="actionMenu"
ref={this.actionMenuRef}
placement={ComponentPlacement.BottomLeft}
onItemClick={this.handleActionMenuItemClick}
>
<MenuItem
id="closeMenuItem"
command={{ title: "Close Result Set", command: "closeMenuItem" }}
/>
<MenuItem
id="separator1"
command={{ title: "-", command: "" }}
disabled
/>
<MenuItem
id="exportMenuItem"
command={{ title: "Export Result Set", command: "exportMenuItem" }}
disabled
/>
<MenuItem
id="importMenuItem"
command={{ title: "Import Result Set", command: "importMenuItem" }}
disabled
/>
</Menu>
</Container >
);
}