+ {withQuickActions && (
+
+ {quickActions.map(
+ mainAction =>
+ !mainAction.hidden && (
+ mainAction.onClick(dataItem)}
+ tooltipText={mainAction.label}
+ key={mainAction.label}
+ >
+ {mainAction.icon}
+
+ )
+ )}
+
+ )}
+ {actionMenu.length > 0 && (
+
+
+ {isShowMenu && (
+
+
+ {actionMenu.map(
+ (menuItem, idx) =>
+ !menuItem.hidden && (
+
+
+ )}
+
+ )}
+
!chip.disabled && editConfig.isEdit && focusChip(event)}
+ ref={refInputContainer}
+ >
+
+ {!chipData.isKeyOnly &&
:
}
+ {!chipData.isKeyOnly && (
+
+ )}
+
+
!chip.disabled && handleRemoveChip(event, chipIndex)}
+ >
+
+
+ {!chip.disabled &&
+ (editConfig.isKeyFocused ? !isEmpty(chipData.key) : !isEmpty(chipData.value)) &&
+ editConfig.chipIndex === chipIndex &&
+ !isEmpty(get(meta, ['error', editConfig.chipIndex, selectedInput], [])) && (
+
+ {getValidationRules()}
+
+ )}
+
+ {({ input }) => (
+
+ {label}
+
+ ) : (
+ {label}
+ )}
+
+ )}
+
+ )
+}
+
+FormRadio.propTypes = {
+ className: PropTypes.string,
+ label: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ readOnly: PropTypes.bool,
+ tooltip: PropTypes.string
+}
+
+FormRadio = React.memo(FormRadio)
+
+export default FormRadio
diff --git a/src/igz-controls/components/FormRadio/FormRadio.scss b/src/igz-controls/components/FormRadio/FormRadio.scss
new file mode 100644
index 0000000000..49c4f09f85
--- /dev/null
+++ b/src/igz-controls/components/FormRadio/FormRadio.scss
@@ -0,0 +1,41 @@
+@use '../../scss/colors';
+@use '../../scss/mixins';
+
+.form-field-radio {
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-start;
+ color: colors.$primary;
+ margin-right: 15px;
+
+ &_readonly {
+ @include mixins.radioCheckReadonly;
+ }
+
+ input[type='radio'] {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+
+ @include mixins.radioCheckField;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ transform: scale(0);
+ transition: transform 0.2s ease-in-out;
+ box-shadow: inset 1em 1em currentColor;
+ }
+
+ &:checked {
+ &::before {
+ transform: scale(1);
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/components/FormRadio/FormRadio.stories.js b/src/igz-controls/components/FormRadio/FormRadio.stories.js
new file mode 100644
index 0000000000..10ebfae88f
--- /dev/null
+++ b/src/igz-controls/components/FormRadio/FormRadio.stories.js
@@ -0,0 +1,38 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import { Form } from 'react-final-form'
+
+import FormRadio from '/src/lib/components/FormRadio/FormRadio.jsx'
+
+export default {
+ title: 'Example/FormRadio',
+ component: FormRadio
+}
+
+const commonArgs = {
+ disabled: false,
+ label: 'label',
+ name: 'radio'
+}
+
+const Template = args =>
+
+export const Normal = Template.bind({})
+Normal.args = {
+ ...commonArgs
+}
diff --git a/src/igz-controls/components/FormSelect/FormSelect.jsx b/src/igz-controls/components/FormSelect/FormSelect.jsx
new file mode 100644
index 0000000000..cc086c7b4a
--- /dev/null
+++ b/src/igz-controls/components/FormSelect/FormSelect.jsx
@@ -0,0 +1,426 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Field, useField } from 'react-final-form'
+
+import ConfirmDialog from '../ConfirmDialog/ConfirmDialog'
+import PopUpDialog from '../PopUpDialog/PopUpDialog'
+import SelectOption from '../../elements/SelectOption/SelectOption'
+import TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'
+import Tooltip from '../Tooltip/Tooltip'
+
+import { DENSITY, SELECT_OPTIONS } from '../../types'
+import { TERTIARY_BUTTON } from '../../constants'
+
+import Caret from '../../images/dropdown.svg?react'
+
+import './formSelect.scss'
+
+let FormSelect = ({
+ className = '',
+ density = 'normal',
+ disabled = false,
+ hideSelectedOption = false,
+ label = '',
+ multiple = false,
+ name,
+ onChange = null,
+ options,
+ placeholder = '',
+ preventWidthOverflow = false,
+ required = false,
+ scrollToView = true,
+ search = false,
+ selectedItemAction = null,
+ tooltip = '',
+ withSelectedIcon = true,
+ withoutBorder = false
+}) => {
+ const { input, meta } = useField(name)
+ const [isInvalid, setIsInvalid] = useState(false)
+ const [isConfirmDialogOpen, setConfirmDialogOpen] = useState(false)
+ const [isOpen, setIsOpen] = useState(false)
+ const [searchValue, setSearchValue] = useState('')
+ const optionsListRef = useRef()
+ const popUpRef = useRef()
+ const selectRef = useRef()
+ const searchRef = useRef()
+ const { width: selectWidth } = selectRef?.current?.getBoundingClientRect() || {}
+
+ const selectWrapperClassNames = classNames(
+ 'form-field__wrapper',
+ `form-field__wrapper-${density}`,
+ disabled && 'form-field__wrapper-disabled',
+ isOpen && 'form-field__wrapper-active',
+ isInvalid && 'form-field__wrapper-invalid',
+ withoutBorder && 'without-border'
+ )
+
+ const selectLabelClassName = classNames(
+ 'form-field__label',
+ disabled && 'form-field__label-disabled'
+ )
+
+ const selectValueClassName = classNames(
+ 'form-field__select-value',
+ !input.value && 'form-field__select-placeholder'
+ )
+
+ const selectedOption = options.find(option => option.id === input.value)
+
+ const getFilteredOptions = useCallback(
+ options => {
+ return options.filter(option => {
+ return !search || option.label.toLowerCase().includes(searchValue.toLowerCase())
+ })
+ },
+ [search, searchValue]
+ )
+
+ const sortedOptionsList = useMemo(() => {
+ if (scrollToView) {
+ return getFilteredOptions(options)
+ }
+
+ const optionsList = [...options]
+
+ const selectedOption = optionsList.filter((option, idx, arr) => {
+ if (option.id === input.value) {
+ arr.splice(idx, 1)
+ return true
+ }
+ return false
+ })
+
+ return getFilteredOptions([...selectedOption, ...optionsList])
+ }, [input.value, getFilteredOptions, options, scrollToView])
+
+ const getSelectValue = () => {
+ if (!input.value || !input.value.length) {
+ return `Select Option${multiple ? 's' : ''}`
+ }
+
+ const multipleValue =
+ multiple && input.value.includes('all') && input.value.length > 1
+ ? options
+ .filter(option => option.id !== 'all')
+ .filter(option => input.value.includes(option.id))
+ .map(option => option.label)
+ .join(', ')
+ : options
+ .filter(option => input.value.includes(option.id))
+ .map(option => option.label)
+ .join(', ')
+
+ return !multiple
+ ? selectedOption?.label
+ : input.value.length <= 2
+ ? multipleValue
+ : `${input.value.length} items selected`
+ }
+
+ useEffect(() => {
+ setIsInvalid(
+ meta.invalid && (meta.validating || meta.modified || (meta.submitFailed && meta.touched))
+ )
+ }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating])
+
+ const openMenu = useCallback(() => {
+ if (!isOpen) {
+ setIsOpen(true)
+ input.onFocus(new Event('focus'))
+ }
+ }, [input, isOpen])
+
+ const closeMenu = useCallback(() => {
+ if (isOpen) {
+ setIsOpen(false)
+ input.onBlur(new Event('blur'))
+ }
+ }, [input, isOpen])
+
+ const clickHandler = useCallback(
+ event => {
+ if (selectRef.current !== event.target.closest('.form-field-select')) {
+ closeMenu()
+ }
+ },
+ [closeMenu]
+ )
+
+ const handleScroll = useCallback(
+ event => {
+ if (!event.target.closest('.options-list__body')) {
+ closeMenu()
+ }
+ },
+ [closeMenu]
+ )
+
+ useEffect(() => {
+ if (isOpen) {
+ window.addEventListener('scroll', handleScroll, true)
+ }
+
+ window.addEventListener('click', clickHandler)
+
+ return () => {
+ window.removeEventListener('click', clickHandler)
+ window.removeEventListener('scroll', handleScroll, true)
+ }
+ }, [clickHandler, handleScroll, isOpen])
+
+ const scrollOptionToView = useCallback(() => {
+ const selectedOptionEl = optionsListRef.current.querySelector(
+ `[data-custom-id="${input.value}"]`
+ )
+
+ if (!selectedOptionEl) return
+
+ searchValue
+ ? optionsListRef.current.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+ : setTimeout(() => {
+ selectedOptionEl.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center'
+ })
+ }, 0)
+ }, [input.value, searchValue])
+
+ useEffect(() => {
+ if (isOpen && optionsListRef.current && scrollToView) {
+ scrollOptionToView()
+ }
+ }, [isOpen, scrollOptionToView, scrollToView])
+
+ useEffect(() => {
+ if (isOpen && search && searchRef.current) {
+ searchRef.current.focus()
+ }
+ }, [isOpen, search])
+
+ const toggleOpen = () => {
+ if (isOpen) {
+ closeMenu()
+ } else {
+ !disabled && openMenu()
+ }
+ }
+
+ const handleCloseSelectBody = useCallback(
+ event => {
+ event.stopPropagation()
+ if (multiple) return
+
+ if (
+ !event.target.classList.contains('disabled') &&
+ !event.target.closest('.options-list__search')
+ ) {
+ closeMenu()
+ setSearchValue('')
+ }
+ },
+ [closeMenu, multiple]
+ )
+
+ const handleSelectOptionClick = (selectedOption, option) => {
+ if (selectedOption !== input.value) {
+ option.handler && option.handler()
+ onChange && onChange(selectedOption)
+
+ setTimeout(() => {
+ input.onChange(selectedOption)
+ })
+ }
+ }
+
+ const validateField = value => {
+ if (required) {
+ return value ? undefined : 'Required'
+ }
+ }
+
+ return (
+
+ {({ input, meta }) => (
+
+ {label && (
+
+
+ {label}
+ {meta.error && * }
+
+
+ )}
+
+
+ {!hideSelectedOption && (
+
+ {getSelectValue() || placeholder}
+
+ )}
+
+
+ {input.value && selectedItemAction && (
+ <>
+ {selectedItemAction.handler ? (
+ {
+ if (selectedItemAction.confirm) {
+ setConfirmDialogOpen(true)
+ } else {
+ selectedItemAction.handler(input.value)
+ }
+
+ event.stopPropagation()
+ }}
+ >
+ {selectedItemAction.icon}
+
+
+ ) : (
+ {selectedItemAction.icon}
+ )}
+
+ )}
+
+
+
+
+ {isConfirmDialogOpen && (
+
{
+ setConfirmDialogOpen(false)
+ },
+ label: 'Cancel',
+ variant: TERTIARY_BUTTON
+ }}
+ closePopUp={() => {
+ setConfirmDialogOpen(false)
+ }}
+ confirmButton={{
+ handler: () => {
+ selectedItemAction.handler(input.value)
+ setConfirmDialogOpen(false)
+ },
+ label: selectedItemAction.confirm.btnConfirmLabel,
+ variant: selectedItemAction.confirm.btnConfirmType
+ }}
+ header={selectedItemAction.confirm.title}
+ isOpen={isConfirmDialogOpen}
+ message={selectedItemAction.confirm.message}
+ />
+ )}
+ {isOpen && (
+
+
+ {search && (
+
+
+ )}
+
+ {sortedOptionsList.map(option => {
+ return (
+ {
+ handleSelectOptionClick(selectedOption, option)
+ }}
+ multiple={multiple}
+ selectedId={!multiple ? input.value : ''}
+ withSelectedIcon={withSelectedIcon}
+ />
+ )
+ })}
+
+
+ )}
+
+ )
+}
+
+FormSelect.propTypes = {
+ className: PropTypes.string,
+ density: DENSITY,
+ disabled: PropTypes.bool,
+ hideSelectedOption: PropTypes.bool,
+ label: PropTypes.string,
+ multiple: PropTypes.bool,
+ name: PropTypes.string.isRequired,
+ onChange: PropTypes.func,
+ options: SELECT_OPTIONS.isRequired,
+ placeholder: PropTypes.string,
+ preventWidthOverflow: PropTypes.bool,
+ required: PropTypes.bool,
+ scrollToView: PropTypes.bool,
+ search: PropTypes.bool,
+ selectedItemAction: PropTypes.object,
+ tooltip: PropTypes.string,
+ withSelectedIcon: PropTypes.bool,
+ withoutBorder: PropTypes.bool
+}
+
+FormSelect = React.memo(FormSelect)
+
+export default FormSelect
diff --git a/src/igz-controls/components/FormSelect/formSelect.scss b/src/igz-controls/components/FormSelect/formSelect.scss
new file mode 100644
index 0000000000..767e896be1
--- /dev/null
+++ b/src/igz-controls/components/FormSelect/formSelect.scss
@@ -0,0 +1,98 @@
+@use '../../scss/mixins';
+@use '../../scss/colors';
+@use '../../scss/shadows';
+@use '../../scss/borders';
+
+.select-tooltip {
+ width: 100%;
+}
+
+.form-field-select {
+ width: 100%;
+
+ .form-field {
+ @include mixins.inputSelectField;
+
+ &__wrapper {
+ cursor: pointer;
+
+ &-active {
+ background: colors.$alabaster;
+ }
+
+ &-disabled {
+ cursor: not-allowed;
+
+ .form-field__caret {
+ path {
+ fill: colors.$spunPearl;
+ }
+ }
+ }
+ }
+
+ &__select {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 0 20px 0 16px;
+
+ &-value {
+ display: block;
+ font-size: 15px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ &-placeholder {
+ color: colors.$spunPearl;
+ }
+
+ &-sub_label {
+ display: block;
+ margin-left: 10px;
+ overflow: hidden;
+ color: colors.$topaz;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ &__options-list {
+ .pop-up-dialog {
+ width: 100%;
+ padding: 0;
+ border-radius: 0;
+ }
+
+ .options-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ max-height: 250px;
+ overflow-y: auto;
+
+ &__body {
+ width: 100%;
+ color: colors.$mulledWineTwo;
+ background-color: colors.$white;
+ border: borders.$primaryBorder;
+ border-radius: 4px;
+ box-shadow: shadows.$filterShadow;
+ }
+
+ &__search {
+ width: 100%;
+
+ input {
+ width: 100%;
+ padding: 10px;
+ border: none;
+ border-bottom: borders.$primaryBorder;
+ }
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/components/FormTextarea/FormTextarea.jsx b/src/igz-controls/components/FormTextarea/FormTextarea.jsx
new file mode 100644
index 0000000000..91e7701c2d
--- /dev/null
+++ b/src/igz-controls/components/FormTextarea/FormTextarea.jsx
@@ -0,0 +1,189 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import { Field, useField } from 'react-final-form'
+
+import TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'
+import Tip from '../Tip/Tip'
+import Tooltip from '../Tooltip/Tooltip'
+
+import ExclamationMarkIcon from '../../images/exclamation-mark.svg?react'
+
+import './formTextarea.scss'
+
+let FormTextarea = (
+ {
+ className = '',
+ disabled = false,
+ focused = false,
+ iconClass = '',
+ invalidText = 'This field is invalid',
+ label = '',
+ maxLength = null,
+ name,
+ onBlur = () => {},
+ onChange = () => {},
+ required = false,
+ rows = 3,
+ textAreaIcon = null,
+ tip = '',
+ withoutBorder = false,
+ ...textareaProps
+ },
+ ref
+) => {
+ const { input, meta } = useField(name)
+ const [isInvalid, setIsInvalid] = useState(false)
+ const [textAreaCount, setTextAreaCount] = useState(input.value.length)
+ const textAreaRef = useRef()
+
+ const formFieldClassNames = classnames('form-field-textarea', className)
+ const labelClassNames = classnames('form-field__label', disabled && 'form-field__label-disabled')
+ const textAreaClassNames = classnames(
+ 'form-field__wrapper',
+ disabled && 'form-field__wrapper-disabled',
+ isInvalid && 'form-field__wrapper-invalid',
+ withoutBorder && 'without-border'
+ )
+
+ useLayoutEffect(() => {
+ setTextAreaCount(input.value.length)
+ }, [input.value.length])
+
+ useEffect(() => {
+ if (focused) {
+ textAreaRef.current.focus()
+ }
+ }, [focused, textAreaRef])
+
+ useEffect(() => {
+ setIsInvalid(
+ meta.invalid && (meta.validating || meta.modified || (meta.submitFailed && meta.touched))
+ )
+ }, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating])
+
+ const handleInputBlur = event => {
+ input.onBlur(event)
+ onBlur && onBlur(event)
+ }
+
+ const handleInputChange = event => {
+ input.onChange(event)
+ onChange && onChange(event.target.value)
+ }
+
+ const handleInputFocus = event => {
+ input.onFocus(event)
+ }
+
+ const validateField = value => {
+ const valueToValidate = value ?? ''
+ let validationError = null
+
+ if (valueToValidate.startsWith(' ')) {
+ validationError = { name: 'empty', label: invalidText }
+ } else if (required && valueToValidate.trim().length === 0) {
+ validationError = { name: 'required', label: 'This field is required' }
+ }
+
+ return validationError
+ }
+
+ return (
+
+ {({ input, meta }) => (
+
+
+ {label && (
+
+ {label}
+ {required && * }
+
+ )}
+
+
+
+
+
+
+ {isInvalid && (
+
+ {textAreaIcon}
+
+ )}
+
+
+ {maxLength && (
+
{`${maxLength - textAreaCount} ${
+ maxLength - textAreaCount !== 1 ? 'characters' : 'character'
+ } left`}
+ )}
+
+ )
+}
+
+FormTextarea = React.memo(forwardRef(FormTextarea))
+
+FormTextarea.displayName = 'FormTextarea'
+
+FormTextarea.propTypes = {
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ focused: PropTypes.bool,
+ iconClass: PropTypes.string,
+ invalidText: PropTypes.string,
+ label: PropTypes.string,
+ maxLength: PropTypes.number,
+ name: PropTypes.string.isRequired,
+ onBlur: PropTypes.func,
+ onChange: PropTypes.func,
+ required: PropTypes.bool,
+ rows: PropTypes.number,
+ textAreaIcon: PropTypes.element,
+ tip: PropTypes.string,
+ withoutBorder: PropTypes.bool
+}
+
+export default FormTextarea
diff --git a/src/igz-controls/components/FormTextarea/FormTextarea.stories.js b/src/igz-controls/components/FormTextarea/FormTextarea.stories.js
new file mode 100644
index 0000000000..68aa589c45
--- /dev/null
+++ b/src/igz-controls/components/FormTextarea/FormTextarea.stories.js
@@ -0,0 +1,52 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import { Form } from 'react-final-form'
+
+import FormTextarea from '/src/lib/components/FormTextarea/FormTextarea'
+
+export default {
+ title: 'Example/FormTextarea',
+ component: FormTextarea
+}
+
+const commonArgs = {
+ name: 'textArea',
+ rows: 3
+}
+
+const Template = args =>
+
+export const Normal = Template.bind({})
+Normal.args = {
+ ...commonArgs,
+ label: 'Normal'
+}
+
+export const withTip = Template.bind({})
+withTip.args = {
+ ...commonArgs,
+ label: 'With Tip',
+ tip: 'Tip'
+}
+
+export const withMaxLength = Template.bind({})
+withMaxLength.args = {
+ ...commonArgs,
+ label: 'With max length',
+ maxLength: 50
+}
diff --git a/src/igz-controls/components/FormTextarea/formTextarea.scss b/src/igz-controls/components/FormTextarea/formTextarea.scss
new file mode 100644
index 0000000000..4caf952c4d
--- /dev/null
+++ b/src/igz-controls/components/FormTextarea/formTextarea.scss
@@ -0,0 +1,30 @@
+@use '../../scss/colors';
+@use '../../scss/mixins';
+
+.form-field-textarea {
+ width: 100%;
+
+ textarea {
+ height: inherit;
+ width: 100%;
+ padding: 12px 16px;
+ white-space: normal;
+ }
+
+ .form-field {
+ @include mixins.inputSelectField;
+
+ &__wrapper {
+ .form-field__control {
+ padding: 0;
+ }
+ }
+
+ &__counter {
+ color: colors.$topaz;
+ font-size: 12px;
+ margin-top: 5px;
+ text-align: right;
+ }
+ }
+}
diff --git a/src/igz-controls/components/FormToggle/FormToggle.jsx b/src/igz-controls/components/FormToggle/FormToggle.jsx
new file mode 100644
index 0000000000..956e372aab
--- /dev/null
+++ b/src/igz-controls/components/FormToggle/FormToggle.jsx
@@ -0,0 +1,89 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import { Field } from 'react-final-form'
+
+import Tip from '../Tip/Tip'
+import { DENSITY } from '../../types.js'
+
+import './formToggle.scss'
+
+const FormToggle = ({
+ className = '',
+ density = '',
+ label = '',
+ labelTip = '',
+ name,
+ readOnly = false,
+ onChange = () => {},
+ ...inputProps
+}) => {
+ const formFieldClassNames = classnames(
+ 'form-field-toggle',
+ 'form-field__wrapper',
+ density && `form-field__wrapper-${density}`,
+ (label || labelTip) && 'form-field-toggle_has-label',
+ className
+ )
+
+ return (
+
+ {({ input }) => (
+
+ {(label || labelTip) && (
+
+ {label}
+ {labelTip &&
+ )}
+
+
+
+ )}
+
+ )
+}
+
+FormToggle.propTypes = {
+ className: PropTypes.string,
+ density: DENSITY,
+ label: PropTypes.string,
+ labelTip: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ readOnly: PropTypes.bool,
+ onChange: PropTypes.func
+}
+
+export default FormToggle
diff --git a/src/igz-controls/components/FormToggle/formToggle.scss b/src/igz-controls/components/FormToggle/formToggle.scss
new file mode 100644
index 0000000000..ee0d479dc8
--- /dev/null
+++ b/src/igz-controls/components/FormToggle/formToggle.scss
@@ -0,0 +1,79 @@
+@use '../../scss/colors';
+@use '../../scss/mixins';
+
+.form-field-toggle {
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-start;
+
+ &_has-label {
+ gap: 10px;
+ }
+
+ &__label {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ }
+
+ &__toggle-wrapper {
+ position: relative;
+ display: inline-flex;
+ cursor: pointer;
+ }
+
+ &__switch {
+ height: 24px;
+ width: 48px;
+ display: flex;
+ cursor: pointer;
+ align-items: center;
+ background-color: colors.$alto;
+ border-radius: 20px;
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 3px colors.$lightBlack;
+
+ &:before {
+ content: '';
+ width: 20px;
+ height: 20px;
+ background-color: colors.$white;
+ border-radius: 50%;
+ transform: translateX(2px);
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 2px colors.$lightBlack;
+ }
+ }
+
+ .form-field__wrapper {
+ border: none;
+ }
+
+ input[type='checkbox'] {
+ display: none;
+ width: 0;
+ height: 0;
+
+ &:disabled {
+ & + .form-field-toggle__switch {
+ opacity: 0.5;
+ pointer-events: none;
+ cursor: default;
+ }
+ }
+
+ &:checked {
+ & + .form-field-toggle__switch {
+ background-color: colors.$malibu;
+
+ &:before {
+ transform: translateX(26px);
+ }
+ }
+ }
+ }
+
+ .form-field-toggle__toggle-wrapper:not(:has(input:disabled)):hover .form-field-toggle__switch {
+ opacity: 0.9;
+ }
+}
diff --git a/src/igz-controls/components/LoadButton/LoadButton.jsx b/src/igz-controls/components/LoadButton/LoadButton.jsx
new file mode 100644
index 0000000000..68bce6a360
--- /dev/null
+++ b/src/igz-controls/components/LoadButton/LoadButton.jsx
@@ -0,0 +1,51 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { PRIMARY_BUTTON, SECONDARY_BUTTON, TERTIARY_BUTTON } from '../../constants'
+
+import './loadButton.scss'
+
+let LoadButton = (
+ { className = '', label = 'Load button', variant = TERTIARY_BUTTON, ...restProps },
+ ref
+) => {
+ const buttonClassName = classNames('btn-load', `btn-load-${variant}`, className)
+
+ return (
+
+ {label}
+
+ )
+}
+
+LoadButton = React.forwardRef(LoadButton)
+
+LoadButton.displayName = 'LoadButton'
+
+LoadButton.propTypes = {
+ className: PropTypes.string,
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ variant: PropTypes.oneOf([PRIMARY_BUTTON, SECONDARY_BUTTON, TERTIARY_BUTTON]).isRequired
+}
+
+export default LoadButton
diff --git a/src/igz-controls/components/LoadButton/loadButton.scss b/src/igz-controls/components/LoadButton/loadButton.scss
new file mode 100644
index 0000000000..d7781d3227
--- /dev/null
+++ b/src/igz-controls/components/LoadButton/loadButton.scss
@@ -0,0 +1,80 @@
+@use '../../scss/variables';
+@use '../../scss/colors';
+@use '../../scss/borders';
+
+.btn-load {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 90px;
+ height: 40px;
+ padding: 0 16px;
+ color: colors.$primary;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: normal;
+ line-height: 16px;
+ background: colors.$white;
+ border: borders.$primaryBorder;
+ border-radius: variables.$mainBorderRadius;
+
+ svg {
+ path {
+ fill: colors.$white;
+ }
+ }
+
+ &:active {
+ background: colors.$gallery;
+ }
+
+ &:hover {
+ background: colors.$alabaster;
+ }
+
+ &:disabled {
+ color: colors.$spunPearl;
+ background: colors.$white;
+ cursor: not-allowed;
+
+ svg {
+ path {
+ fill: colors.$alto;
+ }
+ }
+ }
+
+ :first-child {
+ margin-right: 5px;
+ }
+
+ &-primary {
+ border-bottom: borders.$applyBtnBorder;
+
+ &:disabled {
+ border-bottom: 4px solid colors.$hummingBird;
+ }
+ }
+
+ &-secondary {
+ border-bottom: 4px solid colors.$malibu;
+
+ &:disabled {
+ border-bottom: 4px solid colors.$titanWhite;
+ }
+ }
+
+ &-tertiary {
+ border-bottom: 4px solid colors.$spunPearl;
+
+ svg {
+ path {
+ fill: colors.$primary;
+ }
+ }
+
+ &:disabled {
+ border-bottom: 4px solid colors.$athensGray;
+ }
+ }
+}
diff --git a/src/igz-controls/components/Loader/Loader.jsx b/src/igz-controls/components/Loader/Loader.jsx
new file mode 100644
index 0000000000..e5ace57ec5
--- /dev/null
+++ b/src/igz-controls/components/Loader/Loader.jsx
@@ -0,0 +1,66 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+import './loader.scss'
+
+const Loader = ({ overlay = false, secondary = false, section = false, small = false }) => {
+ const wrapperClassNames = classnames(
+ 'loader-wrapper',
+ overlay && 'overlay-loader',
+ section && 'section-loader',
+ small && 'small-loader',
+ secondary && 'secondary-loader'
+ )
+
+ const svgSize = small ? 20 : 40
+
+ return (
+
+ )
+}
+
+Loader.propTypes = {
+ overlay: PropTypes.bool,
+ secondary: PropTypes.bool,
+ section: PropTypes.bool,
+ small: PropTypes.bool
+}
+
+export default React.memo(Loader)
diff --git a/src/igz-controls/components/Loader/LoaderForSuspenseFallback.jsx b/src/igz-controls/components/Loader/LoaderForSuspenseFallback.jsx
new file mode 100644
index 0000000000..9e314cf5de
--- /dev/null
+++ b/src/igz-controls/components/Loader/LoaderForSuspenseFallback.jsx
@@ -0,0 +1,39 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { useLayoutEffect } from 'react'
+
+import Loader from './Loader'
+
+const LoaderForSuspenseFallback = () => {
+ useLayoutEffect(() => {
+ const overlayContainer = document.getElementById('overlay_container')
+ const savedVisibilityStyle = overlayContainer ? overlayContainer.style.visibility : 'visible'
+
+ if (overlayContainer) overlayContainer.style.visibility = 'hidden'
+
+ return () => {
+ if (overlayContainer) overlayContainer.style.visibility = savedVisibilityStyle
+ }
+ }, [])
+
+ return
+
+
+
+
+
+
+ {!noHeader && (
+
+ {previewText &&
{previewText}
}
+
{title}
+ {subTitle &&
{subTitle} }
+
+ )}
+
{children}
+ {actions && actions.length > 0 && (
+
+
+ {actions.map((action, idx) => (
+
{action}
+ ))}
+
+
+ )}
+
+
+
+ )
+}
+
+Modal.propTypes = {
+ actions: PropTypes.array,
+ children: PropTypes.oneOfType([
+ PropTypes.element,
+ PropTypes.object,
+ PropTypes.node,
+ PropTypes.string
+ ]).isRequired,
+ className: PropTypes.string,
+ noHeader: PropTypes.bool,
+ onClose: PropTypes.func.isRequired,
+ previewText: PropTypes.string,
+ show: PropTypes.bool,
+ size: MODAL_SIZES,
+ subTitle: PropTypes.string,
+ title: PropTypes.string
+}
+
+export default Modal
diff --git a/src/igz-controls/components/Modal/Modal.scss b/src/igz-controls/components/Modal/Modal.scss
new file mode 100644
index 0000000000..91f36d5bfb
--- /dev/null
+++ b/src/igz-controls/components/Modal/Modal.scss
@@ -0,0 +1,149 @@
+@use '../../scss/variables';
+@use '../../scss/colors';
+@use '../../scss/borders';
+
+.modal {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 660px;
+ max-width: 96%;
+ min-width: 300px;
+ max-height: 96%;
+ outline: 0;
+ transform: translate(-50%, -50%);
+ z-index: 9;
+
+ @media screen and (min-width: 1200px) {
+ width: 1000px;
+
+ &.modal-sm {
+ width: 700px;
+ }
+
+ &.modal-lg {
+ width: 1400px;
+ }
+
+ &.modal-max {
+ width: 95vw;
+ height: 95vh;
+ }
+ }
+
+ &.modal-min {
+ width: 500px;
+ height: auto;
+ }
+
+ &.modal-max {
+ width: 96vw;
+ height: 94vw;
+ }
+
+ &__content {
+ display: flex;
+ flex-flow: column nowrap;
+ position: relative;
+ min-height: inherit;
+ height: 100%;
+ width: 100%;
+ max-height: 100%;
+ background-color: colors.$white;
+ border-radius: variables.$modalBorderRadius;
+ box-shadow: 0 6px 26px rgba(colors.$black, 0.2);
+ text-align: left;
+ }
+
+ &__header {
+ position: relative;
+ border-bottom: borders.$primaryBorder;
+ min-height: 92px;
+ padding: 1rem 3rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+
+ &-title {
+ color: colors.$primary;
+ font-size: 2em;
+ text-transform: capitalize;
+ margin: 0;
+ }
+
+ &-sub-title {
+ color: colors.$topaz;
+ font-size: 1.5em;
+ font-weight: 500;
+ margin: 10px 0 0;
+ }
+
+ &-preview-text {
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
+ font-size: 1rem;
+ }
+
+ &-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+ }
+
+ &__body {
+ overflow-y: auto;
+ overflow-x: hidden;
+ flex: 1 0;
+ padding: 1.5rem 2rem 0;
+ margin-bottom: 1rem;
+ }
+
+ &__footer {
+ display: flex;
+ flex-flow: row nowrap;
+ flex-shrink: 0;
+ justify-content: space-between;
+ padding: 1rem 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));
+ }
+
+ &-enter-active,
+ &-enter-done {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: all 0.3s ease-in-out;
+ }
+
+ &-exit {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ }
+
+ &-exit-active {
+ opacity: 0;
+ transform: translate(-50%, -70%);
+ transition: all 0.3s ease-in-out;
+ }
+ }
+}
diff --git a/src/igz-controls/components/PopUpDialog/PopUpDialog.jsx b/src/igz-controls/components/PopUpDialog/PopUpDialog.jsx
new file mode 100644
index 0000000000..c987bcc2c0
--- /dev/null
+++ b/src/igz-controls/components/PopUpDialog/PopUpDialog.jsx
@@ -0,0 +1,198 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { createPortal } from 'react-dom'
+import { throttle } from 'lodash'
+
+import RoundedIcon from '../RoundedIcon/RoundedIcon'
+import Tooltip from '../Tooltip/Tooltip'
+import TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'
+
+import { POP_UP_CUSTOM_POSITION } from '../../types'
+import CloseIcon from '../../images/close.svg?react'
+
+import './popUpDialog.scss'
+
+let PopUpDialog = (
+ {
+ children,
+ className = '',
+ closePopUp = null,
+ customPosition = {},
+ headerIsHidden = false,
+ headerText = '',
+ isOpen = true,
+ onResolve = null,
+ style = {},
+ tooltipText = ''
+ },
+ ref
+) => {
+ const popUpOverlayRef = useRef(null)
+ ref ??= popUpOverlayRef
+ const popUpClassNames = classnames(
+ className,
+ 'pop-up-dialog__overlay',
+ customPosition.element && 'custom-position'
+ )
+
+ const handleClosePopUp = useCallback(() => {
+ closePopUp && closePopUp()
+ onResolve && onResolve()
+ }, [closePopUp, onResolve])
+
+ const calculateCustomPopUpPosition = useCallback(() => {
+ if (customPosition?.element?.current && ref?.current) {
+ const elementRect = customPosition.element.current.getBoundingClientRect()
+ const popUpRect = ref.current.getBoundingClientRect()
+ const [verticalPosition, horizontalPosition] = customPosition.position.split('-')
+ const popupMargin = 15
+ const elementMargin = 5
+ const isEnoughSpaceFromLeft = elementRect.right >= popUpRect.width + popupMargin
+ const isEnoughSpaceFromRight =
+ window.innerWidth - elementRect.left >= popUpRect.width + popupMargin
+ const isEnoughSpaceFromTop = elementRect.top > popUpRect.height + popupMargin + elementMargin
+ const isEnoughSpaceFromBottom =
+ elementRect.bottom + popUpRect.height + popupMargin + elementMargin <= window.innerHeight
+ let leftPosition =
+ horizontalPosition === 'left' ? elementRect.right - popUpRect.width : elementRect.left
+
+ let topPosition
+
+ if (verticalPosition === 'top') {
+ topPosition = isEnoughSpaceFromTop
+ ? elementRect.top - popUpRect.height - elementMargin
+ : popupMargin
+ } else {
+ topPosition = isEnoughSpaceFromBottom
+ ? elementRect.bottom + elementMargin
+ : window.innerHeight - popUpRect.height - popupMargin
+ }
+
+ if (customPosition.autoVerticalPosition) {
+ if (verticalPosition === 'top') {
+ if (!isEnoughSpaceFromTop && isEnoughSpaceFromBottom) {
+ topPosition = elementRect.bottom + elementMargin
+ }
+ } else {
+ if (isEnoughSpaceFromTop && !isEnoughSpaceFromBottom) {
+ topPosition = elementRect.top - popUpRect.height - elementMargin
+ }
+ }
+ }
+
+ if (customPosition.autoHorizontalPosition) {
+ if (verticalPosition === 'left') {
+ if (!isEnoughSpaceFromLeft && isEnoughSpaceFromRight) {
+ leftPosition = elementRect.left
+ } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
+ leftPosition = popupMargin
+ }
+ } else {
+ if (isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
+ leftPosition = elementRect.right - popUpRect.width
+ } else if (!isEnoughSpaceFromLeft && !isEnoughSpaceFromRight) {
+ leftPosition = window.innerWidth - popUpRect.width - popupMargin
+ }
+ }
+ }
+
+ ref.current.style.top = `${topPosition}px`
+
+ if (style.left && !(customPosition.autoHorizontalPosition && isEnoughSpaceFromRight)) {
+ ref.current.style.left = `calc(${leftPosition}px + ${style.left})`
+ } else {
+ ref.current.style.left = `${leftPosition}px`
+ }
+ }
+ }, [customPosition, style.left, ref])
+
+ useLayoutEffect(() => {
+ calculateCustomPopUpPosition()
+ }, [calculateCustomPopUpPosition])
+
+ useEffect(() => {
+ if (isOpen) {
+ const throttledCalculatedCustomPopUpPosition = throttle(calculateCustomPopUpPosition, 100, {
+ trailing: true,
+ leading: true
+ })
+ const popupObserver = new ResizeObserver(throttledCalculatedCustomPopUpPosition)
+ const popupElement = ref.current
+
+ popupObserver.observe(popupElement)
+ window.addEventListener('resize', throttledCalculatedCustomPopUpPosition)
+
+ return () => {
+ popupObserver.unobserve(popupElement)
+ window.removeEventListener('resize', throttledCalculatedCustomPopUpPosition)
+ }
+ }
+ }, [calculateCustomPopUpPosition, ref, isOpen])
+
+ return isOpen
+ ? createPortal(
+
+
+ {!headerIsHidden && (
+
+ {headerText && (
+
+ {headerText}
+
+
+ )}
+
+
+
+ )}
+ {children}
+
+
+
+ {children}
+
+
+
+ )
+}
+
+RoundedIcon = React.memo(forwardRef(RoundedIcon))
+
+RoundedIcon.displayName = 'RoundedIcon'
+
+RoundedIcon.propTypes = {
+ children: PropTypes.node.isRequired,
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ id: PropTypes.string,
+ isActive: PropTypes.bool,
+ onClick: PropTypes.func,
+ tooltipText: PropTypes.string
+}
+
+export default RoundedIcon
diff --git a/src/igz-controls/components/RoundedIcon/roundedIcon.scss b/src/igz-controls/components/RoundedIcon/roundedIcon.scss
new file mode 100644
index 0000000000..5b4e5a3e0d
--- /dev/null
+++ b/src/igz-controls/components/RoundedIcon/roundedIcon.scss
@@ -0,0 +1,57 @@
+@use '../../scss/colors';
+
+.round-icon-cp {
+ position: relative;
+ display: flex;
+ align-items: center;
+ margin: 0 0.2rem;
+
+ &__circle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ padding: 4px;
+
+ & > * {
+ position: relative;
+ z-index: 2;
+ display: inline-flex;
+ margin: 0 !important;
+ }
+
+ &::before {
+ position: absolute;
+ right: 0;
+ left: 0;
+ z-index: 1;
+ width: inherit;
+ height: inherit;
+ background-color: colors.$mulledWineThree;
+ border-radius: 50%;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ content: '';
+ }
+
+ &:hover,
+ &-active {
+ &::before {
+ opacity: 1;
+ }
+ }
+
+ &-disabled {
+ path {
+ fill: colors.$spunPearl;
+ }
+
+ &:hover {
+ &::before {
+ opacity: 0;
+ }
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/components/TableCell/TableCell.jsx b/src/igz-controls/components/TableCell/TableCell.jsx
new file mode 100644
index 0000000000..2ba253bbf1
--- /dev/null
+++ b/src/igz-controls/components/TableCell/TableCell.jsx
@@ -0,0 +1,175 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { cloneElement } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import Tooltip from '../Tooltip/Tooltip'
+import ReadOnlyChips from '../ReadOnlyChips/ReadOnlyChips'
+import TableLinkCell from '../../elements/TableLinkCell/TableLinkCell'
+import TableTypeCell from '../../elements/TableTypeCell/TableTypeCell'
+import TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate'
+
+import { getChipOptions } from '../../utils/chips.util'
+import { truncateUid } from '../../utils/string.util'
+
+import Arrow from '../../images/arrow.svg?react'
+
+const TableCell = ({
+ cellData,
+ className = '',
+ firstCell = false,
+ item,
+ link = '',
+ onClick = null,
+ selectItem = () => {},
+ selectedItem = {},
+ showExpandButton = false,
+ toggleRow = null
+}) => {
+ const { value: stateValue, label: stateLabel, className: stateClassName } = item.state ?? {}
+ const cellClassNames = classnames(
+ 'table-body__cell',
+ cellData.className,
+ className,
+ cellData.bodyCellClassName,
+ onClick && 'link'
+ )
+
+ if (cellData.template) {
+ return cloneElement(cellData.template, {
+ className
+ })
+ } else if (link && cellData.type !== 'hidden') {
+ return (
+ cellData.value && onClick && onClick(cellData.value)}
+ className={cellClassNames}
+ >
+
+ {cellData && (
+
+ {item.state && stateValue && stateLabel && (
+ toggleRow && toggleRow(e, item)} className="expand-arrow" />
+ )}
+
+ )
+ } else if (cellData.type === 'type') {
+ return
+ {cellData.value.map((valueItem, index) => (
+
+ )
+ } else if (Array.isArray(cellData.value)) {
+ return (
+
+
+ )
+ } else if (cellData.type === 'hash') {
+ return (
+
+ {truncateUid(cellData.value)}
+
+
+ )
+ } else if (cellData.type === 'hidden') {
+ return null
+ } else if (cellData.type === 'component') {
+ return (
+
+ {cellData.value}
+
+ )
+ } else {
+ return (
+ cellData.value && onClick && onClick(cellData.value)}
+ >
+
+ )
+ }
+}
+
+TableCell.propTypes = {
+ cellData: PropTypes.object.isRequired,
+ className: PropTypes.string,
+ firstCell: PropTypes.bool,
+ item: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+ onClick: PropTypes.func,
+ selectItem: PropTypes.func,
+ selectedItem: PropTypes.object,
+ showExpandButton: PropTypes.bool,
+ toggleRow: PropTypes.func
+}
+
+export default TableCell
diff --git a/src/igz-controls/components/TabsSlider/TabsSlider.jsx b/src/igz-controls/components/TabsSlider/TabsSlider.jsx
new file mode 100644
index 0000000000..38fda60859
--- /dev/null
+++ b/src/igz-controls/components/TabsSlider/TabsSlider.jsx
@@ -0,0 +1,241 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { useCallback, useEffect, useState, useRef } from 'react'
+import { Link, useLocation, useParams } from 'react-router-dom'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import Tip from '../Tip/Tip'
+
+import { SLIDER_TABS } from '../../types'
+import { generateUrlFromRouterPath } from '../../utils/common.util'
+
+import Arrow from '../../images/arrow.svg?react'
+
+const TabsSlider = ({
+ fontSize = 'sm',
+ initialTab = '',
+ isDetailsPopUp = false,
+ onClick = () => {},
+ skipLink = false,
+ tabsList
+}) => {
+ const [selectedTab, setSelectedTab] = useState(initialTab)
+ const [arrowsAreHidden, setArrowsAreHidden] = useState(true)
+ const [scrolledWidth, setScrolledWidth] = useState(0)
+ const [rightArrowDisabled, setRightArrowDisabled] = useState(false)
+ const tabsWrapperRef = useRef()
+ const tabsRef = useRef()
+ const location = useLocation()
+ const params = useParams()
+ const menuOffsetHalfWidth = 2
+ const tabOffset = 1.5
+
+ const leftArrowClassNames = classnames(
+ 'tabs-slider__arrow',
+ 'tabs-slider__arrow_left',
+ arrowsAreHidden && 'tabs-slider__arrow_hidden',
+ scrolledWidth === 0 && 'tabs-slider__arrow_disabled'
+ )
+ const rightArrowClassNames = classnames(
+ 'tabs-slider__arrow',
+ 'tabs-slider__arrow_right',
+ arrowsAreHidden && 'tabs-slider__arrow_hidden',
+ rightArrowDisabled && 'tabs-slider__arrow_disabled'
+ )
+
+ const scrollTabs = toRight => {
+ let scrollWidth
+
+ if (toRight) {
+ if (
+ tabsRef.current?.scrollWidth <
+ tabsWrapperRef.current?.offsetWidth * tabOffset + scrolledWidth
+ ) {
+ scrollWidth = tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth
+
+ setRightArrowDisabled(true)
+ } else {
+ scrollWidth = scrolledWidth + tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth
+ }
+ } else {
+ scrollWidth = Math.max(
+ 0,
+ scrolledWidth - tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth
+ )
+
+ setRightArrowDisabled(false)
+ }
+
+ setScrolledWidth(scrollWidth)
+ }
+
+ const handleHideArrows = useCallback(() => {
+ const scrollIsHidden = tabsRef.current?.offsetWidth === tabsRef.current?.scrollWidth
+
+ setArrowsAreHidden(scrollIsHidden)
+
+ if (rightArrowDisabled) {
+ setScrolledWidth(tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth)
+ }
+
+ if (scrollIsHidden) {
+ setScrolledWidth(0)
+ setRightArrowDisabled(false)
+ }
+ }, [rightArrowDisabled, tabsRef, tabsWrapperRef])
+
+ const moveToSelectedTab = useCallback(() => {
+ const selectedTabNode = document.querySelector(`[data-tab='${selectedTab}']`)
+ const centeredTabPosition =
+ selectedTabNode?.offsetLeft -
+ tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth +
+ selectedTabNode?.offsetWidth / menuOffsetHalfWidth
+
+ if (centeredTabPosition <= 0) {
+ setScrolledWidth(0)
+ setRightArrowDisabled(false)
+ } else if (
+ tabsRef.current?.scrollWidth <
+ tabsWrapperRef.current?.offsetWidth / menuOffsetHalfWidth +
+ selectedTabNode?.offsetLeft +
+ selectedTabNode?.offsetWidth
+ ) {
+ setScrolledWidth(tabsRef.current?.scrollWidth - tabsWrapperRef.current?.offsetWidth)
+ setRightArrowDisabled(true)
+ } else {
+ setScrolledWidth(centeredTabPosition)
+ setRightArrowDisabled(false)
+ }
+ }, [selectedTab])
+
+ const onSelectTab = newTab => {
+ setSelectedTab(newTab)
+ onClick && onClick(newTab)
+ }
+
+ useEffect(() => {
+ window.addEventListener('resize', handleHideArrows)
+
+ return () => window.removeEventListener('resize', handleHideArrows)
+ }, [handleHideArrows])
+
+ useEffect(() => {
+ window.addEventListener('resize', moveToSelectedTab)
+
+ return () => window.removeEventListener('resize', moveToSelectedTab)
+ }, [moveToSelectedTab])
+
+ useEffect(() => {
+ handleHideArrows()
+ }, [tabsList, handleHideArrows])
+
+ useEffect(() => {
+ moveToSelectedTab()
+ }, [moveToSelectedTab])
+
+ useEffect(() => {
+ if (params.tab && params.tab !== selectedTab && !isDetailsPopUp) {
+ setSelectedTab(tabsList.find(tab => tab.id === params.tab)?.id)
+ }
+ }, [isDetailsPopUp, params.tab, selectedTab, tabsList])
+
+ const getTabContent = useCallback(tab => {
+ return (
+
+ {tab.icon && {tab.icon}
}
+ {tab.label}
+ {tab.tip &&
+ )
+ }, [])
+
+ return (
+
+
{
+ scrollTabs(false)
+ }}
+ >
+
+
+
+
+ {tabsList.map(tab => {
+ const tabClassName = classnames(
+ 'content-menu__tab',
+ `content-menu__tab-${fontSize}`,
+ selectedTab === tab.id && 'content-menu__tab_active'
+ )
+
+ return (
+ !tab.hidden &&
+ (!skipLink ? (
+
onSelectTab(tab.id)}
+ >
+ {getTabContent(tab)}
+
+ ) : (
+
onSelectTab(tab.id)}
+ >
+ {getTabContent(tab)}
+
+ ))
+ )
+ })}
+
+
+
+
+
+ {withExclamationMark ? (
+
+ {createPortal(
+
+
+ {text}
+
+ ,
+ document.getElementById('overlay_container')
+ )}
+
+ ) : (
+
+ {children}
+
+ )}
+ {!hidden &&
+ createPortal(
+
+
+ {template}
+
+ ,
+ document.getElementById('overlay_container')
+ )}
+
+ )
+}
+
+Tooltip.propTypes = {
+ children: PropTypes.any,
+ className: PropTypes.string,
+ tooltipBodyClassName: PropTypes.string,
+ hidden: PropTypes.bool,
+ id: PropTypes.string,
+ renderChildAsHtml: PropTypes.bool,
+ template: PropTypes.element.isRequired,
+ textShow: PropTypes.bool
+}
+
+Tooltip = React.memo(Tooltip)
+
+export default Tooltip
diff --git a/src/igz-controls/components/Tooltip/tooltip.scss b/src/igz-controls/components/Tooltip/tooltip.scss
new file mode 100644
index 0000000000..8625c218f2
--- /dev/null
+++ b/src/igz-controls/components/Tooltip/tooltip.scss
@@ -0,0 +1,29 @@
+.tooltip {
+ position: fixed;
+ font-weight: 400;
+ font-size: 15px;
+ line-height: 1.4;
+ display: flex;
+ max-width: 400px;
+ z-index: 9;
+}
+
+.fade {
+ &-enter {
+ opacity: 0;
+
+ &-active {
+ opacity: 1;
+ transition: opacity 200ms;
+ }
+ }
+
+ &-exit {
+ opacity: 1;
+
+ &-active {
+ opacity: 0;
+ transition: opacity 200ms;
+ }
+ }
+}
diff --git a/src/igz-controls/components/TooltipTemplate/ProducerTooltipTemplate.jsx b/src/igz-controls/components/TooltipTemplate/ProducerTooltipTemplate.jsx
new file mode 100644
index 0000000000..e59e3e1783
--- /dev/null
+++ b/src/igz-controls/components/TooltipTemplate/ProducerTooltipTemplate.jsx
@@ -0,0 +1,40 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import './producerTooltipTemplate.scss'
+
+const ProducerTooltipTemplate = ({ kind = '', owner = '' }) => {
+ return (
+
+
+ Kind: {kind}
+
+
+ Owner: {owner}
+
+
+ {text}
+
+ )
+}
+
+TextTooltipTemplate.propTypes = {
+ text: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.number]),
+ warning: PropTypes.bool
+}
+
+export default TextTooltipTemplate
diff --git a/src/igz-controls/components/TooltipTemplate/producerTooltipTemplate.scss b/src/igz-controls/components/TooltipTemplate/producerTooltipTemplate.scss
new file mode 100644
index 0000000000..28b80424d3
--- /dev/null
+++ b/src/igz-controls/components/TooltipTemplate/producerTooltipTemplate.scss
@@ -0,0 +1,23 @@
+@use '../../scss/shadows';
+@use '../../scss/colors';
+
+.tooltip-container {
+ display: flex;
+ flex-direction: column;
+ padding: 15px 10px;
+ background-color: colors.$white;
+ border-radius: 4px;
+ box-shadow: shadows.$tooltipShadow;
+
+ &__kind,
+ &__owner {
+ color: colors.$doveGray;
+
+ span {
+ color: colors.$doveGrayTwo;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 24px;
+ }
+ }
+}
diff --git a/src/igz-controls/components/TooltipTemplate/textTooltipTemplate.scss b/src/igz-controls/components/TooltipTemplate/textTooltipTemplate.scss
new file mode 100644
index 0000000000..c3f901afaf
--- /dev/null
+++ b/src/igz-controls/components/TooltipTemplate/textTooltipTemplate.scss
@@ -0,0 +1,21 @@
+@use '../../scss/colors';
+@use '../../scss/shadows';
+
+.tooltip {
+ &-template {
+ padding: 6px 8px;
+ word-break: break-word;
+ }
+
+ &__text {
+ color: colors.$white;
+ background-color: colors.$primary;
+ border-radius: 4px;
+ }
+
+ &__warning {
+ color: colors.$amaranth;
+ background-color: colors.$white;
+ box-shadow: shadows.$tooltipShadow;
+ }
+}
diff --git a/src/igz-controls/components/Wizard/Wizard.jsx b/src/igz-controls/components/Wizard/Wizard.jsx
new file mode 100644
index 0000000000..558cbd3df4
--- /dev/null
+++ b/src/igz-controls/components/Wizard/Wizard.jsx
@@ -0,0 +1,213 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isEmpty, isNumber } from 'lodash'
+
+import Button from '../Button/Button'
+import Modal from '../Modal/Modal'
+import WizardSteps from './WizardSteps/WizardSteps'
+
+import { MODAL_MD, TERTIARY_BUTTON } from '../../constants'
+import { MODAL_SIZES, WIZARD_STEPS_CONFIG } from '../../types'
+
+import Back from '../../images/back-arrow.svg?react'
+
+import './Wizard.scss'
+
+const Wizard = ({
+ children,
+ className = '',
+ getActions = null,
+ isWizardOpen,
+ onWizardResolve,
+ previewText = '',
+ size = MODAL_MD,
+ stepsConfig = [],
+ subTitle = null,
+ title
+}) => {
+ const wizardClasses = classNames('wizard-form', className)
+ const [jumpingToFirstInvalid, setJumpingToFirstInvalid] = useState(false)
+ const [activeStepNumber, setActiveStepNumber] = useState(0)
+ const [firstDisabledStepIdx, setFirstDisabledStepIdx] = useState(null)
+
+ const visibleSteps = useMemo(() => {
+ return stepsConfig?.filter(step => !step.hidden) || []
+ }, [stepsConfig])
+
+ useLayoutEffect(() => {
+ const disabledStep = visibleSteps.find((step, stepIdx) => {
+ if (step.disabled) {
+ setFirstDisabledStepIdx(stepIdx)
+ }
+
+ return step.disabled
+ })
+
+ if (!disabledStep) {
+ setFirstDisabledStepIdx(null)
+ }
+ }, [visibleSteps])
+
+ useEffect(() => {
+ const firstInvalidStepIdx = visibleSteps.findIndex(step => step.invalid)
+
+ if (jumpingToFirstInvalid && isNumber(firstInvalidStepIdx) && firstInvalidStepIdx !== -1) {
+ setActiveStepNumber(firstInvalidStepIdx)
+ setJumpingToFirstInvalid(false)
+ }
+ }, [jumpingToFirstInvalid, visibleSteps])
+
+ const stepsTemplate = useMemo(() => {
+ return React.Children.toArray(children)
+ .filter((child, idx) => !isEmpty(stepsConfig) && !stepsConfig[idx].hidden)
+ .map((child, idx) => {
+ const stepIsActive = idx === activeStepNumber
+ const newChild =
+ !isNumber(firstDisabledStepIdx) || idx < firstDisabledStepIdx
+ ? React.cloneElement(child, { stepIsActive })
+ : null
+
+ return (
+
+ {newChild}
+
+ )
+ })
+ }, [activeStepNumber, children, firstDisabledStepIdx, stepsConfig])
+
+ const totalSteps = useMemo(() => {
+ return visibleSteps.length - 1 || 0
+ }, [visibleSteps])
+
+ const isLastStep = useMemo(() => {
+ return activeStepNumber === totalSteps
+ }, [activeStepNumber, totalSteps])
+
+ const goToNextStep = () => {
+ setActiveStepNumber(prevStep => Math.min(++prevStep, totalSteps))
+ }
+
+ const goToPreviousStep = () => setActiveStepNumber(prevStep => Math.max(--prevStep, 0))
+
+ const goToFirstInvalidStep = () => {
+ setJumpingToFirstInvalid(true)
+ }
+
+ const jumpToStep = idx => {
+ return setActiveStepNumber(idx)
+ }
+
+ const getDefaultActions = stepConfig => {
+ const defaultActions = []
+
+ if (activeStepNumber !== 0) {
+ defaultActions.push(
+
+
+ )
+}
+
+Wizard.propTypes = {
+ children: PropTypes.node.isRequired,
+ className: PropTypes.string,
+ getActions: PropTypes.func,
+ isWizardOpen: PropTypes.bool.isRequired,
+ onWizardResolve: PropTypes.func.isRequired,
+ previewText: PropTypes.string,
+ size: MODAL_SIZES,
+ stepsConfig: WIZARD_STEPS_CONFIG,
+ subTitle: PropTypes.string,
+ title: PropTypes.string.isRequired
+}
+
+Wizard.Step = ({ children }) => children
+
+export default Wizard
diff --git a/src/igz-controls/components/Wizard/Wizard.scss b/src/igz-controls/components/Wizard/Wizard.scss
new file mode 100644
index 0000000000..9e43738d98
--- /dev/null
+++ b/src/igz-controls/components/Wizard/Wizard.scss
@@ -0,0 +1,53 @@
+.wizard-form {
+ .modal__body {
+ display: flex;
+ flex-flow: column nowrap;
+ overflow: hidden;
+ padding: 0;
+
+ @media screen and (min-width: 1200px) {
+ flex-flow: row nowrap;
+ }
+ }
+
+ .wizard-form__content-container {
+ overflow-y: auto;
+ height: 100%;
+ width: 100%;
+ padding: 0 2rem 1.5rem;
+
+ @media screen and (min-width: 1200px) {
+ padding: 1.5rem 2rem 1.5rem 1rem;
+ }
+ }
+
+ .wizard-form__content {
+ min-width: 350px;
+ height: 100%;
+
+ .wizard-form__hidden-content-item {
+ position: absolute;
+ visibility: hidden;
+ height: 0;
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .wizard-form__visible-content-item {
+ height: 100%;
+ }
+ }
+
+ &__back-button,
+ &__next-button {
+ svg {
+ width: 14px;
+ }
+ }
+
+ &__next-button {
+ svg {
+ rotate: 180deg;
+ }
+ }
+}
diff --git a/src/igz-controls/components/Wizard/WizardSteps/WizardSteps.jsx b/src/igz-controls/components/Wizard/WizardSteps/WizardSteps.jsx
new file mode 100644
index 0000000000..856df806a0
--- /dev/null
+++ b/src/igz-controls/components/Wizard/WizardSteps/WizardSteps.jsx
@@ -0,0 +1,68 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isNumber } from 'lodash'
+
+import Button from '../../Button/Button'
+
+import { WIZARD_STEPS_CONFIG } from '../../../types'
+
+import './WizardSteps.scss'
+
+const WizardSteps = ({ activeStepNumber, firstDisabledStepIdx = null, jumpToStep, steps }) => {
+ const getStepClassNames = (idx, invalid) =>
+ classNames(
+ 'wizard-steps__item',
+ idx === activeStepNumber && 'wizard-steps__item_active',
+ invalid && 'wizard-steps__item_invalid'
+ )
+
+ const handleJumpToStep = (event, idx) => {
+ event.preventDefault()
+ jumpToStep(idx)
+ }
+
+ return (
+
+ {steps.map(({ id, label, invalid }, idx) => {
+ const stepIsDisabled = isNumber(firstDisabledStepIdx) && idx >= firstDisabledStepIdx
+
+ return (
+ {idx + 1}}
+ key={id}
+ label={label}
+ onClick={e => handleJumpToStep(e, idx)}
+ />
+ )
+ })}
+
+ )
+}
+
+WizardSteps.propTypes = {
+ activeStepNumber: PropTypes.number.isRequired,
+ firstDisabledStepIdx: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([null])]),
+ jumpToStep: PropTypes.func.isRequired,
+ steps: WIZARD_STEPS_CONFIG.isRequired
+}
+
+export default WizardSteps
diff --git a/src/igz-controls/components/Wizard/WizardSteps/WizardSteps.scss b/src/igz-controls/components/Wizard/WizardSteps/WizardSteps.scss
new file mode 100644
index 0000000000..637b29611c
--- /dev/null
+++ b/src/igz-controls/components/Wizard/WizardSteps/WizardSteps.scss
@@ -0,0 +1,106 @@
+@use '../../../scss/colors';
+
+.wizard-steps {
+ display: flex;
+ flex-flow: row nowrap;
+ background-color: colors.$white;
+ min-width: 260px;
+ margin: 1.5rem 0;
+ padding: 0 2rem;
+
+ @media screen and (min-width: 1200px) {
+ flex-flow: column nowrap;
+ overflow-y: auto;
+ padding: 0 1rem;
+
+ & > *:not(:last-child) {
+ margin-bottom: 10px;
+ }
+ }
+
+ .wizard-steps {
+ &__item {
+ display: block;
+ background-color: inherit;
+ color: colors.$primary;
+ border: 0;
+ border-radius: 8px;
+ font-size: 1em;
+ padding: 8px;
+ min-height: 52px;
+ height: auto;
+ width: 100%;
+
+ @media screen and (min-width: 1200px) {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+
+ & > * {
+ text-align: left;
+ white-space: normal;
+ }
+ }
+
+ .wizard-steps__indicator {
+ border-color: colors.$malibu;
+ color: colors.$malibu;
+ background-color: inherit;
+ }
+
+ &.wizard-steps__item_active {
+ background-color: colors.$malibuTwo;
+ color: colors.$cornflowerBlue;
+
+ .wizard-steps__indicator {
+ border-color: transparent;
+ color: colors.$white;
+ background-color: colors.$malibu;
+ }
+ }
+
+ &.wizard-steps__item_invalid {
+ color: colors.$amaranth;
+
+ &.wizard-steps__item_active {
+ background-color: rgba(colors.$amaranth, 0.15);
+ }
+
+ .wizard-steps__indicator {
+ border-color: colors.$amaranth;
+ color: colors.$amaranth;
+ background-color: inherit;
+ }
+ }
+
+ &:disabled {
+ border: 0;
+ color: colors.$spunPearl;
+
+ .wizard-steps__indicator {
+ border-color: colors.$spunPearl;
+ color: colors.$spunPearl;
+ background-color: inherit;
+ }
+ }
+ }
+
+ &__indicator {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border: 2px solid transparent;
+ border-radius: 50%;
+ padding: 10px;
+ margin: 0 0 10px 0;
+ width: 36px;
+ height: 36px;
+
+ @media screen and (min-width: 1200px) {
+ flex-flow: row nowrap;
+ text-align: left;
+ margin: 0 10px 0 0;
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/components/index.js b/src/igz-controls/components/index.js
new file mode 100644
index 0000000000..5c65b712f8
--- /dev/null
+++ b/src/igz-controls/components/index.js
@@ -0,0 +1,80 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+import ActionsMenu from './ActionsMenu/ActionsMenu'
+import Backdrop from './Backdrop/Backdrop'
+import BlockerSpy from './BlockerSpy/BlockerSpy'
+import Button from './Button/Button'
+import ConfirmDialog from './ConfirmDialog/ConfirmDialog'
+import CopyToClipboard from './CopyToClipboard/CopyToClipboard'
+import ErrorMessage from './ErrorMessage/ErrorMessage'
+import FormCheckBox from './FormCheckBox/FormCheckBox'
+import FormChipCell from './FormChipCell/FormChipCell'
+import FormCombobox from './FormCombobox/FormCombobox'
+import FormInput from './FormInput/FormInput'
+import FormKeyValueTable from './FormKeyValueTable/FormKeyValueTable'
+import FormOnChange from './FormOnChange/FormOnChange'
+import FormRadio from './FormRadio/FormRadio'
+import FormSelect from './FormSelect/FormSelect'
+import FormTextarea from './FormTextarea/FormTextarea'
+import FormToggle from './FormToggle/FormToggle'
+import LoadButton from './LoadButton/LoadButton'
+import Loader from './Loader/Loader'
+import LoaderForSuspenseFallback from './Loader/LoaderForSuspenseFallback'
+import Modal from './Modal/Modal'
+import PopUpDialog from './PopUpDialog/PopUpDialog'
+import ReadOnlyChips from './ReadOnlyChips/ReadOnlyChips'
+import RoundedIcon from './RoundedIcon/RoundedIcon'
+import TableCell from './TableCell/TableCell'
+import TabsSlider from './TabsSlider/TabsSlider'
+import TextTooltipTemplate from './TooltipTemplate/TextTooltipTemplate'
+import Tip from './Tip/Tip'
+import Tooltip from './Tooltip/Tooltip'
+import Wizard from './Wizard/Wizard'
+
+export {
+ ActionsMenu,
+ Backdrop,
+ BlockerSpy,
+ Button,
+ ConfirmDialog,
+ CopyToClipboard,
+ ErrorMessage,
+ FormCheckBox,
+ FormChipCell,
+ FormCombobox,
+ FormInput,
+ FormKeyValueTable,
+ FormOnChange,
+ FormRadio,
+ FormSelect,
+ FormTextarea,
+ FormToggle,
+ LoadButton,
+ Loader,
+ LoaderForSuspenseFallback,
+ Modal,
+ PopUpDialog,
+ ReadOnlyChips,
+ RoundedIcon,
+ TableCell,
+ TabsSlider,
+ TextTooltipTemplate,
+ Tip,
+ Tooltip,
+ Wizard
+}
diff --git a/src/igz-controls/constants.js b/src/igz-controls/constants.js
new file mode 100644
index 0000000000..7a393caf0c
--- /dev/null
+++ b/src/igz-controls/constants.js
@@ -0,0 +1,85 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+/*=========== GENERAL =============*/
+
+export const VIEW_SEARCH_PARAMETER = 'view'
+export const FULL_VIEW_MODE = 'full'
+
+export const DENSITY_DENSE = 'dense'
+export const DENSITY_NORMAL = 'normal'
+export const DENSITY_MEDIUM = 'medium'
+export const DENSITY_CHUNKY = 'chunky'
+
+/*=========== EVENT KEYS =============*/
+export const BACKSPACE = 'Backspace'
+export const CLICK = 'Click'
+export const DELETE = 'Delete'
+export const TAB = 'Tab'
+export const TAB_SHIFT = 'Tab+Shift'
+
+/*=========== BUTTONS =============*/
+
+export const PRIMARY_BUTTON = 'primary'
+export const SECONDARY_BUTTON = 'secondary'
+export const TERTIARY_BUTTON = 'tertiary'
+export const DANGER_BUTTON = 'danger'
+export const LABEL_BUTTON = 'label'
+
+/*=========== VALITATION =============*/
+
+export const validation = {
+ BEGIN_END_NOT_WITH: { LABEL: 'Must not begin and end with', NAME: 'beginEndNot' },
+ BEGIN_END_WITH: { LABEL: 'Must begin and end with', NAME: 'beginEnd' },
+ BEGIN_NOT_WITH: { LABEL: 'Must not begin with', NAME: 'beginNot' },
+ BEGIN_WITH: { LABEL: 'Must begin with', NAME: 'begin' },
+ END_NOT_WITH: { LABEL: 'Must not end with', NAME: 'endNot' },
+ END_WITH: { LABEL: 'Must end with', NAME: 'end' },
+ MUST_CONTAIN_EXACTLY_ONE: { LABEL: 'Must contain exactly one', NAME: 'exactlyOne' },
+ MUST_HAVE_DOT_AFTER_AT: { LABEL: 'Must have at least one . after @', NAME: 'dotAfterAt' },
+ MUST_NOT_BE: { LABEL: 'Must not be', NAME: 'mustNotBe' },
+ NO_CONSECUTIVE_CHARACTER: { LABEL: 'No consecutive characters', NAME: 'noConsecutiveCharacters' },
+ NOT_CONTAIN: { LABEL: 'Must not contain', NAME: 'notContainCharacters' },
+ ONLY_AT_THE_BEGINNING: { LABEL: 'Only at the beginning', NAME: 'onlyAtTheBeginning' },
+ REQUIRED: { LABEL: 'This field is required', NAME: 'required' },
+ VALID_CHARACTERS_WITH_REFIX: { LABEL: 'Valid characters', NAME: 'validCharactersWithPrefix' },
+ VALID_CHARACTERS: { LABEL: 'Valid characters', NAME: 'validCharacters' }
+}
+
+/*=========== STATUS CODES =============*/
+
+export const BADREQUEST_ERROR_STATUS_CODE = 400
+export const FORBIDDEN_ERROR_STATUS_CODE = 403
+export const NOTFOUND_ERROR_STATUS_CODE = 404
+export const CONFLICT_ERROR_STATUS_CODE = 409
+export const INTERNAL_SERVER_ERROR_STATUS_CODE = 500
+export const BAD_GATEWAY_ERROR_STATUS_CODE = 502
+export const SERVICE_UNAVAILABLE_ERROR_STATUS_CODE = 503
+export const GATEWAY_TIMEOUT_STATUS_CODE = 504
+
+/*=========== MODAL =============*/
+
+export const MODAL_SM = 'sm'
+export const MODAL_MD = 'md'
+export const MODAL_LG = 'lg'
+export const MODAL_MIN = 'min'
+export const MODAL_MAX = 'max'
+
+/*=========== TABLE =============*/
+
+export const MAIN_TABLE_ID = 'main-table'
+export const MAIN_TABLE_BODY_ID = 'main-table-body'
diff --git a/src/igz-controls/elements/ActionsMenuItem/ActionsMenuItem.jsx b/src/igz-controls/elements/ActionsMenuItem/ActionsMenuItem.jsx
new file mode 100644
index 0000000000..f7a6b20fba
--- /dev/null
+++ b/src/igz-controls/elements/ActionsMenuItem/ActionsMenuItem.jsx
@@ -0,0 +1,85 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { useDispatch, useSelector } from 'react-redux'
+
+import Tooltip from '../../components/Tooltip/Tooltip'
+import TextTooltipTemplate from '../../components/TooltipTemplate/TextTooltipTemplate'
+
+import { performDetailsActionHelper } from '../../utils/common.util'
+
+import './actionsMenuItem.scss'
+
+const ActionsMenuItem = ({ dataItem = {}, index, isIconDisplayed, menuItem }) => {
+ const dispatch = useDispatch()
+ const changes = useSelector(store => store.commonDetailsStore.changes)
+
+ const iconClassNames = classnames(
+ 'actions-menu__icon',
+ isIconDisplayed && 'actions-menu__icon_visible'
+ )
+ const menuClassNames = classnames(
+ 'actions-menu__option',
+ menuItem.className && `actions-menu__option_${menuItem.className}`,
+ menuItem.disabled && 'actions-menu__option_disabled'
+ )
+
+ const handleActionClick = async () => {
+ if (!menuItem.disabled) {
+ if (menuItem.allowLeaveWarning) {
+ const actionCanBePerformed = await performDetailsActionHelper(changes, dispatch)
+
+ if (actionCanBePerformed) {
+ menuItem.onClick(dataItem)
+ }
+ } else {
+ menuItem.onClick(dataItem)
+ }
+ }
+ }
+
+ return (
+
+ {menuItem.icon}
+ {menuItem.label}
+
+
+ )
+}
+
+ActionsMenuItem.propTypes = {
+ dataItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+ index: PropTypes.number.isRequired,
+ isIconDisplayed: PropTypes.bool.isRequired,
+ menuItem: PropTypes.object.isRequired
+}
+
+export default ActionsMenuItem
diff --git a/src/igz-controls/elements/ActionsMenuItem/actionsMenuItem.scss b/src/igz-controls/elements/ActionsMenuItem/actionsMenuItem.scss
new file mode 100644
index 0000000000..9f89b0d8aa
--- /dev/null
+++ b/src/igz-controls/elements/ActionsMenuItem/actionsMenuItem.scss
@@ -0,0 +1,66 @@
+@use '../../scss/shadows';
+@use '../../scss/colors';
+
+.actions-menu {
+ &__icon {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ width: 25px;
+ height: 25px;
+ margin-right: 5px;
+
+ svg {
+ path {
+ &:first-child {
+ fill: colors.$topaz;
+ }
+ }
+ }
+
+ &_visible {
+ display: flex;
+ }
+ }
+
+ &__option {
+ padding: 10px;
+ color: colors.$primary;
+ cursor: pointer;
+
+ &:hover {
+ background-color: colors.$alabaster;
+ }
+
+ &_danger {
+ color: colors.$amaranth;
+
+ svg {
+ path:first-child {
+ fill: colors.$amaranth;
+ }
+ }
+ }
+
+ &_disabled {
+ color: colors.$spunPearl;
+ cursor: not-allowed;
+
+ .actions-menu__icon {
+ svg {
+ path:first-child {
+ fill: rgba(colors.$black, 0.2);
+ }
+ }
+ }
+ }
+
+ & > * {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ }
+ }
+}
diff --git a/src/igz-controls/elements/FormActionButton/FormActionButton.jsx b/src/igz-controls/elements/FormActionButton/FormActionButton.jsx
new file mode 100644
index 0000000000..46a70b3ffd
--- /dev/null
+++ b/src/igz-controls/elements/FormActionButton/FormActionButton.jsx
@@ -0,0 +1,71 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import Plus from '../../images/plus.svg?react'
+
+let FormActionButton = (
+ {
+ disabled = false,
+ fields,
+ fieldsPath,
+ hidden = false,
+ id = '',
+ label = 'Add new item',
+ onClick
+ },
+ ref
+) => {
+ return (
+ <>
+ {!hidden && (
+
+
onClick(event, fields, fieldsPath)}
+ disabled={disabled}
+ >
+
+
+ ) : (
+
+ {editingItem?.ui?.index === index && (
+ <>
+ applyChanges(event, index)}
+ tooltipText="Apply"
+ disabled={disabled}
+ >
+
+ discardOrDelete(event, fieldsPath, index)}
+ tooltipText={editingItem.ui?.isNew ? 'Delete' : 'Discard changes'}
+ disabled={disabled}
+ >
+ {editingItem.ui?.isNew ?
+
+ )}
+ {(!editingItem || editingItem?.ui?.index !== index) && (
+ <>
+ {
+ event.preventDefault()
+ }}
+ tooltipText="Edit"
+ disabled={disabled}
+ >
+
+
+ {!deleteButtonIsHidden && (
+ {
+ deleteRow(event, fieldsPath, index)
+ }}
+ tooltipText="Delete"
+ disabled={disabled}
+ >
+
+ )}
+
+ )}
+
+ )
+}
+
+FormRowActions.propTypes = {
+ applyChanges: PropTypes.func.isRequired,
+ deleteButtonIsHidden: PropTypes.bool,
+ deleteRow: PropTypes.func.isRequired,
+ disabled: PropTypes.bool,
+ discardOrDelete: PropTypes.func.isRequired,
+ editingItem: FORM_TABLE_EDITING_ITEM,
+ fieldsPath: PropTypes.string.isRequired,
+ hidden: PropTypes.bool,
+ index: PropTypes.number.isRequired
+}
+
+export default FormRowActions
diff --git a/src/igz-controls/elements/OptionsMenu/OptionsMenu.jsx b/src/igz-controls/elements/OptionsMenu/OptionsMenu.jsx
new file mode 100644
index 0000000000..3114c53d0e
--- /dev/null
+++ b/src/igz-controls/elements/OptionsMenu/OptionsMenu.jsx
@@ -0,0 +1,71 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { forwardRef, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { CSSTransition } from 'react-transition-group'
+
+import PopUpDialog from '../../components/PopUpDialog/PopUpDialog'
+
+import './optionsMenu.scss'
+
+let OptionsMenu = (
+ { children = [], show, timeout = 300 },
+ { refInputContainer, validationRulesRef }
+) => {
+ const { width: dropdownWidth } = refInputContainer?.current
+ ? refInputContainer.current.getBoundingClientRect()
+ : {}
+ const internalValidationRulesRef = useRef(null)
+ validationRulesRef ??= internalValidationRulesRef
+
+ return (
+
+
+
+
+
+ )
+}
+
+OptionsMenu = forwardRef(OptionsMenu)
+
+OptionsMenu.displayName = 'OptionsMenu'
+
+OptionsMenu.propTypes = {
+ children: PropTypes.arrayOf(PropTypes.element),
+ show: PropTypes.bool,
+ timeout: PropTypes.number
+}
+
+export default OptionsMenu
diff --git a/src/igz-controls/elements/OptionsMenu/optionsMenu.scss b/src/igz-controls/elements/OptionsMenu/optionsMenu.scss
new file mode 100644
index 0000000000..5d97488566
--- /dev/null
+++ b/src/igz-controls/elements/OptionsMenu/optionsMenu.scss
@@ -0,0 +1,45 @@
+@use '../../scss/colors';
+@use '../../scss/shadows';
+@use '../../scss/borders';
+
+.options-menu {
+ &__body {
+ width: 100%;
+ max-height: 250px;
+ margin: 0;
+ padding: 0;
+ overflow-y: auto;
+ color: colors.$mulledWineTwo;
+ font-size: 1rem;
+ list-style-type: none;
+ background-color: colors.$white;
+ border: borders.$primaryBorder;
+ border-radius: 4px;
+ box-shadow: shadows.$previewBoxShadow;
+ }
+
+ .pop-up-dialog {
+ width: 100%;
+ padding: 0;
+ }
+
+ &-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;
+ }
+ }
+}
diff --git a/src/igz-controls/elements/SelectOption/SelectOption.jsx b/src/igz-controls/elements/SelectOption/SelectOption.jsx
new file mode 100644
index 0000000000..848472e61d
--- /dev/null
+++ b/src/igz-controls/elements/SelectOption/SelectOption.jsx
@@ -0,0 +1,110 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import FormCheckBox from '../../components/FormCheckBox/FormCheckBox'
+import Tooltip from '../../components/Tooltip/Tooltip'
+import TextTooltipTemplate from '../../components/TooltipTemplate/TextTooltipTemplate'
+
+import { SELECT_OPTION } from '../../types'
+
+import Checkmark from '../../images/checkmark.svg?react'
+
+import './selectOption.scss'
+
+const SelectOption = ({
+ item,
+ name,
+ onClick = () => {},
+ multiple = false,
+ selectedId,
+ withSelectedIcon = true
+}) => {
+ const selectClassName = classnames(
+ 'select__item',
+ multiple && 'multiple',
+ item.hidden && 'hidden',
+ item.disabled && 'disabled'
+ )
+
+ if (multiple) {
+ return (
+
+
+ {item.status &&
+
+ )
+ }
+
+ return (
+ {
+ !item.disabled && onClick(item.id)
+ }}
+ data-custom-id={item.id}
+ >
+
+
+
+ {item.icon && (
+
+ {item.icon}
+
+ )}
+ {item.status && 0}
+ template={
+
+ {item.subLabel && (
+
}
+ >
+
{item.subLabel}
+
+ )}
+
+ {withSelectedIcon && item.id === selectedId &&
}
+
+ )
+}
+
+SelectOption.propTypes = {
+ name: PropTypes.string.isRequired,
+ item: SELECT_OPTION.isRequired,
+ onClick: PropTypes.func,
+ multiple: PropTypes.bool,
+ selectedId: PropTypes.string,
+ withSelectedIcon: PropTypes.bool
+}
+
+export default SelectOption
diff --git a/src/igz-controls/elements/SelectOption/selectOption.scss b/src/igz-controls/elements/SelectOption/selectOption.scss
new file mode 100644
index 0000000000..841f3469dd
--- /dev/null
+++ b/src/igz-controls/elements/SelectOption/selectOption.scss
@@ -0,0 +1,98 @@
+@use '../../scss/colors';
+@use '../../scss/mixins';
+
+.select {
+ &__item {
+ display: flex;
+ align-items: center;
+ flex-flow: row wrap;
+ width: 100%;
+ min-height: 45px;
+ padding: 10px 15px;
+
+ &.multiple {
+ padding: 0 15px;
+ min-height: 0;
+
+ input[type='checkbox'] ~ label {
+ padding-top: 16px;
+ padding-bottom: 16px;
+ }
+ }
+
+ &.hidden {
+ display: none;
+ }
+
+ .form-field-checkbox {
+ flex: 1;
+ height: 100%;
+ width: 100%;
+ }
+
+ &:hover {
+ background-color: colors.$alabaster;
+ cursor: pointer;
+ }
+
+ &.disabled {
+ color: colors.$spunPearl;
+ background: colors.$white;
+ cursor: not-allowed;
+ }
+
+ .status {
+ margin: 0 10px;
+ }
+
+ .all {
+ margin: 0;
+
+ @include mixins.statusState(none, false);
+ }
+
+ .label-row {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ &-label {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: center;
+ justify-content: flex-start;
+ flex: 1;
+ }
+
+ &-main-label {
+ width: 100%;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ &-sub-label {
+ margin-top: 5px;
+ font-size: 13px;
+ width: 100%;
+ }
+
+ &-icon {
+ display: flex;
+ margin-right: 10px;
+ }
+
+ .checkmark {
+ align-self: flex-start;
+ margin: 0 0 0 10px;
+
+ path {
+ fill: colors.$chateauGreen;
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/elements/TableHead/TableHead.jsx b/src/igz-controls/elements/TableHead/TableHead.jsx
new file mode 100644
index 0000000000..dc16903c48
--- /dev/null
+++ b/src/igz-controls/elements/TableHead/TableHead.jsx
@@ -0,0 +1,97 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isEmpty } from 'lodash'
+
+import Tip from '../../components/Tip/Tip'
+import Tooltip from '../../components/Tooltip/Tooltip'
+import TextTooltipTemplate from '../../components/TooltipTemplate/TextTooltipTemplate'
+
+import { SORT_PROPS } from '../../types'
+
+let TableHead = (
+ { content, hideActionsMenu = false, mainRowItemsCount, selectedItem, sortProps = null },
+ ref
+) => {
+ const getHeaderCellClasses = (
+ headerId,
+ isSortable,
+ tableItemClassName,
+ headerCellClassName,
+ index
+ ) =>
+ classNames(
+ 'table-header__cell',
+ tableItemClassName,
+ headerCellClassName,
+ isSortable && 'sortable-header-cell',
+ isSortable && sortProps?.selectedColumnName === headerId && 'sortable-header-cell_active',
+ !isEmpty(selectedItem) && index >= mainRowItemsCount && 'table-body__cell_hidden'
+ )
+
+ return (
+
+
+ {content.map(({ headerLabel, headerId, isSortable, ...tableItem }, index) => {
+ return tableItem.type !== 'hidden' && !tableItem.hidden && !tableItem.headerIsHidden ? (
+ sortProps?.sortTable(headerId) : null}
+ >
+
+ {headerLabel}
+ {isSortable && sortProps?.getSortingIcon(headerId)}
+
+
+
+ {tableItem.tip &&
+ ) : null
+ })}
+ {!hideActionsMenu &&
+
+ )
+}
+
+TableHead = forwardRef(TableHead)
+
+TableHead.displayName = 'TableHead'
+
+TableHead.propTypes = {
+ content: PropTypes.array.isRequired,
+ hideActionsMenu: PropTypes.bool,
+ mainRowItemsCount: PropTypes.number.isRequired,
+ selectedItem: PropTypes.object.isRequired,
+ sortProps: SORT_PROPS
+}
+
+export default TableHead
diff --git a/src/igz-controls/elements/TableLinkCell/TableLinkCell.jsx b/src/igz-controls/elements/TableLinkCell/TableLinkCell.jsx
new file mode 100644
index 0000000000..75299496ac
--- /dev/null
+++ b/src/igz-controls/elements/TableLinkCell/TableLinkCell.jsx
@@ -0,0 +1,150 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import { Link } from 'react-router-dom'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import Tooltip from '../../components/Tooltip/Tooltip'
+import TextTooltipTemplate from '../../components/TooltipTemplate/TextTooltipTemplate'
+
+import { formatDatetime } from '../../utils/datetime.util'
+import { truncateUid } from '../../utils/string.util'
+
+import Arrow from '../../images/arrow.svg?react'
+
+import './tableLinkCell.scss'
+
+const TableLinkCell = ({
+ cellData = {},
+ className = '',
+ item,
+ link,
+ selectItem,
+ selectedItem = {},
+ showExpandButton = false,
+ toggleRow = null
+}) => {
+ const tableCellClassNames = classnames(
+ 'table-body__cell',
+ cellData.className,
+ className,
+ cellData.bodyCellClassName
+ )
+ const itemNameClassNames = classnames('item-name')
+ const { value: stateValue, label: stateLabel, className: stateClassName } = item.state ?? {}
+
+ return (
+
+ {cellData.linkIsExternal ? (
+
+ ) : (
+
+
+
+ {cellData.showTag && (
+
}>
+
{item.tag}
+
+ )}
+
+ {(item.startTime || item.created || item.updated) &&
+ cellData.type !== 'date' &&
+ (cellData.showDate || cellData.showUpdatedDate) && (
+
+ {cellData.showUpdatedDate
+ ? formatDatetime(item.updated, 'N/A')
+ : formatDatetime(
+ item.startTime || item.created,
+ stateValue === 'aborted' ? 'N/A' : 'Not yet started'
+ )}
+
+ )}
+ {cellData.value !== item.uid && cellData.value !== item.hash && (
+ {truncateUid(item.uid || item.hash)}
+ )}
+
+ )}
+ {cellData.additionalInfo && Object.values(selectedItem).length !== 0 && (
+ {cellData.additionalInfo}
+ )}
+
+ )}
+ {showExpandButton && (
+ {
+ toggleRow && toggleRow(e, item)
+ }}
+ className="expand-arrow"
+ />
+ )}
+
+ )
+}
+
+TableLinkCell.propTypes = {
+ cellData: PropTypes.object,
+ className: PropTypes.string,
+ item: PropTypes.object.isRequired,
+ link: PropTypes.string.isRequired,
+ selectItem: PropTypes.func.isRequired,
+ selectedItem: PropTypes.object,
+ showExpandButton: PropTypes.bool,
+ toggleRow: PropTypes.func
+}
+
+export default TableLinkCell
diff --git a/src/igz-controls/elements/TableLinkCell/tableLinkCell.scss b/src/igz-controls/elements/TableLinkCell/tableLinkCell.scss
new file mode 100644
index 0000000000..167b4b6e5e
--- /dev/null
+++ b/src/igz-controls/elements/TableLinkCell/tableLinkCell.scss
@@ -0,0 +1,77 @@
+@use '../../scss/colors';
+
+.table {
+ .table-body__cell {
+ line-height: 20px;
+
+ .name-wrapper {
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ align-items: center;
+
+ .item {
+ &-name {
+ color: colors.$primary;
+ font-weight: bold;
+
+ &.function-name {
+ max-width: 120px;
+ }
+ }
+
+ &-tag {
+ max-width: 150px;
+
+ span {
+ display: inline;
+ }
+ }
+ }
+
+ .link {
+ display: flex;
+ width: 100%;
+ color: colors.$primary;
+ }
+ }
+
+ .link-subtext {
+ color: colors.$topaz;
+ }
+
+ .date-uid-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: normal;
+ font-size: 12px;
+ font-family: Roboto, sans-serif;
+ font-style: normal;
+ margin-top: 5px;
+ width: max-content;
+ min-width: 100%;
+
+ & > span {
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
+ }
+
+ span {
+ width: auto;
+ }
+ }
+
+ &.link-blue {
+ .name-wrapper {
+ .link {
+ .item-name {
+ color: colors.$cornflowerBlue;
+ font-weight: 400;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/elements/TableTypeCell/TableTypeCell.jsx b/src/igz-controls/elements/TableTypeCell/TableTypeCell.jsx
new file mode 100644
index 0000000000..a8507f0a72
--- /dev/null
+++ b/src/igz-controls/elements/TableTypeCell/TableTypeCell.jsx
@@ -0,0 +1,57 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+import { capitalize } from 'lodash'
+import classnames from 'classnames'
+
+import Tooltip from '../../components/Tooltip/Tooltip'
+import TextTooltipTemplate from '../../components/TooltipTemplate/TextTooltipTemplate'
+
+const TableTypeCell = ({ cellData, className = '' }) => {
+ const cellClassNames = classnames(
+ 'table-body__cell',
+ cellData.className,
+ cellData.bodyCellClassName,
+ className
+ )
+
+ return (
+
+
+ )
+}
+
+TableTypeCell.propTypes = {
+ cellData: PropTypes.object.isRequired,
+ className: PropTypes.string
+}
+
+export default TableTypeCell
diff --git a/src/igz-controls/elements/ValidationTemplate/ValidationTemplate.jsx b/src/igz-controls/elements/ValidationTemplate/ValidationTemplate.jsx
new file mode 100644
index 0000000000..a27de6c410
--- /dev/null
+++ b/src/igz-controls/elements/ValidationTemplate/ValidationTemplate.jsx
@@ -0,0 +1,48 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import Checkmark from '../../images/success_done.svg?react'
+import Close from '../../images/close.svg?react'
+
+import './ValidationTemplate.scss'
+
+const ValidationTemplate = ({ valid, validationMessage }) => {
+ const validationClasses = classnames('validation-option', valid && 'text-muted')
+
+ return (
+
+
+ {valid ? (
+
+ {validationMessage}
+
+ )
+}
+
+ValidationTemplate.propTypes = {
+ valid: PropTypes.bool.isRequired,
+ validationMessage: PropTypes.string.isRequired
+}
+
+export default ValidationTemplate
diff --git a/src/igz-controls/elements/ValidationTemplate/ValidationTemplate.scss b/src/igz-controls/elements/ValidationTemplate/ValidationTemplate.scss
new file mode 100644
index 0000000000..a62ab6c599
--- /dev/null
+++ b/src/igz-controls/elements/ValidationTemplate/ValidationTemplate.scss
@@ -0,0 +1,36 @@
+@use '../../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: colors.$brightTurquoise;
+ }
+ }
+
+ &_invalid {
+ width: 12px;
+ height: 12px;
+
+ path {
+ fill: colors.$amaranth;
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/elements/index.js b/src/igz-controls/elements/index.js
new file mode 100644
index 0000000000..0dd0b67aca
--- /dev/null
+++ b/src/igz-controls/elements/index.js
@@ -0,0 +1,38 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+import ActionsMenuItem from './ActionsMenuItem/ActionsMenuItem'
+import FormActionButton from './FormActionButton/FormActionButton'
+import FormRowActions from './FormRowActions/FormRowActions'
+import OptionsMenu from './OptionsMenu/OptionsMenu'
+import SelectOption from './SelectOption/SelectOption'
+import TableHead from './TableHead/TableHead'
+import TableLinkCell from './TableLinkCell/TableLinkCell'
+import TableTypeCell from './TableTypeCell/TableTypeCell'
+import ValidationTemplate from './ValidationTemplate/ValidationTemplate'
+
+export {
+ ActionsMenuItem,
+ FormActionButton,
+ FormRowActions,
+ OptionsMenu,
+ SelectOption,
+ TableHead,
+ TableLinkCell,
+ TableTypeCell,
+ ValidationTemplate
+}
diff --git a/src/igz-controls/fonts/roboto-v27-latin-300.eot b/src/igz-controls/fonts/roboto-v27-latin-300.eot
new file mode 100644
index 0000000000..d37d5fa4c7
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-300.eot differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-300.svg b/src/igz-controls/fonts/roboto-v27-latin-300.svg
new file mode 100644
index 0000000000..804f3a9509
--- /dev/null
+++ b/src/igz-controls/fonts/roboto-v27-latin-300.svg
@@ -0,0 +1 @@
+Error 500 (Server Error)!!1 500. That’s an error.
There was an error. Please try again later. That’s all we know.
Error 500 (Server Error)!!1 500. That’s an error.
There was an error. Please try again later. That’s all we know.
+
+
+
diff --git a/src/igz-controls/fonts/roboto-v27-latin-500italic.ttf b/src/igz-controls/fonts/roboto-v27-latin-500italic.ttf
new file mode 100644
index 0000000000..f642959056
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-500italic.ttf differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-500italic.woff b/src/igz-controls/fonts/roboto-v27-latin-500italic.woff
new file mode 100644
index 0000000000..35d271525b
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-500italic.woff differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-500italic.woff2 b/src/igz-controls/fonts/roboto-v27-latin-500italic.woff2
new file mode 100644
index 0000000000..04f45a1ea0
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-500italic.woff2 differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-700.eot b/src/igz-controls/fonts/roboto-v27-latin-700.eot
new file mode 100644
index 0000000000..3e2d31635c
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-700.eot differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-700.svg b/src/igz-controls/fonts/roboto-v27-latin-700.svg
new file mode 100644
index 0000000000..11db87dd0e
--- /dev/null
+++ b/src/igz-controls/fonts/roboto-v27-latin-700.svg
@@ -0,0 +1,309 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/fonts/roboto-v27-latin-700.ttf b/src/igz-controls/fonts/roboto-v27-latin-700.ttf
new file mode 100644
index 0000000000..489236cd31
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-700.ttf differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-700.woff b/src/igz-controls/fonts/roboto-v27-latin-700.woff
new file mode 100644
index 0000000000..a5d98fc620
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-700.woff differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-700.woff2 b/src/igz-controls/fonts/roboto-v27-latin-700.woff2
new file mode 100644
index 0000000000..01d05fa509
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-700.woff2 differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-700italic.eot b/src/igz-controls/fonts/roboto-v27-latin-700italic.eot
new file mode 100644
index 0000000000..213bea8650
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-700italic.eot differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-700italic.svg b/src/igz-controls/fonts/roboto-v27-latin-700italic.svg
new file mode 100644
index 0000000000..804f3a9509
--- /dev/null
+++ b/src/igz-controls/fonts/roboto-v27-latin-700italic.svg
@@ -0,0 +1 @@
+Error 500 (Server Error)!!1 500. That’s an error.
There was an error. Please try again later. That’s all we know.
+
+
+
diff --git a/src/igz-controls/fonts/roboto-v27-latin-italic.ttf b/src/igz-controls/fonts/roboto-v27-latin-italic.ttf
new file mode 100644
index 0000000000..8b358101cd
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-italic.ttf differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-italic.woff b/src/igz-controls/fonts/roboto-v27-latin-italic.woff
new file mode 100644
index 0000000000..c8bc60241f
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-italic.woff differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-italic.woff2 b/src/igz-controls/fonts/roboto-v27-latin-italic.woff2
new file mode 100644
index 0000000000..05508b03ba
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-italic.woff2 differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-regular.eot b/src/igz-controls/fonts/roboto-v27-latin-regular.eot
new file mode 100644
index 0000000000..6dd5e3a025
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-regular.eot differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-regular.svg b/src/igz-controls/fonts/roboto-v27-latin-regular.svg
new file mode 100644
index 0000000000..627f5a368c
--- /dev/null
+++ b/src/igz-controls/fonts/roboto-v27-latin-regular.svg
@@ -0,0 +1,308 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/fonts/roboto-v27-latin-regular.ttf b/src/igz-controls/fonts/roboto-v27-latin-regular.ttf
new file mode 100644
index 0000000000..637971a1b6
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-regular.ttf differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-regular.woff b/src/igz-controls/fonts/roboto-v27-latin-regular.woff
new file mode 100644
index 0000000000..86b3863726
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-regular.woff differ
diff --git a/src/igz-controls/fonts/roboto-v27-latin-regular.woff2 b/src/igz-controls/fonts/roboto-v27-latin-regular.woff2
new file mode 100644
index 0000000000..ebe1795f85
Binary files /dev/null and b/src/igz-controls/fonts/roboto-v27-latin-regular.woff2 differ
diff --git a/src/igz-controls/fonts/source-code-pro-v14-latin-regular.eot b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.eot
new file mode 100644
index 0000000000..815e32c263
Binary files /dev/null and b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.eot differ
diff --git a/src/igz-controls/fonts/source-code-pro-v14-latin-regular.svg b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.svg
new file mode 100644
index 0000000000..8ddac5e084
--- /dev/null
+++ b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.svg
@@ -0,0 +1,341 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/fonts/source-code-pro-v14-latin-regular.ttf b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.ttf
new file mode 100644
index 0000000000..814a6d5a84
Binary files /dev/null and b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.ttf differ
diff --git a/src/igz-controls/fonts/source-code-pro-v14-latin-regular.woff b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.woff
new file mode 100644
index 0000000000..e6380573bd
Binary files /dev/null and b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.woff differ
diff --git a/src/igz-controls/fonts/source-code-pro-v14-latin-regular.woff2 b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.woff2
new file mode 100644
index 0000000000..a8c2808ac4
Binary files /dev/null and b/src/igz-controls/fonts/source-code-pro-v14-latin-regular.woff2 differ
diff --git a/src/igz-controls/hooks/index.js b/src/igz-controls/hooks/index.js
new file mode 100644
index 0000000000..c74818993a
--- /dev/null
+++ b/src/igz-controls/hooks/index.js
@@ -0,0 +1,24 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+export { useChipCell } from './useChipCell.hook'
+export { useDebounce } from './useDebounce.hook'
+export { useDetails } from './useDetails.hook'
+export { useDetailsHeader } from './useDetailsHeader.hook'
+export { useDetectOutsideClick } from './useDetectOutsideClick.hook'
+export { useFormTable } from './useFormTable.hook'
+export { useHiddenChipsBlock } from './useHiddenChipsBlock.hook'
+export { useTable } from './useTable.hook'
diff --git a/src/igz-controls/hooks/useChipCell.hook.js b/src/igz-controls/hooks/useChipCell.hook.js
new file mode 100644
index 0000000000..4c7c4f0f3c
--- /dev/null
+++ b/src/igz-controls/hooks/useChipCell.hook.js
@@ -0,0 +1,194 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { throttle } from 'lodash'
+
+import {
+ getScssVariableValue,
+ getTransitionEndEventName,
+ isEveryObjectValueEmpty
+} from '../utils/common.util'
+import { getFirstScrollableParent } from '../utils/getFirstScrollableParent.util'
+
+export const useChipCell = (isEditMode, visibleChipsMaxLength, withInitialParentWidth) => {
+ const [showHiddenChips, setShowHiddenChips] = useState(false)
+ const [chipsSizes, setChipsSizes] = useState({})
+ const [showChips, setShowChips] = useState(false)
+ const [chipCellInitialWidth, setChipCellInitialWidth] = useState(0)
+ const [visibleChipsCount, setVisibleChipsCount] = useState(8)
+
+ const chipBlockMarginRight = useMemo(
+ () => parseInt(getScssVariableValue('--chipBlockMarginRight')),
+ []
+ )
+ const transitionEndEventName = useMemo(() => getTransitionEndEventName(), [])
+
+ const chipsCellRef = useRef()
+ const chipsWrapperRef = useRef()
+ const hiddenChipsCounterRef = useRef()
+ const hiddenChipsPopUpRef = useRef()
+
+ const handleShowElements = useCallback(
+ event => {
+ if (!isEditMode || (isEditMode && visibleChipsMaxLength)) {
+ if (hiddenChipsCounterRef.current?.contains(event.target) && !showHiddenChips) {
+ setShowHiddenChips(true)
+ } else {
+ setShowHiddenChips(false)
+ }
+ }
+
+ event && hiddenChipsCounterRef.current?.contains(event.target) && event.stopPropagation()
+ },
+ [isEditMode, showHiddenChips, visibleChipsMaxLength]
+ )
+
+ useEffect(() => {
+ if (showHiddenChips) {
+ window.addEventListener('click', handleShowElements, true)
+ }
+
+ return () => window.removeEventListener('click', handleShowElements, true)
+ }, [showHiddenChips, handleShowElements])
+
+ useEffect(() => {
+ if (chipsCellRef.current?.getBoundingClientRect().width) {
+ setChipCellInitialWidth(state => {
+ if (!state) {
+ return chipsCellRef.current?.getBoundingClientRect().width
+ }
+ })
+ }
+ }, [])
+
+ const handleScroll = useCallback(
+ event => {
+ if (event.target.parentElement !== hiddenChipsPopUpRef?.current) {
+ setShowHiddenChips(false)
+ }
+ },
+ [hiddenChipsPopUpRef]
+ )
+
+ useEffect(() => {
+ if (showHiddenChips) {
+ window.addEventListener('scroll', handleScroll, true)
+ }
+
+ return () => window.removeEventListener('scroll', handleScroll, true)
+ }, [handleScroll, showHiddenChips])
+
+ const resizeChipCell = useCallback(() => {
+ if (hiddenChipsPopUpRef?.current) {
+ const scrollableParent = getFirstScrollableParent(hiddenChipsCounterRef.current.offsetParent)
+ const scrollableParentRect = scrollableParent.getBoundingClientRect()
+ const hiddenChipsCounterRect = hiddenChipsCounterRef.current?.getBoundingClientRect()
+
+ // Check if the hiddenChipsCounterRect is outside the boundaries of the scrollableParentRect or the window
+ if (
+ hiddenChipsCounterRect.left < scrollableParentRect.left ||
+ hiddenChipsCounterRect.top < scrollableParentRect.top ||
+ hiddenChipsCounterRect.right > scrollableParentRect.right ||
+ hiddenChipsCounterRect.bottom > scrollableParentRect.bottom ||
+ hiddenChipsCounterRect.right > window.innerWidth ||
+ hiddenChipsCounterRect.bottom > window.innerHeight
+ ) {
+ setShowHiddenChips(false)
+ }
+ }
+
+ if (!isEditMode && !isEveryObjectValueEmpty(chipsSizes)) {
+ const parentSize = withInitialParentWidth
+ ? chipCellInitialWidth
+ : chipsCellRef.current?.getBoundingClientRect().width
+ const hiddenChipsCounterWidth =
+ (hiddenChipsCounterRef.current?.getBoundingClientRect().width ?? 0) + chipBlockMarginRight
+
+ let chipsLengthSum = 0
+ let chipIndex = 0
+ const chipsSizesList = Object.values(chipsSizes)
+
+ chipsSizesList.every((chipSize, index) => {
+ const chipSizeWithMargin = chipSize + chipBlockMarginRight
+ const isLastChip = index === chipsSizesList.length - 1
+ const newChipsLengthSum = chipsLengthSum + chipSizeWithMargin
+ const wouldExceedWithCounter = newChipsLengthSum + hiddenChipsCounterWidth > parentSize
+ const wouldExceedWithoutCounter = newChipsLengthSum > parentSize
+
+ // If we've exceeded the limit
+ if (wouldExceedWithCounter) {
+ // Special case: last chip might fit without the counter
+ if (isLastChip && !wouldExceedWithoutCounter) {
+ chipsLengthSum = newChipsLengthSum
+ chipIndex = chipsSizesList.length
+ return true
+ }
+
+ // Stop here - this chip doesn't fit
+ chipIndex = index
+ return false
+ }
+
+ // Chip fits, add it
+ chipsLengthSum = newChipsLengthSum
+
+ if (isLastChip) {
+ chipIndex = chipsSizesList.length
+ }
+
+ return true
+ })
+
+ setVisibleChipsCount(chipIndex)
+ setShowChips(true)
+ }
+ }, [chipBlockMarginRight, chipCellInitialWidth, chipsSizes, isEditMode, withInitialParentWidth])
+
+ useEffect(() => {
+ resizeChipCell()
+ }, [resizeChipCell])
+
+ useEffect(() => {
+ const resizeChipCellDebounced = throttle(resizeChipCell, 500)
+
+ if (!isEditMode) {
+ window.addEventListener('resize', resizeChipCellDebounced)
+ window.addEventListener(transitionEndEventName, resizeChipCellDebounced)
+
+ return () => {
+ window.removeEventListener('resize', resizeChipCellDebounced)
+ window.removeEventListener(transitionEndEventName, resizeChipCellDebounced)
+ }
+ }
+ }, [resizeChipCell, isEditMode, transitionEndEventName])
+
+ return {
+ chipsCellRef,
+ chipsWrapperRef,
+ handleShowElements,
+ hiddenChipsCounterRef,
+ hiddenChipsPopUpRef,
+ setChipsSizes,
+ setShowHiddenChips,
+ showChips,
+ showHiddenChips,
+ visibleChipsCount
+ }
+}
diff --git a/src/igz-controls/hooks/useDebounce.hook.js b/src/igz-controls/hooks/useDebounce.hook.js
new file mode 100644
index 0000000000..acc8776148
--- /dev/null
+++ b/src/igz-controls/hooks/useDebounce.hook.js
@@ -0,0 +1,48 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import { useCallback, useRef } from 'react'
+
+export const useDebounce = () => {
+ const timeout = useRef(null)
+ const lastValue = useRef(null)
+ const lastResult = useRef(null)
+
+ return useCallback((validate, time) => {
+ return value => {
+ return new Promise(resolve => {
+ if (timeout.current) {
+ timeout.current()
+ }
+
+ if (value !== lastValue.current) {
+ const timerId = setTimeout(() => {
+ lastValue.current = value
+ lastResult.current = validate(value)
+ resolve(lastResult.current)
+ }, time)
+
+ timeout.current = () => {
+ clearTimeout(timerId)
+ resolve(true)
+ }
+ } else {
+ resolve(lastResult.current)
+ }
+ })
+ }
+ }, [])
+}
diff --git a/src/igz-controls/hooks/useDetails.hook.jsx b/src/igz-controls/hooks/useDetails.hook.jsx
new file mode 100644
index 0000000000..15037b9ed8
--- /dev/null
+++ b/src/igz-controls/hooks/useDetails.hook.jsx
@@ -0,0 +1,321 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import arrayMutators from 'final-form-arrays'
+import classnames from 'classnames'
+import { Form } from 'react-final-form'
+import { cloneDeep, isEqual, pickBy } from 'lodash'
+import { createForm } from 'final-form'
+import { useDispatch, useSelector } from 'react-redux'
+import { useLocation, useParams } from 'react-router-dom'
+
+import BlockerSpy from '../components/BlockerSpy/BlockerSpy'
+import ErrorMessage from '../components/ErrorMessage/ErrorMessage'
+import Loader from '../components/Loader/Loader'
+import TabsSlider from '../components/TabsSlider/TabsSlider'
+import ConfirmDialog from '../components/ConfirmDialog/ConfirmDialog'
+
+import {
+ removeDetailsPopUpInfoContent,
+ removeInfoContent,
+ resetChanges,
+ setDetailsPopUpInfoContent,
+ setEditMode,
+ setFiltersWasHandled,
+ setInfoContent,
+ showWarning
+} from '../reducers/commonDetailsReducer'
+import { PRIMARY_BUTTON, TERTIARY_BUTTON } from '../constants'
+import { VIEW_SEARCH_PARAMETER } from '../constants'
+import { DETAILS_MENU } from '../types'
+import { setFieldState } from '../utils/form.util'
+
+const DetailsContainer = ({
+ blocker,
+ commonDetailsStore,
+ detailsMenu,
+ detailsPanelClassNames,
+ detailsPopUpSelectedTab = '',
+ detailsRef,
+ detailsStore,
+ doNotLeavePage,
+ formRef,
+ isDetailsPopUp = null,
+ leavePage,
+ params,
+ renderHeader,
+ renderTabsContent,
+ setBlocker,
+ setDetailsPopUpSelectedTab = null,
+ shouldDetailsBlock,
+ withActionMenu = true
+}) => {
+ return (
+
+ )
+}
+
+DetailsContainer.propTypes = {
+ blocker: PropTypes.object.isRequired,
+ detailsMenu: DETAILS_MENU.isRequired,
+ detailsPanelClassNames: PropTypes.string.isRequired,
+ detailsPopUpSelectedTab: PropTypes.string,
+ detailsRef: PropTypes.object.isRequired,
+ detailsStore: PropTypes.object.isRequired,
+ commonDetailsStore: PropTypes.object.isRequired,
+ doNotLeavePage: PropTypes.func.isRequired,
+ formRef: PropTypes.object.isRequired,
+ isDetailsPopUp: PropTypes.bool,
+ leavePage: PropTypes.func.isRequired,
+ params: PropTypes.object.isRequired,
+ renderHeader: PropTypes.func.isRequired,
+ renderTabsContent: PropTypes.func.isRequired,
+ setBlocker: PropTypes.func.isRequired,
+ setDetailsPopUpSelectedTab: PropTypes.func,
+ shouldDetailsBlock: PropTypes.func.isRequired,
+ withActionMenu: PropTypes.bool
+}
+
+export const useDetails = ({
+ applyDetailsChanges,
+ applyDetailsChangesCallback,
+ formInitialValues,
+ isDetailsPopUp,
+ isDetailsScreen,
+ selectedItem
+}) => {
+ const [blocker, setBlocker] = useState({})
+ const applyChangesRef = useRef()
+ const dispatch = useDispatch()
+ const detailsRef = useRef()
+ const params = useParams()
+ const commonDetailsStore = useSelector(store => store.commonDetailsStore)
+ const location = useLocation()
+ const [setDetailsInfo, removeDetailsInfo] = useMemo(() => {
+ return isDetailsPopUp
+ ? [setDetailsPopUpInfoContent, removeDetailsPopUpInfoContent]
+ : [setInfoContent, removeInfoContent]
+ }, [isDetailsPopUp])
+ const previousPathnameRef = useRef(
+ location.pathname.substring(0, location.pathname.lastIndexOf(params.tab))
+ )
+ const detailsPanelClassNames = classnames(
+ 'table__item',
+ commonDetailsStore.showWarning && 'pop-up-dialog-opened',
+ isDetailsScreen && 'table__item_big',
+ isDetailsPopUp && 'table__item-popup'
+ )
+
+ const formRef = useRef(
+ createForm({
+ initialValues: formInitialValues,
+ mutators: { ...arrayMutators, setFieldState },
+ onSubmit: () => {}
+ })
+ )
+
+ useEffect(() => {
+ return () => {
+ if (!isDetailsPopUp) {
+ dispatch(resetChanges())
+ }
+ }
+ }, [dispatch, isDetailsPopUp])
+
+ const handleShowWarning = useCallback(
+ show => {
+ dispatch(showWarning(show))
+ },
+ [dispatch]
+ )
+
+ const handleRefreshClick = useCallback(
+ event => {
+ if (
+ commonDetailsStore.changes.counter > 0 &&
+ document.getElementById('refresh')?.contains(event.target)
+ ) {
+ handleShowWarning(true)
+ dispatch(setFiltersWasHandled(true))
+ }
+ },
+ [commonDetailsStore.changes.counter, dispatch, handleShowWarning]
+ )
+
+ useEffect(() => {
+ window.addEventListener('click', handleRefreshClick)
+
+ return () => {
+ window.removeEventListener('click', handleRefreshClick)
+ }
+ }, [handleRefreshClick])
+
+ const shouldDetailsBlock = useCallback(
+ ({ currentLocation, nextLocation }) => {
+ const currentDetailsView = currentLocation.search.split(`${VIEW_SEARCH_PARAMETER}=`)?.[1]
+ const nextDetailsView = nextLocation.search.split(`${VIEW_SEARCH_PARAMETER}=`)?.[1]
+ const currentLocationPathname = currentLocation.pathname.split('/')
+ const nextLocationPathname = nextLocation.pathname.split('/')
+ currentLocationPathname.pop()
+ nextLocationPathname.pop()
+
+ return (
+ commonDetailsStore.changes.counter > 0 &&
+ (currentLocationPathname.join('/') !== nextLocationPathname.join('/') ||
+ currentDetailsView !== nextDetailsView)
+ )
+ },
+ [commonDetailsStore.changes.counter]
+ )
+
+ useEffect(() => {
+ if (
+ formRef.current &&
+ commonDetailsStore.changes.counter === 0 &&
+ !isEqual(pickBy(formInitialValues), pickBy(formRef.current.getState()?.values)) &&
+ !formRef.current.getState()?.active
+ ) {
+ formRef.current.restart(formInitialValues)
+ }
+ }, [formInitialValues, commonDetailsStore.changes.counter])
+
+ useEffect(() => {
+ const currentPathname = location.pathname.substring(
+ 0,
+ location.pathname.lastIndexOf(params.tab)
+ )
+
+ if (previousPathnameRef.current !== currentPathname && !isDetailsPopUp) {
+ formRef.current.restart(formInitialValues)
+ dispatch(setEditMode(false))
+ previousPathnameRef.current = currentPathname
+ }
+ }, [dispatch, formInitialValues, isDetailsPopUp, location.pathname, params.tab])
+
+ const applyChanges = useCallback(() => {
+ applyDetailsChanges(commonDetailsStore.changes)
+ .then(() => {
+ dispatch(resetChanges())
+
+ const changes = cloneDeep(commonDetailsStore.changes)
+
+ // todo [redux-toolkit] rework it after redux-toolkit will be added to the details store. Need to remove setTimeout and use a Promise that resolves after the state is updated.
+ setTimeout(() => {
+ applyDetailsChangesCallback(changes, selectedItem)
+ })
+ })
+ .catch(() => {})
+ }, [
+ applyDetailsChanges,
+ applyDetailsChangesCallback,
+ commonDetailsStore.changes,
+ dispatch,
+ selectedItem
+ ])
+
+ const cancelChanges = useCallback(() => {
+ if (commonDetailsStore.changes.counter > 0) {
+ dispatch(resetChanges())
+ formRef.current.reset(formInitialValues)
+ }
+ }, [commonDetailsStore.changes.counter, dispatch, formInitialValues])
+
+ const leavePage = useCallback(() => {
+ cancelChanges()
+ handleShowWarning(false)
+
+ if (commonDetailsStore.filtersWasHandled) {
+ dispatch(setFiltersWasHandled(false))
+ }
+
+ blocker.proceed?.()
+
+ window.dispatchEvent(new CustomEvent('discardChanges'))
+ }, [blocker, cancelChanges, commonDetailsStore.filtersWasHandled, dispatch, handleShowWarning])
+
+ const doNotLeavePage = useCallback(() => {
+ blocker.reset?.()
+ dispatch(showWarning(false))
+ window.dispatchEvent(new CustomEvent('cancelLeave'))
+ }, [blocker, dispatch])
+
+ return {
+ DetailsContainer,
+ applyChanges,
+ applyChangesRef,
+ blocker,
+ cancelChanges,
+ detailsPanelClassNames,
+ detailsRef,
+ commonDetailsStore,
+ doNotLeavePage,
+ formRef,
+ handleShowWarning,
+ leavePage,
+ location,
+ params,
+ removeDetailsInfo,
+ setBlocker,
+ setDetailsInfo,
+ shouldDetailsBlock
+ }
+}
diff --git a/src/igz-controls/hooks/useDetailsHeader.hook.jsx b/src/igz-controls/hooks/useDetailsHeader.hook.jsx
new file mode 100644
index 0000000000..c96650e904
--- /dev/null
+++ b/src/igz-controls/hooks/useDetailsHeader.hook.jsx
@@ -0,0 +1,285 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+import React, { useCallback, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
+
+import ActionsMenu from '../components/ActionsMenu/ActionsMenu'
+import Button from '../components/Button/Button'
+import LoadButton from '../components/LoadButton/LoadButton'
+import RoundedIcon from '../components/RoundedIcon/RoundedIcon'
+import TextTooltipTemplate from '../components/TooltipTemplate/TextTooltipTemplate'
+import Tooltip from '../components/Tooltip/Tooltip'
+
+import { ACTION_BUTTON, ACTIONS_MENU } from '../types'
+import { TERTIARY_BUTTON, VIEW_SEARCH_PARAMETER, FULL_VIEW_MODE } from '../constants'
+import { getFilteredSearchParams } from '../utils/filter.util'
+import { getViewMode, performDetailsActionHelper } from '../utils/common.util'
+
+import Close from '../images/close.svg?react'
+import EnlargeIcon from '../images/ml-enlarge.svg?react'
+import HistoryIcon from '../images/history.svg?react'
+import MinimizeIcon from '../images/ml-minimize.svg?react'
+import Refresh from '../images/refresh.svg?react'
+
+const DetailsHeaderContainer = ({
+ actionButton = null,
+ actionsMenu,
+ applyChanges,
+ applyChangesRef,
+ cancelChanges,
+ commonDetailsStore,
+ getCloseDetailsLink = null,
+ getDefaultCloseDetailsLink,
+ handleActionClick,
+ handleCancelClick,
+ handleRefresh = null,
+ headerRef,
+ isDetailsPopUp = false,
+ isDetailsScreen,
+ location,
+ navigate,
+ pageData,
+ params,
+ renderCustomElements = null,
+ renderStatus = null,
+ renderTitle,
+ selectedItem,
+ showAllVersions = null,
+ tab = '',
+ viewMode = '',
+ withActionMenu = true,
+ withToggleViewBtn = false
+}) => {
+ return (
+
+
+
{renderTitle && renderTitle()}
+
{renderStatus && renderStatus()}
+
+
+ {renderCustomElements && renderCustomElements()}
+
+
+ {commonDetailsStore.changes.counter > 0 && !isDetailsPopUp && (
+ <>
+
+
+ }
+ >
+
+
+
+ )}
+ {actionButton && !actionButton.hidden && (
+
{
+ handleActionClick(event, actionButton.onClick)
+ }}
+ tooltip={actionButton.tooltip}
+ variant={actionButton.variant}
+ />
+ )}
+ {showAllVersions && (
+ showAllVersions()}
+ tooltipText="Show all versions"
+ >
+
+ )}
+ {isDetailsScreen && handleRefresh && (
+ handleRefresh(selectedItem)}
+ tooltipText="Refresh"
+ >
+
+ )}
+ {withActionMenu &&
+ {withToggleViewBtn && !isDetailsPopUp && (
+ <>
+ {viewMode !== FULL_VIEW_MODE && (
+
{
+ navigate(
+ `${location.pathname}${window.location.search}${window.location.search ? '&' : '?'}${VIEW_SEARCH_PARAMETER}=full`
+ )
+ }}
+ id="full-view"
+ tooltipText="Full view"
+ >
+
+ )}
+ {viewMode === FULL_VIEW_MODE && (
+
{
+ navigate(
+ `${location.pathname}${getFilteredSearchParams(window.location.search, [VIEW_SEARCH_PARAMETER])}`
+ )
+ }}
+ id="table-view"
+ tooltipText="Table view"
+ >
+
+ )}
+
+ )}
+ {!pageData.details.hideCloseBtn &&
+ (isDetailsPopUp ? (
+
+
+
+
+ ) : (
+
+
+
+
+ ))}
+
+
: ,
+ // :
+ // },
+ // :
+ // ui: {
+ // isNew: , // `true` if we are creating a new row, if we are editing it's `false`
+ // fieldsPath: <"the.path">, // the path where table data is placed in the `formState`
+ // index: <0|1|...> // index of the editing row
+ // }
+ // }
+ const [editingItem, setEditingItem] = useState(null)
+ const editingItemRef = useRef(null)
+ const editingItemErrorsRef = useRef(null)
+ const formStateRef = useRef(null)
+ const bottomScrollRef = useRef(null)
+ const onExitEditModeCallbackRef = useRef(onExitEditModeCallback)
+
+ useLayoutEffect(() => {
+ const tableErrors = get(formState?.errors, editingItem?.ui.fieldsPath, [])
+ editingItemErrorsRef.current = get(tableErrors, editingItem?.ui.index, null)
+ }, [editingItem?.ui.fieldsPath, editingItem?.ui.index, formState?.errors])
+
+ useLayoutEffect(() => {
+ formStateRef.current = formState
+ }, [formState])
+
+ useLayoutEffect(() => {
+ onExitEditModeCallbackRef.current = onExitEditModeCallback
+ }, [onExitEditModeCallback])
+
+ const exitEditMode = () => {
+ if (editingItemRef.current?.data) {
+ Object.entries(editingItemRef.current?.data).forEach(([fieldName]) => {
+ formStateRef.current?.form.mutators.setFieldState(
+ `${editingItemRef.current?.ui.fieldsPath}[${editingItemRef.current?.ui.index}].data.${fieldName}`,
+ {
+ modified: false
+ }
+ )
+ })
+ }
+
+ editingItemRef.current = null
+ setEditingItem(null)
+ onExitEditModeCallbackRef?.current && onExitEditModeCallbackRef.current()
+ }
+
+ useEffect(() => {
+ const applyOrDiscardOrDeleteInEffect = () => {
+ if (editingItemRef?.current) {
+ if (!editingItemErrorsRef.current) {
+ exitEditMode()
+ } else {
+ if (editingItemRef.current?.ui?.isNew) {
+ const values = get(formStateRef.current.values, editingItemRef.current?.ui.fieldsPath)
+
+ if (values?.length > 1) {
+ formStateRef.current.form.mutators.remove(
+ editingItemRef.current?.ui.fieldsPath,
+ editingItemRef.current?.ui.index
+ )
+ } else {
+ formStateRef.current.form.change(editingItemRef.current?.ui.fieldsPath, [])
+ }
+ } else {
+ formStateRef.current.form.mutators.update(
+ editingItemRef.current?.ui.fieldsPath,
+ editingItemRef.current?.ui.index,
+ omit(editingItemRef.current, ['ui'])
+ )
+ }
+
+ exitEditMode()
+ }
+ }
+ }
+
+ return () => {
+ applyOrDiscardOrDeleteInEffect()
+ }
+ }, [exitEditModeTriggerItem])
+
+ const addNewRow = (event, fields, fieldsPath, newItem) => {
+ applyOrDiscardOrDelete(event)
+ formStateRef.current.form.mutators.push(fieldsPath, newItem)
+ setEditingItem(() => {
+ const newEditingItem = {
+ ...newItem,
+ ui: {
+ isNew: true,
+ fieldsPath,
+ index: fields.value?.length || 0
+ }
+ }
+ editingItemRef.current = newEditingItem
+
+ return newEditingItem
+ })
+
+ scrollIntoView()
+ }
+
+ const applyChanges = (event, index) => {
+ if (editingItemRef.current) {
+ if (!editingItemErrorsRef.current) {
+ if (editingItemRef.current?.ui.isNew) {
+ scrollIntoView()
+ }
+
+ exitEditMode()
+ } else {
+ // Mark all empty fields as `modified` in order to highlight the error if the field is invalid
+ Object.entries(editingItemErrorsRef.current?.data).forEach(([fieldName]) => {
+ formStateRef.current?.form.mutators.setFieldState(
+ `${editingItemRef.current?.ui.fieldsPath}[${index}].data.${fieldName}`,
+ {
+ modified: true
+ }
+ )
+ })
+ }
+ }
+ }
+
+ const deleteRow = (event, fieldsPath, index) => {
+ if (editingItemRef.current && index !== editingItemRef.current.ui.index) {
+ applyOrDiscardOrDelete(event)
+ }
+
+ const values = get(formStateRef.current.values, fieldsPath)
+
+ if (values?.length > 1) {
+ formStateRef.current.form.mutators.remove(fieldsPath, index)
+ } else {
+ formStateRef.current.form.change(fieldsPath, [])
+ }
+
+ exitEditMode()
+ event && event.stopPropagation()
+ }
+
+ const discardChanges = (event, fieldsPath, index) => {
+ formStateRef.current.form.mutators.update(
+ fieldsPath,
+ index,
+ omit(editingItemRef.current, ['ui'])
+ )
+ exitEditMode()
+ event && event.stopPropagation()
+ }
+
+ const discardOrDelete = (event, fieldsPath, index) => {
+ if (!editingItemRef.current || editingItemRef.current?.ui?.isNew) {
+ deleteRow(event, fieldsPath, index)
+ } else {
+ discardChanges(event, fieldsPath, index)
+ }
+ }
+
+ const applyOrDiscardOrDelete = (event = null) => {
+ if (editingItemRef?.current) {
+ if (!editingItemErrorsRef.current) {
+ applyChanges(event, editingItemRef.current?.ui.index)
+ } else {
+ discardOrDelete(
+ event,
+ editingItemRef.current?.ui.fieldsPath,
+ editingItemRef.current?.ui.index
+ )
+ }
+ }
+ }
+
+ const enterEditMode = (event, fields, fieldsPath, index) => {
+ applyOrDiscardOrDelete(event)
+
+ setTimeout(() => {
+ const editItem = fields.value[index]
+
+ setEditingItem(() => {
+ const newEditingItem = { ...editItem, ui: { fieldsPath, index } }
+ editingItemRef.current = newEditingItem
+
+ return newEditingItem
+ })
+ })
+ }
+
+ const scrollIntoView = () => {
+ if (bottomScrollRef.current) {
+ setTimeout(() => {
+ bottomScrollRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+ })
+ }
+ }
+
+ const isCurrentRowEditing = rowPath => {
+ return (
+ editingItemRef?.current &&
+ `${editingItemRef.current.ui.fieldsPath}[${editingItemRef.current.ui.index}]` === rowPath
+ )
+ }
+
+ const getTableArrayErrors = fieldsPath => {
+ if (formState.submitFailed && formState.invalid) {
+ return get(formState, `errors.${fieldsPath}.${ARRAY_ERROR}`, [])
+ } else {
+ return []
+ }
+ }
+
+ return {
+ addNewRow,
+ applyChanges,
+ applyOrDiscardOrDelete,
+ bottomScrollRef,
+ deleteRow,
+ discardChanges,
+ discardOrDelete,
+ editingItem,
+ editingItemRef,
+ enterEditMode,
+ exitEditMode,
+ getTableArrayErrors,
+ isCurrentRowEditing
+ }
+}
diff --git a/src/igz-controls/hooks/useHiddenChipsBlock.hook.js b/src/igz-controls/hooks/useHiddenChipsBlock.hook.js
new file mode 100644
index 0000000000..3b45e3012f
--- /dev/null
+++ b/src/igz-controls/hooks/useHiddenChipsBlock.hook.js
@@ -0,0 +1,118 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import classnames from 'classnames'
+
+import { getTransitionEndEventName } from '../utils/common.util'
+
+export const useHiddenChipsBlock = (hiddenChipsCounterRef, hiddenChipsPopUpRef) => {
+ const [isTop, setIsTop] = useState(false)
+ const [isLeft, setIsLeft] = useState(false)
+ const [isVisible, setIsVisible] = useState(false)
+ const transitionEndEventName = useMemo(() => getTransitionEndEventName(), [])
+
+ const hiddenChipsBlockClassNames = classnames(
+ 'chip-block-hidden',
+ isTop ? 'chip-block-hidden_top' : 'chip-block-hidden_bottom',
+ isLeft ? 'chip-block-hidden_left' : 'chip-block-hidden_right',
+ isVisible && 'chip-block-hidden_visible'
+ )
+
+ const resizePopUp = useCallback(() => {
+ if (hiddenChipsPopUpRef?.current && hiddenChipsCounterRef?.current) {
+ const offset = 10
+ const offsetMargin = 20
+ const elementRect = hiddenChipsCounterRef.current.getBoundingClientRect()
+
+ // Calculate the distance from the right edge of the window to the element's right edge
+ const elementRectRight = Math.floor(window.innerWidth - elementRect.left - elementRect.width)
+
+ // Calculate the distance from the bottom edge of the window to the element's bottom edge
+ const elementRectBottom = Math.floor(
+ window.innerHeight - elementRect.top - elementRect.height
+ )
+ let isLeftPosition = false
+ let isTopPosition = false
+ hiddenChipsPopUpRef.current.style.maxWidth = '100%'
+ hiddenChipsPopUpRef.current.style.maxHeight = '100%'
+
+ // Determine if the left position is preferred based on the element's position and available width
+ if (elementRect.left > hiddenChipsPopUpRef.current.clientWidth) {
+ isLeftPosition = true
+ } else if (elementRectRight > hiddenChipsPopUpRef.current.clientWidth) {
+ isLeftPosition = false
+ } else {
+ // Compare elementRect.left and elementRectRight to choose the larger value as the max width
+ isLeftPosition = elementRect.left > elementRectRight
+ const popUpMaxWidth = Math.max(elementRect.left, elementRectRight)
+ hiddenChipsPopUpRef.current.style.maxWidth = `${popUpMaxWidth}px`
+ }
+
+ hiddenChipsPopUpRef.current.style.right = isLeftPosition ? `${elementRectRight}px` : 'unset'
+ hiddenChipsPopUpRef.current.style.left = isLeftPosition ? 'unset' : `${elementRect.left}px`
+
+ // Determine if the top position is preferred based on the element's position and available height
+ if (elementRect.top > hiddenChipsPopUpRef.current.clientHeight + offset + offsetMargin) {
+ isTopPosition = true
+ } else if (
+ elementRectBottom >
+ hiddenChipsPopUpRef.current.clientHeight + offset + offsetMargin
+ ) {
+ isTopPosition = false
+ } else {
+ // Compare elementRect.top and elementRectBottom to choose the larger value as the max height
+ isTopPosition = elementRect.top > elementRectBottom + offset
+ const popUpMaxHeight = Math.max(elementRect.top, elementRectBottom) - offset - offsetMargin
+ hiddenChipsPopUpRef.current.style.maxHeight = `${popUpMaxHeight}px`
+ }
+
+ hiddenChipsPopUpRef.current.style.bottom = isTopPosition
+ ? `${elementRectBottom + elementRect.height + offset}px`
+ : 'unset'
+ hiddenChipsPopUpRef.current.style.top = isTopPosition
+ ? 'unset'
+ : `${elementRect.bottom + offset}px`
+
+ setIsTop(isTopPosition)
+ setIsLeft(isLeftPosition)
+ setIsVisible(true)
+ }
+ }, [hiddenChipsCounterRef, hiddenChipsPopUpRef])
+
+ useEffect(() => {
+ if (hiddenChipsPopUpRef?.current && hiddenChipsCounterRef?.current) {
+ window.addEventListener('resize', resizePopUp)
+ window.addEventListener(transitionEndEventName, resizePopUp)
+
+ return () => {
+ window.removeEventListener('resize', resizePopUp)
+ window.removeEventListener(transitionEndEventName, resizePopUp)
+ }
+ }
+ }, [hiddenChipsPopUpRef, hiddenChipsCounterRef, resizePopUp, transitionEndEventName])
+
+ useEffect(() => {
+ resizePopUp()
+ }, [resizePopUp])
+
+ return {
+ hiddenChipsBlockClassNames
+ }
+}
diff --git a/src/igz-controls/hooks/useTable.hook.jsx b/src/igz-controls/hooks/useTable.hook.jsx
new file mode 100644
index 0000000000..d2cb5a9e75
--- /dev/null
+++ b/src/igz-controls/hooks/useTable.hook.jsx
@@ -0,0 +1,273 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { useSelector } from 'react-redux'
+import { isEmpty } from 'lodash'
+
+import TableHead from '../elements/TableHead/TableHead'
+
+import { MAIN_TABLE_BODY_ID, MAIN_TABLE_ID } from '../constants'
+import { SORT_PROPS } from '../types'
+import { VIRTUALIZATION_CONFIG } from '../types'
+
+const TableContainer = ({
+ children,
+ hideActionsMenu = false,
+ mainRowItemsCount = 1,
+ pageData = null,
+ renderDetails = null,
+ selectedItem = {},
+ sortProps = null,
+ tableBodyRef,
+ tableClass,
+ tableContentRef,
+ tableHeadRef,
+ tableHeaders,
+ tablePanelRef,
+ tableRef,
+ tableStore = null,
+ tableWrapperClass,
+ virtualizationConfig = {
+ tableBodyPaddingTop: 0,
+ startIndex: -1,
+ endIndex: -1
+ }
+}) => {
+ return (
+
+
+
+
+ {tableHeaders?.length > 0 && (
+
+ {children}
+
+
+ {tableStore?.isTablePanelOpen && pageData?.tablePanel && (
+
+
{pageData.tablePanel}
+
+ )}
+
+ {renderDetails && renderDetails()}
+
+
+
diff --git a/src/igz-controls/images/add-circle-question.svg b/src/igz-controls/images/add-circle-question.svg
new file mode 100644
index 0000000000..93c68851c6
--- /dev/null
+++ b/src/igz-controls/images/add-circle-question.svg
@@ -0,0 +1,7 @@
+
+
diff --git a/src/igz-controls/images/add-circle.svg b/src/igz-controls/images/add-circle.svg
new file mode 100644
index 0000000000..71e5198b0b
--- /dev/null
+++ b/src/igz-controls/images/add-circle.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/add.svg b/src/igz-controls/images/add.svg
new file mode 100644
index 0000000000..1acb0eabb2
--- /dev/null
+++ b/src/igz-controls/images/add.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/alert-yellow.svg b/src/igz-controls/images/alert-yellow.svg
new file mode 100644
index 0000000000..9708daa955
--- /dev/null
+++ b/src/igz-controls/images/alert-yellow.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/alerts-icon.svg b/src/igz-controls/images/alerts-icon.svg
new file mode 100644
index 0000000000..7e66226686
--- /dev/null
+++ b/src/igz-controls/images/alerts-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/alerts.svg b/src/igz-controls/images/alerts.svg
new file mode 100644
index 0000000000..6b0d73d565
--- /dev/null
+++ b/src/igz-controls/images/alerts.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/application-icon.svg b/src/igz-controls/images/application-icon.svg
new file mode 100644
index 0000000000..a4e7dfd0c8
--- /dev/null
+++ b/src/igz-controls/images/application-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/archive-icon.svg b/src/igz-controls/images/archive-icon.svg
new file mode 100644
index 0000000000..a2657bf220
--- /dev/null
+++ b/src/igz-controls/images/archive-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/arrow-down.svg b/src/igz-controls/images/arrow-down.svg
new file mode 100644
index 0000000000..798d828cf7
--- /dev/null
+++ b/src/igz-controls/images/arrow-down.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/arrow-up.svg b/src/igz-controls/images/arrow-up.svg
new file mode 100644
index 0000000000..422a625343
--- /dev/null
+++ b/src/igz-controls/images/arrow-up.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/arrow.svg b/src/igz-controls/images/arrow.svg
new file mode 100644
index 0000000000..4b114d281a
--- /dev/null
+++ b/src/igz-controls/images/arrow.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/back-arrow.svg b/src/igz-controls/images/back-arrow.svg
new file mode 100644
index 0000000000..1a9a778497
--- /dev/null
+++ b/src/igz-controls/images/back-arrow.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/batch-step-badge.svg b/src/igz-controls/images/batch-step-badge.svg
new file mode 100644
index 0000000000..6c107f6472
--- /dev/null
+++ b/src/igz-controls/images/batch-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/best-iteration-icon.svg b/src/igz-controls/images/best-iteration-icon.svg
new file mode 100644
index 0000000000..19cba84f91
--- /dev/null
+++ b/src/igz-controls/images/best-iteration-icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/calendar-chevron.svg b/src/igz-controls/images/calendar-chevron.svg
new file mode 100644
index 0000000000..6606ca99b3
--- /dev/null
+++ b/src/igz-controls/images/calendar-chevron.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/cancel.svg b/src/igz-controls/images/cancel.svg
new file mode 100644
index 0000000000..397c9ba45c
--- /dev/null
+++ b/src/igz-controls/images/cancel.svg
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/src/igz-controls/images/check.svg b/src/igz-controls/images/check.svg
new file mode 100644
index 0000000000..9082a2c767
--- /dev/null
+++ b/src/igz-controls/images/check.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/checkbox-checked.svg b/src/igz-controls/images/checkbox-checked.svg
new file mode 100644
index 0000000000..62cac7846d
--- /dev/null
+++ b/src/igz-controls/images/checkbox-checked.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/checkbox-unchecked.svg b/src/igz-controls/images/checkbox-unchecked.svg
new file mode 100644
index 0000000000..af134ac210
--- /dev/null
+++ b/src/igz-controls/images/checkbox-unchecked.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/checkmark.svg b/src/igz-controls/images/checkmark.svg
new file mode 100644
index 0000000000..ea0bc0a7ef
--- /dev/null
+++ b/src/igz-controls/images/checkmark.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/checkmark2.svg b/src/igz-controls/images/checkmark2.svg
new file mode 100644
index 0000000000..b76f42cd00
--- /dev/null
+++ b/src/igz-controls/images/checkmark2.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/choice-step-badge.svg b/src/igz-controls/images/choice-step-badge.svg
new file mode 100644
index 0000000000..7556305faa
--- /dev/null
+++ b/src/igz-controls/images/choice-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/circled-m.svg b/src/igz-controls/images/circled-m.svg
new file mode 100644
index 0000000000..95ddb07ba9
--- /dev/null
+++ b/src/igz-controls/images/circled-m.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/circled-r.svg b/src/igz-controls/images/circled-r.svg
new file mode 100644
index 0000000000..3fd350c3ae
--- /dev/null
+++ b/src/igz-controls/images/circled-r.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/clock.svg b/src/igz-controls/images/clock.svg
new file mode 100644
index 0000000000..766ed6a4f2
--- /dev/null
+++ b/src/igz-controls/images/clock.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/close.svg b/src/igz-controls/images/close.svg
new file mode 100644
index 0000000000..a1fe0a0cfd
--- /dev/null
+++ b/src/igz-controls/images/close.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/code.svg b/src/igz-controls/images/code.svg
new file mode 100644
index 0000000000..18fff62851
--- /dev/null
+++ b/src/igz-controls/images/code.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/collapse.svg b/src/igz-controls/images/collapse.svg
new file mode 100644
index 0000000000..7bc587923b
--- /dev/null
+++ b/src/igz-controls/images/collapse.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/connections-icon.svg b/src/igz-controls/images/connections-icon.svg
new file mode 100644
index 0000000000..d214ba2f95
--- /dev/null
+++ b/src/igz-controls/images/connections-icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/copy-to-clipboard-icon.svg b/src/igz-controls/images/copy-to-clipboard-icon.svg
new file mode 100644
index 0000000000..a98ace9582
--- /dev/null
+++ b/src/igz-controls/images/copy-to-clipboard-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/custom-step-badge.svg b/src/igz-controls/images/custom-step-badge.svg
new file mode 100644
index 0000000000..d50d2eae34
--- /dev/null
+++ b/src/igz-controls/images/custom-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/custom.svg b/src/igz-controls/images/custom.svg
new file mode 100644
index 0000000000..24e5265de6
--- /dev/null
+++ b/src/igz-controls/images/custom.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/databricks-icon.svg b/src/igz-controls/images/databricks-icon.svg
new file mode 100644
index 0000000000..b2303aa6fd
--- /dev/null
+++ b/src/igz-controls/images/databricks-icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/db-icon.svg b/src/igz-controls/images/db-icon.svg
new file mode 100644
index 0000000000..f3e856f9b8
--- /dev/null
+++ b/src/igz-controls/images/db-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/delete.svg b/src/igz-controls/images/delete.svg
new file mode 100644
index 0000000000..2a3e5562ea
--- /dev/null
+++ b/src/igz-controls/images/delete.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/deploy-icon.svg b/src/igz-controls/images/deploy-icon.svg
new file mode 100644
index 0000000000..bd565aeac0
--- /dev/null
+++ b/src/igz-controls/images/deploy-icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/double-arrow.svg b/src/igz-controls/images/double-arrow.svg
new file mode 100644
index 0000000000..dbb631254e
--- /dev/null
+++ b/src/igz-controls/images/double-arrow.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/double-check.svg b/src/igz-controls/images/double-check.svg
new file mode 100644
index 0000000000..139807a228
--- /dev/null
+++ b/src/igz-controls/images/double-check.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/download.svg b/src/igz-controls/images/download.svg
new file mode 100644
index 0000000000..5877099fc2
--- /dev/null
+++ b/src/igz-controls/images/download.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/drop-file.svg b/src/igz-controls/images/drop-file.svg
new file mode 100644
index 0000000000..7a5c8f206b
--- /dev/null
+++ b/src/igz-controls/images/drop-file.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/dropdown.svg b/src/igz-controls/images/dropdown.svg
new file mode 100644
index 0000000000..11ac5c76a8
--- /dev/null
+++ b/src/igz-controls/images/dropdown.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/edit.svg b/src/igz-controls/images/edit.svg
new file mode 100644
index 0000000000..0a86fb7086
--- /dev/null
+++ b/src/igz-controls/images/edit.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/elipsis.svg b/src/igz-controls/images/elipsis.svg
new file mode 100644
index 0000000000..705bf6158c
--- /dev/null
+++ b/src/igz-controls/images/elipsis.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/email-icon.svg b/src/igz-controls/images/email-icon.svg
new file mode 100644
index 0000000000..ee239669e5
--- /dev/null
+++ b/src/igz-controls/images/email-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/entity-type-application.svg b/src/igz-controls/images/entity-type-application.svg
new file mode 100644
index 0000000000..fc9f8a808a
--- /dev/null
+++ b/src/igz-controls/images/entity-type-application.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/entity-type-endpoint.svg b/src/igz-controls/images/entity-type-endpoint.svg
new file mode 100644
index 0000000000..a272f69118
--- /dev/null
+++ b/src/igz-controls/images/entity-type-endpoint.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/entity-type-infra.svg b/src/igz-controls/images/entity-type-infra.svg
new file mode 100644
index 0000000000..f75aaa8612
--- /dev/null
+++ b/src/igz-controls/images/entity-type-infra.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/entity-type-job.svg b/src/igz-controls/images/entity-type-job.svg
new file mode 100644
index 0000000000..fee73b3b7d
--- /dev/null
+++ b/src/igz-controls/images/entity-type-job.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/error-step-badge.svg b/src/igz-controls/images/error-step-badge.svg
new file mode 100644
index 0000000000..018d5093c5
--- /dev/null
+++ b/src/igz-controls/images/error-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/events-step-badge.svg b/src/igz-controls/images/events-step-badge.svg
new file mode 100644
index 0000000000..b4e8025f54
--- /dev/null
+++ b/src/igz-controls/images/events-step-badge.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/exclamation-mark.svg b/src/igz-controls/images/exclamation-mark.svg
new file mode 100644
index 0000000000..3d1443140c
--- /dev/null
+++ b/src/igz-controls/images/exclamation-mark.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/expand.svg b/src/igz-controls/images/expand.svg
new file mode 100644
index 0000000000..46b844e513
--- /dev/null
+++ b/src/igz-controls/images/expand.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/eye-icon.svg b/src/igz-controls/images/eye-icon.svg
new file mode 100644
index 0000000000..a640e6c691
--- /dev/null
+++ b/src/igz-controls/images/eye-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/filter-2.svg b/src/igz-controls/images/filter-2.svg
new file mode 100644
index 0000000000..c3cf96dd16
--- /dev/null
+++ b/src/igz-controls/images/filter-2.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/filter-step-badge.svg b/src/igz-controls/images/filter-step-badge.svg
new file mode 100644
index 0000000000..3d271a27ef
--- /dev/null
+++ b/src/igz-controls/images/filter-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/filter.svg b/src/igz-controls/images/filter.svg
new file mode 100644
index 0000000000..c7d3abab4a
--- /dev/null
+++ b/src/igz-controls/images/filter.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/git-icon.svg b/src/igz-controls/images/git-icon.svg
new file mode 100644
index 0000000000..83227d46e3
--- /dev/null
+++ b/src/igz-controls/images/git-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/github-icon.svg b/src/igz-controls/images/github-icon.svg
new file mode 100644
index 0000000000..ee43aea989
--- /dev/null
+++ b/src/igz-controls/images/github-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/igz-controls/images/history.svg b/src/igz-controls/images/history.svg
new file mode 100644
index 0000000000..abb71db092
--- /dev/null
+++ b/src/igz-controls/images/history.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/horovod.svg b/src/igz-controls/images/horovod.svg
new file mode 100644
index 0000000000..113ee8f847
--- /dev/null
+++ b/src/igz-controls/images/horovod.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/ic-batch-inference.svg b/src/igz-controls/images/ic-batch-inference.svg
new file mode 100644
index 0000000000..5b5604bd05
--- /dev/null
+++ b/src/igz-controls/images/ic-batch-inference.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-calendar.svg b/src/igz-controls/images/ic-calendar.svg
new file mode 100644
index 0000000000..92cc836f5c
--- /dev/null
+++ b/src/igz-controls/images/ic-calendar.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/ic-create-featureset.svg b/src/igz-controls/images/ic-create-featureset.svg
new file mode 100644
index 0000000000..6d02716ca5
--- /dev/null
+++ b/src/igz-controls/images/ic-create-featureset.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-create-new-function.svg b/src/igz-controls/images/ic-create-new-function.svg
new file mode 100644
index 0000000000..dbb067dbf8
--- /dev/null
+++ b/src/igz-controls/images/ic-create-new-function.svg
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-create-realtime-function.svg b/src/igz-controls/images/ic-create-realtime-function.svg
new file mode 100644
index 0000000000..5f5f69b007
--- /dev/null
+++ b/src/igz-controls/images/ic-create-realtime-function.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-create-workflow.svg b/src/igz-controls/images/ic-create-workflow.svg
new file mode 100644
index 0000000000..f3a3426bbe
--- /dev/null
+++ b/src/igz-controls/images/ic-create-workflow.svg
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-define-alerts.svg b/src/igz-controls/images/ic-define-alerts.svg
new file mode 100644
index 0000000000..62720834b2
--- /dev/null
+++ b/src/igz-controls/images/ic-define-alerts.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-deploy-model-serving.svg b/src/igz-controls/images/ic-deploy-model-serving.svg
new file mode 100644
index 0000000000..6bdcd8657f
--- /dev/null
+++ b/src/igz-controls/images/ic-deploy-model-serving.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-feature-vector.svg b/src/igz-controls/images/ic-feature-vector.svg
new file mode 100644
index 0000000000..eac57b9231
--- /dev/null
+++ b/src/igz-controls/images/ic-feature-vector.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-key.svg b/src/igz-controls/images/ic-key.svg
new file mode 100644
index 0000000000..cf7ce27d19
--- /dev/null
+++ b/src/igz-controls/images/ic-key.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/ic-register-artifact.svg b/src/igz-controls/images/ic-register-artifact.svg
new file mode 100644
index 0000000000..4bfa6a94cd
--- /dev/null
+++ b/src/igz-controls/images/ic-register-artifact.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-register-dataset.svg b/src/igz-controls/images/ic-register-dataset.svg
new file mode 100644
index 0000000000..75faaf79b4
--- /dev/null
+++ b/src/igz-controls/images/ic-register-dataset.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-register-model.svg b/src/igz-controls/images/ic-register-model.svg
new file mode 100644
index 0000000000..4f12376f74
--- /dev/null
+++ b/src/igz-controls/images/ic-register-model.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-run-batch.svg b/src/igz-controls/images/ic-run-batch.svg
new file mode 100644
index 0000000000..a1636cc6df
--- /dev/null
+++ b/src/igz-controls/images/ic-run-batch.svg
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-run-workflow.svg b/src/igz-controls/images/ic-run-workflow.svg
new file mode 100644
index 0000000000..ad54896edd
--- /dev/null
+++ b/src/igz-controls/images/ic-run-workflow.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic-train-model.svg b/src/igz-controls/images/ic-train-model.svg
new file mode 100644
index 0000000000..7033490c54
--- /dev/null
+++ b/src/igz-controls/images/ic-train-model.svg
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ic_arrow-right.svg b/src/igz-controls/images/ic_arrow-right.svg
new file mode 100644
index 0000000000..af52e8cff3
--- /dev/null
+++ b/src/igz-controls/images/ic_arrow-right.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/ic_remote.svg b/src/igz-controls/images/ic_remote.svg
new file mode 100644
index 0000000000..d435835dae
--- /dev/null
+++ b/src/igz-controls/images/ic_remote.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/ic_target-with-arrow-unset.svg b/src/igz-controls/images/ic_target-with-arrow-unset.svg
new file mode 100644
index 0000000000..ff12e15c16
--- /dev/null
+++ b/src/igz-controls/images/ic_target-with-arrow-unset.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/ic_target-with-dart.svg b/src/igz-controls/images/ic_target-with-dart.svg
new file mode 100644
index 0000000000..9af15cbbc1
--- /dev/null
+++ b/src/igz-controls/images/ic_target-with-dart.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/info-fill.svg b/src/igz-controls/images/info-fill.svg
new file mode 100644
index 0000000000..478d678fdf
--- /dev/null
+++ b/src/igz-controls/images/info-fill.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/jupyter.svg b/src/igz-controls/images/jupyter.svg
new file mode 100644
index 0000000000..6b855f9c57
--- /dev/null
+++ b/src/igz-controls/images/jupyter.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/kafka-icon.svg b/src/igz-controls/images/kafka-icon.svg
new file mode 100644
index 0000000000..4b54f48dc3
--- /dev/null
+++ b/src/igz-controls/images/kafka-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/legend-queue-icon.svg b/src/igz-controls/images/legend-queue-icon.svg
new file mode 100644
index 0000000000..a9d7ca97d1
--- /dev/null
+++ b/src/igz-controls/images/legend-queue-icon.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/legend.svg b/src/igz-controls/images/legend.svg
new file mode 100644
index 0000000000..3da8d98553
--- /dev/null
+++ b/src/igz-controls/images/legend.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/listview.svg b/src/igz-controls/images/listview.svg
new file mode 100644
index 0000000000..f8b489d9d4
--- /dev/null
+++ b/src/igz-controls/images/listview.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/lock-icon.svg b/src/igz-controls/images/lock-icon.svg
new file mode 100644
index 0000000000..46e2840cb1
--- /dev/null
+++ b/src/igz-controls/images/lock-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/metrics-icon.svg b/src/igz-controls/images/metrics-icon.svg
new file mode 100644
index 0000000000..378b00bee4
--- /dev/null
+++ b/src/igz-controls/images/metrics-icon.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/ml-download.svg b/src/igz-controls/images/ml-download.svg
new file mode 100644
index 0000000000..93d3723a72
--- /dev/null
+++ b/src/igz-controls/images/ml-download.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/ml-enlarge.svg b/src/igz-controls/images/ml-enlarge.svg
new file mode 100644
index 0000000000..2afa649c67
--- /dev/null
+++ b/src/igz-controls/images/ml-enlarge.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/src/igz-controls/images/ml-minimize.svg b/src/igz-controls/images/ml-minimize.svg
new file mode 100644
index 0000000000..a77f13cf98
--- /dev/null
+++ b/src/igz-controls/images/ml-minimize.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/mlrun-api-gateways.svg b/src/igz-controls/images/mlrun-api-gateways.svg
new file mode 100644
index 0000000000..3cccf080fe
--- /dev/null
+++ b/src/igz-controls/images/mlrun-api-gateways.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/mlrun-blue-logo.svg b/src/igz-controls/images/mlrun-blue-logo.svg
new file mode 100644
index 0000000000..bc200fcc31
--- /dev/null
+++ b/src/igz-controls/images/mlrun-blue-logo.svg
@@ -0,0 +1 @@
+
+
+
+
diff --git a/src/igz-controls/images/mlrun-hub-step-badge.svg b/src/igz-controls/images/mlrun-hub-step-badge.svg
new file mode 100644
index 0000000000..d038abcdc2
--- /dev/null
+++ b/src/igz-controls/images/mlrun-hub-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/mlrun-jobs-and-workflows.svg b/src/igz-controls/images/mlrun-jobs-and-workflows.svg
new file mode 100644
index 0000000000..bdb6453c6c
--- /dev/null
+++ b/src/igz-controls/images/mlrun-jobs-and-workflows.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/mlrun-ml-functions.svg b/src/igz-controls/images/mlrun-ml-functions.svg
new file mode 100644
index 0000000000..ebe4f1bde1
--- /dev/null
+++ b/src/igz-controls/images/mlrun-ml-functions.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/mlrun-models.svg b/src/igz-controls/images/mlrun-models.svg
new file mode 100644
index 0000000000..a512622d46
--- /dev/null
+++ b/src/igz-controls/images/mlrun-models.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/mlrun-project-home.svg b/src/igz-controls/images/mlrun-project-home.svg
new file mode 100644
index 0000000000..44c8b18033
--- /dev/null
+++ b/src/igz-controls/images/mlrun-project-home.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/mlrun-project-monitoring.svg b/src/igz-controls/images/mlrun-project-monitoring.svg
new file mode 100644
index 0000000000..ad246fde54
--- /dev/null
+++ b/src/igz-controls/images/mlrun-project-monitoring.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/mlrun-project-settings.svg b/src/igz-controls/images/mlrun-project-settings.svg
new file mode 100644
index 0000000000..6ea783510d
--- /dev/null
+++ b/src/igz-controls/images/mlrun-project-settings.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/mlrun-realtime-functions.svg b/src/igz-controls/images/mlrun-realtime-functions.svg
new file mode 100644
index 0000000000..bb130d693f
--- /dev/null
+++ b/src/igz-controls/images/mlrun-realtime-functions.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/model-server-step-badge.svg b/src/igz-controls/images/model-server-step-badge.svg
new file mode 100644
index 0000000000..67a26ef646
--- /dev/null
+++ b/src/igz-controls/images/model-server-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/monitor-icon.svg b/src/igz-controls/images/monitor-icon.svg
new file mode 100644
index 0000000000..af58ceb0e3
--- /dev/null
+++ b/src/igz-controls/images/monitor-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/monitoring-icon.svg b/src/igz-controls/images/monitoring-icon.svg
new file mode 100644
index 0000000000..c4e44ae0a0
--- /dev/null
+++ b/src/igz-controls/images/monitoring-icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/navbar-closed-icon.svg.mjs b/src/igz-controls/images/navbar-closed-icon.svg.mjs
new file mode 100644
index 0000000000..ff4f9813de
--- /dev/null
+++ b/src/igz-controls/images/navbar-closed-icon.svg.mjs
@@ -0,0 +1,5 @@
+import * as C from "react";
+const t = (e) => /* @__PURE__ */ C.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", ...e }, /* @__PURE__ */ C.createElement("path", { d: "M13.5 2.25C14.0739 2.24997 14.6261 2.46924 15.0437 2.86296C15.4613 3.25668 15.7126 3.79508 15.7463 4.368L15.75 4.5V13.5C15.75 14.0739 15.5308 14.6261 15.137 15.0437C14.7433 15.4613 14.2049 15.7126 13.632 15.7463L13.5 15.75H4.5C3.92609 15.75 3.37386 15.5308 2.9563 15.137C2.53874 14.7433 2.28742 14.2049 2.25375 13.632L2.25 13.5V4.5C2.24997 3.92609 2.46924 3.37386 2.86296 2.9563C3.25668 2.53874 3.79508 2.28742 4.368 2.25375L4.5 2.25H13.5ZM13.5 3.75H6.75V14.25H13.5C13.6837 14.25 13.861 14.1825 13.9983 14.0605C14.1356 13.9384 14.2233 13.7702 14.2448 13.5878L14.25 13.5V4.5C14.25 4.3163 14.1825 4.139 14.0605 4.00172C13.9384 3.86444 13.7702 3.77674 13.5878 3.75525L13.5 3.75ZM10.2098 6.9075L10.2802 6.96975L11.7802 8.46975C11.9094 8.5989 11.987 8.77072 11.9984 8.95299C12.0099 9.13526 11.9544 9.31545 11.8425 9.45975L11.7802 9.53025L10.2802 11.0302C10.1453 11.1648 9.96417 11.2429 9.77371 11.2487C9.58325 11.2545 9.39772 11.1876 9.25479 11.0616C9.11187 10.9355 9.02227 10.7598 9.0042 10.5701C8.98613 10.3805 9.04094 10.191 9.1575 10.0402L9.21975 9.96975L10.1888 9L9.21975 8.03025C9.09062 7.90111 9.01304 7.72928 9.00158 7.54701C8.99012 7.36474 9.04556 7.18455 9.1575 7.04025L9.21975 6.96975C9.3489 6.84062 9.52072 6.76304 9.70299 6.75158C9.88526 6.74012 10.0654 6.79556 10.2098 6.9075Z", fill: "#7F7989" }));
+export {
+ t as default
+};
diff --git a/src/igz-controls/images/navbar-opened-icon.svg.mjs b/src/igz-controls/images/navbar-opened-icon.svg.mjs
new file mode 100644
index 0000000000..4f83770352
--- /dev/null
+++ b/src/igz-controls/images/navbar-opened-icon.svg.mjs
@@ -0,0 +1,5 @@
+import * as C from "react";
+const t = (e) => /* @__PURE__ */ C.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", ...e }, /* @__PURE__ */ C.createElement("path", { d: "M13.5 2.25C14.0739 2.24997 14.6261 2.46924 15.0437 2.86296C15.4613 3.25668 15.7126 3.79508 15.7463 4.368L15.75 4.5V13.5C15.75 14.0739 15.5308 14.6261 15.137 15.0437C14.7433 15.4613 14.2049 15.7126 13.632 15.7463L13.5 15.75H4.5C3.92609 15.75 3.37386 15.5308 2.9563 15.137C2.53874 14.7433 2.28742 14.2049 2.25375 13.632L2.25 13.5V4.5C2.24997 3.92609 2.46924 3.37386 2.86296 2.9563C3.25668 2.53874 3.79508 2.28742 4.368 2.25375L4.5 2.25H13.5ZM13.5 3.75H6.75V14.25H13.5C13.6837 14.25 13.861 14.1825 13.9983 14.0605C14.1356 13.9384 14.2233 13.7702 14.2448 13.5878L14.25 13.5V4.5C14.25 4.3163 14.1825 4.139 14.0605 4.00172C13.9384 3.86444 13.7702 3.77674 13.5878 3.75525L13.5 3.75ZM11.7802 6.96975C11.9094 7.09889 11.987 7.27072 11.9984 7.45299C12.0099 7.63526 11.9544 7.81545 11.8425 7.95975L11.7802 8.03025L10.8112 9L11.7802 9.96975C11.9094 10.0989 11.987 10.2707 11.9984 10.453C12.0099 10.6353 11.9544 10.8154 11.8425 10.9597L11.7802 11.0302C11.6511 11.1594 11.4793 11.237 11.297 11.2484C11.1147 11.2599 10.9346 11.2044 10.7903 11.0925L10.7198 11.0302L9.21975 9.53025C9.09062 9.40111 9.01304 9.22928 9.00158 9.04701C8.99012 8.86474 9.04556 8.68455 9.1575 8.54025L9.21975 8.46975L10.7198 6.96975C10.8604 6.82915 11.0511 6.75016 11.25 6.75016C11.4489 6.75016 11.6396 6.82915 11.7802 6.96975Z", fill: "#7F7989" }));
+export {
+ t as default
+};
diff --git a/src/igz-controls/images/navbar/alerts-icon.svg b/src/igz-controls/images/navbar/alerts-icon.svg
new file mode 100644
index 0000000000..7e66226686
--- /dev/null
+++ b/src/igz-controls/images/navbar/alerts-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/navbar/documents-icon.svg b/src/igz-controls/images/navbar/documents-icon.svg
new file mode 100644
index 0000000000..4e925d2da6
--- /dev/null
+++ b/src/igz-controls/images/navbar/documents-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/navbar/llm-prompt-icon.svg b/src/igz-controls/images/navbar/llm-prompt-icon.svg
new file mode 100644
index 0000000000..0f0179199f
--- /dev/null
+++ b/src/igz-controls/images/navbar/llm-prompt-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-api-gateways.svg b/src/igz-controls/images/navbar/mlrun-api-gateways.svg
new file mode 100644
index 0000000000..3cccf080fe
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-api-gateways.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-artifacts.svg b/src/igz-controls/images/navbar/mlrun-artifacts.svg
new file mode 100644
index 0000000000..457164b5f8
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-artifacts.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-datasets.svg b/src/igz-controls/images/navbar/mlrun-datasets.svg
new file mode 100644
index 0000000000..575701fea9
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-datasets.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-feature-store.svg b/src/igz-controls/images/navbar/mlrun-feature-store.svg
new file mode 100644
index 0000000000..c29f066a93
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-feature-store.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-jobs-and-workflows.svg b/src/igz-controls/images/navbar/mlrun-jobs-and-workflows.svg
new file mode 100644
index 0000000000..bdb6453c6c
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-jobs-and-workflows.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-ml-functions.svg b/src/igz-controls/images/navbar/mlrun-ml-functions.svg
new file mode 100644
index 0000000000..ebe4f1bde1
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-ml-functions.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-models.svg b/src/igz-controls/images/navbar/mlrun-models.svg
new file mode 100644
index 0000000000..a512622d46
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-models.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-project-home.svg b/src/igz-controls/images/navbar/mlrun-project-home.svg
new file mode 100644
index 0000000000..44c8b18033
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-project-home.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-project-monitoring.svg b/src/igz-controls/images/navbar/mlrun-project-monitoring.svg
new file mode 100644
index 0000000000..ad246fde54
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-project-monitoring.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-project-settings.svg b/src/igz-controls/images/navbar/mlrun-project-settings.svg
new file mode 100644
index 0000000000..6ea783510d
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-project-settings.svg
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/src/igz-controls/images/navbar/mlrun-realtime-functions.svg b/src/igz-controls/images/navbar/mlrun-realtime-functions.svg
new file mode 100644
index 0000000000..bb130d693f
--- /dev/null
+++ b/src/igz-controls/images/navbar/mlrun-realtime-functions.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/navbar/model-monitoring.svg b/src/igz-controls/images/navbar/model-monitoring.svg
new file mode 100644
index 0000000000..7237952f01
--- /dev/null
+++ b/src/igz-controls/images/navbar/model-monitoring.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/no-data-metric-image.png b/src/igz-controls/images/no-data-metric-image.png
new file mode 100644
index 0000000000..9116910f72
Binary files /dev/null and b/src/igz-controls/images/no-data-metric-image.png differ
diff --git a/src/igz-controls/images/nosql.svg b/src/igz-controls/images/nosql.svg
new file mode 100644
index 0000000000..a51283721c
--- /dev/null
+++ b/src/igz-controls/images/nosql.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/notification-badge.svg b/src/igz-controls/images/notification-badge.svg
new file mode 100644
index 0000000000..c1ed595f32
--- /dev/null
+++ b/src/igz-controls/images/notification-badge.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/nuclio.svg b/src/igz-controls/images/nuclio.svg
new file mode 100644
index 0000000000..6740e3dfd4
--- /dev/null
+++ b/src/igz-controls/images/nuclio.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/other.svg b/src/igz-controls/images/other.svg
new file mode 100644
index 0000000000..664d6d2a20
--- /dev/null
+++ b/src/igz-controls/images/other.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/package.svg b/src/igz-controls/images/package.svg
new file mode 100644
index 0000000000..17ceaeb8fa
--- /dev/null
+++ b/src/igz-controls/images/package.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/pagination-arrow.svg b/src/igz-controls/images/pagination-arrow.svg
new file mode 100644
index 0000000000..233b5a2279
--- /dev/null
+++ b/src/igz-controls/images/pagination-arrow.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/pagination-double-arrow.svg b/src/igz-controls/images/pagination-double-arrow.svg
new file mode 100644
index 0000000000..f3b8439019
--- /dev/null
+++ b/src/igz-controls/images/pagination-double-arrow.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/partition.svg b/src/igz-controls/images/partition.svg
new file mode 100644
index 0000000000..7452fb6160
--- /dev/null
+++ b/src/igz-controls/images/partition.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/pin-icon.svg b/src/igz-controls/images/pin-icon.svg
new file mode 100644
index 0000000000..66531a26ef
--- /dev/null
+++ b/src/igz-controls/images/pin-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/pipelines.svg b/src/igz-controls/images/pipelines.svg
new file mode 100644
index 0000000000..2c36c76d24
--- /dev/null
+++ b/src/igz-controls/images/pipelines.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/plus.svg b/src/igz-controls/images/plus.svg
new file mode 100644
index 0000000000..9eba4ab66f
--- /dev/null
+++ b/src/igz-controls/images/plus.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/popout.svg b/src/igz-controls/images/popout.svg
new file mode 100644
index 0000000000..90a91ea3b7
--- /dev/null
+++ b/src/igz-controls/images/popout.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/present-metrics-icon.svg b/src/igz-controls/images/present-metrics-icon.svg
new file mode 100644
index 0000000000..72b984da06
--- /dev/null
+++ b/src/igz-controls/images/present-metrics-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/question-mark.svg b/src/igz-controls/images/question-mark.svg
new file mode 100644
index 0000000000..eb862a8956
--- /dev/null
+++ b/src/igz-controls/images/question-mark.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/range-arrow-small.svg b/src/igz-controls/images/range-arrow-small.svg
new file mode 100644
index 0000000000..40c4d2f777
--- /dev/null
+++ b/src/igz-controls/images/range-arrow-small.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/refresh-2.svg b/src/igz-controls/images/refresh-2.svg
new file mode 100644
index 0000000000..091f5de17b
--- /dev/null
+++ b/src/igz-controls/images/refresh-2.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/refresh.svg b/src/igz-controls/images/refresh.svg
new file mode 100644
index 0000000000..0f5b5ee1fa
--- /dev/null
+++ b/src/igz-controls/images/refresh.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/remote-step-badge.svg b/src/igz-controls/images/remote-step-badge.svg
new file mode 100644
index 0000000000..90f9281ce4
--- /dev/null
+++ b/src/igz-controls/images/remote-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/rerun.svg b/src/igz-controls/images/rerun.svg
new file mode 100644
index 0000000000..f35261af5f
--- /dev/null
+++ b/src/igz-controls/images/rerun.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/response-indicator.svg b/src/igz-controls/images/response-indicator.svg
new file mode 100644
index 0000000000..f70a91bd02
--- /dev/null
+++ b/src/igz-controls/images/response-indicator.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/rocket-icon.svg b/src/igz-controls/images/rocket-icon.svg
new file mode 100644
index 0000000000..42e1e7a31a
--- /dev/null
+++ b/src/igz-controls/images/rocket-icon.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
diff --git a/src/igz-controls/images/router-step-badge.svg b/src/igz-controls/images/router-step-badge.svg
new file mode 100644
index 0000000000..09afc42c43
--- /dev/null
+++ b/src/igz-controls/images/router-step-badge.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/run.svg b/src/igz-controls/images/run.svg
new file mode 100644
index 0000000000..a613e47142
--- /dev/null
+++ b/src/igz-controls/images/run.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/search.svg b/src/igz-controls/images/search.svg
new file mode 100644
index 0000000000..657b88e535
--- /dev/null
+++ b/src/igz-controls/images/search.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/search2-icon.svg b/src/igz-controls/images/search2-icon.svg
new file mode 100644
index 0000000000..1ecfca417b
--- /dev/null
+++ b/src/igz-controls/images/search2-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/select.svg b/src/igz-controls/images/select.svg
new file mode 100644
index 0000000000..4864fbcb2b
--- /dev/null
+++ b/src/igz-controls/images/select.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/serving-icon.svg b/src/igz-controls/images/serving-icon.svg
new file mode 100644
index 0000000000..b05be9f35f
--- /dev/null
+++ b/src/igz-controls/images/serving-icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/settings.svg b/src/igz-controls/images/settings.svg
new file mode 100644
index 0000000000..2070b1b42c
--- /dev/null
+++ b/src/igz-controls/images/settings.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/severity-critical.svg b/src/igz-controls/images/severity-critical.svg
new file mode 100644
index 0000000000..adb65ebb7b
--- /dev/null
+++ b/src/igz-controls/images/severity-critical.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/severity-error.svg b/src/igz-controls/images/severity-error.svg
new file mode 100644
index 0000000000..e79148e448
--- /dev/null
+++ b/src/igz-controls/images/severity-error.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/severity-high.svg b/src/igz-controls/images/severity-high.svg
new file mode 100644
index 0000000000..31f19b56f4
--- /dev/null
+++ b/src/igz-controls/images/severity-high.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/severity-low.svg b/src/igz-controls/images/severity-low.svg
new file mode 100644
index 0000000000..ca6c649e60
--- /dev/null
+++ b/src/igz-controls/images/severity-low.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/severity-normal.svg b/src/igz-controls/images/severity-normal.svg
new file mode 100644
index 0000000000..2b4bafe6a7
--- /dev/null
+++ b/src/igz-controls/images/severity-normal.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/severity-ok.svg b/src/igz-controls/images/severity-ok.svg
new file mode 100644
index 0000000000..2e44cc97de
--- /dev/null
+++ b/src/igz-controls/images/severity-ok.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/slack-icon-colored.svg b/src/igz-controls/images/slack-icon-colored.svg
new file mode 100644
index 0000000000..19f034b2a0
--- /dev/null
+++ b/src/igz-controls/images/slack-icon-colored.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/src/igz-controls/images/slack-icon.svg b/src/igz-controls/images/slack-icon.svg
new file mode 100644
index 0000000000..c921ceaa54
--- /dev/null
+++ b/src/igz-controls/images/slack-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/igz-controls/images/sort-arrow.svg b/src/igz-controls/images/sort-arrow.svg
new file mode 100644
index 0000000000..07d1e0d5f3
--- /dev/null
+++ b/src/igz-controls/images/sort-arrow.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/spark.svg b/src/igz-controls/images/spark.svg
new file mode 100644
index 0000000000..4a5d3d8775
--- /dev/null
+++ b/src/igz-controls/images/spark.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/stream.svg b/src/igz-controls/images/stream.svg
new file mode 100644
index 0000000000..0a9452b723
--- /dev/null
+++ b/src/igz-controls/images/stream.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/success_done.svg b/src/igz-controls/images/success_done.svg
new file mode 100644
index 0000000000..aa70b536c2
--- /dev/null
+++ b/src/igz-controls/images/success_done.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/tag-icon.svg b/src/igz-controls/images/tag-icon.svg
new file mode 100644
index 0000000000..3dd8638c69
--- /dev/null
+++ b/src/igz-controls/images/tag-icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/timer-outline-icon.svg b/src/igz-controls/images/timer-outline-icon.svg
new file mode 100644
index 0000000000..0a55f71638
--- /dev/null
+++ b/src/igz-controls/images/timer-outline-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/tsdb-icon.svg b/src/igz-controls/images/tsdb-icon.svg
new file mode 100644
index 0000000000..de313b135e
--- /dev/null
+++ b/src/igz-controls/images/tsdb-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/unarchive-icon.svg b/src/igz-controls/images/unarchive-icon.svg
new file mode 100644
index 0000000000..c528e6e497
--- /dev/null
+++ b/src/igz-controls/images/unarchive-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/unpin-icon.svg b/src/igz-controls/images/unpin-icon.svg
new file mode 100644
index 0000000000..1c52c90b6d
--- /dev/null
+++ b/src/igz-controls/images/unpin-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/unsuccess_alert.svg b/src/igz-controls/images/unsuccess_alert.svg
new file mode 100644
index 0000000000..2ca44028e5
--- /dev/null
+++ b/src/igz-controls/images/unsuccess_alert.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/igz-controls/images/upload-icon.svg b/src/igz-controls/images/upload-icon.svg
new file mode 100644
index 0000000000..4641226050
--- /dev/null
+++ b/src/igz-controls/images/upload-icon.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/igz-controls/images/user.svg b/src/igz-controls/images/user.svg
new file mode 100644
index 0000000000..959fd370ce
--- /dev/null
+++ b/src/igz-controls/images/user.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/users.svg b/src/igz-controls/images/users.svg
new file mode 100644
index 0000000000..f47a4eb0ac
--- /dev/null
+++ b/src/igz-controls/images/users.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/v3io-icon.svg b/src/igz-controls/images/v3io-icon.svg
new file mode 100644
index 0000000000..bdd1cf6be4
--- /dev/null
+++ b/src/igz-controls/images/v3io-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/view-details.svg b/src/igz-controls/images/view-details.svg
new file mode 100644
index 0000000000..6a2ba7b8d1
--- /dev/null
+++ b/src/igz-controls/images/view-details.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/vs-code.svg b/src/igz-controls/images/vs-code.svg
new file mode 100644
index 0000000000..0b3feb8dad
--- /dev/null
+++ b/src/igz-controls/images/vs-code.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/images/warning.svg b/src/igz-controls/images/warning.svg
new file mode 100644
index 0000000000..f38aa1908d
--- /dev/null
+++ b/src/igz-controls/images/warning.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
diff --git a/src/igz-controls/images/webhook-icon.svg b/src/igz-controls/images/webhook-icon.svg
new file mode 100644
index 0000000000..f265f7caf6
--- /dev/null
+++ b/src/igz-controls/images/webhook-icon.svg
@@ -0,0 +1,9 @@
+
+
diff --git a/src/igz-controls/images/workflow-icon.svg b/src/igz-controls/images/workflow-icon.svg
new file mode 100644
index 0000000000..d22a41f19e
--- /dev/null
+++ b/src/igz-controls/images/workflow-icon.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/src/igz-controls/images/yaml.svg b/src/igz-controls/images/yaml.svg
new file mode 100644
index 0000000000..efa53d8c87
--- /dev/null
+++ b/src/igz-controls/images/yaml.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/src/igz-controls/index.scss b/src/igz-controls/index.scss
new file mode 100644
index 0000000000..66a91ae35b
--- /dev/null
+++ b/src/igz-controls/index.scss
@@ -0,0 +1,4 @@
+@use './scss/fonts';
+@use './scss/common';
+@use './scss/table';
+@use './scss/details';
diff --git a/src/igz-controls/nextGenComponents/components/Badge/Badge.tsx b/src/igz-controls/nextGenComponents/components/Badge/Badge.tsx
new file mode 100644
index 0000000000..56195e5817
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/Badge/Badge.tsx
@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react'
+
+import { cn } from '@igz-controls/lib/utils'
+
+const BADGE_COLOR = { bg: 'bg-[rgba(164,76,197,0.16)]', text: 'text-[#A44CC5]' } as const
+
+export const getBadgeColor = () => {
+ return BADGE_COLOR
+}
+
+export type BadgeProps = {
+ label: string
+ className?: string
+ children?: ReactNode
+}
+
+const Badge = ({ label, className, children }: BadgeProps) => {
+ const color = getBadgeColor()
+
+ return (
+
+ {children ?? label}
+
+ )
+}
+
+export default Badge
diff --git a/src/igz-controls/nextGenComponents/components/Badge/index.ts b/src/igz-controls/nextGenComponents/components/Badge/index.ts
new file mode 100644
index 0000000000..fb3cc5bb81
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/Badge/index.ts
@@ -0,0 +1,2 @@
+export { default, getBadgeColor } from './Badge'
+export type { BadgeProps } from './Badge'
diff --git a/src/igz-controls/nextGenComponents/components/BadgeCell/BadgeCell.tsx b/src/igz-controls/nextGenComponents/components/BadgeCell/BadgeCell.tsx
new file mode 100644
index 0000000000..a142d3386b
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/BadgeCell/BadgeCell.tsx
@@ -0,0 +1,180 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import Badge, { getBadgeColor } from '@igz-controls/components/Badge'
+import { Popover, PopoverContent, PopoverTrigger } from '@igz-controls/components/ui/popover'
+import { cn } from '@igz-controls/lib/utils'
+
+export type BadgeItem = {
+ key: string
+ value?: string
+}
+
+export type BadgeCellProps = {
+ badges: BadgeItem[]
+ delimiter?: string
+ maxVisible?: number
+ className?: string
+}
+
+const badgeColor = getBadgeColor()
+const OVERFLOW_BADGE_WIDTH = 36
+const BADGE_GAP = 4
+
+const formatLabel = (badge: BadgeItem, delimiter: string) => {
+ if (!badge.value) return badge.key
+ return `${badge.key}${delimiter}${badge.value}`
+}
+
+const BadgeCell = ({ badges, delimiter = ':', maxVisible, className }: BadgeCellProps) => {
+ const containerRef = useRef(null)
+ const measureRef = useRef(null)
+ const [visibleCount, setVisibleCount] = useState(badges.length)
+
+ const calculateVisibleCount = useCallback(() => {
+ const container = containerRef.current
+ const measure = measureRef.current
+ if (!container || !measure) return
+
+ const containerWidth = container.offsetWidth
+
+ if (maxVisible !== undefined) {
+ setVisibleCount(Math.min(maxVisible, badges.length))
+ return
+ }
+
+ const badgeElements = measure.children
+ let totalWidth = 0
+ let count = 0
+
+ for (let i = 0; i < badgeElements.length; i++) {
+ const badgeWidth = (badgeElements[i] as HTMLElement).offsetWidth + BADGE_GAP
+ const needsOverflow = i < badges.length - 1
+ const availableWidth = needsOverflow
+ ? containerWidth - OVERFLOW_BADGE_WIDTH - BADGE_GAP
+ : containerWidth
+
+ if (totalWidth + badgeWidth <= availableWidth) {
+ totalWidth += badgeWidth
+ count++
+ } else {
+ break
+ }
+ }
+
+ setVisibleCount(Math.max(count, 0))
+ }, [badges.length, maxVisible])
+
+ const throttledCalculate = useMemo(() => {
+ let lastCall = 0
+ let timeoutId: ReturnType | null = null
+
+ const throttled = () => {
+ const now = Date.now()
+ const remaining = 150 - (now - lastCall)
+
+ if (remaining <= 0) {
+ lastCall = now
+ calculateVisibleCount()
+ } else if (!timeoutId) {
+ timeoutId = setTimeout(() => {
+ lastCall = Date.now()
+ timeoutId = null
+ calculateVisibleCount()
+ }, remaining)
+ }
+ }
+
+ throttled.cancel = () => {
+ if (timeoutId) {
+ clearTimeout(timeoutId)
+ timeoutId = null
+ }
+ }
+
+ return throttled
+ }, [calculateVisibleCount])
+
+ useEffect(() => {
+ calculateVisibleCount()
+
+ const observer = new ResizeObserver(throttledCalculate)
+ if (containerRef.current) {
+ observer.observe(containerRef.current)
+ }
+
+ return () => {
+ observer.disconnect()
+ throttledCalculate.cancel()
+ }
+ }, [calculateVisibleCount, throttledCalculate])
+
+ if (badges.length === 0) {
+ return null
+ }
+
+ const visibleBadges = badges.slice(0, visibleCount)
+ const hiddenBadges = badges.slice(visibleCount)
+ const hiddenCount = hiddenBadges.length
+
+ return (
+
+
+ {badges.map((badge, index) => (
+
+
+ {visibleBadges.map((badge, index) => (
+
+ ))}
+
+ {hiddenCount > 0 && (
+
+
+
+ +{hiddenCount}
+
+
+
+
+ {hiddenBadges.map((badge, index) => (
+
+ {formatLabel(badge, delimiter)}
+
+ ))}
+
+
+
+ )}
+
({
+ from: isoToLocalDate(initialRange?.since ?? ''),
+ to: isoToLocalDate(initialRange?.until ?? '')
+ })
+ const [hours, setHours] = useState<{ from: string; to: string }>({
+ from: isoToHour(initialRange?.since ?? '') || defaultSinceHour,
+ to: isoToHour(initialRange?.until ?? '') || (singleDate ? '' : defaultUntilHour)
+ })
+
+ const errorMessage = useMemo(() => {
+ if (singleDate || !date.from || !date.to) return ''
+
+ const fromDate = applyHourToDate(date.from, hours.from, defaultSinceHour)
+ const toDate = applyHourToDate(date.to, hours.to, defaultUntilHour)
+
+ if (fromDate.getTime() > toDate.getTime()) {
+ return FROM_AFTER_TO_ERROR
+ }
+
+ return ''
+ }, [date.from, date.to, hours.from, hours.to, singleDate, defaultSinceHour, defaultUntilHour])
+
+ const handleReset = () => {
+ setDate(INITIAL_RANGE)
+ setHours({ from: defaultSinceHour, to: singleDate ? '' : defaultUntilHour })
+ onReset?.()
+ }
+
+ const handleSelectDateFrom = (selectedDate?: Date) =>
+ setDate(prev => ({ from: selectedDate, to: prev.to }))
+
+ const handleSelectDateTo = (selectedDate?: Date) =>
+ setDate(prev => ({ from: prev.from, to: selectedDate }))
+
+ const handleFromHourChange = (hour: string) => {
+ setHours(prev => ({ ...prev, from: hour }))
+ }
+
+ const handleToHourChange = (hour: string) => {
+ setHours(prev => ({ ...prev, to: hour }))
+ }
+
+ const hasNoDateSelected = !date.from && !date.to
+ const isApplyDisabled = (singleDate ? !date.from : !date.from || !date.to) || !!errorMessage
+
+ const handleApply = () => {
+ if (errorMessage) return
+ if (!date.from) return
+
+ const since = applyHourToDate(date.from, hours.from, defaultSinceHour)
+
+ if (singleDate) {
+ onApply?.({ since: toUTCISO(since), until: '' })
+ return
+ }
+
+ if (!date.to) return
+ const until = applyHourToDate(date.to, hours.to, defaultUntilHour)
+
+ onApply?.({ since: toUTCISO(since), until: toUTCISO(until) })
+ }
+
+ return (
+
+
+
+
+ {errorMessage && (
+
+ )}
+
+
+
+ {RESET}
+
+
+ {FILTER_BUTTON_APPLY}
+
+
+
(dateValue ?? new Date())
+
+ useEffect(() => {
+ setMaskedDate(dateValue ? formatLocalDate(dateValue) : '')
+ if (dateValue) {
+ setDisplayedMonth(dateValue)
+ }
+ }, [dateValue])
+
+ const handleMaskedDateChange = useCallback(
+ (masked: string) => {
+ setMaskedDate(masked)
+ if (!masked) {
+ onSelectDate(undefined)
+ return
+ }
+ if (isMaskComplete(masked, PLACEHOLDER_CHAR)) {
+ const parsed = parseLocalDate(masked)
+ if (parsed) onSelectDate(parsed)
+ }
+ },
+ [onSelectDate]
+ )
+
+ const handleDateBlur = useCallback(() => {
+ if (!maskedDate) {
+ onSelectDate(undefined)
+ return
+ }
+ if (isMaskComplete(maskedDate, PLACEHOLDER_CHAR)) {
+ const parsed = parseLocalDate(maskedDate)
+ if (parsed) {
+ setMaskedDate(formatLocalDate(parsed))
+ onSelectDate(parsed)
+ } else {
+ setMaskedDate(dateValue ? formatLocalDate(dateValue) : '')
+ }
+ } else {
+ setMaskedDate(dateValue ? formatLocalDate(dateValue) : '')
+ }
+ }, [maskedDate, dateValue, onSelectDate])
+
+ return (
+
+ )
+}
diff --git a/src/igz-controls/nextGenComponents/components/CustomRangePicker/MaskedInput.tsx b/src/igz-controls/nextGenComponents/components/CustomRangePicker/MaskedInput.tsx
new file mode 100644
index 0000000000..5524b7a033
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/CustomRangePicker/MaskedInput.tsx
@@ -0,0 +1,192 @@
+import type { ClipboardEvent, KeyboardEvent } from 'react'
+import { useCallback, useRef, useState } from 'react'
+
+import { cn } from '@igz-controls/lib/utils'
+
+export type MaskItem = RegExp | string
+
+export const isMaskComplete = (value: string, placeholderChar = '_'): boolean =>
+ value.length > 0 && !value.includes(placeholderChar)
+
+type Props = {
+ mask: MaskItem[] | ((value: string) => MaskItem[])
+ value: string
+ onChange: (conformedValue: string) => void
+ onBlur?: () => void
+ placeholderChar?: string
+ textPlaceholder?: string
+ className?: string
+}
+
+const PLACEHOLDER = '_'
+
+const resolveMask = (mask: Props['mask'], value: string): MaskItem[] =>
+ typeof mask === 'function' ? mask(value) : mask
+
+const buildPlaceholder = (mask: MaskItem[], pc: string): string =>
+ mask.map(m => (typeof m === 'string' ? m : pc)).join('')
+
+const conformToMask = (raw: string, resolvedMask: MaskItem[], placeholderChar: string): string =>
+ raw
+ .split('')
+ .map((c, i) => {
+ if (typeof resolvedMask[i] === 'string') return resolvedMask[i] as string
+ if (c === placeholderChar) return placeholderChar
+ if ((resolvedMask[i] as RegExp).test(c)) return c
+ return placeholderChar
+ })
+ .join('')
+
+export const MaskedInput = ({
+ mask,
+ value,
+ onChange,
+ onBlur,
+ placeholderChar = PLACEHOLDER,
+ textPlaceholder,
+ className
+}: Props) => {
+ const inputRef = useRef(null)
+ const [isFocused, setIsFocused] = useState(false)
+ const maskArr = resolveMask(mask, value)
+ const maskPlaceholder = buildPlaceholder(maskArr, placeholderChar)
+ const maskedDisplay = value || maskPlaceholder
+
+ const showTextPlaceholder = !!textPlaceholder && !value && !isFocused
+ const inputValue = showTextPlaceholder ? '' : maskedDisplay
+
+ const nextEditablePos = useCallback((from: number, maskItems: MaskItem[]): number => {
+ let pos = from
+ while (pos < maskItems.length && typeof maskItems[pos] === 'string') pos++
+ return pos
+ }, [])
+
+ const prevEditablePos = useCallback((from: number, maskItems: MaskItem[]): number => {
+ let pos = from
+ while (pos >= 0 && typeof maskItems[pos] === 'string') pos--
+ return pos
+ }, [])
+
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent) => {
+ const input = e.target as HTMLInputElement
+ const pos = input.selectionStart ?? 0
+
+ if (e.key === 'Backspace') {
+ e.preventDefault()
+ const editPos = prevEditablePos(pos - 1, maskArr)
+ if (editPos >= 0) {
+ const chars = maskedDisplay.split('')
+ chars[editPos] = placeholderChar
+ const newVal = chars.join('')
+ const resolvedMask = resolveMask(mask, newVal)
+ const resolvedPlaceholder = buildPlaceholder(resolvedMask, placeholderChar)
+ const corrected = conformToMask(newVal, resolvedMask, placeholderChar)
+ onChange(corrected === resolvedPlaceholder ? '' : corrected)
+ requestAnimationFrame(() => input.setSelectionRange(editPos, editPos))
+ }
+ return
+ }
+
+ if (e.key === 'Delete') {
+ e.preventDefault()
+ const editPos = nextEditablePos(pos, maskArr)
+ if (editPos < maskArr.length) {
+ const chars = maskedDisplay.split('')
+ chars[editPos] = placeholderChar
+ const newVal = chars.join('')
+ const resolvedMask = resolveMask(mask, newVal)
+ const resolvedPlaceholder = buildPlaceholder(resolvedMask, placeholderChar)
+ const corrected = conformToMask(newVal, resolvedMask, placeholderChar)
+ onChange(corrected === resolvedPlaceholder ? '' : corrected)
+ requestAnimationFrame(() => input.setSelectionRange(editPos, editPos))
+ }
+ return
+ }
+
+ if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') return
+
+ if (e.key.length === 1 && !e.metaKey && !e.ctrlKey) {
+ e.preventDefault()
+ const editPos = nextEditablePos(pos, maskArr)
+ if (editPos >= maskArr.length) return
+
+ const regex = maskArr[editPos] as RegExp
+ if (!regex.test(e.key)) return
+
+ const chars = maskedDisplay.split('')
+ chars[editPos] = e.key
+ const newVal = chars.join('')
+
+ const resolvedMask = resolveMask(mask, newVal)
+ const corrected = conformToMask(newVal, resolvedMask, placeholderChar)
+
+ onChange(corrected)
+ const nextPos = nextEditablePos(editPos + 1, resolvedMask)
+ requestAnimationFrame(() => input.setSelectionRange(nextPos, nextPos))
+ }
+ },
+ [mask, maskArr, maskedDisplay, onChange, placeholderChar, nextEditablePos, prevEditablePos]
+ )
+
+ const handlePaste = useCallback(
+ (e: ClipboardEvent) => {
+ e.preventDefault()
+ const pasted = e.clipboardData.getData('text')
+ const input = e.target as HTMLInputElement
+ let pos = input.selectionStart ?? 0
+ const chars = maskedDisplay.split('')
+
+ for (const char of pasted) {
+ pos = nextEditablePos(pos, maskArr)
+ if (pos >= maskArr.length) break
+ if ((maskArr[pos] as RegExp).test(char)) {
+ chars[pos] = char
+ pos++
+ }
+ }
+
+ const newVal = chars.join('')
+ const resolvedMask = resolveMask(mask, newVal)
+ const corrected = conformToMask(newVal, resolvedMask, placeholderChar)
+
+ onChange(corrected)
+ const cursorPos = nextEditablePos(pos, resolvedMask)
+ requestAnimationFrame(() => input.setSelectionRange(cursorPos, cursorPos))
+ },
+ [mask, maskArr, maskedDisplay, onChange, placeholderChar, nextEditablePos]
+ )
+
+ const handleFocus = useCallback(() => {
+ setIsFocused(true)
+ requestAnimationFrame(() => {
+ const pos = maskedDisplay.indexOf(placeholderChar)
+ const cursorPos = pos === -1 ? maskedDisplay.length : pos
+ inputRef.current?.setSelectionRange(cursorPos, cursorPos)
+ })
+ }, [maskedDisplay, placeholderChar])
+
+ const handleBlurInternal = useCallback(() => {
+ setIsFocused(false)
+ onBlur?.()
+ }, [onBlur])
+
+ return (
+ (null)
+ const listRef = useRef(null)
+ const options = useMemo(() => buildHalfHourOptions(), [])
+
+ useEffect(() => {
+ setMaskedValue(value)
+ }, [value])
+
+ useEffect(() => {
+ if (!isOpen) return
+ const handleClick = (e: MouseEvent) => {
+ if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+ setIsOpen(false)
+ }
+ }
+ document.addEventListener('mousedown', handleClick)
+ return () => document.removeEventListener('mousedown', handleClick)
+ }, [isOpen])
+
+ useEffect(() => {
+ if (!isOpen || !listRef.current || !value) return
+ const activeEl = listRef.current.querySelector('[data-active="true"]')
+ if (activeEl) activeEl.scrollIntoView({ block: 'nearest' })
+ }, [isOpen, value])
+
+ const handleMaskedChange = useCallback(
+ (masked: string) => {
+ setMaskedValue(masked)
+ setIsOpen(false)
+ if (isMaskComplete(masked, PLACEHOLDER_CHAR)) {
+ const normalized = parseTimeInput(masked)
+ if (normalized) onChange(normalized)
+ }
+ },
+ [onChange]
+ )
+
+ const handleBlur = useCallback(() => {
+ if (!maskedValue) return
+ if (isMaskComplete(maskedValue, PLACEHOLDER_CHAR)) {
+ const normalized = parseTimeInput(maskedValue)
+ if (normalized) {
+ setMaskedValue(normalized)
+ onChange(normalized)
+ } else {
+ setMaskedValue(value)
+ }
+ } else {
+ setMaskedValue(value)
+ }
+ }, [maskedValue, value, onChange])
+
+ const handleOptionSelect = (option: string) => {
+ setMaskedValue(option)
+ onChange(option)
+ setIsOpen(false)
+ }
+
+ return (
+
+
+
e.preventDefault()}
+ onClick={() => setIsOpen(prev => !prev)}
+ tabIndex={-1}
+ >
+
+
+ {isOpen && (
+
+ {options.map(time => (
+ {
+ e.preventDefault()
+ handleOptionSelect(time)
+ }}
+ >
+ {time}
+
+ ))}
+
+ )}
+
= {
+ content: ComponentType
+ titleAccessorKey?: keyof TData
+ titleAccessorFn?: (row: TData) => string | ReactNode
+ selectedRow?: TData
+ onRowSelect?: (row: TData) => void
+ onRowClose?: () => void
+}
+
+export type CheckboxSelectionConfig = {
+ rowSelection: RowSelectionState
+ onRowSelectionChange: (state: RowSelectionState) => void
+}
+
+export type DataTableProps = {
+ className?: string
+ data: TData[]
+ columns: ColumnDef[]
+ initialSorting?: SortingState
+ pagination?: PaginationConfig
+ rowActions?: (row: TData) => ActionMenuItem[]
+ detailsPanel?: DetailsPanelConfig
+ checkboxSelection?: CheckboxSelectionConfig
+}
+
+const DataTable = ({
+ className,
+ data,
+ columns,
+ initialSorting = [],
+ pagination,
+ rowActions,
+ detailsPanel,
+ checkboxSelection
+}: Readonly>) => {
+ const { selectedRow, onRowSelect, onRowClose } = detailsPanel ?? {}
+ const tableContainerRef = useRef(null)
+ const wrapperRef = useClickOutside(selectedRow ? onRowClose : undefined)
+
+ const detailsPanelSelection = useMemo(() => {
+ if (!selectedRow) return {}
+ const index = data.indexOf(selectedRow)
+ return index >= 0 ? { [index]: true } : {}
+ }, [selectedRow, data])
+
+ const rowSelection = checkboxSelection ? checkboxSelection.rowSelection : detailsPanelSelection
+
+ const allColumns = useMemo(
+ () => (checkboxSelection ? [checkboxColumn as ColumnDef, ...columns] : columns),
+ [checkboxSelection, columns]
+ )
+
+ const table = useReactTable({
+ data,
+ columns: allColumns,
+ defaultColumn: {
+ size: 1,
+ minSize: 0
+ },
+ state: {
+ rowSelection
+ },
+ onRowSelectionChange: updaterOrValue => {
+ if (!checkboxSelection) return
+ const newSelection =
+ typeof updaterOrValue === 'function' ? updaterOrValue(rowSelection) : updaterOrValue
+ checkboxSelection.onRowSelectionChange(newSelection)
+ },
+ getCoreRowModel: getCoreRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ enableRowSelection: true,
+ enableMultiRowSelection: !!checkboxSelection,
+ enableSorting: true,
+ enableSortingRemoval: false,
+ initialState: {
+ sorting: initialSorting
+ }
+ })
+
+ const { rows } = table.getRowModel()
+
+ const rowVirtualizer = useVirtualizer({
+ count: rows.length,
+ estimateSize: () => ESTIMATED_ROW_HEIGHT,
+ getScrollElement: () => tableContainerRef.current,
+ overscan: 5
+ })
+
+ const virtualRows = rowVirtualizer.getVirtualItems()
+
+ const selected =
+ selectedRow ?? table.getRowModel().flatRows.find(r => r.getIsSelected())?.original
+
+ const visibleColumns = table.getVisibleLeafColumns()
+ const getColumnWidth = useMemo(() => getColumnWidthCalculator(visibleColumns), [visibleColumns])
+
+ const totalColSpan = allColumns.length + (rowActions ? 1 : 0)
+ const { top: topPadding, bottom: bottomPadding } = getVirtualPadding(virtualRows, rowVirtualizer)
+
+ return (
+ <>
+
+
+
+
+ {table.getHeaderGroups().map(headerGroup => (
+
+ {headerGroup.headers.map((header, headerIndex) => {
+ const isCheckboxColumn = header.column.id === DATATABLE_TEXT.CHECKBOX_COLUMN_ID
+ const isFirstDataColumn = checkboxSelection
+ ? headerIndex === 1
+ : headerIndex === 0
+ return (
+
+ {!header.isPlaceholder &&
+ (isCheckboxColumn ? (
+ flexRender(header.column.columnDef.header, header.getContext())
+ ) : (
+
+
+ {flexRender(header.column.columnDef.header, header.getContext())}
+
+
+ {header.column.getCanSort() && (
+
+
+ )}
+
+ ))}
+
+ )
+ })}
+ {rowActions && (
+
+ ))}
+
+
+
+ {rows.length === 0 ? (
+
+
+ {NO_ROWS_MESSAGES}
+
+
+ ) : (
+ <>
+ {topPadding > 0 && (
+
+
+ )}
+ {virtualRows.map(virtualRow => {
+ const row = rows[virtualRow.index]
+ return (
+
+ {row.getVisibleCells().map((cell, idx) => {
+ const isCheckboxColumn =
+ cell.column.id === DATATABLE_TEXT.CHECKBOX_COLUMN_ID
+ const isFirstDataColumn = checkboxSelection ? idx === 1 : idx === 0
+ const columnMeta = cell.column.columnDef.meta as
+ | { skipEllipsisTooltip?: boolean; tdClassName?: string }
+ | undefined
+ const skipEllipsisTooltip = Boolean(columnMeta?.skipEllipsisTooltip)
+ const renderedCell = flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )
+ const wrapCellWithEllipsis = !isCheckboxColumn && !skipEllipsisTooltip
+ const cellContent = wrapCellWithEllipsis ? (
+ {renderedCell}
+ ) : (
+ renderedCell
+ )
+ return (
+ onRowSelect(row.original)
+ : undefined
+ }
+ style={getColumnSize(
+ isCheckboxColumn,
+ isFirstDataColumn,
+ cell.column.getSize(),
+ getColumnWidth
+ )}
+ className={cn(
+ 'relative px-4 py-2 text-left text-[#4B4760] text-[15px] font-normal',
+ skipEllipsisTooltip ? 'min-w-0' : 'truncate',
+ isFirstDataColumn && 'w-[250px] pr-[10px]',
+ isCheckboxColumn && 'w-12 px-3',
+ columnMeta?.tdClassName
+ )}
+ data-testid={`data-table-cell-${row.id}`}
+ >
+ {cellContent}
+
+ )
+ })}
+ {rowActions && (
+ e.stopPropagation()}
+ >
+
+ )}
+
+ )
+ })}
+ {bottomPadding > 0 && (
+
+
+ )}
+
+ )}
+
+
+
+
+ {selected && detailsPanel && (
+
onRowClose?.()} />
+ )}
+ (columns: Column[]) => {
+ const dataColumns = columns.filter(col => col.id !== DATATABLE_TEXT.CHECKBOX_COLUMN_ID)
+ const totalSize = dataColumns.reduce((sum, col) => sum + col.getSize(), 0)
+ return (size: number) => `${(size / totalSize) * 100}%`
+}
+
+export const getColumnSize = (
+ isCheckbox: boolean,
+ isFirstData: boolean,
+ size: number,
+ getColumnWidth: (size: number) => string
+) => {
+ if (isCheckbox) return { width: '48px' }
+ if (!isFirstData) return { width: getColumnWidth(size) }
+ return undefined
+}
+
+export const getVirtualPadding = (
+ virtualRows: VirtualItem[],
+ rowVirtualizer: Virtualizer
+) => {
+ const top = virtualRows.length > 0 ? virtualRows[0].start : 0
+ const bottom =
+ virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - virtualRows.at(-1)!.end : 0
+ return { top, bottom }
+}
diff --git a/src/igz-controls/nextGenComponents/components/DataTable/checkboxColumn.tsx b/src/igz-controls/nextGenComponents/components/DataTable/checkboxColumn.tsx
new file mode 100644
index 0000000000..100577a567
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/DataTable/checkboxColumn.tsx
@@ -0,0 +1,30 @@
+import type { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@igz-controls/components/ui/checkbox'
+import { DATATABLE_TEXT } from '@igz-controls/constants'
+
+const checkboxColumn: ColumnDef = {
+ id: DATATABLE_TEXT.CHECKBOX_COLUMN_ID,
+ header: ({ table }) => (
+ table.toggleAllPageRowsSelected(!!value)}
+ aria-label={DATATABLE_TEXT.SELECT_ALL}
+ data-testid="data-table-select-all-checkbox"
+ />
+ ),
+ cell: ({ row }) => (
+ row.toggleSelected(!!value)}
+ aria-label={DATATABLE_TEXT.SELECT_ROW}
+ data-testid={`data-table-row-checkbox-${row.id}`}
+ />
+ ),
+ enableSorting: false,
+ enableHiding: false
+}
+
+export default checkboxColumn
diff --git a/src/igz-controls/nextGenComponents/components/DataTable/index.ts b/src/igz-controls/nextGenComponents/components/DataTable/index.ts
new file mode 100644
index 0000000000..cefbf971fe
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/DataTable/index.ts
@@ -0,0 +1 @@
+export { default } from './DataTable'
diff --git a/src/igz-controls/nextGenComponents/components/DetailsPanel/DetailsPanel.tsx b/src/igz-controls/nextGenComponents/components/DetailsPanel/DetailsPanel.tsx
new file mode 100644
index 0000000000..4a8c0df6c6
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/DetailsPanel/DetailsPanel.tsx
@@ -0,0 +1,70 @@
+import { ComponentType, ReactNode, useMemo } from 'react'
+
+import Close from '../../../images/close.svg?react'
+import EllipsisTooltip from '@igz-controls/components/EllipsisTooltip/EllipsisTooltip'
+import { Button } from '@igz-controls/components/ui/button'
+import { DETAILS_FALLBACK_TITLE } from '@igz-controls/constants'
+
+type DetailsPanelProps = {
+ row: TData
+ content: ComponentType
+ titleAccessorKey?: keyof TData
+ titleAccessorFn?: (row: TData) => string | ReactNode
+ onClose: () => void
+}
+
+const DetailsPanel = ({
+ row,
+ content: Content,
+ titleAccessorKey,
+ titleAccessorFn,
+ onClose
+}: DetailsPanelProps) => {
+ const title = useMemo((): string | ReactNode => {
+ if (titleAccessorFn) {
+ return titleAccessorFn(row)
+ }
+ if (titleAccessorKey && row[titleAccessorKey]) {
+ return String(row[titleAccessorKey])
+ }
+ return DETAILS_FALLBACK_TITLE
+ }, [row, titleAccessorFn, titleAccessorKey])
+
+ return (
+
+ )
+}
+
+export default DetailsPanel
diff --git a/src/igz-controls/nextGenComponents/components/DetailsPanel/index.ts b/src/igz-controls/nextGenComponents/components/DetailsPanel/index.ts
new file mode 100644
index 0000000000..381a58f557
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/DetailsPanel/index.ts
@@ -0,0 +1 @@
+export { default } from './DetailsPanel'
diff --git a/src/igz-controls/nextGenComponents/components/EllipsisTooltip/EllipsisTooltip.tsx b/src/igz-controls/nextGenComponents/components/EllipsisTooltip/EllipsisTooltip.tsx
new file mode 100644
index 0000000000..b0bf1e0b58
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/EllipsisTooltip/EllipsisTooltip.tsx
@@ -0,0 +1,39 @@
+import { ReactNode, useEffect, useRef, useState } from 'react'
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@igz-controls/components/ui/tooltip'
+import { cn } from '@igz-controls/lib/utils'
+
+type EllipsisTooltipProps = {
+ children: ReactNode
+ className?: string
+}
+
+const EllipsisTooltip = ({ children, className }: EllipsisTooltipProps) => {
+ const ref = useRef(null)
+ const [isOverflowed, setIsOverflowed] = useState(false)
+
+ useEffect(() => {
+ const text = ref.current
+ if (!text) return
+ setIsOverflowed(text.scrollWidth > text.clientWidth)
+ }, [children])
+
+ const content = (
+
+ {children}
+
+ )
+
+ if (!isOverflowed) return content
+
+ return (
+
+ {content}
+
+ {children}
+
+
+ )
+}
+
+export default EllipsisTooltip
diff --git a/src/igz-controls/nextGenComponents/components/EllipsisTooltip/index.ts b/src/igz-controls/nextGenComponents/components/EllipsisTooltip/index.ts
new file mode 100644
index 0000000000..f34e811d34
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/EllipsisTooltip/index.ts
@@ -0,0 +1 @@
+export { default } from './EllipsisTooltip'
diff --git a/src/igz-controls/nextGenComponents/components/FilterPopover/FilterPopover.tsx b/src/igz-controls/nextGenComponents/components/FilterPopover/FilterPopover.tsx
new file mode 100644
index 0000000000..e28fa94f84
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/FilterPopover/FilterPopover.tsx
@@ -0,0 +1,190 @@
+import { useMemo } from 'react'
+
+import ActiveFilter from '../../../images/activeFilter.svg?react'
+import Filter from '../../../images/filter-2.svg?react'
+import { Button } from '@igz-controls/components/ui/button'
+import { Input } from '@igz-controls/components/ui/input'
+import { Popover, PopoverTrigger, PopoverContent } from '@igz-controls/components/ui/popover'
+import { ScrollArea } from '@igz-controls/components/ui/scroll-area'
+import {
+ Select,
+ SelectTrigger,
+ SelectValue,
+ SelectContent,
+ SelectItem
+} from '@igz-controls/components/ui/select'
+import { FILTER_POPOVER_DEFAULT_TITLE, FILTER_BUTTON_CLEAR, FILTER_BUTTON_APPLY } from '@igz-controls/constants'
+import { useTableStore, selectFilterPopover, DEFAULT_FILTER_SCOPE } from '@igz-controls/stores/tableStore'
+import type { FilterFieldDef, FilterSchema, FilterValues } from '@igz-controls/types/table/filter'
+import { buildInitialFromSchema, hasActiveFilters, objectValues } from '@igz-controls/utils/tableFilters.utils'
+import MultiSelectField from '@igz-controls/components/MultiSelectField'
+
+type Props = {
+ schema: FilterSchema
+ title?: string
+ scopeId?: string
+ onApply?: (vals?: FilterValues) => void
+ onClear?: () => void
+}
+
+const FilterPopover = ({
+ schema,
+ title = FILTER_POPOVER_DEFAULT_TITLE,
+ scopeId = DEFAULT_FILTER_SCOPE,
+ onApply,
+ onClear
+}: Readonly>) => {
+ const { setFilterPopoverOpen, setFilterDraft, resetFilterDraft } = useTableStore()
+ const { open: filterPopoverOpen, draft: filterDraft } = useTableStore(
+ selectFilterPopover(scopeId)
+ )
+ const isFilterActive = useMemo(() => hasActiveFilters(schema), [schema])
+
+ const handleOpenChange = (next: boolean) => {
+ if (next) {
+ const initial = buildInitialFromSchema(schema)
+ resetFilterDraft(scopeId, initial)
+ }
+ setFilterPopoverOpen(scopeId, next)
+ }
+
+ const reset = () => {
+ resetFilterDraft(scopeId, {})
+ onClear?.()
+ setFilterPopoverOpen(scopeId, false)
+ }
+
+ const apply = () => {
+ onApply?.(filterDraft as FilterValues)
+ setFilterPopoverOpen(scopeId, false)
+ }
+
+ return (
+
+
+
+ {isFilterActive ?
+
+
+
+
+
+ {title}
+
+
+
+
+
+ {objectValues(schema as Record
>).map(filterField => {
+ const value = filterDraft[filterField.key]
+
+ return (
+
+
+ {filterField.label}
+
+
+ {filterField.kind === 'text' && (
+
+ setFilterDraft(scopeId, prev => ({
+ ...prev,
+ [filterField.key]: e.target.value
+ }))
+ }
+ data-testid={`filter-popover-input-${filterField.label}`}
+ />
+ )}
+
+ {filterField.kind === 'select' && (
+
+ setFilterDraft(scopeId, prev => ({
+ ...prev,
+ [filterField.key]: value
+ }))
+ }
+ disabled={filterField.disabled}
+ >
+
+
+
+ {(filterField.options ?? []).map(option => (
+
+ {option.label}
+
+ ))}
+
+
+ )}
+
+ {filterField.kind === 'multi-select' && (
+
setFilterDraft(scopeId, draft)}
+ />
+ )}
+
+
+
+
+ {FILTER_BUTTON_CLEAR}
+
+
+ {FILTER_BUTTON_APPLY}
+
+
+
+
+ )
+}
+
+export default FilterPopover
diff --git a/src/igz-controls/nextGenComponents/components/FilterPopover/index.ts b/src/igz-controls/nextGenComponents/components/FilterPopover/index.ts
new file mode 100644
index 0000000000..5537005ade
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/FilterPopover/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterPopover'
diff --git a/src/igz-controls/nextGenComponents/components/Loader/Loader.tsx b/src/igz-controls/nextGenComponents/components/Loader/Loader.tsx
new file mode 100644
index 0000000000..e5e0decbfb
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/Loader/Loader.tsx
@@ -0,0 +1,82 @@
+import { Loader2 } from 'lucide-react'
+
+import { cn } from '@igz-controls/lib/utils'
+
+export type LoaderProps = {
+ /** Controls overall placement and sizing strategy.
+ * - `fullscreen` — fixed full-viewport overlay (z-50)
+ * - `section` — absolute overlay that covers the nearest `relative` ancestor (z-10)
+ * - `inline` — a small border-based spinner with no wrapper; position via `className`
+ */
+ mode?: 'fullscreen' | 'section' | 'inline'
+ variant?: 'primary' | 'secondary'
+ size?: 'sm' | 'md' | 'lg'
+ /** Adds a semi-transparent dark background. Only applies to `fullscreen` mode. */
+ overlay?: boolean
+ className?: string
+}
+
+const arcSizeMap: Record, number> = {
+ sm: 20,
+ md: 40,
+ lg: 64
+}
+
+const inlineSizeMap: Record, string> = {
+ sm: 'w-3.5 h-3.5',
+ md: 'w-5 h-5',
+ lg: 'w-7 h-7'
+}
+
+const Loader = ({
+ mode = 'section',
+ variant = 'primary',
+ size = 'md',
+ overlay = true,
+ className
+}: LoaderProps) => {
+ if (mode === 'inline') {
+ return (
+
+ )
+ }
+
+ const isFullscreen = mode === 'fullscreen'
+
+ return (
+
+
+
+
+ )
+}
+
+export default Loader
diff --git a/src/igz-controls/nextGenComponents/components/Loader/index.ts b/src/igz-controls/nextGenComponents/components/Loader/index.ts
new file mode 100644
index 0000000000..ae8d4609b0
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/Loader/index.ts
@@ -0,0 +1,2 @@
+export { default as Loader } from './Loader'
+export type { LoaderProps } from './Loader'
diff --git a/src/igz-controls/nextGenComponents/components/MultiSelectField/MultiSelectField.tsx b/src/igz-controls/nextGenComponents/components/MultiSelectField/MultiSelectField.tsx
new file mode 100644
index 0000000000..9f3053348c
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/MultiSelectField/MultiSelectField.tsx
@@ -0,0 +1,155 @@
+import { useState } from 'react'
+
+import { Checkbox } from '@igz-controls/components/ui/checkbox'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from '@igz-controls/components/ui/dropdown-menu'
+import type { DraftValues } from '@igz-controls/stores/tableStore'
+import type { FilterFieldDef } from '@igz-controls/types/table/filter'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const MAX_INLINE_LABELS = 2
+
+// ── SelectArrow ───────────────────────────────────────────────────────────────
+
+/**
+ * Downward-pointing triangle that matches the icon used by TimeFilterDropdown
+ * (mirrors select.svg from assets).
+ */
+export const SelectArrow = () => (
+
+
+)
+
+export type MultiSelectFieldProps = {
+ filterField: FilterFieldDef
+ value: DraftValues[string]
+ setFilterDraft: (draft: DraftValues | ((prev: DraftValues) => DraftValues)) => void
+}
+const MultiSelectField = ({ filterField, value, setFilterDraft }: MultiSelectFieldProps) => {
+ const [isOpen, setIsOpen] = useState(false)
+
+ const currentValues: string[] = Array.isArray(value) ? value : []
+ const options = filterField.options ?? []
+
+ const selectedLabels = options.filter(o => currentValues.includes(o.value)).map(o => o.label)
+
+ const triggerText =
+ currentValues.length === 0
+ ? (filterField.placeholder ?? 'Select...')
+ : selectedLabels.length <= MAX_INLINE_LABELS
+ ? selectedLabels.join(', ')
+ : `${selectedLabels.length} items selected`
+
+ const handleToggle = (optValue: string) => {
+ setFilterDraft(prev => {
+ const prevValues = Array.isArray(prev[filterField.key])
+ ? (prev[filterField.key] as string[])
+ : []
+ const toggled = prevValues.includes(optValue)
+ ? prevValues.filter(v => v !== optValue)
+ : [...prevValues, optValue]
+ const next = filterField.resolveValue
+ ? filterField.resolveValue(toggled, prevValues)
+ : toggled
+ return { ...prev, [filterField.key]: next }
+ })
+ }
+
+ return (
+
+
+
+ {triggerText}
+
+
+
+
+ {options.map(option => {
+ const isChecked = currentValues.includes(option.value)
+ const color = option.meta?.color as string | undefined
+ const isDisabled =
+ Boolean((option.meta as Record)?.disabled) ||
+ Boolean(filterField.computeDisabled?.(option.value, currentValues))
+
+ return (
+ {
+ e.preventDefault()
+ if (!isDisabled) handleToggle(option.value)
+ }}
+ data-testid={`filter-popover-multiselect-${filterField.key}-${option.value}`}
+ >
+ e.stopPropagation()}
+ onCheckedChange={() => !isDisabled && handleToggle(option.value)}
+ />
+ {/* Label + dot grouped together so the dot sits right after the text */}
+
+ {option.label}
+ {color && (
+
+
+ )
+ })}
+
+
+ )
+}
+
+export default MultiSelectField
diff --git a/src/igz-controls/nextGenComponents/components/MultiSelectField/index.ts b/src/igz-controls/nextGenComponents/components/MultiSelectField/index.ts
new file mode 100644
index 0000000000..d25677a91c
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/MultiSelectField/index.ts
@@ -0,0 +1,2 @@
+export { default, SelectArrow } from './MultiSelectField'
+export type { MultiSelectFieldProps } from './MultiSelectField'
diff --git a/src/igz-controls/nextGenComponents/components/PaginationControls/PaginationControls.tsx b/src/igz-controls/nextGenComponents/components/PaginationControls/PaginationControls.tsx
new file mode 100644
index 0000000000..ef01381347
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/PaginationControls/PaginationControls.tsx
@@ -0,0 +1,168 @@
+import { ChevronsLeft, ChevronsRight } from 'lucide-react'
+
+import {
+ Pagination,
+ PaginationContent,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious
+} from '@igz-controls/components/ui/pagination'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@igz-controls/components/ui/tooltip'
+import { cn } from '@igz-controls/lib/utils'
+
+export type PaginationConfig = {
+ currentPage: number
+ totalPages: number
+ currentBatch: number
+ hasPrevBatch: boolean
+ hasNextBatch: boolean
+ batchSize: number
+ onPageChange: (page: number) => void
+ onPrevBatch: () => void
+ onNextBatch: () => void
+}
+
+export type PaginationControlsProps = PaginationConfig & {
+ className?: string
+}
+
+const PaginationControls = ({
+ currentPage,
+ totalPages,
+ currentBatch,
+ hasPrevBatch,
+ hasNextBatch,
+ batchSize,
+ onPageChange,
+ onPrevBatch,
+ onNextBatch,
+ className
+}: PaginationControlsProps) => {
+ const canPrevPage = currentPage > 1
+ const canNextPage = currentPage < totalPages
+
+ const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1)
+ const pageOffset = (currentBatch - 1) * batchSize
+
+ const disabledCls = 'pointer-events-none opacity-30'
+
+ const prevBatchStart = (currentBatch - 2) * batchSize + 1
+ const prevBatchEnd = (currentBatch - 1) * batchSize
+ const nextBatchStart = currentBatch * batchSize + 1
+ const nextBatchEnd = (currentBatch + 1) * batchSize
+
+ return (
+
+
+
+
+ {/* Previous Batch Arrow */}
+
+
+
+ {
+ e.preventDefault()
+ if (hasPrevBatch) onPrevBatch()
+ }}
+ data-testid="pagination-prev-batch"
+ >
+
+
+
+ {hasPrevBatch
+ ? `Previous pages ${prevBatchStart}-${prevBatchEnd}`
+ : 'No previous pages'}
+
+
+
+
+
+
+
+ {
+ e.preventDefault()
+ if (canPrevPage) onPageChange(currentPage - 1)
+ }}
+ data-testid="pagination-prev-page"
+ />
+
+ Previous page
+
+
+
+ {pageNumbers.map(page => (
+
+ {
+ e.preventDefault()
+ onPageChange(page)
+ }}
+ data-testid={`pagination-page-${page + pageOffset}`}
+ >
+ {page + pageOffset}
+
+
+ ))}
+
+
+
+
+ {
+ e.preventDefault()
+ if (canNextPage) onPageChange(currentPage + 1)
+ }}
+ data-testid="pagination-next-page"
+ />
+
+ Next page
+
+
+
+
+
+
+ {
+ e.preventDefault()
+ if (hasNextBatch) onNextBatch()
+ }}
+ data-testid="pagination-next-batch"
+ >
+
+
+
+ {hasNextBatch ? `Next pages ${nextBatchStart}-${nextBatchEnd}` : 'No more pages'}
+
+
+
+
+
+
+ )
+}
+
+export default PaginationControls
diff --git a/src/igz-controls/nextGenComponents/components/PaginationControls/index.ts b/src/igz-controls/nextGenComponents/components/PaginationControls/index.ts
new file mode 100644
index 0000000000..da03ab44c9
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/PaginationControls/index.ts
@@ -0,0 +1,2 @@
+export { default } from './PaginationControls'
+export type { PaginationConfig, PaginationControlsProps } from './PaginationControls'
diff --git a/src/igz-controls/nextGenComponents/components/RefreshButton/RefreshButton.tsx b/src/igz-controls/nextGenComponents/components/RefreshButton/RefreshButton.tsx
new file mode 100644
index 0000000000..cbda955e75
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/RefreshButton/RefreshButton.tsx
@@ -0,0 +1,18 @@
+import Refresh from '../../../images/refresh-2.svg?react'
+import { Button } from '@igz-controls/components/ui/button'
+import { REFRESH_BUTTON_TITLE } from '@igz-controls/constants'
+
+const RefreshButton = ({ onClick }: { onClick?: () => void }) => (
+
+
+)
+
+export default RefreshButton
diff --git a/src/igz-controls/nextGenComponents/components/RefreshButton/index.ts b/src/igz-controls/nextGenComponents/components/RefreshButton/index.ts
new file mode 100644
index 0000000000..7c5fa9e728
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/RefreshButton/index.ts
@@ -0,0 +1 @@
+export { default } from './RefreshButton'
diff --git a/src/igz-controls/nextGenComponents/components/RowActions/ActionMenu/ActionMenu.tsx b/src/igz-controls/nextGenComponents/components/RowActions/ActionMenu/ActionMenu.tsx
new file mode 100644
index 0000000000..fe95f27f4a
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/RowActions/ActionMenu/ActionMenu.tsx
@@ -0,0 +1,77 @@
+import { EllipsisVertical } from 'lucide-react'
+import { FC } from 'react'
+
+import { Button } from '@igz-controls/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem
+} from '@igz-controls/components/ui/dropdown-menu'
+import { MORE_ACTIONS } from '@igz-controls/constants'
+import { ActionMenuItem } from '@igz-controls/types/table/rowAction'
+
+type ActionMenuProps = {
+ items: ActionMenuItem[]
+}
+const ActionMenu: FC = ({ items }) => {
+ const visibleItems = items.filter(item => !item.hidden)
+ if (!visibleItems.length) return null
+
+ return (
+
+
+ e.stopPropagation()}
+ data-testid="action-menu-trigger"
+ className="
+ transition-opacity
+ opacity-0 group-hover:opacity-100
+ data-[state=open]:opacity-100
+ data-[state=open]:bg-igz-gray-light
+ "
+ >
+
+
+ e.stopPropagation()}
+ >
+ {visibleItems.map(item => {
+ const ItemIcon = item.icon
+ const baseClasses = 'flex cursor-pointer items-center justify-between px-2 py-2 text-15px'
+ const variantClasses =
+ item.variant === 'danger' ? 'text-red-600 focus:text-red-600' : 'text-igz-primary'
+ const mergedClasses = [baseClasses, variantClasses, item.className]
+ .filter(Boolean)
+ .join(' ')
+
+ return (
+ {
+ event.stopPropagation()
+ if (!item.disabled) item.onClick()
+ }}
+ data-testid={`action-menu-item-${item.label}`}
+ >
+
+ {ItemIcon && {item.label}
+
+
+ )
+ })}
+
+
+ )
+}
+
+export default ActionMenu
diff --git a/src/igz-controls/nextGenComponents/components/RowActions/RowActions.tsx b/src/igz-controls/nextGenComponents/components/RowActions/RowActions.tsx
new file mode 100644
index 0000000000..c4ba25c5ec
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/RowActions/RowActions.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react'
+
+import { ActionMenuItem } from '@igz-controls/types/table/rowAction'
+
+import ActionMenu from './ActionMenu/ActionMenu'
+import SingleActionButton from './SingleActionButton/SingleActionButton'
+
+type RowActionsProps = {
+ actions: ActionMenuItem[]
+}
+
+const RowActions: FC = ({ actions }) => {
+ const visible = actions.filter(a => !a.hidden)
+ const enabled = visible.filter(a => !a.disabled)
+
+ if (actions[0]?.singleActionAsIcon && enabled.length === 1) {
+ return (
+ >
+ onClick: () => void
+ tooltip?: string
+}
+
+const SingleActionButton: FC = ({ icon: Icon, onClick, tooltip }) => (
+ {
+ e.stopPropagation()
+ onClick()
+ }}
+ >
+ {Icon &&
+)
+
+export default SingleActionButton
diff --git a/src/igz-controls/nextGenComponents/components/RowActions/index.ts b/src/igz-controls/nextGenComponents/components/RowActions/index.ts
new file mode 100644
index 0000000000..e9a4b976dc
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/RowActions/index.ts
@@ -0,0 +1,4 @@
+export { default as RowActions } from './RowActions'
+export { default as ActionMenu } from './ActionMenu/ActionMenu'
+export { default as SingleActionButton } from './SingleActionButton/SingleActionButton'
+export type { ActionMenuItem } from '@igz-controls/types/table/rowAction'
diff --git a/src/igz-controls/nextGenComponents/components/StatsCard/StatsCard.tsx b/src/igz-controls/nextGenComponents/components/StatsCard/StatsCard.tsx
new file mode 100644
index 0000000000..c1e4076ed1
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/StatsCard/StatsCard.tsx
@@ -0,0 +1,161 @@
+import { type FunctionComponent, type ReactNode, type SVGProps } from 'react'
+
+import Clock from '../../../images/clock.svg?react'
+import { Card, CardContent, CardHeader, CardTitle } from '@igz-controls/components'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@igz-controls/components/ui/tooltip'
+import { STATS_CARD_TIMESTAMP } from '@igz-controls/constants'
+import { cn } from '@igz-controls/lib/utils'
+
+type StatsCardProps = {
+ children: ReactNode
+ className?: string
+ variant?: 'default' | 'compact'
+ onClick?: () => void
+}
+
+const StatsCardBase = ({
+ children,
+ className,
+ variant = 'default',
+ onClick
+}: Readonly) => {
+ return (
+
+ {children}
+
+ )
+}
+
+type HeaderProps = {
+ children?: ReactNode
+ title?: string
+ icon?: FunctionComponent>
+ showTimestamp?: boolean
+ timestampLabel?: string
+}
+
+const Header = ({
+ children,
+ title,
+ icon: Icon,
+ showTimestamp = true,
+ timestampLabel = STATS_CARD_TIMESTAMP
+}: Readonly) => {
+ return (
+
+
+ {Icon && {title}
+
+ {showTimestamp && (
+
+
+ )}
+ {children}
+
+ )
+}
+
+type RowProps = {
+ children: ReactNode
+}
+
+const Row = ({ children }: Readonly) => {
+ return {children}
+}
+
+type MainCounterProps = {
+ children: ReactNode
+ className?: string
+ id?: string
+ onClick?: () => void
+}
+
+const MainCounter = ({ children, className, id, onClick }: Readonly) => {
+ return (
+
+ {children}
+
+ )
+}
+
+type SecondaryCounterProps = {
+ children: ReactNode
+ className?: string
+}
+
+const SecondaryCounter = ({ children, className }: Readonly) => {
+ return {children}
+}
+
+type DetailsProps = {
+ children: ReactNode
+ className?: string
+}
+
+const Details = ({ children, className }: Readonly) => {
+ return (
+
+ {children}
+
+ )
+}
+
+type CompactProps = {
+ icon?: FunctionComponent>
+ value: ReactNode
+ tooltipLabel?: string
+ className?: string
+}
+
+const Compact = ({ icon: Icon, value, tooltipLabel, className }: Readonly) => {
+ return (
+
+ {Icon && tooltipLabel ? (
+
+
+
+
+
+ {tooltipLabel}
+
+
+
+ ) : (
+ Icon &&
+ )}
+
{value}
+
(defaultValue)
+ const [appliedRange, setAppliedRange] = useState<{ since: string; until: string } | null>(
+ initialCustomRange?.since ? initialCustomRange : null
+ )
+ const effectiveInternal = appliedRange ? TIME_FILTER_CUSTOM_VALUE : internal
+ const selected = value ?? effectiveInternal
+
+ const customLabel = appliedRange
+ ? formatCustomRangeLabel(appliedRange.since, appliedRange.until)
+ : ''
+ const isCustomActive = selected === TIME_FILTER_CUSTOM_VALUE && !!customLabel
+ const presetLabel = options.find(i => i.value === selected)?.label ?? TIME_FILTER_FALLBACK_LABEL
+ const currentLabel = isCustomActive ? customLabel : presetLabel
+
+ const [isCustomOpen, setIsCustomOpen] = useState(false)
+ const [isOpen, setIsOpen] = useState(false)
+
+ const handleSelect = (selectedValue: TimeFilterValue) => {
+ if (selectedValue === TIME_FILTER_CUSTOM_VALUE) {
+ setIsCustomOpen(true)
+ return
+ }
+
+ setIsCustomOpen(false)
+ setAppliedRange(null)
+ setInternal(selectedValue)
+ onChange?.(selectedValue)
+ }
+
+ const handleCustomApply = (range: { since: string; until: string }) => {
+ setAppliedRange(range)
+ onCustomRange?.(range)
+ setIsOpen(false)
+ setIsCustomOpen(false)
+ }
+
+ return (
+ {
+ setIsOpen(open)
+ if (!open) setIsCustomOpen(false)
+ }}
+ >
+
+
+ {startTimeOnly ? START_TIME_LABEL + currentLabel : currentLabel}
+
+
+
+
+ {isCustomOpen ? (
+ handleSelect(TIME_FILTER_RESET_VALUE)}
+ initialRange={appliedRange ?? presetDateRange ?? undefined}
+ />
+ ) : (
+ options.map(item => {
+ const isActive =
+ item.value === TIME_FILTER_CUSTOM_VALUE ? !!appliedRange : selected === item.value
+ return (
+ {
+ if (item.value === TIME_FILTER_CUSTOM_VALUE) e.preventDefault()
+ handleSelect(item.value)
+ }}
+ className="relative text-[15px] h-[50px] p-4 data-[highlighted]:bg-igz-accent-hover cursor-pointer"
+ data-testid={`time-filter-option-${item.value}`}
+ >
+ {item.label}
+
+ {isActive && !item.rightIcon && (
+
+ )
+ })
+ )}
+
+
+ )
+}
+
+export default TimeFilterDropdown
diff --git a/src/igz-controls/nextGenComponents/components/TimeFilterDropdown/index.ts b/src/igz-controls/nextGenComponents/components/TimeFilterDropdown/index.ts
new file mode 100644
index 0000000000..bf1d1ad925
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/TimeFilterDropdown/index.ts
@@ -0,0 +1 @@
+export { default } from './TimeFilterDropdown'
diff --git a/src/igz-controls/nextGenComponents/components/index.ts b/src/igz-controls/nextGenComponents/components/index.ts
new file mode 100644
index 0000000000..4f493df732
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/index.ts
@@ -0,0 +1,82 @@
+export { default as Badge, getBadgeColor } from './Badge'
+export type { BadgeProps } from './Badge'
+export { default as BadgeCell } from './BadgeCell'
+export type { BadgeCellProps, BadgeItem } from './BadgeCell'
+export { Loader } from './Loader'
+export type { LoaderProps } from './Loader'
+export { RowActions, ActionMenu, SingleActionButton } from './RowActions'
+export type { ActionMenuItem } from './RowActions'
+export { default as CopyButton } from './EllipsisTooltip'
+export { default as DataTable } from './DataTable'
+export type {
+ DataTableProps,
+ DetailsPanelConfig,
+ CheckboxSelectionConfig
+} from './DataTable/DataTable'
+export { default as DetailsPanel } from './DetailsPanel'
+export { default as EllipsisTooltip } from './EllipsisTooltip'
+export { default as FilterPopover } from './FilterPopover'
+export { default as MultiSelectField, SelectArrow } from './MultiSelectField'
+export type { MultiSelectFieldProps } from './MultiSelectField'
+export { default as StatsCard } from './StatsCard'
+export { default as PaginationControls } from './PaginationControls'
+export type { PaginationConfig, PaginationControlsProps } from './PaginationControls'
+export { default as RefreshButton } from './RefreshButton'
+export { default as TimeFilterDropdown } from './TimeFilterDropdown'
+
+export { Button } from './ui/button'
+export type { ButtonProps } from './ui/button'
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogBody,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription
+} from './ui/dialog'
+export { Calendar } from './ui/calendar'
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/card'
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible'
+export { Checkbox } from './ui/checkbox'
+export * from './ui/dropdown-menu'
+export { Input } from './ui/input'
+export * from './ui/pagination'
+export { Popover, PopoverContent, PopoverTrigger } from './ui/popover'
+export { ScrollArea, ScrollBar } from './ui/scroll-area'
+export * from './ui/select'
+export { Separator } from './ui/separator'
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip'
+
+export { cn } from '../lib/utils'
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar
+} from './ui/sidebar.mjs'
diff --git a/src/igz-controls/nextGenComponents/components/ui/button.tsx b/src/igz-controls/nextGenComponents/components/ui/button.tsx
new file mode 100644
index 0000000000..d1eafa0df6
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/button.tsx
@@ -0,0 +1,79 @@
+import { Slot } from '@radix-ui/react-slot'
+import { TooltipContentProps } from '@radix-ui/react-tooltip'
+import { cva, type VariantProps } from 'class-variance-authority'
+import React from 'react'
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@igz-controls/components/ui/tooltip'
+import { cn } from '@igz-controls/lib/utils'
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:border disabled:bg-white disabled:text-igz-gray disabled:[&_svg]:text-igz-secondary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+ {
+ variants: {
+ variant: {
+ default:
+ 'bg-primary text-primary-foreground hover:bg-primary/90 min-w-[100px] disabled:border-primary',
+ destructive:
+ 'bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:border-destructive',
+ outline:
+ 'border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-background',
+ secondary:
+ 'border border-solid border-[#ccc] bg-secondary text-secondary-foreground hover:bg-[#483F561F] min-w-[50px] disabled:border-secondary',
+ ghost: 'hover:bg-accent hover:text-accent-foreground disabled:border-transparent',
+ link: 'text-igz-primary underline-offset-4 hover:underline disabled:border-transparent',
+ rounded:
+ 'rounded-full hover:bg-igz-gray-light [&_svg]:size-[16px] transition-bg duration-300 ease-in-out disabled:border-igz-gray-light'
+ },
+ size: {
+ default: 'h-10 px-4 py-3',
+ sm: 'h-9 px-4 py-2.5',
+ lg: 'h-11 rounded-md px-8',
+ icon: 'h-10 w-10 p-0 m-0'
+ }
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default'
+ }
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps,
+ Omit> {
+ asChild?: boolean
+ tooltip?: string
+}
+
+const Button = React.forwardRef(
+ (
+ { className, variant, size, tooltip = '', side = 'top', asChild = false, disabled, ...props },
+ ref
+ ) => {
+ const Comp = asChild ? Slot : 'button'
+ const buttonEl = (
+
+ {buttonEl}
+ {tooltip}
+
+ )
+ }
+)
+Button.displayName = 'Button'
+
+export { Button }
diff --git a/src/igz-controls/nextGenComponents/components/ui/calendar.tsx b/src/igz-controls/nextGenComponents/components/ui/calendar.tsx
new file mode 100644
index 0000000000..ab4412310b
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/calendar.tsx
@@ -0,0 +1,231 @@
+import * as React from 'react'
+import type { DateRange } from 'react-day-picker'
+import { DayButton as DayButtonImport, DayPicker, getDefaultClassNames } from 'react-day-picker'
+
+import CalendarChevronSvg from '../../../images/calendar-chevron.svg?react'
+import { Button } from '@igz-controls/components/ui/button'
+import { cn } from '@igz-controls/lib/utils'
+import { getSupportedLocale } from '@igz-controls/utils/date.utils'
+
+type CalendarProps = React.ComponentProps & {
+ buttonVariant?: React.ComponentProps['variant']
+ singleDate?: boolean
+ /**
+ * If provided, Calendar will paint the range (middle) and optionally an "active" endpoint.
+ */
+ range?: DateRange
+ /**
+ * Which endpoint should be shown as the active circle in this calendar.
+ * - "start" paints range.from as a filled circle
+ * - "end" paints range.to as a filled circle
+ */
+ activeRangeSide?: 'start' | 'end'
+ /**
+ * Caption prefix like "From:" / "To:" (used when captionLayout="label")
+ */
+ captionPrefix?: string
+ /**
+ * When true, forces weekday to be a single letter (like the screenshot).
+ */
+ weekdaySingleLetter?: boolean
+}
+
+const Calendar = ({
+ className,
+ classNames,
+ showOutsideDays = true,
+ captionLayout = 'label',
+ formatters,
+ components,
+ range,
+ activeRangeSide,
+ captionPrefix,
+ weekdaySingleLetter = true,
+ singleDate = false,
+ modifiers,
+ modifiersClassNames,
+ ...props
+}: CalendarProps) => {
+ const defaultClassNames = getDefaultClassNames()
+
+ const computedModifiers = React.useMemo(() => {
+ const from = range?.from
+ const to = range?.to
+
+ const rangeModifiers: Record boolean) | undefined> = {}
+
+ if (from && to) {
+ rangeModifiers.range_middle = (day: Date) => day > from && day < to
+ rangeModifiers.range_from = from
+ rangeModifiers.range_to = to
+ }
+
+ let active: Record = {}
+
+ if (activeRangeSide === 'start') {
+ active = { active_start: from }
+ } else if (activeRangeSide === 'end') {
+ active = { active_end: to }
+ }
+
+ return {
+ ...modifiers,
+ ...rangeModifiers,
+ ...active
+ }
+ }, [activeRangeSide, modifiers, range?.from, range?.to])
+
+ const computedModifiersClassNames = React.useMemo(() => {
+ return {
+ ...modifiersClassNames,
+ range_middle: 'rounded-none text-[#869CFF]'
+ }
+ }, [modifiersClassNames])
+
+ const computedFormatters = React.useMemo(() => {
+ const locale = getSupportedLocale()
+ return {
+ formatMonthDropdown: (date: Date) => date.toLocaleString(locale, { month: 'short' }),
+ ...(weekdaySingleLetter
+ ? { formatWeekdayName: (d: Date) => d.toLocaleDateString(locale, { weekday: 'narrow' }) }
+ : {}),
+ ...(captionPrefix
+ ? {
+ formatCaption: (m: Date) =>
+ `${captionPrefix} ${m.toLocaleDateString(locale, { month: 'short', year: 'numeric' })}`
+ }
+ : {}),
+ ...formatters
+ }
+ }, [captionPrefix, formatters, weekdaySingleLetter])
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className
+ )}
+ classNames={{
+ root: cn(defaultClassNames.root),
+ months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
+ month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+ nav: cn(
+ 'absolute inset-x-0 top-0 flex w-full items-start justify-between z-20',
+ defaultClassNames.nav
+ ),
+ button_previous: cn(
+ 'flex items-center justify-center h-[--cell-size] w-[--cell-size]',
+ defaultClassNames.button_previous
+ ),
+ button_next: cn(
+ 'flex items-center justify-center h-[--cell-size] w-[--cell-size]',
+ defaultClassNames.button_next
+ ),
+ month_caption: cn(
+ 'flex h-[--cell-size] w-full items-center justify-center px-5',
+ defaultClassNames.month_caption
+ ),
+ dropdowns: cn(
+ 'flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium',
+ defaultClassNames.dropdowns
+ ),
+ dropdown: cn('bg-popover absolute inset-0 opacity-0', defaultClassNames.dropdown),
+ table: 'w-full border-collapse',
+ weekdays: cn('flex border-b border-slate-100 pb-2', defaultClassNames.weekdays),
+ weekday: cn(
+ 'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',
+ defaultClassNames.weekday
+ ),
+ day: cn(
+ 'group/day relative aspect-square flex-1 select-none p-0 text-center flex items-center justify-center',
+ !singleDate &&
+ 'has-[button[data-range-start]]:bg-[#869CFF33] has-[button[data-range-end]]:bg-[#869CFF33] has-[button[data-range-middle]]:bg-[#869CFF33]',
+ !singleDate &&
+ 'has-[button[data-range-start]]:rounded-l-full has-[button[data-range-end]]:rounded-r-full',
+ !singleDate && 'has-[button[data-selected-single]]:bg-transparent',
+ defaultClassNames.day
+ ),
+ week: cn('flex w-full mt-1', defaultClassNames.week),
+ range_start: 'bg-transparent',
+ range_middle: 'bg-transparent',
+ range_end: 'bg-transparent',
+ outside: cn(
+ 'text-muted-foreground aria-selected:text-muted-foreground',
+ defaultClassNames.outside
+ ),
+ disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+ hidden: cn('invisible', defaultClassNames.hidden),
+ ...classNames
+ }}
+ components={{
+ Root: CalendarRoot,
+ DayButton: CalendarDayButton,
+ Chevron: CalendarChevron,
+ ...components
+ }}
+ {...props}
+ />
+ )
+}
+
+const CalendarDayButton = ({
+ className: btnClassName,
+ modifiers: dayModifiers,
+ ...rest
+}: React.ComponentProps) => {
+ const isSelected = dayModifiers.active_start || dayModifiers.active_end || dayModifiers.selected
+ const isInRange =
+ dayModifiers.range_from ||
+ dayModifiers.range_to ||
+ dayModifiers.range_middle ||
+ dayModifiers.active_start ||
+ dayModifiers.active_end
+
+ return (
+ & {
+ rootRef?: React.Ref
+}
+
+const CalendarChevron = ({
+ orientation,
+ className
+}: {
+ className?: string
+ orientation?: 'up' | 'down' | 'left' | 'right'
+}) => (
+
+}
+
+export { Calendar }
diff --git a/src/igz-controls/nextGenComponents/components/ui/card.tsx b/src/igz-controls/nextGenComponents/components/ui/card.tsx
new file mode 100644
index 0000000000..3e232995e7
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/card.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react'
+
+import { cn } from '@igz-controls/lib/utils'
+
+const Card = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/igz-controls/nextGenComponents/components/ui/checkbox.tsx b/src/igz-controls/nextGenComponents/components/ui/checkbox.tsx
new file mode 100644
index 0000000000..52c3d38356
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/checkbox.tsx
@@ -0,0 +1,37 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@igz-controls/lib/utils'
+
+interface CheckboxProps extends React.ComponentProps {
+ loading?: boolean
+}
+
+const Checkbox = ({ className, loading = false, disabled, ...props }: CheckboxProps) => {
+ return (
+
+
+
+
+ )
+}
+
+export { Checkbox }
diff --git a/src/igz-controls/nextGenComponents/components/ui/collapsible.tsx b/src/igz-controls/nextGenComponents/components/ui/collapsible.tsx
new file mode 100644
index 0000000000..7cee61eff9
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/igz-controls/nextGenComponents/components/ui/dialog.tsx b/src/igz-controls/nextGenComponents/components/ui/dialog.tsx
new file mode 100644
index 0000000000..ab774a9fa8
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/dialog.tsx
@@ -0,0 +1,169 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as React from 'react'
+
+import Close from '../../../images/close.svg?react'
+import { Button } from '@igz-controls/components/ui/button'
+import { cn } from '@igz-controls/lib/utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ showCloseButton?: boolean
+ closeOnOutsideClick?: boolean
+ }
+>(
+ (
+ {
+ className,
+ children,
+ showCloseButton = true,
+ closeOnOutsideClick = false,
+ onPointerDownOutside,
+ onInteractOutside,
+ ...props
+ },
+ ref
+ ) => (
+
+
+ {
+ onPointerDownOutside?.(event)
+ if (!closeOnOutsideClick) event.preventDefault()
+ }}
+ onInteractOutside={event => {
+ onInteractOutside?.(event)
+ if (!closeOnOutsideClick) event.preventDefault()
+ }}
+ >
+ {children}
+ {showCloseButton && (
+
+
+
+
+ )}
+
+
+
+ )
+)
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogBody = ({ className, ...props }: React.HTMLAttributes) => (
+
+)
+DialogBody.displayName = 'DialogBody'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return >(
+ ({ className, type = 'text', ...props }, ref) => {
+ return (
+ >(
+ ({ className, ...props }, ref) => (
+
+ )
+)
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+ ({ className, isActive, disabled, children, ...props }, ref) => (
+
+ {children}
+
+ )
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = React.forwardRef<
+ HTMLAnchorElement,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = React.forwardRef<
+ HTMLAnchorElement,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+
+ More pages
+
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+export {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious
+}
diff --git a/src/igz-controls/nextGenComponents/components/ui/popover.tsx b/src/igz-controls/nextGenComponents/components/ui/popover.tsx
new file mode 100644
index 0000000000..b8ad65a0a1
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
+
+import { cn } from '@igz-controls/lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+
+
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/src/igz-controls/nextGenComponents/components/ui/scroll-area.tsx b/src/igz-controls/nextGenComponents/components/ui/scroll-area.tsx
new file mode 100644
index 0000000000..05bf662626
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/scroll-area.tsx
@@ -0,0 +1,44 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as React from 'react'
+
+import { cn } from '@igz-controls/lib/utils'
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/igz-controls/nextGenComponents/components/ui/select.tsx b/src/igz-controls/nextGenComponents/components/ui/select.tsx
new file mode 100644
index 0000000000..2626a6e714
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/select.tsx
@@ -0,0 +1,151 @@
+import * as SelectPrimitive from '@radix-ui/react-select'
+import * as React from 'react'
+
+import Check from '../../../images/check.svg?react'
+import SelectIcon from '../../../images/select.svg?react'
+import { cn } from '@igz-controls/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1',
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = 'popper', ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => (
+ {
+ children: React.ReactNode;
+ defaultOpen?: boolean;
+ onOpenChange?: (open: boolean) => void;
+ open?: boolean;
+}
+declare const SidebarProvider: React.ForwardRefExoticComponent>;
+interface SidebarProps extends React.HTMLAttributes {
+ children: React.ReactNode;
+ side?: 'left' | 'right';
+ variant?: 'sidebar' | 'floating' | 'inset';
+ collapsible?: 'offcanvas' | 'icon' | 'none';
+}
+declare const Sidebar: React.ForwardRefExoticComponent>;
+interface SidebarTriggerProps extends React.ButtonHTMLAttributes {
+ icon?: 'menu' | 'chevronLeft' | 'chevronRight';
+}
+declare const SidebarTrigger: React.ForwardRefExoticComponent>;
+declare const SidebarRail: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarInset: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarInput: React.ForwardRefExoticComponent, HTMLInputElement>, "ref"> & React.RefAttributes, "ref"> & React.RefAttributes>;
+declare const SidebarHeader: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarFooter: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarSeparator: React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>;
+declare const SidebarContent: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarGroup: React.ForwardRefExoticComponent & React.RefAttributes>;
+interface SidebarGroupLabelProps extends React.HTMLAttributes {
+ asChild?: boolean;
+}
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent>;
+interface SidebarGroupActionProps extends React.ButtonHTMLAttributes {
+ asChild?: boolean;
+}
+declare const SidebarGroupAction: React.ForwardRefExoticComponent>;
+declare const SidebarGroupContent: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarMenu: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarMenuItem: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const sidebarMenuButtonVariants: (props?: ({
+ variant?: "default" | "outline" | null | undefined;
+ size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes, VariantProps {
+ asChild?: boolean;
+ isActive?: boolean;
+ tooltip?: string | Record;
+}
+declare const SidebarMenuButton: React.ForwardRefExoticComponent>;
+interface SidebarMenuActionProps extends React.ButtonHTMLAttributes {
+ asChild?: boolean;
+ showOnHover?: boolean;
+}
+declare const SidebarMenuAction: React.ForwardRefExoticComponent>;
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarMenuSub: React.ForwardRefExoticComponent & React.RefAttributes>;
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent & React.RefAttributes>;
+interface SidebarMenuSubButtonProps extends React.ButtonHTMLAttributes {
+ asChild?: boolean;
+ size?: 'sm' | 'md' | 'default';
+ isActive?: boolean;
+}
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
+//# sourceMappingURL=sidebar.d.ts.map
\ No newline at end of file
diff --git a/src/igz-controls/nextGenComponents/components/ui/sidebar.mjs b/src/igz-controls/nextGenComponents/components/ui/sidebar.mjs
new file mode 100644
index 0000000000..d0e00272cd
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/sidebar.mjs
@@ -0,0 +1,538 @@
+import { jsx as i, jsxs as _ } from "react/jsx-runtime";
+import * as r from "react";
+import { Slot as N } from "@radix-ui/react-slot";
+import { cva as T } from "class-variance-authority";
+import { MenuIcon as k, ChevronLeftIcon as E, ChevronRightIcon as A } from "lucide-react";
+import { cn as o } from "../../lib/utils";
+import { Button as C } from "./button";
+import { Input as B } from "./input";
+import { Separator as O } from "./separator";
+import { TooltipProvider as P, Tooltip as D, TooltipTrigger as L, TooltipContent as G } from "./tooltip";
+import H from "../../../images/navbar-closed-icon.svg.mjs";
+import K from "../../../images/navbar-opened-icon.svg.mjs";
+const F = "sidebar_state", j = 3600 * 24 * 7, V = "15rem", $ = "70px", q = "b", M = r.createContext(null), y = () => {
+ const e = r.useContext(M);
+ if (!e)
+ throw new Error("useSidebar must be used within a SidebarProvider.");
+ return e;
+}, J = r.forwardRef(
+ ({ children: e, className: a, defaultOpen: t = !0, onOpenChange: s, open: n, style: c, ...m }, w) => {
+ const [g, v] = r.useState(() => {
+ try {
+ return JSON.parse(localStorage.getItem("isNavbarPinned") || "false");
+ } catch {
+ return !1;
+ }
+ }), [p, d] = r.useState(!1), [S, R] = r.useState(t || g), u = n ?? S, b = r.useCallback(
+ (f) => {
+ const l = typeof f == "function" ? f(u) : f;
+ s ? s(l) : R(l), document.cookie = `${F}=${l}; path=/; max-age=${j}`;
+ },
+ [s, u]
+ ), h = r.useCallback(() => b((f) => !f), [b]), x = r.useCallback(() => {
+ v((f) => {
+ const l = !f;
+ return localStorage.setItem("isNavbarPinned", JSON.stringify(l)), b(l), l;
+ });
+ }, [b]);
+ r.useEffect(() => {
+ const f = (l) => {
+ l.key === q && (l.metaKey || l.ctrlKey) && (l.preventDefault(), h());
+ };
+ return window.addEventListener("keydown", f), () => window.removeEventListener("keydown", f);
+ }, [h]);
+ const I = u ? "expanded" : "collapsed", z = r.useMemo(
+ () => ({
+ state: I,
+ open: u,
+ setOpen: b,
+ toggleSidebar: h,
+ pinned: g,
+ togglePin: x,
+ hoverLocked: p,
+ setHoverLocked: d
+ }),
+ [I, u, b, h, g, x, p]
+ );
+ return /* @__PURE__ */ i(M.Provider, { value: z, children: /* @__PURE__ */ i(P, { delayDuration: 0, children: /* @__PURE__ */ i(
+ "div",
+ {
+ style: {
+ "--sidebar-width": V,
+ "--sidebar-width-icon": $,
+ ...c
+ },
+ className: o(
+ "group/sidebar-wrapper flex h-full w-full has-[[data-variant=inset]]:bg-sidebar",
+ a
+ ),
+ ref: w,
+ ...m,
+ children: e
+ }
+ ) }) });
+ }
+);
+J.displayName = "SidebarProvider";
+const U = r.forwardRef(
+ ({
+ children: e,
+ className: a,
+ collapsible: t = "offcanvas",
+ side: s = "left",
+ variant: n = "sidebar",
+ ...c
+ }, m) => {
+ const [w, g] = r.useState(!1), { hoverLocked: v, open: p, pinned: d, state: S, togglePin: R, setOpen: u } = y(), b = r.useRef(null), h = r.useRef(null);
+ return r.useEffect(() => {
+ if (!v && !w && !d)
+ return h.current = setTimeout(() => u(!1), 200), () => clearTimeout(h.current);
+ }, [v, w, d, u]), t === "none" ? /* @__PURE__ */ i(
+ "nav",
+ {
+ className: o(
+ "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+ a
+ ),
+ ref: m,
+ ...c,
+ children: e
+ }
+ ) : /* @__PURE__ */ i(
+ "nav",
+ {
+ ref: m,
+ className: o(
+ "group peer relative shrink-0 self-stretch overflow-visible text-sidebar-foreground",
+ "transition-[width] duration-300 ease-linear",
+ d && p ? "w-[--sidebar-width]" : "w-[--sidebar-width-icon]"
+ ),
+ "data-state": S,
+ "data-collapsible": S === "collapsed" ? t : "",
+ "data-variant": n,
+ "data-side": s,
+ "data-pinned": d,
+ onMouseEnter: () => {
+ clearTimeout(h.current), clearTimeout(b.current), g(!0), d || (b.current = setTimeout(() => u(!0), 100));
+ },
+ onMouseLeave: () => {
+ clearTimeout(b.current), g(!1), !d && !v && u(!1);
+ },
+ onTransitionEnd: (x) => {
+ x.target === x.currentTarget && x.propertyName === "width" && window.dispatchEvent(new CustomEvent("mainResize"));
+ },
+ children: /* @__PURE__ */ i(
+ "div",
+ {
+ className: o(
+ "absolute inset-y-0 left-0 z-20 flex flex-col transition-[width] duration-300 ease-linear md:flex",
+ s === "left" && d && "group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
+ s === "right" && d && "group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+ n === "floating" || n === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" : o(
+ "group-data-[side=left]:border-r group-data-[side=right]:border-l",
+ p && !d || d && S === "expanded" ? "w-[--sidebar-width]" : "w-[--sidebar-width-icon]"
+ ),
+ a
+ ),
+ ...c,
+ children: /* @__PURE__ */ _(
+ "div",
+ {
+ "data-sidebar": "sidebar",
+ className: "flex size-full flex-col bg-sidebar shadow-[1px_4px_16px_rgba(0,0,0,0.04)] group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+ children: [
+ e,
+ p && /* @__PURE__ */ i(
+ C,
+ {
+ variant: "outline",
+ tooltip: d ? "Unpin sidebar" : "Pin sidebar",
+ "data-testid": "pin-sidebar-button",
+ side: "right",
+ className: o(
+ "absolute top-2 left-full border bg-[#FAFAFA] border-gray-200 border-solid",
+ "w-fit h-fit rounded-l-none border-l-0 py-2 pr-[3px] pl-[1px]",
+ "transition-opacity hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+ d ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+ ),
+ onClick: R,
+ children: d ? /* @__PURE__ */ i(H, { "data-testid": "closeed-pin" }) : /* @__PURE__ */ i(K, { "data-testid": "opened-pin" })
+ }
+ )
+ ]
+ }
+ )
+ }
+ )
+ }
+ );
+ }
+);
+U.displayName = "Sidebar";
+const W = r.forwardRef(
+ ({ className: e, icon: a = "menu", onClick: t, ...s }, n) => {
+ const { toggleSidebar: c } = y();
+ return /* @__PURE__ */ _(
+ C,
+ {
+ ref: n,
+ "data-sidebar": "trigger",
+ variant: "ghost",
+ size: "icon",
+ className: o("size-9", e),
+ onClick: (m) => {
+ t == null || t(m), c();
+ },
+ ...s,
+ children: [
+ a === "menu" && /* @__PURE__ */ i(k, { className: "size-4 shrink-0" }),
+ a === "chevronLeft" && /* @__PURE__ */ i(E, { className: "size-4 shrink-0" }),
+ a === "chevronRight" && /* @__PURE__ */ i(A, { className: "size-4 shrink-0" }),
+ /* @__PURE__ */ i("span", { className: "sr-only", children: "Toggle Sidebar" })
+ ]
+ }
+ );
+ }
+);
+W.displayName = "SidebarTrigger";
+const X = r.forwardRef(({ className: e, ...a }, t) => {
+ const { toggleSidebar: s } = y();
+ return /* @__PURE__ */ i(
+ "button",
+ {
+ ref: t,
+ "data-sidebar": "rail",
+ "aria-label": "Toggle Sidebar",
+ tabIndex: -1,
+ onClick: s,
+ title: "Toggle Sidebar",
+ className: o(
+ "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+ "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+ "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+ "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+ "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+ "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+ e
+ ),
+ ...a
+ }
+ );
+});
+X.displayName = "SidebarRail";
+const Y = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "main",
+ {
+ ref: t,
+ className: o(
+ "relative flex min-h-0 flex-1 flex-col bg-background transition-[width] duration-300 ease-linear",
+ "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+ e
+ ),
+ ...a
+ }
+ )
+);
+Y.displayName = "SidebarInset";
+const Q = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ B,
+ {
+ ref: t,
+ "data-sidebar": "input",
+ className: o(
+ "h-9 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+ e
+ ),
+ ...a
+ }
+ )
+);
+Q.displayName = "SidebarInput";
+const Z = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "div",
+ {
+ ref: t,
+ "data-sidebar": "header",
+ className: o("flex gap-2 py-3.5", e),
+ ...a
+ }
+ )
+);
+Z.displayName = "SidebarHeader";
+const ee = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "div",
+ {
+ ref: t,
+ "data-sidebar": "footer",
+ className: o("flex flex-col gap-2 p-3", e),
+ ...a
+ }
+ )
+);
+ee.displayName = "SidebarFooter";
+const ae = r.forwardRef(({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ O,
+ {
+ ref: t,
+ "data-sidebar": "separator",
+ className: o("mx-5 mb-2 w-auto bg-sidebar-border", e),
+ ...a
+ }
+));
+ae.displayName = "SidebarSeparator";
+const te = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "div",
+ {
+ ref: t,
+ "data-sidebar": "content",
+ className: o(
+ "flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+ e
+ ),
+ ...a
+ }
+ )
+);
+te.displayName = "SidebarContent";
+const re = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "div",
+ {
+ ref: t,
+ "data-sidebar": "group",
+ className: o("relative flex w-full min-w-0 flex-col p-3", e),
+ ...a
+ }
+ )
+);
+re.displayName = "SidebarGroup";
+const ie = r.forwardRef(
+ ({ asChild: e = !1, className: a, ...t }, s) => /* @__PURE__ */ i(
+ e ? N : "div",
+ {
+ ref: s,
+ "data-sidebar": "group-label",
+ className: o(
+ "flex h-9 shrink-0 items-center rounded-md px-2.5 text-sm font-medium outline-none whitespace-nowrap ring-sidebar-ring focus-visible:ring-2 [&>svg]:size-5 [&>svg]:shrink-0",
+ "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+ a
+ ),
+ ...t
+ }
+ )
+);
+ie.displayName = "SidebarGroupLabel";
+const oe = r.forwardRef(
+ ({ asChild: e = !1, className: a, ...t }, s) => /* @__PURE__ */ i(
+ e ? N : "button",
+ {
+ ref: s,
+ "data-sidebar": "group-action",
+ className: o(
+ "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-5 [&>svg]:shrink-0",
+ "after:absolute after:-inset-2 after:md:hidden",
+ "group-data-[collapsible=icon]:hidden",
+ a
+ ),
+ ...t
+ }
+ )
+);
+oe.displayName = "SidebarGroupAction";
+const se = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "div",
+ {
+ ref: t,
+ "data-sidebar": "group-content",
+ className: o("w-full text-sm", e),
+ ...a
+ }
+ )
+);
+se.displayName = "SidebarGroupContent";
+const ne = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "ul",
+ {
+ ref: t,
+ "data-sidebar": "menu",
+ className: o("flex w-full min-w-0 p-0 m-0 flex-col gap-1 items-center", e),
+ ...a
+ }
+ )
+);
+ne.displayName = "SidebarMenu";
+const de = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "li",
+ {
+ ref: t,
+ "data-sidebar": "menu-item",
+ className: o("group/menu-item flex relative w-full", e),
+ ...a
+ }
+ )
+);
+de.displayName = "SidebarMenuItem";
+const le = T(
+ "peer/menu-button flex flex-1 w-full items-center gap-2 text-inherit overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-active-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-active-accent-foreground [&_svg_path]:fill-current data-[state=open]:hover:bg-sidebar-accent whitespace-nowrap [&>svg]:size-5 [&>svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "hover:bg-sidebar-accent",
+ outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+ },
+ size: {
+ default: "text-sm",
+ sm: "h-8 text-xs",
+ lg: "h-12 text-sm group-data-[collapsible=icon]:!m-0"
+ }
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default"
+ }
+ }
+), ce = r.forwardRef(
+ ({
+ asChild: e = !1,
+ className: a,
+ isActive: t = !1,
+ size: s = "default",
+ tooltip: n,
+ variant: c = "default",
+ ...m
+ }, w) => {
+ const g = e ? N : "button", { state: v } = y(), p = /* @__PURE__ */ i(
+ g,
+ {
+ ref: w,
+ "data-sidebar": "menu-button",
+ "data-size": s,
+ "data-active": t,
+ className: o(le({ variant: c, size: s }), a),
+ ...m
+ }
+ );
+ return n ? /* @__PURE__ */ _(D, { children: [
+ /* @__PURE__ */ i(L, { asChild: !0, children: p }),
+ /* @__PURE__ */ i(
+ G,
+ {
+ side: "right",
+ align: "center",
+ hidden: v !== "collapsed",
+ ...typeof n == "string" ? { children: n } : n
+ }
+ )
+ ] }) : p;
+ }
+);
+ce.displayName = "SidebarMenuButton";
+const ue = r.forwardRef(
+ ({ asChild: e = !1, className: a, showOnHover: t = !1, ...s }, n) => /* @__PURE__ */ i(
+ e ? N : "button",
+ {
+ ref: n,
+ "data-sidebar": "menu-action",
+ className: o(
+ "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+ "after:absolute after:-inset-2 after:md:hidden",
+ "peer-data-[size=sm]/menu-button:top-1",
+ "peer-data-[size=default]/menu-button:top-1.5",
+ "peer-data-[size=lg]/menu-button:top-2.5",
+ "group-data-[collapsible=icon]:hidden",
+ t && "hidden group-hocus:flex",
+ a
+ ),
+ ...s
+ }
+ )
+);
+ue.displayName = "SidebarMenuAction";
+const be = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "span",
+ {
+ ref: t,
+ "data-sidebar": "menu-badge",
+ className: o(
+ "inline-flex h-5 items-center rounded-full bg-sidebar-accent px-2 py-0.5 text-xs font-medium text-sidebar-accent-foreground",
+ e
+ ),
+ ...a
+ }
+ )
+);
+be.displayName = "SidebarMenuBadge";
+const fe = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "ul",
+ {
+ ref: t,
+ "data-sidebar": "menu-sub",
+ className: o("flex flex-col gap-1 p-0", e),
+ ...a
+ }
+ )
+);
+fe.displayName = "SidebarMenuSub";
+const pe = r.forwardRef(
+ ({ className: e, ...a }, t) => /* @__PURE__ */ i(
+ "li",
+ {
+ ref: t,
+ "data-sidebar": "menu-sub-item",
+ className: o("flex w-full", e),
+ ...a
+ }
+ )
+);
+pe.displayName = "SidebarMenuSubItem";
+const me = r.forwardRef(
+ ({ asChild: e = !1, className: a, size: t = "default", ...s }, n) => /* @__PURE__ */ i(
+ e ? N : "button",
+ {
+ ref: n,
+ "data-sidebar": "menu-sub-button",
+ "data-size": t,
+ className: o(
+ "flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 whitespace-nowrap [&>svg]:size-4 [&>svg]:shrink-0",
+ a
+ ),
+ ...s
+ }
+ )
+);
+me.displayName = "SidebarMenuSubButton";
+export {
+ U as Sidebar,
+ te as SidebarContent,
+ ee as SidebarFooter,
+ re as SidebarGroup,
+ oe as SidebarGroupAction,
+ se as SidebarGroupContent,
+ ie as SidebarGroupLabel,
+ Z as SidebarHeader,
+ Q as SidebarInput,
+ Y as SidebarInset,
+ ne as SidebarMenu,
+ ue as SidebarMenuAction,
+ be as SidebarMenuBadge,
+ ce as SidebarMenuButton,
+ de as SidebarMenuItem,
+ fe as SidebarMenuSub,
+ me as SidebarMenuSubButton,
+ pe as SidebarMenuSubItem,
+ J as SidebarProvider,
+ X as SidebarRail,
+ ae as SidebarSeparator,
+ W as SidebarTrigger,
+ y as useSidebar
+};
diff --git a/src/igz-controls/nextGenComponents/components/ui/tabs.tsx b/src/igz-controls/nextGenComponents/components/ui/tabs.tsx
new file mode 100644
index 0000000000..546071bac1
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/components/ui/tabs.tsx
@@ -0,0 +1,63 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import * as React from 'react'
+
+import { cn } from '@igz-controls/lib/utils'
+
+const Tabs = ({ className, ...props }: React.ComponentProps) => {
+ return (
+ ) => {
+ return (
+ ) => {
+ return (
+ ) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+ (null)
+
+ useEffect(() => {
+ if (!handler) return
+ const listener = (e: MouseEvent) => {
+ const target = e.target
+ if (!(target instanceof Node)) return
+ if (ref.current?.contains(target)) return
+ if (isInsidePortalUI(target)) return
+ handler()
+ }
+ document.addEventListener('mousedown', listener)
+ return () => document.removeEventListener('mousedown', listener)
+ }, [handler])
+
+ return ref
+}
+
+export { useClickOutside }
diff --git a/src/igz-controls/nextGenComponents/index.ts b/src/igz-controls/nextGenComponents/index.ts
new file mode 100644
index 0000000000..7ebc596c15
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/index.ts
@@ -0,0 +1,3 @@
+export * from './components'
+export { useTableStore } from './stores/tableStore'
+export type { DraftValues } from './stores/tableStore'
diff --git a/src/igz-controls/nextGenComponents/lib/utils.ts b/src/igz-controls/nextGenComponents/lib/utils.ts
new file mode 100644
index 0000000000..831ab19481
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/igz-controls/nextGenComponents/stores/tableStore.ts b/src/igz-controls/nextGenComponents/stores/tableStore.ts
new file mode 100644
index 0000000000..91a9aa4801
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/stores/tableStore.ts
@@ -0,0 +1,124 @@
+import type {
+ RowSelectionState,
+ SortingState,
+ ColumnSizingState,
+ ColumnFiltersState
+} from '@tanstack/react-table'
+import { create } from 'zustand'
+
+export type DraftValues = Record
+
+export type FilterPopoverState = {
+ open: boolean
+ draft: DraftValues
+}
+
+export const DEFAULT_FILTER_SCOPE = 'default'
+
+const emptyPopoverState: FilterPopoverState = { open: false, draft: {} }
+
+type TableState = {
+ rowSelection: RowSelectionState
+ sorting: SortingState
+ columnSizing: ColumnSizingState
+ globalFilter: string
+ columnFilters: ColumnFiltersState
+
+ filterPopovers: Record
+
+ setRowSelection: (
+ selection: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)
+ ) => void
+ setSorting: (sorting: SortingState | ((old: SortingState) => SortingState)) => void
+ setColumnSizing: (
+ sizing: ColumnSizingState | ((old: ColumnSizingState) => ColumnSizingState)
+ ) => void
+ setGlobalFilter: (value: string | ((old: string) => string)) => void
+ setColumnFilters: (
+ value: ColumnFiltersState | ((old: ColumnFiltersState) => ColumnFiltersState)
+ ) => void
+
+ getFilterPopover: (scopeId: string) => FilterPopoverState
+ setFilterPopoverOpen: (scopeId: string, open: boolean) => void
+ setFilterDraft: (
+ scopeId: string,
+ draft: DraftValues | ((old: DraftValues) => DraftValues)
+ ) => void
+ resetFilterDraft: (scopeId: string, initial: DraftValues) => void
+}
+
+export const selectFilterPopover =
+ (scopeId: string) =>
+ (state: TableState): FilterPopoverState =>
+ state.filterPopovers[scopeId] ?? emptyPopoverState
+
+export const useTableStore = create((set, get) => ({
+ rowSelection: {},
+ sorting: [],
+ columnSizing: {},
+ globalFilter: '',
+ columnFilters: [],
+
+ filterPopovers: {},
+
+ setRowSelection: selection =>
+ set(old => ({
+ rowSelection: typeof selection === 'function' ? selection(old.rowSelection) : selection
+ })),
+
+ setSorting: sorting =>
+ set(old => ({
+ sorting: typeof sorting === 'function' ? sorting(old.sorting) : sorting
+ })),
+
+ setColumnSizing: sizing =>
+ set(old => ({
+ columnSizing: typeof sizing === 'function' ? sizing(old.columnSizing) : sizing
+ })),
+
+ setGlobalFilter: value =>
+ set(old => ({
+ globalFilter: typeof value === 'function' ? value(old.globalFilter) : value
+ })),
+
+ setColumnFilters: value =>
+ set(old => ({
+ columnFilters: typeof value === 'function' ? value(old.columnFilters) : value
+ })),
+
+ getFilterPopover: (scopeId: string) => get().filterPopovers[scopeId] ?? emptyPopoverState,
+
+ setFilterPopoverOpen: (scopeId, open) =>
+ set(old => {
+ const prev = old.filterPopovers[scopeId] ?? emptyPopoverState
+ return {
+ filterPopovers: {
+ ...old.filterPopovers,
+ [scopeId]: { ...prev, open }
+ }
+ }
+ }),
+
+ setFilterDraft: (scopeId, draft) =>
+ set(old => {
+ const prev = old.filterPopovers[scopeId] ?? emptyPopoverState
+ const nextDraft = typeof draft === 'function' ? draft(prev.draft) : draft
+ return {
+ filterPopovers: {
+ ...old.filterPopovers,
+ [scopeId]: { ...prev, draft: nextDraft }
+ }
+ }
+ }),
+
+ resetFilterDraft: (scopeId, initial) =>
+ set(old => {
+ const prev = old.filterPopovers[scopeId] ?? emptyPopoverState
+ return {
+ filterPopovers: {
+ ...old.filterPopovers,
+ [scopeId]: { ...prev, draft: initial }
+ }
+ }
+ })
+}))
diff --git a/src/igz-controls/nextGenComponents/types/table/filter.ts b/src/igz-controls/nextGenComponents/types/table/filter.ts
new file mode 100644
index 0000000000..6c81ab4b6c
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/types/table/filter.ts
@@ -0,0 +1,24 @@
+export type FieldKind = 'text' | 'select' | 'multi-select' | 'number' | 'date'
+
+export type Option = {
+ readonly label: string
+ readonly value: string
+ meta?: Record
+}
+
+export type FilterFieldDef = {
+ key: K
+ label: string
+ kind: FieldKind
+ placeholder?: string
+ options?: Option[]
+ defaultValue?: string | string[]
+ disabled?: boolean
+ required?: boolean
+ resolveValue?: (next: string[], prev: string[]) => string[]
+ computeDisabled?: (optValue: string, currentValues: string[]) => boolean
+}
+
+export type FilterSchema = Record>
+
+export type FilterValues = Partial>
diff --git a/src/igz-controls/nextGenComponents/types/table/rowAction.ts b/src/igz-controls/nextGenComponents/types/table/rowAction.ts
new file mode 100644
index 0000000000..462255d5a9
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/types/table/rowAction.ts
@@ -0,0 +1,13 @@
+import type { ComponentType, SVGProps } from 'react'
+
+export type ActionMenuItem = {
+ label: string
+ icon?: ComponentType>
+ onClick: () => void
+ variant?: 'default' | 'danger'
+ disabled?: boolean
+ hidden?: boolean
+ tooltip?: string
+ className?: string
+ singleActionAsIcon?: boolean
+}
diff --git a/src/igz-controls/nextGenComponents/types/table/timeFilter.ts b/src/igz-controls/nextGenComponents/types/table/timeFilter.ts
new file mode 100644
index 0000000000..659651b317
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/types/table/timeFilter.ts
@@ -0,0 +1,22 @@
+export type TimeFilterValue = 'any' | '24h' | '7d' | '30d' | 'custom'
+
+export type TimeFilterOption = {
+ value: TimeFilterValue
+ label: string
+ rightIcon?: 'chevron'
+}
+
+export type CustomDateRange = { since: string; until: string }
+
+export type TimeFilterDropdownProps = {
+ value?: TimeFilterValue
+ defaultValue?: TimeFilterValue
+ onChange?: (v: TimeFilterValue) => void
+ onCustomRange?: (range: CustomDateRange) => void
+ initialCustomRange?: CustomDateRange
+ presetDateRange?: CustomDateRange
+ options?: TimeFilterOption[]
+ startTimeOnly?: boolean
+ className?: string
+ triggerClassName?: string
+}
diff --git a/src/igz-controls/nextGenComponents/utils/date.utils.ts b/src/igz-controls/nextGenComponents/utils/date.utils.ts
new file mode 100644
index 0000000000..efb2281544
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/utils/date.utils.ts
@@ -0,0 +1,136 @@
+import { format, parse } from 'date-fns'
+
+const DEFAULT_LOCALE = 'en-US'
+
+export const getSupportedLocale = (): string => {
+ if (typeof navigator === 'undefined') return DEFAULT_LOCALE
+ const SUPPORTED_LOCALES = new Set(['en-GB', 'en-US'])
+ const userLocales = navigator.languages ?? [navigator.language]
+ const match = userLocales.find(locale => SUPPORTED_LOCALES.has(locale))
+ return match ?? DEFAULT_LOCALE
+}
+
+export const is12HourFormat = (): boolean =>
+ !!new Intl.DateTimeFormat(getSupportedLocale(), { hour: 'numeric' }).resolvedOptions().hour12
+
+const getTimeFormat = (): string => (is12HourFormat() ? 'hh:mm a' : 'HH:mm')
+
+export const formatLocalDate = (d: Date): string =>
+ new Intl.DateTimeFormat(getSupportedLocale(), {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ numberingSystem: 'latn',
+ calendar: 'gregory'
+ }).format(d)
+
+export const parseLocalDate = (text: string): Date | null => {
+ const match = text.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/)
+ if (!match) return null
+
+ const [, first, second, yearStr] = match
+ const isUS = getSupportedLocale() === 'en-US'
+ const month = (isUS ? parseInt(first, 10) : parseInt(second, 10)) - 1
+ const day = isUS ? parseInt(second, 10) : parseInt(first, 10)
+ const year = parseInt(yearStr, 10)
+
+ const date = new Date(year, month, day)
+ if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
+ return null
+ }
+ return date
+}
+
+/** @deprecated Use formatLocalDate */
+export const formatDateDDMMYYYY = formatLocalDate
+
+/** @deprecated Use parseLocalDate */
+export const parseDateDDMMYYYY = parseLocalDate
+
+export const getDatePlaceholder = (): string =>
+ getSupportedLocale() === 'en-US' ? 'mm/dd/yyyy' : 'dd/mm/yyyy'
+
+export const getTimePlaceholder = (): string => (is12HourFormat() ? 'hh:mm AM' : 'HH:mm')
+
+export const getDefaultSinceHour = (): string => (is12HourFormat() ? '12:00 AM' : '00:00')
+
+export const getDefaultUntilHour = (): string => (is12HourFormat() ? '11:30 PM' : '23:30')
+
+const HALF_HOUR_SLOTS_PER_DAY = 24 * 2
+
+export const buildHalfHourOptions = (): string[] => {
+ const fmt = getTimeFormat()
+ return Array.from({ length: HALF_HOUR_SLOTS_PER_DAY }, (_, i) =>
+ format(new Date(2000, 0, 1, Math.floor(i / 2), (i % 2) * 30), fmt)
+ )
+}
+
+/** @deprecated Use buildHalfHourOptions */
+export const buildHalfHourOptions12h = buildHalfHourOptions
+
+export const toUTCISO = (d: Date): string => d.toISOString()
+
+/** @deprecated Use toUTCISO */
+export const toLocalISO = toUTCISO
+
+const TIME_PARSE_FORMATS = ['hh:mm a', 'h:mm a', 'HH:mm', 'H:mm'] as const
+
+export const applyHourToDate = (date: Date, hour: string, defaultHour?: string): Date => {
+ const effectiveHour = hour || defaultHour
+ if (!effectiveHour) return date
+ for (const fmt of TIME_PARSE_FORMATS) {
+ const parsed = parse(effectiveHour, fmt, date)
+ if (!Number.isNaN(parsed.getTime())) return parsed
+ }
+ return date
+}
+
+export const isoToLocalDate = (iso: string): Date | undefined => {
+ if (!iso) return undefined
+ const d = new Date(iso)
+ if (Number.isNaN(d.getTime())) return undefined
+ return new Date(d.getFullYear(), d.getMonth(), d.getDate())
+}
+
+export const isoToHour = (iso: string): string => {
+ if (!iso) return ''
+ const d = new Date(iso)
+ if (Number.isNaN(d.getTime())) return ''
+ return format(new Date(2000, 0, 1, d.getHours(), d.getMinutes()), getTimeFormat())
+}
+
+export const parseTimeInput = (text: string): string => {
+ const trimmed = text
+ .trim()
+ .replace(/\s+/g, ' ')
+ .replace(/(\d)([AaPp][Mm])/, '$1 $2')
+ if (!trimmed) return ''
+
+ const ref = new Date(2000, 0, 1)
+
+ for (const fmt of TIME_PARSE_FORMATS) {
+ const parsed = parse(trimmed, fmt, ref)
+ if (!Number.isNaN(parsed.getTime()) && parsed.getFullYear() === 2000) {
+ return format(parsed, getTimeFormat())
+ }
+ }
+
+ return ''
+}
+
+const SHORT_DATE_FORMAT: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' }
+
+export const formatCustomRangeLabel = (since: string, until?: string): string => {
+ const from = isoToLocalDate(since)
+ if (!from) return ''
+
+ const locale = getSupportedLocale()
+ const fromStr = from.toLocaleDateString(locale, SHORT_DATE_FORMAT)
+
+ if (!until) return fromStr
+
+ const to = isoToLocalDate(until)
+ if (!to) return fromStr
+
+ return `${fromStr} - ${to.toLocaleDateString(locale, SHORT_DATE_FORMAT)}`
+}
diff --git a/src/igz-controls/nextGenComponents/utils/tableFilters.utils.ts b/src/igz-controls/nextGenComponents/utils/tableFilters.utils.ts
new file mode 100644
index 0000000000..51448d8e78
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/utils/tableFilters.utils.ts
@@ -0,0 +1,27 @@
+import type { DraftValues } from '@igz-controls/stores/tableStore'
+import type { FilterFieldDef, FilterSchema } from '@igz-controls/types/table/filter'
+
+const objectValues = >(obj: T) => {
+ return Object.values(obj) as Array
+}
+
+const buildInitialFromSchema = (schema: FilterSchema): DraftValues => {
+ const fields = objectValues(schema) as FilterFieldDef[]
+ return fields.reduce((acc, f) => {
+ acc[f.key] = f.defaultValue ?? (f.kind === 'multi-select' ? [] : '')
+ return acc
+ }, {})
+}
+
+const isActiveValue = (val: string | string[] | undefined): boolean => {
+ if (val === undefined || val === '' || val === 'all') return false
+ if (Array.isArray(val)) return val.length > 0 && !(val.length === 1 && val[0] === 'all')
+ return true
+}
+
+const hasActiveFilters = (schema: FilterSchema): boolean => {
+ const fields = objectValues(schema) as FilterFieldDef[]
+ return fields.some(field => isActiveValue(field.defaultValue))
+}
+
+export { objectValues, buildInitialFromSchema, hasActiveFilters }
diff --git a/src/igz-controls/nextGenComponents/vite-env.d.ts b/src/igz-controls/nextGenComponents/vite-env.d.ts
new file mode 100644
index 0000000000..441c6724d5
--- /dev/null
+++ b/src/igz-controls/nextGenComponents/vite-env.d.ts
@@ -0,0 +1,5 @@
+declare module '*.svg?react' {
+ import type { FunctionComponent, SVGProps } from 'react'
+ const ReactComponent: FunctionComponent>
+ export default ReactComponent
+}
diff --git a/src/igz-controls/reducers/commonDetailsReducer.js b/src/igz-controls/reducers/commonDetailsReducer.js
new file mode 100644
index 0000000000..8f0b1c4481
--- /dev/null
+++ b/src/igz-controls/reducers/commonDetailsReducer.js
@@ -0,0 +1,88 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+ changes: {
+ counter: 0,
+ data: {}
+ },
+ detailsPopUpInfoContent: {},
+ editMode: false,
+ infoContent: {},
+ filtersWasHandled: false,
+ showWarning: false
+}
+
+const commonsDetailsStoreSlice = createSlice({
+ name: 'commonDetailsStore',
+ initialState,
+ reducers: {
+ removeDetailsPopUpInfoContent(state) {
+ state.detailsPopUpInfoContent = {}
+ },
+ removeInfoContent(state) {
+ state.infoContent = {}
+ },
+ resetChanges(state) {
+ state.changes = initialState.changes
+ },
+ setChanges(state, action) {
+ state.changes = action.payload
+ },
+ setChangesCounter(state, action) {
+ state.changes.counter = action.payload
+ },
+ setChangesData(state, action) {
+ state.changes.data = action.payload
+ },
+ setDetailsPopUpInfoContent(state, action) {
+ state.detailsPopUpInfoContent = action.payload
+ },
+ setEditMode(state, action) {
+ state.editMode = action.payload
+ },
+ setFiltersWasHandled(state, action) {
+ state.filtersWasHandled = action.payload
+ },
+ setInfoContent(state, action) {
+ state.infoContent = action.payload
+ },
+ showWarning(state, action) {
+ state.showWarning = action.payload
+ }
+ }
+})
+
+export const {
+ removeDetailsPopUpInfoContent,
+ removeInfoContent,
+ resetChanges,
+ setChanges,
+ setChangesCounter,
+ setChangesData,
+ setDetailsPopUpInfoContent,
+ setEditMode,
+ setFiltersWasHandled,
+ setInfoContent,
+ showWarning
+} = commonsDetailsStoreSlice.actions
+
+export default commonsDetailsStoreSlice.reducer
diff --git a/src/igz-controls/reducers/index.js b/src/igz-controls/reducers/index.js
new file mode 100644
index 0000000000..de315901d0
--- /dev/null
+++ b/src/igz-controls/reducers/index.js
@@ -0,0 +1,18 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+export * as commonDetailsReducer from './commonDetailsReducer'
+export * as notificationReducer from './notificationReducer'
diff --git a/src/igz-controls/reducers/notificationReducer.js b/src/igz-controls/reducers/notificationReducer.js
new file mode 100644
index 0000000000..ee850f1f93
--- /dev/null
+++ b/src/igz-controls/reducers/notificationReducer.js
@@ -0,0 +1,46 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+ notification: []
+}
+
+const notificationSlice = createSlice({
+ name: 'notification',
+ initialState,
+ reducers: {
+ setNotification(state, { payload }) {
+ if (payload.error) {
+ /* eslint-disable-next-line no-console */
+ console.error(payload.error)
+ }
+
+ state.notification.push(payload)
+ },
+ removeNotification(state, { payload }) {
+ state.notification = state.notification.filter(item => item.id !== payload)
+ }
+ }
+})
+
+export const { setNotification, removeNotification } = notificationSlice.actions
+
+export default notificationSlice.reducer
diff --git a/src/igz-controls/scss/borders.scss b/src/igz-controls/scss/borders.scss
new file mode 100644
index 0000000000..365ef8aec3
--- /dev/null
+++ b/src/igz-controls/scss/borders.scss
@@ -0,0 +1,26 @@
+@use './colors';
+
+$activeJobTabBorder: 3px solid colors.$cornflowerBlue;
+$disabledBorder: 1px solid rgba(colors.$spunPearl, 0.3);
+$errorBorder: 1px solid colors.$amaranth;
+$labelBorder: 1px solid colors.$amethyst;
+$parametersBorder: 1px solid colors.$burntSiennaTwo;
+$primaryBorder: 1px solid rgba(colors.$black, 0.2);
+$resultsBorder: 1px solid colors.$chateauGreen;
+$secondaryBorder: 1px solid colors.$mulledWineThree;
+$tertiaryBorder: 1px solid colors.$mischka;
+$dividerBorder: 1px solid rgba(colors.$mulledWine, 0.12);
+$transparentBorder: 1px solid transparent;
+$uploadFileDragOverBorder: 2px dashed colors.$cornflowerBlue;
+$uploadFileDroppedBorder: 1px solid colors.$silver;
+$uploadFileIdleBorder: 1px dashed colors.$silver;
+$labelEditBorder: 1px solid rgba(colors.$amethyst, 0.34);
+$applyBtnBorder: 4px solid colors.$brightTurquoise;
+$focusBorder: 1px solid colors.$topaz;
+$tableRowBorder: 1px solid colors.$titanWhite;
+
+// stats borders
+$runningBorder: 2px solid colors.$pictonBlue;
+$totalBorder: 2px solid rgba(colors.$black, 0.2);
+$failedBorder: 2px solid colors.$amaranth;
+$completedBorder: 2px solid colors.$brightTurquoise;
diff --git a/src/igz-controls/scss/colors.scss b/src/igz-controls/scss/colors.scss
new file mode 100644
index 0000000000..57c7862932
--- /dev/null
+++ b/src/igz-controls/scss/colors.scss
@@ -0,0 +1,75 @@
+/* stylelint-disable color-hex-length */
+$alabaster: #f8f7f8;
+$alto: #dadada;
+$amaranth: #ea336a;
+$amethyst: #a44cc5;
+$amethystTwo: rgba($amethyst, 0.16);
+$athensGray: #ebebec;
+$babyPink: #f4bec6;
+$black: #000;
+$bombay: #b1b1b7;
+$brightTurquoise: #0fddaf;
+$burntSienna: #eb5757;
+$burntSiennaTwo: #ea7f54;
+$carouselPink: #fcedf0;
+$ceriseRed: #d22a5d;
+$cerulean: #00b6ed;
+$chateauGreen: #49af53;
+$cornflowerBlue: #6279e7;
+$cornflowerBlueTwo: #5871f4;
+$darkPurple: #2f2b46;
+$doveGray: #666;
+$doveGrayTwo: #6e6e6e;
+$ebonyClay: #293445;
+$fuchsiaPink: #cc44cc;
+$gallery: #eee;
+$gossamer: #0b9b7b;
+$ghostWhite: #f5f7ff;
+$grandis: #ffd077;
+$grandisTwo: rgba($grandis, 0.36);
+$gunsmoke: #7f8d89;
+$hawkesBlue: #e6e9fd;
+$hotPink: #ff75bf;
+$hummingBird: #c5f7ec;
+$indigo: #5468c7;
+$iron: #dfe2e5;
+$java: #13bbb1;
+$javaLight: #1fcc9e;
+$javaTwo: rgba($java, 0.24);
+$kimberly: #6d5e92;
+$magnoliaWhite: #eef1ff;
+$malibu: #869cff;
+$malibuTwo: rgba($malibu, 0.12);
+$maroonFlash: #bc2553;
+$mercury: #e7e7e7;
+$mineshaft: #333;
+$mineshaftTwo: rgba($mineshaft, 0.75);
+$mischka: #e9e8eb;
+$mountainMeadow: #1db284;
+$mulledWine: #483f56;
+$mulledWineThree: rgba($mulledWine, 0.12);
+$mulledWineTwo: rgba($mulledWine, 0.87);
+$orchid: #d863b7;
+$pharlap: #a98982;
+$pictonBlue: #50b1e7;
+$poloBlue: #8c9dc5;
+$portage: #8598f2;
+$primary: #4b4760;
+$riverBed: #444d55;
+$saltbox: #646267;
+$selago: #f2f4fe;
+$scorpion: #565656;
+$silver: #c4c4c4;
+$sorbus: #f98b0a;
+$spunPearl: #adabb0;
+$supernova: #ffc700;
+$titanWhite: #e2e7ff;
+$topaz: #7f7989;
+$white: #fff;
+$wildSand: #f5f5f5;
+$zircon: #fafbff;
+$frenchLilac: #f0e2f6;
+$autumnMalt: #483f561f;
+$whiteSolid: #f3f5f9;
+$channelFog: #cbd3e4;
+$lightBlack: #0003;
diff --git a/src/igz-controls/scss/common.scss b/src/igz-controls/scss/common.scss
new file mode 100644
index 0000000000..f29e88beda
--- /dev/null
+++ b/src/igz-controls/scss/common.scss
@@ -0,0 +1,1059 @@
+@use './colors';
+@use './borders';
+@use './variables';
+@use './shadows';
+@use './mixins';
+
+:root {
+ --chipBlockMarginRight: 5px;
+ --tipArrowLength: 10px;
+ --tipIconLength: 16px;
+ --tipArrowOffset: 20px;
+ --amethystColor: #{colors.$amethyst};
+ --brightTurquoiseColor: #{colors.$brightTurquoise};
+ --ceriseRedColor: #{colors.$ceriseRed};
+ --cornflowerBlueTwoColor: #{colors.$cornflowerBlueTwo};
+ --doveGrayColor: #{colors.$doveGray};
+ --grandisColor: #{colors.$grandis};
+ --javaColor: #{colors.$java};
+ --mulledWineColor: #{colors.$mulledWine};
+ --mischkaColor: #{colors.$mischka};
+ --alabasterColor: #{colors.$alabaster};
+ --spunPearlColor: #{colors.$spunPearl};
+ --whiteSolidColor: #{colors.$whiteSolid};
+}
+
+/* =========== GENERAL ============= */
+
+#root {
+ z-index: 1;
+ display: flex;
+ flex: 1;
+ width: 100%;
+ isolation: isolate;
+}
+
+#overlay_container {
+ position: fixed;
+ bottom: 0;
+ z-index: 2;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+
+button {
+ padding: 0;
+ font-family: Roboto, sans-serif;
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+
+ &:active,
+ &:focus {
+ outline: none;
+ box-shadow: none;
+ }
+
+ &:disabled {
+ cursor: not-allowed;
+ }
+}
+
+input,
+textarea {
+ overflow-x: hidden;
+ font-weight: normal;
+ font-size: 15px;
+ font-family: Roboto, sans-serif;
+ font-style: normal;
+ line-height: 18px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ border: 0;
+ color: inherit;
+ background-color: transparent;
+ padding: 0;
+ resize: none;
+
+ &::placeholder {
+ color: colors.$spunPearl;
+ }
+
+ &::-webkit-input-placeholder {
+ /* Chrome/Opera/Safari */
+ color: colors.$spunPearl;
+ }
+
+ &::-moz-placeholder {
+ /* Firefox 19+ */
+ color: colors.$spunPearl;
+ }
+
+ &:-ms-input-placeholder {
+ /* IE 10+ */
+ color: colors.$spunPearl;
+ }
+
+ &:-moz-placeholder {
+ /* Firefox 18- */
+ color: colors.$spunPearl;
+ }
+
+ &:disabled {
+ background: transparent;
+ cursor: not-allowed;
+ }
+
+ &:active,
+ &:focus {
+ outline: none;
+ box-shadow: none;
+ }
+}
+
+.link {
+ color: colors.$cornflowerBlue;
+ cursor: pointer;
+ line-height: 20px;
+
+ &:hover {
+ text-decoration: underline;
+ text-underline-offset: 3px;
+ }
+}
+
+.warning-text {
+ color: colors.$amaranth;
+ padding: 5px 0;
+ line-height: 1.5;
+ font-size: 13px;
+}
+
+[class*='igz-transition'] {
+ transition: opacity 200ms ease-in-out;
+}
+
+.igz-transition {
+ &-enter {
+ opacity: 0;
+ }
+
+ &-enter-active {
+ opacity: 1;
+ }
+
+ &-exit {
+ opacity: 1;
+ }
+
+ &-exit-active {
+ opacity: 0;
+ }
+}
+
+.d-flex {
+ display: flex;
+}
+
+.visibility-hidden {
+ visibility: hidden;
+}
+
+.data-ellipsis {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.cursor-pointer {
+ cursor: pointer;
+}
+
+.capitalize {
+ text-transform: capitalize;
+}
+
+.wrap {
+ white-space: pre-wrap;
+}
+
+iframe {
+ width: 100%;
+ height: 100%;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+*,
+::after,
+::before {
+ box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: rgba(colors.$black, 0.1);
+ border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: rgba(colors.$black, 0.25);
+ border-radius: 10px;
+
+ &:hover {
+ background-color: rgba(colors.$black, 0.4);
+ }
+}
+
+/* =========== CONTENT ============= */
+
+.content {
+ position: relative;
+ flex-direction: column;
+ min-width: 800px;
+ padding: 15px 24px 10px;
+ background-color: colors.$white;
+ overflow: auto;
+ min-height: 0;
+
+ @include mixins.displayFlex;
+
+ @media screen and (min-width: 1300px) {
+ padding: 15px 64px 15px;
+ }
+
+ &__header {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 70px;
+ padding: 14px 24px;
+ background-color: colors.$white;
+ box-shadow: shadows.$headerShadow;
+
+ .btn {
+ &_register {
+ text-transform: capitalize;
+ }
+ }
+ }
+
+ .table-container {
+ position: relative;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ background-color: colors.$white;
+
+ .no_data {
+ margin: auto;
+ color: colors.$mulledWine;
+ }
+ }
+
+ &-wrapper {
+ display: flex;
+ flex: 1 1;
+ flex-direction: column;
+ min-width: 100%;
+ min-height: 0;
+ }
+
+ &__action-bar-wrapper {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: center;
+ background-color: colors.$white;
+
+ &_hidden {
+ display: none;
+ }
+
+ .content-menu {
+ flex: 0;
+ margin-right: 20px;
+ margin-bottom: 15px;
+
+ &__item {
+ white-space: nowrap;
+ }
+ }
+ }
+
+ &__history-back-link-wrapper {
+ padding-bottom: 5px;
+
+ .history-back-link__title {
+ max-width: 100%;
+ }
+ }
+
+ .action-bar {
+ display: flex;
+ flex: 1;
+ align-items: flex-start;
+ justify-content: flex-end;
+ width: 100%;
+ margin-bottom: 15px;
+
+ &_hidden {
+ display: none;
+ }
+
+ &__filters {
+ &-item {
+ &:not(:last-child) {
+ margin: 0 15px 0 0;
+ }
+ }
+ }
+ }
+}
+
+/* =========== CONTENT MENU ============= */
+
+.content-menu {
+ display: inline-flex;
+ align-items: center;
+ width: 100%;
+ min-height: 40px;
+
+ &__tabs-wrapper {
+ overflow-x: hidden;
+ }
+
+ &__tabs {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ list-style-type: none;
+ transition: transform 0.2s ease-in-out;
+
+ @include mixins.resetSpaces;
+ }
+
+ &__tab {
+ align-items: center;
+ margin: 0 15px 0 0;
+ padding: 5px;
+ color: colors.$topaz;
+ font-weight: 400;
+ line-height: 1;
+ white-space: nowrap;
+ text-align: center;
+ text-transform: capitalize;
+ cursor: pointer;
+
+ &:first-child {
+ padding-left: 0;
+ }
+
+ &-xs {
+ font-size: 16px;
+ }
+
+ &-sm {
+ font-size: 16px;
+
+ @media screen and (min-width: 1300px) {
+ font-size: 18px;
+ }
+ }
+
+ &-md {
+ font-size: 18px;
+
+ @media screen and (min-width: 1300px) {
+ font-size: 20px;
+ }
+ }
+
+ &-lg {
+ font-size: 20px;
+
+ @media screen and (min-width: 1300px) {
+ font-size: 22px;
+ }
+ }
+
+ &::after {
+ display: block;
+ width: 100%;
+ padding-bottom: 5px;
+ border-width: 2px;
+ border-bottom: 2px solid colors.$cornflowerBlue;
+ transform: scale(0);
+ opacity: 0;
+ transition: all 0.3s ease-in-out;
+ content: '';
+ }
+
+ &:hover:not([class*='_active']) {
+ &::after {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+ }
+
+ & > * {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+
+ &.content-menu__tab-tip {
+ gap: 5px;
+ }
+
+ &.content-menu__tab-icon {
+ gap: 5px;
+
+ & > * {
+ svg {
+ width: 17px;
+ height: 17px;
+
+ path {
+ fill: colors.$topaz;
+ }
+ }
+ }
+ }
+ }
+
+ &.content-menu__tab_active {
+ svg {
+ path {
+ fill: colors.$cornflowerBlue;
+ }
+ }
+ }
+
+ &_active {
+ color: colors.$primary;
+ font-weight: 700;
+ pointer-events: none;
+
+ .content-menu__tab-tip {
+ svg {
+ pointer-events: auto;
+ }
+ }
+
+ &::after {
+ transform: scale(1);
+ opacity: 1;
+ }
+
+ a {
+ cursor: default;
+ }
+
+ .content-menu__tab-icon {
+ svg {
+ path {
+ fill: colors.$cornflowerBlue;
+ }
+ }
+ }
+ }
+ }
+
+ &_disabled {
+ pointer-events: none;
+
+ a {
+ cursor: not-allowed;
+ }
+ }
+
+ &__preview {
+ color: colors.$spunPearl;
+ font-size: 10px;
+ }
+
+ .tabs-slider {
+ &__arrow {
+ display: flex;
+ width: 30px;
+ min-width: fit-content;
+ max-width: 24px;
+ border-radius: 8px;
+
+ &_left {
+ padding-top: 3px;
+ transform: rotate(180deg);
+ }
+
+ &_right {
+ padding-bottom: 3px;
+ }
+
+ &_hidden {
+ display: none;
+ }
+
+ &_disabled {
+ pointer-events: none;
+
+ & path {
+ fill: colors.$spunPearl;
+ }
+ }
+
+ &:hover:not(.details-menu__arrow_disabled) {
+ background-color: colors.$mulledWineThree;
+ cursor: pointer;
+ }
+
+ svg {
+ align-self: center;
+ }
+ }
+ }
+}
+
+/* =========== TABLE ============= */
+
+.table {
+ position: relative;
+ width: 100%;
+ text-align: left;
+ border-spacing: 0;
+
+ .table {
+ &-row {
+ display: flex;
+ flex-direction: row;
+ min-width: 100%;
+ min-height: 50px;
+ background-color: inherit;
+
+ &:not(.parent-row_expanded) > * {
+ position: relative;
+ display: inline-flex;
+ flex: 1;
+ align-items: center;
+ border-bottom: borders.$tableRowBorder;
+
+ @include mixins.tableDet(8px, 5px, 8px, 10px);
+
+ &:first-child {
+ padding-left: 30px;
+ }
+
+ &.table-cell {
+ &-name {
+ position: sticky;
+ left: 0;
+ z-index: 1;
+ min-width: 250px;
+ padding-right: 10px;
+ }
+
+ &-icon {
+ position: sticky;
+ right: 0;
+ justify-content: center;
+ max-width: 85px;
+ padding: 0;
+
+ @include mixins.tableColumnFlex(0, 50px);
+
+ & > :first-child {
+ padding: 0;
+ }
+
+ &__run-icon {
+ margin-bottom: -2px;
+ transform: rotate(-90deg) scale(1.2);
+ }
+ }
+ }
+ }
+
+ &.parent-row {
+ &:not(.parent-row_expanded) {
+ &:not(.parent-row_without-actions) {
+ .table-cell-icon {
+ .actions-menu {
+ &__container_extended {
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(245, 247, 255, 1) 100%
+ );
+ }
+ }
+ }
+ }
+
+ &:hover {
+ .table-cell-icon {
+ .actions-menu {
+ &__container {
+ display: flex;
+
+ &_extended {
+ background-color: colors.$ghostWhite;
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(245, 247, 255, 1) 100%
+ );
+ }
+ }
+
+ .btn {
+ min-width: 24px;
+ padding: 0;
+ border: none;
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .expand-arrow {
+ position: absolute;
+ left: 5px;
+ cursor: pointer;
+ }
+
+ .best-iteration {
+ position: absolute;
+ top: auto;
+ bottom: auto;
+ left: 5px;
+ margin-top: 3px;
+ }
+
+ &_expanded {
+ flex-direction: column;
+ border: 0;
+
+ .table-row {
+ &:hover {
+ .table-cell-icon {
+ .actions-menu {
+ &__container {
+ display: flex;
+ }
+ }
+ }
+ }
+ }
+
+ .row_grouped-by {
+ position: sticky;
+ top: #{variables.$headerRowHeight}px;
+ z-index: 3;
+ padding: 0;
+ background-color: colors.$white;
+
+ .expand-arrow {
+ transform: rotate(90deg);
+ }
+ }
+ }
+ }
+
+ .checkbox {
+ position: absolute;
+ left: 8px;
+ margin: 0;
+ }
+ }
+
+ &-header {
+ position: sticky;
+ top: 0;
+ z-index: 3;
+ min-width: 100%;
+
+ &-row {
+ min-height: #{variables.$headerRowHeight}px;
+ }
+
+ &__cell {
+ min-width: 75px;
+
+ @include mixins.tableHeader;
+
+ &:first-child {
+ border-radius: 4px 0 0 0;
+ }
+
+ &:last-child {
+ border-radius: 0 4px 0 0;
+ }
+ }
+ }
+
+ &-body {
+ position: relative;
+ z-index: 2;
+
+ &__cell {
+ .status {
+ display: flex;
+ flex: 0 1 12px;
+ align-items: center;
+ justify-content: center;
+ min-width: 12px;
+ margin-left: 5px;
+
+ & > * {
+ margin: 0;
+ }
+ }
+ }
+
+ .table-row {
+ background-color: colors.$white;
+
+ &:hover,
+ &_active {
+ background-color: colors.$ghostWhite;
+ }
+
+ & > * {
+ background-color: inherit;
+ }
+ }
+ }
+ }
+
+ &-main {
+ display: flex;
+ flex: 1;
+ flex-flow: column nowrap;
+ overflow-y: auto;
+ will-change: scroll-position;
+ }
+
+ &.table-with-details {
+ .table-cell-name {
+ min-width: 240px;
+ max-width: 240px;
+ }
+ }
+
+ &-fixed {
+ table-layout: fixed;
+ }
+}
+
+/* =========== FORM TABLE ============= */
+
+.form-table {
+ $tableHeaderHeight: 50px;
+
+ width: 100%;
+ max-height: 500px;
+ overflow: hidden;
+ overflow-y: auto;
+ background-color: colors.$white;
+
+ .form-table__row {
+ display: flex;
+ align-items: center;
+ min-height: $tableHeaderHeight;
+ border-bottom: borders.$primaryBorder;
+ background-color: colors.$white;
+ padding: 5px 0;
+
+ &.form-table__row_excluded {
+ .form-table__cell {
+ color: colors.$spunPearl;
+ }
+ }
+
+ &.form-table__row_hidden {
+ display: none;
+ }
+
+ &:not(.no-hover):hover {
+ &:not(.form-table__row_invalid) {
+ background-color: colors.$alabaster;
+ }
+
+ .form-table__actions-cell {
+ visibility: visible;
+ }
+ }
+
+ &.form-table__row_active {
+ background-color: colors.$alabaster;
+
+ .form-table__cell {
+ &:not(.form-table__actions-cell) {
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+ }
+ }
+
+ &.form-table__row_invalid {
+ background-color: rgba(colors.$amaranth, 0.15);
+ }
+
+ &_multiline {
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ }
+ }
+
+ .form-table__header-row,
+ .form-table__sub-header-row,
+ .form-table__action-row {
+ position: sticky;
+ z-index: 3;
+ height: $tableHeaderHeight;
+ }
+
+ .form-table__header-row {
+ border-top: borders.$primaryBorder;
+ font-size: 18px;
+ font-weight: bold;
+ top: 0;
+ }
+
+ .form-table__sub-header-row {
+ border: unset;
+ font-size: 16px;
+ font-weight: bold;
+ top: $tableHeaderHeight;
+ }
+
+ .form-table__action-row {
+ bottom: 0;
+ border: unset;
+
+ button {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-width: 44px;
+ padding: 10px;
+ color: colors.$cornflowerBlue;
+ font-size: 15px;
+ line-height: 18px;
+
+ svg {
+ width: 20px;
+ height: 20px;
+
+ rect {
+ fill: colors.$cornflowerBlue;
+ }
+ }
+ }
+ }
+
+ .form-table__cell {
+ display: flex;
+ overflow: hidden;
+ align-items: center;
+ padding: 3px 10px;
+ color: colors.$primary;
+
+ &.disabled {
+ color: colors.$spunPearl;
+ }
+
+ .form-table__name {
+ display: flex;
+ overflow: hidden;
+
+ &.form-table__name_with-asterisk {
+ &::after {
+ content: ' * ';
+ color: colors.$amaranth;
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+
+ .form-table__cell_min {
+ flex: 0.1;
+ min-width: 30px;
+ }
+
+ .form-table__cell_1 {
+ flex: 1;
+ }
+
+ .form-table__cell_2 {
+ flex: 2;
+ }
+
+ .form-table__cell_3 {
+ flex: 3;
+ }
+
+ .form-table__cell_4 {
+ flex: 4;
+ }
+
+ .form-table__cell_5 {
+ flex: 5;
+ }
+
+ .form-table__actions-cell {
+ flex: 0 1 auto;
+ visibility: hidden;
+ justify-content: flex-end;
+ min-width: variables.$actionsCellWidth;
+ padding: 0;
+
+ & > * {
+ margin: 0 5px 0 0;
+ }
+ }
+}
+
+.form-table_disabled {
+ .form-table__row {
+ &:not(.no-hover):hover {
+ .form-table__actions-cell {
+ visibility: hidden;
+ }
+ }
+ }
+
+ .form-table__action-row {
+ button {
+ color: colors.$spunPearl;
+
+ svg {
+ rect {
+ fill: colors.$spunPearl;
+ }
+ }
+ }
+ }
+}
+
+/* =========== HIDDEN CHIPS ============= */
+
+.chip-block-hidden {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ top: unset;
+ right: unset;
+ left: unset;
+ bottom: unset;
+ width: min-content;
+ height: min-content;
+ min-width: 250px;
+ max-width: 100%;
+ max-height: 100%;
+ padding: 10px;
+ background-color: colors.$white;
+ border-radius: variables.$mainBorderRadius;
+ box-shadow: shadows.$hiddenChipsBlockShadow;
+ z-index: 9;
+ opacity: 0;
+
+ &__scrollable-container {
+ overflow: auto;
+ display: flex;
+ width: 100%;
+ flex-flow: row wrap;
+ }
+
+ &_bottom {
+ &::after {
+ @include mixins.hiddenChipBlockArrow();
+
+ top: -6px;
+ }
+ }
+
+ &_top {
+ &::before {
+ @include mixins.hiddenChipBlockArrow();
+
+ top: calc(100% - 6px);
+ }
+ }
+
+ &_left {
+ &::before,
+ &::after {
+ right: 15px;
+ }
+ }
+
+ &_visible {
+ opacity: 1;
+ }
+}
+
+/* =========== SORT ============= */
+
+.sortable-header {
+ &-cell {
+ position: relative;
+ border: 0;
+ border-radius: 0;
+ cursor: pointer;
+
+ .sort-icon {
+ position: absolute;
+ top: auto;
+ right: 2px;
+ bottom: auto;
+ display: none;
+ }
+
+ &_active {
+ background-color: colors.$alabaster;
+
+ .sort-icon {
+ display: block;
+ }
+ }
+
+ &:hover {
+ .sort-icon {
+ display: block;
+ }
+ }
+
+ label {
+ cursor: pointer;
+ }
+ }
+
+ &-label {
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding-right: 25px;
+ }
+}
diff --git a/src/igz-controls/scss/details.scss b/src/igz-controls/scss/details.scss
new file mode 100644
index 0000000000..5cec586f1a
--- /dev/null
+++ b/src/igz-controls/scss/details.scss
@@ -0,0 +1,380 @@
+@use './colors';
+@use './mixins';
+@use './borders';
+@use './shadows';
+
+.table {
+ &__item {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+ width: calc(100% - 250px);
+ height: 100%;
+ padding: 20px 30px;
+ overflow-y: auto;
+ color: colors.$mulledWine;
+ background-color: colors.$white;
+ border: 1px solid colors.$magnoliaWhite;
+ border-radius: 0 4px 4px 0;
+
+ &_big {
+ width: 100%;
+ }
+
+ &-popup {
+ border-radius: 8px;
+ }
+
+ .error {
+ margin-bottom: 10px;
+ }
+
+ .item {
+ &-header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ justify-content: flex-end;
+ margin: 0 0 1em 0;
+
+ &-wrapper {
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 6;
+ background-color: inherit;
+ }
+
+ &__title {
+ display: flex;
+ align-items: center;
+ }
+
+ &__status {
+ color: colors.$topaz;
+ line-height: 25px;
+
+ &-row {
+ display: flex;
+ flex: 1 0 100%;
+ flex-flow: row wrap;
+ align-items: center;
+ margin-bottom: 5px;
+
+ .info-banner {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ max-width: 100%;
+ height: 36px;
+ padding: 4px 8px;
+ background-color: colors.$magnoliaWhite;
+ border-radius: 4px;
+ }
+ }
+ }
+
+ &__back-btn {
+ margin-right: 5px;
+
+ & > * {
+ margin: 0;
+ }
+ }
+
+ &__navigation-buttons {
+ display: flex;
+ }
+
+ &__pods {
+ &-error {
+ color: colors.$spunPearl;
+ }
+ }
+
+ &__data {
+ flex: 1 0 0;
+ min-width: 250px;
+ margin-right: auto;
+
+ h3 {
+ margin: 0 0 5px 0;
+ font-size: 24px;
+ line-height: 28px;
+ }
+
+ .state {
+ display: inline-block;
+ min-width: 18px;
+
+ i {
+ margin: 0 10px 0 5px;
+ }
+ }
+
+ .error-container {
+ flex: 1;
+ margin-left: 0;
+
+ &:not(:last-child) {
+ margin-right: 1em;
+ padding-right: 1em;
+ border-right: borders.$secondaryBorder;
+ }
+ }
+ }
+
+ &__custom-elements {
+ z-index: 7;
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+ }
+
+ &__buttons {
+ z-index: 7;
+ display: flex;
+ align-items: center;
+
+ a {
+ display: inline-block;
+ margin: 21px 21px 21px 10px;
+
+ &.details-close-btn {
+ margin: 0;
+ }
+ }
+
+ .btn {
+ margin: 0 0.2rem;
+ }
+
+ .table-actions-container {
+ display: block;
+ }
+
+ .actions-menu {
+ &__container {
+ display: block;
+
+ .btn {
+ padding: 0;
+ border: none;
+
+ &:hover {
+ background-color: transparent;
+ }
+
+ :first-child {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+ .details-date-picker {
+ margin-right: 12px;
+ }
+ }
+ }
+
+ &__content {
+ border-top: borders.$secondaryBorder;
+ }
+ }
+
+ &_inputs {
+ width: 100%;
+
+ @include mixins.resetSpaces;
+
+ &_item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 27px 24px;
+ border-bottom: borders.$secondaryBorder;
+
+ div {
+ min-width: 237px;
+ padding: 0 5px;
+ }
+ }
+ }
+
+ &-logs {
+ position: relative;
+ display: flex;
+ flex: 1;
+ width: 100%;
+ min-height: 200px;
+ padding: 10px 0;
+ color: colors.$white;
+ font-family: 'Source Code Pro', 'Courier New', monospace;
+ white-space: pre-wrap;
+ background-color: colors.$black;
+
+ &:not(:last-child) {
+ margin-bottom: 10px;
+ }
+
+ &-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+
+ &-content {
+ width: 100%;
+ height: 100%;
+ padding: 0 10px;
+ overflow-y: scroll;
+
+ /* Define the thumb style */
+ &::-webkit-scrollbar-thumb {
+ background: colors.$doveGray;
+ border-radius: 5px;
+ }
+ }
+
+ &-panel {
+ padding: 0 10px;
+
+ .logs-refresh {
+ .btn {
+ min-width: 40px;
+ padding: 0;
+ border-radius: 50%;
+
+ & > * {
+ margin: 0;
+ }
+ }
+ }
+
+ .logs-loader {
+ width: 40px;
+ height: 40px;
+ }
+ }
+ }
+
+ &_artifacts {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+
+ &_wrapper {
+ width: 100%;
+ }
+ }
+
+ .details-item {
+ &__buttons-block {
+ display: flex;
+ }
+
+ &__apply-btn-wrapper {
+ width: 30px;
+ }
+
+ &__apply-btn {
+ display: block;
+ min-width: 30px;
+ height: 30px;
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ .preview_container {
+ display: flex;
+ flex-flow: column;
+ width: 100%;
+ height: 100%;
+
+ &-multi {
+ gap: 20px;
+ }
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+
+ &-text {
+ align-self: center;
+ }
+ }
+
+ .inputs_container {
+ width: 100%;
+ }
+
+ .accordion {
+ &__container {
+ &.open {
+ .accordion__body {
+ overflow: initial;
+ }
+ }
+ }
+ }
+
+ .preview {
+ &_popout {
+ margin: 0;
+ padding: 0;
+ background: colors.$white;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ }
+ }
+
+ .json {
+ padding: 0 15px;
+ }
+
+ .preview-table {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ overflow: auto;
+
+ .table-header {
+ top: 0;
+ }
+ }
+ }
+
+ &_code {
+ flex: 1;
+ overflow: auto;
+
+ h3 {
+ text-align: center;
+ vertical-align: middle;
+ }
+
+ pre {
+ padding: 8px 16px;
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+ }
+
+ &.pop-up-dialog-opened {
+ overflow-y: hidden;
+ }
+
+ .chips {
+ &-wrapper {
+ flex-wrap: wrap;
+ width: 100%;
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/scss/fonts.scss b/src/igz-controls/scss/fonts.scss
new file mode 100644
index 0000000000..b5848f557f
--- /dev/null
+++ b/src/igz-controls/scss/fonts.scss
@@ -0,0 +1,123 @@
+/* roboto-300 - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
+ src:
+ local(''),
+ /* IE6-IE8 */ url('../fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'),
+ /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-300.woff2') format('woff2'),
+ /* Modern Browsers */ url('../fonts/roboto-v27-latin-300.woff') format('woff'),
+ /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-300.ttf') format('truetype'),
+ /* Legacy iOS */ url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg');
+}
+
+/* roboto-regular - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
+ src:
+ local(''),
+ /* IE6-IE8 */ url('../fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'),
+ /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'),
+ /* Modern Browsers */ url('../fonts/roboto-v27-latin-regular.woff') format('woff'),
+ /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'),
+ /* Legacy iOS */ url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg');
+}
+
+/* roboto-italic - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../fonts/roboto-v27-latin-italic.eot'); /* IE9 Compat Modes */
+ src:
+ local(''),
+ /* IE6-IE8 */ url('../fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'),
+ /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-italic.woff2') format('woff2'),
+ /* Modern Browsers */ url('../fonts/roboto-v27-latin-italic.woff') format('woff'),
+ /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-italic.ttf') format('truetype'),
+ /* Legacy iOS */ url('../fonts/roboto-v27-latin-italic.svg#Roboto') format('svg');
+}
+
+/* roboto-500 - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../fonts/roboto-v27-latin-500.eot'); /* IE9 Compat Modes */
+ src:
+ local(''),
+ /* IE6-IE8 */ url('../fonts/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'),
+ /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-500.woff2') format('woff2'),
+ /* Modern Browsers */ url('../fonts/roboto-v27-latin-500.woff') format('woff'),
+ /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500.ttf') format('truetype'),
+ /* Legacy iOS */ url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg');
+}
+
+/* roboto-500italic - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 500;
+ src: url('../fonts/roboto-v27-latin-500italic.eot'); /* IE9 Compat Modes */
+ src:
+ local(''),
+ /* IE6-IE8 */ url('../fonts/roboto-v27-latin-500italic.eot?#iefix') format('embedded-opentype'),
+ /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-500italic.woff2') format('woff2'),
+ /* Modern Browsers */ url('../fonts/roboto-v27-latin-500italic.woff') format('woff'),
+ /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-500italic.ttf') format('truetype'),
+ /* Legacy iOS */ url('../fonts/roboto-v27-latin-500italic.svg#Roboto') format('svg');
+}
+
+/* roboto-700 - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/roboto-v27-latin-700.eot'); /* IE9 Compat Modes */
+ src:
+ local(''),
+ /* IE6-IE8 */ url('../fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'),
+ /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-700.woff2') format('woff2'),
+ /* Modern Browsers */ url('../fonts/roboto-v27-latin-700.woff') format('woff'),
+ /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700.ttf') format('truetype'),
+ /* Legacy iOS */ url('../fonts/roboto-v27-latin-700.svg#Roboto') format('svg');
+}
+
+/* roboto-700italic - latin */
+@font-face {
+ font-family: 'Roboto';
+ font-style: italic;
+ font-weight: 700;
+ src: url('../fonts/roboto-v27-latin-700italic.eot'); /* IE9 Compat Modes */
+ src:
+ local(''),
+ /* IE6-IE8 */ url('../fonts/roboto-v27-latin-700italic.eot?#iefix') format('embedded-opentype'),
+ /* Super Modern Browsers */ url('../fonts/roboto-v27-latin-700italic.woff2') format('woff2'),
+ /* Modern Browsers */ url('../fonts/roboto-v27-latin-700italic.woff') format('woff'),
+ /* Safari, Android, iOS */ url('../fonts/roboto-v27-latin-700italic.ttf') format('truetype'),
+ /* Legacy iOS */ url('../fonts/roboto-v27-latin-700italic.svg#Roboto') format('svg');
+}
+
+/* source-code-pro-regular - latin */
+@font-face {
+ font-family: 'Source Code Pro';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/source-code-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
+ src:
+ local(''),
+ /* IE6-IE8 */ url('../fonts/source-code-pro-v14-latin-regular.eot?#iefix')
+ format('embedded-opentype'),
+ /* Super Modern Browsers */ url('../fonts/source-code-pro-v14-latin-regular.woff2')
+ format('woff2'),
+ /* Modern Browsers */ url('../fonts/source-code-pro-v14-latin-regular.woff') format('woff'),
+ /* Safari, Android, iOS */ url('../fonts/source-code-pro-v14-latin-regular.ttf')
+ format('truetype'),
+ /* Legacy iOS */ url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro')
+ format('svg');
+}
diff --git a/src/igz-controls/scss/mixins.scss b/src/igz-controls/scss/mixins.scss
new file mode 100644
index 0000000000..60d0e6e847
--- /dev/null
+++ b/src/igz-controls/scss/mixins.scss
@@ -0,0 +1,1231 @@
+@use './colors';
+@use './borders';
+@use './variables';
+
+@mixin fixed {
+ position: fixed;
+ top: 0;
+ left: 0;
+}
+
+@mixin displayFlex {
+ display: flex;
+ flex-grow: 1;
+ flex-shrink: 1;
+}
+
+@mixin tableDet($topPadding, $rightPadding, $bottomPadding, $leftPadding) {
+ padding: $topPadding $rightPadding $bottomPadding $leftPadding;
+ text-align: left;
+}
+
+@mixin detailsMetadataStatisticsTable {
+ &__table {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ align-items: flex-start;
+
+ &-wrapper {
+ min-width: 100%;
+ }
+
+ &-header {
+ position: sticky;
+ top: 0;
+ z-index: 3;
+ display: flex;
+ min-width: 100%;
+ padding: 15px 10px;
+ color: colors.$topaz;
+ font-weight: bold;
+ background-color: colors.$white;
+ border-bottom: borders.$secondaryBorder;
+
+ .header-item {
+ text-transform: capitalize;
+ }
+ }
+
+ &-item {
+ display: flex;
+ align-items: center;
+ min-width: 70px;
+ padding: 0 5px;
+ }
+
+ &-row {
+ display: flex;
+ flex-direction: row;
+ min-width: 100%;
+ height: 45px;
+ border-bottom: borders.$secondaryBorder;
+ }
+ }
+}
+
+@mixin detailsItem {
+ color: colors.$topaz;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 24px;
+}
+
+@mixin jobsFilter($item, $left) {
+ position: relative;
+ margin-right: 16px;
+
+ &::before {
+ position: absolute;
+ top: 11px;
+ left: $left;
+ color: colors.$topaz;
+ content: $item;
+ }
+
+ &::after {
+ position: absolute;
+ top: 10px;
+ right: 15px;
+ content: url('../images/dropdown.svg');
+ }
+}
+
+@mixin statusState($color, $bordered) {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ min-width: 8px;
+ border-radius: 50%;
+
+ @if $bordered == true {
+ background-color: transparent;
+ border: 1.5px solid $color;
+ } @else {
+ background-color: $color;
+ }
+}
+
+@mixin chipFont($color) {
+ color: $color;
+
+ .item-icon-close {
+ svg {
+ path {
+ fill: $color;
+ }
+ }
+ }
+}
+
+@mixin editableChipFont($fontColor) {
+ color: $fontColor;
+
+ .input-label-key {
+ color: $fontColor;
+ }
+
+ .input-label-value {
+ color: $fontColor;
+ }
+
+ .edit-label-separator {
+ color: $fontColor;
+ }
+
+ .item-icon-close {
+ svg {
+ path {
+ fill: $fontColor;
+ }
+ }
+ }
+}
+
+@mixin chipButtonAddColor($color) {
+ svg {
+ rect,
+ path {
+ fill: $color;
+ }
+ }
+
+ &:hover {
+ svg {
+ rect,
+ path {
+ fill: colors.$white;
+ }
+ }
+ }
+}
+
+@mixin chipButtonAddBackground($color, $hoverColor) {
+ background-color: $color;
+
+ &:hover {
+ background-color: $hoverColor;
+ }
+}
+
+@mixin chipButtonAddSize($size) {
+ width: $size;
+ height: $size;
+}
+
+@mixin chipBackground($isChipButtonAdd) {
+ @if $isChipButtonAdd == true {
+ &_orange {
+ @include chipButtonAddBackground(colors.$grandisTwo, colors.$sorbus);
+ }
+
+ &_purple {
+ @include chipButtonAddBackground(colors.$amethystTwo, colors.$amethyst);
+ }
+
+ &_green {
+ @include chipButtonAddBackground(colors.$javaTwo, colors.$java);
+ }
+
+ &_grey {
+ @include chipButtonAddBackground(colors.$mulledWineThree, colors.$topaz);
+ }
+ } @else {
+ &_none {
+ background-color: transparent;
+ }
+
+ &_green {
+ background-color: colors.$javaTwo;
+ }
+
+ &_grey {
+ background-color: colors.$mulledWineThree;
+ }
+
+ &_orange {
+ background-color: colors.$grandisTwo;
+ }
+
+ &_purple {
+ background-color: colors.$amethystTwo;
+ }
+
+ &_amethyst {
+ background-color: colors.$amethyst;
+ }
+
+ &_sorbus {
+ background-color: colors.$sorbus;
+ }
+
+ &_java {
+ background-color: colors.$java;
+ }
+ }
+}
+
+@mixin chipBorder() {
+ &_transparent {
+ border: borders.$transparentBorder;
+ }
+
+ &_green {
+ border: borders.$resultsBorder;
+ }
+
+ &_grey {
+ border: borders.$primaryBorder;
+ }
+
+ &_orange {
+ border: borders.$parametersBorder;
+ }
+
+ &_purple {
+ border: borders.$labelBorder;
+ }
+
+ &_primary {
+ border-radius: 4px;
+ }
+
+ &_secondary {
+ border-radius: 20px;
+ }
+}
+
+@mixin chipDensity($isEditMode, $isChipAddButton) {
+ @if $isChipAddButton == true {
+ &_dense {
+ @include chipButtonAddSize(26px);
+ }
+
+ &_normal {
+ @include chipButtonAddSize(32px);
+ }
+
+ &_medium {
+ @include chipButtonAddSize(34px);
+ }
+ } @else {
+ &_dense {
+ height: 26px;
+ }
+
+ &_normal {
+ height: 32px;
+ padding: 8px 15px;
+ }
+
+ &_medium {
+ height: 34px;
+ padding: 8px 15px;
+ font-size: 15px;
+
+ @if $isEditMode == false {
+ .item-icon-close {
+ transform: scale(1.2);
+ }
+ }
+ }
+ }
+}
+
+@mixin chipsFont($component) {
+ @if $component == EditableChip {
+ &_primary {
+ @include editableChipFont(colors.$primary);
+ }
+
+ &_green {
+ @include editableChipFont(colors.$chateauGreen);
+ }
+
+ &_white {
+ @include editableChipFont(colors.$white);
+ }
+
+ &_orange {
+ @include editableChipFont(colors.$sorbus);
+ }
+
+ &_purple {
+ @include editableChipFont(colors.$amethyst);
+ }
+
+ &_disabled {
+ @include editableChipFont(colors.$spunPearl);
+ }
+ } @else if $component == Chip {
+ &_white {
+ @include chipFont(colors.$white);
+ }
+
+ &_green {
+ @include chipFont(colors.$chateauGreen);
+ }
+
+ &_purple {
+ @include chipFont(colors.$amethyst);
+ }
+
+ &_primary {
+ @include chipFont(colors.$primary);
+ }
+
+ &_orange {
+ @include chipFont(colors.$sorbus);
+ }
+ } @else if $component == ButtonAddChip {
+ &_primary {
+ @include chipButtonAddColor(colors.$topaz);
+ }
+
+ &_green {
+ @include chipButtonAddColor(colors.$chateauGreen);
+ }
+
+ &_orange {
+ @include chipButtonAddColor(colors.$sorbus);
+ }
+
+ &_purple {
+ @include chipButtonAddColor(colors.$amethyst);
+ }
+ }
+}
+
+@mixin hiddenChipBlockArrow() {
+ position: absolute;
+ z-index: -10;
+ display: block;
+ width: 12px;
+ height: 12px;
+ background-color: colors.$white;
+ transform: rotate(-45deg);
+ content: '';
+}
+
+@mixin tableColumn($flex) {
+ &_container {
+ display: flex;
+ flex: $flex;
+ align-items: flex-end;
+ height: 100%;
+
+ &_item {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ height: 55px;
+ }
+ }
+}
+
+@mixin tableDisplay($flex) {
+ display: flex;
+ flex: $flex;
+}
+
+@mixin artifactsTableHeader($flex, $lineHeight) {
+ flex: $flex;
+ line-height: $lineHeight;
+}
+
+@mixin tableHeader {
+ background-color: colors.$magnoliaWhite;
+ font-weight: bold;
+ font-size: 14px;
+}
+
+@mixin resetSpaces {
+ margin: 0;
+ padding: 0;
+}
+
+@mixin tableColumnFlex($flex, $minWidth) {
+ flex: $flex;
+ min-width: $minWidth;
+}
+
+@mixin newItemSidePanelTable {
+ position: relative;
+ width: 100%;
+ border-bottom: borders.$primaryBorder;
+
+ .table {
+ &__header {
+ color: colors.$topaz;
+ font-weight: bold;
+ font-size: 18px;
+ line-height: 24px;
+ }
+
+ &__body {
+ display: flex;
+ align-items: flex-end;
+
+ &-column {
+ width: 100%;
+
+ .input {
+ padding: 25px 10px 11px;
+
+ &:not(.input_invalid) {
+ border: none;
+ }
+
+ &__label-floating {
+ left: 10px;
+ }
+ }
+ }
+ }
+
+ &__subheader {
+ text-transform: capitalize;
+ }
+
+ &__cell {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ min-width: 5px;
+ padding: 10px;
+ color: colors.$primary;
+
+ &_disabled {
+ color: colors.$spunPearl;
+ }
+
+ &-checkbox {
+ flex: 0.16;
+ padding: 0;
+
+ svg {
+ margin: 0;
+ }
+ }
+
+ &-actions {
+ width: 44px;
+ max-width: 44px;
+ padding: 0;
+ }
+ }
+
+ &__row {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 55px;
+ border-top: borders.$primaryBorder;
+
+ .tip-container {
+ display: none;
+ }
+
+ &:hover {
+ background-color: colors.$alabaster;
+
+ .table__cell {
+ &-actions {
+ .actions-menu {
+ &__container {
+ display: block;
+
+ .btn {
+ padding: 0;
+ border: none;
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
+
+ .btn_delete {
+ display: block;
+ }
+ }
+
+ .tip-container {
+ display: flex;
+ }
+ }
+
+ &-add-item {
+ display: flex;
+ align-items: center;
+
+ input {
+ border: none;
+ border-radius: unset;
+ }
+ }
+ }
+ }
+
+ .input-row {
+ &-wrapper {
+ display: flex;
+ width: 100%;
+ margin: 0 -1px 0 -1px;
+ border: borders.$primaryBorder;
+
+ .select {
+ flex: 1;
+ margin: 1px 0;
+ padding: 0;
+ border: none;
+
+ &__label {
+ padding: 0;
+ }
+ }
+ }
+
+ &__item {
+ width: 100%;
+ height: 100%;
+
+ &::placeholder {
+ font-style: italic;
+ }
+ }
+ }
+
+ .edit-row {
+ background-color: colors.$alabaster;
+
+ .input {
+ width: 100%;
+ margin: -1px;
+ padding: 10px;
+ border: borders.$primaryBorder;
+ border-radius: 2px;
+
+ &_invalid {
+ border: 1px solid colors.$amaranth;
+ }
+ }
+
+ .border-none {
+ border: none;
+ }
+
+ .table__cell {
+ &_edit {
+ min-width: 175px;
+ padding: 10px 0;
+
+ .select {
+ width: 100%;
+ border-radius: 2px;
+
+ &__value {
+ min-width: unset;
+ }
+
+ &__label {
+ padding-left: 0;
+ }
+ }
+ }
+ }
+ }
+
+ .no-hover {
+ .add-input {
+ padding: 0;
+ }
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+}
+
+@mixin newItemSidePanel {
+ .new-item-side-panel {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ width: 900px;
+ height: 100%;
+ overflow-y: scroll;
+ background-color: colors.$wildSand;
+
+ &-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(colors.$mineshaft, 0.75);
+ }
+
+ &__body {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ }
+
+ &__accordion {
+ margin: 16px 40px 0;
+ background-color: colors.$white;
+ border: borders.$primaryBorder;
+ border-radius: 4px;
+
+ &.accordion__container.open {
+ height: auto;
+
+ .accordion__body {
+ min-height: 100px;
+ overflow: visible;
+ }
+ }
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &:last-child {
+ margin-bottom: 16px;
+ }
+ }
+
+ &__expand-icon {
+ position: absolute;
+ top: 16px;
+ left: -16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ margin: 0;
+ background: colors.$malibu;
+ border-radius: 50%;
+
+ &:hover {
+ background-color: colors.$cornflowerBlue;
+ }
+
+ svg {
+ path {
+ fill: colors.$white;
+ }
+ }
+ }
+
+ &__item {
+ z-index: 1;
+ height: 100%;
+ min-height: 64px;
+ padding: 22px 25px;
+ }
+
+ .input-wrapper {
+ flex: 1;
+ }
+
+ &__buttons-container {
+ display: flex;
+ flex: 0.1;
+ align-items: center;
+ justify-content: flex-end;
+ margin-top: 16px;
+ margin-bottom: 16px;
+ padding: 0 40px;
+ }
+
+ .add-input {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-width: 44px;
+ padding: 10px;
+ color: colors.$cornflowerBlue;
+ font-size: 15px;
+ line-height: 18px;
+
+ svg {
+ width: 20px;
+ height: 20px;
+ }
+
+ rect {
+ fill: colors.$cornflowerBlue;
+ }
+ }
+
+ .disabled {
+ color: colors.$doveGray;
+ cursor: not-allowed;
+ }
+
+ .no-border {
+ border-bottom: none;
+
+ &_top {
+ border-top: none;
+ }
+ }
+
+ .btn {
+ &-add {
+ rect {
+ min-width: 44px;
+ fill: colors.$cornflowerBlue;
+ }
+ }
+
+ &__schedule {
+ margin-top: 16px;
+ margin-left: auto;
+ }
+ }
+ }
+}
+
+@mixin panelTitle {
+ position: relative;
+ margin: 36px 90px 33px 55px;
+
+ .panel-title {
+ &__container {
+ width: 100%;
+ }
+
+ &__input {
+ width: 100%;
+ margin-bottom: 5px;
+ padding: 4px;
+ font-weight: 300;
+ font-size: 36px;
+ line-height: 42px;
+
+ &:disabled {
+ border: none;
+ user-select: none;
+ }
+
+ &-wrapper {
+ user-select: none;
+
+ &::after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ display: block;
+ width: 100%;
+ height: 100%;
+ content: '';
+ }
+ }
+ }
+
+ &__name {
+ margin-bottom: 6px;
+ font-weight: 300;
+ font-size: 36px;
+ line-height: 42px;
+ }
+
+ &__labels {
+ &-container {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+ padding: 0 15px;
+ border: borders.$primaryBorder;
+ border-radius: 4px;
+ }
+
+ &-text {
+ margin-right: 10px;
+ color: colors.$primary;
+ font-size: 15px;
+ line-height: 18px;
+ }
+
+ &-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ width: 650px;
+
+ .chips-wrapper {
+ flex-wrap: wrap;
+ width: 100%;
+
+ .chip_short {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ &__schedule {
+ display: flex;
+ align-items: center;
+ margin-bottom: 18px;
+
+ svg {
+ margin-right: 18px;
+ cursor: pointer;
+ }
+ }
+
+ &__btn_close {
+ position: absolute;
+ top: -20px;
+ right: -75px;
+ height: 24px;
+ }
+ }
+}
+
+@mixin panelSection {
+ .panel-section {
+ &__title {
+ display: flex;
+ margin-bottom: 22px;
+
+ h5 {
+ display: flex;
+ align-items: center;
+ margin: 0;
+ color: colors.$primary;
+ font-weight: bold;
+ font-size: 17px;
+ line-height: 20px;
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
+ }
+ }
+
+ &__body {
+ position: relative;
+ display: flex;
+ flex-flow: row wrap;
+ margin-bottom: 45px;
+ }
+ }
+
+ &:last-child {
+ .panel-section__body {
+ margin-bottom: 0;
+ }
+ }
+}
+
+@mixin schedule {
+ margin: 0 40px;
+
+ .schedule {
+ &-tabs {
+ display: flex;
+ flex: 1;
+
+ &__item {
+ padding: 10px 24px;
+ color: colors.$topaz;
+ font-weight: bold;
+ cursor: pointer;
+
+ &_active {
+ color: colors.$cornflowerBlue;
+ border-bottom: 3px solid colors.$cornflowerBlue;
+ }
+ }
+ }
+
+ &-content {
+ position: relative;
+ padding: 24px;
+ background-color: colors.$white;
+ border: borders.$primaryBorder;
+ border-radius: 4px;
+
+ h3 {
+ color: colors.$primary;
+ text-transform: uppercase;
+ }
+
+ .input {
+ min-width: 230px;
+
+ &-container {
+ display: none;
+ }
+ }
+
+ .select {
+ min-width: 190px;
+ }
+
+ .checkbox-container {
+ display: none;
+ margin: 23px 0;
+ padding: 10px 10px 10px 0;
+ }
+
+ .input-container,
+ .date-picker-container {
+ .input-wrapper {
+ margin-right: 15px;
+ }
+ }
+
+ .cron {
+ &-error {
+ position: relative;
+ display: none;
+ padding: 13px 48px;
+ color: #e54158;
+ background: rgba(colors.$amaranth, 0.1);
+ border: 1px solid colors.$amaranth;
+ border-radius: 2px;
+
+ &.show-error {
+ display: block;
+ }
+
+ .error-icon {
+ position: absolute;
+ top: 10px;
+ left: 15px;
+ width: 24px;
+ height: 24px;
+ padding: 6px;
+ background: colors.$amaranth;
+ border-radius: 15px;
+ }
+ }
+
+ &-string {
+ min-width: 100%;
+ border: borders.$primaryBorder;
+ border-radius: 4px;
+ }
+
+ &-link {
+ display: inline-block;
+ margin: 8px 0;
+ }
+ }
+ }
+ }
+}
+
+@mixin statsAddBorderAndTextColor($border, $textColor) {
+ &.selected {
+ border: $border;
+
+ .stats__counter {
+ color: $textColor;
+ }
+ }
+
+ &:hover {
+ border: $border;
+ }
+}
+
+@mixin stats() {
+ &_total {
+ @include statsAddBorderAndTextColor(borders.$totalBorder, colors.$black);
+ }
+
+ &_running {
+ @include statsAddBorderAndTextColor(borders.$runningBorder, colors.$pictonBlue);
+ }
+
+ &_failed {
+ @include statsAddBorderAndTextColor(borders.$failedBorder, colors.$amaranth);
+ }
+
+ &_completed {
+ @include statsAddBorderAndTextColor(borders.$completedBorder, colors.$brightTurquoise);
+ }
+}
+
+@mixin gradient($type) {
+ @if $type == 'card' {
+ background: linear-gradient(180deg, colors.$brightTurquoise 4px, colors.$white 4px);
+ } @else {
+ background: linear-gradient(88.84deg, #d873e1 5.49%, #fc658f 57.67%, #ffb971 107.73%);
+ }
+}
+
+@mixin fieldWrapper {
+ display: flex;
+ flex: 1;
+ flex-flow: row nowrap;
+ position: relative;
+ width: 100%;
+ color: colors.$primary;
+ background-color: transparent;
+ border: borders.$primaryBorder;
+ border-radius: 4px;
+}
+
+@mixin inputSelectField {
+ position: relative;
+ display: flex;
+ flex-flow: column nowrap;
+ height: 100%;
+ width: 100%;
+
+ &__label {
+ display: flex;
+ align-items: center;
+ margin-bottom: 5px;
+ color: colors.$topaz;
+ font-size: 12px;
+ text-align: left;
+ background-color: transparent;
+
+ &::first-letter {
+ text-transform: uppercase;
+ }
+
+ &-mandatory {
+ color: colors.$amaranth;
+ }
+
+ &-disabled {
+ color: colors.$spunPearl;
+
+ .form-field__label-mandatory {
+ color: colors.$spunPearl;
+ }
+ }
+ }
+
+ &__wrapper {
+ @include fieldWrapper;
+
+ &-disabled {
+ border: borders.$disabledBorder;
+ color: colors.$spunPearl;
+ cursor: not-allowed;
+ }
+
+ &-invalid {
+ border: borders.$errorBorder;
+ }
+
+ &.without-border {
+ border-color: transparent;
+ }
+
+ &-dense {
+ height: variables.$fieldDense;
+ }
+
+ &-normal {
+ height: variables.$fieldNormal;
+ }
+
+ &-medium {
+ height: variables.$fieldMedium;
+ }
+
+ &-chunky {
+ height: variables.$fieldChunky;
+ }
+ }
+
+ &__control {
+ position: relative;
+ display: flex;
+ flex: 1;
+ align-items: center;
+ overflow: hidden;
+ }
+
+ &__icons {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ min-height: 25px;
+
+ & > * {
+ display: flex;
+ align-items: center;
+ padding: 0 4px;
+
+ &:last-child {
+ margin-right: 4px;
+ }
+ }
+ }
+}
+
+@mixin radioCheckReadonly {
+ input {
+ pointer-events: none;
+ opacity: 0.5;
+
+ ~ label,
+ ~ .label {
+ pointer-events: none;
+ opacity: 0.5;
+ }
+ }
+}
+
+@mixin radioCheckField {
+ position: relative;
+ background: colors.$white;
+ border: 1px solid colors.$malibu;
+ color: colors.$malibu;
+ appearance: none;
+ margin: 0;
+ outline: 0;
+ cursor: pointer;
+
+ &:checked {
+ &:hover {
+ color: colors.$cornflowerBlue;
+
+ &:disabled {
+ color: colors.$spunPearl;
+ border-color: currentColor;
+ }
+ }
+ }
+
+ &:disabled {
+ color: colors.$spunPearl;
+ border-color: currentColor;
+ cursor: not-allowed;
+ pointer-events: none;
+
+ &:hover {
+ color: colors.$spunPearl;
+ border-color: currentColor;
+ }
+
+ ~ label,
+ ~ .label {
+ color: colors.$spunPearl;
+ cursor: not-allowed;
+ }
+ }
+
+ @keyframes pulse-animation {
+ 20% {
+ box-shadow: 0 0 0 0 rgba(colors.$cornflowerBlue, 0.5);
+ }
+ 100% {
+ box-shadow: 0 0 0 6px rgba(colors.$cornflowerBlue, 0);
+ }
+ }
+
+ &:not(:disabled) {
+ &:focus,
+ &:active {
+ animation: pulse-animation 0.5s ease-out;
+ }
+
+ &:hover {
+ color: colors.$cornflowerBlue;
+ border-color: currentColor;
+ }
+ }
+
+ ~ label,
+ ~ .label {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ position: relative;
+ cursor: pointer;
+ font-size: 1em;
+ padding: 0 0 0 0.45em;
+ height: inherit;
+ user-select: none;
+ white-space: nowrap;
+ }
+}
+
+//TODO: Delete after removing Textarea and Input and using DRC components
+@mixin fieldWrapperOld {
+ position: relative;
+ width: 100%;
+ padding: 18px 16px;
+ color: #4b4760;
+ background-color: transparent;
+ border: borders.$primaryBorder;
+ border-radius: 4px;
+}
diff --git a/src/igz-controls/scss/shadows.scss b/src/igz-controls/scss/shadows.scss
new file mode 100644
index 0000000000..37f904f397
--- /dev/null
+++ b/src/igz-controls/scss/shadows.scss
@@ -0,0 +1,16 @@
+@use './colors';
+
+$jobsShadow: 0 3px 4px rgba(colors.$black, 0.18);
+$headerShadow: inset 0 -1px 0 #edecef;
+$mainHeaderShadow:
+ 0 2px 4px -1px rgba(colors.$black, 0.2),
+ 0 4px 5px 0 rgba(colors.$black, 0.14),
+ 0 1px 10px 0 rgba(colors.$black, 0.12);
+$filterShadow: 0 4px 8px rgba(colors.$black, 0.23);
+$tooltipShadow: 0 5px 11px rgba(colors.$black, 0.18);
+$hiddenChipsBlockShadow: 2px 2px 8px 2px rgba(colors.$black, 0.2);
+$previewBoxShadowInit: 0px 3px 10px rgba(0, 0, 0, 0.07);
+$previewBoxShadow: 0 2px 10px rgba(colors.$black, 0.2);
+$projectStatisticsShadow: 0 8px 30px rgba(colors.$topaz, 0.08);
+$dropdownShadow: 0 0 30px rgba(colors.$black, 0.15);
+$tablePanelShadow: -3px 0 10px -5px rgba(colors.$black, 0.2);
diff --git a/src/igz-controls/scss/table.scss b/src/igz-controls/scss/table.scss
new file mode 100644
index 0000000000..6b044fa0f7
--- /dev/null
+++ b/src/igz-controls/scss/table.scss
@@ -0,0 +1,283 @@
+@use './variables';
+@use './colors';
+@use './mixins';
+@use './borders';
+@use './shadows';
+
+@mixin tableCellWidth {
+ flex: 0 0 auto;
+ min-width: 75px;
+}
+
+.table {
+ &__flex {
+ display: flex;
+ flex: 1;
+ flex-flow: row wrap;
+ }
+
+ &__content {
+ position: relative;
+ flex: 1;
+
+ [class*='icon'] {
+ flex-wrap: nowrap;
+ }
+
+ .text-bold {
+ font-weight: 500;
+ }
+ }
+
+ &__wrapper {
+ .content & {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 2;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ color: colors.$mulledWine;
+ background-color: colors.$white;
+ }
+ }
+
+ & [class*='table-cell-'] {
+ @include tableCellWidth;
+ }
+
+ .table-row {
+ .table-cell {
+ &-1 {
+ flex: 1;
+ }
+
+ &-2 {
+ flex: 2;
+ }
+
+ &-3 {
+ flex: 3;
+ }
+
+ &-4 {
+ flex: 4;
+ }
+
+ &-5 {
+ flex: 5;
+ }
+
+ &-6 {
+ flex: 6;
+ }
+
+ &-7 {
+ flex: 7;
+ }
+
+ &-8 {
+ flex: 8;
+ }
+
+ &-9 {
+ flex: 9;
+ }
+
+ &-10 {
+ flex: 10;
+ }
+
+ &-extra-small {
+ flex: 1;
+ max-width: 85px;
+ }
+
+ &-small {
+ flex: 1;
+ max-width: 150px;
+ }
+ }
+
+ &:has(.actions-menu__container-active) {
+ background-color: colors.$ghostWhite;
+ }
+ }
+
+ &.table {
+ &__scrolled {
+ .table-cell-name {
+ &::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ width: 5px;
+ background-color: inherit;
+ border-right: borders.$secondaryBorder;
+ box-shadow: 2px 0 2px -1px rgba(colors.$black, 0.2);
+ content: '';
+ }
+ }
+
+ .parent-row_expanded {
+ .row_grouped-by {
+ .table-cell-name {
+ border-right: none;
+ box-shadow: none;
+ }
+ }
+ }
+ }
+ }
+
+ .targets-cell {
+ flex-wrap: nowrap;
+ min-width: 130px;
+
+ svg {
+ margin: 0 5px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+ }
+
+ &__panel-container {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ width: auto;
+ border-left: borders.$primaryBorder;
+ box-shadow: shadows.$tablePanelShadow;
+
+ &.hidden {
+ display: none;
+ }
+ }
+
+ &__panel {
+ height: 100%;
+ overflow: hidden auto;
+ }
+
+ .error-message {
+ justify-content: center;
+ width: 100%;
+ }
+
+ .table {
+ &-header {
+ &__cell {
+ @include tableCellWidth;
+
+ &.buttonPopout,
+ &.buttonDownload {
+ @include mixins.tableColumnFlex(0.5, 80px);
+ }
+
+ &.align-right {
+ justify-content: flex-end;
+ }
+
+ .tip-container {
+ margin-left: 2px;
+ }
+ }
+
+ .icons-container {
+ min-width: 150px;
+ }
+ }
+
+ &-body {
+ color: colors.$mulledWine;
+
+ &__cell {
+ @include tableCellWidth;
+
+ &_hidden {
+ font-size: 0;
+
+ * {
+ visibility: hidden;
+ }
+
+ .chip {
+ visibility: hidden;
+ }
+ }
+
+ .cell_name {
+ position: relative;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ margin: 0;
+ }
+
+ .text_small {
+ min-width: 100%;
+ max-width: 50px;
+ }
+
+ &.align-right {
+ justify-content: flex-end;
+ }
+
+ &_type {
+ display: inline-flex;
+ text-transform: capitalize;
+ }
+
+ a {
+ position: relative;
+ width: 100%;
+ margin: 0;
+ text-decoration: none;
+
+ span {
+ display: block;
+ width: 100%;
+ }
+ }
+
+ i {
+ margin-right: 5px;
+ }
+
+ button {
+ display: flex;
+ font-size: 15px;
+ background-color: transparent;
+ border: none;
+
+ &:disabled {
+ cursor: default;
+ }
+
+ &:not(:disabled) {
+ cursor: pointer;
+ }
+ }
+
+ .path-tooltip {
+ cursor: pointer;
+ }
+
+ .chip_short {
+ max-width: 100px;
+ }
+
+ .alert-icon-cell {
+ display: flex;
+ gap: 4px;
+ align-items: center;
+ }
+ }
+ }
+ }
+}
diff --git a/src/igz-controls/scss/variables.scss b/src/igz-controls/scss/variables.scss
new file mode 100644
index 0000000000..574258529a
--- /dev/null
+++ b/src/igz-controls/scss/variables.scss
@@ -0,0 +1,28 @@
+@use './colors';
+
+$heightRowTable: 55px;
+$leftRowOffset: 49px;
+$mainBorderRadius: 4px;
+$modalBorderRadius: 8px;
+
+$navbarTogglerWidth: 35px;
+
+$headerHeight: 64px;
+
+$primaryTextColor: colors.$primary;
+$secondaryTextColor: colors.$topaz;
+
+$actionsCellWidth: 82px;
+
+// Fields and button heights
+$fieldDense: 36px;
+$fieldNormal: 40px;
+$fieldMedium: 44px;
+$fieldChunky: 48px;
+
+// Table row heights
+$headerRowHeight: 40;
+$headerRowHeightBig: 50;
+$rowHeightSmall: 50;
+$rowHeight: 57;
+$rowHeightExtended: 82;
diff --git a/src/igz-controls/types.js b/src/igz-controls/types.js
new file mode 100644
index 0000000000..fe7d238fff
--- /dev/null
+++ b/src/igz-controls/types.js
@@ -0,0 +1,250 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import PropTypes from 'prop-types'
+
+import {
+ DANGER_BUTTON,
+ DENSITY_CHUNKY,
+ DENSITY_DENSE,
+ DENSITY_MEDIUM,
+ DENSITY_NORMAL,
+ LABEL_BUTTON,
+ MODAL_LG,
+ MODAL_MAX,
+ MODAL_MD,
+ MODAL_MIN,
+ MODAL_SM,
+ PRIMARY_BUTTON,
+ SECONDARY_BUTTON,
+ TERTIARY_BUTTON
+} from './constants'
+
+export const BUTTON_VARIANTS = PropTypes.oneOf([
+ DANGER_BUTTON,
+ LABEL_BUTTON,
+ PRIMARY_BUTTON,
+ SECONDARY_BUTTON,
+ TERTIARY_BUTTON
+])
+
+export const CHIP = PropTypes.shape({
+ delimiter: PropTypes.element,
+ id: PropTypes.string,
+ value: PropTypes.string.isRequired
+})
+
+export const CHIP_INPUT_LIST = PropTypes.arrayOf(
+ PropTypes.shape({
+ disabled: PropTypes.bool,
+ icon: PropTypes.element,
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ subLabel: PropTypes.string,
+ ui: PropTypes.shape({})
+ })
+)
+
+export const DENSITY_OPTIONS = PropTypes.oneOf([
+ DENSITY_DENSE,
+ DENSITY_NORMAL,
+ DENSITY_MEDIUM,
+ DENSITY_CHUNKY
+])
+
+export const CHIP_OPTIONS = PropTypes.shape({
+ background: PropTypes.oneOf([
+ 'amethyst',
+ 'green',
+ 'grey',
+ 'java',
+ 'none',
+ 'orange',
+ 'purple',
+ 'sorbus'
+ ]),
+ boldValue: PropTypes.bool,
+ borderColor: PropTypes.oneOf(['transparent', 'orange', 'green', 'purple', 'grey']),
+ density: DENSITY_OPTIONS,
+ font: PropTypes.oneOf(['primary', 'white', 'green', 'purple', 'orange']),
+ borderRadius: PropTypes.oneOf(['primary', 'secondary'])
+})
+
+export const CHIPS = PropTypes.arrayOf(CHIP)
+
+export const VISIBLE_CHIPS_MAX_LENGTH = PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.oneOf(['all'])
+])
+
+export const POP_UP_CUSTOM_POSITION = PropTypes.shape({
+ element: PropTypes.shape({}),
+ position: PropTypes.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right']),
+ autoHorizontalPosition: PropTypes.bool,
+ autoVerticalPosition: PropTypes.bool
+})
+
+export const MODAL_SIZES = PropTypes.oneOf([MODAL_SM, MODAL_MD, MODAL_LG, MODAL_MIN, MODAL_MAX])
+
+export const CONFIRM_DIALOG_CANCEL_BUTTON = PropTypes.shape({
+ handler: PropTypes.func,
+ label: PropTypes.string.isRequired,
+ variant: PropTypes.string.isRequired
+})
+export const CONFIRM_DIALOG_MESSAGE = PropTypes.oneOfType([PropTypes.element, PropTypes.string])
+export const CONFIRM_DIALOG_SUBMIT_BUTTON = PropTypes.shape({
+ handler: PropTypes.func.isRequired,
+ label: PropTypes.string.isRequired,
+ variant: PropTypes.string.isRequired
+})
+
+export const WIZARD_STEPS_CONFIG = PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ hidden: PropTypes.bool,
+ disabled: PropTypes.bool,
+ nextIsDisabled: PropTypes.bool
+ })
+)
+
+export const INPUT_LINK = PropTypes.shape({
+ show: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+ url: PropTypes.string
+})
+
+export const SELECT_OPTION = PropTypes.shape({
+ disabled: PropTypes.bool,
+ hidden: PropTypes.bool,
+ icon: PropTypes.element,
+ id: PropTypes.string.isRequired,
+ label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+ labelHtml: PropTypes.string,
+ status: PropTypes.string,
+ subLabel: PropTypes.string
+})
+
+export const SELECT_OPTIONS = PropTypes.arrayOf(SELECT_OPTION)
+
+export const INPUT_VALIDATION_RULES = PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ pattern: PropTypes.oneOfType([PropTypes.instanceOf(RegExp), PropTypes.func]).isRequired,
+ isValid: PropTypes.bool
+ })
+)
+
+export const COMBOBOX_SUGGESTION_LIST = PropTypes.arrayOf(
+ PropTypes.shape({
+ customDelimiter: PropTypes.string,
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired
+ })
+)
+
+export const COMBOBOX_VALIDATION_RULES = PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ isValid: PropTypes.bool
+ })
+)
+
+export const COMBOBOX_SELECT_OPTIONS = PropTypes.arrayOf(
+ PropTypes.shape({
+ className: PropTypes.string,
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired
+ })
+)
+
+export const FORM_TABLE_EDITING_ITEM = PropTypes.shape({
+ data: PropTypes.shape({}).isRequired,
+ ui: PropTypes.shape({
+ isNew: PropTypes.bool,
+ index: PropTypes.number.isRequired,
+ fieldsPath: PropTypes.string.isRequired
+ }).isRequired,
+ [PropTypes.string]: PropTypes.any
+})
+
+export const SORT_PROPS = PropTypes.shape({
+ selectedColumnName: PropTypes.string.isRequired,
+ getSortingIcon: PropTypes.func.isRequired,
+ sortTable: PropTypes.func.isRequired
+})
+
+export const ALLOW_SORT_BY = PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.arrayOf(PropTypes.string, PropTypes.number)
+])
+
+export const DEFAULT_SORT_BY = PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+
+export const EXCLUDE_SORT_BY = PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.arrayOf(PropTypes.string, PropTypes.number)
+])
+
+export const DENSITY = PropTypes.oneOf(['dense', 'normal', 'medium', 'chunky'])
+
+export const VIRTUALIZATION_CONFIG = PropTypes.shape({
+ startIndex: PropTypes.number.isRequired,
+ endIndex: PropTypes.number.isRequired,
+ tableBodyPaddingTop: PropTypes.number.isRequired
+})
+
+export const SLIDER_TABS = PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ tip: PropTypes.string,
+ hidden: PropTypes.bool
+ })
+)
+
+export const DETAILS_MENU = PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ hidden: PropTypes.bool
+ })
+)
+
+export const ACTION_BUTTON = PropTypes.shape({
+ disabled: PropTypes.bool,
+ hidden: PropTypes.bool,
+ label: PropTypes.string.isRequired,
+ onClick: PropTypes.func.isRequired,
+ tooltip: PropTypes.string,
+ variant: PropTypes.string
+})
+
+const ACTIONS_MENU_ITEM = PropTypes.shape({
+ label: PropTypes.string.isRequired,
+ icon: PropTypes.object,
+ onClick: PropTypes.func.isRequired,
+ disabled: PropTypes.bool,
+ className: PropTypes.string
+})
+
+export const ACTIONS_MENU = PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.arrayOf(ACTIONS_MENU_ITEM.isRequired)),
+ PropTypes.func
+])
diff --git a/src/igz-controls/utils/chips.util.js b/src/igz-controls/utils/chips.util.js
new file mode 100644
index 0000000000..d473de5bd1
--- /dev/null
+++ b/src/igz-controls/utils/chips.util.js
@@ -0,0 +1,116 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+import { roundFloats } from './common.util'
+
+const chipOptions = [
+ {
+ type: 'labels',
+ boldValue: false,
+ background: 'purple',
+ borderColor: 'transparent',
+ density: 'dense',
+ font: 'purple',
+ borderRadius: 'primary'
+ },
+ {
+ type: 'metrics',
+ boldValue: false,
+ background: 'grey',
+ borderColor: 'transparent',
+ borderRadius: 'primary',
+ density: 'dense',
+ font: 'primary'
+ },
+ {
+ type: 'parameters',
+ boldValue: false,
+ background: 'orange',
+ borderColor: 'transparent',
+ borderRadius: 'primary',
+ density: 'dense',
+ font: 'orange'
+ },
+ {
+ type: 'results',
+ boldValue: false,
+ background: 'grey',
+ borderColor: 'transparent',
+ borderRadius: 'primary',
+ density: 'dense',
+ font: 'primary'
+ },
+ {
+ type: 'relations',
+ boldValue: false,
+ background: 'orange',
+ borderColor: 'transparent',
+ borderRadius: 'primary',
+ density: 'dense',
+ font: 'orange'
+ },
+ {
+ type: 'requirements',
+ boldValue: false,
+ background: 'grey',
+ borderColor: 'transparent',
+ borderRadius: 'primary',
+ density: 'dense',
+ font: 'primary'
+ },
+ {
+ type: 'code_type',
+ boldValue: false,
+ background: 'purple',
+ borderColor: 'transparent',
+ density: 'dense',
+ font: 'purple',
+ borderRadius: 'primary'
+ }
+]
+
+export const getChipOptions = variant => chipOptions.find(item => item.type === variant)
+
+export const cutChips = (chips = [], maxLength, delimiter) => {
+ if (chips.length > maxLength) {
+ let hiddenChipsNumber = `+ ${chips.length - maxLength}`
+ const hiddenChips = chips.slice(maxLength).map(value => ({ value, delimiter }))
+ const visibleChips = chips.slice(0, maxLength).map(value => ({ value, delimiter }))
+ visibleChips.push({
+ value: hiddenChipsNumber,
+ delimiter
+ })
+
+ return {
+ visibleChips,
+ hiddenChips
+ }
+ }
+ return {
+ visibleChips: chips.map(value => ({ value, delimiter }))
+ }
+}
+
+export const getChipLabelAndValue = chip => {
+ const indexOfDelimiter = chip.value.indexOf(':')
+ const value = chip.value.slice(indexOfDelimiter + 1)
+
+ return {
+ chipLabel: indexOfDelimiter > 0 ? chip.value.slice(0, indexOfDelimiter) : chip.value,
+ chipValue: indexOfDelimiter > 0 ? (Number.isInteger(value) ? roundFloats(value) : value) : ''
+ }
+}
diff --git a/src/igz-controls/utils/common.util.js b/src/igz-controls/utils/common.util.js
new file mode 100644
index 0000000000..e9db4a6e82
--- /dev/null
+++ b/src/igz-controls/utils/common.util.js
@@ -0,0 +1,226 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import { create } from 'react-modal-promise'
+import { differenceWith, isEqual, get, omit, isEmpty, isNumber } from 'lodash'
+
+import ConfirmDialog from '../components/ConfirmDialog/ConfirmDialog'
+
+import {
+ DANGER_BUTTON,
+ FORBIDDEN_ERROR_STATUS_CODE,
+ PRIMARY_BUTTON,
+ TERTIARY_BUTTON,
+ VIEW_SEARCH_PARAMETER
+} from '../constants'
+import { setFiltersWasHandled, showWarning } from '../reducers/commonDetailsReducer'
+import { setNotification } from '../reducers/notificationReducer'
+import { showErrorNotification } from './notification.util'
+
+export const openPopUp = (element, props) => {
+ return create(element)(props)
+}
+
+export const openConfirmPopUp = (message, confirmHandler) => {
+ return openPopUp(ConfirmDialog, {
+ cancelButton: {
+ label: 'Cancel',
+ variant: TERTIARY_BUTTON
+ },
+ confirmButton: {
+ label: 'OK',
+ variant: PRIMARY_BUTTON,
+ handler: confirmHandler
+ },
+ header: 'Are you sure?',
+ message
+ })
+}
+
+export const openDeleteConfirmPopUp = (header, message, confirmHandler) => {
+ return openPopUp(ConfirmDialog, {
+ cancelButton: {
+ label: 'Cancel',
+ variant: TERTIARY_BUTTON
+ },
+ confirmButton: {
+ label: 'Delete',
+ variant: DANGER_BUTTON,
+ handler: confirmHandler
+ },
+ header,
+ message
+ })
+}
+
+export const isEveryObjectValueEmpty = obj =>
+ Object.values(obj).every(
+ item => !item || item?.length === 0 || (!isNumber(item) && isEmpty(item))
+ )
+
+// Checks, whether two arrays of objects are equal, can omit some keys if their comparison is not necessary
+export const areArraysEqual = (firstArray, secondArray, omitBy = []) => {
+ if (firstArray.length !== secondArray.length) return false
+
+ return isEmpty(
+ differenceWith(firstArray, secondArray, (a, b) => {
+ return isEqual(omit(a, omitBy), omit(b, omitBy))
+ })
+ )
+}
+
+const commonErrorMessagesMap = {
+ [FORBIDDEN_ERROR_STATUS_CODE]: 'You do not have a permission to view this data'
+}
+
+/**
+ * Get error information from the error object.
+ *
+ * @param {Error} error - The error object.
+ * @returns {string} - The detailed error information.
+ */
+export const getErrorDetail = error => {
+ const errorDetail = get(error, 'response.data.detail', null)
+
+ if (typeof errorDetail === 'string') {
+ return errorDetail
+ } else {
+ return get(errorDetail, 'reason', '')
+ }
+}
+
+/**
+ * Get the error message from the error object or a default error message.
+ *
+ * @param {Error} error - The error object.
+ * @param {string} defaultError - The default error message.
+ * @returns {string} - The error message.
+ */
+export const getErrorMsg = (error, defaultError) => {
+ const errorDetail = getErrorDetail(error)
+ const errorMsg = errorDetail || error.message
+
+ if (
+ (!errorMsg ||
+ errorMsg === 'Not Found' ||
+ errorMsg.startsWith('Request failed with status code')) &&
+ defaultError
+ ) {
+ return defaultError
+ } else {
+ if (commonErrorMessagesMap[error.status]) {
+ return commonErrorMessagesMap[error.status]
+ }
+
+ return errorMsg || ''
+ }
+}
+
+/**
+ * Retrieves the appropriate transition end event name based on the browser.
+ *
+ * @returns {string} The transition end event name.
+ */
+export const getTransitionEndEventName = () => {
+ const transitions = {
+ transition: 'transitionend',
+ OTransition: 'oTransitionEnd',
+ MozTransition: 'transitionend',
+ WebkitTransition: 'webkitTransitionEnd'
+ }
+
+ let bodyStyle = document.body.style
+
+ for (let transition in transitions) {
+ if (bodyStyle[transition] !== undefined) {
+ return transitions[transition]
+ }
+ }
+}
+
+export const getScssVariableValue = variableName => {
+ return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
+}
+
+export const getViewMode = search => {
+ return new URLSearchParams(search).get(VIEW_SEARCH_PARAMETER)?.toLowerCase()
+}
+
+export const performDetailsActionHelper = async (changes, dispatch, filtersWasHandled = false) => {
+ let actionCanBePerformed = Promise.resolve(true)
+
+ if (changes.counter > 0) {
+ actionCanBePerformed = await new Promise(resolve => {
+ const resolver = isSuccess => {
+ window.removeEventListener('discardChanges', resolver)
+ window.removeEventListener('cancelLeave', resolver)
+
+ resolve(isSuccess)
+ }
+
+ window.addEventListener('discardChanges', () => resolver(true))
+ window.addEventListener('cancelLeave', () => resolver(false))
+
+ dispatch(setFiltersWasHandled(filtersWasHandled))
+ dispatch(showWarning(true))
+ })
+ }
+
+ return actionCanBePerformed
+}
+
+export const copyToClipboard = (textToCopy, dispatch) => {
+ if (!navigator.clipboard?.writeText) {
+ return showErrorNotification(
+ dispatch,
+ null,
+ '',
+ 'Copy to clipboard failed due to unsecured connection'
+ )
+ }
+
+ navigator.clipboard
+ .writeText(textToCopy)
+ .then(() => {
+ dispatch(
+ setNotification({
+ status: 200,
+ id: Math.random(),
+ message: 'Copied to clipboard successfully'
+ })
+ )
+ })
+ .catch(error => {
+ showErrorNotification(dispatch, error, '', 'Copy to clipboard failed')
+ })
+}
+
+export const roundFloats = (value, precision) => {
+ if (
+ ((typeof value === 'string' && value.trim() !== '') || typeof value === 'number') &&
+ !isNaN(value)
+ ) {
+ const parsedNum = parseFloat(value)
+
+ return parsedNum % 1 === 0 ? parsedNum : +parsedNum.toFixed(precision ?? 2)
+ }
+
+ return value
+}
+
+export const generateUrlFromRouterPath = link => {
+ return new URL(link, window.location.origin).toString()
+}
diff --git a/src/igz-controls/utils/datetime.util.js b/src/igz-controls/utils/datetime.util.js
new file mode 100644
index 0000000000..fd6bbdc522
--- /dev/null
+++ b/src/igz-controls/utils/datetime.util.js
@@ -0,0 +1,119 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import moment from 'moment'
+
+export function getSupportedLocale() {
+ const SUPPORTED_LOCALES = new Set(['en-GB', 'en-US'])
+
+ const userLocales = navigator.languages || [navigator.language]
+
+ // browser always returns locales in descending order of preference
+ const match = userLocales.find(locale => SUPPORTED_LOCALES.has(locale))
+
+ return match || 'en-US'
+}
+
+export const supportedLocale = getSupportedLocale()
+
+export const formatDatetime = (
+ datetime,
+ invalidDateMessage,
+ options = {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+ },
+ locale = supportedLocale
+) => {
+ if (!datetime) {
+ return invalidDateMessage
+ }
+
+ const date = new Date(datetime)
+
+ if (isNaN(date)) {
+ return invalidDateMessage
+ }
+
+ return typeof date !== 'object' || !(date instanceof Date) || isNaN(date)
+ ? invalidDateMessage
+ : new Intl.DateTimeFormat(locale, {
+ numberingSystem: 'latn',
+ calendar: 'gregory',
+ ...options
+ }).format(date)
+}
+
+export const getFormatTime = time => {
+ const [hour, minute] = time.split(':')
+ if (!minute) {
+ return {
+ hour: '0',
+ minute: '0'
+ }
+ }
+ return {
+ hour: hour.replace(/_/g, '0'),
+ minute: minute.replace(/_/g, '0')
+ }
+}
+
+export const getTimeElapsedByDate = creationDate => {
+ moment.updateLocale('en', {
+ relativeTime: {
+ future: 'in %s',
+ past: '%s ago',
+ s: 'a few seconds',
+ ss: '%d seconds',
+ m: 'a minute',
+ mm: '%d minutes',
+ h: 'an hour',
+ hh: '%d hours',
+ d: 'a day',
+ dd: '%d days',
+ w: 'a week',
+ ww: '%d weeks',
+ M: 'a month',
+ MM: '%d months',
+ y: 'a year',
+ yy: '%d years'
+ }
+ })
+
+ const time = moment.utc(creationDate)
+
+ return time.fromNow()
+}
+
+export const getDateAndTimeByFormat = (date, dateFormat) => {
+ return moment(date).format(dateFormat)
+}
+
+export const sortListByDate = (list = [], field, isAscending = true) => {
+ return [...list].sort((prevElem, nextElem) => {
+ const prev = Date.parse(prevElem[field])
+ const next = Date.parse(nextElem[field])
+
+ return isAscending ? prev - next : next - prev
+ })
+}
diff --git a/src/igz-controls/utils/filter.util.js b/src/igz-controls/utils/filter.util.js
new file mode 100644
index 0000000000..b61623c7df
--- /dev/null
+++ b/src/igz-controls/utils/filter.util.js
@@ -0,0 +1,56 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+const SAVED_PARAMS = 'savedParams'
+
+export const getSavedSearchParams = searchParams => {
+ return atob(new URLSearchParams(searchParams)?.get(SAVED_PARAMS) ?? '') ?? ''
+}
+
+export const saveAndTransformSearchParams = (
+ searchParams,
+ includeSearchParams = false,
+ excludeParamsNames = []
+) => {
+ let newSearchParams = '?'
+
+ if (includeSearchParams) {
+ const filteredNewSearchParams = getFilteredSearchParams(searchParams, excludeParamsNames)
+ newSearchParams = filteredNewSearchParams ? `${filteredNewSearchParams}&` : newSearchParams
+ }
+
+ return searchParams ? `${newSearchParams}${SAVED_PARAMS}=${btoa(searchParams)}` : ''
+}
+
+export const transformSearchParams = params => {
+ return params ? `${SAVED_PARAMS}=${btoa(params)}` : ''
+}
+
+export const getFilteredSearchParams = (searchParams, excludeParamsNames = []) => {
+ const params = new URLSearchParams(searchParams)
+
+ excludeParamsNames.forEach(paramName => params.delete(paramName))
+
+ const newSearchParams = params.toString()
+
+ if (!newSearchParams) return ''
+
+ return `?${newSearchParams}`
+}
diff --git a/src/igz-controls/utils/form.util.js b/src/igz-controls/utils/form.util.js
new file mode 100644
index 0000000000..d1c35e2bd1
--- /dev/null
+++ b/src/igz-controls/utils/form.util.js
@@ -0,0 +1,81 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import { get, isEmpty, isEqual, isNil, mapValues, set, some } from 'lodash'
+
+export const setFieldState = (args, state) => {
+ let fieldName = args[0]
+ let states = args[1]
+ let field = state.fields[fieldName]
+
+ if (field) {
+ for (let stateName in states) {
+ set(field, stateName, states[stateName])
+ }
+ }
+}
+
+export const areFormValuesChanged = (initialValues, values) => {
+ const replacer = (key, value) => {
+ if (value === '') {
+ return undefined
+ }
+
+ return value
+ }
+
+ return !isEqual(
+ JSON.stringify(clearObjectFromEmptyArrayElements(initialValues), replacer),
+ JSON.stringify(clearObjectFromEmptyArrayElements(values), replacer)
+ )
+}
+
+export const generateObjectFromKeyValue = (keyValueList = []) => {
+ return keyValueList.reduce((acc, keyValue) => {
+ acc[keyValue.data.key] = keyValue.data.value
+
+ return acc
+ }, {})
+}
+
+export const parseObjectToKeyValue = (object = {}) => {
+ return Object.entries(object).map(([key, value]) => {
+ return {
+ data: {
+ key,
+ value
+ }
+ }
+ })
+}
+
+export const isSubmitDisabled = formState => {
+ return formState.submitting || (formState.invalid && formState.submitFailed)
+}
+
+const clearObjectFromEmptyArrayElements = (obj = {}) => {
+ return mapValues(obj, objValue => {
+ if (!Array.isArray(objValue)) return objValue
+
+ return clearArrayFromEmptyObjectElements(objValue)
+ })
+}
+
+export const clearArrayFromEmptyObjectElements = (arr = []) => {
+ return arr.filter(arrayElement => {
+ return some(get(arrayElement, 'data', arrayElement), val => !isNil(val) && !isEmpty(val))
+ })
+}
diff --git a/src/igz-controls/utils/generateChipsList.util.js b/src/igz-controls/utils/generateChipsList.util.js
new file mode 100644
index 0000000000..6922d98017
--- /dev/null
+++ b/src/igz-controls/utils/generateChipsList.util.js
@@ -0,0 +1,33 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+export const generateChipsList = (chips, maxLength) => {
+ if (chips.length > maxLength) {
+ let hiddenChipsNumber = `+ ${chips.length - maxLength}`
+ const hiddenChips = chips.slice(maxLength)
+ const visibleChips = chips.slice(0, maxLength)
+
+ return {
+ visibleChips,
+ hiddenChips,
+ hiddenChipsNumber
+ }
+ }
+ return {
+ visibleChips: chips,
+ hiddenChips: []
+ }
+}
diff --git a/src/igz-controls/utils/getFirstScrollableParent.util.js b/src/igz-controls/utils/getFirstScrollableParent.util.js
new file mode 100644
index 0000000000..b6516fe57e
--- /dev/null
+++ b/src/igz-controls/utils/getFirstScrollableParent.util.js
@@ -0,0 +1,48 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+const regex = /(auto|scroll|hidden)/
+
+/**
+ * Retrieves the computed style of a node for the specified CSS property.
+ *
+ * @param {Node} node - The DOM node.
+ * @param {string} prop - The CSS property to retrieve.
+ * @returns {string} The computed style value.
+ */
+const style = (node, prop) => getComputedStyle(node, null).getPropertyValue(prop)
+
+/**
+ * Checks if the given node has a scrollable overflow.
+ *
+ * @param {Node} node - The DOM node.
+ * @returns {boolean} Returns true if the node has a scrollable overflow, false otherwise.
+ */
+const scroll = node =>
+ regex.test(style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x'))
+
+/**
+ * Finds the first scrollable parent node of the given node.
+ *
+ * @param {Node} node - The DOM node.
+ * @returns {Node} The first scrollable parent node.
+ */
+export const getFirstScrollableParent = node =>
+ !node || node === document.body
+ ? document.body
+ : scroll(node)
+ ? node
+ : getFirstScrollableParent(node.parentNode)
diff --git a/src/igz-controls/utils/index.js b/src/igz-controls/utils/index.js
new file mode 100644
index 0000000000..1fe00bf993
--- /dev/null
+++ b/src/igz-controls/utils/index.js
@@ -0,0 +1,27 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+export * as chips from './chips.util'
+export * as common from './common.util'
+export * as datetime from './datetime.util'
+export * as filter from './filter.util'
+export * as form from './form.util'
+export * as generateChipsList from './generateChipsList.util'
+export * as math from './math.util'
+export * as notification from './notification.util'
+export * as string from './string.util'
+export * as validation from './validation.util'
diff --git a/src/igz-controls/utils/math.util.js b/src/igz-controls/utils/math.util.js
new file mode 100644
index 0000000000..86bcce1862
--- /dev/null
+++ b/src/igz-controls/utils/math.util.js
@@ -0,0 +1,42 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+/**
+ * Performs a floating-point arithmetic operation on two numbers.
+ *
+ * @param {number} num1 - The first operand.
+ * @param {number} num2 - The second operand.
+ * @param {string} operator - The operator to use for the operation. Supported operators are '+', and '-'.
+ * @returns {number} The result of the arithmetic operation.
+ */
+export const performFloatOperation = (num1, num2, operator) => {
+ const precision = Math.max(
+ (num1.toString().split('.')[1] || '').length,
+ (num2.toString().split('.')[1] || '').length
+ )
+
+ const multiplier = Math.pow(10, precision)
+
+ switch (operator) {
+ case '+':
+ return (Math.round(num1 * multiplier) + Math.round(num2 * multiplier)) / multiplier
+ case '-':
+ return (Math.round(num1 * multiplier) - Math.round(num2 * multiplier)) / multiplier
+ default:
+ return 0
+ }
+}
diff --git a/src/igz-controls/utils/notification.util.js b/src/igz-controls/utils/notification.util.js
new file mode 100644
index 0000000000..ac9f9b0958
--- /dev/null
+++ b/src/igz-controls/utils/notification.util.js
@@ -0,0 +1,47 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+
+import { setNotification } from '../reducers/notificationReducer'
+import { getErrorMsg } from './common.util'
+import { FORBIDDEN_ERROR_STATUS_CODE } from '../constants'
+
+export const showErrorNotification = (
+ dispatch,
+ error,
+ defaultErrorMsg,
+ customErrorMsg,
+ retryCallback = null,
+ showNotificationCallback = null
+) => {
+ const errorMessage = customErrorMsg || getErrorMsg(error, defaultErrorMsg)
+ const notificationData = {
+ status: error?.response?.status || 400,
+ id: Math.random(),
+ message: errorMessage,
+ error
+ }
+
+ if (retryCallback && error?.response?.status !== FORBIDDEN_ERROR_STATUS_CODE) {
+ notificationData.retry = retryCallback
+ }
+
+ showNotificationCallback?.(errorMessage)
+ dispatch(setNotification(notificationData))
+}
diff --git a/src/igz-controls/utils/string.util.js b/src/igz-controls/utils/string.util.js
new file mode 100644
index 0000000000..93b57a8da5
--- /dev/null
+++ b/src/igz-controls/utils/string.util.js
@@ -0,0 +1,48 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import { isNil, isObject } from 'lodash'
+
+export const truncateUid = (value = '') => (value.length > 7 ? `...${value.slice(-7)}` : value)
+
+export const joinDataOfArrayOrObject = (data, splitCharacter = ',') => {
+ if (isNil(data)) {
+ return ''
+ } else if (Array.isArray(data)) {
+ return data.join(splitCharacter)
+ } else if (isObject(data)) {
+ return Object.values(data).join(splitCharacter)
+ }
+
+ return data.toString()
+}
+
+export const deleteUnsafeHtml = unsafeStr => {
+ return unsafeStr.replace(/[&<>"'()\][]/g, '')
+}
+
+export const trimSplit = (value, delimiter) => {
+ const trimmed = (value ?? '').trim()
+ return trimmed ? trimmed.split(delimiter) : []
+}
+
+export const splitTrim = (value, delimiter) => {
+ const arr = value.split(delimiter)
+ return arr.map(string => string.trim())
+}
diff --git a/src/igz-controls/utils/validation.util.js b/src/igz-controls/utils/validation.util.js
new file mode 100644
index 0000000000..91324f97cd
--- /dev/null
+++ b/src/igz-controls/utils/validation.util.js
@@ -0,0 +1,467 @@
+/*
+Copyright 2022 Iguazio Systems Ltd.
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import lodash, { isEmpty } from 'lodash'
+
+import { validation as ValidationConstants } from '../constants'
+
+////// PRIVATE METHODS ///////
+
+/**
+ * Converts characters string to readable format
+ * Note: converts Hyphens to En Dashes, replaces one space with comma and space,
+ * replaces letter `s` with `spaces` word
+ * @param {string} chars - characters to convert
+ * @returns {string} - converted string
+ * @example
+ * convertToLabel('a-z A-Z - _ *');
+ * // => 'a–z, A–Z, –, _, *'
+ */
+const convertToLabel = chars => {
+ return chars.replace(/-/g, '–').replace(/\s/g, ', ').replace(/\bs\b/, 'spaces')
+}
+
+/**
+ * Converts characters string to valid RegExp string that will be placed into RegExp pattern
+ * @param {string} chars - characters to convert
+ * @returns {string} - converted string
+ * @example
+ * convertToPattern('a-z A-Z - _ *') => 'a-zA-Z\-\_\*'
+ */
+const convertToPattern = chars => {
+ return chars
+ .split(' ')
+ .map(patternItem => (patternItem.length === 1 ? '\\' + patternItem : patternItem))
+ .join('')
+}
+
+/**
+ * Checks whether there is at least one failed validation rule.
+ * @returns {boolean} `true` in case there is at least one failed validation rule, or `false` otherwise.
+ */
+const hasInvalidRule = newRules => {
+ return lodash.some(newRules, ['isValid', false])
+}
+
+////// PUBLIC METHODS ///////
+
+/**
+ * validate required field value
+ * @param {string} validationMsg Custom validationMsg. Defualt to "Required"
+ * @returns {function} Function that accepts a value and return an array [isFieldValid, validationMsg]
+ */
+
+export const required =
+ (validationMsg = 'Required') =>
+ value => {
+ let isValid = value.trim() !== '' && typeof value === 'string'
+ return [isValid, validationMsg]
+ }
+
+/**
+ * Checks whether there is at least one failed validation rule.
+ * @function checkPatternsValidity
+ * @param {Array} validationRules Array of Validation Rule Objects {name: "", lable: "", pattren: [Function || Regex]}
+ * @param {string} value Field value to check validity
+ * @param {boolean} required Specified if the value should be validated
+ * @returns {Array} [validationRules, isFieldValid] New validationRules With `isValid` property, `true` in case there is at least one failed validation rule, or `false` otherwise.
+ */
+
+export const checkPatternsValidity = (validationRules, value = '', required = true) => {
+ const newRules =
+ !required && isEmpty(value)
+ ? validationRules
+ : validationRules
+ .filter(rule => !rule.async)
+ .map(rule => {
+ return {
+ ...rule,
+ isValid: lodash.isFunction(rule.pattern)
+ ? rule.pattern(value)
+ : /* else, it is a RegExp */ rule.pattern.test(value)
+ }
+ })
+
+ return [newRules, !hasInvalidRule(newRules)]
+}
+
+export const checkPatternsValidityAsync = async (validationRules, value) => {
+ const [newRules] = checkPatternsValidity(validationRules, value)
+ const asyncRules = await Promise.all(
+ validationRules
+ .filter(rule => rule.async)
+ .map(async rule => ({
+ ...rule,
+ isValid: await rule.pattern(value)
+ }))
+ )
+
+ const allRules = newRules.concat(asyncRules)
+
+ return [allRules, !hasInvalidRule(allRules)]
+}
+
+const generateRule = {
+ beginWith: chars => {
+ return {
+ name: ValidationConstants.BEGIN_WITH.NAME,
+ label: ValidationConstants.BEGIN_WITH.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('^[' + convertToPattern(chars) + ']')
+ }
+ },
+ beginNotWith: chars => {
+ return {
+ name: ValidationConstants.BEGIN_NOT_WITH.NAME,
+ label: ValidationConstants.BEGIN_NOT_WITH.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('^[^' + convertToPattern(chars) + ']')
+ }
+ },
+ endWith: chars => {
+ return {
+ name: ValidationConstants.END_WITH.NAME,
+ label: ValidationConstants.END_WITH.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('[' + convertToPattern(chars) + ']$')
+ }
+ },
+ endNotWith: chars => {
+ return {
+ name: ValidationConstants.END_NOT_WITH.NAME,
+ label: ValidationConstants.END_NOT_WITH.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('[^' + convertToPattern(chars) + ']$')
+ }
+ },
+ beginEndWith: (chars, labelPrefix = '') => {
+ const convertedPattern = convertToPattern(chars)
+
+ return {
+ name: ValidationConstants.BEGIN_END_WITH.NAME,
+ label: labelPrefix + ValidationConstants.BEGIN_END_WITH.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('^([' + convertedPattern + '].*)?[' + convertedPattern + ']$')
+ }
+ },
+ beginEndNotWith: chars => {
+ const convertedPattern = convertToPattern(chars)
+
+ return {
+ name: ValidationConstants.BEGIN_END_NOT_WITH.NAME,
+ label: ValidationConstants.BEGIN_END_NOT_WITH.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('^([^' + convertedPattern + '].*)?[^' + convertedPattern + ']$')
+ }
+ },
+ onlyAtTheBeginning: chars => {
+ const convertedPattern = convertToPattern(chars)
+
+ return {
+ name: ValidationConstants.ONLY_AT_THE_BEGINNING.NAME,
+ label: ValidationConstants.ONLY_AT_THE_BEGINNING.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('^([' + convertedPattern + '])?[^' + convertedPattern + ']+$')
+ }
+ },
+ validCharacters: (chars, labelPrefix = '') => {
+ return {
+ name: ValidationConstants.VALID_CHARACTERS.NAME,
+ label:
+ labelPrefix + ValidationConstants.VALID_CHARACTERS.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('^[' + convertToPattern(chars) + ']+$')
+ }
+ },
+ validCharactersWithPrefix: chars => {
+ return {
+ name: ValidationConstants.VALID_CHARACTERS_WITH_REFIX.NAME,
+ label: ValidationConstants.VALID_CHARACTERS_WITH_REFIX.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp(
+ '^([' + convertToPattern(chars) + ']+/)?[' + convertToPattern(chars) + ']+$'
+ )
+ }
+ },
+ noConsecutiveCharacters: chars => {
+ const convertedPattern = chars
+ .split(' ')
+ .map(charPair => {
+ const charsPairArray = charPair.split('')
+
+ return `(?!.*\\${charsPairArray[0]}\\${charsPairArray[1]})`
+ })
+ .join('')
+
+ return {
+ name: ValidationConstants.NO_CONSECUTIVE_CHARACTER.NAME,
+ label: ValidationConstants.NO_CONSECUTIVE_CHARACTER.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('^' + convertedPattern)
+ }
+ },
+ notContainCharacters: chars => {
+ return {
+ name: ValidationConstants.NOT_CONTAIN.NAME,
+ label: ValidationConstants.NOT_CONTAIN.LABEL + ': ' + convertToLabel(chars),
+ pattern: new RegExp('^[^' + convertToPattern(chars) + ']+$')
+ }
+ },
+ maxLengthBetweenDelimiters: (delimiter, maxLength, delimiterDescription) => {
+ return {
+ name: 'labelsLength',
+ label: `Max length between two ${lodash.defaultTo(
+ delimiterDescription,
+ delimiter
+ )}: ${maxLength}`,
+ pattern: value => {
+ return value.split(delimiter).every(item => {
+ return item.length >= 1 && item.length <= maxLength
+ })
+ }
+ }
+ },
+ mustNotBe: words => {
+ const wordsArray = words.split(' ')
+
+ return {
+ name: ValidationConstants.MUST_NOT_BE.NAME,
+ label: ValidationConstants.MUST_NOT_BE.LABEL + ': ' + convertToLabel(words),
+ pattern: function (value) {
+ return !lodash.includes(wordsArray, value)
+ }
+ }
+ },
+ length: (options, labelPrefix = '') => {
+ const min = Number.isSafeInteger(options.min) ? options.min : 0
+ const max = Number.isSafeInteger(options.max) ? options.max : ''
+
+ if (min || max) {
+ const label =
+ 'Length – ' +
+ (min ? 'min: ' + options.min + '\xa0\xa0' : '') +
+ (max ? 'max: ' + options.max : '')
+
+ return {
+ name: 'length',
+ label: labelPrefix + label,
+ pattern: new RegExp('^[\\S\\s]{' + min + ',' + max + '}$')
+ }
+ }
+ },
+ required: () => {
+ return {
+ name: ValidationConstants.REQUIRED.NAME,
+ label: ValidationConstants.REQUIRED.LABEL,
+ pattern: new RegExp('\\S')
+ }
+ }
+}
+
+const commonRules = {
+ prefixedQualifiedName: [
+ {
+ name: 'nameValidCharacters',
+ label: `[Name] ${ValidationConstants.VALID_CHARACTERS.LABEL} : a–z, A–Z, 0–9, –, _, .`,
+ pattern: /^([^/]+\/)?[\w.-]+$/
+ },
+ {
+ name: 'nameBeginEnd',
+ label: `[Name] ${ValidationConstants.BEGIN_END_WITH.LABEL}: a–z, A–Z, 0–9`,
+ pattern: /^([^/]+\/)?([A-Za-z0-9][^/]*)?[A-Za-z0-9]$/
+ },
+ {
+ name: 'nameMaxLength',
+ label: '[Name] Max length - 63 characters',
+ pattern: /^([^/]+\/)?[^/]{1,63}$/
+ },
+ {
+ name: 'prefixValidCharacters',
+ label: `[Prefix] ${ValidationConstants.VALID_CHARACTERS.LABEL}: a–z, 0–9, –, .`,
+ pattern: /^([a-z0-9.-]+\/)?[^/]+$/
+ },
+ {
+ name: 'prefixBeginEnd',
+ label: `[Prefix] ${ValidationConstants.BEGIN_END_WITH.LABEL}: a–z, 0–9`,
+ pattern: /^([a-z0-9]([^/]*[a-z0-9])?\/)?[^/]+$/
+ },
+ {
+ name: 'prefixMaxLength',
+ label: '[Prefix] Max length - 253 characters',
+ pattern: /^(?![^/]{254,}\/)/
+ }
+ ],
+ k8sLabels: {
+ getValue: (withPrefix = false) => {
+ let labelPrefix = withPrefix ? '[Value] ' : ''
+
+ return [
+ generateRule.beginEndWith('a-z A-Z 0-9', labelPrefix),
+ generateRule.length({ max: 63 }, labelPrefix),
+ generateRule.validCharacters('a-z A-Z 0-9 - _ .', labelPrefix)
+ ]
+ }
+ }
+ // email: [
+ // generateRule.beginEndNotWith('@ .'),
+ // {
+ // name: ValidationConstants.MUST_CONTAIN_EXACTLY_ONE.NAME,
+ // label: ValidationConstants.MUST_CONTAIN_EXACTLY_ONE.LABEL + ': @',
+ // pattern: /^[^@]+@[^@]+$/
+ // },
+ // {
+ // name: ValidationConstants.MUST_HAVE_DOT_AFTER_AT.NAME,
+ // label: ValidationConstants.MUST_HAVE_DOT_AFTER_AT.LABEL,
+ // pattern: /@.+\..+$/
+ // }
+ // ]
+}
+
+commonRules.k8sLabels.key = commonRules.prefixedQualifiedName.concat({
+ name: 'prefixNotStart',
+ label: "[Prefix] Must not start with 'kubernetes.io', 'k8s.io'",
+ pattern: /^(?!kubernetes\.io\/)(?!k8s\.io\/)/
+})
+
+const validationRules = {
+ artifact: {
+ name: [
+ generateRule.validCharacters('a-z A-Z 0-9 - _ .'),
+ generateRule.beginEndWith('a-z A-Z 0-9'),
+ generateRule.length({ max: 253 }),
+ generateRule.required()
+ ],
+ labels: {
+ key: [
+ generateRule.notContainCharacters(':'),
+ generateRule.beginEndWith('a-z A-Z 0-9'),
+ generateRule.length({ max: 255 })
+ ],
+ value: [generateRule.beginEndWith('a-z A-Z 0-9'), generateRule.length({ max: 255 })]
+ }
+ },
+ feature: {
+ sets: {
+ tag: [
+ generateRule.validCharacters('a-z A-Z 0-9 - _'),
+ generateRule.beginEndWith('a-z A-Z 0-9'),
+ generateRule.length({ max: 56 })
+ ]
+ },
+ vector: {
+ name: [
+ generateRule.validCharacters('a-z A-Z 0-9 - _ .'),
+ generateRule.beginEndWith('a-z A-Z 0-9'),
+ generateRule.length({ max: 56 }),
+ generateRule.required()
+ ]
+ }
+ },
+ function: {
+ name: [
+ generateRule.validCharacters('a-z 0-9 - .'),
+ generateRule.beginEndWith('a-z 0-9'),
+ generateRule.length({ max: 63 }),
+ generateRule.required()
+ ]
+ },
+ common: {
+ name: [
+ generateRule.validCharacters('a-z A-Z 0-9 - _ .'),
+ generateRule.beginEndWith('a-z A-Z 0-9'),
+ generateRule.length({ max: 63 }),
+ generateRule.required()
+ ],
+ tag: [
+ generateRule.validCharacters('a-z A-Z 0-9 - _ .'),
+ generateRule.beginEndWith('a-z A-Z 0-9'),
+ generateRule.length({ max: 56 })
+ ],
+ combobox: [generateRule.required()]
+ },
+ project: {
+ name: [
+ generateRule.validCharacters('a-z 0-9 -'),
+ generateRule.beginWith('a-z'),
+ generateRule.endWith('a-z 0-9'),
+ generateRule.length({ max: 63 }),
+ generateRule.required()
+ ],
+ labels: {
+ key: commonRules.k8sLabels.key,
+ value: commonRules.k8sLabels.getValue(true)
+ },
+ params: {
+ key: [generateRule.notContainCharacters('s')],
+ value: [generateRule.beginEndNotWith('s')]
+ },
+ secrets: {
+ key: [generateRule.validCharacters('a-z A-Z 0-9 - _ .')]
+ }
+ },
+ nodeSelectors: {
+ key: commonRules.prefixedQualifiedName,
+ value: commonRules.k8sLabels.getValue(false)
+ },
+ environmentVariables: {
+ secretName: [
+ generateRule.validCharacters('a-z A-Z 0-9 - _ .'),
+ generateRule.beginEndWith('a-z A-Z 0-9'),
+ generateRule.noConsecutiveCharacters('.., .–, –.'),
+ generateRule.maxLengthBetweenDelimiters(/[.\-_]/, 63, 'periods'),
+ generateRule.length({ max: 253 }),
+ generateRule.required()
+ ],
+ secretKey: [
+ generateRule.validCharacters('a-z A-Z 0-9 - _ .'),
+ generateRule.beginNotWith('.'),
+ generateRule.length({ max: 253 })
+ ]
+ },
+ job: {
+ label: {
+ key: [
+ generateRule.validCharactersWithPrefix('a-z A-Z 0-9 - _ .'),
+ generateRule.beginEndWith('a-z A-Z 0-9'),
+ generateRule.length({ max: 75 })
+ ],
+ value: generateRule.length({ max: 255 })
+ }
+ }
+}
+
+/**
+ * Returns the list of validation rules for `type`, optionally appending provided additional rules.
+ * @function getValidationRules
+ * @param {string} type - The property path to the list of validation rules.
+ * @param {Array. | Object} [additionalRules] - Additional rules or rule to append.
+ * @returns {Array.} The rule list of type `type` with `additionalRules` appended to it if provided.
+ */
+export const getValidationRules = (type, additionalRules) => {
+ return lodash
+ .chain(validationRules)
+ .get(type)
+ .defaultTo([])
+ .cloneDeep()
+ .concat(lodash.defaultTo(additionalRules, []))
+ .value()
+}
+
+/**
+ * Creates a validation rule to ensure system-defined labels cannot be modified.
+ * @function getInternalLabelsValidationRule
+ * @param {string} internalLabels - An array of defined labels that should not be modified.
+ * @returns {Object} The rule that checks if a value is not in the internal labels.
+ */
+export const getInternalLabelsValidationRule = (internalLabels = []) => {
+ return {
+ name: 'customLabels',
+ label: 'System-defined labels cannot be modified.',
+ pattern: value => {
+ return !internalLabels.includes(value)
+ }
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..117d7385ed
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,35 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "useDefineForClassFields": true,
+
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "moduleDetection": "force",
+ "resolveJsonModule": true,
+
+ "jsx": "react-jsx",
+ "allowJs": true,
+ "checkJs": false,
+
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "forceConsistentCasingInFileNames": true,
+
+ "noEmit": true,
+ "isolatedModules": true,
+ "skipLibCheck": true,
+
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/nextGenComponents/*"],
+ "@igz-controls/*": ["src/igz-controls/nextGenComponents/*"],
+ "igz-controls/*": ["src/igz-controls/*"]
+ }
+ },
+ "include": ["src"],
+ "exclude": ["node_modules", "build", "dist"]
+}
diff --git a/vite.config.mjs b/vite.config.mjs
index b7bb90b568..5b9b2d4121 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -58,12 +58,11 @@ export default defineConfig(({ mode }) => {
alias: {
'igz-controls/nextGenComponents': path.resolve(
__dirname,
- 'node_modules/iguazio.dashboard-react-controls/dist/nextGenComponents/index.mjs'
- ),
- 'igz-controls': path.resolve(
- __dirname,
- 'node_modules/iguazio.dashboard-react-controls/dist'
+ 'src/igz-controls/nextGenComponents/index.ts'
),
+ 'igz-controls/index.css': path.resolve(__dirname, 'src/igz-controls/index.scss'),
+ 'igz-controls': path.resolve(__dirname, 'src/igz-controls'),
+ '@igz-controls': path.resolve(__dirname, 'src/igz-controls/nextGenComponents'),
'@': path.resolve(__dirname, './src/nextGenComponents')
},
dedupe: [
diff --git a/vitest.config.mjs b/vitest.config.mjs
index 58b79fc4b9..dc8cf9032f 100644
--- a/vitest.config.mjs
+++ b/vitest.config.mjs
@@ -3,8 +3,6 @@ import react from '@vitejs/plugin-react-swc'
import svgr from 'vite-plugin-svgr'
import path from 'path'
-const drcDist = path.resolve(__dirname, './node_modules/iguazio.dashboard-react-controls/dist')
-
export default defineConfig({
plugins: [react(), svgr()],
test: {
@@ -13,20 +11,16 @@ export default defineConfig({
setupFiles: './src/setupTests.js',
include: ['src/**/*.{test,spec}.{js,jsx}'],
exclude: ['node_modules', 'build', 'dist'],
- server: {
- deps: {
- inline: ['iguazio.dashboard-react-controls'],
- moduleDirectories: ['node_modules']
- },
- },
alias: [
{ find: /^igz-controls\/images\/(.+)\.svg\?react$/, replacement: path.join(__dirname, 'src/__mocks__/svgMock.jsx') }
],
},
resolve: {
alias: [
- { find: 'igz-controls/nextGenComponents', replacement: path.join(drcDist, 'nextGenComponents/index.mjs') },
- { find: 'igz-controls', replacement: drcDist },
+ { find: 'igz-controls/nextGenComponents', replacement: path.resolve(__dirname, 'src/igz-controls/nextGenComponents/index.ts') },
+ { find: 'igz-controls/index.css', replacement: path.resolve(__dirname, 'src/igz-controls/index.scss') },
+ { find: 'igz-controls', replacement: path.resolve(__dirname, 'src/igz-controls') },
+ { find: '@igz-controls', replacement: path.resolve(__dirname, 'src/igz-controls/nextGenComponents') },
{ find: '@', replacement: path.resolve(__dirname, './src/nextGenComponents') }
]
}