@ytsaurus/ui 0.0.4 → 0.1.0

package/build/esm/ui/pages/query-tracker/QueryTrackerTopRow/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAEI;EACI,OAAA;EAEA,aAAA;EACA,mBAAA;ACFR;ADKI;EACI,iBAAA;ACHR;ADIQ;EACI,oBAAA;EACA,cAAA;EACA,mBAAA;ACFZ;ADQY;EAEI,8CAAA;ACNhB;ADIY;EACI,qBAAA;ACLhB;ADQgB;EACI,8CAAA;ACNpB","file":"index.css","sourcesContent":[".query-tracker-top-row-content {\n\n    &__meta {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n    }\n\n    &__control {\n        margin-right: 8px;\n        &_name {\n            display: inline-flex;\n            max-width: 30%;\n            align-items: center;\n        }\n    }\n\n    &__select {\n        .query-language-selector-item {\n            &__link {\n                text-decoration: none;\n                color: var(--yc-color-text-primary) !important;\n\n                &:hover {\n                    color: var(--yc-color-text-primary) !important;\n                }\n            }\n        }\n    }\n}\n",".query-tracker-top-row-content__meta {\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n.query-tracker-top-row-content__control {\n  margin-right: 8px;\n}\n.query-tracker-top-row-content__control_name {\n  display: inline-flex;\n  max-width: 30%;\n  align-items: center;\n}\n.query-tracker-top-row-content__select .query-language-selector-item__link {\n  text-decoration: none;\n  color: var(--yc-color-text-primary) !important;\n}\n.query-tracker-top-row-content__select .query-language-selector-item__link:hover {\n  color: var(--yc-color-text-primary) !important;\n}\n\n/*# sourceMappingURL=index.css.map */"]}
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,OAAA;ACCJ;ADCI;EACI,OAAA;EAEA,aAAA;EACA,mBAAA;ACAR;ADGI;EACI,OAAA;ACDR","file":"index.css","sourcesContent":[".query-tracker-top-row-content {\n    display: flex;\n    flex: 1;\n\n    &__meta {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n    }\n\n    &__meta &__meta-form {\n        flex: 1;\n    }\n}\n",".query-tracker-top-row-content {\n  display: flex;\n  flex: 1;\n}\n.query-tracker-top-row-content__meta {\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n.query-tracker-top-row-content__meta .query-tracker-top-row-content__meta-form {\n  flex: 1;\n}\n\n/*# sourceMappingURL=index.css.map */"]}

package/build/esm/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/esm/ui/pages/query-tracker/QueryTrackerTopRow/index.js

@@ -1,147 +1,34 @@
-import React, { useCallback, useMemo } from 'react';
+import React from 'react';
 import cn from 'bem-cn-lite';
+import { useSelector } from 'react-redux';
+import { Engines, QueryEngine } from '../module/api';
+import { QueryTrackerNewButton } from '../QueryTrackerNewButton';
 import { RowWithName } from '../../../containers/AppNavigation/TopRowContent/SectionName';
-import { Button, Icon, Select, Text } from '@gravity-ui/uikit';
-import { useDispatch, useSelector } from 'react-redux';
-import { createEmptyQuery, SET_QUERY_PATCH } from '../module/query/actions';
-import { getQuery, getQueryDraft } from '../module/query/selectors';
-import { EngineKeys, QueryEngine } from '../module/api';
-import { QueryEnginesNames } from '../utils/query';
-import chevronDownIcon from '../../../../../img/svg/icons/chevron-down.svg';
-import { EditableAsText } from '../../../components/EditableAsText/EditableAsText';
-import { QuerySettingsButton } from '../QuerySettingsButton';
 import { getCluster } from '../../../store/selectors/global';
-import { createNewQueryUrl } from '../utils/navigation';
-import Link from '../../../components/Link/Link';
 import { Page } from '../../../../shared/constants/settings';
+import { QueryMetaForm } from './QueryMetaForm';
 import './index.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 var block = cn('query-tracker-top-row-content');
-var engineBlock = cn('query-tracker-top-row-content');
-var Engines = EngineKeys.map(function (key) {
-  return {
-    value: key,
-    content: QueryEnginesNames[key]
-  };
-});
-var engineSelectorItem = cn('query-language-selector-item');
-var NewQuerySelector = function NewQuerySelector(_ref) {
-  var defaultEngine = _ref.defaultEngine;
+export function QueryHeader() {
   var cluster = useSelector(getCluster);
-  var engines = useMemo(function () {
-    return EngineKeys.map(function (engine) {
-      return {
-        value: engine,
-        content: /*#__PURE__*/_jsx(Link, {
-          className: engineSelectorItem('link'),
-          routed: true,
-          url: createNewQueryUrl(cluster, engine),
-          children: QueryEnginesNames[engine]
-        })
-      };
-    });
-  }, [cluster]);
-  var renderSelectControl = useCallback(function (_ref2) {
-    var onClick = _ref2.onClick,
-      onKeyDown = _ref2.onKeyDown,
-      ref = _ref2.ref;
-    return /*#__PURE__*/_jsx(Button, {
-      pin: "brick-round",
-      ref: ref,
-      onClick: onClick,
-      extraProps: {
-        onKeyDown: onKeyDown
-      },
-      children: /*#__PURE__*/_jsx(Icon, {
-        data: chevronDownIcon
-      })
-    });
-  }, []);
   return /*#__PURE__*/_jsxs("div", {
-    className: engineBlock(),
-    children: [/*#__PURE__*/_jsx(Link, {
-      routed: true,
-      url: createNewQueryUrl(cluster, defaultEngine),
-      children: /*#__PURE__*/_jsxs(Button, {
-        className: engineBlock('default'),
-        pin: "round-brick",
-        children: ["New query in ", QueryEnginesNames[defaultEngine], " syntax"]
-      })
-    }), /*#__PURE__*/_jsx(Select, {
-      popupClassName: engineBlock('select'),
-      options: engines,
-      renderControl: renderSelectControl
-    })]
-  });
-};
-function QueryTopRow() {
-  var _draft$annotations;
-  var dispatch = useDispatch();
-  var draft = useSelector(getQueryDraft);
-  var originalQuery = useSelector(getQuery);
-  var onEngineChange = useCallback(function (engines) {
-    dispatch({
-      type: SET_QUERY_PATCH,
-      data: {
-        engine: engines[0]
-      }
-    });
-  }, [dispatch]);
-  var createQuery = useCallback(function (engine) {
-    dispatch(createEmptyQuery(engine));
-  }, [dispatch]);
-  var onNameChange = useCallback(function (name) {
-    dispatch({
-      type: SET_QUERY_PATCH,
-      data: {
-        annotations: {
-          title: name
-        }
-      }
-    });
-  }, [dispatch]);
-  var onSettingsChange = useCallback(function (settings) {
-    dispatch({
-      type: 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__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("div", {
+    className: block(),
+    children: [/*#__PURE__*/_jsx("div", {
       className: block('meta'),
-      children: [/*#__PURE__*/_jsx(EditableAsText, {
-        withControls: true,
-        className: block('control', {
-          name: true
-        }),
-        onChange: onNameChange,
-        text: queryName,
-        children: /*#__PURE__*/_jsx(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__*/_jsx(Select, {
-        className: block('control'),
-        options: Engines,
-        value: [draft.engine],
-        onUpdate: onEngineChange
-      }), /*#__PURE__*/_jsx(QuerySettingsButton, {
-        className: block('control'),
-        settings: draft.settings,
-        onChange: onSettingsChange
-      })]
+      children: /*#__PURE__*/_jsx(QueryMetaForm, {
+        className: block('meta-form')
+      })
     }), /*#__PURE__*/_jsx("div", {
-      children: /*#__PURE__*/_jsx(NewQuerySelector, {
+      children: /*#__PURE__*/_jsx(QueryTrackerNewButton, {
         defaultEngine: QueryEngine.YQL,
-        onChoose: createQuery
+        cluster: cluster,
+        engines: Engines,
+        renderDefaultTitle: function renderDefaultTitle(_ref) {
+          var engineTitle = _ref.engineTitle;
+          return "New query in ".concat(engineTitle, " syntax");
+        }
       })
     })]
   });
@@ -149,8 +36,7 @@ function QueryTopRow() {
 export function QueryTrackerTopRow() {
   return /*#__PURE__*/_jsx(RowWithName, {
     page: Page.QUERIES,
-    className: block(),
-    children: /*#__PURE__*/_jsx(QueryTopRow, {})
+    children: /*#__PURE__*/_jsx(QueryHeader, {})
   });
 }
 // #sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","cn","RowWithName","Button","Icon","Select","Text","useDispatch","useSelector","createEmptyQuery","SET_QUERY_PATCH","getQuery","getQueryDraft","EngineKeys","QueryEngine","QueryEnginesNames","chevronDownIcon","EditableAsText","QuerySettingsButton","getCluster","createNewQueryUrl","Link","Page","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","block","engineBlock","Engines","map","key","value","content","engineSelectorItem","NewQuerySelector","_ref","defaultEngine","cluster","engines","engine","className","routed","url","children","renderSelectControl","_ref2","onClick","onKeyDown","ref","pin","extraProps","data","popupClassName","options","renderControl","QueryTopRow","_draft$annotations","dispatch","draft","originalQuery","onEngineChange","type","createQuery","onNameChange","name","annotations","title","onSettingsChange","settings","queryName","withControls","onChange","text","variant","color","ellipsis","id","onUpdate","YQL","onChoose","QueryTrackerTopRow","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":["React","cn","useSelector","Engines","QueryEngine","QueryTrackerNewButton","RowWithName","getCluster","Page","QueryMetaForm","jsx","_jsx","jsxs","_jsxs","block","QueryHeader","cluster","className","children","defaultEngine","YQL","engines","renderDefaultTitle","_ref","engineTitle","concat","QueryTrackerTopRow","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":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,EAAE,MAAM,aAAa;AAC5B,SAAQC,WAAW,QAAO,aAAa;AACvC,SAAQC,OAAO,EAAEC,WAAW,QAAO,eAAe;AAClD,SAAQC,qBAAqB,QAAO,0BAA0B;AAC9D,SAAQC,WAAW,QAAO,6DAA6D;AACvF,SAAQC,UAAU,QAAO,iCAAiC;AAC1D,SAAQC,IAAI,QAAO,uCAAuC;AAC1D,SAAQC,aAAa,QAAO,iBAAiB;AAE7C,OAAO,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEtB,IAAMC,KAAK,GAAGb,EAAE,CAAC,+BAA+B,CAAC;AAEjD,OAAO,SAASc,WAAWA,CAAA,EAAG;EAC1B,IAAMC,OAAO,GAAGd,WAAW,CAACK,UAAU,CAAC;EAEvC,oBACIM,KAAA;IAAKI,SAAS,EAAEH,KAAK,EAAG;IAAAI,QAAA,gBACpBP,IAAA;MAAKM,SAAS,EAAEH,KAAK,CAAC,MAAM,CAAE;MAAAI,QAAA,eAC1BP,IAAA,CAACF,aAAa;QAACQ,SAAS,EAAEH,KAAK,CAAC,WAAW;MAAE;IAAG,EAC9C,eACNH,IAAA;MAAAO,QAAA,eACIP,IAAA,CAACN,qBAAqB;QAClBc,aAAa,EAAEf,WAAW,CAACgB,GAAI;QAC/BJ,OAAO,EAAEA,OAAQ;QACjBK,OAAO,EAAElB,OAAQ;QACjBmB,kBAAkB,EAAE,SAAAA,mBAAAC,IAAA;UAAA,IAAEC,WAAW,GAAAD,IAAA,CAAXC,WAAW;UAAA,uBAAAC,MAAA,CAAsBD,WAAW;QAAA;MAAU;IAC9E,EACA;EAAA,EACJ;AAEd;AAEA,OAAO,SAASE,kBAAkBA,CAAA,EAAG;EACjC,oBACIf,IAAA,CAACL,WAAW;IAACqB,IAAI,EAAEnB,IAAI,CAACoB,OAAQ;IAAAV,QAAA,eAC5BP,IAAA,CAACI,WAAW;EAAG,EACL;AAEtB"}

package/build/esm/ui/pages/query-tracker/QueryTrackerTopRow/index.scss

@@ -1,4 +1,6 @@
 .query-tracker-top-row-content {
+    display: flex;
+    flex: 1;
 
     &__meta {
         flex: 1;
@@ -7,25 +9,7 @@
         align-items: center;
     }
 
-    &__control {
-        margin-right: 8px;
-        &_name {
-            display: inline-flex;
-            max-width: 30%;
-            align-items: center;
-        }
-    }
-
-    &__select {
-        .query-language-selector-item {
-            &__link {
-                text-decoration: none;
-                color: var(--yc-color-text-primary) !important;
-
-                &:hover {
-                    color: var(--yc-color-text-primary) !important;
-                }
-            }
-        }
+    &__meta &__meta-form {
+        flex: 1;
     }
 }

package/build/esm/ui/pages/query-tracker/QueryWidget/index.css

@@ -0,0 +1,28 @@
+.query-widget {
+  flex: 1;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--main-background);
+  width: 100%;
+  height: 100%;
+}
+.query-widget__header {
+  display: flex;
+  padding: 12px;
+}
+.query-widget__header .query-widget__control:not(:last-child) {
+  margin-right: 8px;
+}
+.query-widget__header-controls {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.query-widget__header-control-right {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+/*# sourceMappingURL=index.css.map */

package/build/esm/ui/pages/query-tracker/QueryWidget/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,OAAA;EACA,UAAA;EACA,aAAA;EACA,sBAAA;EACA,kCAAA;EACA,WAAA;EACA,YAAA;ACCJ;ADCI;EACI,aAAA;EACA,aAAA;ACCR;ADEI;EACI,iBAAA;ACAR;ADGI;EACI,OAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;ACDR;ADII;EACI,OAAA;EACA,aAAA;EACA,yBAAA;ACFR","file":"index.css","sourcesContent":[".query-widget {\n    flex: 1;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    background: var(--main-background);\n    width: 100%;\n    height: 100%;\n\n    &__header {\n        display: flex;\n        padding: 12px;\n    }\n\n    &__header &__control:not(:last-child) {\n        margin-right: 8px;\n    }\n\n    &__header-controls {\n        flex: 1;\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n    }\n\n    &__header-control-right {\n        flex: 1;\n        display: flex;\n        justify-content: flex-end;\n    }\n}\n",".query-widget {\n  flex: 1;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--main-background);\n  width: 100%;\n  height: 100%;\n}\n.query-widget__header {\n  display: flex;\n  padding: 12px;\n}\n.query-widget__header .query-widget__control:not(:last-child) {\n  margin-right: 8px;\n}\n.query-widget__header-controls {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n.query-widget__header-control-right {\n  flex: 1;\n  display: flex;\n  justify-content: flex-end;\n}\n\n/*# sourceMappingURL=index.css.map */"]}

package/build/esm/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/esm/ui/pages/query-tracker/QueryWidget/index.js

@@ -0,0 +1,73 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import cn from 'bem-cn-lite';
+import { QueryEditor } from '../QueryEditor/QueryEditor';
+import { QueryMetaForm } from '../QueryTrackerTopRow/QueryMetaForm';
+import Icon from '../../../components/Icon/Icon';
+import { useSelector } from 'react-redux';
+import { getCluster } from '../../../store/selectors/global';
+import { createQueryUrl } from '../utils/navigation';
+import { Button } from '@gravity-ui/uikit';
+import { QueryTrackerNewButton } from '../QueryTrackerNewButton';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var block = cn('query-widget');
+export function QueryWidget(_ref) {
+  var onClose = _ref.onClose;
+  var cluster = useSelector(getCluster);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    queryId = _useState2[0],
+    setQueryId = _useState2[1];
+  var onStartQuery = useCallback(function (query) {
+    setQueryId(query);
+  }, [setQueryId]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: block(),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: block('header'),
+      children: [/*#__PURE__*/_jsx(QueryMetaForm, {
+        className: block('meta-form')
+      }), /*#__PURE__*/_jsxs("div", {
+        className: block('header-controls'),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: block('header-control-left'),
+          children: queryId && /*#__PURE__*/_jsxs(Button, {
+            className: block('control'),
+            view: "outlined",
+            href: createQueryUrl(cluster, queryId),
+            target: "_blank",
+            children: [/*#__PURE__*/_jsx(Icon, {
+              awesome: "external-link"
+            }), "Open query"]
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: block('header-control-right'),
+          children: [/*#__PURE__*/_jsx(QueryTrackerNewButton, {
+            className: block('control'),
+            renderDefaultTitle: function renderDefaultTitle(_ref2) {
+              var engineTitle = _ref2.engineTitle;
+              return /*#__PURE__*/_jsxs(_Fragment, {
+                children: ["Open query in ", engineTitle, " syntax"]
+              });
+            },
+            cluster: cluster,
+            target: "_blank"
+          }), /*#__PURE__*/_jsx(Button, {
+            view: "flat",
+            className: block('control'),
+            onClick: onClose,
+            children: /*#__PURE__*/_jsx(Icon, {
+              awesome: "times"
+            })
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(QueryEditor, {
+      onStartQuery: onStartQuery
+    })]
+  });
+}
+// #sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useState","cn","QueryEditor","QueryMetaForm","Icon","useSelector","getCluster","createQueryUrl","Button","QueryTrackerNewButton","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","block","QueryWidget","_ref","onClose","cluster","_useState","_useState2","_slicedToArray","queryId","setQueryId","onStartQuery","query","className","children","view","href","target","awesome","renderDefaultTitle","_ref2","engineTitle","onClick"],"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":";AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,QAAQ,QAAO,OAAO;AAClD,OAAOC,EAAE,MAAM,aAAa;AAC5B,SAAQC,WAAW,QAAO,4BAA4B;AACtD,SAAQC,aAAa,QAAO,qCAAqC;AACjE,OAAOC,IAAI,MAAM,+BAA+B;AAChD,SAAQC,WAAW,QAAO,aAAa;AACvC,SAAQC,UAAU,QAAO,iCAAiC;AAC1D,SAAQC,cAAc,QAAO,qBAAqB;AAClD,SAAQC,MAAM,QAAO,mBAAmB;AACxC,SAAQC,qBAAqB,QAAO,0BAA0B;AAC9D,OAAO,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEtB,IAAMC,KAAK,GAAGf,EAAE,CAAC,cAAc,CAAC;AAIhC,OAAO,SAASgB,WAAWA,CAAAC,IAAA,EAA8B;EAAA,IAA5BC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAChC,IAAMC,OAAO,GAAGf,WAAW,CAACC,UAAU,CAAC;EACvC,IAAAe,SAAA,GAA8BrB,QAAQ,CAAgB,IAAI,CAAC;IAAAsB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAApDG,OAAO,GAAAF,UAAA;IAAEG,UAAU,GAAAH,UAAA;EAC1B,IAAMI,YAAY,GAAG3B,WAAW,CAC5B,UAAC4B,KAAa,EAAK;IACfF,UAAU,CAACE,KAAK,CAAC;EACrB,CAAC,EACD,CAACF,UAAU,CAAC,CACf;EACD,oBACIZ,KAAA;IAAKe,SAAS,EAAEZ,KAAK,EAAG;IAAAa,QAAA,gBACpBhB,KAAA;MAAKe,SAAS,EAAEZ,KAAK,CAAC,QAAQ,CAAE;MAAAa,QAAA,gBAC5BlB,IAAA,CAACR,aAAa;QAACyB,SAAS,EAAEZ,KAAK,CAAC,WAAW;MAAE,EAAG,eAChDH,KAAA;QAAKe,SAAS,EAAEZ,KAAK,CAAC,iBAAiB,CAAE;QAAAa,QAAA,gBACrClB,IAAA;UAAKiB,SAAS,EAAEZ,KAAK,CAAC,qBAAqB,CAAE;UAAAa,QAAA,EACxCL,OAAO,iBACJX,KAAA,CAACL,MAAM;YACHoB,SAAS,EAAEZ,KAAK,CAAC,SAAS,CAAE;YAC5Bc,IAAI,EAAC,UAAU;YACfC,IAAI,EAAExB,cAAc,CAACa,OAAO,EAAEI,OAAO,CAAE;YACvCQ,MAAM,EAAC,QAAQ;YAAAH,QAAA,gBAEflB,IAAA,CAACP,IAAI;cAAC6B,OAAO,EAAC;YAAe,EAAG,cAEpC;UAAA;QACH,EACC,eACNpB,KAAA;UAAKe,SAAS,EAAEZ,KAAK,CAAC,sBAAsB,CAAE;UAAAa,QAAA,gBAC1ClB,IAAA,CAACF,qBAAqB;YAClBmB,SAAS,EAAEZ,KAAK,CAAC,SAAS,CAAE;YAC5BkB,kBAAkB,EAAE,SAAAA,mBAAAC,KAAA;cAAA,IAAEC,WAAW,GAAAD,KAAA,CAAXC,WAAW;cAAA,oBAC7BvB,KAAA,CAAAE,SAAA;gBAAAc,QAAA,GAAE,gBAAc,EAACO,WAAW,EAAC,SAAO;cAAA,EAAG;YAAA,CACzC;YACFhB,OAAO,EAAEA,OAAQ;YACjBY,MAAM,EAAC;UAAQ,EACjB,eACFrB,IAAA,CAACH,MAAM;YAACsB,IAAI,EAAC,MAAM;YAACF,SAAS,EAAEZ,KAAK,CAAC,SAAS,CAAE;YAACqB,OAAO,EAAElB,OAAQ;YAAAU,QAAA,eAC9DlB,IAAA,CAACP,IAAI;cAAC6B,OAAO,EAAC;YAAO;UAAG,EACnB;QAAA,EACP;MAAA,EACJ;IAAA,EACJ,eACNtB,IAAA,CAACT,WAAW;MAACwB,YAAY,EAAEA;IAAa,EAAG;EAAA,EACzC;AAEd"}

package/build/esm/ui/pages/query-tracker/QueryWidget/index.scss

@@ -0,0 +1,31 @@
+.query-widget {
+    flex: 1;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--main-background);
+    width: 100%;
+    height: 100%;
+
+    &__header {
+        display: flex;
+        padding: 12px;
+    }
+
+    &__header &__control:not(:last-child) {
+        margin-right: 8px;
+    }
+
+    &__header-controls {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    &__header-control-right {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+    }
+}

package/build/esm/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;