feat: remove selected tab state from status filter button

package.json

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

src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx

@@ -14,7 +14,7 @@
  * 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'
@@ -35,7 +35,8 @@ const AppStatusDetailsChart = ({
 }: AppStatusDetailsChartType) => {
     const history = useHistory()
     const _appDetails = IndexStore.getAppDetails()
-    const [currentFilter, setCurrentFilter] = useState('')
+    const [currentFilter, setCurrentFilter] = useState<string>('all')
+    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>

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

@@ -15,16 +15,12 @@
  */
 
 /* eslint-disable eqeqeq */
-import { useEffect, useState } from 'react'
 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
@@ -72,28 +68,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>
@@ -109,7 +83,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`}
@@ -130,7 +104,7 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
                 name="status-filter-button"
                 initialTab={selectedTab}
                 disabled={false}
-                onChange={handleTabSwitch}
+                onChange={(e) => handleFilterClick(e.target.value)}
             >
                 {displayedInlineFilters.map((filter, index) => (
                     <RadioGroup.Radio

src/Shared/Components/CICDHistory/types.tsx

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