@ytsaurus/ui 0.0.4 → 0.1.0

package/build/cjs/ui/pages/query-tracker/QueryTrackerNewButton/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ButtonProps } from '@gravity-ui/uikit';
+import { QueryEngine } from '../module/api';
+import './index.scss';
+export type QueryTracketrNewButtonProps = {
+    className?: string;
+    view?: ButtonProps['view'];
+    cluster: string;
+    engines?: QueryEngine[];
+    defaultEngine?: QueryEngine;
+    target?: '_blank';
+    renderDefaultTitle: (props: {
+        engine: QueryEngine;
+        engineTitle: string;
+    }) => React.ReactChild;
+    path?: string;
+};
+export declare const QueryTrackerNewButton: ({ className, view, cluster, path, engines, renderDefaultTitle, defaultEngine, target, }: QueryTracketrNewButtonProps) => JSX.Element;

package/build/cjs/ui/pages/query-tracker/QueryTrackerNewButton/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryTrackerNewButton = void 0;
+var _react = require("react");
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+var _uikit = require("@gravity-ui/uikit");
+var _api = require("../module/api");
+var _navigation = require("../utils/navigation");
+var _Link = _interopRequireDefault(require("../../../components/Link/Link"));
+var _Icon = _interopRequireDefault(require("../../../components/Icon/Icon"));
+var _query = require("../utils/query");
+var _jsxRuntime = require("react/jsx-runtime");
+var block = (0, _bemCnLite["default"])('query-new-button');
+var engineSelectorItem = (0, _bemCnLite["default"])('query-language-selector-item');
+var QueryTrackerNewButton = function QueryTrackerNewButton(_ref) {
+  var className = _ref.className,
+    view = _ref.view,
+    cluster = _ref.cluster,
+    path = _ref.path,
+    _ref$engines = _ref.engines,
+    engines = _ref$engines === void 0 ? _api.Engines : _ref$engines,
+    renderDefaultTitle = _ref.renderDefaultTitle,
+    _ref$defaultEngine = _ref.defaultEngine,
+    defaultEngine = _ref$defaultEngine === void 0 ? _api.QueryEngine.YQL : _ref$defaultEngine,
+    target = _ref.target;
+  var engineOptions = (0, _react.useMemo)(function () {
+    return engines.filter(function (engine) {
+      return engine !== defaultEngine;
+    }).map(function (engine) {
+      return {
+        value: engine,
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link["default"], {
+          className: engineSelectorItem('link'),
+          routed: target !== '_blank',
+          url: (0, _navigation.createNewQueryUrl)(cluster, engine, {
+            path: path
+          }),
+          children: _query.QueryEnginesNames[engine]
+        })
+      };
+    });
+  }, [cluster, defaultEngine, engines, path]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: block(null, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link["default"], {
+      routed: target !== '_blank',
+      url: (0, _navigation.createNewQueryUrl)(cluster, defaultEngine, {
+        path: path
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+        className: block('default'),
+        view: view,
+        pin: engineOptions !== null && engineOptions !== void 0 && engineOptions.length ? 'round-clear' : 'round-round',
+        children: renderDefaultTitle({
+          engine: defaultEngine,
+          engineTitle: _query.QueryEnginesNames[defaultEngine]
+        })
+      })
+    }), Boolean(engineOptions === null || engineOptions === void 0 ? void 0 : engineOptions.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Select, {
+      popupClassName: block('select'),
+      options: engineOptions,
+      value: undefined,
+      renderControl: function renderControl(_ref2) {
+        var onClick = _ref2.onClick,
+          onKeyDown = _ref2.onKeyDown,
+          ref = _ref2.ref;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+          ref: ref,
+          onClick: onClick,
+          extraProps: {
+            onKeyDown: onKeyDown
+          },
+          view: view,
+          pin: "clear-round",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+            awesome: "chevron-down"
+          })
+        });
+      }
+    })]
+  });
+};
+// #sourceMappingURL=index.js.map
+exports.QueryTrackerNewButton = QueryTrackerNewButton;
+// #sourceMappingURL=index.js.map

