Merge branch 'main' into fix-deployment-stage-logs

Author: Ash-exp

.env

@@ -31,3 +31,4 @@ HIDE_EXCLUDE_INCLUDE_GIT_COMMITS=true
 ENABLE_BUILD_CONTEXT=false
 CLAIR_TOOL_VERSION= 
 ENABLE_RESTART_WORKLOAD=false
+ENABLE_SCOPED_VARIABLES=false

src/assets/icons/ic-file-download.svg

@@ -642,7 +642,7 @@ export default function NodeDetails({
       const _url = `${URLS.RESOURCE_BROWSER}/${clusterId}/${namespace}/pod/${_group}/${name}${
           tab ? `/${tab.toLowerCase()}` : ''
       }`
-      const isAdded = addTab(_group, 'pod', name, _url)
+      const isAdded = addTab(`${_group}_${namespace}`, 'pod', name, _url)
       if (isAdded) {
           updateNodeSelectionData(_nodeSelectionData, _group)
           push(_url)

src/assets/icons/ic-upload-blue.svg

@@ -0,0 +1,39 @@
+import React from 'react'
+import { GridProps } from './types'
+
+// This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up
+export default function Grid({
+    container,
+    spacing = 0,
+    item,
+    xs,
+    containerClass = '',
+    itemClass = '',
+    children,
+}: GridProps) {
+    const containerStyles = container ? { gap: spacing + 'px' } : {}
+
+    if (item) {
+        const getColumnWidth = () => {
+            const percentageWidth = (xs / 12) * 100
+            // DONT CHANGE IT FROM CALC SINCE CALC CONVERTS TO PX which is needed to handle text overflow
+            return `calc(${percentageWidth}%)`
+        }
+
+        const itemStyles = {
+            flex: `1 1 ${getColumnWidth()}`,
+        }
+
+        return (
+            <div className={`p-0 ${itemClass}`} style={itemStyles}>
+                {children}
+            </div>
+        )
+    }
+
+    return (
+        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
+            {children}
+        </div>
+    )
+}

src/components/ClusterNodes/NodeDetails.tsx

@@ -0,0 +1,9 @@
+export interface GridProps {
+    container?: boolean
+    spacing?: number
+    item?: boolean
+    xs?: number
+    containerClass?: string
+    itemClass?: string
+    children?: React.ReactNode
+}

src/components/common/Grid/Grid.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import HiddenInputProps from './types'
+
+export default function HiddenInput({ handleFileUpload, children, id }: HiddenInputProps) {
+    return (
+        <>
+            <input
+                type="file"
+                id={id}
+                accept=".yaml, .yml, .json"
+                style={{
+                    display: 'none',
+                }}
+                onChange={handleFileUpload}
+            />
+
+            <label htmlFor={id} className="flex column center cursor m-0 h-100 w-100">
+                {children}
+            </label>
+        </>
+    )
+}

src/components/common/Grid/types.ts

@@ -0,0 +1,5 @@
+export default interface HiddenInputProps {
+    handleFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => void
+    children?: React.ReactNode
+    id: string
+}

src/components/common/HiddenInput/HiddenInput.tsx

@@ -104,6 +104,18 @@ progress.styled-progress-bar {
     }
 }
 
+progress.styled-progress-bar-error {
+    color: var(--R500);
+
+    &::-webkit-progress-value {
+        background-color: var(--R500);
+    }
+
+    &::-moz-progress-bar {
+        background-color: var(--R500);
+    }
+}
+
 .shortcut-key-badge {
     box-shadow: 0px 1px 0px var(--N200);
 }

src/components/common/HiddenInput/types.ts

@@ -303,14 +303,26 @@ export const StyledSelect = (props: StyledSelectPropsType) => {
     )
 }
 
-export const StyledProgressBar = ({ resetProgress, updateProgressValue }: StyledProgressBarProps) => {
-    const [progressValue, setProgressValue] = useState(0)
+export const StyledProgressBar = ({
+    resetProgress,
+    updateProgressValue,
+    styles,
+    classes,
+    progress,
+}: StyledProgressBarProps) => {
+    const [progressValue, setProgressValue] = useState(progress ?? 0)
     let progressTimer = null
 
     useEffect(() => {
         progressTimer = setInterval(() => {
             setProgressValue((prevValue) => {
                 const _currentValue = prevValue + 1
+                // checking for both null and undefined
+                if (progress != null) {
+                    clearInterval(progressTimer)
+                    return progress
+                }
+
                 if (_currentValue === 100) {
                     clearInterval(progressTimer)
                 }
@@ -328,9 +340,16 @@ export const StyledProgressBar = ({ resetProgress, updateProgressValue }: Styled
                 clearInterval(progressTimer)
             }
         }
-    }, [resetProgress])
+    }, [resetProgress, progress])
 
-    return <progress className="styled-progress-bar" value={progressValue} max={100} />
+    return (
+        <progress
+            className={`styled-progress-bar ${classes ?? ''}`}
+            value={progressValue}
+            max={100}
+            style={styles ? { ...styles } : {}}
+        />
+    )
 }
 
 export const ShortcutKeyBadge = ({ rootClassName, shortcutKey, onClick }: ShortcutKeyBadgeProps) => {