iguazio.dashboard-react-controls 0.0.6 → 0.0.9

package/dist/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.MODAL_SM = exports.MODAL_MD = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = void 0;
+exports.validation = exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.MODAL_SM = exports.MODAL_MD = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = void 0;
 
 /*=========== BUTTONS =============*/
 var PRIMARY_BUTTON = 'primary';
@@ -15,9 +15,27 @@ exports.TERTIARY_BUTTON = TERTIARY_BUTTON;
 var DANGER_BUTTON = 'danger';
 exports.DANGER_BUTTON = DANGER_BUTTON;
 var LABEL_BUTTON = 'label';
-/*=========== STATUS CODES =============*/
+/*=========== VALITATION =============*/
 
 exports.LABEL_BUTTON = LABEL_BUTTON;
+var validation = {
+  BEGIN_END_NOT_WITH: 'Must not begin and end with',
+  BEGIN_END_WITH: 'Must begin and end with',
+  BEGIN_NOT_WITH: 'Must not begin with',
+  BEGIN_WITH: 'Must begin with',
+  END_NOT_WITH: 'Must not end with',
+  END_WITH: 'Must end with',
+  MUST_CONTAIN_EXACTLY_ONE: 'Must contain exactly one',
+  MUST_HAVE_DOT_AFTER_AT: 'Must have at least one . after @',
+  MUST_NOT_BE: 'Must not be',
+  NO_CONSECUTIVE_CHARACTER: 'No consecutive characters',
+  ONLY_AT_THE_BEGINNING: 'Only at the beginning',
+  REQUIRED: 'This field is required',
+  VALID_CHARACTERS: 'Valid characters'
+};
+/*=========== STATUS CODES =============*/
+
+exports.validation = validation;
 var INTERNAL_SERVER_ERROR_STATUS_CODE = 500;
 exports.INTERNAL_SERVER_ERROR_STATUS_CODE = INTERNAL_SERVER_ERROR_STATUS_CODE;
 var CONFLICT_ERROR_STATUS_CODE = 409;

package/dist/elements/OptionsMenu/OptionsMenu.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _components = require("../../components");
+
+require("./optionsMenu.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var OptionsMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      show = _ref.show,
+      timeout = _ref.timeout;
+
+  var _ref2 = ref.current ? ref.current.getBoundingClientRect() : {},
+      dropdownWidth = _ref2.width;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+    in: show,
+    timeout: timeout,
+    classNames: "options-menu-transition",
+    unmountOnExit: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PopUpDialog, {
+      className: "options-menu",
+      customPosition: {
+        element: ref,
+        position: 'bottom-right'
+      },
+      style: {
+        width: "".concat(dropdownWidth, "px")
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: "options-menu__body",
+        children: children
+      })
+    })
+  });
+});
+
+OptionsMenu.defaultProps = {
+  children: [],
+  show: false,
+  timeout: 300
+};
+OptionsMenu.propTypes = {
+  children: _propTypes.default.arrayOf(_propTypes.default.element),
+  show: _propTypes.default.bool.isRequired,
+  timout: _propTypes.default.number
+};
+var _default = OptionsMenu;
+exports.default = _default;

package/dist/elements/OptionsMenu/optionsMenu.scss

@@ -0,0 +1,49 @@
+@import '../../scss/colors';
+@import '../../scss/shadows';
+@import '../../scss/borders';
+
+.options-menu {
+  &__body {
+    width: 100%;
+    max-height: 250px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    color: $mulledWineTwo;
+    font-size: 1rem;
+    list-style-type: none;
+    background-color: $white;
+    border: $primaryBorder;
+    border-radius: 4px;
+    box-shadow: $previewBoxShadow;
+  }
+
+  .pop-up-dialog {
+    width: 100%;
+    padding: 0;
+
+    &__header {
+      display: none;
+    }
+  }
+
+  &-transition {
+    &-enter {
+      opacity: 0;
+    }
+
+    &-enter-active {
+      opacity: 1;
+      transition: opacity 300ms ease-in-out;
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transition: opacity 300ms ease-in-out;
+    }
+  }
+}