package/build/cjs/ui/pages/query-tracker/QueryTrackerNewButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_bemCnLite","_interopRequireDefault","_uikit","_api","_navigation","_Link","_Icon","_query","_jsxRuntime","block","cn","engineSelectorItem","QueryTrackerNewButton","_ref","className","view","cluster","path","_ref$engines","engines","Engines","renderDefaultTitle","_ref$defaultEngine","defaultEngine","QueryEngine","YQL","target","engineOptions","useMemo","filter","engine","map","value","content","_jsx","Link","routed","url","createNewQueryUrl","children","QueryEnginesNames","_jsxs","Button","pin","length","engineTitle","Boolean","Select","popupClassName","options","undefined","renderControl","_ref2","onClick","onKeyDown","ref","extraProps","Icon","awesome"],"sources":["index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport cn from 'bem-cn-lite';\nimport {ButtonProps, SelectOption, Button, Select} from '@gravity-ui/uikit';\nimport {Engines, QueryEngine} from '../module/api';\nimport {createNewQueryUrl} from '../utils/navigation';\nimport Link from '../../../components/Link/Link';\nimport Icon from '../../../components/Icon/Icon';\nimport {QueryEnginesNames} from '../utils/query';\n\nimport './index.scss';\n\nconst block = cn('query-new-button');\n\nconst engineSelectorItem = cn('query-language-selector-item');\n\nexport type QueryTracketrNewButtonProps = {\n    className?: string;\n    view?: ButtonProps['view'];\n    cluster: string;\n    engines?: QueryEngine[];\n    defaultEngine?: QueryEngine;\n    target?: '_blank';\n    renderDefaultTitle: (props: {engine: QueryEngine; engineTitle: string}) => React.ReactChild;\n    path?: string;\n};\n\nexport const QueryTrackerNewButton = ({\n    className,\n    view,\n    cluster,\n    path,\n    engines = Engines,\n    renderDefaultTitle,\n    defaultEngine = QueryEngine.YQL,\n    target,\n}: QueryTracketrNewButtonProps) => {\n    const engineOptions = useMemo<SelectOption[]>(() => {\n        return engines\n            .filter((engine) => engine !== defaultEngine)\n            .map((engine) => ({\n                value: engine,\n                content: (\n                    <Link\n                        className={engineSelectorItem('link')}\n                        routed={target !== '_blank'}\n                        url={createNewQueryUrl(cluster, engine, {path})}\n                    >\n                        {QueryEnginesNames[engine]}\n                    </Link>\n                ),\n            }));\n    }, [cluster, defaultEngine, engines, path]);\n\n    return (\n        <div className={block(null, className)}>\n            <Link\n                routed={target !== '_blank'}\n                url={createNewQueryUrl(cluster, defaultEngine, {path})}\n            >\n                <Button\n                    className={block('default')}\n                    view={view}\n                    pin={engineOptions?.length ? 'round-clear' : 'round-round'}\n                >\n                    {renderDefaultTitle({\n                        engine: defaultEngine,\n                        engineTitle: QueryEnginesNames[defaultEngine],\n                    })}\n                </Button>\n            </Link>\n            {Boolean(engineOptions?.length) && (\n                <Select\n                    popupClassName={block('select')}\n                    options={engineOptions}\n                    value={undefined}\n                    renderControl={({onClick, onKeyDown, ref}) => (\n                        <Button\n                            ref={ref}\n                            onClick={onClick}\n                            extraProps={{onKeyDown}}\n                            view={view}\n                            pin=\"clear-round\"\n                        >\n                            <Icon awesome=\"chevron-down\" />\n                        </Button>\n                    )}\n                />\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/build/cjs/ui/pages/query-tracker/QueryTrackerTopRow/QueryMetaForm/index.d.ts

@@ -0,0 +1,4 @@
+import './index.scss';
+export declare function QueryMetaForm({ className }: {
+    className: string;
+}): JSX.Element;

package/build/cjs/ui/pages/query-tracker/QueryTrackerTopRow/QueryMetaForm/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryMetaForm = QueryMetaForm;
+var _react = require("react");
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+var _uikit = require("@gravity-ui/uikit");
+var _EditableAsText = require("../../../../components/EditableAsText/EditableAsText");
+var _reactRedux = require("react-redux");
+var _api = require("../../module/api");
+var _actions = require("../../module/query/actions");
+var _selectors = require("../../module/query/selectors");
+var _query = require("../../utils/query");
+var _QuerySettingsButton = require("../../QuerySettingsButton");
+var _jsxRuntime = require("react/jsx-runtime");
+var EngineOptions = _api.Engines.map(function (key) {
+  return {
+    value: key,
+    content: _query.QueryEnginesNames[key]
+  };
+});
+var block = (0, _bemCnLite["default"])('query-tracker-meta-form');
+function QueryMetaForm(_ref) {
+  var _draft$annotations;
+  var className = _ref.className;
+  var dispatch = (0, _reactRedux.useDispatch)();
+  var draft = (0, _reactRedux.useSelector)(_selectors.getQueryDraft);
+  var originalQuery = (0, _reactRedux.useSelector)(_selectors.getQuery);
+  var onEngineChange = (0, _react.useCallback)(function (engines) {
+    dispatch({
+      type: _actions.SET_QUERY_PATCH,
+      data: {
+        engine: engines[0]
+      }
+    });
+  }, [dispatch]);
+  var onNameChange = (0, _react.useCallback)(function (name) {
+    dispatch({
+      type: _actions.SET_QUERY_PATCH,
+      data: {
+        annotations: {
+          title: name
+        }
+      }
+    });
+  }, [dispatch]);
+  var onSettingsChange = (0, _react.useCallback)(function (settings) {
+    dispatch({
+      type: _actions.SET_QUERY_PATCH,
+      data: {
+        settings: settings
+      }
+    });
+  }, [dispatch]);
+  var queryName = (_draft$annotations = draft.annotations) === null || _draft$annotations === void 0 ? void 0 : _draft$annotations.title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: block(null, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableAsText.EditableAsText, {
+      withControls: true,
+      className: block('control', {
+        name: true
+      }),
+      onChange: onNameChange,
+      text: queryName,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+        title: queryName,
+        variant: "body-1",
+        color: queryName ? 'primary' : 'secondary',
+        ellipsis: true,
+        children: queryName || 'No name'
+      })
+    }, originalQuery === null || originalQuery === void 0 ? void 0 : originalQuery.id), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Select, {
+      className: block('control'),
+      options: EngineOptions,
+      value: [draft.engine],
+      onUpdate: onEngineChange
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuerySettingsButton.QuerySettingsButton, {
+      className: block('control'),
+      settings: draft.settings,
+      onChange: onSettingsChange
+    })]
+  });
+}
+// #sourceMappingURL=index.js.map
+// #sourceMappingURL=index.js.map

package/build/cjs/ui/pages/query-tracker/QueryTrackerTopRow/QueryMetaForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_bemCnLite","_interopRequireDefault","_uikit","_EditableAsText","_reactRedux","_api","_actions","_selectors","_query","_QuerySettingsButton","_jsxRuntime","EngineOptions","Engines","map","key","value","content","QueryEnginesNames","block","cn","QueryMetaForm","_ref","_draft$annotations","className","dispatch","useDispatch","draft","useSelector","getQueryDraft","originalQuery","getQuery","onEngineChange","useCallback","engines","type","SET_QUERY_PATCH","data","engine","onNameChange","name","annotations","title","onSettingsChange","settings","queryName","_jsxs","children","_jsx","EditableAsText","withControls","onChange","text","Text","variant","color","ellipsis","id","Select","options","onUpdate","QuerySettingsButton"],"sources":["index.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport cn from 'bem-cn-lite';\nimport {Select, Text} from '@gravity-ui/uikit';\nimport {EditableAsText} from '../../../../components/EditableAsText/EditableAsText';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {Engines} from '../../module/api';\nimport {SET_QUERY_PATCH} from '../../module/query/actions';\nimport {getQueryDraft, getQuery} from '../../module/query/selectors';\nimport {QueryEnginesNames} from '../../utils/query';\nimport {QuerySettingsButton} from '../../QuerySettingsButton';\nimport './index.scss';\n\nconst EngineOptions = Engines.map((key) => ({\n    value: key,\n    content: QueryEnginesNames[key],\n}));\n\nconst block = cn('query-tracker-meta-form');\nexport function QueryMetaForm({className}: {className: string}) {\n    const dispatch = useDispatch();\n    const draft = useSelector(getQueryDraft);\n    const originalQuery = useSelector(getQuery);\n\n    const onEngineChange = useCallback(\n        (engines: string[]) => {\n            dispatch({\n                type: SET_QUERY_PATCH,\n                data: {\n                    engine: engines[0],\n                },\n            });\n        },\n        [dispatch],\n    );\n\n    const onNameChange = useCallback(\n        (name: string) => {\n            dispatch({\n                type: SET_QUERY_PATCH,\n                data: {\n                    annotations: {\n                        title: name,\n                    },\n                },\n            });\n        },\n        [dispatch],\n    );\n\n    const onSettingsChange = useCallback(\n        (settings: Record<string, string>) => {\n            dispatch({\n                type: SET_QUERY_PATCH,\n                data: {\n                    settings,\n                },\n            });\n        },\n        [dispatch],\n    );\n\n    const queryName = draft.annotations?.title;\n    return (\n        <div className={block(null, className)}>\n            <EditableAsText\n                withControls\n                className={block('control', {name: true})}\n                onChange={onNameChange}\n                text={queryName}\n                key={originalQuery?.id}\n            >\n                <Text\n                    title={queryName}\n                    variant=\"body-1\"\n                    color={queryName ? 'primary' : 'secondary'}\n                    ellipsis\n                >\n                    {queryName || 'No name'}\n                </Text>\n            </EditableAsText>\n            <Select\n                className={block('control')}\n                options={EngineOptions}\n                value={[draft.engine]}\n                onUpdate={onEngineChange}\n            />\n            <QuerySettingsButton\n                className={block('control')}\n                settings={draft.settings}\n                onChange={onSettingsChange}\n            />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/build/cjs/ui/pages/query-tracker/QueryTrackerTopRow/index.d.ts

@@ -1,2 +1,3 @@
 import './index.scss';
+export declare function QueryHeader(): JSX.Element;
 export declare function QueryTrackerTopRow(): JSX.Element;

package/build/cjs/ui/pages/query-tracker/QueryTrackerTopRow/index.js

@@ -4,148 +4,36 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.QueryHeader = QueryHeader;
 exports.QueryTrackerTopRow = QueryTrackerTopRow;
-var _react = require("react");
 var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
-var _SectionName = require("../../../containers/AppNavigation/TopRowContent/SectionName");
-var _uikit = require("@gravity-ui/uikit");
 var _reactRedux = require("react-redux");
-var _actions = require("../module/query/actions");
-var _selectors = require("../module/query/selectors");
 var _api = require("../module/api");
-var _query = require("../utils/query");
-var _chevronDown = _interopRequireDefault(require("../../../../../img/svg/icons/chevron-down.svg"));
-var _EditableAsText = require("../../../components/EditableAsText/EditableAsText");
-var _QuerySettingsButton = require("../QuerySettingsButton");
+var _QueryTrackerNewButton = require("../QueryTrackerNewButton");
+var _SectionName = require("../../../containers/AppNavigation/TopRowContent/SectionName");
 var _global = require("../../../store/selectors/global");
-var _navigation = require("../utils/navigation");
-var _Link = _interopRequireDefault(require("../../../components/Link/Link"));
 var _settings = require("../../../../shared/constants/settings");
+var _QueryMetaForm = require("./QueryMetaForm");
 var _jsxRuntime = require("react/jsx-runtime");
 var block = (0, _bemCnLite["default"])('query-tracker-top-row-content');
-var engineBlock = (0, _bemCnLite["default"])('query-tracker-top-row-content');
-var Engines = _api.EngineKeys.map(function (key) {
-  return {
-    value: key,
-    content: _query.QueryEnginesNames[key]
-  };
-});
-var engineSelectorItem = (0, _bemCnLite["default"])('query-language-selector-item');
-var NewQuerySelector = function NewQuerySelector(_ref) {
-  var defaultEngine = _ref.defaultEngine;
+function QueryHeader() {
   var cluster = (0, _reactRedux.useSelector)(_global.getCluster);
-  var engines = (0, _react.useMemo)(function () {
-    return _api.EngineKeys.map(function (engine) {
-      return {
-        value: engine,
-        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link["default"], {
-          className: engineSelectorItem('link'),
-          routed: true,
-          url: (0, _navigation.createNewQueryUrl)(cluster, engine),
-          children: _query.QueryEnginesNames[engine]
-        })
-      };
-    });
-  }, [cluster]);
-  var renderSelectControl = (0, _react.useCallback)(function (_ref2) {
-    var onClick = _ref2.onClick,
-      onKeyDown = _ref2.onKeyDown,
-      ref = _ref2.ref;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
-      pin: "brick-round",
-      ref: ref,
-      onClick: onClick,
-      extraProps: {
-        onKeyDown: onKeyDown
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
-        data: _chevronDown["default"]
-      })
-    });
-  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: engineBlock(),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link["default"], {
-      routed: true,
-      url: (0, _navigation.createNewQueryUrl)(cluster, defaultEngine),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Button, {
-        className: engineBlock('default'),
-        pin: "round-brick",
-        children: ["New query in ", _query.QueryEnginesNames[defaultEngine], " syntax"]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Select, {
-      popupClassName: engineBlock('select'),
-      options: engines,
-      renderControl: renderSelectControl
-    })]
-  });
-};
-function QueryTopRow() {
-  var _draft$annotations;
-  var dispatch = (0, _reactRedux.useDispatch)();
-  var draft = (0, _reactRedux.useSelector)(_selectors.getQueryDraft);
-  var originalQuery = (0, _reactRedux.useSelector)(_selectors.getQuery);
-  var onEngineChange = (0, _react.useCallback)(function (engines) {
-    dispatch({
-      type: _actions.SET_QUERY_PATCH,
-      data: {
-        engine: engines[0]
-      }
-    });
-  }, [dispatch]);
-  var createQuery = (0, _react.useCallback)(function (engine) {
-    dispatch((0, _actions.createEmptyQuery)(engine));
-  }, [dispatch]);
-  var onNameChange = (0, _react.useCallback)(function (name) {
-    dispatch({
-      type: _actions.SET_QUERY_PATCH,
-      data: {
-        annotations: {
-          title: name
-        }
-      }
-    });
-  }, [dispatch]);
-  var onSettingsChange = (0, _react.useCallback)(function (settings) {
-    dispatch({
-      type: _actions.SET_QUERY_PATCH,
-      data: {
-        settings: settings
-      }
-    });
-  }, [dispatch]);
-  var queryName = (_draft$annotations = draft.annotations) === null || _draft$annotations === void 0 ? void 0 : _draft$annotations.title;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: block(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: block('meta'),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableAsText.EditableAsText, {
-        withControls: true,
-        className: block('control', {
-          name: true
-        }),
-        onChange: onNameChange,
-        text: queryName,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
-          title: queryName,
-          variant: "body-1",
-          color: queryName ? 'primary' : 'secondary',
-          ellipsis: true,
-          children: queryName || 'No name'
-        })
-      }, originalQuery === null || originalQuery === void 0 ? void 0 : originalQuery.id), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Select, {
-        className: block('control'),
-        options: Engines,
-        value: [draft.engine],
-        onUpdate: onEngineChange
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuerySettingsButton.QuerySettingsButton, {
-        className: block('control'),
-        settings: draft.settings,
-        onChange: onSettingsChange
-      })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryMetaForm.QueryMetaForm, {
+        className: block('meta-form')
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NewQuerySelector, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryTrackerNewButton.QueryTrackerNewButton, {
         defaultEngine: _api.QueryEngine.YQL,
-        onChoose: createQuery
+        cluster: cluster,
+        engines: _api.Engines,
+        renderDefaultTitle: function renderDefaultTitle(_ref) {
+          var engineTitle = _ref.engineTitle;
+          return "New query in ".concat(engineTitle, " syntax");
+        }
       })
     })]
   });
