@odigos/ui-kit 0.0.78 → 0.0.80

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [0.0.80](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.79...ui-kit-v0.0.80) (2025-08-10)
+
+
+### Features
+
+* align no-data to center ([#315](https://github.com/odigos-io/ui-kit/issues/315)) ([158e3f8](https://github.com/odigos-io/ui-kit/commit/158e3f831a1edc1d8ca6547c1901cf639db0314c))
+* enhance tooltip rendering to support strong text formatting ([#305](https://github.com/odigos-io/ui-kit/issues/305)) ([f6e0e20](https://github.com/odigos-io/ui-kit/commit/f6e0e20120dbdaef3ce98d1471e0c18d2a8fe273))
+* **search:** integrate search results into action, destination, instrumentation rule, and source tables ([#314](https://github.com/odigos-io/ui-kit/issues/314)) ([c3d6f8c](https://github.com/odigos-io/ui-kit/commit/c3d6f8c93afcc74dd87aef31ca533799325de9e7))
+
+
+### Bug Fixes
+
+* **search:** state management for search input and results display ([#308](https://github.com/odigos-io/ui-kit/issues/308)) ([68a9006](https://github.com/odigos-io/ui-kit/commit/68a9006a9c9346904f071bff9f54167f22176d0a))
+* **source-drawer:** prevent fetching source if already fetched and reset state on delete/update ([#307](https://github.com/odigos-io/ui-kit/issues/307)) ([094d791](https://github.com/odigos-io/ui-kit/commit/094d79170a8a6b717e7837ab20fb306655c8e921))
+
+## [0.0.79](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.78...ui-kit-v0.0.79) (2025-08-06)
+
+
+### Bug Fixes
+
+* general fixes ([#303](https://github.com/odigos-io/ui-kit/issues/303)) ([abd1e7e](https://github.com/odigos-io/ui-kit/commit/abd1e7e8e64f97536c5d99593a1c77f19e22a4ce))
+
 ## [0.0.78](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.77...ui-kit-v0.0.78) (2025-08-06)
 
 

package/lib/components/styled.d.ts

@@ -11,12 +11,14 @@ export declare const FlexColumn: import("styled-components/dist/types").IStyledC
     $justifyContent?: CSSProperties["justifyContent"];
     $wrap?: CSSProperties["flexWrap"];
 }>> & string;
-export declare const CenterThis: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap" | "$alignItems" | "$justifyContent" | "$wrap"> & {
+export declare const CenterThis: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap" | "$alignItems" | "$justifyContent" | "$wrap"> & {
     $gap?: number;
     $alignItems?: CSSProperties["alignItems"];
     $justifyContent?: CSSProperties["justifyContent"];
     $wrap?: CSSProperties["flexWrap"];
-}, never>> & string;
+}, {
+    $height?: CSSProperties["height"];
+}>> & string;
 export declare const VerticalScroll: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ModalBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {

package/lib/components/text/index.d.ts

@@ -1,4 +1,5 @@
 import { type DetailedHTMLProps, type FC, type HTMLAttributes, type ReactNode } from 'react';
+import { DefaultTheme } from 'styled-components';
 interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     children?: ReactNode;
     color?: string;
@@ -9,5 +10,15 @@ interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HT
     opacity?: number;
     decoration?: string;
 }
+declare const getLinksFromText: (text: string) => {
+    original: string;
+    href: string;
+    label: string;
+}[] | undefined;
+declare const getStrongsFromText: (text: string) => {
+    original: string;
+    label: string;
+}[] | undefined;
+declare const renderText: (text: string, theme: DefaultTheme) => ReactNode;
 declare const Text: FC<TextProps>;
-export { Text, type TextProps };
+export { Text, type TextProps, getLinksFromText, getStrongsFromText, renderText };

package/lib/components.js

@@ -1,16 +1,16 @@
-import { B as Button } from './index-0a99fd0b.js';
-export { A as AutocompleteInput, a as Badge, a6 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a5 as FlexColumn, a4 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a9 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a8 as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, aa as TableContainer, ab as TableTitleWrap, ac as TableWrap, Z as Tag, _ as Text, $ as TextArea, a0 as Toggle, T as ToggleCodeComponent, a1 as Tooltip, a2 as TraceLoader, a7 as VerticalScroll, a3 as WarningModal } from './index-0a99fd0b.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-3a26952d.js';
+import { B as Button } from './index-192794e8.js';
+export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-192794e8.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-e4e75973.js';
 import React, { createContext, Component, createElement } from 'react';
-import { T as Theme } from './index-fdf3a268.js';
+import { T as Theme } from './index-90ccd949.js';
 import 'styled-components';
-import './index-ba84d272.js';
+import './index-19b8f8bc.js';
 import './types.js';
 import './index-5e5f7bda.js';
-import './index-0d93b2b4.js';
-import './index-1d5c06a0.js';
+import './index-a067d6e9.js';
+import './index-6034549d.js';
 import 'react-dom';
-import './useTransition-ba7b6d8a.js';
+import './useTransition-807be8bc.js';
 
 const ErrorBoundaryContext = createContext(null);
 

package/lib/constants/strings/index.d.ts

@@ -101,6 +101,10 @@ export declare const DISPLAY_TITLES: {
     OVERIDDEN: string;
     OVERRIDE_RUNTIME_DETAILS: string;
     OVERRIDE_RUNTIME_WARNING: string;
+    ACTIVE: string;
+    INACTIVE: string;
+    ENABLED: string;
+    DISABLED: string;
 };
 export declare const BUTTON_TEXTS: {
     ADD: string;

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, a as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, b as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-fdf3a268.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, a as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, b as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-90ccd949.js';
 export { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
 import 'react';
 import './types.js';

package/lib/containers/data-flow-actions-menu/index.d.ts

@@ -3,6 +3,7 @@ import { EntityTypes } from '@/types';
 import { DataStreamSelectProps } from './data-stream-select';
 interface DataFlowActionsMenuProps extends DataStreamSelectProps {
     addEntity?: EntityTypes;
+    preventSearchPopup?: boolean;
 }
 declare const DataFlowActionsMenu: React.FC<DataFlowActionsMenuProps>;
 export { DataFlowActionsMenu, type DataFlowActionsMenuProps };

package/lib/containers/data-flow-actions-menu/search/index.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-type SearchProps = object;
+interface SearchProps {
+    preventPopup?: boolean;
+}
 export declare const Search: React.FC<SearchProps>;
 export {};

package/lib/containers/data-flow-actions-menu/search/search-results/builder.d.ts

@@ -16,7 +16,7 @@ export declare const buildSearchResults: ({ instrumentationRules, sources, actio
         entities: InstrumentationRule[] | Source[] | Action[] | Destination[];
     }[];
     searchResults: {
-        entities: Source[] | Destination[] | Action[] | InstrumentationRule[];
+        entities: Action[] | Destination[] | Source[] | InstrumentationRule[];
         category: Category;
         label: string;
         count: number;

package/lib/containers/data-flow-actions-menu/search/search-results/index.d.ts

@@ -1,6 +1,5 @@
 import { type FC } from 'react';
 interface Props {
-    searchText: string;
     onClose: () => void;
 }
 export declare const SearchResults: FC<Props>;

package/lib/containers.js

@@ -1,21 +1,21 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-fdf3a268.js';
+import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-90ccd949.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, ProgrammingLanguages, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-0a99fd0b.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, E as ExtendArrow, aa as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, a3 as Toggle, I as IconButton, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm } from './index-192794e8.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-1d5c06a0.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-b5b322ad.js';
+import { C as CheckCircledIcon, O as OdigosLogo } from './index-6034549d.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-c8aab9c4.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
-import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-ba7b6d8a.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-ba84d272.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-3a26952d.js';
-import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-0d93b2b4.js';
-import { f as filterActions, l as getEntityLabel, k as getEntityIcon, v as sleep, n as getPlatformIcon, o as getPlatformLabel, g as formatBytes, i as getContainersIcons, p as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, r as getYamlFieldsForDestination, m as getMetricForEntity, q as getWorkloadId, s as hasUnhealthyInstances, h as getContainersInstrumentedCount, t as isOverTime } from './index-c51fc6a4.js';
+import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-807be8bc.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-19b8f8bc.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-e4e75973.js';
+import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-a067d6e9.js';
+import { f as filterActions, l as getEntityLabel, k as getEntityIcon, v as sleep, n as getPlatformIcon, o as getPlatformLabel, g as formatBytes, i as getContainersIcons, p as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, r as getYamlFieldsForDestination, m as getMetricForEntity, q as getWorkloadId, s as hasUnhealthyInstances, h as getContainersInstrumentedCount, t as isOverTime } from './index-ba4f9a19.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
 import { NoteBackToSummary, EditButton } from './snippets.js';
 import { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-59aacfd1.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-b9d7a992.js';
 import 'react-dom';
 
 const buildCard$3 = (action) => {
@@ -518,8 +518,8 @@ const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle$2, null, "Status"),
             React.createElement(Segment, { options: [
-                    { icon: CheckCircledIcon, label: 'active', value: false, selectedBgColor: theme.text.success + Theme.opacity.hex['050'] },
-                    { icon: CrossCircledIcon, label: 'inactive', value: true, selectedBgColor: theme.text.error + Theme.opacity.hex['050'] },
+                    { icon: CheckCircledIcon, label: DISPLAY_TITLES.ENABLED, value: false, selectedBgColor: theme.text.success + Theme.opacity.hex['050'] },
+                    { icon: CrossCircledIcon, label: DISPLAY_TITLES.DISABLED, value: true, selectedBgColor: theme.text.error + Theme.opacity.hex['050'] },
                 ], selected: formData.disabled, setSelected: (bool) => handleFormChange('disabled', bool) }))),
         !isUpdate && React.createElement(SectionTitle, { title: '', description: action.docsDescription, actionButton: React.createElement(DocsButton, { endpoint: action.docsEndpoint }) }),
         React.createElement(MonitorsCheckboxes, { title: 'Signals for Processing', required: true, allowedSignals: action.allowedSignals, selectedSignals: formData['signals'], setSelectedSignals: (value) => handleFormChange('signals', value), errorMessage: formErrors['signals'] }),
@@ -875,6 +875,64 @@ const ConditionsStatuses = ({ conditions, id }) => {
     })));
 };
 
+const buildSearchResults = ({ instrumentationRules, sources, actions, destinations, searchText, selectedCategory }) => {
+    const filteredRules = !searchText ? instrumentationRules : instrumentationRules.filter((rule) => rule.type?.toLowerCase().includes(searchText) || rule.ruleName?.toLowerCase().includes(searchText));
+    const filteredSources = !searchText
+        ? sources
+        : sources.filter((source) => source.name?.toLowerCase().includes(searchText) || source.otelServiceName?.toLowerCase().includes(searchText) || source.namespace?.toLowerCase().includes(searchText));
+    const filteredActions = !searchText ? actions : actions.filter((action) => action.type?.toLowerCase().includes(searchText) || action.spec.actionName?.toLowerCase().includes(searchText));
+    const filteredDestinations = !searchText
+        ? destinations
+        : destinations.filter((destination) => destination.destinationType.displayName?.toLowerCase().includes(searchText) || destination.name?.toLowerCase().includes(searchText));
+    const categories = [
+        {
+            category: EntityTypes.Source,
+            label: 'Sources',
+            count: filteredSources.length,
+            entities: [],
+        },
+        {
+            category: EntityTypes.Action,
+            label: 'Actions',
+            count: filteredActions.length,
+            entities: [],
+        },
+        {
+            category: EntityTypes.Destination,
+            label: 'Destinations',
+            count: filteredDestinations.length,
+            entities: [],
+        },
+        {
+            category: EntityTypes.InstrumentationRule,
+            label: 'Instrumentation Rules',
+            count: filteredRules.length,
+            entities: [],
+        },
+    ];
+    categories.unshift({
+        category: 'all',
+        label: 'All',
+        count: filteredRules.length + filteredSources.length + filteredActions.length + filteredDestinations.length,
+        entities: [],
+    });
+    const searchResults = categories
+        .filter(({ count, category }) => !!count && category !== 'all' && ['all', category].includes(selectedCategory))
+        .map((item) => ({
+        ...item,
+        entities: item.category === EntityTypes.InstrumentationRule
+            ? filteredRules
+            : item.category === EntityTypes.Source
+                ? filteredSources
+                : item.category === EntityTypes.Action
+                    ? filteredActions
+                    : item.category === EntityTypes.Destination
+                        ? filteredDestinations
+                        : [],
+    }));
+    return { categories, searchResults };
+};
+
 const columns$3 = [
     { key: 'icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
@@ -890,7 +948,14 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
     const filters = useFilterStore();
     const { actions, actionsLoading } = useEntityStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
-    const filtered = useMemo(() => filterActions(actions, filters), [actions, filters]);
+    const filtered = useMemo(() => (buildSearchResults({
+        instrumentationRules: [],
+        sources: [],
+        actions: filterActions(actions, filters),
+        destinations: [],
+        searchText: filters.searchText,
+        selectedCategory: EntityTypes.Action,
+    }).searchResults.find(({ category }) => category === EntityTypes.Action)?.entities || []), [actions, filters]);
     const rows = useMemo(() => filtered.map((act) => {
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(act.conditions || []);
         return {
@@ -937,13 +1002,23 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
                 {
                     columnKey: 'active-status',
                     component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                        React.createElement(Status, { status: act.spec.disabled ? StatusType.Error : StatusType.Success, title: act.spec.disabled ? 'Inactive' : 'Active', withIcon: true, withBorder: true }))),
+                        React.createElement(Status, { status: act.spec.disabled ? StatusType.Error : StatusType.Success, title: act.spec.disabled ? DISPLAY_TITLES.DISABLED : DISPLAY_TITLES.ENABLED, withIcon: true, withBorder: true }))),
                 },
             ],
         };
     }), [filtered]);
-    const badge = useMemo(() => (filtered.length !== actions.length ? `${filtered.length}/${actions.length}` : actions.length), [filtered, actions]);
-    const badgeTooltip = useMemo(() => (filtered.length !== actions.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, actions]);
+    const { badge, badgeTooltip } = useMemo(() => {
+        if (filtered.length !== actions.length) {
+            return {
+                badge: `${filtered.length}/${actions.length}`,
+                badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
+            };
+        }
+        return {
+            badge: actions.length,
+            badgeTooltip: undefined,
+        };
+    }, [filtered, actions]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.ACTIONS, badge: badge, badgeTooltip: badgeTooltip, loading: actionsLoading })),
@@ -1902,72 +1977,15 @@ styled.div `
   border-radius: 24px;
 `;
 
-const buildSearchResults = ({ instrumentationRules, sources, actions, destinations, searchText, selectedCategory }) => {
-    const filteredRules = !searchText ? instrumentationRules : instrumentationRules.filter((rule) => rule.type?.toLowerCase().includes(searchText) || rule.ruleName?.toLowerCase().includes(searchText));
-    const filteredSources = !searchText
-        ? sources
-        : sources.filter((source) => source.name?.toLowerCase().includes(searchText) || source.otelServiceName?.toLowerCase().includes(searchText) || source.namespace?.toLowerCase().includes(searchText));
-    const filteredActions = !searchText ? actions : actions.filter((action) => action.type?.toLowerCase().includes(searchText) || action.spec.actionName?.toLowerCase().includes(searchText));
-    const filteredDestinations = !searchText
-        ? destinations
-        : destinations.filter((destination) => destination.destinationType.displayName?.toLowerCase().includes(searchText) || destination.name?.toLowerCase().includes(searchText));
-    const categories = [
-        {
-            category: EntityTypes.Source,
-            label: 'Sources',
-            count: filteredSources.length,
-            entities: [],
-        },
-        {
-            category: EntityTypes.Action,
-            label: 'Actions',
-            count: filteredActions.length,
-            entities: [],
-        },
-        {
-            category: EntityTypes.Destination,
-            label: 'Destinations',
-            count: filteredDestinations.length,
-            entities: [],
-        },
-        {
-            category: EntityTypes.InstrumentationRule,
-            label: 'Instrumentation Rules',
-            count: filteredRules.length,
-            entities: [],
-        },
-    ];
-    categories.unshift({
-        category: 'all',
-        label: 'All',
-        count: filteredRules.length + filteredSources.length + filteredActions.length + filteredDestinations.length,
-        entities: [],
-    });
-    const searchResults = categories
-        .filter(({ count, category }) => !!count && category !== 'all' && ['all', category].includes(selectedCategory))
-        .map((item) => ({
-        ...item,
-        entities: item.category === EntityTypes.InstrumentationRule
-            ? filteredRules
-            : item.category === EntityTypes.Source
-                ? filteredSources
-                : item.category === EntityTypes.Action
-                    ? filteredActions
-                    : item.category === EntityTypes.Destination
-                        ? filteredDestinations
-                        : [],
-    }));
-    return { categories, searchResults };
-};
-
 const HorizontalScroll = styled.div `
   display: flex;
   align-items: center;
   overflow-x: scroll;
 `;
-const SearchResults = ({ searchText, onClose }) => {
+const SearchResults = ({ onClose }) => {
     const theme = Theme.useTheme();
     const { onClickNode } = useClickNode();
+    const { searchText } = useFilterStore();
     const { selectedStreamName } = useDataStreamStore();
     const { sources, destinations, actions, instrumentationRules } = useEntityStore();
     const { popupRef, popupOpen, setPopupOpen, popupPosition, handlePosition } = usePopup();
@@ -2002,19 +2020,20 @@ const SearchResults = ({ searchText, onClose }) => {
         React.createElement(Divider, { thickness: catIdx === searchResults.length - 1 ? 0 : 1, length: '90%', margin: '8px auto' }))))));
 };
 
