ydb-ui-components 3.3.1 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [3.5.0](https://github.com/ydb-platform/ydb-ui-components/compare/v3.4.0...v3.5.0) (2023-12-12)
+
+
+### Features
+
+* update to uikit5 ([#62](https://github.com/ydb-platform/ydb-ui-components/issues/62)) ([03cf678](https://github.com/ydb-platform/ydb-ui-components/commit/03cf6786f27ed433a040cb4d2ad70764eaa8e4b1))
+
+## [3.4.0](https://github.com/ydb-platform/ydb-ui-components/compare/v3.3.1...v3.4.0) (2023-10-23)
+
+
+### Features
+
+* build with both cjs and esm as targets ([#60](https://github.com/ydb-platform/ydb-ui-components/issues/60)) ([7b29759](https://github.com/ydb-platform/ydb-ui-components/commit/7b297599bb1129a40dc6797fcf0673165dd52a42))
+
 ## [3.3.1](https://github.com/ydb-platform/ydb-ui-components/compare/v3.3.0...v3.3.1) (2023-08-09)
 
 

package/build/{components → cjs/components}/NavigationTree/EmptyView/EmptyView.css

@@ -1,4 +1,4 @@
 .ydb-navigation-tree-view-empty {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   font-style: italic;
 }

package/build/cjs/components/NavigationTree/ErrorView/ErrorView.css

@@ -0,0 +1,3 @@
+.ydb-navigation-tree-view-error {
+  color: var(--g-color-text-danger);
+}

package/build/{components → cjs/components}/TreeView/TreeView.css

@@ -12,21 +12,21 @@
   height: 24px;
   padding-left: calc(24px * var(--ydb-tree-view-level));
   padding-right: 3px;
-  border-bottom: 1px solid var(--yc-color-line-solid);
+  border-bottom: 1px solid var(--g-color-line-generic-solid);
   cursor: pointer;
 }
 .ydb-tree-view__item:hover {
-  background-color: var(--yc-color-base-simple-hover);
+  background-color: var(--g-color-base-simple-hover);
 }
 .ydb-tree-view__item:hover .ydb-tree-view__actions {
   display: flex;
 }
 .ydb-tree-view__item_active {
   font-weight: bold;
-  background-color: var(--yc-color-base-selection);
+  background-color: var(--g-color-base-selection);
 }
 .ydb-tree-view__item_active:hover {
-  background-color: var(--yc-color-base-selection-hover);
+  background-color: var(--g-color-base-selection-hover);
 }
 .ydb-tree-view__content {
   flex-grow: 1;
@@ -41,7 +41,7 @@
   justify-content: center;
   width: 24px;
   height: 24px;
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .ydb-tree-view__icon svg {
   display: block;
@@ -64,7 +64,7 @@
   cursor: pointer;
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12" width="6" height="12"><path d="M0.192529 10.7483C-0.0845649 11.0562 -0.0596061 11.5304 0.248276 11.8075C0.556159 12.0846 1.03038 12.0596 1.30747 11.7517L0.192529 10.7483ZM5.25 6.25L5.80747 6.75172C6.06418 6.46649 6.06418 6.0335 5.80747 5.74828L5.25 6.25ZM1.30747 0.748277C1.03038 0.440394 0.556159 0.415435 0.248276 0.69253C-0.0596065 0.969624 -0.0845653 1.44384 0.192529 1.75172L1.30747 0.748277ZM1.30747 11.7517L5.80747 6.75172L4.69253 5.74828L0.192529 10.7483L1.30747 11.7517ZM5.80747 5.74828L1.30747 0.748277L0.192529 1.75172L4.69253 6.75172L5.80747 5.74828Z" fill="rgba(0, 0, 0, 0.85)"/></svg>') no-repeat center center;
 }
-.yc-root_theme_dark .ydb-tree-view .tree-view_arrow {
+.g-root_theme_dark .ydb-tree-view .tree-view_arrow {
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12" width="6" height="12"><path d="M0.192529 10.7483C-0.0845649 11.0562 -0.0596061 11.5304 0.248276 11.8075C0.556159 12.0846 1.03038 12.0596 1.30747 11.7517L0.192529 10.7483ZM5.25 6.25L5.80747 6.75172C6.06418 6.46649 6.06418 6.0335 5.80747 5.74828L5.25 6.25ZM1.30747 0.748277C1.03038 0.440394 0.556159 0.415435 0.248276 0.69253C-0.0596065 0.969624 -0.0845653 1.44384 0.192529 1.75172L1.30747 0.748277ZM1.30747 11.7517L5.80747 6.75172L4.69253 5.74828L0.192529 10.7483L1.30747 11.7517ZM5.80747 5.74828L1.30747 0.748277L0.192529 1.75172L4.69253 6.75172L5.80747 5.74828Z" fill="rgba(255, 255, 255, 0.85)"/></svg>') no-repeat center center;
 }
 .ydb-tree-view .tree-view_arrow:not(.tree-view_arrow-collapsed) {

package/build/esm/components/NavigationTree/EmptyView/EmptyView.css

@@ -0,0 +1,4 @@
+.ydb-navigation-tree-view-empty {
+  color: var(--g-color-text-secondary);
+  font-style: italic;
+}

package/build/esm/components/NavigationTree/EmptyView/EmptyView.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './EmptyView.scss';
+interface EmptyViewProps {
+    level?: number;
+}
+export declare function EmptyView({ level }: EmptyViewProps): JSX.Element;
+export {};

package/build/esm/components/NavigationTree/EmptyView/EmptyView.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import i18n from '../i18n';
+import { TreeView } from '../../TreeView/TreeView';
+import './EmptyView.css';
+var b = block('ydb-navigation-tree-view-empty');
+export function EmptyView(_ref) {
+  var level = _ref.level;
+  return /*#__PURE__*/React.createElement(TreeView, {
+    name: /*#__PURE__*/React.createElement("span", {
+      className: b()
+    }, i18n('label_empty')),
+    level: level
+  });
+}

package/build/esm/components/NavigationTree/ErrorView/ErrorView.css

@@ -0,0 +1,3 @@
+.ydb-navigation-tree-view-error {
+  color: var(--g-color-text-danger);
+}

package/build/esm/components/NavigationTree/ErrorView/ErrorView.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './ErrorView.scss';
+interface ErrorViewProps {
+    level?: number;
+}
+export declare function ErrorView({ level }: ErrorViewProps): JSX.Element;
+export {};

package/build/esm/components/NavigationTree/ErrorView/ErrorView.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import i18n from '../i18n';
+import { TreeView } from '../../TreeView/TreeView';
+import './ErrorView.css';
+var b = block('ydb-navigation-tree-view-error');
+export function ErrorView(_ref) {
+  var level = _ref.level;
+  return /*#__PURE__*/React.createElement(TreeView, {
+    name: /*#__PURE__*/React.createElement("span", {
+      className: b()
+    }, i18n('label_error')),
+    level: level
+  });
+}

package/build/esm/components/NavigationTree/LoaderView/LoaderView.css

@@ -0,0 +1,7 @@
+.ydb-navigation-tree-view-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 24px;
+}

package/build/esm/components/NavigationTree/LoaderView/LoaderView.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './LoaderView.scss';
+interface LoaderViewProps {
+    level?: number;
+}
+export declare function LoaderView({ level }: LoaderViewProps): JSX.Element;
+export {};

package/build/esm/components/NavigationTree/LoaderView/LoaderView.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { Spin } from '@gravity-ui/uikit';
+import { TreeView } from '../../TreeView/TreeView';
+import './LoaderView.css';
+var b = block('ydb-navigation-tree-view-loader');
+export function LoaderView(_ref) {
+  var level = _ref.level;
+  return /*#__PURE__*/React.createElement(TreeView, {
+    name: /*#__PURE__*/React.createElement("div", {
+      className: b()
+    }, /*#__PURE__*/React.createElement(Spin, {
+      size: "xs"
+    })),
+    level: level
+  });
+}

package/build/esm/components/NavigationTree/NavigationTree.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { NavigationTreeProps } from './types';
+export type { NavigationTreeProps };
+export declare function NavigationTree({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps): JSX.Element;

package/build/esm/components/NavigationTree/NavigationTree.js

@@ -0,0 +1,103 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import ReactList from 'react-list';
+import { reducer, getNodeState, selectTreeAsList } from './state';
+import { isServiceNode } from './utils';
+import { NavigationTreeNode } from './NavigationTreeNode';
+import { LoaderView } from './LoaderView/LoaderView';
+import { ErrorView } from './ErrorView/ErrorView';
+import { EmptyView } from './EmptyView/EmptyView';
+
+var renderServiceNode = function renderServiceNode(node) {
+  var key = "".concat(node.path, "|").concat(node.status);
+
+  if (node.status === 'loading') {
+    return /*#__PURE__*/React.createElement(LoaderView, {
+      key: key,
+      level: node.level
+    });
+  }
+
+  if (node.status === 'error') {
+    return /*#__PURE__*/React.createElement(ErrorView, {
+      key: key,
+      level: node.level
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(EmptyView, {
+    key: key,
+    level: node.level
+  });
+};
+
+export function NavigationTree(_ref) {
+  var partialRootState = _ref.rootState,
+      fetchPath = _ref.fetchPath,
+      getActions = _ref.getActions,
+      renderAdditionalNodeElements = _ref.renderAdditionalNodeElements,
+      activePath = _ref.activePath,
+      onActivePathUpdate = _ref.onActivePathUpdate,
+      _ref$cache = _ref.cache,
+      cache = _ref$cache === void 0 ? true : _ref$cache,
+      _ref$virtualize = _ref.virtualize,
+      virtualize = _ref$virtualize === void 0 ? false : _ref$virtualize;
+
+  var _React$useReducer = React.useReducer(reducer, _defineProperty({}, partialRootState.path, getNodeState(partialRootState))),
+      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+      state = _React$useReducer2[0],
+      dispatch = _React$useReducer2[1];
+
+  var nodesList = React.useMemo(function () {
+    return selectTreeAsList(state, partialRootState.path);
+  }, [state]);
+
+  var renderNode = function renderNode(node) {
+    return /*#__PURE__*/React.createElement(NavigationTreeNode, {
+      key: node.path,
+      state: state,
+      path: node.path,
+      activePath: activePath,
+      fetchPath: fetchPath,
+      dispatch: dispatch,
+      onActivate: onActivePathUpdate,
+      getActions: getActions,
+      renderAdditionalNodeElements: renderAdditionalNodeElements,
+      cache: cache,
+      level: node.level
+    });
+  };
+
+  var renderVirtualizedTree = function renderVirtualizedTree() {
+    return /*#__PURE__*/React.createElement(ReactList, {
+      type: "uniform",
+      length: nodesList.length,
+      useStaticSize: true,
+      itemRenderer: function itemRenderer(index) {
+        var node = nodesList[index];
+        return isServiceNode(node) ? renderServiceNode(node) : renderNode(node);
+      }
+    });
+  };
+
+  var renderSimpleTree = function renderSimpleTree() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, nodesList.map(function (node) {
+      return isServiceNode(node) ? renderServiceNode(node) : renderNode(node);
+    }));
+  };
+
+  return virtualize ? renderVirtualizedTree() : renderSimpleTree();
+}

package/build/esm/components/NavigationTree/NavigationTreeNode.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { NavigationTreeState, NavigationTreeProps } from './types';
+import { NavigationTreeAction } from './state';
+export interface NavigationTreeNodeProps {
+    path: string;
+    fetchPath: NavigationTreeProps['fetchPath'];
+    activePath?: string;
+    state: NavigationTreeState;
+    level?: number;
+    dispatch: React.Dispatch<NavigationTreeAction>;
+    children?: React.ReactNode;
+    onActivate?: (path: string) => void;
+    getActions?: NavigationTreeProps['getActions'];
+    renderAdditionalNodeElements?: NavigationTreeProps['renderAdditionalNodeElements'];
+    cache?: boolean;
+}
+export declare function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, renderAdditionalNodeElements, cache, }: NavigationTreeNodeProps): JSX.Element;

package/build/esm/components/NavigationTree/NavigationTreeNode.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import { NavigationTreeActionType } from './state';
+import { DatabaseIcon } from '../icons/Database';
+import { FolderIcon } from '../icons/Folder';
+import { FolderOpenIcon } from '../icons/FolderOpen';
+import { TableIcon } from '../icons/Table';
+import { TopicIcon } from '../icons/Topic';
+import { IndexIcon } from '../icons/Index';
+import { ColumnTableIcon } from '../icons/ColumnTable';
+import { ExternalTableIcon } from '../icons/ExternalTable';
+import { ExternalDataSourceIcon } from '../icons/ExternalDataSource';
+import { TreeView } from '../TreeView/TreeView';
+
+function renderIcon(type, collapsed) {
+  switch (type) {
+    case 'database':
+      // this icon is larger than the others, therefore 14 for a better fit
+      return /*#__PURE__*/React.createElement(DatabaseIcon, {
+        height: 14
+      });
+
+    case 'directory':
+      return collapsed ? /*#__PURE__*/React.createElement(FolderIcon, {
+        height: 16
+      }) : /*#__PURE__*/React.createElement(FolderOpenIcon, {
+        height: 16
+      });
+
+    case 'index':
+      return /*#__PURE__*/React.createElement(IndexIcon, {
+        height: 16
+      });
+
+    case 'table':
+    case 'index_table':
+      return /*#__PURE__*/React.createElement(TableIcon, {
+        height: 16
+      });
+
+    case 'column_table':
+      return /*#__PURE__*/React.createElement(ColumnTableIcon, {
+        height: 16
+      });
+
+    case 'stream':
+    case 'topic':
+      return /*#__PURE__*/React.createElement(TopicIcon, {
+        height: 16
+      });
+
+    case 'external_table':
+      return /*#__PURE__*/React.createElement(ExternalTableIcon, {
+        height: 16
+      });
+
+    case 'external_data_source':
+      return /*#__PURE__*/React.createElement(ExternalDataSourceIcon, {
+        height: 16
+      });
+
+    default:
+      return null;
+  }
+}
+
+export function NavigationTreeNode(_ref) {
+  var path = _ref.path,
+      fetchPath = _ref.fetchPath,
+      activePath = _ref.activePath,
+      state = _ref.state,
+      level = _ref.level,
+      dispatch = _ref.dispatch,
+      children = _ref.children,
+      onActivate = _ref.onActivate,
+      getActions = _ref.getActions,
+      renderAdditionalNodeElements = _ref.renderAdditionalNodeElements,
+      cache = _ref.cache;
+  var nodeState = state[path];
+  React.useEffect(function () {
+    if (nodeState.collapsed) {
+      if (!cache) {
+        dispatch({
+          type: NavigationTreeActionType.ResetNode,
+          payload: {
+            path: path
+          }
+        });
+      }
+
+      return;
+    }
+
+    if (nodeState.loaded || nodeState.loading) {
+      return;
+    }
+
+    dispatch({
+      type: NavigationTreeActionType.StartLoading,
+      payload: {
+        path: path
+      }
+    });
+    fetchPath(path).then(function (data) {
+      dispatch({
+        type: NavigationTreeActionType.FinishLoading,
+        payload: {
+          path: path,
+          activePath: activePath,
+          data: data
+        }
+      });
+    })["catch"](function (error) {
+      dispatch({
+        type: NavigationTreeActionType.FinishLoading,
+        payload: {
+          path: path,
+          error: error
+        }
+      });
+    });
+  }, [nodeState.collapsed]);
+  var handleClick = React.useCallback(function () {
+    if (onActivate) {
+      onActivate(path);
+    }
+  }, [path, onActivate]);
+  var handleArrowClick = React.useCallback(function () {
+    dispatch({
+      type: NavigationTreeActionType.ToggleCollapsed,
+      payload: {
+        path: path
+      }
+    });
+  }, []);
+  var additionalNodeElements = React.useMemo(function () {
+    return renderAdditionalNodeElements === null || renderAdditionalNodeElements === void 0 ? void 0 : renderAdditionalNodeElements(nodeState.path, nodeState.type);
+  }, [renderAdditionalNodeElements, nodeState]);
+  var actions = React.useMemo(function () {
+    return getActions === null || getActions === void 0 ? void 0 : getActions(nodeState.path, nodeState.type);
+  }, [getActions, nodeState]);
+  return /*#__PURE__*/React.createElement(TreeView, {
+    name: nodeState.name,
+    icon: renderIcon(nodeState.type, nodeState.collapsed),
+    collapsed: nodeState.collapsed,
+    active: nodeState.path === activePath,
+    actions: actions,
+    additionalNodeElements: additionalNodeElements,
+    hasArrow: nodeState.expandable,
+    onClick: handleClick,
+    onArrowClick: handleArrowClick,
+    level: level
+  }, children);
+}

package/build/esm/components/NavigationTree/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "label_error": "Error",
+  "label_empty": "No data"
+}

package/build/esm/components/NavigationTree/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/components/NavigationTree/i18n/index.js

@@ -0,0 +1,8 @@
+import { i18n } from '../../i18n';
+import { Lang } from '../../../utils';
+import en from './en.json';
+import ru from './ru.json';
+var COMPONENT = 'ydb-navigation-tree';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

package/build/esm/components/NavigationTree/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "label_error": "Ошибка",
+  "label_empty": "Нет данных"
+}

package/build/esm/components/NavigationTree/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NavigationTree';
+export * from './types';

package/build/esm/components/NavigationTree/index.js

@@ -0,0 +1,2 @@
+export * from './NavigationTree';
+export * from './types';

package/build/esm/components/NavigationTree/state.d.ts

@@ -0,0 +1,21 @@
+import type { NavigationTreeNodeState, NavigationTreeNodePartialState, NavigationTreeState, NavigationTreeServiceNode } from './types';
+export declare enum NavigationTreeActionType {
+    ToggleCollapsed = "toggle-collapsed",
+    StartLoading = "start-loading",
+    FinishLoading = "finish-loading",
+    ResetNode = "reset-node"
+}
+export interface NavigationTreeAction {
+    type: NavigationTreeActionType;
+    payload: any;
+}
+export declare function getDefaultNodeState(): {
+    collapsed: boolean;
+    loading: boolean;
+    loaded: boolean;
+    error: boolean;
+    children: never[];
+};
+export declare function getNodeState(partialState: NavigationTreeNodePartialState): NavigationTreeNodeState;
+export declare function reducer(state: NavigationTreeState | undefined, action: NavigationTreeAction): NavigationTreeState;
+export declare function selectTreeAsList(state: NavigationTreeState, rootPath: string): (NavigationTreeNodeState | NavigationTreeServiceNode)[];

package/build/esm/components/NavigationTree/state.js

@@ -0,0 +1,118 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { getServiceNode, traverseDFS } from './utils';
+export var NavigationTreeActionType;
+
+(function (NavigationTreeActionType) {
+  NavigationTreeActionType["ToggleCollapsed"] = "toggle-collapsed";
+  NavigationTreeActionType["StartLoading"] = "start-loading";
+  NavigationTreeActionType["FinishLoading"] = "finish-loading";
+  NavigationTreeActionType["ResetNode"] = "reset-node";
+})(NavigationTreeActionType || (NavigationTreeActionType = {}));
+
+export function getDefaultNodeState() {
+  return {
+    collapsed: true,
+    loading: false,
+    loaded: false,
+    error: false,
+    children: []
+  };
+}
+export function getNodeState(partialState) {
+  return _objectSpread(_objectSpread({}, getDefaultNodeState()), {}, {
+    expandable: partialState.type === 'database' || partialState.type === 'directory'
+  }, partialState);
+}
+export function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+
+  switch (action.type) {
+    case NavigationTreeActionType.ToggleCollapsed:
+      return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload.path, _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
+        collapsed: !state[action.payload.path].collapsed
+      })));
+
+    case NavigationTreeActionType.StartLoading:
+      return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload.path, _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
+        loading: true,
+        loaded: false,
+        error: false,
+        children: []
+      })));
+
+    case NavigationTreeActionType.FinishLoading:
+      {
+        var newState = _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload.path, _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
+          loading: false,
+          loaded: Boolean(action.payload.data),
+          error: Boolean(action.payload.error)
+        })));
+
+        if (action.payload.data) {
+          newState[action.payload.path].children = action.payload.data.map(function (_ref) {
+            var name = _ref.name;
+            return name;
+          });
+
+          var _iterator = _createForOfIteratorHelper(action.payload.data),
+              _step;
+
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var _state$path$collapsed, _state$path;
+
+              var item = _step.value;
+              var path = "".concat(action.payload.path, "/").concat(item.name); // expand the tree according to the active path
+              // prioritize the existing state to expand the tree only on first load
+
+              var _action$payload$activ = action.payload.activePath,
+                  activePath = _action$payload$activ === void 0 ? '' : _action$payload$activ;
+              var collapsed = (_state$path$collapsed = (_state$path = state[path]) === null || _state$path === void 0 ? void 0 : _state$path.collapsed) !== null && _state$path$collapsed !== void 0 ? _state$path$collapsed : !activePath.startsWith("".concat(path, "/"));
+              newState[path] = getNodeState(_objectSpread(_objectSpread({}, item), {}, {
+                collapsed: collapsed,
+                path: path
+              }));
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        }
+
+        return newState;
+      }
+
+    case NavigationTreeActionType.ResetNode:
+      return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, action.payload.path, _objectSpread(_objectSpread({}, state[action.payload.path]), getDefaultNodeState())));
+
+    default:
+      return state;
+  }
+}
+export function selectTreeAsList(state, rootPath) {
+  var list = [];
+  traverseDFS(state, rootPath, function (node, level) {
+    list.push(_objectSpread(_objectSpread({}, node), {}, {
+      level: level
+    }));
+    var serviceNode = getServiceNode(node, level);
+
+    if (serviceNode) {
+      list.push(serviceNode);
+    }
+  });
+  return list;
+}