@@ -153,8 +41,7 @@ function QueryTopRow() {
 function QueryTrackerTopRow() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionName.RowWithName, {
     page: _settings.Page.QUERIES,
-    className: block(),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(QueryTopRow, {})
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(QueryHeader, {})
   });
 }
 // #sourceMappingURL=index.js.map

package/build/cjs/ui/pages/query-tracker/QueryTrackerTopRow/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_bemCnLite","_interopRequireDefault","_SectionName","_uikit","_reactRedux","_actions","_selectors","_api","_query","_chevronDown","_EditableAsText","_QuerySettingsButton","_global","_navigation","_Link","_settings","_jsxRuntime","block","cn","engineBlock","Engines","EngineKeys","map","key","value","content","QueryEnginesNames","engineSelectorItem","NewQuerySelector","_ref","defaultEngine","cluster","useSelector","getCluster","engines","useMemo","engine","_jsx","Link","className","routed","url","createNewQueryUrl","children","renderSelectControl","useCallback","_ref2","onClick","onKeyDown","ref","Button","pin","extraProps","Icon","data","chevronDownIcon","_jsxs","Select","popupClassName","options","renderControl","QueryTopRow","_draft$annotations","dispatch","useDispatch","draft","getQueryDraft","originalQuery","getQuery","onEngineChange","type","SET_QUERY_PATCH","createQuery","createEmptyQuery","onNameChange","name","annotations","title","onSettingsChange","settings","queryName","_Fragment","EditableAsText","withControls","onChange","text","Text","variant","color","ellipsis","id","onUpdate","QuerySettingsButton","QueryEngine","YQL","onChoose","QueryTrackerTopRow","RowWithName","page","Page","QUERIES"],"sources":["index.tsx"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport cn from 'bem-cn-lite';\nimport {RowWithName} from '../../../containers/AppNavigation/TopRowContent/SectionName';\nimport {Button, Icon, Select, SelectOption, Text, SelectProps} from '@gravity-ui/uikit';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {createEmptyQuery, SET_QUERY_PATCH} from '../module/query/actions';\nimport {getQuery, getQueryDraft} from '../module/query/selectors';\nimport {EngineKeys, QueryEngine} from '../module/api';\nimport {QueryEnginesNames} from '../utils/query';\nimport chevronDownIcon from '../../../../../img/svg/icons/chevron-down.svg';\nimport {EditableAsText} from '../../../components/EditableAsText/EditableAsText';\nimport {QuerySettingsButton} from '../QuerySettingsButton';\nimport {getCluster} from '../../../store/selectors/global';\nimport {createNewQueryUrl} from '../utils/navigation';\nimport Link from '../../../components/Link/Link';\nimport {Page} from '../../../../shared/constants/settings';\nimport './index.scss';\n\nconst block = cn('query-tracker-top-row-content');\n\nconst engineBlock = cn('query-tracker-top-row-content');\n\nconst Engines = EngineKeys.map((key) => ({\n    value: key,\n    content: QueryEnginesNames[key],\n}));\n\nconst engineSelectorItem = cn('query-language-selector-item');\n\nconst NewQuerySelector = ({\n    defaultEngine,\n}: {\n    defaultEngine: QueryEngine;\n    onChoose?: (engine: QueryEngine) => void;\n}) => {\n    const cluster = useSelector(getCluster);\n\n    const engines = useMemo<SelectOption[]>(() => {\n        return EngineKeys.map((engine) => ({\n            value: engine,\n            content: (\n                <Link\n                    className={engineSelectorItem('link')}\n                    routed\n                    url={createNewQueryUrl(cluster, engine)}\n                >\n                    {QueryEnginesNames[engine]}\n                </Link>\n            ),\n        }));\n    }, [cluster]);\n\n    const renderSelectControl = useCallback<Required<SelectProps>['renderControl']>(\n        ({onClick, onKeyDown, ref}) => {\n            return (\n                <Button pin=\"brick-round\" ref={ref} onClick={onClick} extraProps={{onKeyDown}}>\n                    <Icon data={chevronDownIcon} />\n                </Button>\n            );\n        },\n        [],\n    );\n\n    return (\n        <div className={engineBlock()}>\n            <Link routed url={createNewQueryUrl(cluster, defaultEngine)}>\n                <Button className={engineBlock('default')} pin=\"round-brick\">\n                    New query in {QueryEnginesNames[defaultEngine]} syntax\n                </Button>\n            </Link>\n            <Select\n                popupClassName={engineBlock('select')}\n                options={engines}\n                renderControl={renderSelectControl}\n            />\n        </div>\n    );\n};\n\nfunction QueryTopRow() {\n    const dispatch = useDispatch();\n    const draft = useSelector(getQueryDraft);\n    const originalQuery = useSelector(getQuery);\n\n    const onEngineChange = useCallback(\n        (engines: string[]) => {\n            dispatch({\n                type: SET_QUERY_PATCH,\n                data: {\n                    engine: engines[0],\n                },\n            });\n        },\n        [dispatch],\n    );\n    const createQuery = useCallback(\n        (engine: QueryEngine) => {\n            dispatch(createEmptyQuery(engine));\n        },\n        [dispatch],\n    );\n\n    const onNameChange = useCallback(\n        (name: string) => {\n            dispatch({\n                type: SET_QUERY_PATCH,\n                data: {\n                    annotations: {\n                        title: name,\n                    },\n                },\n            });\n        },\n        [dispatch],\n    );\n\n    const onSettingsChange = useCallback(\n        (settings: Record<string, string>) => {\n            dispatch({\n                type: SET_QUERY_PATCH,\n                data: {\n                    settings,\n                },\n            });\n        },\n        [dispatch],\n    );\n\n    const queryName = draft.annotations?.title;\n\n    return (\n        <>\n            <div className={block('meta')}>\n                <EditableAsText\n                    withControls\n                    className={block('control', {name: true})}\n                    onChange={onNameChange}\n                    text={queryName}\n                    key={originalQuery?.id}\n                >\n                    <Text\n                        title={queryName}\n                        variant=\"body-1\"\n                        color={queryName ? 'primary' : 'secondary'}\n                        ellipsis\n                    >\n                        {queryName || 'No name'}\n                    </Text>\n                </EditableAsText>\n                <Select\n                    className={block('control')}\n                    options={Engines}\n                    value={[draft.engine]}\n                    onUpdate={onEngineChange}\n                />\n                <QuerySettingsButton\n                    className={block('control')}\n                    settings={draft.settings}\n                    onChange={onSettingsChange}\n                />\n            </div>\n            <div>\n                <NewQuerySelector defaultEngine={QueryEngine.YQL} onChoose={createQuery} />\n            </div>\n        </>\n    );\n}\n\nexport function QueryTrackerTopRow() {\n    return (\n        <RowWithName page={Page.QUERIES} className={block()}>\n            <QueryTopRow />\n        </RowWithName>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"names":["_bemCnLite","_interopRequireDefault","require","_reactRedux","_api","_QueryTrackerNewButton","_SectionName","_global","_settings","_QueryMetaForm","_jsxRuntime","block","cn","QueryHeader","cluster","useSelector","getCluster","_jsxs","className","children","_jsx","QueryMetaForm","QueryTrackerNewButton","defaultEngine","QueryEngine","YQL","engines","Engines","renderDefaultTitle","_ref","engineTitle","concat","QueryTrackerTopRow","RowWithName","page","Page","QUERIES"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'bem-cn-lite';\nimport {useSelector} from 'react-redux';\nimport {Engines, QueryEngine} from '../module/api';\nimport {QueryTrackerNewButton} from '../QueryTrackerNewButton';\nimport {RowWithName} from '../../../containers/AppNavigation/TopRowContent/SectionName';\nimport {getCluster} from '../../../store/selectors/global';\nimport {Page} from '../../../../shared/constants/settings';\nimport {QueryMetaForm} from './QueryMetaForm';\n\nimport './index.scss';\n\nconst block = cn('query-tracker-top-row-content');\n\nexport function QueryHeader() {\n    const cluster = useSelector(getCluster);\n\n    return (\n        <div className={block()}>\n            <div className={block('meta')}>\n                <QueryMetaForm className={block('meta-form')} />\n            </div>\n            <div>\n                <QueryTrackerNewButton\n                    defaultEngine={QueryEngine.YQL}\n                    cluster={cluster}\n                    engines={Engines}\n                    renderDefaultTitle={({engineTitle}) => `New query in ${engineTitle} syntax`}\n                />\n            </div>\n        </div>\n    );\n}\n\nexport function QueryTrackerTopRow() {\n    return (\n        <RowWithName page={Page.QUERIES}>\n            <QueryHeader />\n        </RowWithName>\n    );\n}\n"],"mappings":";;;;;;;;AACA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AACA,IAAAO,cAAA,GAAAP,OAAA;AAEsB,IAAAQ,WAAA,GAAAR,OAAA;AAEtB,IAAMS,KAAK,GAAG,IAAAC,qBAAE,EAAC,+BAA+B,CAAC;AAE1C,SAASC,WAAWA,CAAA,EAAG;EAC1B,IAAMC,OAAO,GAAG,IAAAC,uBAAW,EAACC,kBAAU,CAAC;EAEvC,oBACI,IAAAC,gBAAA;IAAKC,SAAS,EAAEP,KAAK,EAAG;IAAAQ,QAAA,gBACpB,IAAAC,eAAA;MAAKF,SAAS,EAAEP,KAAK,CAAC,MAAM,CAAE;MAAAQ,QAAA,eAC1B,IAAAC,eAAA,EAACC,4BAAa;QAACH,SAAS,EAAEP,KAAK,CAAC,WAAW;MAAE;IAAG,EAC9C,eACN,IAAAS,eAAA;MAAAD,QAAA,eACI,IAAAC,eAAA,EAACE,4CAAqB;QAClBC,aAAa,EAAEC,gBAAW,CAACC,GAAI;QAC/BX,OAAO,EAAEA,OAAQ;QACjBY,OAAO,EAAEC,YAAQ;QACjBC,kBAAkB,EAAE,SAAAA,mBAAAC,IAAA;UAAA,IAAEC,WAAW,GAAAD,IAAA,CAAXC,WAAW;UAAA,uBAAAC,MAAA,CAAsBD,WAAW;QAAA;MAAU;IAC9E,EACA;EAAA,EACJ;AAEd;AAEO,SAASE,kBAAkBA,CAAA,EAAG;EACjC,oBACI,IAAAZ,eAAA,EAACa,wBAAW;IAACC,IAAI,EAAEC,cAAI,CAACC,OAAQ;IAAAjB,QAAA,eAC5B,IAAAC,eAAA,EAACP,WAAW;EAAG,EACL;AAEtB"}

