iguazio.dashboard-react-controls 0.0.3 → 0.0.6

package/dist/components/Backdrop/Backdrop.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 _reactDom = require("react-dom");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+require("./Backdrop.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Backdrop = function Backdrop(_ref) {
+  var _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? 300 : _ref$duration,
+      show = _ref.show,
+      onClose = _ref.onClose;
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+    in: show,
+    timeout: duration,
+    classNames: "backdrop-transition",
+    mountOnEnter: true,
+    unmountOnExit: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "backdrop",
+      onClick: onClose
+    })
+  }), document.getElementById('overlay_container'));
+};
+
+Backdrop.defaultProps = {
+  duration: 300,
+  show: false
+};
+Backdrop.propTypes = {
+  show: _propTypes.default.bool.isRequired
+};
+var _default = Backdrop;
+exports.default = _default;

package/dist/components/Backdrop/Backdrop.scss

@@ -0,0 +1,32 @@
+@import '../../scss/colors';
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: $black;
+  z-index: 9;
+
+  &-transition {
+    &-enter {
+      opacity: 0;
+    }
+
+    &-enter-active,
+    &-enter-done {
+      opacity: 0.5;
+      transition: opacity 0.3s ease-in-out;
+    }
+
+    &-exit {
+      opacity: 0.5;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+}

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,100 @@
+"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 _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _PopUpDialog = _interopRequireDefault(require("../PopUpDialog/PopUpDialog"));
+
+var _types = require("../../types");
+
+require("./confirmDialog.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ConfirmDialog = function ConfirmDialog(_ref) {
+  var cancelButton = _ref.cancelButton,
+      className = _ref.className,
+      closePopUp = _ref.closePopUp,
+      confirmButton = _ref.confirmButton,
+      customPosition = _ref.customPosition,
+      header = _ref.header,
+      isOpen = _ref.isOpen,
+      message = _ref.message,
+      messageOnly = _ref.messageOnly,
+      onResolve = _ref.onResolve;
+  var messageClassNames = (0, _classnames.default)('confirm-dialog__message', messageOnly && 'confirm-dialog__message-only');
+
+  var handleCancelDialog = function handleCancelDialog(event) {
+    onResolve && onResolve();
+    cancelButton.handler && cancelButton.handler(event);
+  };
+
+  var handleCloseDialog = function handleCloseDialog(event) {
+    onResolve && onResolve();
+    closePopUp && closePopUp(event);
+  };
+
+  var handleConfirmDialog = function handleConfirmDialog(event) {
+    onResolve && onResolve();
+    confirmButton.handler(event);
+  };
+
+  return isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
+    className: className,
+    closePopUp: handleCloseDialog,
+    customPosition: customPosition,
+    headerText: header,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "confirm-dialog",
+      children: [message && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: messageClassNames,
+        children: message
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "confirm-dialog__btn-container",
+        children: [cancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          className: "pop-up-dialog__btn_cancel",
+          label: cancelButton.label,
+          onClick: handleCancelDialog,
+          variant: cancelButton.variant
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          label: confirmButton.label,
+          onClick: handleConfirmDialog,
+          variant: confirmButton.variant
+        })]
+      })]
+    })
+  });
+};
+
+ConfirmDialog.defaultProps = {
+  cancelButton: null,
+  className: '',
+  customPosition: {},
+  header: '',
+  message: '',
+  messageOnly: false
+};
+ConfirmDialog.propTypes = {
+  cancelButton: _types.CONFIRM_DIALOG_CANCEL_BUTTON,
+  className: _propTypes.default.string,
+  closePopUp: _propTypes.default.func,
+  confirmButton: _types.CONFIRM_DIALOG_SUBMIT_BUTTON.isRequired,
+  customPosition: _propTypes.default.object,
+  header: _propTypes.default.string,
+  message: _propTypes.default.string,
+  messageOnly: _propTypes.default.bool
+};
+var _default = ConfirmDialog;
+exports.default = _default;

package/dist/components/ConfirmDialog/confirmDialog.scss

