[GEN-1794]: fix "new/first" text for nodeType=add

frontend/webapp/app/(overview)/overview/page.tsx

@@ -2,13 +2,17 @@
 import React from 'react';
 import dynamic from 'next/dynamic';
 
-const OverviewDataFlowContainer = dynamic(() => import('@/containers/main/overview/overview-data-flow'), {
-  ssr: false,
-});
+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() {
   return (
     <>
+      <ToastList />
+      <AllDrawers />
+      <AllModals />
       <OverviewDataFlowContainer />
     </>
   );

frontend/webapp/components/notification/index.ts

@@ -0,0 +1,4 @@
+export * from './notification-manager';
+import ToastList from './toast-list';
+
+export { ToastList };

frontend/webapp/components/notification/toast-list.tsx

@@ -17,7 +17,7 @@ const Container = styled.div`
   min-width: 600px;
 `;
 
-export const ToastList: React.FC = () => {
+const ToastList: React.FC = () => {
   const { notifications } = useNotificationStore();
 
   return (
@@ -59,3 +59,5 @@ const Toast: React.FC<Notification> = (props) => {
     />
   );
 };
+
+export default ToastList;

frontend/webapp/containers/main/overview/all-drawers/index.tsx → frontend/webapp/components/overview/all-drawers/index.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useDrawerStore } from '@/store';
-import { SourceDrawer } from '../../sources';
-import { ActionDrawer } from '../../actions';
 import { OVERVIEW_ENTITY_TYPES } from '@/types';
-import { DestinationDrawer } from '../../destinations';
-import { RuleDrawer } from '../../instrumentation-rules';
+import { ActionDrawer, DestinationDrawer, RuleDrawer, SourceDrawer } from '@/containers';
 
 const AllDrawers = () => {
   const selected = useDrawerStore(({ selectedItem }) => selectedItem);

frontend/webapp/containers/main/overview/all-modals/index.tsx → frontend/webapp/components/overview/all-modals/index.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useModalStore } from '@/store';
-import { ActionModal } from '../../actions';
 import { OVERVIEW_ENTITY_TYPES } from '@/types';
-import { DestinationModal } from '../../destinations';
-import { RuleModal } from '../../instrumentation-rules';
-import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal';
+import { ActionModal, AddSourceModal, DestinationModal, RuleModal } from '@/containers';
 
 const AllModals = () => {
   const selected = useModalStore(({ currentModal }) => currentModal);

frontend/webapp/components/overview/index.ts

@@ -0,0 +1,6 @@
+export * from './add-entity';
+import AllDrawers from './all-drawers';
+import AllModals from './all-modals';
+export * from './monitors-legend';
+
+export { AllDrawers, AllModals };

frontend/webapp/containers/main/instrumentation-rules/rule-drawer/build-drawer-item.ts

@@ -1,5 +1,5 @@
 import { deriveTypeFromRule } from '@/utils';
-import { PayloadCollectionType, type InstrumentationRuleInput, type InstrumentationRuleSpec } from '@/types';
+import { type InstrumentationRuleSpec, type InstrumentationRuleInput, PayloadCollectionType } from '@/types';
 
 const buildDrawerItem = (id: string, formData: InstrumentationRuleInput, drawerItem: InstrumentationRuleSpec): InstrumentationRuleSpec => {
   const { ruleName, notes, disabled, payloadCollection } = formData;

frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useMemo, useState } from 'react';
 import theme from '@/styles/theme';
 import styled from 'styled-components';
-import { OVERVIEW_ENTITY_TYPES } from '@/types';
+import { OVERVIEW_ENTITY_TYPES, WorkloadId } from '@/types';
 import { AbsoluteContainer } from '../../styled';
 import { getEntityIcon, getEntityLabel } from '@/utils';
 import { buildSearchResults, type Category } from './builder';
@@ -35,7 +35,7 @@ export const SearchResults = ({ searchText, onClose }: Props) => {
   const { actions } = useActionCRUD();
   const { destinations } = useDestinationCRUD();
   const { instrumentationRules } = useInstrumentationRuleCRUD();
-  const { handleNodeClick } = useNodeDataFlowHandlers({ rules: instrumentationRules, sources, actions, destinations });
+  const { handleNodeClick } = useNodeDataFlowHandlers();
 
   const { categories, searchResults } = useMemo(
     () =>
@@ -72,6 +72,7 @@ export const SearchResults = ({ searchText, onClose }: Props) => {
                 label={getEntityLabel(item, category as OVERVIEW_ENTITY_TYPES, { extended: true })}
                 onClick={() => {
                   const id = item.id || item.ruleId || { kind: item.kind, name: item.name, namespace: item.namespace };
+                  // @ts-ignore
                   handleNodeClick(null, { data: { type: category, id } });
                   onClose();
                 }}

frontend/webapp/containers/main/overview/overview-data-flow/index.tsx

@@ -1,17 +1,12 @@
 'use client';
 import React, { useMemo } from 'react';
-import dynamic from 'next/dynamic';
 import styled from 'styled-components';
-import { ToastList } from '@/components';
 import MultiSourceControl from '../multi-source-control';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
 import { useComputePlatform, useContainerSize, useMetrics, useNodeDataFlowHandlers } from '@/hooks';
 
-const AllDrawers = dynamic(() => import('../all-drawers'), { ssr: false });
-const AllModals = dynamic(() => import('../all-modals'), { ssr: false });
-
-export const OverviewDataFlowWrapper = styled.div`
+const OverviewDataFlowWrapper = styled.div`
   width: 100%;
   height: calc(100vh - 176px);
   position: relative;
@@ -44,10 +39,6 @@ export default function OverviewDataFlowContainer() {
       <OverviewActionMenuContainer />
       <MultiSourceControl />
       <NodeBaseDataFlow nodes={nodes} edges={edges} nodeWidth={NODE_WIDTH} onNodeClick={handleNodeClick} />
-
-      <AllDrawers />
-      <AllModals />
-      <ToastList />
     </OverviewDataFlowWrapper>
   );
 }

frontend/webapp/containers/main/sources/index.ts

@@ -1,4 +1,5 @@
 export * from './choose-sources';
-export * from './source-drawer-container';
+export * from './choose-sources/choose-source-modal';
 export * from './choose-sources/choose-sources-body';
+export * from './source-drawer-container';
 export * from './update-source-body';

frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts

@@ -1,12 +1,12 @@
 // src/hooks/useNodeDataFlowHandlers.ts
 import { useCallback } from 'react';
+import { type Node } from '@xyflow/react';
 import { useSourceCRUD } from '../sources';
 import { useActionCRUD } from '../actions';
 import { useDestinationCRUD } from '../destinations';
 import { useDrawerStore, useModalStore } from '@/store';
-import { OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, WorkloadId } from '@/types';
 import { useInstrumentationRuleCRUD } from '../instrumentation-rules';
-import { Node } from '@xyflow/react';
+import { OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, WorkloadId } from '@/types';
 
 export function useNodeDataFlowHandlers() {
   const { sources } = useSourceCRUD();
@@ -19,13 +19,13 @@ export function useNodeDataFlowHandlers() {
 
   const handleNodeClick = useCallback(
     (
-      _: React.MouseEvent,
+      _: React.MouseEvent | null,
       object: Node<
         {
           id: string | WorkloadId;
           type: OVERVIEW_ENTITY_TYPES | OVERVIEW_NODE_TYPES;
         },
-        'add'
+        'id'
       >,
     ) => {
       const {

frontend/webapp/reuseable-components/nodes-data-flow/builder.ts

@@ -123,7 +123,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m
         type: OVERVIEW_NODE_TYPES.ADD_RULE,
         status: STATUSES.HEALTHY,
         title: 'ADD RULE',
-        subTitle: 'Add first rule to modify the OpenTelemetry data',
+        subTitle: `Add ${!!nonFilteredLengths['rules'] ? 'a new' : 'first'} rule to modify the OpenTelemetry data`,
       }),
     );
   } else {
@@ -150,7 +150,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m
         type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
         status: STATUSES.HEALTHY,
         title: 'ADD SOURCE',
-        subTitle: 'Add first source to collect OpenTelemetry data',
+        subTitle: `Add ${!!nonFilteredLengths['sources'] ? 'a new' : 'first'} source to collect OpenTelemetry data`,
       }),
     );
   } else {
@@ -183,7 +183,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m
         type: OVERVIEW_NODE_TYPES.ADD_ACTION,
         status: STATUSES.HEALTHY,
         title: 'ADD ACTION',
-        subTitle: 'Add first action to modify the OpenTelemetry data',
+        subTitle: `Add ${!!nonFilteredLengths['actions'] ? 'a new' : 'first'} action to modify the OpenTelemetry data`,
       }),
     );
   } else {
@@ -234,7 +234,7 @@ export const buildNodesAndEdges = ({ computePlatform, computePlatformFiltered, m
         type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
         status: STATUSES.HEALTHY,
         title: 'ADD DESTIONATION',
-        subTitle: 'Add first destination to monitor OpenTelemetry data',
+        subTitle: `Add ${!!nonFilteredLengths['destinations'] ? 'a new' : 'first'} destination to monitor OpenTelemetry data`,
       }),
     );
   } else {

frontend/webapp/types/compute-platform.ts

@@ -1,7 +1,7 @@
 import type { K8sActualSource } from './sources';
 import type { ActualDestination } from './destinations';
 import type { ActionData, ActionDataParsed } from './actions';
-import type { InstrumentationRuleSpec, InstrumentationRuleSpecMapped } from './instrumentation-rules';
+import type { InstrumentationRuleSpec } from './instrumentation-rules';
 
 export type K8sActualNamespace = {
   name: string;
@@ -26,7 +26,7 @@ export type ComputePlatform = {
 
 interface ComputePlatformDataMapped extends ComputePlatformData {
   actions: ActionDataParsed[];
-  instrumentationRules: InstrumentationRuleSpecMapped[];
+  instrumentationRules: InstrumentationRuleSpec[];
 }
 
 export type ComputePlatformMapped = {

frontend/webapp/types/instrumentation-rules.ts

@@ -73,6 +73,7 @@ export enum RulesSortType {
 export interface InstrumentationRuleSpec {
   ruleId: string;
   ruleName: string;
+  type?: InstrumentationRuleType; // does not come from backend, it's derived during GET
   notes: string;
   disabled: boolean;
   workloads?: PodWorkload[];