From 755ad00fe738176c1c55e1c82ac7dae16ccc906b Mon Sep 17 00:00:00 2001
From: nikhagra-akamai <nagrawal@akamai.com>
Date: Fri, 6 Dec 2024 14:48:45 +0530
Subject: [PATCH] upcomign: [DI-20929] - Updated types

---
 .../Dashboard/CloudPulseDashboardLanding.tsx    | 16 ++++++++--------
 .../CloudPulseDashboardWithFilters.tsx          | 17 +++++++----------
 .../shared/CloudPulseAppliedFilter.tsx          |  2 +-
 .../shared/CloudPulseAppliedFilterRenderer.tsx  |  7 +++----
 4 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
index 31885ac794b..f402ad54f98 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
@@ -10,9 +10,9 @@ import type { Dashboard, TimeDuration } from '@linode/api-v4';
 
 export type FilterValueType = number | number[] | string | string[] | undefined;
 
-export interface FilterValue {
-  id: { [key: string]: FilterValueType };
-  label: { [key: string]: string[] };
+export interface FilterData {
+  id: { [filterKey: string]: FilterValueType };
+  label: { [filterKey: string]: string[] };
 }
 export interface DashboardProp {
   dashboard?: Dashboard;
@@ -23,7 +23,7 @@ export interface DashboardProp {
 }
 
 export const CloudPulseDashboardLanding = () => {
-  const [filterValue, setFilterValue] = React.useState<FilterValue>({
+  const [filterData, setFilterData] = React.useState<FilterData>({
     id: {},
     label: {},
   });
@@ -42,7 +42,7 @@ export const CloudPulseDashboardLanding = () => {
 
   const onFilterChange = React.useCallback(
     (filterKey: string, filterValue: FilterValueType, labels: string[]) => {
-      setFilterValue((prev: FilterValue) => {
+      setFilterData((prev: FilterData) => {
         return {
           id: {
             ...prev.id,
@@ -60,7 +60,7 @@ export const CloudPulseDashboardLanding = () => {
 
   const onDashboardChange = React.useCallback((dashboardObj: Dashboard) => {
     setDashboard(dashboardObj);
-    setFilterValue({
+    setFilterData({
       id: {},
       label: {},
     }); // clear the filter values on dashboard change
@@ -84,7 +84,7 @@ export const CloudPulseDashboardLanding = () => {
             />
             {dashboard?.service_type && showAppliedFilters && (
               <CloudPulseAppliedFilterRenderer
-                filters={filterValue.label}
+                filters={filterData.label}
                 serviceType={dashboard.service_type}
               />
             )}
@@ -93,7 +93,7 @@ export const CloudPulseDashboardLanding = () => {
       </Grid>
       <CloudPulseDashboardRenderer
         dashboard={dashboard}
-        filterValue={filterValue.id}
+        filterValue={filterData.id}
         timeDuration={timeDuration}
       />
     </Grid>
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
index 5536506ab64..96944b9f95d 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
@@ -17,10 +17,7 @@ import {
 } from '../Utils/ReusableDashboardFilterUtils';
 import { CloudPulseDashboard } from './CloudPulseDashboard';
 
-import type {
-  FilterValue,
-  FilterValueType,
-} from './CloudPulseDashboardLanding';
+import type { FilterData, FilterValueType } from './CloudPulseDashboardLanding';
 import type { TimeDuration } from '@linode/api-v4';
 
 export interface CloudPulseDashboardWithFiltersProp {
@@ -41,8 +38,8 @@ export const CloudPulseDashboardWithFilters = React.memo(
       dashboardId
     );
 
-    const [filterValue, setFilterValue] = React.useState<FilterValue>({
-      id: {},
+    const [filterValue, setFilterValue] = React.useState<FilterData>({
+      filterId: {},
       label: {},
     });
 
@@ -63,8 +60,8 @@ export const CloudPulseDashboardWithFilters = React.memo(
       (filterKey: string, value: FilterValueType, labels: string[]) => {
         setFilterValue((prev) => {
           return {
-            id: {
-              ...prev.id,
+            filterId: {
+              ...prev.filterId,
               [filterKey]: value,
             },
             label: {
@@ -115,7 +112,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
     const isFilterBuilderNeeded = checkIfFilterBuilderNeeded(dashboard);
     const isMandatoryFiltersSelected = checkMandatoryFiltersSelected({
       dashboardObj: dashboard,
-      filterValue: filterValue.id,
+      filterValue: filterValue.filterId,
       resource,
       timeDuration,
     });
@@ -173,7 +170,7 @@ export const CloudPulseDashboardWithFilters = React.memo(
           <CloudPulseDashboard
             {...getDashboardProperties({
               dashboardObj: dashboard,
-              filterValue: filterValue.id,
+              filterValue: filterValue.filterId,
               resource,
               timeDuration,
             })}
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilter.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilter.tsx
index ec0d3cbbb86..4d406c9f732 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilter.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilter.tsx
@@ -1,7 +1,7 @@
 import { Box, Chip, Typography } from '@linode/ui';
 import React from 'react';
 
-interface CloudPulseAppliedFilterProps {
+export interface CloudPulseAppliedFilterProps {
   filters: {
     [label: string]: string[];
   };
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilterRenderer.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilterRenderer.tsx
index ea35136782f..085b1569f90 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilterRenderer.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseAppliedFilterRenderer.tsx
@@ -3,10 +3,9 @@ import React from 'react';
 import { FILTER_CONFIG } from '../Utils/FilterConfig';
 import { CloudPulseAppliedFilter } from './CloudPulseAppliedFilter';
 
-interface AppliedFilterRendererProps {
-  filters: {
-    [label: string]: string[];
-  };
+import type { CloudPulseAppliedFilterProps } from './CloudPulseAppliedFilter';
+
+interface AppliedFilterRendererProps extends CloudPulseAppliedFilterProps {
   serviceType: string;
 }