@@ -0,0 +1,19 @@
+@import '../../scss/colors';
+
+.confirm-dialog {
+  color: $primary;
+
+  &__message {
+    font-size: 15px;
+
+    &-only {
+      font-size: 22px;
+    }
+  }
+
+  &__btn-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDom = require("react-dom");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Backdrop = _interopRequireDefault(require("../Backdrop/Backdrop"));
+
+var _components = require("igz-controls/components");
+
+var _constants = require("../../constants");
+
+var _types = require("../../types");
+
+var _close = require("igz-controls/images/close.svg");
+
+require("./Modal.scss");
+
+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 JSX_MODAL = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var actions = _ref.actions,
+      children = _ref.children,
+      className = _ref.className,
+      onClose = _ref.onClose,
+      size = _ref.size,
+      show = _ref.show,
+      title = _ref.title;
+  var modalClassNames = (0, _classnames.default)('modal', className, size && "modal-".concat(size));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
+      onClose: onClose,
+      show: show
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+      in: show,
+      timeout: 300,
+      classNames: "modal-transition",
+      unmountOnExit: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: modalClassNames,
+        "data-testid": "modal",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "modal__header-button",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RoundedIcon, {
+            onClick: onClose,
+            tooltipText: "Close",
+            "data-testid": "pop-up-close-btn",
+            ref: ref,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_close.ReactComponent, {})
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "modal__content",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "modal__header",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+              className: "modal__header-title",
+              children: title
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "modal__body",
+            children: children
+          }), actions && actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "modal__footer",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "modal__footer-actions",
+              children: actions.map(function (action, idx) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: action
+                }, idx);
+              })
+            })
+          })]
+        })]
+      })
+    })]
+  });
+});
+
+var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(JSX_MODAL, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref
+  })), document.getElementById('overlay_container'));
+});
+
+Modal.defaultProps = {
+  actions: [],
+  show: false,
+  size: _constants.MODAL_MD,
+  title: ''
+};
+Modal.propTypes = {
+  actions: _propTypes.default.array,
+  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.object, _propTypes.default.node, _propTypes.default.string]).isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  show: _propTypes.default.bool.isRequired,
+  size: _types.MODAL_SIZES,
+  title: _propTypes.default.string
+};
+var _default = Modal;
+exports.default = _default;

package/dist/components/Modal/Modal.scss

