iguazio.dashboard-react-controls 0.0.6 → 0.0.7

package/dist/components/Tip/tip.scss

@@ -0,0 +1,89 @@
+@import '../../scss/colors';
+
+$arrowLength: 10px;
+$iconLength: 16px;
+$arrowOffset: 20px;
+
+.tip-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.tip {
+  position: fixed;
+  display: block;
+  padding: 10px;
+  color: $white;
+  white-space: pre-line;
+  background: $primary;
+  border-radius: 4px;
+  z-index: 9;
+
+  &_top {
+    &::after {
+      bottom: calc(-#{$arrowLength} / 2);
+    }
+  }
+
+  &_bottom {
+    &::after {
+      top: calc(-#{$arrowLength} / 2);
+    }
+  }
+
+  &_left {
+    &::after {
+      right: calc(#{$arrowOffset});
+    }
+  }
+
+  &_right {
+    &::after {
+      left: calc(#{$arrowOffset});
+    }
+  }
+
+  &_small {
+    min-width: 100px;
+    max-width: 250px;
+  }
+
+  &_big {
+    min-width: 250px;
+    max-width: 400px;
+  }
+
+  &::after {
+    position: absolute;
+    width: $arrowLength;
+    height: $arrowLength;
+    background: $primary;
+    transform: rotate(45deg);
+    content: '';
+  }
+}
+
+.fade-enter {
+  opacity: 0;
+}
+
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 200ms;
+}
+
+.fade-exit {
+  opacity: 1;
+}
+
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+:export {
+  arrowlength: $arrowLength;
+  iconlength: $iconLength;
+  arrowoffset: $arrowOffset;
+}

package/dist/components/Wizard/Wizard.js

@@ -211,9 +211,11 @@ var Wizard = function Wizard(_ref) {
             activeStepNumber: activeStepNumber,
             jumpToStep: jumpToStep,
             steps: stepsMenu
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "wizard-form__content",
-            children: activeStepTemplate
+            children: [activeStepTemplate, /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+              children: JSON.stringify(FormState, null, 2)
+            })]
           })]
         });
       }

package/dist/components/index.js

@@ -15,6 +15,24 @@ Object.defineProperty(exports, "ConfirmDialog", {
     return _ConfirmDialog.default;
   }
 });
+Object.defineProperty(exports, "FormCheckBox", {
+  enumerable: true,
+  get: function get() {
+    return _FormCheckBox.default;
+  }
+});
+Object.defineProperty(exports, "FormInput", {
+  enumerable: true,
+  get: function get() {
+    return _FormInput.default;
+  }
+});
+Object.defineProperty(exports, "FormSelect", {
+  enumerable: true,
+  get: function get() {
+    return _FormSelect.default;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
@@ -39,6 +57,12 @@ Object.defineProperty(exports, "TextTooltipTemplate", {
     return _TextTooltipTemplate.default;
   }
 });
+Object.defineProperty(exports, "Tip", {
+  enumerable: true,
+  get: function get() {
+    return _Tip.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function get() {
@@ -56,6 +80,12 @@ var _Button = _interopRequireDefault(require("./Button/Button"));
 
 var _ConfirmDialog = _interopRequireDefault(require("./ConfirmDialog/ConfirmDialog"));
 
+var _FormCheckBox = _interopRequireDefault(require("./FormCheckBox/FormCheckBox"));
+
+var _FormInput = _interopRequireDefault(require("./FormInput/FormInput"));
+
+var _FormSelect = _interopRequireDefault(require("./FormSelect/FormSelect"));
+
 var _Modal = _interopRequireDefault(require("./Modal/Modal"));
 
 var _PopUpDialog = _interopRequireDefault(require("./PopUpDialog/PopUpDialog"));
@@ -64,6 +94,8 @@ var _RoundedIcon = _interopRequireDefault(require("./RoundedIcon/RoundedIcon"));
 
 var _TextTooltipTemplate = _interopRequireDefault(require("./TooltipTemplate/TextTooltipTemplate"));
 
+var _Tip = _interopRequireDefault(require("./Tip/Tip"));
+
 var _Tooltip = _interopRequireDefault(require("./Tooltip/Tooltip"));
 
 var _Wizard = _interopRequireDefault(require("./Wizard/Wizard"));

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,64 @@
+"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 = function OptionsMenu(_ref) {
+  var children = _ref.children,
+      parentElement = _ref.parentElement,
+      show = _ref.show,
+      timeout = _ref.timeout;
+
+  var _ref2 = parentElement.current ? parentElement.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: parentElement,
+        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: false
+};
+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/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;