public render()

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 >
        );
    }