Merge pull request #624 from devtron-labs/feat/migrate-helm-app-main

feat: migrate helm app [Main]

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.0-patch-1",
+    "version": "1.9.0-patch-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -60,7 +60,7 @@
         }
     }
 
-    &.with-menu-button {
+    &.radio-group.with-menu-button {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
 
@@ -69,5 +69,9 @@
             border-top-right-radius: 0 !important;
             border-bottom-right-radius: 0 !important;
         }
+
+        .radio:first-child > .radio__item-label {
+            padding: 2px 4px;
+        }
     }
 }

src/Assets/IconV2/ic-info-filled.svg

@@ -79,13 +79,7 @@ export const StatusFilterButtonComponent = ({
                 disabled={false}
                 onChange={handleInlineFilterClick}
             >
-                <RadioGroup.Radio
-                    key={allResourceKindFilter.status}
-                    value={allResourceKindFilter.status}
-                    tippyPlacement="top"
-                    tippyContent={allResourceKindFilter.status}
-                    tippyClass="w-100 dc__first-letter-capitalize"
-                >
+                <RadioGroup.Radio key={allResourceKindFilter.status} value={allResourceKindFilter.status}>
                     <span className="dc__first-letter-capitalize">{`${allResourceKindFilter.status} (${allResourceKindFilter.count})`}</span>
                 </RadioGroup.Radio>
                 {inlineFilters.map(({ status, count }) => (

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.scss

@@ -16,9 +16,9 @@
 
 import { ReactNode } from 'react'
 import { ComponentSizeType } from '@Shared/constants'
-import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICInfoOutline } from '@Icons/ic-info-outline.svg'
+import { Icon } from '../Icon'
 import { Button, ButtonVariantType } from '../Button'
 import { GenericSectionErrorStateProps } from './types'
 
@@ -35,7 +35,7 @@ const GenericSectionErrorState = ({
 }: GenericSectionErrorStateProps) => {
     const renderMarker = () => {
         if (progressingProps) {
-            return <Progressing {...progressingProps} />
+            return <Icon name="ic-circle-loader" {...progressingProps} />
         }
 
         if (useInfoIcon) {

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

@@ -15,7 +15,7 @@
  */
 
 import { ReactNode } from 'react'
-import { ProgressingProps } from '@Common/Types'
+import { IconsProps } from '../Icon'
 
 export type GenericSectionErrorStateProps = {
     /**
@@ -51,10 +51,10 @@ export type GenericSectionErrorStateProps = {
 } & (
     | {
           /**
-           * If provided, would render the Progressing component with given props instead of error icon
+           * If provided, Icon with ic-circle-loader
            */
-          progressingProps: ProgressingProps
-          useInfoIcon?: never
+          progressingProps: Omit<IconsProps, 'name'>
+          useInfoIcon?: false
       }
     | {
           progressingProps?: never
@@ -63,7 +63,7 @@ export type GenericSectionErrorStateProps = {
            *
            * @default false
            */
-          useInfoIcon: boolean
+          useInfoIcon: true
       }
     | {
           progressingProps?: never

src/Shared/Components/GenericSectionErrorState/GenericSectionErrorState.component.tsx

@@ -40,7 +40,13 @@ const ImageWithFallback = ({ imageProps, fallbackImage }: ImageWithFallbackProps
         // eslint-disable-next-line react/jsx-no-useless-fragment
         <>
             {imageUrl || (!imageUrl && typeof fallbackImage === 'string') ? (
-                <img alt="" {...imageProps} src={imageUrl || (fallbackImage as string)} onError={handleImageError} />
+                <img
+                    loading="lazy"
+                    alt=""
+                    {...imageProps}
+                    src={imageUrl || (fallbackImage as string)}
+                    onError={handleImageError}
+                />
             ) : (
                 fallbackImage
             )}

src/Shared/Components/GenericSectionErrorState/types.ts

@@ -20,7 +20,8 @@ export interface ImageWithFallbackProps {
     /**
      * Props for the image
      */
-    imageProps: ImgHTMLAttributes<HTMLImageElement>
+    imageProps: Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'width'> &
+        Required<Pick<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'width'>>
     /**
      * Fallback image; can be a url or a jsx element
      */

src/Shared/Components/ImageWithFallback/ImageWithFallback.component.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ReactComponent as ICInfoFilled } from '@Icons/ic-info-filled.svg'
 import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
 import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { ReactComponent as ICHelp } from '@Icons/ic-help.svg'
 import { ComponentSizeType } from '@Shared/constants'
 import { ButtonProps } from '../Button'
+import { Icon } from '../Icon'
 import { InfoBlockProps } from './types'
 
 export const VARIANT_TO_BG_MAP: Record<InfoBlockProps['variant'], string> = {
@@ -29,14 +29,16 @@ export const VARIANT_TO_BG_MAP: Record<InfoBlockProps['variant'], string> = {
     information: 'bcb-1 eb-2',
     success: 'bcg-1 eg-2',
     warning: 'bcy-1 ey-2',
+    neutral: 'bcn-1 en-2',
 }
 
 export const VARIANT_TO_ICON_MAP: Record<InfoBlockProps['variant'], InfoBlockProps['customIcon']> = {
     error: <ICError />,
     help: <ICHelp className="fcv-5" />,
-    information: <ICInfoFilled />,
+    information: <Icon name="ic-info-filled" color="B500" />,
     success: <ICSuccess />,
     warning: <ICWarningY5 />,
+    neutral: <Icon name="ic-info-filled" color={null} />,
 }
 
 export const CONTAINER_SIZE_TO_CLASS_MAP: Record<InfoBlockProps['size'], string> = {

src/Shared/Components/ImageWithFallback/types.ts

@@ -17,7 +17,7 @@
 import { ComponentSizeType } from '@Shared/constants'
 import { BorderConfigType, ComponentLayoutType } from '@Shared/types'
 import { ReactElement, ReactNode } from 'react'
-import { ButtonProps } from '../Button'
+import { ButtonComponentType, ButtonProps } from '../Button'
 
 export type InfoBlockProps = {
     /**
@@ -27,7 +27,7 @@ export type InfoBlockProps = {
     /**
      * @default 'information'
      */
-    variant?: 'error' | 'help' | 'information' | 'success' | 'warning'
+    variant?: 'error' | 'help' | 'information' | 'success' | 'warning' | 'neutral'
     /**
      * @default ComponentSizeType.large
      */
@@ -36,7 +36,7 @@ export type InfoBlockProps = {
      * If given would override the default icon derived from type
      */
     customIcon?: ReactElement
-    buttonProps?: ButtonProps
+    buttonProps?: ButtonProps<ButtonComponentType>
     borderConfig?: BorderConfigType
     borderRadiusConfig?: BorderConfigType
 } & (

src/Shared/Components/InfoBlock/constants.tsx

@@ -37,6 +37,8 @@ const ScannedByToolModal: React.FC<ScannedByToolModalProps> = ({
                 src: scanToolUrl,
                 className: 'icon-dim-20-imp',
                 alt: 'scan-tool',
+                height: 20,
+                width: 20,
             }}
             fallbackImage={<ICScanFallback className="icon-dim-20-imp dc__no-shrink" />}
         />

src/Shared/Components/InfoBlock/types.ts

@@ -195,6 +195,8 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
         selectOption(data)
     }
 
+    const iconBaseClass = 'dc__no-shrink icon-dim-16 flex dc__fill-available-space'
+
     return (
         <components.Option {...props}>
             <Tooltip {...getTooltipProps(tooltipProps)}>
@@ -210,9 +212,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                         />
                     )}
                     <div className={`flex left w-100 ${showDescription ? 'top' : ''} dc__gap-8`}>
-                        {startIcon && (
-                            <div className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">{startIcon}</div>
-                        )}
+                        {startIcon && <div className={`${iconBaseClass} mt-2`}>{startIcon}</div>}
                         <div className="flex-grow-1">
                             <Tooltip content={label} placement="right">
                                 <h4
@@ -233,9 +233,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                                     <div className="fs-12 lh-18">{description}</div>
                                 ))}
                         </div>
-                        {endIcon && (
-                            <div className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">{endIcon}</div>
-                        )}
+                        {endIcon && <div className={iconBaseClass}>{endIcon}</div>}
                     </div>
                 </div>
             </Tooltip>