@@ -0,0 +1,121 @@
+@import '../../scss/variables';
+@import '../../scss/colors';
+@import '../../scss/borders';
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 700px;
+  height: 660px;
+  max-width: 96%;
+  max-height: 96%;
+  outline: 0;
+  transform: translate(-50%, -50%);
+  z-index: 9;
+
+  @media screen and (min-width: 1200px) {
+    width: 1000px;
+
+    &-sm {
+      width: 700px;
+    }
+
+    &-lg {
+      width: 1400px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    position: relative;
+    padding-bottom: 1rem;
+    min-height: inherit;
+    height: 100%;
+    width: 100%;
+    max-height: 100%;
+    background-color: $white;
+    border-radius: $modalBorderRadius;
+    box-shadow: 0 6px 26px rgba($black, 0.2);
+    text-align: left;
+  }
+
+  &__header {
+    position: relative;
+    padding: 1.5rem 2rem;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    border-bottom: $primaryBorder;
+
+    &-title {
+      color: $primary;
+      font-size: 2em;
+      font-weight: 400;
+      text-transform: capitalize;
+      margin: 0;
+    }
+
+    &-button {
+      position: absolute;
+      top: 10px;
+      right: 5px;
+    }
+  }
+
+  &__body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex: 1 0;
+    flex-basis: 0;
+    padding: 1.5rem 2rem 0;
+    margin-bottom: 1rem;
+  }
+
+  &__footer {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-shrink: 0;
+    justify-content: space-between;
+    padding: 0 2rem;
+    min-height: 50px;
+
+    &-actions {
+      display: flex;
+      flex: 1 0 auto;
+      justify-content: flex-end;
+      align-items: center;
+
+      & > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &-transition {
+    &-enter {
+      opacity: 0;
+      transform: translate(-50%, calc(100vh));
+      transition: all 0.3s ease-in-out;
+    }
+
+    &-enter-active,
+    &-enter-done {
+      opacity: 1;
+      transform: translate(-50%, -50%);
+    }
+
+    &-exit {
+      opacity: 1;
+      transform: translate(-50%, -50%);
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: translate(-50%, -70%);
+      transition: all 0.3s ease-in-out;
+    }
+  }
+}

package/dist/components/PopUpDialog/PopUpDialog.js

@@ -59,7 +59,7 @@ var PopUpDialog = function PopUpDialog(_ref) {
   var popUpOverlayRef = (0, _react.useRef)(null);
   var popUpClassNames = (0, _classnames.default)(className, 'pop-up-dialog__overlay', customPosition.element && 'custom-position');
   var calculateCustomPopUpPosition = (0, _react.useCallback)(function () {
-    if (customPosition.element) {
+    if (customPosition && customPosition.element) {
       var elementRect = customPosition.element.current.getBoundingClientRect();
       var popUpRect = popUpOverlayRef.current.getBoundingClientRect();
 

package/dist/components/PopUpDialog/popUpDialog.scss

@@ -8,7 +8,7 @@
   padding: 20px;
   overflow-y: auto;
   background-color: $white;
-  border-radius: $mainBorderRadius;
+  border-radius: $modalBorderRadius;
   box-shadow: 0 6px 26px rgba($black, 0.2);
 
   &__buttons_wrapper {
@@ -25,7 +25,7 @@
     width: 100%;
     height: 100%;
     background: $mineshaftTwo;
-    z-index: 999;
+    z-index: 9;
 
     &.custom-position {
       width: auto;
@@ -40,7 +40,7 @@
     align-items: baseline;
     justify-content: space-between;
     min-height: 30px;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
 
     &-text {
       width: 100%;

package/dist/components/Tooltip/tooltip.scss

@@ -5,5 +5,5 @@
   line-height: 1.4;
   display: flex;
   max-width: 400px;
-  z-index: 999;
+  z-index: 9;
 }

package/dist/components/Wizard/Wizard.js

@@ -0,0 +1,251 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactFinalForm = require("react-final-form");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _ConfirmDialog = _interopRequireDefault(require("../ConfirmDialog/ConfirmDialog"));
+
+var _Modal = _interopRequireDefault(require("../Modal/Modal"));
+
+var _WizardSteps = _interopRequireDefault(require("./WizardSteps/WizardSteps"));
+
+var _constants = require("../../constants");
+
+var _types = require("../../types");
+
+var _common = require("../../utils/common.util");
+
+require("./Wizard.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+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; }
+
+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; }
+
+var Wizard = function Wizard(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      confirmClose = _ref.confirmClose,
+      initialValues = _ref.initialValues,
+      isWizardOpen = _ref.isWizardOpen,
+      onWizardResolve = _ref.onWizardResolve,
+      onWizardSubmit = _ref.onWizardSubmit,
+      size = _ref.size,
+      title = _ref.title,
+      stepsConfig = _ref.stepsConfig,
+      submitButtonLabel = _ref.submitButtonLabel;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeStepNumber = _useState2[0],
+      setActiveStepNumber = _useState2[1];
+
+  var activeStepTemplate = (0, _react.useMemo)(function () {
+    return _react.default.Children.toArray(children)[activeStepNumber];
+  }, [children, activeStepNumber]);
+  var totalSteps = (0, _react.useMemo)(function () {
+    return _react.default.Children.count(children) - 1 || 0;
+  }, [children]);
+  var hasSteps = (0, _react.useMemo)(function () {
+    return stepsConfig.some(function (step) {
+      return step.id;
+    });
+  }, [stepsConfig]);
+  var isLastStep = (0, _react.useMemo)(function () {
+    return activeStepNumber === totalSteps;
+  }, [activeStepNumber, totalSteps]);
+  var stepsMenu = (0, _react.useMemo)(function () {
+    return (stepsConfig === null || stepsConfig === void 0 ? void 0 : stepsConfig.map(function (step) {
+      return {
+        id: step.id,
+        label: step.label
+      };
+    })) || [];
+  }, [stepsConfig]);
+  var wizardClasses = (0, _classnames.default)('wizard-form', className, hasSteps && 'wizard-form__with-steps');
+
+  var goToNextStep = function goToNextStep() {
+    setActiveStepNumber(function (prevStep) {
+      return Math.min(++prevStep, totalSteps);
+    });
+  };
+
+  var goToPreviousStep = function goToPreviousStep() {
+    return setActiveStepNumber(function (prevStep) {
+      return Math.max(--prevStep, 0);
+    });
+  };
+
+  var jumpToStep = function jumpToStep(idx) {
+    return setActiveStepNumber(idx);
+  };
+
+  var _handleOnClose = function handleOnClose(FormState) {
+    if (confirmClose && FormState && FormState.dirty) {
+      (0, _common.openPopUp)(_ConfirmDialog.default, {
+        cancelButton: {
+          label: 'Cancel',
+          variant: _constants.TERTIARY_BUTTON
+        },
+        confirmButton: {
+          handler: onWizardResolve,
+          label: 'OK',
+          variant: _constants.SECONDARY_BUTTON
+        },
+        header: 'Are you sure?',
+        message: 'All changes will be lost'
+      });
+    } else {
+      onWizardResolve();
+    }
+  };
+
+  var handleSubmit = function handleSubmit(values) {
+    if (isLastStep) {
+      onWizardSubmit(values);
+    } else {
+      goToNextStep();
+    }
+  };
+
+  var getDefaultActions = function getDefaultActions(FormState) {
+    if (hasSteps) {
+      return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: goToPreviousStep,
+        disabled: activeStepNumber === 0,
+        label: "Back",
+        type: "button"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: FormState.handleSubmit,
+        disabled: FormState.submitting,
+        label: isLastStep ? submitButtonLabel : 'Next',
+        type: "button",
+        variant: _constants.SECONDARY_BUTTON
+      })];
+    } else {
+      return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: function onClick() {
+          return _handleOnClose(FormState);
+        },
+        label: "Cancel",
+        type: "button"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: FormState.handleSubmit,
+        disabled: FormState.submitting,
+        label: submitButtonLabel,
+        type: "button",
+        variant: _constants.SECONDARY_BUTTON
+      })];
+    }
+  };
+
+  var renderModalActions = function renderModalActions(FormState) {
+    var _stepsConfig$activeSt;
+
+    if ((_stepsConfig$activeSt = stepsConfig[activeStepNumber]) !== null && _stepsConfig$activeSt !== void 0 && _stepsConfig$activeSt.getActions) {
+      return stepsConfig[activeStepNumber].getActions({
+        FormState: FormState,
+        goToNextStep: goToNextStep,
+        goToPreviousStep: goToPreviousStep,
+        handleOnClose: function handleOnClose() {
+          return _handleOnClose(FormState);
+        }
+      }).map(function (action) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, action));
+      });
+    } else {
+      return getDefaultActions(FormState);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
+      initialValues: initialValues,
+      onSubmit: handleSubmit,
+      children: function children(FormState) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
+          actions: renderModalActions(FormState),
+          className: wizardClasses,
+          onClose: function onClose() {
+            return _handleOnClose(FormState);
+          },
+          show: isWizardOpen,
+          size: size,
+          title: title,
+          children: [hasSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, {
+            activeStepNumber: activeStepNumber,
+            jumpToStep: jumpToStep,
+            steps: stepsMenu
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "wizard-form__content",
+            children: activeStepTemplate
+          })]
+        });
+      }
+    })
+  });
+};
+
+Wizard.defaultProps = {
+  className: '',
+  confirmClose: false,
+  initialValues: {},
+  size: _constants.MODAL_MD,
+  stepsConfig: [],
+  submitButtonLabel: 'Submit'
+};
+Wizard.propsTypes = {
+  className: _propTypes.default.string,
+  confirmClose: _propTypes.default.bool,
+  initialValues: _propTypes.default.object,
+  isOpen: _propTypes.default.bool.isRequired,
+  onResolve: _propTypes.default.func.isRequired,
+  onSubmit: _propTypes.default.func.isRequired,
+  size: _types.MODAL_SIZES,
+  title: _propTypes.default.string.isRequired,
+  stepsConfig: _types.WIZARD_STEPS_CONFIG,
+  submitButtonLabel: _propTypes.default.string
+};
+
+Wizard.Step = function (_ref2) {
+  var children = _ref2.children;
+  return children;
+};
+
+var _default = Wizard;
+exports.default = _default;