-const Search = () => {
-    const [input, setInput] = useState('');
+const Search = ({ preventPopup = false }) => {
+    const { searchText, setSearchText } = useFilterStore();
     const [focused, setFocused] = useState(false);
+    const isOpen = !!searchText || focused;
     const onClose = () => {
-        setInput('');
+        setSearchText('');
         setFocused(false);
     };
     const containerRef = useRef(null);
-    useOnClickOutside(containerRef, () => setFocused(false));
-    useKeyDown({ key: 'Escape', active: !!input || focused }, onClose);
+    useOnClickOutside(containerRef, onClose);
+    useKeyDown({ key: 'Escape', active: isOpen }, onClose);
     return (React.createElement(RelativeContainer$2, { ref: containerRef },
-        React.createElement(Input, { placeholder: 'Search', icon: SearchIcon, value: input, onChange: (e) => setInput(e.target.value.toLowerCase()), onFocus: () => setFocused(true) }),
-        !!input || focused ? React.createElement(SearchResults, { searchText: input, onClose: onClose }) : null));
+        React.createElement(Input, { placeholder: 'Search', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()), onFocus: () => setFocused(true) }),
+        isOpen && !preventPopup ? React.createElement(SearchResults, { onClose: onClose }) : null));
 };
 
 const FormWrapper = styled.div `
@@ -2248,11 +2267,11 @@ const Container$c = styled.div `
 const PushToEnd = styled.div `
   margin-left: auto;
 `;
