@pingux/astro 1.2.0-alpha.0 → 1.2.0-alpha.12

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -0,0 +1,296 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { useFilter } from '@react-aria/i18n';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import HomeIcon from 'mdi-react/HomeIcon';
+import PropTypes from 'prop-types';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
+import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
+import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import { FocusScope } from '@react-aria/focus';
+import { useListState } from '@react-stately/list';
+import ListBox from '../ListBox';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import { Breadcrumbs, Button, Icon, Item, PopoverContainer, ScrollBox, SearchField, Text } from '../../index';
+/** The Environment Picker with Search and Sections support */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      imperativeDisabledKeys = props.disabledKeys,
+      emptySearchText = props.emptySearchText,
+      items = props.items,
+      imperativeItemsFilter = props.itemsFilter,
+      onNamePress = props.onNamePress,
+      imperativeOnPopoverClose = props.onPopoverClose,
+      imperativeOnPopoverOpen = props.onPopoverOpen,
+      onSelectionChange = props.onSelectionChange,
+      name = props.name,
+      searchProps = props.searchProps,
+      selectedItem = props.selectedItem,
+      others = _objectWithoutProperties(props, ["children", "disabledKeys", "emptySearchText", "items", "itemsFilter", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"]);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var breadcrumbsRef = useRef();
+  var overlayRef = React.useRef();
+  var triggerRef = React.useRef();
+  var scrollBoxRef = React.useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return breadcrumbsRef.current;
+  });
+
+  var _useFilter = useFilter({
+    sensitivity: 'base'
+  }),
+      contains = _useFilter.contains;
+
+  var filterNodesWithChildren = function filterNodesWithChildren(iterableNode) {
+    var nodeArr = _Array$from(iterableNode); // with this function we are filtering child items if they have sections
+    // we can't filter items because if it would be a section - we can't change childNodes
+    // eslint-disable-next-line array-callback-return,consistent-return
+
+
+    var filteredSections = _mapInstanceProperty(nodeArr).call(nodeArr, function f(nodeItem) {
+      if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'item') {
+        var _nodeItem$value;
+
+        return contains(nodeItem === null || nodeItem === void 0 ? void 0 : (_nodeItem$value = nodeItem.value) === null || _nodeItem$value === void 0 ? void 0 : _nodeItem$value.name, searchValue) ? nodeItem : null;
+      }
+
+      if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'section') {
+        var _context;
+
+        return _objectSpread(_objectSpread({}, nodeItem), {}, {
+          childNodes: _filterInstanceProperty(_context = _Array$from(nodeItem.childNodes)).call(_context, f)
+        });
+      }
+    }); // we are filtering null items here since we were not able to filter them in previous function
+
+
+    return _filterInstanceProperty(filteredSections).call(filteredSections, function (item) {
+      return item;
+    });
+  };
+
+  var popoverState = useOverlayTriggerState({});
+  var handlePopoverClose = useCallback(function () {
+    if (imperativeOnPopoverClose) {
+      imperativeOnPopoverClose();
+    }
+
+    setSearchValue('');
+    popoverState.close();
+  }, [imperativeOnPopoverClose, popoverState]);
+  var handleSelectionChange = useCallback(function (selectedItemSet) {
+    var _selectedItemSet = _slicedToArray(selectedItemSet, 1),
+        selectedItemKey = _selectedItemSet[0];
+
+    onSelectionChange(selectedItemKey);
+    handlePopoverClose();
+  }, [handlePopoverClose, onSelectionChange]);
+  var listBoxProps = {
+    children: children,
+    disabledKeys: imperativeDisabledKeys,
+    items: items,
+    filter: imperativeItemsFilter || filterNodesWithChildren,
+    onSelectionChange: handleSelectionChange,
+    selectedKeys: [],
+    selectionMode: 'single',
+    disallowEmptySelection: false
+  };
+  var listBoxState = useListState(listBoxProps); // this function is recursively going through the children to see
+  // whether there are some items so that means that the array isn't empty
+
+  var checkIfListEmpty = useCallback(function () {
+    // from the beginning we are assuming that the list is empty
+    // variable is not isListEmpty because checks below if(isListHasItems) is clearer
+    // to read than if(!isListEmpty) IMO
+    var isListHasItems = false; // eslint-disable-next-line consistent-return
+
+    (function f(listState) {
+      var _listState$collection;
+
+      // if the list has items - we don't need to go deeper into the recursion
+      if (isListHasItems) {
+        return;
+      } // here we are checking where are listItems array is stored
+
+
+      var listItemsArr = (listState === null || listState === void 0 ? void 0 : (_listState$collection = listState.collection) === null || _listState$collection === void 0 ? void 0 : _listState$collection.iterable) || (listState === null || listState === void 0 ? void 0 : listState.childNodes);
+
+      if ((listItemsArr === null || listItemsArr === void 0 ? void 0 : listItemsArr.length) > 0) {
+        // if there are a few listItems we are checking their types (can be sections) - if we have
+        // a few of 'items' type - we know that the list is not empty
+        if (listItemsArr[0].type === 'item') {
+          isListHasItems = true;
+        } else {
+          // this path will be taken if there are a few 'sections'
+          // - we need to go check them recursively
+          _forEachInstanceProperty(listItemsArr).call(listItemsArr, function (item) {
+            return f(item);
+          });
+        }
+      }
+    })(listBoxState);
+
+    return !isListHasItems;
+  }, [listBoxState]);
+
+  var _useOverlayTrigger = useOverlayTrigger({
+    type: 'listbox'
+  }, popoverState, triggerRef),
+      triggerProps = _useOverlayTrigger.triggerProps,
+      overlayProps = _useOverlayTrigger.overlayProps;
+
+  var handlePopoverOpen = function handlePopoverOpen() {
+    if (imperativeOnPopoverOpen) {
+      imperativeOnPopoverOpen();
+    }
+
+    popoverState.open();
+  };
+
+  var _useOverlayPosition = useOverlayPosition({
+    isOpen: popoverState.isOpen,
+    offset: 6,
+    onClose: handlePopoverClose,
+    overlayRef: overlayRef,
+    scrollRef: scrollBoxRef,
+    shouldUpdatePosition: true,
+    targetRef: triggerRef
+  }),
+      positionProps = _useOverlayPosition.overlayProps;
+
+  var EmptyListState = ___EmotionJSX(Text, {
+    py: 10,
+    px: 15
+  }, emptySearchText);
+
+  var ItemsSelect = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({}, triggerProps, {
+    onPress: handlePopoverOpen,
+    ref: triggerRef,
+    variant: "environmentBreadcrumb.current",
+    "aria-label": "".concat(typeof selectedItem === 'string' ? selectedItem : 'Selected Item')
+  }), selectedItem, ___EmotionJSX(Icon, {
+    icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
+  })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
+    ref: overlayRef,
+    isOpen: popoverState.isOpen,
+    scrollRef: scrollBoxRef,
+    onClose: handlePopoverClose,
+    hasNoArrow: true,
+    isDismissable: true,
+    p: 10
+  }), ___EmotionJSX(FocusScope, {
+    restoreFocus: true,
+    autoFocus: true,
+    contain: true
+  }, ___EmotionJSX(ScrollBox, {
+    ref: scrollBoxRef
+  }, ___EmotionJSX(SearchField, _extends({
+    placeholder: "Search",
+    "aria-label": "Items Search",
+    "data-testid": "Environment-Breadcrumb-Search",
+    containerProps: {
+      // this one is needed to cancel default scrollBox items behavior
+      sx: {
+        overflow: 'visible'
+      }
+    },
+    onChange: setSearchValue
+  }, searchProps)), checkIfListEmpty() ? EmptyListState : ___EmotionJSX(ListBox, {
+    state: listBoxState,
+    "aria-label": "Items List"
+  })))));
+
+  var handleOnAction = useCallback(function (actionKey) {
+    if (actionKey === 'name' && onNamePress) {
+      onNamePress();
+    }
+  }, [onNamePress]);
+  return ___EmotionJSX(Breadcrumbs, _extends({
+    icon: ChevronRightIcon,
+    ref: breadcrumbsRef,
+    onAction: handleOnAction,
+    iconProps: {
+      color: 'neutral.70',
+      mx: 10
+    }
+  }, others), ___EmotionJSX(Item, {
+    key: "name",
+    variant: "environmentBreadcrumb.current",
+    "data-testid": "name",
+    "aria-label": name
+  }, ___EmotionJSX(Icon, {
+    icon: HomeIcon,
+    mr: 7
+  }), name), selectedItem && ___EmotionJSX(Item, {
+    key: "itemsSelect",
+    elementType: "Fragment"
+  }, ItemsSelect));
+});
+export default EnvironmentBreadcrumb;
+EnvironmentBreadcrumb.propTypes = {
+  /** Callback function that fires when the selected key changes. */
+  onSelectionChange: PropTypes.func,
+
+  /** Current environment */
+  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /** Displayed name */
+  name: PropTypes.string,
+
+  /** Callback function that fires when name pressed */
+  onNamePress: PropTypes.func,
+
+  /** The list of environments. */
+  items: isIterableProp,
+
+  /** Filter function to generate a filtered list of nodes.
+   * (nodes: Iterable<Node>) => Iterable<Node>
+   * */
+  itemsFilter: PropTypes.func,
+
+  /** Callback function that fires when the dropdown is opened. */
+  onPopoverOpen: PropTypes.func,
+
+  /** Callback function that fires when the dropdown is closed. */
+  onPopoverClose: PropTypes.func,
+
+  /** Props object that is spread directly into the SearchField element. */
+  searchProps: PropTypes.shape({}),
+
+  /** Array of keys to disable within the options list. */
+  disabledKeys: PropTypes.arrayOf(PropTypes.string),
+
+  /** Text that will be shown if no search results found. */
+  emptySearchText: PropTypes.string
+};
+EnvironmentBreadcrumb.defaultProps = {
+  emptySearchText: 'No Search Result'
+};

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -0,0 +1,256 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, 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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context6; _forEachInstanceProperty(_context6 = ownKeys(Object(source), true)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context7; _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useState } from 'react';
+import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
+import { Item, Section, OverlayProvider, Chip, Box, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'EnvironmentBreadcrumb',
+  component: EnvironmentBreadcrumb
+};
+var defaultEnvironments = [{
+  name: 'Default'
+}, {
+  name: 'Kangaroo'
+}, {
+  name: 'Snake'
+}, {
+  name: 'Snail'
+}, {
+  name: 'Slug'
+}, {
+  name: 'Crow'
+}, {
+  name: 'Dog'
+}, {
+  name: 'Crab',
+  isSandbox: true
+}, {
+  name: 'Fish'
+}, {
+  name: 'Turtle'
+}, {
+  name: 'Mouse'
+}, {
+  name: 'Banana'
+}, {
+  name: 'Shark'
+}, {
+  name: 'Gorilla'
+}, {
+  name: 'Goat'
+}];
+var environmentsWithSections = [{
+  name: 'Recent',
+  options: [{
+    name: 'Default'
+  }, {
+    name: 'Consumer Banking Prod'
+  }, {
+    name: 'Custom 360 Test'
+  }]
+}, {
+  name: 'All',
+  options: [{
+    name: 'Consumer Banking Prod'
+  }, {
+    name: 'Custom 360 Test'
+  }, {
+    name: 'Default'
+  }, {
+    name: 'Great New One',
+    isSandbox: true
+  }, {
+    name: 'Jeff’s Workforce'
+  }, {
+    name: 'Lindemuller Prod'
+  }, {
+    name: 'Mine'
+  }]
+}];
+export var Default = function Default(args) {
+  var _useState = useState({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedEnvironment = _useState2[0],
+      setSelectedEnvironment = _useState2[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref) {
+      var name = _ref.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref2) {
+    var name = _ref2.name,
+        isSandbox = _ref2.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  }));
+};
+export var WithSections = function WithSections() {
+  var _useState3 = useState(environmentsWithSections),
+      _useState4 = _slicedToArray(_useState3, 2),
+      environments = _useState4[0],
+      setEnvironments = _useState4[1];
+
+  var _useState5 = useState({
+    name: 'Consumer Banking Prod'
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selectedEnvironment = _useState6[0],
+      setSelectedEnvironment = _useState6[1];
+
+  var recentEnvShown = 3;
+
+  var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
+    var _context3;
+
+    var envName = envObj.name;
+    var isDuplicate = _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
+      return prevEnv.name === envName;
+    }).length > 0;
+
+    if (isDuplicate) {
+      var _context;
+
+      return _concatInstanceProperty(_context = [_objectSpread({}, envObj)]).call(_context, _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
+        return prevEnv.name !== envName;
+      }));
+    }
+
+    if (prevEnvs.length >= recentEnvShown) {
+      var _context2;
+
+      return _concatInstanceProperty(_context2 = [_objectSpread({}, envObj)]).call(_context2, _sliceInstanceProperty(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
+    }
+
+    return _concatInstanceProperty(_context3 = [_objectSpread({}, envObj)]).call(_context3, prevEnvs);
+  };
+
+  var findEnvObj = function findEnvObj(envName) {
+    var _context4;
+
+    return _findInstanceProperty(_context4 = _findInstanceProperty(environments).call(environments, function (section) {
+      return section.name === 'All';
+    }).options).call(_context4, function (option) {
+      return option.name === envName;
+    });
+  };
+
+  var handleEnvPress = function handleEnvPress(newEnv) {
+    var sectionPrefixIndex = _indexOfInstanceProperty(newEnv).call(newEnv, '-');
+
+    var envKey = newEnv.substr(sectionPrefixIndex + 1);
+
+    var recentEnvironments = _findInstanceProperty(environments).call(environments, function (envSection) {
+      return envSection.name === 'Recent';
+    }).options;
+
+    var envObj = findEnvObj(envKey);
+    var updatedRecentEnvironments = getUpdatedRecentEnvs(envObj, recentEnvironments);
+    setEnvironments(function (prevEnvs) {
+      return _mapInstanceProperty(prevEnvs).call(prevEnvs, function (section) {
+        return section.name === 'Recent' ? _objectSpread(_objectSpread({}, section), {}, {
+          options: updatedRecentEnvironments
+        }) : section;
+      });
+    });
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, {
+    items: environments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleEnvPress
+  }, function (_ref3) {
+    var sectionName = _ref3.name,
+        sectionOptions = _ref3.options;
+    return ___EmotionJSX(Section, {
+      key: sectionName,
+      title: sectionName,
+      items: sectionOptions
+    }, function (_ref4) {
+      var _context5;
+
+      var itemName = _ref4.name,
+          itemOptions = _ref4.options,
+          isSandbox = _ref4.isSandbox;
+      return ___EmotionJSX(Item, {
+        key: _concatInstanceProperty(_context5 = "".concat(sectionName, "-")).call(_context5, itemName),
+        childItems: itemOptions,
+        textValue: itemName
+      }, ___EmotionJSX(Box, {
+        isRow: true
+      }, itemName, isSandbox ? ___EmotionJSX(Chip, {
+        label: "SANDBOX",
+        variant: "boxes.environmentChip",
+        bg: "neutral.40"
+      }) : null));
+    });
+  }));
+};
+export var OrgLevel = function OrgLevel() {
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
+    name: "Globochem"
+  });
+};