package/build/cjs/ui/pages/query-tracker/QueryWidget/index.d.ts

@@ -0,0 +1,5 @@
+import './index.scss';
+export type QueryWidgetProps = {
+    onClose: () => void;
+};
+export declare function QueryWidget({ onClose }: QueryWidgetProps): JSX.Element;

package/build/cjs/ui/pages/query-tracker/QueryWidget/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryWidget = QueryWidget;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+var _QueryEditor = require("../QueryEditor/QueryEditor");
+var _QueryMetaForm = require("../QueryTrackerTopRow/QueryMetaForm");
+var _Icon = _interopRequireDefault(require("../../../components/Icon/Icon"));
+var _reactRedux = require("react-redux");
+var _global = require("../../../store/selectors/global");
+var _navigation = require("../utils/navigation");
+var _uikit = require("@gravity-ui/uikit");
+var _QueryTrackerNewButton = require("../QueryTrackerNewButton");
+var _jsxRuntime = require("react/jsx-runtime");
+var block = (0, _bemCnLite["default"])('query-widget');
+function QueryWidget(_ref) {
+  var onClose = _ref.onClose;
+  var cluster = (0, _reactRedux.useSelector)(_global.getCluster);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    queryId = _useState2[0],
+    setQueryId = _useState2[1];
+  var onStartQuery = (0, _react.useCallback)(function (query) {
+    setQueryId(query);
+  }, [setQueryId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: block(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: block('header'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryMetaForm.QueryMetaForm, {
+        className: block('meta-form')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: block('header-controls'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: block('header-control-left'),
+          children: queryId && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Button, {
+            className: block('control'),
+            view: "outlined",
+            href: (0, _navigation.createQueryUrl)(cluster, queryId),
+            target: "_blank",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+              awesome: "external-link"
+            }), "Open query"]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: block('header-control-right'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryTrackerNewButton.QueryTrackerNewButton, {
+            className: block('control'),
+            renderDefaultTitle: function renderDefaultTitle(_ref2) {
+              var engineTitle = _ref2.engineTitle;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: ["Open query in ", engineTitle, " syntax"]
+              });
+            },
+            cluster: cluster,
+            target: "_blank"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+            view: "flat",
+            className: block('control'),
+            onClick: onClose,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
+              awesome: "times"
+            })
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryEditor.QueryEditor, {
+      onStartQuery: onStartQuery
+    })]
+  });
+}
+// #sourceMappingURL=index.js.map
+// #sourceMappingURL=index.js.map

