From 4e7c1bd5943eed3a8d5fb8c88efc1583843a7730 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 28 Apr 2025 16:45:48 +0530
Subject: [PATCH 1/5] feat: add new expand small icon and update constants for
 tenant installation

---
 src/Assets/IconV2/ic-expand-sm.svg  | 3 +++
 src/Common/Constants.ts             | 1 +
 src/Shared/Components/Icon/Icon.tsx | 2 ++
 3 files changed, 6 insertions(+)
 create mode 100644 src/Assets/IconV2/ic-expand-sm.svg

diff --git a/src/Assets/IconV2/ic-expand-sm.svg b/src/Assets/IconV2/ic-expand-sm.svg
new file mode 100644
index 000000000..8c5411a7c
--- /dev/null
+++ b/src/Assets/IconV2/ic-expand-sm.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#3B444C" d="M13.379 6.295 8.293 11.38a1 1 0 0 0 0 1.414l5.086 5.086c.63.63 1.707.183 1.707-.707V7.002c0-.89-1.077-1.337-1.707-.707Z"/>
+</svg>
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index db6438898..1132c7ffb 100644
--- a/src/Common/Constants.ts
+++ b/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 = {
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index 1b68f10d4..595c7de0d 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/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,

From e6098223c706a4fc49190332a4c62593b35eef62 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 28 Apr 2025 18:07:55 +0530
Subject: [PATCH 2/5] feat: add intermediate state to Toggle component with
 corresponding styles

---
 src/Common/Toggle/Toggle.scss |  6 ++++++
 src/Common/Toggle/Toggle.tsx  | 29 ++++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/Common/Toggle/Toggle.scss b/src/Common/Toggle/Toggle.scss
index ca052aed2..a431bb437 100644
--- a/src/Common/Toggle/Toggle.scss
+++ b/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 {
diff --git a/src/Common/Toggle/Toggle.tsx b/src/Common/Toggle/Toggle.tsx
index 864c3bdd7..6a1e1b249 100644
--- a/src/Common/Toggle/Toggle.tsx
+++ b/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,6 +32,7 @@ const Toggle = ({
     throttleOnChange = false,
     shouldToggleValueOnLabelClick = false,
     isLoading = false,
+    value = CHECKBOX_VALUE.CHECKED,
     ...props
 }) => {
     const [active, setActive] = React.useState(selected)
@@ -70,8 +72,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 +100,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>
     )

From 7395c1a24edd89495c727de0ce73251081711464 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Mon, 28 Apr 2025 23:57:28 +0530
Subject: [PATCH 3/5] feat: enhance Toggle component to support controlled
 state management

---
 src/Common/Toggle/Toggle.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Common/Toggle/Toggle.tsx b/src/Common/Toggle/Toggle.tsx
index 6a1e1b249..8743fc408 100644
--- a/src/Common/Toggle/Toggle.tsx
+++ b/src/Common/Toggle/Toggle.tsx
@@ -33,12 +33,13 @@ const Toggle = ({
     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)
             }
@@ -51,7 +52,11 @@ const Toggle = ({
 
     function handleClick() {
         if (!disabled) {
-            setActive((active) => !active)
+            if (isControlled) {
+                onSelect(!active)
+            } else {
+                setActive((active) => !active)
+            }
         }
     }
 

From b1521b7c810a9fe53dc9c80f59eb089bb2bae4a3 Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Tue, 29 Apr 2025 11:36:43 +0530
Subject: [PATCH 4/5] feat: deprecate debounce function and introduce
 useDebounce hook for improved performance

---
 src/Common/Helper.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Common/Helper.tsx b/src/Common/Helper.tsx
index 76cd26c9d..92908b05f 100644
--- a/src/Common/Helper.tsx
+++ b/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(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
  */

From c1e1bd1ffa5a9bb298345f36d3698a8c7105cb4e Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Tue, 29 Apr 2025 11:43:24 +0530
Subject: [PATCH 5/5] fix: update useRef type in useDebounce hook for better
 type safety

---
 src/Common/Helper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Common/Helper.tsx b/src/Common/Helper.tsx
index 92908b05f..3939fff3d 100644
--- a/src/Common/Helper.tsx
+++ b/src/Common/Helper.tsx
@@ -695,7 +695,7 @@ export const debounce = (func, timeout = 500) => {
 }
 
 export const useDebounce = <Callback extends (...args: any[]) => void>(cb: Callback, delay: number) => {
-    const timeoutId = useRef(null)
+    const timeoutId = useRef<ReturnType<typeof setTimeout>>(null)
 
     return (...args: Parameters<Callback>) => {
         if (timeoutId.current) {