package/dist/elements/SelectOption/SelectOption.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("../../components");
+
+var _types = require("../../types");
+
+var _checkmark = require("../../images/checkmark.svg");
+
+require("./selectOption.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SelectOption = function SelectOption(_ref) {
+  var item = _ref.item,
+      _onClick = _ref.onClick,
+      selectType = _ref.selectType,
+      selectedId = _ref.selectedId,
+      withSelectedIcon = _ref.withSelectedIcon;
+  var selectClassName = (0, _classnames.default)('select__item', item.hidden && 'hidden', item.disabled && 'disabled');
+
+  if (selectType === 'checkbox') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": "select-checkbox",
+      className: "select__item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.FormCheckBox, {
+        item: item,
+        selectedId: selectedId,
+        onChange: _onClick,
+        children: [item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "state-".concat(item.status, "-job status")
+        }), item.label]
+      })
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": "select-option",
+    className: selectClassName,
+    onClick: function onClick() {
+      !item.disabled && _onClick(item.id);
+    },
+    children: [item.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      "data-testid": "select-icon",
+      className: "select__icon",
+      children: item.icon
+    }), item.status && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "state-".concat(item.status, "-job status")
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "data-ellipsis label-row",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+        template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+          text: item.label
+        }),
+        children: item.label
+      }), withSelectedIcon && item.id === selectedId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkmark.ReactComponent, {
+        className: "checkmark"
+      })]
+    }), item.subLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
+      className: "sub-label",
+      template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextTooltipTemplate, {
+        text: item.subLabel
+      }),
+      children: item.subLabel
+    })]
+  });
+};
+
+SelectOption.defaultProps = {
+  onClick: function onClick() {},
+  selectType: '',
+  withSelectedIcon: true
+};
+SelectOption.propTypes = {
+  disabled: _propTypes.default.bool,
+  item: _types.SELECT_OPTION.isRequired,
+  onClick: _propTypes.default.func,
+  selectType: _propTypes.default.string,
+  selectedId: _propTypes.default.string,
+  withSelectedIcon: _propTypes.default.bool
+};
+var _default = SelectOption;
+exports.default = _default;

package/dist/elements/SelectOption/SelectOption.test.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _SelectOption = _interopRequireDefault(require("./SelectOption"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+var renderComponent = function renderComponent(props) {
+  return (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, _objectSpread({}, props)));
+};
+
+jest.mock('igz-controls/images/checkbox-unchecked.svg', function () {
+  return {
+    ReactComponent: 'unchecked-icon'
+  };
+});
+jest.mock('igz-controls/images/checkbox-checked.svg', function () {
+  return {
+    ReactComponent: 'unchecked-icon'
+  };
+});
+describe('SelectOption component', function () {
+  var wrapper;
+  beforeEach(function () {
+    var props = {
+      item: {
+        label: 'Test1',
+        id: 'test1',
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: "icon"
+        }),
+        subLabel: 'Test1'
+      },
+      selectType: ''
+    };
+    wrapper = renderComponent(props);
+  });
+  afterEach(_react2.cleanup);
+  it('renders without crashing', function () {
+    expect(wrapper.queryByTestId('select-option')).not.toBeNull();
+  });
+  it('should display checkbox inside option if props selectType is "checkbox"', function () {
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      selectType: "checkbox",
+      selectedId: "test1"
+    }));
+    expect(wrapper.queryByTestId('select-checkbox')).not.toBeNull();
+  });
+  it('should display select icon if it exists in the props "item"', function () {
+    expect(wrapper.getByTestId('select-icon')).not.toBeNull();
+  });
+  it('should won\'t call onClick callback if props disable set to "true"', function () {
+    var mockCLick = jest.fn();
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      onCLick: mockCLick,
+      selectType: "test1",
+      disabled: true
+    }));
+    var selectOption = wrapper.getByTestId('select-option');
+
+    _react2.fireEvent.click(selectOption);
+
+    expect(mockCLick).toHaveBeenCalledTimes(0);
+  });
+  it('should display subLabel if it exists in props item', function () {
+    expect(wrapper.queryByTestId('tooltip-wrapper')).not.toBeNull();
+  });
+  it('should add class "disabled" to SelectOption if props disabled set to "true"', function () {
+    wrapper.rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOption.default, {
+      item: {
+        label: 'Test1',
+        id: 'test1'
+      },
+      selectType: "test1",
+      disabled: true
+    }));
+    var selectOption = wrapper.getByTestId('select-option');
+    expect(selectOption.className).toMatch('disabled');
+  });
+});

package/dist/elements/SelectOption/selectOption.scss

