feat: remove selected tab state from status filter button

package.json

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

src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { useHistory } from 'react-router-dom'
 import { URLS } from '@Common/Constants'
 import { ReactComponent as InfoIcon } from '../../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as Chat } from '../../../Assets/Icon/ic-chat-circle-dots.svg'
 import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER, NodeFilters } from './types'
 import { StatusFilterButtonComponent } from './StatusFilterButtonComponent'
-import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS, ComponentSizeType } from '../../constants'
+import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS, ComponentSizeType, ALL_RESOURCE_KIND_FILTER } from '../../constants'
 import { IndexStore } from '../../Store'
 import { aggregateNodes } from '../../Helpers'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
@@ -35,7 +35,8 @@ const AppStatusDetailsChart = ({
 }: AppStatusDetailsChartType) => {
     const history = useHistory()
     const _appDetails = IndexStore.getAppDetails()
-    const [currentFilter, setCurrentFilter] = useState('')
+    const [currentFilter, setCurrentFilter] = useState<string>(ALL_RESOURCE_KIND_FILTER)
+    const [flattenedNodes, setFlattenedNodes] = useState([])
 
     const { appId, environmentId: envId } = _appDetails
 
@@ -48,30 +49,35 @@ const AppStatusDetailsChart = ({
         () => aggregateNodes(_appDetails.resourceTree?.nodes || [], _appDetails.resourceTree?.podMetadata || []),
         [_appDetails],
     )
-    const nodesKeyArray = Object.keys(nodes?.nodes || {})
-    let flattenedNodes = []
-    if (nodesKeyArray.length > 0) {
-        for (let index = 0; index < nodesKeyArray.length; index++) {
-            const element = nodes.nodes[nodesKeyArray[index]]
-            // eslint-disable-next-line no-loop-func
-            element.forEach((childElement) => {
-                if (childElement.health) {
-                    flattenedNodes.push(childElement)
-                }
-            })
-        }
-        flattenedNodes.sort(
-            (a, b) =>
-                STATUS_SORTING_ORDER[a.health.status?.toLowerCase()] -
-                STATUS_SORTING_ORDER[b.health.status?.toLowerCase()],
-        )
 
-        if (filterRemoveHealth) {
-            flattenedNodes = flattenedNodes.filter(
-                (node) => node.health.status?.toLowerCase() !== DEPLOYMENT_STATUS.HEALTHY,
+    useEffect(() => {
+        const nodesKeyArray = Object.keys(nodes?.nodes || {})
+        let newFlattenedNodes = []
+        if (nodesKeyArray.length > 0) {
+            for (let index = 0; index < nodesKeyArray.length; index++) {
+                const element = nodes.nodes[nodesKeyArray[index]]
+                // eslint-disable-next-line no-loop-func
+                element.forEach((childElement) => {
+                    if (childElement.health) {
+                        newFlattenedNodes.push(childElement)
+                    }
+                })
+            }
+            newFlattenedNodes.sort(
+                (a, b) =>
+                    STATUS_SORTING_ORDER[a.health.status?.toLowerCase()] -
+                    STATUS_SORTING_ORDER[b.health.status?.toLowerCase()],
             )
+
+            if (filterRemoveHealth) {
+                newFlattenedNodes = newFlattenedNodes.filter(
+                    (node) => node.health.status?.toLowerCase() !== DEPLOYMENT_STATUS.HEALTHY,
+                )
+            }
+
+            setFlattenedNodes(newFlattenedNodes)
         }
-    }
+    }, [`${nodes}`])
 
     function getNodeMessage(kind: string, name: string) {
         if (
@@ -96,7 +102,11 @@ const AppStatusDetailsChart = ({
                 <div className="pt-16 pl-20 pb-8">
                     <div className="flexbox pr-20 w-100">
                         <div>
-                            <StatusFilterButtonComponent nodes={flattenedNodes} handleFilterClick={onFilterClick} />
+                            <StatusFilterButtonComponent
+                                nodes={flattenedNodes}
+                                selectedTab={currentFilter}
+                                handleFilterClick={onFilterClick}
+                            />
                         </div>
                     </div>
                 </div>
@@ -115,7 +125,7 @@ const AppStatusDetailsChart = ({
                         flattenedNodes
                             .filter(
                                 (nodeDetails) =>
-                                    currentFilter === 'all' ||
+                                    currentFilter === ALL_RESOURCE_KIND_FILTER ||
                                     (currentFilter === NodeFilters.drifted && nodeDetails.hasDrift) ||
                                     nodeDetails.health.status?.toLowerCase() === currentFilter,
                             )

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

@@ -15,16 +15,13 @@
  */
 
 /* eslint-disable eqeqeq */
-import { useEffect, useState } from 'react'
+import { ALL_RESOURCE_KIND_FILTER } from '@Shared/constants'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { PopupMenu, StyledRadioGroup as RadioGroup } from '../../../Common'
 import { NodeFilters, NodeStatus, StatusFilterButtonType } from './types'
-import { IndexStore } from '../../Store'
 import './StatusFilterButtonComponent.scss'
 
-export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => {
-    const [selectedTab, setSelectedTab] = useState('all')
-
+export const StatusFilterButtonComponent = ({ nodes, selectedTab, handleFilterClick }: StatusFilterButtonType) => {
     const maxInlineFilterCount = 4
     let allNodeCount: number = 0
     let healthyNodeCount: number = 0
@@ -52,8 +49,12 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
         allNodeCount += 1
     })
 
+    const handleInlineFilterClick = (e) => {
+        handleFilterClick(e.target.value)
+    }
+
     const filterOptions = [
-        { status: 'all', count: allNodeCount, isSelected: selectedTab == 'all' },
+        { status: ALL_RESOURCE_KIND_FILTER, count: allNodeCount, isSelected: selectedTab == ALL_RESOURCE_KIND_FILTER },
         { status: NodeStatus.Missing, count: missingNodeCount, isSelected: NodeStatus.Missing == selectedTab },
         { status: NodeStatus.Degraded, count: failedNodeCount, isSelected: NodeStatus.Degraded == selectedTab },
         {
@@ -76,28 +77,6 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
     const overflowFilters =
         validFilterOptions.length > maxInlineFilterCount ? validFilterOptions.slice(maxInlineFilterCount) : null
 
-    useEffect(() => {
-        if (
-            (selectedTab === NodeStatus.Healthy && healthyNodeCount === 0) ||
-            (selectedTab === NodeStatus.Degraded && failedNodeCount === 0) ||
-            (selectedTab === NodeStatus.Progressing && progressingNodeCount === 0) ||
-            (selectedTab === NodeStatus.Missing && missingNodeCount === 0) ||
-            (selectedTab === NodeFilters.drifted && driftedNodeCount === 0)
-        ) {
-            setSelectedTab('all')
-        } else if (handleFilterClick) {
-            handleFilterClick(selectedTab)
-        } else {
-            IndexStore.updateFilterType(selectedTab.toUpperCase())
-        }
-    }, [nodes, selectedTab])
-
-    const handleTabSwitch = (event): void => {
-        setSelectedTab(event.target.value)
-    }
-
-    const handleMenuOptionClick = (status: string) => () => setSelectedTab(status)
-
     const renderOverflowFilters = () =>
         overflowFilters ? (
             <PopupMenu autoClose>
@@ -113,7 +92,7 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
                             key={filter.status}
                             type="button"
                             className={`dc__transparent w-100 py-6 px-8 flex left dc__gap-8 fs-13 lh-20 fw-4 cn-9 ${filter.isSelected ? 'bcb-1' : 'bcn-0 dc__hover-n50'}`}
-                            onClick={handleMenuOptionClick(filter.status)}
+                            onClick={() => handleFilterClick(filter.status)}
                         >
                             <span
                                 className={`dc__app-summary__icon icon-dim-16 ${filter.status} ${filter.status}--node`}
@@ -134,7 +113,7 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
                 name="status-filter-button"
                 initialTab={selectedTab}
                 disabled={false}
-                onChange={handleTabSwitch}
+                onChange={handleInlineFilterClick}
             >
                 {displayedInlineFilters.map((filter, index) => (
                     <RadioGroup.Radio

src/Shared/Components/CICDHistory/types.tsx

@@ -525,6 +525,7 @@ export interface AppStatusDetailsChartType {
 
 export interface StatusFilterButtonType {
     nodes: Array<Node>
+    selectedTab: string
     handleFilterClick?: (selectedFilter: string) => void
 }
 

src/Shared/constants.tsx

@@ -497,3 +497,5 @@ export const DEFAULT_LOCKED_KEYS_CONFIG: Readonly<ConfigKeysWithLockType> = {
     config: [],
     allowed: false,
 }
+
+export const ALL_RESOURCE_KIND_FILTER = 'all'