chore: sync dev main 44

package.json

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

src/Common/Constants.ts

@@ -223,6 +223,7 @@ export const ROUTES = {
     LICENSE_DATA: 'license/data',
     ENV: 'env',
     APP_METADATA: 'app-metadata',
+    RESOURCE_CONFLICTS_LIST: 'app/:appId/cd-pipeline/:pipelineId/history/:wfrId/helm-ownership-conflicts',
 } as const
 
 export enum KEY_VALUE {

src/Pages-Devtron-2.0/Navigation/index.ts

@@ -0,0 +1 @@
+export * from './types'

src/Pages-Devtron-2.0/Navigation/types.ts

@@ -0,0 +1,116 @@
+import { customEnv, Never } from 'src'
+
+import { IconsProps } from '@Shared/Components'
+
+export type NavigationItemID =
+    | 'application-management-overview'
+    | 'application-management-devtron-applications'
+    | 'application-management-application-groups'
+    | 'application-management-bulk-edit'
+    | 'application-management-application-templates'
+    | 'application-management-projects'
+    | 'application-management-configurations'
+    | 'application-management-policies'
+    | 'infrastructure-management-overview'
+    | 'infrastructure-management-applications'
+    | 'infrastructure-management-chart-store'
+    | 'infrastructure-management-resource-browser'
+    | 'infrastructure-management-resource-watcher'
+    | 'infrastructure-management-catalog-framework'
+    | 'software-release-management-overview'
+    | 'software-release-management-release-hub'
+    | 'software-release-management-tenants'
+    | 'cost-visibility-overview'
+    | 'cost-visibility-cost-breakdown'
+    | 'cost-visibility-configurations'
+    | 'security-center-overview'
+    | 'security-center-security-vulnerabilities'
+    | 'security-center-security-enablement'
+    | 'security-center-security-policy'
+    | 'automation-and-enablement-jobs'
+    | 'automation-and-enablement-alerting'
+    | 'automation-and-enablement-incident-response'
+    | 'automation-and-enablement-api-portal'
+    | 'automation-and-enablement-runbook-automation'
+    | 'global-configuration-sso-login-services'
+    | 'global-configuration-host-urls'
+    | 'global-configuration-external-links'
+    | 'global-configuration-chart-repository'
+    | 'global-configuration-cluster-and-environments'
+    | 'global-configuration-container-oci-registry'
+    | 'global-configuration-authorization'
+    | 'data-protection-overview'
+    | 'data-protection-backup-and-schedule'
+    | 'data-protection-restores'
+    | 'data-protection-backup-repositories'
+    | 'data-protection-backup-locations'
+    | 'data-protection-history-and-logs'
+
+export type NavigationSubMenuItemID =
+    | 'application-management-configurations-gitops'
+    | 'application-management-configurations-git-accounts'
+    | 'application-management-configurations-deployment-charts'
+    | 'application-management-configurations-notifications'
+    | 'application-management-configurations-catalog-frameworks'
+    | 'application-management-configurations-scoped-variables'
+    | 'application-management-configurations-build-infra'
+    | 'application-management-policies-deployment-window'
+    | 'application-management-policies-approval-policy'
+    | 'application-management-policies-plugin-policy'
+    | 'application-management-policies-pull-image-digest'
+    | 'application-management-policies-tag-policy'
+    | 'application-management-policies-filter-conditions'
+    | 'application-management-policies-image-promotion'
+    | 'application-management-policies-lock-deployment-configuration'
+    | 'cost-visibility-cost-breakdown-clusters'
+    | 'cost-visibility-cost-breakdown-environments'
+    | 'cost-visibility-cost-breakdown-projects'
+    | 'cost-visibility-cost-breakdown-applications'
+    | 'global-configuration-authorization-user-permissions'
+    | 'global-configuration-authorization-permission-groups'
+    | 'global-configuration-authorization-api-tokens'
+
+export type NavigationRootItemID =
+    | 'application-management'
+    | 'infrastructure-management'
+    | 'software-release-management'
+    | 'cost-visibility'
+    | 'security-center'
+    | 'automation-and-enablement'
+    | 'data-protection-management'
+    | 'global-configuration'
+
+export type CommonNavigationItemType = {
+    title: string
+    dataTestId: string
+    icon: IconsProps['name']
+    href: string
+    disabled?: boolean
+    keywords?: string[]
+    forceHideEnvKey?: keyof customEnv
+    hideNav?: boolean
+    isAvailableInEA?: boolean
+}
+
+export type NavigationItemType = Pick<
+    CommonNavigationItemType,
+    'dataTestId' | 'title' | 'disabled' | 'keywords' | 'hideNav' | 'forceHideEnvKey' | 'isAvailableInEA'
+> & {
+    id: NavigationItemID
+} & (
+        | (Pick<CommonNavigationItemType, 'icon' | 'href'> & {
+              hasSubMenu?: false
+              subItems?: never
+          })
+        | (Never<Pick<CommonNavigationItemType, 'icon' | 'href'>> & {
+              hasSubMenu: true
+              subItems: (Omit<CommonNavigationItemType, 'icon'> & { id: NavigationSubMenuItemID })[]
+          })
+    )
+
+export interface NavigationGroupType
+    extends Pick<CommonNavigationItemType, 'title' | 'icon' | 'hideNav' | 'forceHideEnvKey' | 'isAvailableInEA'> {
+    id: NavigationRootItemID
+    items: NavigationItemType[]
+    disabled?: boolean
+}

src/Pages-Devtron-2.0/Shared/Overview/components.tsx

@@ -0,0 +1,128 @@
+import { ReactNode, useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import { motion } from 'framer-motion'
+
+import { ConditionalWrap } from '@Common/Helper'
+import { Tooltip } from '@Common/Tooltip'
+import { Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components'
+
+import { MetricsInfoCardProps, SectionEmptyStateProps } from './types'
+
+export const SectionEmptyState = ({
+    iconName = 'ic-priority-medium-fill',
+    iconColor,
+    title,
+    subtitle,
+    buttonConfig,
+}: SectionEmptyStateProps) => (
+    <div className="flex column p-16 dc__gap-12">
+        <Icon name={iconName} size={24} color={iconColor} />
+        <div className="flexbox-col dc__gap-2 fs-13 lh-20">
+            <span className="text-center fw-6 cn-9">{title}</span>
+            {subtitle && <span className="text-center fw-4 cn-8">{subtitle}</span>}
+        </div>
+        {buttonConfig && <Button {...buttonConfig} />}
+    </div>
+)
+
+const navLinkWrap = (redirectionLink: string) => (children: ReactNode) => (
+    <NavLink to={redirectionLink}>{children}</NavLink>
+)
+
+export const MetricsInfoLoadingCard = ({ withSubtitle }: { withSubtitle?: boolean }) => (
+    <div className="flexbox-col br-8 bg__primary border__secondary">
+        <div className="flexbox dc__gap-12 p-16 dc__content-space">
+            <div className="flexbox-col">
+                <span className="h-12 mt-4 mb-4 w-40 shimmer" />
+                <span className="h-24 mt-6 mb-6 w-40 shimmer" />
+            </div>
+            <div className="h-24 w-24 m-6 shimmer" />
+        </div>
+        {withSubtitle && (
+            <div className="border__secondary--top px-16 py-8">
+                <span className="w-100px h-18 shimmer" />
+            </div>
+        )}
+    </div>
+)
+
+export const MetricsInfoCard = ({
+    dataTestId,
+    metricTitle,
+    metricValue,
+    metricUnit,
+    valueOutOf,
+    iconName,
+    subtitle,
+    redirectionLink,
+    tooltipContent,
+    subtitleRedirection,
+}: MetricsInfoCardProps) => {
+    const [isHovering, setIsHovering] = useState(false)
+
+    const handleHoverStart = () => setIsHovering(true)
+    const handleHoverEnd = () => setIsHovering(false)
+
+    return (
+        <ConditionalWrap condition={!!redirectionLink} wrap={navLinkWrap(redirectionLink)}>
+            <motion.div
+                data-testid={dataTestId}
+                onHoverStart={handleHoverStart}
+                onHoverEnd={handleHoverEnd}
+                className={`flexbox-col br-8 bg__primary border__secondary cn-9 ${isHovering ? 'shadow__card--10' : ''}`}
+            >
+                <div className="flexbox dc__gap-12 p-16 dc__content-space">
+                    <div className="flexbox-col">
+                        <Tooltip alwaysShowTippyOnHover content={tooltipContent}>
+                            <span className={`fs-13 fw-4 lh-20 ${isHovering ? 'dc__underline-dotted' : ''}`}>
+                                {metricTitle}
+                            </span>
+                        </Tooltip>
+                        <div className="flexbox dc__gap-4 dc__align-baseline font-ibm-plex-sans">
+                            <span className="fs-24 fw-6 lh-1-5">{metricValue}</span>
+                            {valueOutOf && (
+                                <span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">/ {valueOutOf}</span>
+                            )}
+                            {metricUnit && (
+                                <span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">{metricUnit}</span>
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        {redirectionLink && isHovering ? (
+                            <Button
+                                dataTestId={`redirect-to-${metricTitle}`}
+                                icon={<Icon name="ic-arrow-square-out" color="B500" />}
+                                ariaLabel="redirect"
+                                showAriaLabelInTippy={false}
+                                style={ButtonStyleType.default}
+                                variant={ButtonVariantType.borderLess}
+                            />
+                        ) : (
+                            <Icon size={36} color={null} name={iconName} />
+                        )}
+                    </div>
+                </div>
+                {subtitle && (
+                    <div className="border__secondary--top px-16 py-8">
+                        <ConditionalWrap condition={!!subtitleRedirection} wrap={navLinkWrap(subtitleRedirection)}>
+                            <span className={`fs-13 fw-4 lh-1-5 ${subtitleRedirection ? 'cb-5' : 'cn-7'}`}>
+                                {subtitle}
+                            </span>
+                        </ConditionalWrap>
+                    </div>
+                )}
+            </motion.div>
+        </ConditionalWrap>
+    )
+}
+
+export const LoadingDonutChart = () => (
+    <div className="flex p-20 dc__gap-20 h-200">
+        <div className="dc__border-radius-50-per h-150 w-150 shimmer" />
+        <div className="flexbox-col dc__gap-8">
+            <span className="shimmer w-80px" />
+            <span className="shimmer w-80px" />
+        </div>
+    </div>
+)

src/Pages-Devtron-2.0/Shared/Overview/constants.ts

@@ -0,0 +1,27 @@
+const OVERVIEW_DEFAULT_PAGE_SIZE = {
+    SMALL: 5,
+    MEDIUM: 10,
+    LARGE: 20,
+}
+
+export const OVERVIEW_PAGE_SIZE_OPTIONS = [
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.MEDIUM,
+        selected: true,
+    },
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.LARGE,
+        selected: false,
+    },
+]
+
+export const OVERVIEW_PAGE_SIZE_OPTIONS_SMALL = [
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.SMALL,
+        selected: true,
+    },
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.MEDIUM,
+        selected: false,
+    },
+]

src/Pages-Devtron-2.0/Shared/Overview/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './constants'
+export { type MetricsInfoCardProps, ProdNonProdSelectValueTypes } from './types'

src/Pages-Devtron-2.0/Shared/Overview/types.ts

@@ -0,0 +1,29 @@
+import { ButtonComponentType, ButtonProps, IconName } from '@Shared/Components'
+import { IconBaseColorType } from '@Shared/types'
+
+export interface SectionEmptyStateProps {
+    iconColor?: IconBaseColorType
+    iconName?: IconName
+    title: string
+    subtitle?: string
+    buttonConfig?: ButtonProps<ButtonComponentType>
+}
+
+export interface MetricsInfoCardProps {
+    dataTestId: string
+    metricTitle: string
+    metricValue: string
+    metricUnit?: string
+    valueOutOf?: string
+    iconName: IconName
+    subtitle?: string
+    tooltipContent: string
+    redirectionLink?: string
+    subtitleRedirection?: string
+}
+
+export enum ProdNonProdSelectValueTypes {
+    ALL = 'All',
+    PRODUCTION = 'Prod',
+    NON_PRODUCTION = 'Non-Prod',
+}

src/Pages-Devtron-2.0/Shared/index.ts

@@ -0,0 +1 @@
+export * from './Overview'

src/Pages-Devtron-2.0/index.ts

@@ -2,4 +2,6 @@ export * from './ApplicationManagement'
 export * from './CostVisibility'
 export * from './DataProtectionManagement'
 export * from './InfrastructureManagement'
+export * from './Navigation'
 export * from './SecurityCenter'
+export * from './Shared'

src/Shared/Components/CICDHistory/ConflictedResourcesTable.scss

@@ -0,0 +1,9 @@
+[id*="table__resource-conflict-details"] {
+    .generic-table__row {
+        .generic-table__cell {
+            display: flex;
+            align-items: center;
+            padding: 10px 0;
+        }
+    }
+}