package/build/cjs/ui/pages/query-tracker/QueryWidget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_bemCnLite","_interopRequireDefault","_QueryEditor","_QueryMetaForm","_Icon","_reactRedux","_global","_navigation","_uikit","_QueryTrackerNewButton","_jsxRuntime","block","cn","QueryWidget","_ref","onClose","cluster","useSelector","getCluster","_useState","useState","_useState2","_slicedToArray","queryId","setQueryId","onStartQuery","useCallback","query","_jsxs","className","children","_jsx","QueryMetaForm","Button","view","href","createQueryUrl","target","Icon","awesome","QueryTrackerNewButton","renderDefaultTitle","_ref2","engineTitle","_Fragment","onClick","QueryEditor"],"sources":["index.tsx"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport cn from 'bem-cn-lite';\nimport {QueryEditor} from '../QueryEditor/QueryEditor';\nimport {QueryMetaForm} from '../QueryTrackerTopRow/QueryMetaForm';\nimport Icon from '../../../components/Icon/Icon';\nimport {useSelector} from 'react-redux';\nimport {getCluster} from '../../../store/selectors/global';\nimport {createQueryUrl} from '../utils/navigation';\nimport {Button} from '@gravity-ui/uikit';\nimport {QueryTrackerNewButton} from '../QueryTrackerNewButton';\nimport './index.scss';\n\nconst block = cn('query-widget');\n\nexport type QueryWidgetProps = {onClose: () => void};\n\nexport function QueryWidget({onClose}: QueryWidgetProps) {\n    const cluster = useSelector(getCluster);\n    const [queryId, setQueryId] = useState<string | null>(null);\n    const onStartQuery = useCallback(\n        (query: string) => {\n            setQueryId(query);\n        },\n        [setQueryId],\n    );\n    return (\n        <div className={block()}>\n            <div className={block('header')}>\n                <QueryMetaForm className={block('meta-form')} />\n                <div className={block('header-controls')}>\n                    <div className={block('header-control-left')}>\n                        {queryId && (\n                            <Button\n                                className={block('control')}\n                                view=\"outlined\"\n                                href={createQueryUrl(cluster, queryId)}\n                                target=\"_blank\"\n                            >\n                                <Icon awesome=\"external-link\" />\n                                Open query\n                            </Button>\n                        )}\n                    </div>\n                    <div className={block('header-control-right')}>\n                        <QueryTrackerNewButton\n                            className={block('control')}\n                            renderDefaultTitle={({engineTitle}) => (\n                                <>Open query in {engineTitle} syntax</>\n                            )}\n                            cluster={cluster}\n                            target=\"_blank\"\n                        />\n                        <Button view=\"flat\" className={block('control')} onClick={onClose}>\n                            <Icon awesome=\"times\" />\n                        </Button>\n                    </div>\n                </div>\n            </div>\n            <QueryEditor onStartQuery={onStartQuery} />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/build/cjs/ui/pages/query-tracker/module/api.d.ts