package/dist/components/Wizard/Wizard.scss

@@ -0,0 +1,17 @@
+.wizard-form {
+  &__with-steps {
+    .modal__body {
+      display: flex;
+      flex-flow: row nowrap;
+      overflow: hidden;
+      padding-right: 0;
+    }
+
+    .wizard-form__content {
+      overflow-y: auto;
+      height: 100%;
+      width: 100%;
+      padding-right: 2rem;
+    }
+  }
+}

package/dist/components/Wizard/WizardSteps/WizardSteps.js

@@ -0,0 +1,65 @@
+"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 _Button = _interopRequireDefault(require("../../Button/Button"));
+
+var _types = require("../../../types");
+
+require("./WizardSteps.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var WizardSteps = function WizardSteps(_ref) {
+  var activeStepNumber = _ref.activeStepNumber,
+      jumpToStep = _ref.jumpToStep,
+      steps = _ref.steps;
+
+  var getStepClassNames = function getStepClassNames(idx) {
+    return (0, _classnames.default)('wizard-steps__item', idx === activeStepNumber && 'active', idx < activeStepNumber && 'valid');
+  };
+
+  var handleJumpToStep = function handleJumpToStep(event, idx) {
+    event.preventDefault();
+    jumpToStep(idx);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "wizard-steps",
+    children: steps.map(function (_ref2, idx) {
+      var id = _ref2.id,
+          label = _ref2.label;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        className: getStepClassNames(idx),
+        disabled: idx > activeStepNumber,
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "wizard-steps__indicator",
+          children: idx + 1
+        }),
+        label: label,
+        onClick: function onClick(e) {
+          return handleJumpToStep(e, idx);
+        }
+      }, id);
+    })
+  });
+};
+
+WizardSteps.propTypes = {
+  activeStepNumber: _propTypes.default.number.isRequired,
+  jumpToStep: _propTypes.default.func.isRequired,
+  steps: _types.WIZARD_STEPS_CONFIG
+};
+var _default = WizardSteps;
+exports.default = _default;

