Merge pull request #707 from devtron-labs/feat/app-status-modal

feat: app status modal

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -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 = {
@@ -86,7 +87,6 @@ export const URLS = {
     COMPARE_CLUSTERS: '/compare-clusters',
     APP_CONFIG: 'edit',
     GLOBAL_CONFIG: '/global-config',
-    CONFIG_DRIFT: 'config-drift',
     GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP,
     GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_CREATE: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/create`,
     // NOTE: using appId since we are re-using AppConfig component
@@ -135,6 +135,7 @@ export const ROUTES = {
     ATTRIBUTES_CREATE: 'attributes/create',
     ATTRIBUTES_UPDATE: 'attributes/update',
     APP_LIST_MIN: 'app/min',
+    APP_DETAIL: 'app/detail',
     CLUSTER_LIST_MIN: 'cluster/autocomplete',
     CLUSTER_LIST_RAW: 'k8s/capacity/cluster/list/raw',
     PLUGIN_GLOBAL_LIST_DETAIL_V2: 'plugin/global/list/detail/v2',

src/Assets/IconV2/ic-expand-sm.svg

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 import { preventBodyScroll } from '../../Shared'
 import { VisibleModal } from '../Modals/VisibleModal'
 import './Drawer.scss'

src/Common/Constants.ts

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

src/Common/Drawer/Drawer.tsx

@@ -0,0 +1,2 @@
+export { default as GenericEmptyState } from './GenericEmptyState'
+export { default as GenericFilterEmptyState } from './GenericFilterEmptyState'

src/Common/Drawer/index.ts

@@ -43,6 +43,7 @@ import {
     ToastVariantType,
     versionComparatorBySortOrder,
     WebhookEventNameType,
+    AppType,
 } from '../Shared'
 import { ReactComponent as ArrowDown } from '@Icons/ic-chevron-down.svg'
 import { ReactComponent as ICWebhook } from '@Icons/ic-webhook.svg'
@@ -679,6 +680,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 +695,17 @@ export const debounce = (func, timeout = 500) => {
     }
 }
 
+export const useDebounce = <Callback extends (...args: any[]) => void>(cb: Callback, delay: number) => {
+    const timeoutId = useRef<ReturnType<typeof setTimeout>>(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
  */
@@ -1083,4 +1096,23 @@ export const getTTLInHumanReadableFormat = (ttl: number): string => {
     const humanizedDuration = moment.duration(absoluteTTL, 'seconds').humanize(false)
     // Since moment.js return "a" or "an" for singular values so replacing with 1.
     return humanizedDuration.replace(/^(a|an) /, '1 ');
-}
+}
+
+const getAppTypeCategory = (appType: AppType) => {
+    switch (appType) {
+        case AppType.DEVTRON_APP:
+            return 'DA'
+        case AppType.DEVTRON_HELM_CHART:
+        case AppType.EXTERNAL_HELM_CHART:
+            return 'HA'
+        case AppType.EXTERNAL_ARGO_APP:
+            return 'ACD'
+        case AppType.EXTERNAL_FLUX_APP:
+            return 'FCD'
+        default:
+            return 'DA'
+    }
+}
+
+export const getAIAnalyticsEvents = (context: string, appType?: AppType) =>
+    `AI_${appType ? `${getAppTypeCategory(appType)}_` : ''}${context}`

src/Common/EmptyState/index.ts

@@ -1,8 +1,9 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
 
 import { Tooltip } from '@Common/Tooltip'
 import { Icon } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
+import { getUniqueId } from '@Shared/Helpers'
 
 import { ConditionalWrap } from '../Helper'
 import { COMPONENT_SIZE_TO_ICON_CLASS_MAP, COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP } from './constants'
@@ -24,6 +25,8 @@ const Segment = ({
     size,
     disabled,
 }: SegmentProps) => {
+    const inputId = useMemo(getUniqueId, [])
+
     const { value, icon, isError, label, tooltipProps, ariaLabel } = segment
     const handleChange = () => {
         onChange(segment)
@@ -32,13 +35,13 @@ const Segment = ({
     return (
         <ConditionalWrap key={value} condition={!!tooltipProps?.content} wrap={wrapWithTooltip(tooltipProps)}>
             <div
-                className={`dc__position-rel dc__text-center ${fullWidth ? 'flex-grow-1' : ''}`}
+                className={`dc__position-rel dc__text-center dc__no-shrink ${fullWidth ? 'flex-grow-1' : ''}`}
                 ref={selectedSegmentRef}
             >
                 <input
                     type="radio"
                     value={value}
-                    id={`${name}-${value}`}
+                    id={inputId}
                     name={name}
                     onChange={handleChange}
                     checked={isSelected}
@@ -47,7 +50,7 @@ const Segment = ({
                 />
 
                 <label
-                    htmlFor={`${name}-${value}`}
+                    htmlFor={inputId}
                     className={`pointer m-0 flex ${!fullWidth ? 'left' : ''} dc__gap-4 br-4 segmented-control__segment segmented-control__segment--${size} ${isSelected ? 'fw-6 segmented-control__segment--selected' : 'fw-4'} ${segment.isError ? 'cr-5' : 'cn-9'} ${disabled ? 'cursor-not-allowed' : ''} ${COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP[size]}`}
                     aria-label={ariaLabel}
                 >

src/Common/Helper.tsx

@@ -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 {