analytics/webcontent/bi/js/dashboard-analytics/features/widget/renderSequence/s12y/ServiceabilitySQLInfo.js

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * Licensed Materials - Property of IBM
 * IBM Business Analytics (C) Copyright IBM Corp. 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

define(['../../../../api/impl/serviceability/nls/StringResources', 'react', 'ca-ui-toolkit', 'react-dom'], function (StringResources, React, UI_TOOLKIT, ReactDOM) {
	var Dialog = UI_TOOLKIT.Dialog,
	    Button = UI_TOOLKIT.Button,
	    ToggleSwitchSection = UI_TOOLKIT.ToggleSwitchSection,
	    FlexItem = UI_TOOLKIT.FlexItem,
	    FlexLayout = UI_TOOLKIT.FlexLayout,
	    TextArea = UI_TOOLKIT.TextArea,
	    TruncatedText = UI_TOOLKIT.TruncatedText,
	    Tabs = UI_TOOLKIT.Tabs,
	    TabPanel = UI_TOOLKIT.TabPanel;
	var useState = React.useState,
	    useEffect = React.useEffect;


	return function () {
		function ServiceabilitySQLInfo(visApi, queryExecution) {
			_classCallCheck(this, ServiceabilitySQLInfo);

			this.visApi = visApi;
			this.queryExecution = queryExecution;
			this._widgetLastCognosQuery = undefined;
			this._widgetLastNativeQuery = undefined;
			this._widgetLastMDXQuery = undefined;
			this._shouldFetchQuery = false;
			this.el$ = undefined;
		}

		ServiceabilitySQLInfo.prototype.showQueryDialog = function showQueryDialog() {
			var _this = this;

			this.el$ = document.createElement('div');
			this.el$.classList.add('sql-popover-container');
			document.body.appendChild(this.el$);
			var hasQueryInfo = this.widgetsLastCognosQuery || this.widgetsLastNativeQuery || this.widgetsLastMDXQuery;
			var Dialog = this.QueryDialog;
			var DialogBody = this.QueryDialogBody;
			ReactDOM.render(React.createElement(
				Dialog,
				{
					hasQueryInfo: hasQueryInfo,
					onClose: function onClose(evt) {
						return _this.removeSQLDialog(evt);
					}
				},
				React.createElement(DialogBody, {
					cognosSQL: this.widgetsLastCognosQuery,
					nativeSQL: this.widgetsLastNativeQuery,
					MDXQuery: this.widgetsLastMDXQuery
				})
			), this.el$);
		};

		ServiceabilitySQLInfo.prototype.removeSQLDialog = function removeSQLDialog(evt) {
			if (evt) {
				evt.stopPropagation();
			}
			if (this.el$) {
				ReactDOM.unmountComponentAtNode(this.el$);
				this.el$.remove();
				this.el$ = undefined;
			}
		};

		ServiceabilitySQLInfo.prototype.QueryDialogBody = function QueryDialogBody(props) {
			var DialogTextArea = function DialogTextArea(value) {
				return React.createElement(TextArea, {
					placeholder: StringResources.get('interactToTriggerQuery'),
					disabled: false,
					rows: 20,
					resize: false,
					value: value,
					style: { width: '100%' },
					className: 'sql-textarea'
				});
			};

			var ErrorDialogBody = function ErrorDialogBody() {
				return React.createElement(
					'div',
					{ 'data-id': 's12y-sqlinfo-error' },
					StringResources.get('queryInfoNotAvailable')
				);
			};

			var cognosSQL = props.cognosSQL,
			    nativeSQL = props.nativeSQL,
			    MDXQuery = props.MDXQuery;


			var defaultSelectedTab = void 0;
			if (cognosSQL) {
				defaultSelectedTab = 'cognossql';
			} else if (nativeSQL) {
				defaultSelectedTab = 'nativesql';
			} else if (MDXQuery) {
				defaultSelectedTab = 'mdxquery';
			}

			var _useState = useState(defaultSelectedTab),
			    selectedTab = _useState[0],
			    setSelectedTab = _useState[1];

			if (cognosSQL || nativeSQL || MDXQuery) {
				return React.createElement(
					Tabs,
					{
						onChange: function onChange(tabId) {
							return setSelectedTab(tabId);
						},
						selected: selectedTab,
						vertical: true,
						linePosition: 'right'
					},
					cognosSQL && React.createElement(
						TabPanel,
						{ id: 'cognossql', label: 'Cognos SQL' },
						DialogTextArea(cognosSQL)
					),
					nativeSQL && React.createElement(
						TabPanel,
						{ id: 'nativesql', label: 'Native SQL' },
						DialogTextArea(nativeSQL)
					),
					MDXQuery && React.createElement(
						TabPanel,
						{ id: 'mdxquery', label: 'MDX' },
						DialogTextArea(MDXQuery)
					)
				);
			} else {
				return React.createElement(ErrorDialogBody, null);
			}
		};

		ServiceabilitySQLInfo.prototype.QueryDialog = function QueryDialog(props) {
			var onClose = props.onClose,
			    hasQueryInfo = props.hasQueryInfo,
			    children = props.children;


			return React.createElement(
				Dialog,
				{
					size: 'large',
					width: '80%',
					className: 'sql-textarea-dialog'
				},
				React.createElement(
					Dialog.Header,
					null,
					React.createElement(TruncatedText, { value: StringResources.get('SQLMDX') })
				),
				React.createElement(
					Dialog.Body,
					null,
					React.createElement(
						FlexLayout,
						null,
						React.createElement(
							FlexItem,
							{ overflow: 'auto', style: { width: '100%' } },
							children
						)
					)
				),
				React.createElement(
					Dialog.Footer,
					null,
					hasQueryInfo && React.createElement(Dialog.Button, { label: StringResources.get('copy'), primary: true, className: 'query-dialog-copy-button', onClick: function onClick() {
							document.body.querySelector('.sql-textarea textarea').select();
							document.execCommand('copy');
						}
					}),
					React.createElement(Dialog.Button, { label: StringResources.get('close'), onClick: function onClick(evt) {
							return onClose(evt);
						}, className: 'query-dialog-close-button' })
				)
			);
		};

		ServiceabilitySQLInfo.prototype.QuerySection = function QuerySection(props) {
			var initialToggleState = props.initialToggleState,
			    onToggle = props.onToggle,
			    openDialog = props.openDialog;

			var _useState2 = useState(initialToggleState),
			    toggleState = _useState2[0],
			    setToggleState = _useState2[1];

			useEffect(function () {
				onToggle(toggleState, setButtonDisabled);
			});

			var _useState3 = useState(!initialToggleState),
			    buttonDisabled = _useState3[0],
			    setButtonDisabled = _useState3[1];

			return React.createElement(
				FlexLayout,
				{ direction: 'column' },
				React.createElement(
					FlexItem,
					null,
					React.createElement(ToggleSwitchSection, {
						label: StringResources.get('fetchQuery'),
						rtl: false,
						className: 'fetch-sql-toggle',
						checked: toggleState,
						onChange: function onChange() {
							return setToggleState(!toggleState);
						}
					})
				),
				React.createElement(
					FlexItem,
					null,
					React.createElement(Button, {
						label: StringResources.get('showSQLMDX'),
						disabled: buttonDisabled,
						className: 'sql-mdx-dialog-button',
						onClick: function onClick() {
							return openDialog();
						},
						intent: 'primary'
					})
				)
			);
		};

		/**
   * @returns {object} The result of this result should be an object which will
   * be stringfied later.
   * @description this method will fetch the last sql result from the renderSequence
   */


		ServiceabilitySQLInfo.prototype.toJSON = function toJSON() {
			return {
				sqlQuery: this.widgetsLastCognosQuery
			};
		};

		/**
   * @description this method returns a JSON representation of the query section in the serviceability tab
   * @returns {object} The UI spec which will be consumed by ContentInfoAPI
   */


		ServiceabilitySQLInfo.prototype.toUIJSON = function toUIJSON() {
			var _this2 = this;

			var SQL = this.QuerySection;

			var node = React.createElement(SQL, {
				initialToggleState: this.shouldFetchQuery,
				onToggle: function onToggle(toggleState, setButtonDisabled) {
					_this2.shouldFetchQuery = toggleState;
					if (!toggleState) {
						_this2.widgetsLastCognosQuery = null;
						_this2.widgetsLastNativeQuery = null;
						setButtonDisabled(true);
					} else {
						if (!_this2.widgetsLastNativeQuery && !_this2.widgetsLastCognosQuery) {
							var option = { qfbMode: 'validate' };
							_this2.queryExecution && _this2.queryExecution.addRequestOptions(option);
							_this2.visApi.reRender({ sameQueryValidateMode: true }).then(function () {
								_this2.queryExecution && _this2.queryExecution.removeRequestOptions(['qfbMode']);
								setButtonDisabled(false);
							});
						}
					}
				},
				openDialog: function openDialog() {
					return _this2.showQueryDialog();
				}
			});

			return [{
				sectionName: StringResources.get('query'),
				sectionValues: [{
					fieldName: StringResources.get('queryInfo'),
					node: node,
					type: 'ReactNode'
				}],
				properties: {
					open: false
				}
			}];
		};

		_createClass(ServiceabilitySQLInfo, [{
			key: 'widgetsLastCognosQuery',
			set: function set(cognosQuery) {
				this._widgetLastCognosQuery = cognosQuery;
			},
			get: function get() {
				return this._widgetLastCognosQuery;
			}
		}, {
			key: 'widgetsLastNativeQuery',
			set: function set(nativeQuery) {
				this._widgetLastNativeQuery = nativeQuery;
			},
			get: function get() {
				return this._widgetLastNativeQuery;
			}
		}, {
			key: 'widgetsLastMDXQuery',
			get: function get() {
				return this._widgetLastMDXQuery;
			},
			set: function set(MDXQuery) {
				this._widgetLastMDXQuery = MDXQuery;
			}
		}, {
			key: 'shouldFetchQuery',
			get: function get() {
				return this._shouldFetchQuery;
			},
			set: function set(state) {
				this._shouldFetchQuery = state;
			}
		}]);

		return ServiceabilitySQLInfo;
	}();
});
//# sourceMappingURL=ServiceabilitySQLInfo.js.map