package/dist/components/Wizard/WizardSteps/WizardSteps.scss

@@ -0,0 +1,67 @@
+@import '../../../scss/variables';
+@import '../../../scss/colors';
+@import '../../../scss/borders';
+
+.wizard-steps {
+  background-color: $white;
+  min-width: 260px;
+  margin-right: 1rem;
+
+  &__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    padding: 10px;
+    width: 36px;
+    height: 36px;
+  }
+
+  &__item:not(:last-child) {
+    margin-bottom: 10px;
+  }
+
+  &__item {
+    justify-content: flex-start;
+    background-color: inherit;
+    border: 0;
+    border-radius: 8px;
+    font-size: 1em;
+    padding: 8px;
+    min-height: 52px;
+    width: 100%;
+
+    &.active {
+      background-color: $malibuTwo;
+      color: $cornflowerBlue;
+
+      .wizard-steps__indicator {
+        border-color: transparent;
+        color: $white;
+        background-color: $malibu;
+      }
+    }
+
+    &.valid {
+      color: $primary;
+
+      .wizard-steps__indicator {
+        border-color: $malibu;
+        color: $malibu;
+        background-color: inherit;
+      }
+    }
+
+    &:disabled {
+      border: 0;
+      color: $spunPearl;
+
+      .wizard-steps__indicator {
+        border-color: $spunPearl;
+        color: $spunPearl;
+        background-color: inherit;
+      }
+    }
+  }
+}

package/dist/components/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "Button", {
     return _Button.default;
   }
 });
