feat: release tenant mapping

src/Common/Constants.ts

@@ -30,6 +30,7 @@ export const DOCUMENTATION = {
     GLOBAL_CONFIG_BUILD_INFRA: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/global-configurations/build-infra`,
     ENTERPRISE_LICENSE: `${DOCUMENTATION_HOME_PAGE}/enterprise-license`,
     KUBE_CONFIG: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/resource-browser#running-kubectl-commands-locally`,
+    TENANT_INSTALLATION: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/software-distribution-hub/tenants`,
 }
 
 export const PATTERNS = {

src/Common/Helper.tsx

@@ -679,6 +679,7 @@ export const applyCompareDiffOnUneditedDocument = (uneditedDocument: object, edi
 
 /**
  * Returns a debounced variant of the function
+ * @deprecated - It should use useRef instead, pls use useDebounce
  */
 export const debounce = (func, timeout = 500) => {
     let timer
@@ -693,6 +694,17 @@ export const debounce = (func, timeout = 500) => {
     }
 }
 
+export const useDebounce = <Callback extends (...args: any[]) => void>(cb: Callback, delay: number) => {
+    const timeoutId = useRef<ReturnType<typeof setTimeout>>(null)
+
+    return (...args: Parameters<Callback>) => {
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current)
+        }
+        timeoutId.current = setTimeout(() => cb(...args), delay)
+    }
+}
+
 /**
  * Returns a capitalized string with first letter in uppercase and rest in lowercase
  */

src/Common/Toggle/Toggle.scss

@@ -63,6 +63,12 @@
         background-color: var(--white);
         transition: all 0.4s ease;
     }
+
+    &.intermediate::before {
+        width: 0px;
+        height: 0px;
+    }
+
     &.with-icon {
         background-color: var(--bg-primary) !important;
         svg {

src/Common/Toggle/Toggle.tsx

@@ -17,6 +17,7 @@
 import React, { SyntheticEvent, useCallback } from 'react'
 import { Icon as IconComponent } from '@Shared/Components'
 import { throttle, useEffectAfterMount } from '../Helper'
+import { CHECKBOX_VALUE } from '@Common/Types'
 import './Toggle.scss'
 
 const Toggle = ({
@@ -31,12 +32,14 @@ const Toggle = ({
     throttleOnChange = false,
     shouldToggleValueOnLabelClick = false,
     isLoading = false,
+    value = CHECKBOX_VALUE.CHECKED,
+    isControlled = false,
     ...props
 }) => {
     const [active, setActive] = React.useState(selected)
 
     useEffectAfterMount(() => {
-        if (typeof onSelect === 'function') {
+        if (typeof onSelect === 'function' && !isControlled) {
             if (active !== selected) {
                 onSelect(active)
             }
@@ -49,7 +52,11 @@ const Toggle = ({
 
     function handleClick() {
         if (!disabled) {
-            setActive((active) => !active)
+            if (isControlled) {
+                onSelect(!active)
+            } else {
+                setActive((active) => !active)
+            }
         }
     }
 
@@ -70,8 +77,26 @@ const Toggle = ({
         }
     }
 
+    const isIntermediateView = selected && value === CHECKBOX_VALUE.INTERMEDIATE
+
+    const renderIcon = () => {
+        if (isIntermediateView) {
+            return (
+                <div className="w-100 h-100 dc__position-abs flex">
+                    <div className="w-8 h-2 br-4 dc__no-shrink bg__white" />
+                </div>
+            )
+        }
+
+        if (Icon) {
+            return <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />
+        }
+
+        return null
+    }
+
     return isLoading ? (
-        <IconComponent name='ic-circle-loader' color='B500' size={20} />
+        <IconComponent name="ic-circle-loader" color="B500" size={20} />
     ) : (
         <label
             {...props}
@@ -80,8 +105,11 @@ const Toggle = ({
             {...(shouldToggleValueOnLabelClick ? { onClick: handleLabelClick } : {})}
         >
             <input type="checkbox" checked={!!active} onChange={handleChange} className="toggle__input" />
-            <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
-                {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
+            <span
+                className={`toggle__slider ${isIntermediateView ? 'intermediate' : ''} ${Icon ? 'with-icon br-4 dc__border' : 'round'}`}
+                data-testid={dataTestId}
+            >
+                {renderIcon()}
             </span>
         </label>
     )

src/Shared/Components/Icon/Icon.tsx

@@ -44,6 +44,7 @@ import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg'
 import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg'
 import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg'
 import { ReactComponent as ICError } from '@IconsV2/ic-error.svg'
+import { ReactComponent as ICExpandSm } from '@IconsV2/ic-expand-sm.svg'
 import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg'
 import { ReactComponent as ICFileKey } from '@IconsV2/ic-file-key.svg'
 import { ReactComponent as ICFolderUser } from '@IconsV2/ic-folder-user.svg'
@@ -157,6 +158,7 @@ export const iconMap = {
     'ic-ecr': ICEcr,
     'ic-env': ICEnv,
     'ic-error': ICError,
+    'ic-expand-sm': ICExpandSm,
     'ic-failure': ICFailure,
     'ic-file-key': ICFileKey,
     'ic-folder-user': ICFolderUser,