[GEN-1977]: improve SSE, and add SSE to UI E2E tests (#1991)

This pull request includes several changes to the frontend web application, focusing on codebase simplification and consistency improvements. The most important changes involve the refactoring of notification types, the use of hooks, and the modification of various components to enhance maintainability and readability. ### Notification Type Refactoring: * Updated notification types to use `NOTIFICATION_TYPE` enum across multiple components for consistency (`frontend/webapp/components/modals/cancel-warning/index.tsx`, `frontend/webapp/components/modals/delete-warning/index.tsx`, `frontend/webapp/containers/main/destinations/add-destination/index.tsx`, `frontend/webapp/containers/main/destinations/destination-form-body/index.tsx`, `frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx`). [[1]](diffhunk://#diff-c197a79280b54ef188b35a5e804a91ff95db0b8137b0f2c7f8dacd545a4f4650L21-R22) [[2]](diffhunk://#diff-4f8fac3da993d379d6710a6607b6f25708649cb2da5b4a5f433f8e62dde1d03fL27-R27) [[3]](diffhunk://#diff-a5ff632e01d3e161b70dce2f959db69fd1893edb484af12b7849810487347001L96-R97) [[4]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL90-R94) [[5]](diffhunk://#diff-759940924dd4ee0c6895f60e21ca040542d9cf1d3f69162677c9983d62b12f8cL77-R77) ### Hook Usage: * Removed `useSSE` hook from `layout.tsx` and added it to `overview/page.tsx` to optimize its usage (`frontend/webapp/app/layout.tsx`, `frontend/webapp/app/(overview)/overview/page.tsx`). [[1]](diffhunk://#diff-788a38ec94bfca9467b13cb6eb93cdeccd4237facfb5fff310e05b3af67413efL4) [[2]](diffhunk://#diff-788a38ec94bfca9467b13cb6eb93cdeccd4237facfb5fff310e05b3af67413efL18-L19) [[3]](diffhunk://#diff-b5ae53796816cc6e1e253bb851d6a2fa404789188ea7964c716ee2ebcbcb776eR4-R13) * Added `useConfig` hook to `page.tsx` and refactored notification logic to use `useNotificationStore` (`frontend/webapp/app/page.tsx`). ### Component Refactoring: * Simplified `AddEntity` component by updating prop names and using `useComputePlatform` hook (`frontend/webapp/components/overview/add-entity/index.tsx`). [[1]](diffhunk://#diff-c2573243562745e61986b398f50211fc364b6391e2a2d792f518a72a86b44ea2R1-R8) [[2]](diffhunk://#diff-c2573243562745e61986b398f50211fc364b6391e2a2d792f518a72a86b44ea2L68-R74) [[3]](diffhunk://#diff-c2573243562745e61986b398f50211fc364b6391e2a2d792f518a72a86b44ea2L94-R94) * Refactored `NotificationManager` component to use `NOTIFICATION_TYPE` and added data attributes for testing (`frontend/webapp/components/notification/notification-manager.tsx`). [[1]](diffhunk://#diff-57b5151297ef94f210fd8223cf1e64f73a19c43cc5f57f94cc74338251942c35L9-R9) [[2]](diffhunk://#diff-57b5151297ef94f210fd8223cf1e64f73a19c43cc5f57f94cc74338251942c35L85-R92) [[3]](diffhunk://#diff-57b5151297ef94f210fd8223cf1e64f73a19c43cc5f57f94cc74338251942c35L129-R129) [[4]](diffhunk://#diff-57b5151297ef94f210fd8223cf1e64f73a19c43cc5f57f94cc74338251942c35L178-R178) ### Import and Type Adjustments: * Consolidated imports and types in various files to improve code readability and maintainability (`frontend/webapp/containers/main/destinations/add-destination/index.tsx`, `frontend/webapp/containers/main/destinations/destination-form-body/index.tsx`, `frontend/webapp/containers/main/destinations/destination-form-body/test-connection/index.tsx`, `frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx`). [[1]](diffhunk://#diff-a5ff632e01d3e161b70dce2f959db69fd1893edb484af12b7849810487347001R5-L13) [[2]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL4-R7) [[3]](diffhunk://#diff-dfeb6d04b2e764197b17375e8347405ed7c67a7d706a34b6a2eaf09582e3b52cL37-R37) [[4]](diffhunk://#diff-f3cd3c3f26599e006f302fa0cafb3d46211d3a0a766cf835013289cde7b63100L6-R21) [[5]](diffhunk://#diff-759940924dd4ee0c6895f60e21ca040542d9cf1d3f69162677c9983d62b12f8cL5-R12) ### Additional Changes: * Added missing imports and adjusted component structures for better alignment with project conventions (`frontend/webapp/components/modals/delete-warning/index.tsx`, `frontend/webapp/containers/main/instrumentation-rules/rule-modal/index.tsx`). [[1]](diffhunk://#diff-4f8fac3da993d379d6710a6607b6f25708649cb2da5b4a5f433f8e62dde1d03fL2-R3) [[2]](diffhunk://#diff-183ce38153926d5ca73d74249c98e035a00de4a376645a10bc098c181636c501R4) [[3]](diffhunk://#diff-183ce38153926d5ca73d74249c98e035a00de4a376645a10bc098c181636c501L61-R62)
odigos-io · Dec 15, 2024 · fc8ed14 · fc8ed14
1 parent 851beb4
commit fc8ed14
Show file tree

Hide file tree

Showing 41 changed files with 238 additions and 277 deletions.
diff --git a/frontend/webapp/app/(overview)/overview/page.tsx b/frontend/webapp/app/(overview)/overview/page.tsx
@@ -1,13 +1,16 @@
 'use client';
 import React from 'react';
 import dynamic from 'next/dynamic';
+import { useSSE } from '@/hooks';
 
 const ToastList = dynamic(() => import('@/components/notification/toast-list'), { ssr: false });
 const AllDrawers = dynamic(() => import('@/components/overview/all-drawers'), { ssr: false });
 const AllModals = dynamic(() => import('@/components/overview/all-modals'), { ssr: false });
 const OverviewDataFlowContainer = dynamic(() => import('@/containers/main/overview/overview-data-flow'), { ssr: false });
 
 export default function MainPage() {
+  useSSE();
+
   return (
     <>
       <ToastList />

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
@@ -1,7 +1,6 @@
 'use client';
 import './globals.css';
 import React from 'react';
-import { useSSE } from '@/hooks';
 import { METADATA } from '@/utils';
 import { ApolloWrapper } from '@/lib';
 import { ThemeProviderWrapper } from '@/styles';
@@ -15,8 +14,6 @@ const LAYOUT_STYLE: React.CSSProperties = {
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  useSSE();
-
   return (
     <html lang='en'>
       <head>

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
@@ -1,20 +1,22 @@
 'use client';
 import { useEffect } from 'react';
+import { useConfig } from '@/hooks';
+import { CenterThis } from '@/styles';
+import { ROUTES, CONFIG } from '@/utils';
+import { NOTIFICATION_TYPE } from '@/types';
 import { useRouter } from 'next/navigation';
-import { useNotify, useConfig } from '@/hooks';
+import { useNotificationStore } from '@/store';
 import { FadeLoader } from '@/reuseable-components';
-import { ROUTES, CONFIG, NOTIFICATION } from '@/utils';
-import { CenterThis } from '@/styles';
 
 export default function App() {
   const router = useRouter();
-  const notify = useNotify();
   const { data, error } = useConfig();
+  const { addNotification } = useNotificationStore();
 
   useEffect(() => {
     if (error) {
-      notify({
-        type: NOTIFICATION.ERROR,
+      addNotification({
+        type: NOTIFICATION_TYPE.ERROR,
         title: error.name,
         message: error.message,
       });

diff --git a/frontend/webapp/components/modals/cancel-warning/index.tsx b/frontend/webapp/components/modals/cancel-warning/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { NOTIFICATION_TYPE } from '@/types';
 import { WarningModal } from '@/reuseable-components';
 
 interface Props {
@@ -18,7 +19,7 @@ const CancelWarning: React.FC<Props> = ({ isOpen, noOverlay, name, onApprove, on
       description='Are you sure you want to cancel?'
       approveButton={{
         text: 'Confirm',
-        variant: 'warning',
+        variant: NOTIFICATION_TYPE.WARNING,
         onClick: onApprove,
       }}
       denyButton={{

diff --git a/frontend/webapp/components/modals/delete-warning/index.tsx b/frontend/webapp/components/modals/delete-warning/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { OVERVIEW_ENTITY_TYPES } from '@/types';
 import { WarningModal } from '@/reuseable-components';
+import { NOTIFICATION_TYPE, OVERVIEW_ENTITY_TYPES } from '@/types';
 
 interface Props {
   isOpen: boolean;
@@ -24,7 +24,7 @@ const DeleteWarning: React.FC<Props> = ({ isOpen, noOverlay, name, type, isLastI
       note={
         isLastItem
           ? {
-              type: 'warning',
+              type: NOTIFICATION_TYPE.WARNING,
               title: `You're about to ${actionText} the last ${type}`,
               message: 'This will break your pipeline!',
             }

diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx
@@ -6,7 +6,7 @@ import { useNotificationStore } from '@/store';
 import { ACTION, getStatusIcon } from '@/utils';
 import { useOnClickOutside, useTimeAgo } from '@/hooks';
 import theme, { hexPercentValues } from '@/styles/theme';
-import type { Notification, NotificationType } from '@/types';
+import { NOTIFICATION_TYPE, type Notification } from '@/types';
 import { IconButton, NoDataFound, Text } from '@/reuseable-components';
 
 const RelativeContainer = styled.div`
@@ -82,14 +82,14 @@ export const NotificationManager = () => {
 
   return (
     <RelativeContainer ref={containerRef}>
-      <IconButton onClick={toggleOpen} withPing={!!unseenCount} pingColor={theme.colors.orange_og}>
+      <IconButton data-id='notif-manager-button' onClick={toggleOpen} withPing={!!unseenCount} pingColor={theme.colors.orange_og}>
         <Image src='/icons/common/notification.svg' alt='logo' width={16} height={16} />
       </IconButton>
 
       {isOpen && (
-        <AbsoluteContainer>
+        <AbsoluteContainer data-id='notif-manager-content'>
           <PopupHeader>
-            <Text size={20}>Notifications</Text>{' '}
+            <Text size={20}>Notifications</Text>
             {!!unseenCount && (
               <NewCount size={12} family='secondary'>
                 {unseenCount} new
@@ -126,7 +126,7 @@ const NotifCard = styled.div`
   }
 `;
 
-const StatusIcon = styled.div<{ $type: NotificationType }>`
+const StatusIcon = styled.div<{ $type: NOTIFICATION_TYPE }>`
   background-color: ${({ $type, theme }) => theme.text[$type] + hexPercentValues['012']};
   border-radius: 8px;
   width: 36px;
@@ -175,7 +175,7 @@ const NotificationListItem: React.FC<Notification & { onClick: () => void }> = (
         }
       }}
     >
-      <StatusIcon $type={isDeleted ? 'error' : type}>
+      <StatusIcon $type={isDeleted ? NOTIFICATION_TYPE.ERROR : type}>
         <Image src={isDeleted ? '/icons/common/trash.svg' : getStatusIcon(type)} alt='status' width={16} height={16} />
       </StatusIcon>
 

diff --git a/frontend/webapp/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx
@@ -1,11 +1,11 @@
+import React, { useState, useRef } from 'react';
 import Image from 'next/image';
 import theme from '@/styles/theme';
-import { useOnClickOutside } from '@/hooks';
-import React, { useState, useRef } from 'react';
+import { useModalStore } from '@/store';
 import styled, { css } from 'styled-components';
-import { useBooleanStore, useModalStore } from '@/store';
-import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
+import { useComputePlatform, useOnClickOutside } from '@/hooks';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
+import { type DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
 
 // Styled components for the dropdown UI
 const Container = styled.div`
@@ -65,13 +65,13 @@ const DEFAULT_OPTIONS: DropdownOption[] = [
   { id: OVERVIEW_ENTITY_TYPES.DESTINATION, value: 'Destination' },
 ];
 
-interface AddEntityButtonDropdownProps {
+interface Props {
   options?: DropdownOption[];
   placeholder?: string;
 }
 
-const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
-  const { isPolling } = useBooleanStore();
+const AddEntity: React.FC<Props> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
+  const { loading } = useComputePlatform();
   const { currentModal, setCurrentModal } = useModalStore();
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -91,7 +91,7 @@ const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_O
   return (
     <Container ref={dropdownRef}>
       <StyledButton data-id='add-entity' onClick={handleToggle}>
-        {isPolling ? <FadeLoader color={theme.colors.primary} /> : <Image src='/icons/common/plus-black.svg' width={16} height={16} alt='Add' />}
+        {loading ? <FadeLoader color={theme.colors.primary} /> : <Image src='/icons/common/plus-black.svg' width={16} height={16} alt='Add' />}
         <ButtonText size={14}>{placeholder}</ButtonText>
       </StyledButton>
 

diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -2,15 +2,16 @@ import React, { useState } from 'react';
 import Image from 'next/image';
 import { ROUTES } from '@/utils';
 import theme from '@/styles/theme';
+import { CenterThis } from '@/styles';
 import { useAppStore } from '@/store';
 import styled from 'styled-components';
 import { SetupHeader } from '@/components';
 import { useRouter } from 'next/navigation';
-import { useDestinationCRUD, useSourceCRUD } from '@/hooks';
+import { NOTIFICATION_TYPE } from '@/types';
 import { DestinationModal } from '../destination-modal';
+import { useDestinationCRUD, useSourceCRUD } from '@/hooks';
 import { ConfiguredDestinationsList } from './configured-destinations-list';
 import { Button, FadeLoader, NotificationNote, SectionTitle, Text } from '@/reuseable-components';
-import { CenterThis } from '@/styles';
 
 const ContentWrapper = styled.div`
   width: 640px;
@@ -93,7 +94,7 @@ export function AddDestinationContainer() {
         {!isLoading && isSourcesListEmpty() && (
           <NotificationNoteWrapper>
             <NotificationNote
-              type='warning'
+              type={NOTIFICATION_TYPE.WARNING}
               message='No sources selected. Please go back to select sources.'
               action={{
                 label: 'Select sources',

diff --git a/frontend/webapp/containers/main/destinations/destination-form-body/index.tsx b/frontend/webapp/containers/main/destinations/destination-form-body/index.tsx
@@ -1,10 +1,10 @@
 import React, { Dispatch, SetStateAction, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { SignalUppercase } from '@/utils';
-import { TestConnection } from './test-connection';
+import { type ConnectionStatus, TestConnection } from './test-connection';
 import { DestinationDynamicFields } from './dynamic-fields';
-import type { DestinationInput, DestinationTypeItem, DynamicField } from '@/types';
 import { Divider, Input, MonitoringCheckboxes, NotificationNote, SectionTitle } from '@/reuseable-components';
+import { NOTIFICATION_TYPE, type DestinationInput, type DestinationTypeItem, type DynamicField } from '@/types';
 
 interface Props {
   isUpdate?: boolean;
@@ -34,7 +34,7 @@ export function DestinationFormBody({ isUpdate, destination, formData, formError
   const { supportedSignals, testConnectionSupported, displayName } = destination || {};
 
   const [isFormDirty, setIsFormDirty] = useState(false);
-  const [connectionStatus, setConnectionStatus] = useState<'success' | 'error'>();
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>();
 
   const dirtyForm = () => {
     setIsFormDirty(true);
@@ -87,11 +87,11 @@ export function DestinationFormBody({ isUpdate, destination, formData, formError
                   status={connectionStatus}
                   onError={() => {
                     setIsFormDirty(false);
-                    setConnectionStatus('error');
+                    setConnectionStatus(NOTIFICATION_TYPE.ERROR);
                   }}
                   onSuccess={() => {
                     setIsFormDirty(false);
-                    setConnectionStatus('success');
+                    setConnectionStatus(NOTIFICATION_TYPE.SUCCESS);
                   }}
                   validateForm={validateForm}
                 />
@@ -101,9 +101,9 @@ export function DestinationFormBody({ isUpdate, destination, formData, formError
 
           {testConnectionSupported && (
             <NotesWrapper>
-              {connectionStatus === 'error' && <NotificationNote type='error' message='Connection failed. Please check your input and try again.' />}
-              {connectionStatus === 'success' && <NotificationNote type='success' message='Connection succeeded.' />}
-              {!connectionStatus && <NotificationNote type='default' message={`Odigos autocompleted ${displayName} connection details.`} />}
+              {connectionStatus === NOTIFICATION_TYPE.ERROR && <NotificationNote type={NOTIFICATION_TYPE.ERROR} message='Connection failed. Please check your input and try again.' />}
+              {connectionStatus === NOTIFICATION_TYPE.SUCCESS && <NotificationNote type={NOTIFICATION_TYPE.SUCCESS} message='Connection succeeded.' />}
+              {!connectionStatus && <NotificationNote type={NOTIFICATION_TYPE.DEFAULT} message={`Odigos autocompleted ${displayName} connection details.`} />}
             </NotesWrapper>
           )}
 

diff --git a/frontend/webapp/containers/main/destinations/destination-form-body/test-connection/index.tsx b/frontend/webapp/containers/main/destinations/destination-form-body/test-connection/index.tsx
@@ -3,22 +3,22 @@ import Image from 'next/image';
 import theme from '@/styles/theme';
 import { getStatusIcon } from '@/utils';
 import { useTestConnection } from '@/hooks';
-import type { DestinationInput } from '@/types';
 import styled, { css } from 'styled-components';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
+import { type DestinationInput, NOTIFICATION_TYPE } from '@/types';
 
-type Status = 'success' | 'error';
+export type ConnectionStatus = NOTIFICATION_TYPE.SUCCESS | NOTIFICATION_TYPE.ERROR;
 
 interface Props {
   destination: DestinationInput;
   disabled: boolean;
-  status?: Status;
+  status?: ConnectionStatus;
   onError: () => void;
   onSuccess: () => void;
   validateForm: () => boolean;
 }
 
-const ActionButton = styled(Button)<{ $status?: Status }>`
+const ActionButton = styled(Button)<{ $status?: ConnectionStatus }>`
   display: flex;
   align-items: center;
   gap: 8px;

diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer/index.tsx
@@ -2,14 +2,14 @@ import React, { useMemo, useState } from 'react';
 import buildCard from './build-card';
 import { RuleFormBody } from '../';
 import styled from 'styled-components';
-import { useDrawerStore } from '@/store';
 import { DataCard } from '@/reuseable-components';
 import buildDrawerItem from './build-drawer-item';
 import { RULE_OPTIONS } from '../rule-modal/rule-options';
 import OverviewDrawer from '../../overview/overview-drawer';
-import { ACTION, DATA_CARDS, FORM_ALERTS, getRuleIcon, NOTIFICATION } from '@/utils';
-import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData, useNotify } from '@/hooks';
-import { InstrumentationRuleType, OVERVIEW_ENTITY_TYPES, type InstrumentationRuleSpec } from '@/types';
+import { useDrawerStore, useNotificationStore } from '@/store';
+import { ACTION, DATA_CARDS, FORM_ALERTS, getRuleIcon } from '@/utils';
+import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData } from '@/hooks';
+import { InstrumentationRuleType, NOTIFICATION_TYPE, OVERVIEW_ENTITY_TYPES, type InstrumentationRuleSpec } from '@/types';
 
 interface Props {}
 
@@ -22,7 +22,7 @@ const FormContainer = styled.div`
 `;
 
 export const RuleDrawer: React.FC<Props> = () => {
-  const notify = useNotify();
+  const { addNotification } = useNotificationStore();
   const { selectedItem, setSelectedItem } = useDrawerStore();
   const { formData, formErrors, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useInstrumentationRuleFormData();
 
@@ -74,7 +74,7 @@ export const RuleDrawer: React.FC<Props> = () => {
 
   const handleEdit = (bool?: boolean) => {
     if (item.type === InstrumentationRuleType.UNKNOWN_TYPE) {
-      notify({ type: NOTIFICATION.WARNING, title: FORM_ALERTS.FORBIDDEN, message: FORM_ALERTS.CANNOT_EDIT_RULE, crdType: OVERVIEW_ENTITY_TYPES.RULE, target: id });
+      addNotification({ type: NOTIFICATION_TYPE.WARNING, title: FORM_ALERTS.FORBIDDEN, message: FORM_ALERTS.CANNOT_EDIT_RULE, crdType: OVERVIEW_ENTITY_TYPES.RULE, target: id });
     } else {
       setIsEditing(typeof bool === 'boolean' ? bool : true);
     }

diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-modal/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-modal/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { ACTION } from '@/utils';
 import { RuleFormBody } from '../';
+import { NOTIFICATION_TYPE } from '@/types';
 import { CenterThis, ModalBody } from '@/styles';
 import { RULE_OPTIONS, RuleOption } from './rule-options';
 import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData, useKeyDown } from '@/hooks';
@@ -58,7 +59,7 @@ export const RuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
     >
       <ModalBody>
         <SectionTitle title='Define Instrumentation Rule' description='Define how telemetry is recorded from your application. Choose a rule type and configure the details.' />
-        <NotificationNote type='info' message='We currently support one rule. We’ll be adding new rule types in the near future.' style={{ marginTop: '24px' }} />
+        <NotificationNote type={NOTIFICATION_TYPE.INFO} message='We currently support one rule. We’ll be adding new rule types in the near future.' style={{ marginTop: '24px' }} />
         <AutocompleteInput disabled options={RULE_OPTIONS} selectedOption={selectedItem} onOptionSelect={handleSelect} style={{ marginTop: '12px' }} />
 
         {!!selectedItem?.type ? (

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -35,15 +35,9 @@ export default function OverviewDataFlowContainer() {
   const positions = useMemo(() => getNodePositions({ containerWidth }), [containerWidth]);
 
   const { metrics } = useMetrics();
-  const { data, filteredData, startPolling } = useComputePlatform();
+  const { data, filteredData } = useComputePlatform();
   const unfilteredCounts = useMemo(() => getEntityCounts({ computePlatform: data?.computePlatform }), [data]);
 
-  useEffect(() => {
-    // this is to start polling on component mount in an attempt to fix any initial errors with sources/destinations
-    if (!!data?.computePlatform.k8sActualSources.length || !!data?.computePlatform.destinations.length) startPolling();
-    // only on-mount, if we include "data" this will trigger on every refetch, causing an infinite loop
-  }, []);
-
   const ruleNodes = useMemo(
     () => buildRuleNodes({ entities: filteredData?.computePlatform.instrumentationRules || [], positions, unfilteredCounts }),
     [filteredData?.computePlatform.instrumentationRules, positions, unfilteredCounts],

diff --git a/frontend/webapp/cypress/constants/index.ts b/frontend/webapp/cypress/constants/index.ts
@@ -70,6 +70,9 @@ export const DATA_IDS = {
   TITLE: '[data-id=title]',
   SOURCE_TITLE: '[data-id=sourceName]',
   CHECKBOX: '[data-id=checkbox]',
+
+  NOTIF_MANAGER_BUTTON: '[data-id=notif-manager-button]',
+  NOTIF_MANAGER_CONTENR: '[data-id=notif-manager-content]',
 };
 
 export const BUTTONS = {
@@ -88,12 +91,15 @@ const CYPRESS_TEST = 'Cypress Test';
 export const TEXTS = {
   UPDATED_NAME: CYPRESS_TEST,
 
+  NO_RESOURCES: (namespace: string) => `No resources found in ${namespace} namespace.`,
+
   SOURCE_WARN_MODAL_TITLE: 'Uninstrument 5 sources',
   SOURCE_WARN_MODAL_NOTE: "You're about to uninstrument the last source",
   DESTINATION_WARN_MODAL_TITLE: `Delete destination (${CYPRESS_TEST})`,
   DESTINATION_WARN_MODAL_NOTE: "You're about to delete the last destination",
   ACTION_WARN_MODAL_TITLE: `Delete action (${CYPRESS_TEST})`,
   INSTRUMENTATION_RULE_WARN_MODAL_TITLE: `Delete rule (${CYPRESS_TEST})`,
 
-  NO_RESOURCES: (namespace: string) => `No resources found in ${namespace} namespace.`,
+  NOTIF_SOURCES_CREATED: 'successfully added 5 sources',
+  NOTIF_SOURCES_DELETED: 'successfully deleted 5 sources',
 };