@gravity-ui/querieskit 1.0.3 → 1.1.0

package/build/cjs/widgets/QueriesNavigation/QueriesNavigation.stories.js

@@ -0,0 +1,655 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Loading = exports.Error = exports.EmptySearch = exports.Empty = exports.CustomRows = exports.CustomDetailResolver = exports.ClustersToItems = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.filter.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+var _react = _interopRequireWildcard(require("react"));
+var _QueriesNavigation = require("./QueriesNavigation");
+var _createNavigationDetailResolver = require("./helpers/createNavigationDetailResolver");
+var _createTableDetailConfig = require("./helpers/createTableDetailConfig");
+var _actions = require("storybook/actions");
+var _PathEditorStories = require("../../components/PathEditor/PathEditor.stories.helpers");
+var _uikit = require("@gravity-ui/uikit");
+var _components = require("../../components");
+var _mockData = require("../../modules/NavigationSchema/story/mockData");
+var _mockData2 = require("../../modules/NavigationPreview/story/mockData");
+var _mockData3 = require("../../modules/NavigationMeta/story/mockData");
+var _mockData4 = require("../../modules/NavigationView/story/mockData");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var FileArrowRightOutIcon = function FileArrowRightOutIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M11.5 7.14a3 3 0 0 0-.758-1.992L8.395 2.507A3 3 0 0 0 6.153 1.5H4a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h6.25a.75.75 0 0 0 0-1.5H4a1.5 1.5 0 0 1-1.5-1.5v-7A1.5 1.5 0 0 1 4 3h1.5v2a3 3 0 0 0 3 3h2.25a.75.75 0 0 0 .75-.75zM9.856 6.5H8.5A1.5 1.5 0 0 1 7 5V3.262q.15.103.274.241L9.62 6.144a1.5 1.5 0 0 1 .235.356M13.44 11l-.72.72a.75.75 0 1 0 1.061 1.06l2-2a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 1 0-1.06 1.06l.72.72H6.75a.75.75 0 0 0 0 1.5z",
+      clipRule: "evenodd"
+    })
+  }));
+};
+FileArrowRightOutIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
+var ArrowUpRightFromSquareIcon = function ArrowUpRightFromSquareIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M10 1.5A.75.75 0 0 0 10 3h1.94L6.97 7.97a.75.75 0 0 0 1.06 1.06L13 4.06V6a.75.75 0 0 0 1.5 0V2.25a.75.75 0 0 0-.75-.75zM7.5 3.25a.75.75 0 0 0-.75-.75H4.5a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V9.25a.75.75 0 0 0-1.5 0v2.25a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 3 11.5v-6A1.5 1.5 0 0 1 4.5 4h2.25a.75.75 0 0 0 .75-.75",
+      clipRule: "evenodd"
+    })
+  }));
+};
+ArrowUpRightFromSquareIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
+var CodeIcon = function CodeIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M10.218 3.216a.75.75 0 0 0-1.436-.431l-3 10a.75.75 0 0 0 1.436.43zM4.53 4.97a.75.75 0 0 1 0 1.06L2.56 8l1.97 1.97a.75.75 0 0 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1 0-1.06l2.5-2.5a.75.75 0 0 1 1.06 0m6.94 6.06a.75.75 0 0 1 0-1.06L13.44 8l-1.97-1.97a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 0 1-1.06 0",
+      clipRule: "evenodd"
+    })
+  }));
+};
+CodeIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
+var GearIcon = function GearIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.2.2 0 0 1 .271.073l.802 1.388a.2.2 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.2.2 0 0 1 .073.271l-.802 1.388a.2.2 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.2.2 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.2.2 0 0 1-.272-.073l-.8-1.388a.2.2 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.2.2 0 0 1-.073-.27l.801-1.389a.2.2 0 0 1 .272-.072C5.042 5.138 7 4.007 7 2.199c0-.11.089-.199.199-.199M5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.7 1.7 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.7 1.7 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.7 1.7 0 0 1-2.32-.622l-.802-1.388a1.7 1.7 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.7 1.7 0 0 1-.622-2.32l.801-1.389a1.7 1.7 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2m4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0",
+      clipRule: "evenodd"
+    })
+  }));
+};
+GearIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
+var meta = {
+  title: 'Widgets/QueriesNavigation',
+  component: _QueriesNavigation.QueriesNavigation,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded'
+  }
+};
+var onBreadcrumbsUpdate = (0, _actions.action)('onUpdate');
+var logAction = (0, _actions.action)('actionClick');
+var defaultActions = [{
+  id: 'paste',
+  title: 'Paste path',
+  content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+    data: FileArrowRightOutIcon,
+    size: 16
+  }),
+  onClick: function onClick(location) {
+    return logAction('Paste', location);
+  }
+}, {
+  id: 'open',
+  title: 'Open in new tab',
+  content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+    data: ArrowUpRightFromSquareIcon,
+    size: 16
+  }),
+  onClick: function onClick(location) {
+    return logAction('Open', location);
+  }
+}];
+var CLUSTERS = [{
+  id: 'arnold',
+  title: 'Arnold',
+  color: 'white',
+  backgroundColor: 'rgba(218, 68, 83, 1)',
+  description: 'Production'
+}, {
+  id: 'freud',
+  title: 'Freud',
+  color: 'white',
+  backgroundColor: 'rgba(127, 130, 133, 1)',
+  description: 'Production'
+}, {
+  id: 'hahn',
+  title: 'Hahn',
+  color: 'white',
+  backgroundColor: 'rgba(215, 112, 173, 1)',
+  description: 'Production'
+}, {
+  id: 'yp-sas-test',
+  title: 'YP-Sas-Test',
+  color: 'white',
+  backgroundColor: 'rgba(150, 122, 220, 1)',
+  description: 'Testing'
+}, {
+  id: 'zeno',
+  title: 'Zeno',
+  color: 'white',
+  backgroundColor: 'rgba(233, 87, 63, 1)',
+  description: 'Production'
+}, {
+  id: 'ada',
+  title: 'Ada',
+  color: 'white',
+  backgroundColor: 'rgba(67, 68, 69, 1)',
+  description: 'Production'
+}, {
+  id: 'arnold-gnd',
+  title: 'Arnold-GND',
+  color: 'white',
+  backgroundColor: 'rgba(140, 193, 82, 1)',
+  description: 'tesdting'
+}, {
+  id: 'deimos',
+  title: 'Deimos',
+  color: 'white',
+  backgroundColor: 'rgba(55, 188, 155, 1)',
+  description: 'Production'
+}, {
+  id: 'freud-gnd',
+  title: 'Freud-GND',
+  color: 'white',
+  backgroundColor: 'rgba(140, 193, 82, 1)',
+  description: 'Prestable'
+}];
+var ITEM_NAMES = [{
+  title: 'abcdapter',
+  kind: 'folder',
+  hasChildren: true
+}, {
+  title: 'access_control_object',
+  kind: 'file'
+}, {
+  title: 'account_tree',
+  kind: 'folder',
+  hasChildren: true,
+  disabled: true
+}, {
+  title: 'cell_balancers',
+  kind: 'folder',
+  hasChildren: true
+}, {
+  title: 'clusters',
+  kind: 'folder',
+  hasChildren: true
+}, {
+  title: 'doctors_table',
+  kind: 'table'
+}];
+var getPathDepth = function getPathDepth(path) {
+  return (path !== null && path !== void 0 ? path : '').split('/').filter(Boolean).length;
+};
+var getItemsForPath = function getItemsForPath(path) {
+  if (getPathDepth(path) > 1) {
+    return [];
+  }
+  return ITEM_NAMES.map(function (_ref) {
+    var title = _ref.title,
+      kind = _ref.kind,
+      hasChildren = _ref.hasChildren,
+      disabled = _ref.disabled;
+    return {
+      path: "".concat(path !== null && path !== void 0 ? path : '', "/").concat(title),
+      title: title,
+      kind: kind,
+      hasChildren: hasChildren,
+      disabled: disabled
+    };
+  });
+};
+var _default = exports.default = meta;
+var TABLE_VIEW_SECTIONS_WITH_ACTIONS = [{
+  id: 'general',
+  title: 'General',
+  columns: _mockData4.VIEW_COLUMNS,
+  rows: (0, _mockData4.makeViewRows)(2),
+  loaded: true,
+  defaultExpanded: true,
+  actions: [{
+    id: 'code',
+    title: 'Show code',
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+      data: CodeIcon,
+      size: 14
+    }),
+    onClick: function onClick(section) {
+      return logAction('ViewShowCode', section.id);
+    }
+  }, {
+    id: 'settings',
+    title: 'Settings',
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+      data: GearIcon,
+      size: 14
+    }),
+    onClick: function onClick(section) {
+      return logAction('ViewSettings', section.id);
+    }
+  }]
+}, {
+  id: 'attributes',
+  title: 'Attributes',
+  columns: _mockData4.VIEW_COLUMNS,
+  rows: (0, _mockData4.makeViewRows)(2),
+  loaded: true
+}];
+var useLocationState = function useLocationState(initial) {
+  var _useState = (0, _react.useState)(initial),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    location = _useState2[0],
+    setLocation = _useState2[1];
+  var onUpdate = function onUpdate(next) {
+    onBreadcrumbsUpdate(next);
+    setLocation(next);
+  };
+  return {
+    location: location,
+    onUpdate: onUpdate
+  };
+};
+var useNavigationStoryState = function useNavigationStoryState(initial) {
+  var _useLocationState = useLocationState(initial),
+    location = _useLocationState.location,
+    onUpdate = _useLocationState.onUpdate;
+  var _useState3 = (0, _react.useState)('asc'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    sort = _useState4[0],
+    setSort = _useState4[1];
+  var items = getItemsForPath(location.path);
+  return {
+    location: location,
+    onUpdate: onUpdate,
+    sort: sort,
+    setSort: setSort,
+    items: items
+  };
+};
+var ClustersToItemsStory = function ClustersToItemsStory() {
+  var _useNavigationStorySt = useNavigationStoryState({
+      cluster: undefined,
+      path: undefined
+    }),
+    location = _useNavigationStorySt.location,
+    onUpdate = _useNavigationStorySt.onUpdate,
+    sort = _useNavigationStorySt.sort,
+    setSort = _useNavigationStorySt.setSort,
+    items = _useNavigationStorySt.items;
+  var _useState5 = (0, _react.useState)(undefined),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    openedItem = _useState6[0],
+    setOpenedItem = _useState6[1];
+  var resolveDetail = (0, _createNavigationDetailResolver.createNavigationDetailResolver)({
+    table: (0, _createTableDetailConfig.createTableDetailConfig)({
+      resolveSchema: function resolveSchema() {
+        return {
+          columns: _mockData.SCHEMA_COLUMNS,
+          loaded: true
+        };
+      },
+      resolvePreview: function resolvePreview() {
+        return {
+          columns: _mockData2.PREVIEW_COLUMNS,
+          rows: _mockData2.PREVIEW_ROWS,
+          loaded: true
+        };
+      },
+      resolveMeta: function resolveMeta() {
+        return {
+          groups: _mockData3.META_GROUPS,
+          loaded: true
+        };
+      },
+      resolveView: function resolveView() {
+        return {
+          sections: TABLE_VIEW_SECTIONS_WITH_ACTIONS,
+          loaded: true
+        };
+      }
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 300,
+      height: 500
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueriesNavigation.QueriesNavigation, {
+      location: location,
+      header: {
+        actions: defaultActions,
+        onLoadSuggestions: _PathEditorStories.mockLoadPathSuggestions
+      },
+      onUpdate: onUpdate,
+      clusters: CLUSTERS,
+      items: items,
+      sort: {
+        value: sort,
+        onUpdate: setSort
+      },
+      detail: {
+        openedItem: openedItem,
+        onItemOpen: function onItemOpen(item) {
+          (0, _actions.action)('onItemOpen')(item);
+          setOpenedItem(item);
+        },
+        onClose: function onClose() {
+          return setOpenedItem(undefined);
+        },
+        resolve: resolveDetail
+      },
+      onClusterClick: (0, _actions.action)('onClusterClick'),
+      onItemClick: (0, _actions.action)('onItemClick')
+    })
+  });
+};
+var LoadingStory = function LoadingStory() {
+  var _useLocationState2 = useLocationState({
+      cluster: undefined,
+      path: undefined
+    }),
+    location = _useLocationState2.location,
+    onUpdate = _useLocationState2.onUpdate;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 300,
+      height: 500
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueriesNavigation.QueriesNavigation, {
+      location: location,
+      header: {
+        actions: defaultActions,
+        onLoadSuggestions: _PathEditorStories.mockLoadPathSuggestions
+      },
+      onUpdate: onUpdate,
+      clusters: [],
+      listState: {
+        loading: true
+      }
+    })
+  });
+};
+var EmptyStory = function EmptyStory() {
+  var _useLocationState3 = useLocationState({
+      cluster: 'arnold',
+      path: '/home/empty'
+    }),
+    location = _useLocationState3.location,
+    onUpdate = _useLocationState3.onUpdate;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 300,
+      height: 500
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueriesNavigation.QueriesNavigation, {
+      location: location,
+      header: {
+        actions: defaultActions,
+        onLoadSuggestions: _PathEditorStories.mockLoadPathSuggestions
+      },
+      onUpdate: onUpdate,
+      items: []
+    })
+  });
+};
+var EmptySearchStory = function EmptySearchStory() {
+  var _useLocationState4 = useLocationState({
+      cluster: 'arnold',
+      path: '/home'
+    }),
+    location = _useLocationState4.location,
+    onUpdate = _useLocationState4.onUpdate;
+  var _useState7 = (0, _react.useState)('no-such-item'),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    search = _useState8[0],
+    setSearch = _useState8[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 300,
+      height: 500
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueriesNavigation.QueriesNavigation, {
+      location: location,
+      header: {
+        actions: defaultActions,
+        onLoadSuggestions: _PathEditorStories.mockLoadPathSuggestions
+      },
+      onUpdate: onUpdate,
+      items: [],
+      search: {
+        value: search,
+        onUpdate: setSearch
+      }
+    })
+  });
+};
+var ErrorStory = function ErrorStory() {
+  var _useLocationState5 = useLocationState({
+      cluster: undefined,
+      path: undefined
+    }),
+    location = _useLocationState5.location,
+    onUpdate = _useLocationState5.onUpdate;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 300,
+      height: 500
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueriesNavigation.QueriesNavigation, {
+      location: location,
+      header: {
+        actions: defaultActions,
+        onLoadSuggestions: _PathEditorStories.mockLoadPathSuggestions
+      },
+      onUpdate: onUpdate,
+      clusters: [],
+      listState: {
+        error: 'Custom load error message'
+      }
+    })
+  });
+};
+var CUSTOM_CLUSTERS = CLUSTERS.map(function (cluster) {
+  var _cluster$description;
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, cluster), {}, {
+    env: (_cluster$description = cluster.description) !== null && _cluster$description !== void 0 ? _cluster$description : 'Unknown'
+  });
+});
+var getCustomItemsForPath = function getCustomItemsForPath(path) {
+  return getItemsForPath(path).map(function (item, index) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      owner: index % 2 === 0 ? 'robot' : 'user'
+    });
+  });
+};
+var CustomRowsStory = function CustomRowsStory() {
+  var _useLocationState6 = useLocationState({
+      cluster: undefined,
+      path: undefined
+    }),
+    location = _useLocationState6.location,
+    onUpdate = _useLocationState6.onUpdate;
+  var _useState9 = (0, _react.useState)('asc'),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    sort = _useState0[0],
+    setSort = _useState0[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 340,
+      height: 500
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueriesNavigation.QueriesNavigation, {
+      location: location,
+      header: {
+        actions: defaultActions,
+        onLoadSuggestions: _PathEditorStories.mockLoadPathSuggestions
+      },
+      onUpdate: onUpdate,
+      clusters: CUSTOM_CLUSTERS,
+      items: getCustomItemsForPath(location.path),
+      sort: {
+        value: sort,
+        onUpdate: setSort
+      },
+      renderClusterItem: function renderClusterItem(_ref2) {
+        var cluster = _ref2.cluster;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+          alignItems: "center",
+          gap: 2,
+          style: {
+            width: '100%',
+            padding: '0 8px'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ClusterRow, {
+            cluster: cluster
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Label, {
+            theme: "info",
+            children: cluster.env
+          })]
+        });
+      },
+      renderNavigationItem: function renderNavigationItem(_ref3) {
+        var item = _ref3.item,
+          isParentRow = _ref3.isParentRow;
+        return isParentRow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.NavigationItemRow, {
+          item: item
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+          alignItems: "center",
+          gap: 2,
+          style: {
+            width: '100%',
+            padding: '0 8px'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.NavigationItemRow, {
+            item: item
+          }), item.owner && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+            color: "secondary",
+            variant: "caption-2",
+            children: item.owner
+          })]
+        });
+      },
+      onClusterClick: (0, _actions.action)('onClusterClick'),
+      onItemClick: (0, _actions.action)('onItemClick')
+    })
+  });
+};
+var CustomDetailResolverStory = function CustomDetailResolverStory() {
+  var _useLocationState7 = useLocationState({
+      cluster: 'arnold',
+      path: '/home'
+    }),
+    location = _useLocationState7.location,
+    onUpdate = _useLocationState7.onUpdate;
+  var _useState1 = (0, _react.useState)(undefined),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    openedItem = _useState10[0],
+    setOpenedItem = _useState10[1];
+  var resolveDetail = (0, _createNavigationDetailResolver.createNavigationDetailResolver)({
+    file: function file(item) {
+      return {
+        tabs: [{
+          id: 'content',
+          title: 'Content',
+          content: "Content of ".concat(item.title)
+        }, {
+          id: 'meta',
+          title: 'Meta',
+          content: 'Meta placeholder'
+        }],
+        hasSearch: false
+      };
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 340,
+      height: 600
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueriesNavigation.QueriesNavigation, {
+      location: location,
+      header: {
+        actions: defaultActions,
+        onLoadSuggestions: _PathEditorStories.mockLoadPathSuggestions
+      },
+      onUpdate: onUpdate,
+      items: getItemsForPath(location.path),
+      detail: {
+        openedItem: openedItem,
+        onItemOpen: setOpenedItem,
+        onClose: function onClose() {
+          return setOpenedItem(undefined);
+        },
+        resolve: resolveDetail
+      },
+      onItemClick: (0, _actions.action)('onItemClick')
+    })
+  });
+};
+var ClustersToItems = exports.ClustersToItems = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClustersToItemsStory, {});
+  }
+};
+var Loading = exports.Loading = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingStory, {});
+  }
+};
+var Empty = exports.Empty = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyStory, {});
+  }
+};
+var EmptySearch = exports.EmptySearch = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptySearchStory, {});
+  }
+};
+var Error = exports.Error = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorStory, {});
+  }
+};
+var CustomRows = exports.CustomRows = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomRowsStory, {});
+  }
+};
+var CustomDetailResolver = exports.CustomDetailResolver = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomDetailResolverStory, {});
+  }
+};
+// #sourceMappingURL=QueriesNavigation.stories.js.map