@ytsaurus/ui 0.0.4 → 0.1.0

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

@@ -12,17 +12,10 @@
   width: 100%;
   z-index: 1;
 }
-.query-result-table__floating-bottom-left {
-  position: sticky;
-  bottom: 20px;
-  pointer-events: none;
-  display: flex;
-  z-index: 2;
-}
-.query-result-table__padding_span {
-  flex: 1;
-}
 .query-result-table__pagination {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
   margin-right: 20px;
   background-color: var(--yc-color-base-float);
   border-radius: 8px;

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

@@ -1 +1 @@
-{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,kBAAA;EACA,cAAA;ACCJ;ADCI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;ACCR;ADEI;EACI,gBAAA;EACA,YAAA;EACA,oBAAA;EACA,aAAA;EACA,UAAA;ACAR;ADGI;EACI,OAAA;ACDR;ADII;EACI,kBAAA;EACA,4CAAA;EACA,kBAAA;EACA,gDAAA;EACA,YAAA;EACA,mBAAA;ACFR","file":"index.css","sourcesContent":[".query-result-table {\n    height: 100%;\n    position: relative;\n    overflow: auto;\n\n    &__loading {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        position: absolute;\n        width: 100%;\n        z-index: 1;\n    }\n\n    &__floating-bottom-left {\n        position: sticky;\n        bottom: 20px;\n        pointer-events: none;\n        display: flex;\n        z-index: 2;\n    }\n\n    &__padding_span {\n        flex: 1;\n    }\n\n    &__pagination {\n        margin-right: 20px;\n        background-color: var(--yc-color-base-float);\n        border-radius: 8px;\n        box-shadow: 0 1px 8px var(--yc-color-sfx-shadow);\n        padding: 8px;\n        pointer-events: all;\n    }\n}\n",".query-result-table {\n  height: 100%;\n  position: relative;\n  overflow: auto;\n}\n.query-result-table__loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n  z-index: 1;\n}\n.query-result-table__floating-bottom-left {\n  position: sticky;\n  bottom: 20px;\n  pointer-events: none;\n  display: flex;\n  z-index: 2;\n}\n.query-result-table__padding_span {\n  flex: 1;\n}\n.query-result-table__pagination {\n  margin-right: 20px;\n  background-color: var(--yc-color-base-float);\n  border-radius: 8px;\n  box-shadow: 0 1px 8px var(--yc-color-sfx-shadow);\n  padding: 8px;\n  pointer-events: all;\n}\n\n/*# sourceMappingURL=index.css.map */"]}
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,kBAAA;EACA,cAAA;ACCJ;ADCI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,UAAA;ACCR;ADEI;EACI,eAAA;EACA,WAAA;EACA,YAAA;EAEA,kBAAA;EACA,4CAAA;EACA,kBAAA;EACA,gDAAA;EACA,YAAA;EACA,mBAAA;ACDR","file":"index.css","sourcesContent":[".query-result-table {\n    height: 100%;\n    position: relative;\n    overflow: auto;\n\n    &__loading {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        position: absolute;\n        width: 100%;\n        z-index: 1;\n    }\n\n    &__pagination {\n        position: fixed;\n        right: 20px;\n        bottom: 20px;\n\n        margin-right: 20px;\n        background-color: var(--yc-color-base-float);\n        border-radius: 8px;\n        box-shadow: 0 1px 8px var(--yc-color-sfx-shadow);\n        padding: 8px;\n        pointer-events: all;\n    }\n}\n",".query-result-table {\n  height: 100%;\n  position: relative;\n  overflow: auto;\n}\n.query-result-table__loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n  z-index: 1;\n}\n.query-result-table__pagination {\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  margin-right: 20px;\n  background-color: var(--yc-color-base-float);\n  border-radius: 8px;\n  box-shadow: 0 1px 8px var(--yc-color-sfx-shadow);\n  padding: 8px;\n  pointer-events: all;\n}\n\n/*# sourceMappingURL=index.css.map */"]}

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

