public render()

in gui/frontend/src/modules/db-editor/DocumentToolbar.tsx [154:411]


    public render(): ComponentChild {
        const { toolbarItems, language, heatWaveEnabled } = this.props;
        const { autoCommit, canExecute, canStop, canExecuteSubparts } = this.state;

        const area = language === "msg" ? "block" : "script";
        const selectionText = canExecuteSubparts ? "the selection or " : "";

        const stopOnErrors = Settings.get("editor.stopOnErrors", true);
        const stopOnErrorIcon = stopOnErrors
            ? Assets.toolbar.stopOnErrorActiveIcon
            : Assets.toolbar.stopOnErrorInactiveIcon;

        const autoCommitIcon = autoCommit ? Assets.toolbar.autoCommitActiveIcon : Assets.toolbar.autoCommitInactiveIcon;

        const showHidden = Settings.get("editor.showHidden", false);
        const showHiddenIcon = showHidden ? Assets.toolbar.showHiddenActiveIcon : Assets.toolbar.showHiddenInactiveIcon;

        const wordWrap = Settings.get("editor.wordWrap", "off");
        const wordWrapIcon = wordWrap === "on"
            ? Assets.toolbar.wordWrapActiveIcon
            : Assets.toolbar.wordWrapInactiveIcon;

        const executionItems = toolbarItems.execution.slice();
        if (language === "msg") {
            executionItems.push(
                <Button
                    key="executeFullBlock"
                    data-tooltip={`Execute ${selectionText}everything in the current block and create a new block`}
                    imageOnly={true}
                    disabled={!canExecute}
                    onClick={
                        () => {
                            void requisitions.execute("editorExecuteSelectedOrAll",
                                { advance: true, forceSecondaryEngine: false, asText: false });
                        }
                    }
                >
                    <Icon src={Assets.toolbar.executeIcon} data-tooltip="inherit" />
                </Button>);
        } else {
            executionItems.push(
                <Button
                    key="executeFullBlock"
                    data-tooltip={`Execute full script`}
                    imageOnly={true}
                    disabled={!canExecute}
                    onClick={
                        () => {
                            void requisitions.execute("editorExecuteSelectedOrAll",
                                { advance: false, forceSecondaryEngine: false, asText: false });
                        }
                    }
                >
                    <Icon src={Assets.toolbar.executeIcon} data-tooltip="inherit" />
                </Button>);
        }

        if (canExecuteSubparts) {
            executionItems.push(
                <Button
                    key="executeFromCaret"
                    data-tooltip="Execute the statement at the caret position"
                    imageOnly={true}
                    disabled={!canExecute}
                    onClick={
                        () => {
                            void requisitions.execute("editorExecute",
                                { advance: false, forceSecondaryEngine: false, asText: false });
                        }
                    }
                >
                    <Icon src={Assets.toolbar.executeCaretIcon} data-tooltip="inherit" />
                </Button>,
            );

            executionItems.push(
                <Button
                    key="executeToText"
                    data-tooltip={`Execute the ${area} and print the result as text`}
                    imageOnly={true}
                    disabled={!canExecute}
                    onClick={
                        () => {
                            void requisitions.execute("editorExecuteSelectedOrAll",
                                { advance: true, forceSecondaryEngine: false, asText: true });
                        }
                    }
                >
                    <Icon src={Assets.toolbar.executePrintTextIcon} data-tooltip="inherit" />
                </Button>,
            );

            if (heatWaveEnabled) {
                executionItems.push(
                    <Button
                        key="executeFullBlockHeatWave"
                        data-tooltip={`Execute ${selectionText}full ${area} on HeatWave and create a new block`}
                        imageOnly={true}
                        disabled={!canExecute}
                        onClick={
                            () => {
                                void requisitions.execute("editorExecuteSelectedOrAll",
                                    { advance: true, forceSecondaryEngine: true, asText: false });
                            }
                        }
                    >
                        <Icon src={Assets.toolbar.executeHeatwaveIcon} data-tooltip="inherit" />
                    </Button>,
                    <Button
                        key="executeFromCaretHeatWave"
                        data-tooltip={`Execute statement at current position on HeatWave`}
                        imageOnly={true}
                        disabled={!canExecute}
                        onClick={
                            () => {
                                void requisitions.execute("editorExecute",
                                    { advance: false, forceSecondaryEngine: true, asText: false });
                            }
                        }
                    >
                        <Icon src={Assets.toolbar.executeCaretHeatwaveIcon} data-tooltip="inherit" />
                    </Button>,
                );
            }

            executionItems.push(
                <Button
                    key="editorStpExecutionButton"
                    data-tooltip="Stop execution of the current statement/script"
                    requestType="editorStopExecution"
                    imageOnly={true}
                    disabled={!canStop}
                >
                    <Icon src={Assets.toolbar.stopExecutionIcon} data-tooltip="inherit" />
                </Button>,
                <Button
                    key="editorStpExecutionOnErrorButton"
                    data-tooltip="Stop execution of the current statement/script in case of errors"
                    imageOnly={true}
                    onClick={
                        () => { void requisitions.execute("editorToggleStopExecutionOnError", stopOnErrors); }
                    }
                >
                    <Icon src={stopOnErrorIcon} data-tooltip="inherit" />
                </Button>,
            );
        }

        if (canExecuteSubparts) {
            executionItems.push(
                <Divider key="divider2" vertical={true} thickness={1} />,
                <Button
                    key="commitButton"
                    data-tooltip="Commit DB changes"
                    requestType="editorCommit"
                    imageOnly={true}
                    disabled={autoCommit}
                >
                    <Icon src={Assets.toolbar.commitIcon} data-tooltip="inherit" />
                </Button>,
                <Button
                    key="rollbackButton"
                    data-tooltip="Rollback DB changes"
                    requestType="editorRollback"
                    imageOnly={true}
                    disabled={autoCommit}
                >
                    <Icon src={Assets.toolbar.rollbackIcon} data-tooltip="inherit" />
                </Button>,
                <Button
                    key="autoCommitButton"
                    data-tooltip="Auto commit DB changes"
                    requestType="editorToggleAutoCommit"
                    imageOnly={true}
                >
                    <Icon src={autoCommitIcon} data-tooltip="inherit" />
                </Button>,
            );
        }

        const editorItems = toolbarItems.editor.slice();
        editorItems.push(
            /* We have no formatting yet.
            <Button
                key="editorFormatButton"
                data-tooltip="Format current block or script"
                requestType="editorFormat"
                imageOnly={true}
            >
                <Icon src={formatIcon} data-tooltip="inherit" />
            </Button>,
            <Divider key="formatDivider" vertical={true} thickness={1} />,*/
            <Button
                key="editorFindButton"
                data-tooltip="Find"
                requestType="editorFind"
                imageOnly={true}
            >
                <Icon src={Assets.toolbar.searchIcon} data-tooltip="inherit" />
            </Button>,
            <Button
                key="editorShowHiddenButton"
                data-tooltip="Show hidden characters"
                imageOnly={true}
                onClick={this.toggleHidden}
            >
                <Icon src={showHiddenIcon} data-tooltip="inherit" />
            </Button>,
            <Button
                key="editorToggleSoftWrapButton"
                data-tooltip="Soft wrap lines"
                imageOnly={true}
                onClick={() => { Settings.set("editor.wordWrap", wordWrap === "on" ? "off" : "on"); }}
            >
                <Icon src={wordWrapIcon} data-tooltip="inherit" />
            </Button>,
        );

        if (heatWaveEnabled) {
            editorItems.push(
                <Divider key="formatDividerChatOptions" vertical={true} thickness={1} />,
                <Button
                    key="editorChatOptionsButton"
                    data-tooltip="Show Chat Options"
                    imageOnly={true}
                    requestType="showChatOptions"
                >
                    <Icon src={Assets.lakehouse.chatOptionsIcon} id="ChatOptionsButton" data-tooltip="inherit" />
                </Button>,
                <Button
                    key="editorLakehouseNavigatorButton"
                    data-tooltip="Open Lakehouse Navigator"
                    imageOnly={true}
                    requestType="showLakehouseNavigator"
                >
                    <Icon
                        src={Assets.lakehouse.navigatorIcon}
                        id="lakehouseNavigatorButton"
                        data-tooltip="inherit"
                    />
                </Button>);
        }

        return (
            <Toolbar
                id="documentToolbar"
                dropShadow={false}
            >
                {toolbarItems.navigation}
                {toolbarItems.navigation.length > 0 && <Divider vertical={true} thickness={1} />}
                {executionItems}
                {executionItems.length > 0 && <Divider vertical={true} thickness={1} />}
                {editorItems}
                <div className="expander" />
                {toolbarItems.auxiliary}
            </Toolbar >
        );
    }