feat: app status modal

src/Common/Constants.ts

@@ -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/Common/Drawer/Drawer.tsx

@@ -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/Drawer/index.ts

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

src/Common/Helper.tsx

@@ -679,6 +679,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 +694,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
  */

src/Common/SegmentedControl/Segment.tsx

@@ -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/Toggle/Toggle.scss

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

src/Common/Toggle/Toggle.tsx

@@ -17,6 +17,7 @@
 import React, { SyntheticEvent, useCallback } from 'react'
 import { Icon as IconComponent } from '@Shared/Components'
 import { throttle, useEffectAfterMount } from '../Helper'
+import { CHECKBOX_VALUE } from '@Common/Types'
 import './Toggle.scss'
 
 const Toggle = ({
@@ -31,12 +32,14 @@ const Toggle = ({
     throttleOnChange = false,
     shouldToggleValueOnLabelClick = false,
     isLoading = false,
+    value = CHECKBOX_VALUE.CHECKED,
+    isControlled = false,
     ...props
 }) => {
     const [active, setActive] = React.useState(selected)
 
     useEffectAfterMount(() => {
-        if (typeof onSelect === 'function') {
+        if (typeof onSelect === 'function' && !isControlled) {
             if (active !== selected) {
                 onSelect(active)
             }
@@ -49,7 +52,11 @@ const Toggle = ({
 
     function handleClick() {
         if (!disabled) {
-            setActive((active) => !active)
+            if (isControlled) {
+                onSelect(!active)
+            } else {
+                setActive((active) => !active)
+            }
         }
     }
 
@@ -70,8 +77,26 @@ const Toggle = ({
         }
     }
 
+    const isIntermediateView = selected && value === CHECKBOX_VALUE.INTERMEDIATE
+
+    const renderIcon = () => {
+        if (isIntermediateView) {
+            return (
+                <div className="w-100 h-100 dc__position-abs flex">
+                    <div className="w-8 h-2 br-4 dc__no-shrink bg__white" />
+                </div>
+            )
+        }
+
+        if (Icon) {
+            return <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />
+        }
+
+        return null
+    }
+
     return isLoading ? (
-        <IconComponent name='ic-circle-loader' color='B500' size={20} />
+        <IconComponent name="ic-circle-loader" color="B500" size={20} />
     ) : (
         <label
             {...props}
@@ -80,8 +105,11 @@ const Toggle = ({
             {...(shouldToggleValueOnLabelClick ? { onClick: handleLabelClick } : {})}
         >
             <input type="checkbox" checked={!!active} onChange={handleChange} className="toggle__input" />
-            <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
-                {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
+            <span
+                className={`toggle__slider ${isIntermediateView ? 'intermediate' : ''} ${Icon ? 'with-icon br-4 dc__border' : 'round'}`}
+                data-testid={dataTestId}
+            >
+                {renderIcon()}
             </span>
         </label>
     )

src/Common/index.ts

@@ -32,7 +32,7 @@ export { default as DevtronCopyright } from './DevtronCopyright'
 export * from './DevtronProgressing'
 export * from './Dialogs'
 export * from './DraggableWrapper'
-export * from './Drawer/Drawer'
+export * from './Drawer'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
 export { default as GenericFilterEmptyState } from './EmptyState/GenericFilterEmptyState'
 export { default as ErrorScreenManager } from './ErrorScreenManager'

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -0,0 +1,84 @@
+import { ComponentProps, ReactNode } from 'react'
+
+import { Tooltip } from '@Common/Tooltip'
+
+import { ErrorBar } from '../Error'
+import { ShowMoreText } from '../ShowMoreText'
+import { AppStatus } from '../StatusComponent'
+import AppStatusContent from './AppStatusContent'
+import { APP_STATUS_CUSTOM_MESSAGES } from './constants'
+import { AppStatusBodyProps } from './types'
+import { getAppStatusMessageFromAppDetails } from './utils'
+
+const InfoCardItem = ({ heading, value, isLast = false }: { heading: string; value: ReactNode; isLast?: boolean }) => (
+    <div
+        className={`py-12 px-16 dc__grid dc__column-gap-16 info-card-item ${!isLast ? 'border__secondary--bottom' : ''}`}
+    >
+        <Tooltip content={heading}>
+            <h3 className="cn-9 fs-13 fw-4 lh-1-5 dc__truncate m-0 dc__no-shrink">{heading}</h3>
+        </Tooltip>
+
+        {typeof value === 'string' ? (
+            <ShowMoreText key={`show-more-text-${value}`} textClass="cn-9 fs-13 fw-4 lh-1-5" text={value} />
+        ) : (
+            value
+        )}
+    </div>
+)
+
+export const AppStatusBody = ({ appDetails, type, handleShowConfigDriftModal }: AppStatusBodyProps) => {
+    const appStatus = appDetails.resourceTree?.status?.toUpperCase() || appDetails.appStatus
+    const message = getAppStatusMessageFromAppDetails(appDetails)
+    const customMessage =
+        type === 'stack-manager'
+            ? 'The installation will complete when status for all the below resources become HEALTHY.'
+            : APP_STATUS_CUSTOM_MESSAGES[appDetails.resourceTree?.status?.toUpperCase()]
+
+    const infoCardItems: (Omit<ComponentProps<typeof InfoCardItem>, 'isLast'> & { id: number })[] = [
+        {
+            id: 1,
+            heading: type !== 'stack-manager' ? 'Application Status' : 'Status',
+            value: appStatus ? <AppStatus status={appStatus} /> : '--',
+        },
+        ...(message
+            ? [
+                  {
+                      id: 2,
+                      heading: 'Message',
+                      value: message,
+                  },
+              ]
+            : []),
+        ...(customMessage
+            ? [
+                  {
+                      id: 3,
+                      heading: 'Message',
+                      value: customMessage,
+                  },
+              ]
+            : []),
+    ]
+
+    return (
+        <div className="flexbox-col px-20 dc__gap-16 dc__overflow-auto">
+            {/* Info card */}
+            <div className="flexbox-col pt-20">
+                <div className="flexbox-col br-8 border__primary bg__primary shadow__card--secondary">
+                    {infoCardItems.map((item, index) => (
+                        <InfoCardItem
+                            key={item.id}
+                            heading={item.heading}
+                            value={item.value}
+                            isLast={index === infoCardItems.length - 1}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            <ErrorBar appDetails={appDetails} useParentMargin={false} />
+
+            <AppStatusContent appDetails={appDetails} handleShowConfigDriftModal={handleShowConfigDriftModal} />
+        </div>
+    )
+}

src/Shared/Components/AppStatusModal/AppStatusContent.scss

@@ -0,0 +1,7 @@
+.app-status-content {
+    .app-status-content {
+        &__row {
+            grid-template-columns: 150px 200px 100px auto;
+        }
+    }
+}