-const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream, updateDataStream, deleteDataStream }) => {
+const DataFlowActionsMenu = ({ addEntity, preventSearchPopup, onClickNewDataStream, updateDataStream, deleteDataStream }) => {
     const { setCurrentModal } = useModalStore();
     return (React.createElement(Container$c, null,
         React.createElement(DataStreamSelect, { onClickNewDataStream: onClickNewDataStream, updateDataStream: updateDataStream, deleteDataStream: deleteDataStream }),
-        React.createElement(Search, null),
+        React.createElement(Search, { preventPopup: preventSearchPopup }),
         React.createElement(Filters$1, null),
         addEntity && (React.createElement(PushToEnd, null,
             React.createElement(AddButton, { "data-id": `add-${addEntity}`, onClick: () => setCurrentModal(addEntity), label: `${BUTTON_TEXTS.ADD} ${addEntity}`, variant: 'primary' })))));
@@ -2277,11 +2296,12 @@ const buildMonitorsList = (exportedSignals) => Object.keys(exportedSignals)
     .filter((key) => exportedSignals[key])
     .join(', ');
 const buildCard$2 = (destination, yamlFields) => {
-    const { exportedSignals, destinationType } = destination;
+    const { destinationType, disabled, exportedSignals } = destination;
     const arr = [
-        { title: DISPLAY_TITLES.NAME, value: destinationType.displayName },
         { title: DISPLAY_TITLES.TYPE, value: destinationType.type },
+        { type: DataCardFieldTypes.ActiveStatus, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
         { type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.MONITORS, value: buildMonitorsList(exportedSignals) },
+        { title: DISPLAY_TITLES.NAME, value: destinationType.displayName },
     ];
     const mappedFields = mapDestinationFieldsForDisplay(destination, yamlFields);
     const mappedFieldsForConditionCompare = mappedFields.map((field) => ({ name: field.key, value: field.value }));
@@ -2492,8 +2512,8 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle$1, null, "Status"),
             React.createElement(Segment, { options: [
-                    { icon: CheckCircledIcon, label: 'active', value: false, selectedBgColor: theme.text.success + Theme.opacity.hex['050'] },
-                    { icon: CrossCircledIcon, label: 'inactive', value: true, selectedBgColor: theme.text.error + Theme.opacity.hex['050'] },
+                    { icon: CheckCircledIcon, label: DISPLAY_TITLES.ENABLED, value: false, selectedBgColor: theme.text.success + Theme.opacity.hex['050'] },
+                    { icon: CrossCircledIcon, label: DISPLAY_TITLES.DISABLED, value: true, selectedBgColor: theme.text.error + Theme.opacity.hex['050'] },
                 ], selected: formData.disabled, setSelected: (bool) => handleFormChange('disabled', bool) }))),
         !isUpdate && (React.createElement(Input, { title: 'Destination name', placeholder: 'Enter destination name', value: formData['name'], onChange: (e) => {
                 dirtyForm();
@@ -2960,6 +2980,7 @@ const columns$2 = [
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
     { key: 'type', title: DISPLAY_TITLES.TYPE, sortable: true },
     { key: 'signals', title: DISPLAY_TITLES.MONITORS },
+    { key: 'active-status', title: DISPLAY_TITLES.STATUS },
     { key: 'conditions', title: 'Conditions' },
     { key: 'throughput', title: 'Throughput', sortable: true },
 ];
@@ -2970,8 +2991,15 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
     const { destinations, destinationsLoading } = useEntityStore();
     const destinationsByStream = useMemo(() => filterDestinationsByStream(destinations, selectedStreamName), [destinations, selectedStreamName]);
-    const filteredDestinations = useMemo(() => filterDestinations(destinationsByStream, filters), [destinationsByStream, filters]);
-    const rows = useMemo(() => filteredDestinations.map((dest) => {
+    const filtered = useMemo(() => (buildSearchResults({
+        instrumentationRules: [],
+        sources: [],
+        actions: [],
+        destinations: filterDestinations(destinationsByStream, filters),
+        searchText: filters.searchText,
+        selectedCategory: EntityTypes.Destination,
+    }).searchResults.find(({ category }) => category === EntityTypes.Destination)?.entities || []), [destinationsByStream, filters]);
+    const rows = useMemo(() => filtered.map((dest) => {
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(dest.conditions || []);
         const { icon, iconSrc } = getDestinationIcon(dest.destinationType.type);
         return {
@@ -3000,21 +3028,26 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
                     value: formatBytes(getMetricForEntity(metrics, EntityTypes.Destination, dest.id).throughput),
                     textColor: theme.text.info,
                 },
+                {
+                    columnKey: 'signals',
+                    component: () => React.createElement(MonitorsIcons, { withLabels: true, monitors: mapExportedSignals(dest.exportedSignals) }),
+                },
                 {
                     columnKey: 'conditions',
                     component: () => (dest.conditions?.length ? React.createElement(TableCellConditions, { conditions: dest.conditions, id: dest.id }) : null),
                 },
                 {
-                    columnKey: 'signals',
-                    component: () => React.createElement(MonitorsIcons, { withLabels: true, monitors: mapExportedSignals(dest.exportedSignals) }),
+                    columnKey: 'active-status',
+                    component: () => (React.createElement("div", { style: { lineHeight: 1 } },
+                        React.createElement(Status, { status: dest.disabled ? StatusType.Error : StatusType.Success, title: dest.disabled ? DISPLAY_TITLES.DISABLED : DISPLAY_TITLES.ENABLED, withIcon: true, withBorder: true }))),
                 },
             ],
         };
-    }), [filteredDestinations, metrics]);
+    }), [filtered, metrics]);
     const { badge, badgeTooltip } = useMemo(() => {
-        if (filteredDestinations.length !== destinationsByStream.length) {
+        if (filtered.length !== destinationsByStream.length) {
             return {
-                badge: `${filteredDestinations.length}/${destinationsByStream.length}`,
+                badge: `${filtered.length}/${destinationsByStream.length}`,
                 badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
             };
         }
@@ -3022,13 +3055,13 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
             badge: destinationsByStream.length,
             badgeTooltip: undefined,
         };
-    }, [filteredDestinations, destinationsByStream]);
+    }, [filtered, destinationsByStream]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Destination), title: DISPLAY_TITLES.DESTINATIONS, badge: badge, badgeTooltip: badgeTooltip, loading: destinationsLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$2, rows: rows })),
-        !filteredDestinations.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+        !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
 