@@ -6,7 +6,6 @@ export declare enum QueryEngine {
     CHYT = "chyt"
 }
 export declare const Engines: QueryEngine[];
-export declare const EngineKeys: QueryEngine[];
 export declare function isEngine(engine: string): engine is QueryEngine;
 export type QueryItemId = string;
 export type YQLStatistic = {
@@ -20,9 +19,6 @@ export type YQLSstatistics = Record<string, any>;
 export interface DraftQuery {
     engine: QueryEngine;
     query: string;
-    attributes?: {
-        title?: string;
-    };
     annotations?: {
         title?: string;
     };
@@ -42,6 +38,7 @@ export interface QueryItem extends DraftQuery {
     error: unknown;
 }
 export declare enum QueryStatus {
+    DRAFT = "draft",
     RUNNING = "running",
     PENDING = "pending",
     COMPLETING = "completing",
@@ -72,6 +69,10 @@ export type QueriesListRequestParams = {
     cursor?: QueriiesListCursorParams;
     limit?: number;
 };
+export declare function generateQueryFromTable(engine: QueryEngine, { cluster, path }: {
+    cluster: string;
+    path: string;
+}): Promise<DraftQuery | undefined>;
 export declare function loadQueriesList({ params, cursor, limit }: QueriesListRequestParams): Promise<{
     incomplete: boolean;
     queries: QueryItem[];
@@ -100,6 +101,15 @@ export declare function getDownloadQueryResultURL(cluster: string, queryId: stri
     end: number;
 }): string;
 export declare function requestQueries(ids: string[]): Promise<QueryItem[]>;
+export type QueryResultMetaScheme = {
+    name: string;
+    required: boolean;
+    type: string;
+    type_v3: {
+        type_name: string;
+        item: string;
+    };
+};
 export type QueryResultMeta = {
     id: string;
     result_index: number;
@@ -108,15 +118,7 @@ export type QueryResultMeta = {
             strict: boolean;
             unique_keys: boolean;
         };
-        $value: {
-            name: string;
-            required: boolean;
-            type: string;
-            type_v3: {
-                type_name: string;
-                item: string;
-            };
-        }[];
+        $value: QueryResultMetaScheme[];
     };
     data_statistics: {
         chunk_count: number;