@@ -48,15 +48,10 @@ export var QueryResultsView = /*#__PURE__*/React.memo(function QueryResultsView(
     }), (result === null || result === void 0 ? void 0 : result.resultReady) && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(QueryReadyResultView, {
         result: result
-      }), result.settings.viewMode === QueryResultsViewMode.Table && /*#__PURE__*/_jsxs("div", {
-        className: b('floating-bottom-left'),
-        children: [/*#__PURE__*/_jsx("div", {
-          className: b('padding_span')
-        }), /*#__PURE__*/_jsx(ResultPaginator, {
-          className: b('pagination'),
-          queryId: query.id,
-          resultIndex: index
-        })]
+      }), result.settings.viewMode === QueryResultsViewMode.Table && /*#__PURE__*/_jsx(ResultPaginator, {
+        className: b('pagination'),
+        queryId: query.id,
+        resultIndex: index
       })]
     }), (result === null || result === void 0 ? void 0 : result.state) === QueryResultState.Error && /*#__PURE__*/_jsx(Error, {
       error: result.error

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

@@ -1 +1 @@
-{"version":3,"names":["Loader","React","useSelector","block","getQueryResult","Error","ResultsTable","QueryResultState","QueryResultsViewMode","YQLSchemeTable","ResultPaginator","NotRenderUntilFirstVisible","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","b","QueryReadyResultView","_ref","_result$settings","result","mode","settings","viewMode","children","hide","Scheme","Table","QueryResultsView","memo","_ref2","query","index","state","id","className","Init","Loading","size","resultReady","queryId","resultIndex","error","prev","next"],"sources":["index.tsx"],"sourcesContent":["import {Loader} from '@gravity-ui/uikit';\nimport React from 'react';\nimport {useSelector} from 'react-redux';\nimport block from 'bem-cn-lite';\nimport {RootState} from '../../../store/reducers';\nimport {getQueryResult} from '../module/query_result/selectors';\nimport Error from '../../../components/Error/Error';\nimport {ResultsTable} from './ResultsTable';\nimport {QueryItem} from '../module/api';\nimport {\n    QueryResultReadyState,\n    QueryResultState,\n    QueryResultsViewMode,\n} from '../module/query_result/types';\nimport {YQLSchemeTable} from './YQLSchemeTable';\nimport {ResultPaginator} from './ResultPaginator';\nimport NotRenderUntilFirstVisible from '../NotRenderUntilFirstVisible/NotRenderUntilFirstVisible';\n\nimport './index.scss';\n\nconst b = block('query-result-table');\n\nfunction QueryReadyResultView({result}: {result: QueryResultReadyState}) {\n    const mode = result?.settings?.viewMode;\n    return (\n        <>\n            <NotRenderUntilFirstVisible hide={mode !== QueryResultsViewMode.Scheme}>\n                <YQLSchemeTable result={result} />\n            </NotRenderUntilFirstVisible>\n            <NotRenderUntilFirstVisible hide={mode !== QueryResultsViewMode.Table}>\n                <ResultsTable result={result} />\n            </NotRenderUntilFirstVisible>\n        </>\n    );\n}\n\nexport const QueryResultsView = React.memo(\n    function QueryResultsView({query, index}: {query: QueryItem; index: number}) {\n        const result = useSelector((state: RootState) => getQueryResult(state, query.id, index));\n\n        return (\n            <div className={b()}>\n                {(result?.state === QueryResultState.Init ||\n                    result?.state === QueryResultState.Loading) && (\n                    <div className={b('loading')}>\n                        <Loader size=\"m\" />\n                    </div>\n                )}\n                {result?.resultReady && (\n                    <>\n                        <QueryReadyResultView result={result} />\n                        {result.settings.viewMode === QueryResultsViewMode.Table && (\n                            <div className={b('floating-bottom-left')}>\n                                <div className={b('padding_span')} />\n                                <ResultPaginator\n                                    className={b('pagination')}\n                                    queryId={query.id}\n                                    resultIndex={index}\n                                />\n                            </div>\n                        )}\n                    </>\n                )}\n                {result?.state === QueryResultState.Error && <Error error={result.error} />}\n            </div>\n        );\n    },\n    (prev, next) => prev.query.id === next.query.id && prev.index === next.index,\n);\n"],"mappings":"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"}
+{"version":3,"names":["Loader","React","useSelector","block","getQueryResult","Error","ResultsTable","QueryResultState","QueryResultsViewMode","YQLSchemeTable","ResultPaginator","NotRenderUntilFirstVisible","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","b","QueryReadyResultView","_ref","_result$settings","result","mode","settings","viewMode","children","hide","Scheme","Table","QueryResultsView","memo","_ref2","query","index","state","id","className","Init","Loading","size","resultReady","queryId","resultIndex","error","prev","next"],"sources":["index.tsx"],"sourcesContent":["import {Loader} from '@gravity-ui/uikit';\nimport React from 'react';\nimport {useSelector} from 'react-redux';\nimport block from 'bem-cn-lite';\nimport {RootState} from '../../../store/reducers';\nimport {getQueryResult} from '../module/query_result/selectors';\nimport Error from '../../../components/Error/Error';\nimport {ResultsTable} from './ResultsTable';\nimport {QueryItem} from '../module/api';\nimport {\n    QueryResultReadyState,\n    QueryResultState,\n    QueryResultsViewMode,\n} from '../module/query_result/types';\nimport {YQLSchemeTable} from './YQLSchemeTable';\nimport {ResultPaginator} from './ResultPaginator';\nimport NotRenderUntilFirstVisible from '../NotRenderUntilFirstVisible/NotRenderUntilFirstVisible';\n\nimport './index.scss';\n\nconst b = block('query-result-table');\n\nfunction QueryReadyResultView({result}: {result: QueryResultReadyState}) {\n    const mode = result?.settings?.viewMode;\n    return (\n        <>\n            <NotRenderUntilFirstVisible hide={mode !== QueryResultsViewMode.Scheme}>\n                <YQLSchemeTable result={result} />\n            </NotRenderUntilFirstVisible>\n            <NotRenderUntilFirstVisible hide={mode !== QueryResultsViewMode.Table}>\n                <ResultsTable result={result} />\n            </NotRenderUntilFirstVisible>\n        </>\n    );\n}\n\nexport const QueryResultsView = React.memo(\n    function QueryResultsView({query, index}: {query: QueryItem; index: number}) {\n        const result = useSelector((state: RootState) => getQueryResult(state, query.id, index));\n\n        return (\n            <div className={b()}>\n                {(result?.state === QueryResultState.Init ||\n                    result?.state === QueryResultState.Loading) && (\n                    <div className={b('loading')}>\n                        <Loader size=\"m\" />\n                    </div>\n                )}\n                {result?.resultReady && (\n                    <>\n                        <QueryReadyResultView result={result} />\n                        {result.settings.viewMode === QueryResultsViewMode.Table && (\n                            <ResultPaginator\n                                className={b('pagination')}\n                                queryId={query.id}\n                                resultIndex={index}\n                            />\n                        )}\n                    </>\n                )}\n                {result?.state === QueryResultState.Error && <Error error={result.error} />}\n            </div>\n        );\n    },\n    (prev, next) => prev.query.id === next.query.id && prev.index === next.index,\n);\n"],"mappings":"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"}

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

@@ -13,19 +13,11 @@
         z-index: 1;
     }
 
-    &__floating-bottom-left {
-        position: sticky;
+    &__pagination {
+        position: fixed;
+        right: 20px;
         bottom: 20px;
-        pointer-events: none;
-        display: flex;
-        z-index: 2;
-    }
 
-    &__padding_span {
-        flex: 1;
-    }
-
-    &__pagination {
         margin-right: 20px;
         background-color: var(--yc-color-base-float);
         border-radius: 8px;

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

@@ -5,6 +5,10 @@
 .query-status__icon-container {
   margin-right: 4px;
 }
+.query-status__icon-container_draft {
+  color: var(--yc-color-text-secondary);
+  color: var(--color-status-icon-draft, var(--yc-color-text-secondary));
+}
 .query-status__icon-container_completed {
   color: var(--yc-color-text-positive);
   color: var(--color-status-icon-completed, var(--yc-color-text-positive));

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

@@ -1 +1 @@
-{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;EACA,mBAAA;ACCJ;ADCI;EACI,iBAAA;ACCR;ADCQ;EACI,oCAAA;EAAA,wEAAA;ACCZ;ADEQ;EACI,sCAAA;EAAA,sEAAA;ACAZ;ADGQ;EACI,WAAA;EACA,YAAA;ACDZ;ADIQ;EACI,qCAAA;EAAA,wEAAA;ACFZ","file":"index.css","sourcesContent":[".query-status {\n    display: inline-flex;\n    align-items: center;\n\n    &__icon-container {\n        margin-right: 4px;\n\n        &_completed {\n            color: var(--color-status-icon-completed, var(--yc-color-text-positive));\n        }\n\n        &_failed {\n            color: var(--color-status-icon-error, var(--yc-color-text-yandex-red));\n        }\n\n        &.loading {\n            width: 16px;\n            height: 16px;\n        }\n\n        &_aborted {\n            color: var(--color-status-icon-aborting, var(--yc-color-text-secondary));\n        }\n    }\n}\n",".query-status {\n  display: inline-flex;\n  align-items: center;\n}\n.query-status__icon-container {\n  margin-right: 4px;\n}\n.query-status__icon-container_completed {\n  color: var(--color-status-icon-completed, var(--yc-color-text-positive));\n}\n.query-status__icon-container_failed {\n  color: var(--color-status-icon-error, var(--yc-color-text-yandex-red));\n}\n.query-status__icon-container.loading {\n  width: 16px;\n  height: 16px;\n}\n.query-status__icon-container_aborted {\n  color: var(--color-status-icon-aborting, var(--yc-color-text-secondary));\n}\n\n/*# sourceMappingURL=index.css.map */"]}
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;EACA,mBAAA;ACCJ;ADCI;EACI,iBAAA;ACCR;ADCQ;EACI,qCAAA;EAAA,qEAAA;ACCZ;ADEQ;EACI,oCAAA;EAAA,wEAAA;ACAZ;ADGQ;EACI,sCAAA;EAAA,sEAAA;ACDZ;ADIQ;EACI,WAAA;EACA,YAAA;ACFZ;ADKQ;EACI,qCAAA;EAAA,wEAAA;ACHZ","file":"index.css","sourcesContent":[".query-status {\n    display: inline-flex;\n    align-items: center;\n\n    &__icon-container {\n        margin-right: 4px;\n\n        &_draft {\n            color: var(--color-status-icon-draft, var(--yc-color-text-secondary));\n        }\n\n        &_completed {\n            color: var(--color-status-icon-completed, var(--yc-color-text-positive));\n        }\n\n        &_failed {\n            color: var(--color-status-icon-error, var(--yc-color-text-yandex-red));\n        }\n\n        &.loading {\n            width: 16px;\n            height: 16px;\n        }\n\n        &_aborted {\n            color: var(--color-status-icon-aborting, var(--yc-color-text-secondary));\n        }\n    }\n}\n",".query-status {\n  display: inline-flex;\n  align-items: center;\n}\n.query-status__icon-container {\n  margin-right: 4px;\n}\n.query-status__icon-container_draft {\n  color: var(--color-status-icon-draft, var(--yc-color-text-secondary));\n}\n.query-status__icon-container_completed {\n  color: var(--color-status-icon-completed, var(--yc-color-text-positive));\n}\n.query-status__icon-container_failed {\n  color: var(--color-status-icon-error, var(--yc-color-text-yandex-red));\n}\n.query-status__icon-container.loading {\n  width: 16px;\n  height: 16px;\n}\n.query-status__icon-container_aborted {\n  color: var(--color-status-icon-aborting, var(--yc-color-text-secondary));\n}\n\n/*# sourceMappingURL=index.css.map */"]}

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

@@ -7,13 +7,14 @@ import hammer from '../../../common/hammer';
 import doneIcon from '../../../../../img/svg/icons/check-circle.svg';
 import errorIcon from '../../../../../img/svg/icons/exclamation-circle.svg';
 import abortedIcon from '../../../../../img/svg/icons/stop-circle.svg';
+import draftIcon from '../../../../../img/svg/icons/file.svg';
 import { ProgressStatuses, QueryStatus } from '../module/api';
 import './index.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var b = block('query-status');
-var STATUS_ICONS = (_STATUS_ICONS = {}, _defineProperty(_STATUS_ICONS, QueryStatus.FAILED, errorIcon), _defineProperty(_STATUS_ICONS, QueryStatus.ABORTED, abortedIcon), _defineProperty(_STATUS_ICONS, QueryStatus.COMPLETED, doneIcon), _STATUS_ICONS);
+var STATUS_ICONS = (_STATUS_ICONS = {}, _defineProperty(_STATUS_ICONS, QueryStatus.DRAFT, draftIcon), _defineProperty(_STATUS_ICONS, QueryStatus.FAILED, errorIcon), _defineProperty(_STATUS_ICONS, QueryStatus.ABORTED, abortedIcon), _defineProperty(_STATUS_ICONS, QueryStatus.COMPLETED, doneIcon), _STATUS_ICONS);
 export function QueryStatusIcon(_ref) {
   var status = _ref.status,
     className = _ref.className;

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

@@ -1 +1 @@
-{"version":3,"names":["Icon","Spin","React","block","hammer","doneIcon","errorIcon","abortedIcon","ProgressStatuses","QueryStatus","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","b","STATUS_ICONS","_STATUS_ICONS","_defineProperty","FAILED","ABORTED","COMPLETED","QueryStatusIcon","_ref","status","className","includes","size","loading","toLocaleLowerCase","data","children","QueryStatusView","_ref2","mode","format","Readable"],"sources":["index.tsx"],"sourcesContent":["import {Icon, Spin} from '@gravity-ui/uikit';\nimport React from 'react';\nimport block from 'bem-cn-lite';\nimport hammer from '../../../common/hammer';\nimport doneIcon from '../../../../../img/svg/icons/check-circle.svg';\nimport errorIcon from '../../../../../img/svg/icons/exclamation-circle.svg';\nimport abortedIcon from '../../../../../img/svg/icons/stop-circle.svg';\nimport {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';\nimport {ProgressStatuses, QueryStatus} from '../module/api';\nimport './index.scss';\n\nconst b = block('query-status');\n\ntype Props = {\n    status: QueryStatus;\n    mode: 'icon' | 'text' | 'both';\n    className?: string;\n};\n\nconst STATUS_ICONS: Partial<Record<QueryStatus, SVGIconData>> = {\n    [QueryStatus.FAILED]: errorIcon,\n    [QueryStatus.ABORTED]: abortedIcon,\n    [QueryStatus.COMPLETED]: doneIcon,\n};\n\nexport function QueryStatusIcon({status, className}: {status: QueryStatus; className?: string}) {\n    if (ProgressStatuses.includes(status)) {\n        return <Spin size=\"xs\" className={b('icon-container', {loading: true}, className)} />;\n    }\n    if (STATUS_ICONS[status]) {\n        return (\n            <Icon\n                className={b(\n                    'icon-container',\n                    {\n                        [status.toLocaleLowerCase()]: true,\n                    },\n                    className,\n                )}\n                data={STATUS_ICONS[status]!}\n                size={16}\n            />\n        );\n    }\n    return <>{status}</>;\n}\n\nexport const QueryStatusView = ({mode, status, className}: Props) => {\n    return (\n        <div className={b(null, className)}>\n            {(mode === 'icon' || mode === 'both') && <QueryStatusIcon status={status} />}\n            {(mode === 'text' || mode === 'both') && hammer.format.Readable(status)}\n        </div>\n    );\n};\n"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,IAAI,QAAO,mBAAmB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,MAAM,MAAM,wBAAwB;AAC3C,OAAOC,QAAQ,MAAM,+CAA+C;AACpE,OAAOC,SAAS,MAAM,qDAAqD;AAC3E,OAAOC,WAAW,MAAM,8CAA8C;AAEtE,SAAQC,gBAAgB,EAAEC,WAAW,QAAO,eAAe;AAC3D,OAAO,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEtB,IAAMC,CAAC,GAAGb,KAAK,CAAC,cAAc,CAAC;AAQ/B,IAAMc,YAAuD,IAAAC,aAAA,OAAAC,eAAA,CAAAD,aAAA,EACxDT,WAAW,CAACW,MAAM,EAAGd,SAAS,GAAAa,eAAA,CAAAD,aAAA,EAC9BT,WAAW,CAACY,OAAO,EAAGd,WAAW,GAAAY,eAAA,CAAAD,aAAA,EACjCT,WAAW,CAACa,SAAS,EAAGjB,QAAQ,GAAAa,aAAA,CACpC;AAED,OAAO,SAASK,eAAeA,CAAAC,IAAA,EAAiE;EAAA,IAA/DC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;EAC9C,IAAIlB,gBAAgB,CAACmB,QAAQ,CAACF,MAAM,CAAC,EAAE;IACnC,oBAAOd,IAAA,CAACV,IAAI;MAAC2B,IAAI,EAAC,IAAI;MAACF,SAAS,EAAEV,CAAC,CAAC,gBAAgB,EAAE;QAACa,OAAO,EAAE;MAAI,CAAC,EAAEH,SAAS;IAAE,EAAG;EACzF;EACA,IAAIT,YAAY,CAACQ,MAAM,CAAC,EAAE;IACtB,oBACId,IAAA,CAACX,IAAI;MACD0B,SAAS,EAAEV,CAAC,CACR,gBAAgB,EAAAG,eAAA,KAEXM,MAAM,CAACK,iBAAiB,EAAE,EAAG,IAAI,GAEtCJ,SAAS,CACX;MACFK,IAAI,EAAEd,YAAY,CAACQ,MAAM,CAAG;MAC5BG,IAAI,EAAE;IAAG,EACX;EAEV;EACA,oBAAOjB,IAAA,CAAAE,SAAA;IAAAmB,QAAA,EAAGP;EAAM,EAAI;AACxB;AAEA,OAAO,IAAMQ,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,KAAA,EAAyC;EAAA,IAApCC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IAAEV,MAAM,GAAAS,KAAA,CAANT,MAAM;IAAEC,SAAS,GAAAQ,KAAA,CAATR,SAAS;EACpD,oBACIX,KAAA;IAAKW,SAAS,EAAEV,CAAC,CAAC,IAAI,EAAEU,SAAS,CAAE;IAAAM,QAAA,GAC9B,CAACG,IAAI,KAAK,MAAM,IAAIA,IAAI,KAAK,MAAM,kBAAKxB,IAAA,CAACY,eAAe;MAACE,MAAM,EAAEA;IAAO,EAAG,EAC3E,CAACU,IAAI,KAAK,MAAM,IAAIA,IAAI,KAAK,MAAM,KAAK/B,MAAM,CAACgC,MAAM,CAACC,QAAQ,CAACZ,MAAM,CAAC;EAAA,EACrE;AAEd,CAAC"}
+{"version":3,"names":["Icon","Spin","React","block","hammer","doneIcon","errorIcon","abortedIcon","draftIcon","ProgressStatuses","QueryStatus","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","b","STATUS_ICONS","_STATUS_ICONS","_defineProperty","DRAFT","FAILED","ABORTED","COMPLETED","QueryStatusIcon","_ref","status","className","includes","size","loading","toLocaleLowerCase","data","children","QueryStatusView","_ref2","mode","format","Readable"],"sources":["index.tsx"],"sourcesContent":["import {Icon, Spin} from '@gravity-ui/uikit';\nimport React from 'react';\nimport block from 'bem-cn-lite';\nimport hammer from '../../../common/hammer';\nimport doneIcon from '../../../../../img/svg/icons/check-circle.svg';\nimport errorIcon from '../../../../../img/svg/icons/exclamation-circle.svg';\nimport abortedIcon from '../../../../../img/svg/icons/stop-circle.svg';\nimport draftIcon from '../../../../../img/svg/icons/file.svg';\nimport {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';\nimport {ProgressStatuses, QueryStatus} from '../module/api';\nimport './index.scss';\n\nconst b = block('query-status');\n\ntype Props = {\n    status: QueryStatus;\n    mode: 'icon' | 'text' | 'both';\n    className?: string;\n};\n\nconst STATUS_ICONS: Partial<Record<QueryStatus, SVGIconData>> = {\n    [QueryStatus.DRAFT]: draftIcon,\n    [QueryStatus.FAILED]: errorIcon,\n    [QueryStatus.ABORTED]: abortedIcon,\n    [QueryStatus.COMPLETED]: doneIcon,\n};\n\nexport function QueryStatusIcon({status, className}: {status: QueryStatus; className?: string}) {\n    if (ProgressStatuses.includes(status)) {\n        return <Spin size=\"xs\" className={b('icon-container', {loading: true}, className)} />;\n    }\n    if (STATUS_ICONS[status]) {\n        return (\n            <Icon\n                className={b(\n                    'icon-container',\n                    {\n                        [status.toLocaleLowerCase()]: true,\n                    },\n                    className,\n                )}\n                data={STATUS_ICONS[status]!}\n                size={16}\n            />\n        );\n    }\n    return <>{status}</>;\n}\n\nexport const QueryStatusView = ({mode, status, className}: Props) => {\n    return (\n        <div className={b(null, className)}>\n            {(mode === 'icon' || mode === 'both') && <QueryStatusIcon status={status} />}\n            {(mode === 'text' || mode === 'both') && hammer.format.Readable(status)}\n        </div>\n    );\n};\n"],"mappings":";;AAAA,SAAQA,IAAI,EAAEC,IAAI,QAAO,mBAAmB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,MAAM,MAAM,wBAAwB;AAC3C,OAAOC,QAAQ,MAAM,+CAA+C;AACpE,OAAOC,SAAS,MAAM,qDAAqD;AAC3E,OAAOC,WAAW,MAAM,8CAA8C;AACtE,OAAOC,SAAS,MAAM,uCAAuC;AAE7D,SAAQC,gBAAgB,EAAEC,WAAW,QAAO,eAAe;AAC3D,OAAO,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEtB,IAAMC,CAAC,GAAGd,KAAK,CAAC,cAAc,CAAC;AAQ/B,IAAMe,YAAuD,IAAAC,aAAA,OAAAC,eAAA,CAAAD,aAAA,EACxDT,WAAW,CAACW,KAAK,EAAGb,SAAS,GAAAY,eAAA,CAAAD,aAAA,EAC7BT,WAAW,CAACY,MAAM,EAAGhB,SAAS,GAAAc,eAAA,CAAAD,aAAA,EAC9BT,WAAW,CAACa,OAAO,EAAGhB,WAAW,GAAAa,eAAA,CAAAD,aAAA,EACjCT,WAAW,CAACc,SAAS,EAAGnB,QAAQ,GAAAc,aAAA,CACpC;AAED,OAAO,SAASM,eAAeA,CAAAC,IAAA,EAAiE;EAAA,IAA/DC,MAAM,GAAAD,IAAA,CAANC,MAAM;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;EAC9C,IAAInB,gBAAgB,CAACoB,QAAQ,CAACF,MAAM,CAAC,EAAE;IACnC,oBAAOf,IAAA,CAACX,IAAI;MAAC6B,IAAI,EAAC,IAAI;MAACF,SAAS,EAAEX,CAAC,CAAC,gBAAgB,EAAE;QAACc,OAAO,EAAE;MAAI,CAAC,EAAEH,SAAS;IAAE,EAAG;EACzF;EACA,IAAIV,YAAY,CAACS,MAAM,CAAC,EAAE;IACtB,oBACIf,IAAA,CAACZ,IAAI;MACD4B,SAAS,EAAEX,CAAC,CACR,gBAAgB,EAAAG,eAAA,KAEXO,MAAM,CAACK,iBAAiB,EAAE,EAAG,IAAI,GAEtCJ,SAAS,CACX;MACFK,IAAI,EAAEf,YAAY,CAACS,MAAM,CAAG;MAC5BG,IAAI,EAAE;IAAG,EACX;EAEV;EACA,oBAAOlB,IAAA,CAAAE,SAAA;IAAAoB,QAAA,EAAGP;EAAM,EAAI;AACxB;AAEA,OAAO,IAAMQ,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,KAAA,EAAyC;EAAA,IAApCC,IAAI,GAAAD,KAAA,CAAJC,IAAI;IAAEV,MAAM,GAAAS,KAAA,CAANT,MAAM;IAAEC,SAAS,GAAAQ,KAAA,CAATR,SAAS;EACpD,oBACIZ,KAAA;IAAKY,SAAS,EAAEX,CAAC,CAAC,IAAI,EAAEW,SAAS,CAAE;IAAAM,QAAA,GAC9B,CAACG,IAAI,KAAK,MAAM,IAAIA,IAAI,KAAK,MAAM,kBAAKzB,IAAA,CAACa,eAAe;MAACE,MAAM,EAAEA;IAAO,EAAG,EAC3E,CAACU,IAAI,KAAK,MAAM,IAAIA,IAAI,KAAK,MAAM,KAAKjC,MAAM,CAACkC,MAAM,CAACC,QAAQ,CAACZ,MAAM,CAAC;EAAA,EACrE;AAEd,CAAC"}

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

@@ -5,6 +5,10 @@
     &__icon-container {
         margin-right: 4px;
 
+        &_draft {
+            color: var(--color-status-icon-draft, var(--yc-color-text-secondary));
+        }
+
         &_completed {
             color: var(--color-status-icon-completed, var(--yc-color-text-positive));
         }

package/build/esm/ui/pages/query-tracker/QueryTracker/QueryTracker.js

@@ -1,11 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Switch, Route } from 'react-router';
 import FlexSplitPane from '../../../components/FlexSplitPane/FlexSplitPane';
 import { QueriesPooling } from '../hooks/QueriesPooling/context';
 import { isEngine, QueryEngine } from '../module/api';
-import { createEmptyQuery, loadQuery } from '../module/query/actions';
+import { createEmptyQuery, createQueryFromTablePath, goToQuery, loadQuery } from '../module/query/actions';
 import { getQueryGetParams } from '../module/query/selectors';
 import { QueriesList } from '../QueriesList';
 import { QueryEditor } from '../QueryEditor/QueryEditor';
@@ -20,7 +20,12 @@ function DefaultQueriesPage() {
   var dispatch = useDispatch();
   var routeParams = useSelector(getQueryGetParams);
   useEffect(function () {
-    dispatch(createEmptyQuery(routeParams.engine && isEngine(routeParams.engine) ? routeParams.engine : QueryEngine.YQL, routeParams.query));
+    var engine = routeParams.engine && isEngine(routeParams.engine) ? routeParams.engine : QueryEngine.YQL;
+    if (routeParams.cluster && routeParams.path) {
+      dispatch(createQueryFromTablePath(engine, routeParams.cluster, routeParams.path));
+    } else {
+      dispatch(createEmptyQuery(engine));
+    }
   }, [dispatch, routeParams]);
   return null;
 }
@@ -46,6 +51,11 @@ export var QueryTracker = function QueryTracker(_ref) {
       return sizes;
     };
   }, [sizes]);
+  var dispatch = useDispatch();
+  var goToCreatedQuery = useCallback(function (queryId) {
+    dispatch(goToQuery(queryId));
+    return true;
+  }, [dispatch]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Switch, {
       children: [/*#__PURE__*/_jsx(Route, {
@@ -63,7 +73,9 @@ export var QueryTracker = function QueryTracker(_ref) {
         onResizeEnd: setSize,
         minSize: minSize,
         getInitialSizes: getSize,
-        children: [/*#__PURE__*/_jsx(QueriesList, {}), /*#__PURE__*/_jsx(QueryEditor, {})]
+        children: [/*#__PURE__*/_jsx(QueriesList, {}), /*#__PURE__*/_jsx(QueryEditor, {
+          onStartQuery: goToCreatedQuery
+        })]
       })
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","useState","useDispatch","useSelector","Switch","Route","FlexSplitPane","QueriesPooling","isEngine","QueryEngine","createEmptyQuery","loadQuery","getQueryGetParams","QueriesList","QueryEditor","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","initialSizes","minSize","DefaultQueriesPage","dispatch","routeParams","engine","YQL","query","QueryPage","props","match","params","queryId","QueryTracker","_ref","_useState","_useState2","_slicedToArray","sizes","setSize","getSize","children","exact","path","component","concat","className","direction","HORIZONTAL","onResizeEnd","getInitialSizes"],"sources":["QueryTracker.tsx"],"sourcesContent":["import React, {useEffect, useMemo, useState} from 'react';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {Switch, Route} from 'react-router';\nimport FlexSplitPane from '../../../components/FlexSplitPane/FlexSplitPane';\nimport {QueriesPooling} from '../hooks/QueriesPooling/context';\nimport {isEngine, QueryEngine} from '../module/api';\nimport {createEmptyQuery, loadQuery} from '../module/query/actions';\nimport {getQueryGetParams} from '../module/query/selectors';\nimport {QueriesList} from '../QueriesList';\nimport {QueryEditor} from '../QueryEditor/QueryEditor';\nimport './QueryTracker.scss';\n\ntype Props = {\n    match: {\n        path: string;\n        params: {\n            queryId?: string;\n        };\n    };\n    location: {\n        search: string;\n    };\n};\n\nconst initialSizes = [23, 77];\nconst minSize = 380; // see history list's cells size\n\nfunction DefaultQueriesPage() {\n    const dispatch = useDispatch();\n    const routeParams = useSelector(getQueryGetParams);\n\n    useEffect(() => {\n        dispatch(\n            createEmptyQuery(\n                routeParams.engine && isEngine(routeParams.engine)\n                    ? (routeParams.engine as QueryEngine)\n                    : QueryEngine.YQL,\n                routeParams.query,\n            ),\n        );\n    }, [dispatch, routeParams]);\n    return null;\n}\n\nfunction QueryPage(props: Props) {\n    const dispatch = useDispatch();\n\n    useEffect(() => {\n        if (props.match.params.queryId) {\n            dispatch(loadQuery(props.match.params.queryId));\n        } else {\n            dispatch(createEmptyQuery());\n        }\n    }, [dispatch, props.match.params.queryId]);\n    return null;\n}\n\nexport const QueryTracker = ({match}: Props) => {\n    const [sizes, setSize] = useState(initialSizes);\n    const getSize = useMemo(() => {\n        return () => sizes;\n    }, [sizes]);\n    return (\n        <>\n            <Switch>\n                <Route exact path={match.path} component={DefaultQueriesPage} />\n                <Route path={`${match.path}/:queryId`} component={QueryPage} />\n            </Switch>\n            <QueriesPooling>\n                <FlexSplitPane\n                    className=\"query-tracker-page-container\"\n                    direction={FlexSplitPane.HORIZONTAL}\n                    onResizeEnd={setSize}\n                    minSize={minSize}\n                    getInitialSizes={getSize}\n                >\n                    <QueriesList />\n\n                    <QueryEditor></QueryEditor>\n                </FlexSplitPane>\n            </QueriesPooling>\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","useDispatch","useSelector","Switch","Route","FlexSplitPane","QueriesPooling","isEngine","QueryEngine","createEmptyQuery","createQueryFromTablePath","goToQuery","loadQuery","getQueryGetParams","QueriesList","QueryEditor","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","initialSizes","minSize","DefaultQueriesPage","dispatch","routeParams","engine","YQL","cluster","path","QueryPage","props","match","params","queryId","QueryTracker","_ref","_useState","_useState2","_slicedToArray","sizes","setSize","getSize","goToCreatedQuery","children","exact","component","concat","className","direction","HORIZONTAL","onResizeEnd","getInitialSizes","onStartQuery"],"sources":["QueryTracker.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {Switch, Route} from 'react-router';\nimport FlexSplitPane from '../../../components/FlexSplitPane/FlexSplitPane';\nimport {QueriesPooling} from '../hooks/QueriesPooling/context';\nimport {isEngine, QueryEngine} from '../module/api';\nimport {\n    createEmptyQuery,\n    createQueryFromTablePath,\n    goToQuery,\n    loadQuery,\n} from '../module/query/actions';\nimport {getQueryGetParams} from '../module/query/selectors';\nimport {QueriesList} from '../QueriesList';\nimport {QueryEditor} from '../QueryEditor/QueryEditor';\nimport './QueryTracker.scss';\n\ntype Props = {\n    match: {\n        path: string;\n        params: {\n            queryId?: string;\n        };\n    };\n    location: {\n        search: string;\n    };\n};\n\nconst initialSizes = [23, 77];\nconst minSize = 380; // see history list's cells size\n\nfunction DefaultQueriesPage() {\n    const dispatch = useDispatch();\n    const routeParams = useSelector(getQueryGetParams);\n\n    useEffect(() => {\n        const engine =\n            routeParams.engine && isEngine(routeParams.engine)\n                ? (routeParams.engine as QueryEngine)\n                : QueryEngine.YQL;\n        if (routeParams.cluster && routeParams.path) {\n            dispatch(createQueryFromTablePath(engine, routeParams.cluster, routeParams.path));\n        } else {\n            dispatch(createEmptyQuery(engine));\n        }\n    }, [dispatch, routeParams]);\n    return null;\n}\n\nfunction QueryPage(props: Props) {\n    const dispatch = useDispatch();\n\n    useEffect(() => {\n        if (props.match.params.queryId) {\n            dispatch(loadQuery(props.match.params.queryId));\n        } else {\n            dispatch(createEmptyQuery());\n        }\n    }, [dispatch, props.match.params.queryId]);\n    return null;\n}\n\nexport const QueryTracker = ({match}: Props) => {\n    const [sizes, setSize] = useState(initialSizes);\n    const getSize = useMemo(() => {\n        return () => sizes;\n    }, [sizes]);\n    const dispatch = useDispatch();\n\n    const goToCreatedQuery = useCallback(\n        (queryId: string) => {\n            dispatch(goToQuery(queryId));\n            return true;\n        },\n        [dispatch],\n    );\n    return (\n        <>\n            <Switch>\n                <Route exact path={match.path} component={DefaultQueriesPage} />\n                <Route path={`${match.path}/:queryId`} component={QueryPage} />\n            </Switch>\n            <QueriesPooling>\n                <FlexSplitPane\n                    className=\"query-tracker-page-container\"\n                    direction={FlexSplitPane.HORIZONTAL}\n                    onResizeEnd={setSize}\n                    minSize={minSize}\n                    getInitialSizes={getSize}\n                >\n                    <QueriesList />\n\n                    <QueryEditor onStartQuery={goToCreatedQuery}></QueryEditor>\n                </FlexSplitPane>\n            </QueriesPooling>\n        </>\n    );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+.query-new-button {
+  display: inline-flex;
+  align-items: center;
+}
+.query-new-button__default {
+  margin-right: 1px;
+}
+
+.query-language-selector-item__link {
+  color: var(--yc-color-text-primary) !important;
+}
+
+.query-language-selector-item__link {
+  text-decoration: none;
+}
+.query-language-selector-item__link:hover {
+  color: var(--yc-color-text-primary) !important;
+}
+/*# sourceMappingURL=index.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;EACA,mBAAA;ACCJ;ADCI;EACI,iBAAA;ACCR;;ADII;EAEI,8CAAA;ACDR;;ADDI;EACI,qBAAA;ACAR;ADGQ;EACI,8CAAA;ACDZ","file":"index.css","sourcesContent":[".query-new-button {\n    display: inline-flex;\n    align-items: center;\n\n    &__default {\n        margin-right: 1px;\n    }\n}\n\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",".query-new-button {\n  display: inline-flex;\n  align-items: center;\n}\n.query-new-button__default {\n  margin-right: 1px;\n}\n\n.query-language-selector-item__link {\n  text-decoration: none;\n  color: var(--yc-color-text-primary) !important;\n}\n.query-language-selector-item__link:hover {\n  color: var(--yc-color-text-primary) !important;\n}\n\n/*# sourceMappingURL=index.css.map */"]}

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

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import cn from 'bem-cn-lite';
+import { Button, Select } from '@gravity-ui/uikit';
+import { Engines, QueryEngine } from '../module/api';
+import { createNewQueryUrl } from '../utils/navigation';
+import Link from '../../../components/Link/Link';
+import Icon from '../../../components/Icon/Icon';
+import { QueryEnginesNames } from '../utils/query';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('query-new-button');
+var engineSelectorItem = cn('query-language-selector-item');
+export 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 ? Engines : _ref$engines,
+    renderDefaultTitle = _ref.renderDefaultTitle,
+    _ref$defaultEngine = _ref.defaultEngine,
+    defaultEngine = _ref$defaultEngine === void 0 ? QueryEngine.YQL : _ref$defaultEngine,
+    target = _ref.target;
+  var engineOptions = useMemo(function () {
+    return engines.filter(function (engine) {
+      return engine !== defaultEngine;
+    }).map(function (engine) {
+      return {
+        value: engine,
+        content: /*#__PURE__*/_jsx(Link, {
+          className: engineSelectorItem('link'),
+          routed: target !== '_blank',
+          url: createNewQueryUrl(cluster, engine, {
+            path: path
+          }),
+          children: QueryEnginesNames[engine]
+        })
+      };
+    });
+  }, [cluster, defaultEngine, engines, path]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: block(null, className),
+    children: [/*#__PURE__*/_jsx(Link, {
+      routed: target !== '_blank',
+      url: createNewQueryUrl(cluster, defaultEngine, {
+        path: path
+      }),
+      children: /*#__PURE__*/_jsx(Button, {
+        className: block('default'),
+        view: view,
+        pin: engineOptions !== null && engineOptions !== void 0 && engineOptions.length ? 'round-clear' : 'round-round',
+        children: renderDefaultTitle({
+          engine: defaultEngine,
+          engineTitle: QueryEnginesNames[defaultEngine]
+        })
+      })
+    }), Boolean(engineOptions === null || engineOptions === void 0 ? void 0 : engineOptions.length) && /*#__PURE__*/_jsx(Select, {
+      popupClassName: block('select'),
+      options: engineOptions,
+      value: undefined,
+      renderControl: function renderControl(_ref2) {
+        var onClick = _ref2.onClick,
+          onKeyDown = _ref2.onKeyDown,
+          ref = _ref2.ref;
+        return /*#__PURE__*/_jsx(Button, {
+          ref: ref,
+          onClick: onClick,
+          extraProps: {
+            onKeyDown: onKeyDown
+          },
+          view: view,
+          pin: "clear-round",
+          children: /*#__PURE__*/_jsx(Icon, {
+            awesome: "chevron-down"
+          })
+        });
+      }
+    })]
+  });
+};
+// #sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","cn","Button","Select","Engines","QueryEngine","createNewQueryUrl","Link","Icon","QueryEnginesNames","jsx","_jsx","jsxs","_jsxs","block","engineSelectorItem","QueryTrackerNewButton","_ref","className","view","cluster","path","_ref$engines","engines","renderDefaultTitle","_ref$defaultEngine","defaultEngine","YQL","target","engineOptions","filter","engine","map","value","content","routed","url","children","pin","length","engineTitle","Boolean","popupClassName","options","undefined","renderControl","_ref2","onClick","onKeyDown","ref","extraProps","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/esm/ui/pages/query-tracker/QueryTrackerNewButton/index.scss

@@ -0,0 +1,20 @@
+.query-new-button {
+    display: inline-flex;
+    align-items: center;
+
+    &__default {
+        margin-right: 1px;
+    }
+}
+
+.query-language-selector-item {
+    &__link {
+        text-decoration: none;
+        color: var(--yc-color-text-primary) !important;
+
+        &:hover {
+            color: var(--yc-color-text-primary) !important;
+        }
+    }
+}
+

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

@@ -0,0 +1,13 @@
+.query-tracker-meta-form {
+  display: flex;
+}
+.query-tracker-meta-form__control {
+  margin-right: 8px;
+}
+.query-tracker-meta-form__control_name {
+  display: inline-flex;
+  max-width: 30%;
+  min-width: 80px;
+  align-items: center;
+}
+/*# sourceMappingURL=index.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,aAAA;ACCJ;ADCI;EACI,iBAAA;ACCR;ADAQ;EACI,oBAAA;EACA,cAAA;EACA,eAAA;EACA,mBAAA;ACEZ","file":"index.css","sourcesContent":[".query-tracker-meta-form {\n    display: flex;\n\n    &__control {\n        margin-right: 8px;\n        &_name {\n            display: inline-flex;\n            max-width: 30%;\n            min-width: 80px;\n            align-items: center;\n        }\n    }\n}\n",".query-tracker-meta-form {\n  display: flex;\n}\n.query-tracker-meta-form__control {\n  margin-right: 8px;\n}\n.query-tracker-meta-form__control_name {\n  display: inline-flex;\n  max-width: 30%;\n  min-width: 80px;\n  align-items: center;\n}\n\n/*# sourceMappingURL=index.css.map */"]}

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

@@ -0,0 +1,82 @@
+import React, { useCallback } from 'react';
+import cn from 'bem-cn-lite';
+import { Select, Text } from '@gravity-ui/uikit';
+import { EditableAsText } from '../../../../components/EditableAsText/EditableAsText';
+import { useDispatch, useSelector } from 'react-redux';
+import { Engines } from '../../module/api';
+import { SET_QUERY_PATCH } from '../../module/query/actions';
+import { getQueryDraft, getQuery } from '../../module/query/selectors';
+import { QueryEnginesNames } from '../../utils/query';
+import { QuerySettingsButton } from '../../QuerySettingsButton';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var EngineOptions = Engines.map(function (key) {
+  return {
+    value: key,
+    content: QueryEnginesNames[key]
+  };
+});
+var block = cn('query-tracker-meta-form');
+export function QueryMetaForm(_ref) {
+  var _draft$annotations;
+  var className = _ref.className;
+  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 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("div", {
+    className: block(null, className),
+    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: EngineOptions,
+      value: [draft.engine],
+      onUpdate: onEngineChange
+    }), /*#__PURE__*/_jsx(QuerySettingsButton, {
+      className: block('control'),
+      settings: draft.settings,
+      onChange: onSettingsChange
+    })]
+  });
+}
+// #sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","cn","Select","Text","EditableAsText","useDispatch","useSelector","Engines","SET_QUERY_PATCH","getQueryDraft","getQuery","QueryEnginesNames","QuerySettingsButton","jsx","_jsx","jsxs","_jsxs","EngineOptions","map","key","value","content","block","QueryMetaForm","_ref","_draft$annotations","className","dispatch","draft","originalQuery","onEngineChange","engines","type","data","engine","onNameChange","name","annotations","title","onSettingsChange","settings","queryName","children","withControls","onChange","text","variant","color","ellipsis","id","options","onUpdate"],"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/esm/ui/pages/query-tracker/QueryTrackerTopRow/QueryMetaForm/index.scss

@@ -0,0 +1,13 @@
+.query-tracker-meta-form {
+    display: flex;
+
+    &__control {
+        margin-right: 8px;
+        &_name {
+            display: inline-flex;
+            max-width: 30%;
+            min-width: 80px;
+            align-items: center;
+        }
+    }
+}

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

@@ -1,23 +1,13 @@
+.query-tracker-top-row-content {
+  display: flex;
+  flex: 1;
+}
 .query-tracker-top-row-content__meta {
   flex: 1;
   display: flex;
   align-items: center;
 }
-.query-tracker-top-row-content__control {
-  margin-right: 8px;
-}
-.query-tracker-top-row-content__control_name {
-  display: inline-flex;
-  max-width: 30%;
-  align-items: center;
-}
-.query-tracker-top-row-content__select .query-language-selector-item__link {
-  color: var(--yc-color-text-primary) !important;
-}
-.query-tracker-top-row-content__select .query-language-selector-item__link {
-  text-decoration: none;
-}
-.query-tracker-top-row-content__select .query-language-selector-item__link:hover {
-  color: var(--yc-color-text-primary) !important;
+.query-tracker-top-row-content__meta .query-tracker-top-row-content__meta-form {
+  flex: 1;
 }
 /*# sourceMappingURL=index.css.map */