@@ -3310,8 +3343,8 @@ const InstrumentationRuleForm = ({ isUpdate, rule, formData, formErrors, handleF
         isUpdate ? (React.createElement("div", null,
             React.createElement(FieldTitle, null, "Status"),
             React.createElement(Segment, { options: [
-                    { icon: CheckCircledIcon, label: 'active', value: false, selectedBgColor: theme.text.success + Theme.opacity.hex['050'] },
-                    { icon: CrossCircledIcon, label: 'inactive', value: true, selectedBgColor: theme.text.error + Theme.opacity.hex['050'] },
+                    { icon: CheckCircledIcon, label: DISPLAY_TITLES.ENABLED, value: false, selectedBgColor: theme.text.success + Theme.opacity.hex['050'] },
+                    { icon: CrossCircledIcon, label: DISPLAY_TITLES.DISABLED, value: true, selectedBgColor: theme.text.error + Theme.opacity.hex['050'] },
                 ], selected: formData.disabled, setSelected: (bool) => handleFormChange('disabled', bool) }))) : (React.createElement(React.Fragment, null,
             React.createElement(SectionTitle, { title: '', description: rule.docsDescription, actionButton: React.createElement(DocsButton, { endpoint: rule.docsEndpoint }) }),
             React.createElement(Input, { title: 'Rule name', placeholder: 'Use a name that describes the rule', value: formData['ruleName'], onChange: ({ target: { value } }) => handleFormChange('ruleName', value), errorMessage: formErrors['ruleName'] }))),
@@ -3489,11 +3522,20 @@ const columns$1 = [
 ];
 const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
     const theme = Theme.useTheme();
+    const filters = useFilterStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
     const { instrumentationRules, instrumentationRulesLoading } = useEntityStore();
+    const filtered = useMemo(() => (buildSearchResults({
+        instrumentationRules,
+        sources: [],
+        actions: [],
+        destinations: [],
+        searchText: filters.searchText,
+        selectedCategory: EntityTypes.InstrumentationRule,
+    }).searchResults.find(({ category }) => category === EntityTypes.InstrumentationRule)?.entities || []), [instrumentationRules, filters]);
     const rows = useMemo(() => 
     // note: rules do not have filters yet
-    instrumentationRules.map((rule) => {
+    filtered.map((rule) => {
         return {
             onClick: () => {
                 setDrawerType(EntityTypes.InstrumentationRule);
@@ -3533,7 +3575,7 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
                 {
                     columnKey: 'active-status',
                     component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                        React.createElement(Status, { status: rule.disabled ? StatusType.Error : StatusType.Success, title: rule.disabled ? 'Inactive' : 'Active', withIcon: true, withBorder: true }))),
+                        React.createElement(Status, { status: rule.disabled ? StatusType.Error : StatusType.Success, title: rule.disabled ? DISPLAY_TITLES.DISABLED : DISPLAY_TITLES.ENABLED, withIcon: true, withBorder: true }))),
                 },
                 {
                     columnKey: 'source-count',
@@ -3542,13 +3584,25 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
                 },
             ],
         };
-    }), [instrumentationRules]);
+    }), [filtered]);
+    const { badge, badgeTooltip } = useMemo(() => {
+        if (filtered.length !== instrumentationRules.length) {
+            return {
+                badge: `${filtered.length}/${instrumentationRules.length}`,
+                badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
+            };
+        }
+        return {
+            badge: instrumentationRules.length,
+            badgeTooltip: undefined,
+        };
+    }, [filtered, instrumentationRules]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.INSTRUMENTATION_RULES, badge: instrumentationRules.length, loading: instrumentationRulesLoading })),
+            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.INSTRUMENTATION_RULES, badge: badge, badgeTooltip: badgeTooltip, loading: instrumentationRulesLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$1, rows: rows })),
-        !instrumentationRules.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+        !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
 
