feat: uat changes

Author: Amrit Kashyap Borah

src/Assets/IconV2/ic-stop-circle.svg

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { MutableRefObject, PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { MutableRefObject, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import { Progressing } from '@Common/Progressing'
@@ -61,7 +61,9 @@ const ButtonElement = ({
     // Added the specific class to ensure that the link override is applied
     const linkOrAnchorClassName = `${props.className} button__link ${props.disabled ? 'dc__disable-click' : ''}`
 
-    const refCallback = (el: HTMLButtonElement | HTMLAnchorElement) => {
+    // NOTE: If the ref callback is re-created every render (i.e., not wrapped in useCallback),
+    // it will be invoked on every render: first with null, then with the new node.
+    const refCallback = useCallback((el: HTMLButtonElement | HTMLAnchorElement) => {
         if (!el) {
             return
         }
@@ -73,7 +75,7 @@ const ButtonElement = ({
             // eslint-disable-next-line no-param-reassign
             buttonRef.current = el
         }
-    }
+    }, [])
 
     if (component === ButtonComponentType.link) {
         return (

src/Shared/Components/Button/Button.component.tsx

@@ -143,7 +143,7 @@ const PageHeader = ({
     )
 
     const onAskButtonClick = () => {
-        setSidePanelConfig(() => ({ state: SidePanelTab.ASK_DEVTRON }))
+        setSidePanelConfig((prev) => ({ ...prev, state: SidePanelTab.ASK_DEVTRON }))
     }
 
     const renderLogoutHelpSection = () => (

src/Shared/Components/Header/PageHeader.tsx

@@ -142,6 +142,7 @@ import { ReactComponent as ICSpinny } from '@IconsV2/ic-spinny.svg'
 import { ReactComponent as ICSprayCan } from '@IconsV2/ic-spray-can.svg'
 import { ReactComponent as ICStack } from '@IconsV2/ic-stack.svg'
 import { ReactComponent as ICStamp } from '@IconsV2/ic-stamp.svg'
+import { ReactComponent as ICStopCircle } from '@IconsV2/ic-stop-circle.svg'
 import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
 import { ReactComponent as ICSuspended } from '@IconsV2/ic-suspended.svg'
 import { ReactComponent as ICTata1mg } from '@IconsV2/ic-tata1mg.svg'
@@ -308,6 +309,7 @@ export const iconMap = {
     'ic-spray-can': ICSprayCan,
     'ic-stack': ICStack,
     'ic-stamp': ICStamp,
+    'ic-stop-circle': ICStopCircle,
     'ic-success': ICSuccess,
     'ic-suspended': ICSuspended,
     'ic-tata1mg': ICTata1mg,

src/Shared/Components/Icon/Icon.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TextareaHTMLAttributes, useEffect, useRef, useState } from 'react'
+import { TextareaHTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
 
 import { useThrottledEffect } from '@Common/Helper'
 import {
@@ -25,16 +25,15 @@ import {
 import { deriveBorderRadiusAndBorderClassFromConfig } from '@Shared/Helpers'
 
 import { FormFieldWrapper, getFormFieldAriaAttributes } from '../FormFieldWrapper'
-import { TEXTAREA_CONSTRAINTS } from './constants'
 import { TextareaProps } from './types'
+import { getTextAreaConstraintsForSize } from './utils'
 
 import './textarea.scss'
 
-const { MIN_HEIGHT, AUTO_EXPANSION_MAX_HEIGHT } = TEXTAREA_CONSTRAINTS
-
 const Textarea = ({
     name,
     label,
+    textareaRef: textareaRefProp,
     fullWidth,
     error,
     helperText,
@@ -51,20 +50,37 @@ const Textarea = ({
     hideFormFieldInfo,
     value,
     borderConfig,
+    disableResize,
+    newlineOnShiftEnter = false,
     ...props
 }: TextareaProps) => {
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     // If the passed value remains the same, the component will behave as un-controlled
     // else, it behaves as controlled
     const [text, setText] = useState('')
 
+    const { MIN_HEIGHT, AUTO_EXPANSION_MAX_HEIGHT } = getTextAreaConstraintsForSize(size)
+
     const updateRefsHeight = (height: number) => {
         const refElement = textareaRef.current
         if (refElement) {
             refElement.style.height = `${height}px`
         }
     }
 
+    const refCallback = useCallback((node: HTMLTextAreaElement) => {
+        if (textareaRefProp) {
+            if (typeof textareaRefProp === 'function') {
+                textareaRefProp(node)
+            } else {
+                // eslint-disable-next-line no-param-reassign
+                textareaRefProp.current = node
+            }
+        }
+
+        textareaRef.current = node
+    }, [])
+
     const reInitHeight = () => {
         const currentHeight = parseInt(textareaRef.current.style.height, 10)
         let nextHeight = textareaRef.current.scrollHeight || 0
@@ -116,9 +132,13 @@ const Textarea = ({
     const handleKeyDown: TextareaHTMLAttributes<HTMLTextAreaElement>['onKeyDown'] = (
         event: React.KeyboardEvent<HTMLTextAreaElement>,
     ) => {
-        if ((event.key === 'Enter' && !event.metaKey && !event.ctrlKey) || event.key === 'Escape') {
+        if (event.key === 'Enter' || event.key === 'Escape') {
             event.stopPropagation()
 
+            if (newlineOnShiftEnter && event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault()
+            }
+
             if (event.key === 'Escape') {
                 textareaRef.current.blur()
             }
@@ -163,11 +183,12 @@ const Textarea = ({
                 onBlur={handleBlur}
                 onKeyDown={handleKeyDown}
                 className={`${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[size]} ${COMPONENT_SIZE_TYPE_TO_INLINE_PADDING_MAP[size]} ${deriveBorderRadiusAndBorderClassFromConfig({ borderConfig, borderRadiusConfig })} w-100 dc__overflow-auto textarea`}
-                ref={textareaRef}
+                ref={refCallback}
                 style={{
                     // No max height when user is expanding
                     maxHeight: 'none',
                     minHeight: MIN_HEIGHT,
+                    resize: disableResize ? 'none' : 'vertical',
                 }}
             />
         </FormFieldWrapper>

src/Shared/Components/Textarea/Textarea.component.tsx

@@ -35,9 +35,25 @@ export interface TextareaProps
      *
      * @default ComponentSizeType.large
      */
-    size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
+    size?: Extract<ComponentSizeType, ComponentSizeType.small | ComponentSizeType.medium | ComponentSizeType.large>
     /**
      * Value of the textarea
      */
     value: string
+    /**
+     * If true, the textarea resize is disabled
+     *
+     * @default false
+     */
+    disableResize?: true
+    /**
+     * Allows inserting a newline with Shift + Enter instead of Enter alone.
+     *
+     * When enabled, pressing Enter submits the form, while Shift + Enter inserts a newline.
+     * Useful for forms where Enter should trigger submission, but multiline input is still needed.
+     *
+     * @default false
+     */
+    newlineOnShiftEnter?: boolean
+    textareaRef?: React.MutableRefObject<HTMLTextAreaElement> | React.RefCallback<HTMLTextAreaElement>
 }

src/Shared/Components/Textarea/types.ts

@@ -0,0 +1,15 @@
+import { ComponentSizeType } from '@Shared/constants'
+
+import { TEXTAREA_CONSTRAINTS } from './constants'
+import { TextareaProps } from './types'
+
+export const getTextAreaConstraintsForSize = (size: TextareaProps['size']) => {
+    if (size === ComponentSizeType.small) {
+        return {
+            MIN_HEIGHT: 56,
+            AUTO_EXPANSION_MAX_HEIGHT: 150,
+        }
+    }
+
+    return TEXTAREA_CONSTRAINTS
+}

src/Shared/Components/Textarea/utils.ts

@@ -35,15 +35,10 @@ export enum SidePanelTab {
     ASK_DEVTRON = 'ask-devtron',
 }
 
-export type SidePanelConfig =
-    | {
-          state: SidePanelTab.DOCUMENTATION
-          docLink?: string | null
-      }
-    | {
-          state: SidePanelTab.ASK_DEVTRON | 'closed'
-          docLink?: never
-      }
+export interface SidePanelConfig {
+    state: SidePanelTab | 'closed'
+    docLink?: string | null
+}
 
 export interface MainContext {
     serverMode: SERVER_MODE