+Object.defineProperty(exports, "ConfirmDialog", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmDialog.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.default;
+  }
+});
 Object.defineProperty(exports, "PopUpDialog", {
   enumerable: true,
   get: function get() {
@@ -33,9 +45,19 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "Wizard", {
+  enumerable: true,
+  get: function get() {
+    return _Wizard.default;
+  }
+});
 
 var _Button = _interopRequireDefault(require("./Button/Button"));
 
+var _ConfirmDialog = _interopRequireDefault(require("./ConfirmDialog/ConfirmDialog"));
+
+var _Modal = _interopRequireDefault(require("./Modal/Modal"));
+
 var _PopUpDialog = _interopRequireDefault(require("./PopUpDialog/PopUpDialog"));
 
 var _RoundedIcon = _interopRequireDefault(require("./RoundedIcon/RoundedIcon"));
@@ -44,4 +66,6 @@ var _TextTooltipTemplate = _interopRequireDefault(require("./TooltipTemplate/Tex
 
 var _Tooltip = _interopRequireDefault(require("./Tooltip/Tooltip"));
 
+var _Wizard = _interopRequireDefault(require("./Wizard/Wizard"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = 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.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';
@@ -23,4 +23,12 @@ exports.INTERNAL_SERVER_ERROR_STATUS_CODE = INTERNAL_SERVER_ERROR_STATUS_CODE;
 var CONFLICT_ERROR_STATUS_CODE = 409;
 exports.CONFLICT_ERROR_STATUS_CODE = CONFLICT_ERROR_STATUS_CODE;
 var FORBIDDEN_ERROR_STATUS_CODE = 403;
-exports.FORBIDDEN_ERROR_STATUS_CODE = FORBIDDEN_ERROR_STATUS_CODE;
+/*=========== MODAL =============*/
+
+exports.FORBIDDEN_ERROR_STATUS_CODE = FORBIDDEN_ERROR_STATUS_CODE;
+var MODAL_SM = 'sm';
+exports.MODAL_SM = MODAL_SM;
+var MODAL_MD = 'md';
+exports.MODAL_MD = MODAL_MD;
+var MODAL_LG = 'lg';
+exports.MODAL_LG = MODAL_LG;

package/dist/images/checkmark2.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 1.99984L6 13.9998L0.5 8.49984L1.91 7.08984L6 11.1698L16.59 0.589844L18 1.99984Z" fill="#7F7989"/>
+</svg>

package/dist/scss/colors.scss

@@ -33,6 +33,7 @@ $javaLight: #1fcc9e;
 $javaTwo: rgba($java, 0.24);
 $kimberly: #6d5e92;
 $malibu: #869cff;
+$malibuTwo: rgba($malibu, 0.12);
 $maroonFlash: #bc2553;
 $mercury: #e7e7e7;
 $mineshaft: #333;

package/dist/scss/mixins.scss

@@ -722,6 +722,11 @@
       }
     }
 
+    .disabled {
+      color: $doveGray;
+      cursor: not-allowed;
+    }
+
     .no-border {
       border-bottom: none;
 

package/dist/scss/variables.scss

@@ -3,6 +3,7 @@
 $heightRowTable: 55px;
 $leftRowOffset: 49px;
 $mainBorderRadius: 4px;
+$modalBorderRadius: 8px;
 
 $navbarWidth: 245px;
 $navbarTogglerWidth: 35px;

package/dist/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.POP_UP_CUSTOM_POSITION = exports.BUTTON_VARIANTS = void 0;
+exports.WIZARD_STEPS_CONFIG = exports.POP_UP_CUSTOM_POSITION = exports.MODAL_SIZES = exports.CONFIRM_DIALOG_SUBMIT_BUTTON = exports.CONFIRM_DIALOG_CANCEL_BUTTON = exports.BUTTON_VARIANTS = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -20,4 +20,32 @@ var POP_UP_CUSTOM_POSITION = _propTypes.default.shape({
   position: _propTypes.default.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right'])
 });
 
-exports.POP_UP_CUSTOM_POSITION = POP_UP_CUSTOM_POSITION;
+exports.POP_UP_CUSTOM_POSITION = POP_UP_CUSTOM_POSITION;
+
+var MODAL_SIZES = _propTypes.default.oneOf([_constants.MODAL_SM, _constants.MODAL_MD, _constants.MODAL_LG]);
+
+exports.MODAL_SIZES = MODAL_SIZES;
+
+var CONFIRM_DIALOG_CANCEL_BUTTON = _propTypes.default.shape({
+  handler: _propTypes.default.func,
+  label: _propTypes.default.string.isRequired,
+  variant: _propTypes.default.string.isRequired
+});
+
+exports.CONFIRM_DIALOG_CANCEL_BUTTON = CONFIRM_DIALOG_CANCEL_BUTTON;
+
+var CONFIRM_DIALOG_SUBMIT_BUTTON = _propTypes.default.shape({
+  handler: _propTypes.default.func.isRequired,
+  label: _propTypes.default.string.isRequired,
+  variant: _propTypes.default.string.isRequired
+});
+
+exports.CONFIRM_DIALOG_SUBMIT_BUTTON = CONFIRM_DIALOG_SUBMIT_BUTTON;
+
+var WIZARD_STEPS_CONFIG = _propTypes.default.arrayOf(_propTypes.default.shape({
+  id: _propTypes.default.string,
+  label: _propTypes.default.string,
+  getActions: _propTypes.default.func
+}));
+
+exports.WIZARD_STEPS_CONFIG = WIZARD_STEPS_CONFIG;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iguazio.dashboard-react-controls",
-    "version": "0.0.3",
+    "version": "0.0.6",
     "description": "Collection of resources (such as CSS styles, fonts and images) and ReactJS 17.x components to share among different Iguazio React repos.",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -96,5 +96,8 @@
             "last 1 safari version"
         ]
     },
-    "dependencies": {}
+    "dependencies": {
+        "final-form": "^4.20.7",
+        "react-final-form": "^6.5.9"
+    }
 }