@@ -4255,11 +4309,11 @@ const Describe$1 = ({ source, fetchSourceDescribe }) => {
         });
     }, [fetchSourceDescribe, source]);
     if (!describe && !failed) {
-        return (React.createElement(CenterThis, null,
+        return (React.createElement(CenterThis, { "$height": '70vh' },
             React.createElement(FadeLoader, null)));
     }
-    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, null,
-        React.createElement(NoDataFound, { subTitle: 'Could not fetch describe for this source' }))) : !describe?.pods?.length ? (React.createElement(CenterThis, null,
+    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, { "$height": '70vh' },
+        React.createElement(NoDataFound, { subTitle: 'Could not fetch describe for this source' }))) : !describe?.pods?.length ? (React.createElement(CenterThis, { "$height": '70vh' },
         React.createElement(NoDataFound, { subTitle: 'Check if you have any running pods and try again' }))) : (describe.pods.map(({ podName, nodeName, phase, agentInjected, runningLatestWorkloadRevision, containers }) => {
         const podHasErrors = phase.status !== StatusType.Success || hasUnhealthyInstances(containers);
         const podStatus = podHasErrors ? StatusType.Error : StatusType.Success;
@@ -4323,11 +4377,11 @@ const Libraries = ({ source, fetchSourceLibraries }) => {
         });
     }, [fetchSourceLibraries, source]);
     if (!libraries && !failed) {
-        return (React.createElement(CenterThis, null,
+        return (React.createElement(CenterThis, { "$height": '70vh' },
             React.createElement(FadeLoader, null)));
     }
-    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, null,
-        React.createElement(NoDataFound, { subTitle: 'Could not fetch libraries for this source' }))) : !libraries?.length ? (React.createElement(CenterThis, { "$gap": 12 },
+    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, { "$height": '70vh' },
+        React.createElement(NoDataFound, { subTitle: 'Could not fetch libraries for this source' }))) : !libraries?.length ? (React.createElement(CenterThis, { "$height": '70vh', "$gap": 12 },
         React.createElement(NoDataFound, { title: 'No libraries found', subTitle: '' }),
         React.createElement(NotificationNote, { type: StatusType.Warning, message: 'This feature is in early development, and has very limited support' }))) : (React.createElement(DataCard, { title: 'Instrumented Libraries' }, libraries.map(({ name, nonIdentifyingAttributes }, i) => (React.createElement(Fragment, { key: `library-${name}` },
         React.createElement(Row, null,
@@ -4373,20 +4427,20 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
     const { drawerType, drawerEntityId } = useDrawerStore();
     const sourcesByStream = useMemo(() => filterSourcesByStream(sources, selectedStreamName), [sources, selectedStreamName]);
     const drawerRef = useRef(null);
-    const isOpen = drawerType !== EntityTypes.Source;
+    const isOpen = drawerType === EntityTypes.Source;
     const [isEditing, setIsEditing] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
     const [selectedTab, setSelectedTab] = useState(Tabs.Overview);
     const [fetchedSource, setFetchedSource] = useState(null);
     // this is used to fetch the source on drawer open, so we ensure we have the latest data
     useEffect(() => {
-        if (!drawerEntityId)
+        if (!isOpen || !drawerEntityId || !!fetchedSource)
             return;
         fetchSourceById(drawerEntityId).then((source) => setFetchedSource(source || null));
-    }, [drawerEntityId]);
+    }, [isOpen, drawerEntityId, fetchedSource]);
     const { formData, handleFormChange, resetFormData, loadFormWithDrawerItem } = useSourceFormData();
     const thisItem = useMemo(() => {
-        if (isOpen)
+        if (!isOpen)
             return null;
         const found = fetchedSource ||
             sourcesByStream?.find((x) => x.namespace === drawerEntityId.namespace && x.name === drawerEntityId.name && x.kind === drawerEntityId.kind);
@@ -4439,6 +4493,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
     const handleDelete = async () => {
         const { namespace } = thisItem;
         persistSources({ [namespace]: [{ ...thisItem, selected: false, currentStreamName: selectedStreamName }] }, {});
+        setFetchedSource(null);
         setIsFormDirty(false);
         setIsEditing(false);
         resetFormData();
@@ -4449,6 +4504,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
         const title = formData.otelServiceName !== thisItem.name ? formData.otelServiceName : '';
         handleFormChange('otelServiceName', title);
         await updateSource(drawerEntityId, { ...formData, otelServiceName: title });
+        setFetchedSource(null);
         setIsFormDirty(false);
         setIsEditing(false);
     };
@@ -4560,7 +4616,14 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         return 1;
     }, [sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted]);
     const sourcesByStream = useMemo(() => filterSourcesByStream(sources, selectedStreamName), [sources, selectedStreamName]);
-    const filteredSources = useMemo(() => filterSources(sourcesByStream, filters), [sourcesByStream, filters]);
+    const filtered = useMemo(() => (buildSearchResults({
+        instrumentationRules: [],
+        sources: filterSources(sourcesByStream, filters),
+        actions: [],
+        destinations: [],
+        searchText: filters.searchText,
+        selectedCategory: EntityTypes.Source,
+    }).searchResults.find(({ category }) => category === EntityTypes.Source)?.entities || []), [sourcesByStream, filters]);
     const [hasSelected, totalSelectedSources] = useMemo(() => {
         let num = 0;
         Object.values(selectedSources).forEach((selectedSources) => {
@@ -4571,7 +4634,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
     const onSelectAll = useCallback((bool) => {
         if (bool) {
             const payload = {};
-            filteredSources.forEach((source) => {
+            filtered.forEach((source) => {
                 const id = { namespace: source.namespace, name: source.name, kind: source.kind };
                 const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
                 if (!isPending) {
@@ -4588,7 +4651,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         else {
             setSelectedSources({});
         }
-    }, [filteredSources]);
+    }, [filtered]);
     const onSelectOne = useCallback((source) => {
         const { namespace, name, kind } = source;
         const payload = { ...selectedSources };
@@ -4603,7 +4666,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         }
         setSelectedSources(payload);
     }, [selectedSources]);
-    const rows = useMemo(() => filteredSources.map((source) => {
+    const rows = useMemo(() => filtered.map((source) => {
         const id = getWorkloadId(source);
         const idString = JSON.stringify(id);
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(source.conditions || []);
@@ -4653,11 +4716,11 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
             ],
         };
-    }), [filteredSources, selectedSources, metrics, onSelectOne]);
+    }), [filtered, selectedSources, metrics, onSelectOne]);
     const { badge, badgeTooltip } = useMemo(() => {
-        if (filteredSources.length !== sourcesByStream.length) {
+        if (filtered.length !== sourcesByStream.length) {
             return {
-                badge: `${filteredSources.length}/${sourcesByStream.length}`,
+                badge: `${filtered.length}/${sourcesByStream.length}`,
                 badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
             };
         }
@@ -4665,10 +4728,10 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
             badge: sourcesByStream.length,
             badgeTooltip: undefined,
         };
-    }, [filteredSources, sourcesByStream]);
+    }, [filtered, sourcesByStream]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
-            React.createElement(Checkbox, { partiallyChecked: hasSelected && filteredSources?.length !== totalSelectedSources, value: hasSelected && filteredSources?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filteredSources?.length }),
+            React.createElement(Checkbox, { partiallyChecked: hasSelected && filtered?.length !== totalSelectedSources, value: hasSelected && filtered?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filtered?.length }),
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Source), title: DISPLAY_TITLES.SOURCES, badge: badge, badgeTooltip: badgeTooltip, loading: sourcesLoading && !isAwaitingInstrumentation })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns, rows: isAwaitingInstrumentation ? [] : rows })),
@@ -4678,7 +4741,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 React.createElement(Text, { color: theme.text.info },
                     !!sourcesToCreate ? 'Instrumenting' : 'Uninstrumenting',
                     " workloads..."),
-                React.createElement(Badge, { label: `${instrumentingPercent}%` })))) : !filteredSources.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+                React.createElement(Badge, { label: `${instrumentingPercent}%` })))) : !filtered.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null))) : null));
 };
 

package/lib/functions.js

@@ -1,13 +1,13 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isStringABoolean, d as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, e as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, h as splitCamelString } from './index-0d93b2b4.js';
-export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, d as filterSources, e as filterSourcesByStream, g as formatBytes, i as getContainersIcons, h as getContainersInstrumentedCount, j as getDestinationIcon, k as getEntityIcon, l as getEntityLabel, m as getMetricForEntity, n as getPlatformIcon, o as getPlatformLabel, p as getValueForRange, q as getWorkloadId, r as getYamlFieldsForDestination, s as hasUnhealthyInstances, t as isOverTime, u as mapDestinationFieldsForDisplay, v as sleep } from './index-c51fc6a4.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isStringABoolean, d as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, e as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, h as splitCamelString } from './index-a067d6e9.js';
+export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, d as filterSources, e as filterSourcesByStream, g as formatBytes, i as getContainersIcons, h as getContainersInstrumentedCount, j as getDestinationIcon, k as getEntityIcon, l as getEntityLabel, m as getMetricForEntity, n as getPlatformIcon, o as getPlatformLabel, p as getValueForRange, q as getWorkloadId, r as getYamlFieldsForDestination, s as hasUnhealthyInstances, t as isOverTime, u as mapDestinationFieldsForDisplay, v as sleep } from './index-ba4f9a19.js';
 export { d as deepClone, i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-export { g as getActionIcon, c as getEntityId, d as getInstrumentationRuleIcon, e as getProgrammingLanguageIcon } from './index-fdf3a268.js';
+export { g as getActionIcon, c as getEntityId, d as getInstrumentationRuleIcon, e as getProgrammingLanguageIcon } from './index-90ccd949.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 import { ProgrammingLanguages, EntityTypes } from './types.js';
 import 'react';
 import 'styled-components';
-import './index-1d5c06a0.js';
-import './index-59aacfd1.js';
+import './index-6034549d.js';
+import './index-b9d7a992.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/hooks.js

@@ -1,10 +1,10 @@
 import { ActionKeyTypes, ActionType, StatusType, EntityTypes, FieldTypes } from './types.js';
-import { V as useNotificationStore, F as FORM_ALERTS, O as useDrawerStore, W as useEntityStore, Y as useDataStreamStore, _ as useSetupStore } from './index-fdf3a268.js';
+import { V as useNotificationStore, F as FORM_ALERTS, O as useDrawerStore, W as useEntityStore, Y as useDataStreamStore, _ as useSetupStore } from './index-90ccd949.js';
 import { useState, useEffect, useMemo } from 'react';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-import { i as useGenericForm } from './useTransition-ba7b6d8a.js';
-export { c as useClickNode, b as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, a as useOnClickOutside, d as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-ba7b6d8a.js';
+import { i as useGenericForm } from './useTransition-807be8bc.js';
+export { c as useClickNode, b as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, a as useOnClickOutside, d as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-807be8bc.js';
 import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 
 const INITIAL$2 = {

package/lib/icons.js

@@ -1,10 +1,10 @@
-import { T as Theme } from './index-fdf3a268.js';
-export { f as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, h as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, j as ImageErrorIcon, J as JavaLogo, K as K8sLogo, k as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, i as SamplerIcon, y as SwiftLogo } from './index-fdf3a268.js';
-export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-1d5c06a0.js';
-export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, G as GearIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-b5b322ad.js';
+import { T as Theme } from './index-90ccd949.js';
+export { f as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, h as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, j as ImageErrorIcon, J as JavaLogo, K as K8sLogo, k as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, i as SamplerIcon, y as SwiftLogo } from './index-90ccd949.js';
+export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-6034549d.js';
+export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, G as GearIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-c8aab9c4.js';
 import React from 'react';
-export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-ba84d272.js';
-export { a3 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AwsCloudwatchLogo, d as AwsS3Logo, e as AwsXrayLogo, f as AxiomLogo, B as BetterStackLogo, g as BlobStorageLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, a4 as DestinationsIcon, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, G as GigapipeLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, a5 as NamespacesIcon, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, F as OpenTelemetryLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, T as QuickwitLogo, a6 as RulesIcon, U as SeqLogo, W as SignozLogo, a7 as SourcesIcon, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, V as VmLogo } from './index-59aacfd1.js';
+export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-19b8f8bc.js';
+export { a3 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AwsCloudwatchLogo, d as AwsS3Logo, e as AwsXrayLogo, f as AxiomLogo, B as BetterStackLogo, g as BlobStorageLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, a4 as DestinationsIcon, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, G as GigapipeLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, a5 as NamespacesIcon, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, F as OpenTelemetryLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, T as QuickwitLogo, a6 as RulesIcon, U as SeqLogo, W as SignozLogo, a7 as SourcesIcon, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, V as VmLogo } from './index-b9d7a992.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-0a99fd0b.js → index-192794e8.js}

@@ -1,13 +1,13 @@
-import React, { useState, useEffect, useRef, forwardRef, useMemo, Fragment, createElement, useCallback, createContext, memo, useContext, useLayoutEffect } from 'react';
-import { T as Theme, B as BUTTON_TEXTS, j as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-fdf3a268.js';
+import React, { Fragment, useMemo, useState, useEffect, useRef, forwardRef, createElement, useCallback, createContext, memo, useContext, useLayoutEffect } from 'react';
+import { T as Theme, B as BUTTON_TEXTS, j as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-90ccd949.js';
 import styled, { css } from 'styled-components';
-import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-ba84d272.js';
+import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-19b8f8bc.js';
 import { StatusType, OtherStatus, EntityTypes, NodeTypes, AddNodeTypes, EdgeTypes, ProgrammingLanguages, IntrumentationStatus, SortDirection, InputTypes, FieldTypes } from './types.js';
 import { s as safeJsonParse, i as isEmpty } from './index-5e5f7bda.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-0d93b2b4.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-a067d6e9.js';
 import ReactDOM, { createPortal } from 'react-dom';
-import { d as usePopup, h as useCopy, c as useClickNode, i as useGenericForm, b as useContainerSize, f as useTransition, u as useKeyDown, a as useOnClickOutside } from './useTransition-ba7b6d8a.js';
-import { I as InfoIcon } from './index-1d5c06a0.js';
+import { d as usePopup, h as useCopy, c as useClickNode, i as useGenericForm, b as useContainerSize, f as useTransition, u as useKeyDown, a as useOnClickOutside } from './useTransition-807be8bc.js';
+import { I as InfoIcon } from './index-6034549d.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -19,8 +19,73 @@ const TextWrapper$2 = styled.div `
   text-transform: ${({ $family }) => ($family === 'secondary' ? 'uppercase' : 'none')};
   font-family: ${({ theme, $family = 'primary' }) => theme.font_family[$family]};
 `;
+const getLinksFromText = (text) => {
+    const links = text.match(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/g);
+    return links?.map((link) => {
+        const [_, href, label] = link.split('"');
+        const labelWithoutTags = label.replace('</a>', '').replace('>', '');
+        return {
+            original: link,
+            href,
+            label: labelWithoutTags,
+        };
+    });
+};
+const getStrongsFromText = (text) => {
+    const strongs = text.match(/<strong[^>]*>(.*?)<\/strong>/g);
+    return strongs?.map((strong) => {
+        const label = strong.replace(/<strong[^>]*>/, '').replace(/<\/strong>/, '');
+        return {
+            original: strong,
+            label,
+        };
+    });
+};
+const renderText = (text, theme) => {
+    const links = getLinksFromText(text);
+    links?.forEach((link, i) => {
+        text = text.replace(link.original, `LINK-${i}###`);
+    });
+    const strongs = getStrongsFromText(text);
+    strongs?.forEach((strong, i) => {
+        text = text.replace(strong.original, `STRONG-${i}###`);
+    });
+    const mappedText = text.split(' ').map((word) => {
+        if (word.includes('LINK-')) {
+            const [linkId, postLabel] = word.split('###');
+            const entry = links?.[parseInt(linkId.replace('LINK-', ''))];
+            return (React.createElement(Fragment, { key: word },
+                React.createElement("a", { href: entry?.href, target: '_blank', style: { color: theme.colors.majestic_blue_soft } }, entry?.label),
+                postLabel ? `${postLabel} ` : ' '));
+        }
+        if (word.includes('STRONG-')) {
+            const [strongId, postLabel] = word.split('###');
+            const entry = strongs?.[parseInt(strongId.replace('STRONG-', ''))];
+            return (React.createElement(Fragment, { key: word },
+                React.createElement("strong", { style: { fontWeight: 600 } }, entry?.label),
+                postLabel ? `${postLabel} ` : ' '));
+        }
+        return word + ' ';
+    });
+    return mappedText;
+};
 const Text = ({ children, color, size, weight, align, family, opacity, decoration, ...props }) => {
-    return (React.createElement(TextWrapper$2, { "$color": color, "$size": size, "$weight": weight, "$align": align, "$family": family, "$opacity": opacity, "$decoration": decoration, ...props }, children));
+    const theme = Theme.useTheme();
+    const textArray = useMemo(() => {
+        const str = typeof children === 'string'
+            ? children
+            : Array.isArray(children)
+                ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    children
+                        .map((x) => (typeof x === 'object' && Object.hasOwn(x, 'props') ? x.props.children : x))
+                        .filter((x) => x && typeof x === 'string')
+                        .join(' ')
+                : '';
+        return str.split('\n');
+    }, [children]);
+    return (React.createElement(TextWrapper$2, { "$color": color, "$size": size, "$weight": weight, "$align": align, "$family": family, "$opacity": opacity, "$decoration": decoration, ...props }, textArray.map((str, i) => (React.createElement(Fragment, { key: `text-${i}-${str}` },
+        renderText(str, theme),
+        i !== textArray.length - 1 ? React.createElement("br", null) : null)))));
 };
 
 const ErrorWrapper = styled.div `
@@ -409,6 +474,7 @@ const FlexColumn = styled.div `
 `;
 const CenterThis = styled(FlexColumn) `
   width: 100%;
+  height: ${({ $height }) => $height || 'unset'};
   align-items: center;
   justify-content: center;
 `;
@@ -463,42 +529,13 @@ const TextBreakWord = styled(Text) `
   word-break: break-word;
   white-space: pre-wrap;
 `;
-const getLinksFromText = (text) => {
-    const links = text.match(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/g);
-    return links?.map((link) => {
-        const [_, href, label] = link.split('"');
-        const labelWithoutTags = label.replace('</a>', '').replace('>', '');
-        return {
-            original: link,
-            href,
-            label: labelWithoutTags,
-        };
-    });
-};
-const renderText = (text, theme) => {
-    const links = getLinksFromText(text);
-    links?.forEach((link, i) => {
-        text = text.replace(link.original, `LINK-${i}###`);
-    });
-    const mappedText = text.split(' ').map((word) => {
-        if (word.includes('LINK-')) {
-            const [linkId, postLabel] = word.split('###');
-            const entry = links?.[parseInt(linkId.replace('LINK-', ''))];
-            return (React.createElement(Fragment, { key: word },
-                React.createElement("a", { href: entry?.href, target: '_blank', style: { color: theme.colors.majestic_blue_soft } }, entry?.label),
-                postLabel ? `${postLabel} ` : ''));
-        }
-        return word + ' ';
-    });
-    return { mappedText, hasLinks: !!links?.length };
-};
 const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, children }) => {
     const theme = Theme.useTheme();
     const { popupRef, popupOpen, setPopupOpen, popupPosition, handlePosition } = usePopup({
         defaultClientHeight: 40,
         defaultClientwidth: Math.min((text?.length || 0) * 7.5, 300),
     });
-    const { mappedText, hasLinks } = useMemo(() => renderText(text || '', theme), [text, theme]);
+    const hasLinks = useMemo(() => !!getLinksFromText(text || '')?.length, [text]);
     const handleMouseEvent = (e) => {
         const { type, clientX, clientY } = e;
         if (hasLinks) {
@@ -521,7 +558,7 @@ const Tooltip = ({ withIcon, titleIcon: TitleIcon, title, text, timestamp, child
                     title && React.createElement(React.Fragment, null,
                         title,
                         "\u00A0-\u00A0"))),
-                React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, mappedText),
+                React.createElement(TextBreakWord, { size: 12, color: theme.text.info }, text),
                 !!timestamp && (React.createElement(Text, { size: 10, color: theme.text.darker_grey, family: 'secondary', style: { marginTop: '8px' } }, new Date(timestamp).toLocaleString()))))));
 };
 
@@ -17245,7 +17282,7 @@ const RenderValue = ({ type, value }) => {
             return React.createElement(InteractiveTable, { columns: columns, rows: rows, ...rest });
         }
         case DataCardFieldTypes.ActiveStatus: {
-            return React.createElement(Status, { status: value == 'true' ? StatusType.Success : StatusType.Error, title: value == 'true' ? 'Active' : 'Inactive', size: 10, withIcon: true, withBorder: true });
+            return React.createElement(Status, { status: value == 'true' ? StatusType.Success : StatusType.Error, title: value == 'true' ? DISPLAY_TITLES.ENABLED : DISPLAY_TITLES.DISABLED, size: 10, withIcon: true, withBorder: true });
         }
         case DataCardFieldTypes.CopyText: {
             const str = typeof value === 'string' ? value : JSON.stringify(value);
@@ -38449,4 +38486,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
                 React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
 };
 
-export { TextArea as $, AutocompleteInput as A, Button$4 as B, Checkbox as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, PopupForm as O, Popup as P, SectionTitle as Q, Segment as R, ScrollX as S, ToggleCodeComponent as T, SelectionButton as U, SkeletonLoader as V, Status as W, Stepper as X, TabList as Y, Tag as Z, Text as _, Badge as a, Toggle as a0, Tooltip as a1, TraceLoader as a2, WarningModal as a3, FlexRow as a4, FlexColumn as a5, CenterThis as a6, VerticalScroll as a7, Overlay as a8, ModalBody as a9, TableContainer as aa, TableTitleWrap as ab, TableWrap as ac, nodeConfig as ad, useNodesState as ae, useEdgesState as af, Flow as ag, applyNodeChanges as ah, AddButton$1 as ai, MarkerType as aj, CopyText as ak, PodContainer as al, SourceContainer as am, AddNode as an, BaseNode as ao, EdgedNode as ap, FrameNode as aq, HeaderNode as ar, MapItemNode as as, NoDataNode as at, ScrollNode as au, SkeletonNode as av, LabeledEdge as aw, Code as b, ConditionDetails as c, DataCardFields as d, DataCardFieldTypes as e, DataFinger as f, DataTab as g, DescribeRow as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };
+export { getLinksFromText as $, AutocompleteInput as A, Button$4 as B, Checkbox as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, PopupForm as O, Popup as P, SectionTitle as Q, Segment as R, ScrollX as S, ToggleCodeComponent as T, SelectionButton as U, SkeletonLoader as V, Status as W, Stepper as X, TabList as Y, Tag as Z, Text as _, Badge as a, getStrongsFromText as a0, renderText as a1, TextArea as a2, Toggle as a3, Tooltip as a4, TraceLoader as a5, WarningModal as a6, FlexRow as a7, FlexColumn as a8, CenterThis as a9, VerticalScroll as aa, Overlay as ab, ModalBody as ac, TableContainer as ad, TableTitleWrap as ae, TableWrap as af, nodeConfig as ag, useNodesState as ah, useEdgesState as ai, Flow as aj, applyNodeChanges as ak, AddButton$1 as al, MarkerType as am, CopyText as an, PodContainer as ao, SourceContainer as ap, AddNode as aq, BaseNode as ar, EdgedNode as as, FrameNode as at, HeaderNode as au, MapItemNode as av, NoDataNode as aw, ScrollNode as ax, SkeletonNode as ay, LabeledEdge as az, Code as b, ConditionDetails as c, DataCardFields as d, DataCardFieldTypes as e, DataFinger as f, DataTab as g, DescribeRow as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };

package/lib/{index-ba84d272.js → index-19b8f8bc.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-fdf3a268.js';
+import { T as Theme } from './index-90ccd949.js';
 
 const CodeIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();

package/lib/{index-1d5c06a0.js → index-6034549d.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-fdf3a268.js';
+import { T as Theme } from './index-90ccd949.js';
 
 const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-fdf3a268.js → index-90ccd949.js}

@@ -1017,6 +1017,10 @@ const DISPLAY_TITLES = {
     OVERIDDEN: 'Overridden',
     OVERRIDE_RUNTIME_DETAILS: 'Override Runtime Details',
     OVERRIDE_RUNTIME_WARNING: 'This is an advanced configuration. If the selected programming language is incorrect, data collection may be incomplete or may not occur at all.',
+    ACTIVE: 'Active',
+    INACTIVE: 'Inactive',
+    ENABLED: 'Enabled',
+    DISABLED: 'Disabled',
 };
 const BUTTON_TEXTS = {
     ADD: 'Add',

package/lib/{index-0d93b2b4.js → index-a067d6e9.js}

@@ -1,8 +1,8 @@
 import { StatusType, OtherStatus, SignalType } from './types.js';
 import 'react';
-import './index-fdf3a268.js';
+import './index-90ccd949.js';
 import 'styled-components';
-import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-1d5c06a0.js';
+import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-6034549d.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);

package/lib/{index-59aacfd1.js → index-b9d7a992.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-fdf3a268.js';
+import { T as Theme } from './index-90ccd949.js';
 
 const VmLogo = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();

package/lib/{index-c51fc6a4.js → index-ba4f9a19.js}

@@ -1,9 +1,9 @@
 import { StatusType, DestinationTypes, EntityTypes, PlatformType } from './types.js';
-import { a as DEFAULT_DATA_STREAM_NAME, e as getProgrammingLanguageIcon, k as KafkaLogo, K as K8sLogo } from './index-fdf3a268.js';
+import { a as DEFAULT_DATA_STREAM_NAME, e as getProgrammingLanguageIcon, k as KafkaLogo, K as K8sLogo } from './index-90ccd949.js';
 import 'react';
 import 'styled-components';
-import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, f as AxiomLogo, g as BlobStorageLogo, B as BetterStackLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, c as AwsCloudwatchLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, F as OpenTelemetryLogo, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, G as GigapipeLogo, T as QuickwitLogo, d as AwsS3Logo, U as SeqLogo, W as SignozLogo, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, e as AwsXrayLogo, a5 as NamespacesIcon, a7 as SourcesIcon, a4 as DestinationsIcon, a3 as ActionsIcon, a6 as RulesIcon, V as VmLogo } from './index-59aacfd1.js';
-import { O as OdigosLogo } from './index-1d5c06a0.js';
+import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, f as AxiomLogo, g as BlobStorageLogo, B as BetterStackLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, c as AwsCloudwatchLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, F as OpenTelemetryLogo, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, G as GigapipeLogo, T as QuickwitLogo, d as AwsS3Logo, U as SeqLogo, W as SignozLogo, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, e as AwsXrayLogo, a5 as NamespacesIcon, a7 as SourcesIcon, a4 as DestinationsIcon, a3 as ActionsIcon, a6 as RulesIcon, V as VmLogo } from './index-b9d7a992.js';
+import { O as OdigosLogo } from './index-6034549d.js';
 import { s as safeJsonParse } from './index-5e5f7bda.js';
 
 const compareCondition = (renderCondition, fields) => {

package/lib/{index-b5b322ad.js → index-c8aab9c4.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-fdf3a268.js';
+import { T as Theme } from './index-90ccd949.js';
 
 const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-3a26952d.js → index-e4e75973.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { a3 as WarningModal } from './index-0a99fd0b.js';
+import { a6 as WarningModal } from './index-192794e8.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-fdf3a268.js';
+import './index-90ccd949.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/snippets.js

@@ -1,15 +1,15 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-0a99fd0b.js';
-export { ai as AddButton, an as AddNode, ao as BaseNode, ak as CopyText, ap as EdgedNode, ag as Flow, aq as FrameNode, ar as HeaderNode, aw as LabeledEdge, as as MapItemNode, at as NoDataNode, al as PodContainer, au as ScrollNode, av as SkeletonNode, am as SourceContainer, ad as nodeConfig } from './index-0a99fd0b.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-192794e8.js';
+export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-192794e8.js';
 import React from 'react';
-import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-fdf3a268.js';
-import { E as EditIcon } from './index-ba84d272.js';
+import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-90ccd949.js';
+import { E as EditIcon } from './index-19b8f8bc.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-1d5c06a0.js';
+import { I as InfoIcon } from './index-6034549d.js';
 import './index-5e5f7bda.js';
-import './index-0d93b2b4.js';
+import './index-a067d6e9.js';
 import 'react-dom';
-import './useTransition-ba7b6d8a.js';
+import './useTransition-807be8bc.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/store/useFilterStore.d.ts

@@ -1,6 +1,6 @@
 import type { DropdownProps } from '@/components';
 export interface FiltersState {
-    searchText?: string;
+    searchText: string;
     statuses?: DropdownProps['options'];
     platformTypes?: DropdownProps['options'];
     namespaces?: DropdownProps['options'];

package/lib/store.js

@@ -1,4 +1,4 @@
-export { Q as useActiveNodeStore, a0 as useDarkMode, Y as useDataStreamStore, O as useDrawerStore, W as useEntityStore, X as useFilterStore, Z as useInstrumentStore, z as useModalStore, V as useNotificationStore, U as usePendingStore, $ as useSelectedStore, _ as useSetupStore } from './index-fdf3a268.js';
+export { Q as useActiveNodeStore, a0 as useDarkMode, Y as useDataStreamStore, O as useDrawerStore, W as useEntityStore, X as useFilterStore, Z as useInstrumentStore, z as useModalStore, V as useNotificationStore, U as usePendingStore, $ as useSelectedStore, _ as useSetupStore } from './index-90ccd949.js';
 import 'react';
 import './types.js';
 import 'styled-components';

package/lib/theme.js

@@ -1,4 +1,4 @@
-export { T as default } from './index-fdf3a268.js';
+export { T as default } from './index-90ccd949.js';
 import 'styled-components';
 import 'react';
 import './types.js';

package/lib/{useTransition-ba7b6d8a.js → useTransition-807be8bc.js}

@@ -1,4 +1,4 @@
-import { z as useModalStore, O as useDrawerStore, Q as useActiveNodeStore } from './index-fdf3a268.js';
+import { z as useModalStore, O as useDrawerStore, Q as useActiveNodeStore } from './index-90ccd949.js';
 import { AddNodeTypes, EntityTypes, PayloadCollectionKeyTypes, CodeAttributesKeyTypes, CustomInstrumentationsKeyTypes } from './types.js';
 import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import styled from 'styled-components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -108,7 +108,7 @@
     "@storybook/addon-docs": "^9.1.1",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/react-webpack5": "9.1.1",
-    "@types/node": "^24.2.0",
+    "@types/node": "^24.2.1",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "babel-loader": "^10.0.0",