@@ -0,0 +1,61 @@
+@import '../../scss/colors';
+@import '../../scss/mixins';
+
+.select {
+  &__icon {
+    display: flex;
+    margin-right: 10px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 49px;
+    padding: 0 15px;
+
+    &.hidden {
+      display: none;
+    }
+
+    .checkbox {
+      flex: 1;
+      height: 100%;
+
+      svg {
+        margin: 0;
+      }
+    }
+
+    &:hover {
+      background-color: $alabaster;
+      cursor: pointer;
+    }
+
+    .status {
+      margin: 0 10px;
+    }
+
+    .all {
+      margin: 0;
+
+      @include statusState(none);
+    }
+
+    .label-row {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .checkmark {
+      margin: 0 0 0 10px;
+
+      path {
+        fill: $chateauGreen;
+      }
+    }
+  }
+}

package/dist/elements/ValidationTemplate/ValidationTemplate.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _success_done = require("../../images/success_done.svg");
+
+var _close = require("../../images/close.svg");
+
+require("./ValidationTemplate.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ValidationTemplate = function ValidationTemplate(_ref) {
+  var valid = _ref.valid,
+      validationMessage = _ref.validationMessage;
+  var validationClasses = (0, _classnames.default)('validation-option', valid && 'text-muted');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+    className: validationClasses,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: "validation-option__icon",
+      children: valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_success_done.ReactComponent, {
+        className: "validation-option__icon_valid"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {
+        className: "validation-option__icon_invalid"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: validationMessage
+    })]
+  });
+};
+
+ValidationTemplate.propTypes = {
+  valid: _propTypes.default.bool.isRequired,
+  validationMessage: _propTypes.default.string.isRequired
+};
+var _default = ValidationTemplate;
+exports.default = _default;

package/dist/elements/ValidationTemplate/ValidationTemplate.scss

@@ -0,0 +1,36 @@
+@import '../../scss/colors';
+
+.validation-option {
+  display: flex;
+  align-items: flex-start;
+  margin: 0.6rem 0;
+  padding: 0 1rem;
+  font-size: 0.875rem;
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 0.5rem;
+
+    &_valid {
+      width: 14px;
+      height: 15px;
+
+      path {
+        fill: $brightTurquoise;
+      }
+    }
+
+    &_invalid {
+      width: 12px;
+      height: 12px;
+
+      path {
+        fill: $amaranth;
+      }
+    }
+  }
+}

package/dist/elements/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OptionsMenu", {
+  enumerable: true,
+  get: function get() {
+    return _OptionsMenu.default;
+  }
+});
+Object.defineProperty(exports, "SelectOption", {
+  enumerable: true,
+  get: function get() {
+    return _SelectOption.default;
+  }
+});
+Object.defineProperty(exports, "ValidationTemplate", {
+  enumerable: true,
+  get: function get() {
+    return _ValidationTemplate.default;
+  }
+});
+
+var _OptionsMenu = _interopRequireDefault(require("./OptionsMenu/OptionsMenu"));
+
+var _SelectOption = _interopRequireDefault(require("./SelectOption/SelectOption"));
+
+var _ValidationTemplate = _interopRequireDefault(require("./ValidationTemplate/ValidationTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDetectOutsideClick", {
+  enumerable: true,
+  get: function get() {
+    return _useDetectOutsideClick.useDetectOutsideClick;
+  }
+});
+
+var _useDetectOutsideClick = require("./useDetectOutsideClick");

package/dist/hooks/useDetectOutsideClick.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDetectOutsideClick = void 0;
+
+var _react = require("react");
+
+/**
+ * Hook for handling closing when clicking outside of an element
+ * @function useDetectOutsideClick
+ * @param {React.node} ref
+ * @param {function} handler A callback function to use on outside click
+ */
+var useDetectOutsideClick = function useDetectOutsideClick(ref, handler) {
+  (0, _react.useEffect)(function () {
+    var onClick = function onClick(e) {
+      e.stopPropagation(); // If the active element exists and is clicked outside of
+
+      if (ref.current !== null && !ref.current.contains(e.target)) {
+        handler(e);
+      }
+    }; // If the item is active (ie open) then listen for clicks outside
+
+
+    window.addEventListener('click', onClick);
+    return function () {
+      window.removeEventListener('click', onClick);
+    };
+  }, [ref, handler]);
+};
+
+exports.useDetectOutsideClick = useDetectOutsideClick;

package/dist/index.js

@@ -5,20 +5,28 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.types = exports.constants = exports.components = void 0;
+exports.types = exports.hooks = exports.elements = exports.constants = exports.components = void 0;
 
 var components = _interopRequireWildcard(require("./components"));
 
 exports.components = components;
 
-var types = _interopRequireWildcard(require("./types"));
-
-exports.types = types;
-
 var constants = _interopRequireWildcard(require("./constants"));
 
 exports.constants = constants;
 
+var elements = _interopRequireWildcard(require("./elements"));
+
+exports.elements = elements;
+
+var hooks = _interopRequireWildcard(require("./hooks"));
+
+exports.hooks = hooks;
+
+var types = _interopRequireWildcard(require("./types"));
+
+exports.types = types;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }