@odigos/ui-kit 0.0.28 → 0.0.30

package/lib/containers.js

@@ -1,25 +1,25 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { D as DISPLAY_TITLES, A as ACTION_OPTIONS, M as MONITORS_OPTIONS, B as BUTTON_TEXTS, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CTgLYGo-.js';
+import { a as DISPLAY_TITLES, B as BUTTON_TEXTS, A as ACTION_OPTIONS, F as FORM_ALERTS, M as MONITORS_OPTIONS, D as DEFAULT_DATA_STREAM_NAME, I as INSTRUMENTATION_RULE_OPTIONS } from './index-DGuOxbBR.js';
 import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a4 as ModalBody, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, a0 as FlexColumn, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, J as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-CX75oR-h.js';
+import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, a0 as FlexColumn, M as Modal, N as NavigationButtons, a4 as ModalBody, J as NotificationNote, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, I as IconButton, A as AddButton$1, U as Stepper, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-nltUpkWT.js';
 import { h as usePendingStore, g as useNotificationStore, b as useDrawerStore, c as useEntityStore, f as useModalStore, d as useFilterStore, s as styleInject, i as useSelectedStore, e as useInstrumentStore, a as useDataStreamStore, k as getEntityId, j as useSetupStore, u as useDarkMode } from './index-DMXaEyAB.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
 import { i as CheckCircledIcon, O as OdigosLogo } from './index-IKusBlIE.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-CamnKrev.js';
 import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CFnxjzaW.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-CoaXePS_.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, b as useGenericForm, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-BSKilkmZ.js';
+import { u as useActionFormData, a as useClickNode, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-BWz8fTJr.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-B65KBqdK.js';
 import { E as EditIcon } from './index-CWbxXTof.js';
 import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, f as CheckIcon, A as ArrowIcon, a as CopyIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-8BSRffGz.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-BGK1nMOD.js';
 import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-CJs4RDHU.js';
-import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, v as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, u as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, c as compareCondition, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, t as isOverTime } from './index-BfatCMWq.js';
+import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, v as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, u as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, c as compareCondition, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, t as isOverTime } from './index-DYNMhZMX.js';
 import { createPortal } from 'react-dom';
-import { N as NoteBackToSummary, E as EditButton } from './index-R9xRto5r.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-B46Mcu9H.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-BRW_Nl-n.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-BbbCCewR.js';
 import './index-DGel4E-Z.js';
 import './index-7-KCQK-x.js';
 
@@ -305,7 +305,7 @@ const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$n = styled.div `
+const Container$o = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -316,7 +316,7 @@ const FieldTitle$1 = styled(Text) `
 `;
 const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$n, null,
+    return (React.createElement(Container$o, null,
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle$1, null, "Status"),
             React.createElement(Segment, { options: [
@@ -330,7 +330,7 @@ const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }
         React.createElement(TextArea, { title: 'Notes', value: formData['notes'], onChange: ({ target: { value } }) => handleFormChange('notes', value), errorMessage: formErrors['notes'] })));
 };
 
-const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip, icons, iconSrcs, isEdit = false, isFormDirty = false, isLastItem = false, onEdit, onSave, onDelete, onCancel, tabs }, drawerRef) => {
+const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip, hideEditTitleFromEdit, icons, iconSrcs, isEdit = false, isFormDirty = false, isLastItem = false, onEdit, onSave, onDelete, onCancel, tabs }, drawerRef) => {
     const theme = Theme.useTheme();
     const { isThisPending } = usePendingStore();
     const { addNotification } = useNotificationStore();
@@ -414,7 +414,7 @@ const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip,
             onClick: isPending ? () => handlePending(isSource ? 'uninstrument' : 'delete') : clickDelete,
             children: (React.createElement(React.Fragment, null,
                 React.createElement(TrashIcon, null),
-                React.createElement(Text, { color: theme.text.error, size: 14, family: 'secondary', decoration: 'underline' }, isSource ? 'Uninstrument' : 'Delete'))),
+                React.createElement(Text, { color: theme.text.error, size: 14, family: 'secondary', decoration: 'underline' }, isSource ? BUTTON_TEXTS.UNINSTRUMENT : BUTTON_TEXTS.DELETE))),
         });
     return (React.createElement(React.Fragment, null,
         React.createElement(Drawer, { isOpen: true, onClose: isEdit ? clickCancel : closeDrawer, closeOnEscape: !isDeleteModalOpen && !isCancelModalOpen, width: `${width + 64}px`, header: {
@@ -422,7 +422,7 @@ const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip,
                 iconSrcs,
                 title,
                 titleTooltip,
-                replaceTitleWith: !isSource && isEdit ? React.createElement(EditTitle, { ref: titleRef, title: title }) : undefined,
+                replaceTitleWith: !hideEditTitleFromEdit && isEdit ? React.createElement(EditTitle, { ref: titleRef, title: title }) : undefined,
                 actionButtons,
                 tabs,
             }, footer: {
@@ -432,25 +432,27 @@ const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip,
                         'data-id': 'drawer-save',
                         variant: 'primary',
                         onClick: clickSave,
-                        children: 'save',
+                        children: BUTTON_TEXTS.SAVE,
                     },
                     {
                         'data-id': 'drawer-cancel',
                         variant: 'secondary',
                         onClick: clickCancel,
-                        children: 'cancel',
-                    },
-                ],
-                rightButtons: [
-                    {
-                        'data-id': 'drawer-delete',
-                        variant: 'tertiary',
-                        onClick: clickDelete,
-                        children: (React.createElement(React.Fragment, null,
-                            React.createElement(TrashIcon, null),
-                            React.createElement(Text, { size: 14, color: theme.text.error, family: 'secondary', decoration: 'underline' }, "delete"))),
+                        children: BUTTON_TEXTS.CANCEL,
                     },
                 ],
+                rightButtons: onDelete
+                    ? [
+                        {
+                            'data-id': 'drawer-delete',
+                            variant: 'tertiary',
+                            onClick: clickDelete,
+                            children: (React.createElement(React.Fragment, null,
+                                React.createElement(TrashIcon, null),
+                                React.createElement(Text, { size: 14, color: theme.text.error, family: 'secondary', decoration: 'underline' }, BUTTON_TEXTS.DELETE))),
+                        },
+                    ]
+                    : [],
             } }, children),
         React.createElement(DeleteWarning, { isOpen: isDeleteModalOpen, noOverlay: true, name: `${drawerType}${title ? ` (${title})` : ''}`, type: drawerType, isLastItem: isLastItem, onApprove: handleDelete, onDeny: closeWarningModals }),
         React.createElement(CancelWarning, { isOpen: isCancelModalOpen, noOverlay: true, name: 'edit mode', onApprove: handleCancel, onDeny: closeWarningModals })));
@@ -468,7 +470,7 @@ const EditTitle = forwardRef(({ title }, ref) => {
     return React.createElement(Input, { "data-id": 'title', value: inputValue, onChange: (e) => setInputValue(e.target.value) });
 });
 
-const FormContainer$3 = styled.div `
+const FormContainer$4 = styled.div `
   width: 100%;
   height: 100%;
   max-height: calc(100vh - 220px);
@@ -526,7 +528,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
             setIsFormDirty(false);
         }
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.spec.actionName || thisItem.type, icons: [getActionIcon(thisItem.type)], isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$3, null,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.spec.actionName || thisItem.type, icons: [getActionIcon(thisItem.type)], isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$4, null,
         React.createElement(ActionForm, { isUpdate: true, action: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
@@ -535,6 +537,10 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
         React.createElement(DataCard, { title: DISPLAY_TITLES.ACTION_DETAILS, data: !!thisItem ? buildCard$3(thisItem) : [] })))));
 };
 
+const GapAndMargin$1 = styled(FlexColumn) `
+  margin-top: 24px;
+  gap: 12px;
+`;
 const ActionModal = ({ createAction }) => {
     const { currentModal, setCurrentModal } = useModalStore();
     const isOpen = currentModal === EntityTypes.Action;
@@ -568,7 +574,9 @@ const ActionModal = ({ createAction }) => {
             ] }) },
         React.createElement(ModalBody, null,
             React.createElement(SectionTitle, { title: 'Select Action', description: 'Select an action to modify telemetry data before it`s sent to destinations. Choose an action type and configure its details.' }),
-            React.createElement(AutocompleteInput, { options: ACTION_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), style: { marginTop: '24px' }, autoFocus: !selectedItem?.type }),
+            React.createElement(GapAndMargin$1, null,
+                React.createElement(NotificationNote, { type: StatusType.Warning, message: FORM_ALERTS.DEFINED_FOR_ALL_STREAMS(DISPLAY_TITLES.ACTIONS) }),
+                React.createElement(AutocompleteInput, { options: ACTION_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), autoFocus: !selectedItem?.type })),
             !!selectedItem?.type ? (React.createElement("div", null,
                 React.createElement(Divider, { margin: '16px 0' }),
                 React.createElement(ActionForm, { action: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange }))) : null)));
@@ -746,7 +754,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$m = styled(FlexColumn) `
+const Container$n = styled(FlexColumn) `
   // width: 100vw;
   // height: 100vh;
   gap: 64px;
@@ -759,7 +767,7 @@ const TextWrap = styled(FlexColumn) `
   align-items: center;
   justify-content: center;
 `;
-const Title$3 = styled(Text) `
+const Title$4 = styled(Text) `
   text-align: center;
   font-size: 24px;
 `;
@@ -780,12 +788,12 @@ const AwaitPipeline = () => {
     useEffect(() => {
         awaitPipeline();
     }, []);
-    return (React.createElement(Container$m, null,
+    return (React.createElement(Container$n, null,
         React.createElement(OdigosLogoText, { size: 100 }),
         React.createElement(TraceLoader, { width: 400 }),
         React.createElement(TextWrap, null,
             React.createElement(FlexRow, { "$gap": 16 },
-                React.createElement(Title$3, null, "Preparing your workspace..."),
+                React.createElement(Title$4, null, "Preparing your workspace..."),
                 React.createElement(Badge, { label: `${progress}%` })),
             React.createElement(Description, null, "It can take up to a few minutes. Grab a cup of coffee, look out a window, and enjoy your free moment!"))));
 };
@@ -805,7 +813,7 @@ const Tab = styled(FlexRow) `
       }
     `}
 `;
-const Title$2 = styled(Text) `
+const Title$3 = styled(Text) `
   font-size: 14px;
   margin-right: 10px;
   color: ${({ theme }) => theme.text.secondary};
@@ -860,7 +868,7 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
     return (React.createElement(RelativeContainer$3, { ref: containerRef },
         React.createElement(Tab, { "$withSelect": withSelect, onClick: () => setIsOpen((prev) => !prev) },
             React.createElement(LogoWrap, null, !!Icon ? React.createElement(Icon, { size: 20, fill: theme.text.info }) : React.createElement(OverviewIcon, { fill: theme.text.info })),
-            React.createElement(Title$2, null, selected?.name || selected?.id || 'no platform'),
+            React.createElement(Title$3, null, selected?.name || selected?.id || 'no platform'),
             withSelect && (React.createElement(PushToEnd$1, null,
                 React.createElement(ExtendArrow, { extend: isOpen, align: 'right' })))),
         isOpen && withSelect && (React.createElement(AbsoluteContainer$3, null,
@@ -1019,14 +1027,14 @@ const KindDropdown = ({ sources, title = 'Kind', value, onSelect, onDeselect, ..
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const Container$l = styled.div `
+const Container$m = styled.div `
   display: flex;
   align-items: center;
   margin: 20px 0;
   padding: 0 16px;
   gap: 8px;
 `;
-const Title$1 = styled(Text) `
+const Title$2 = styled(Text) `
   font-size: 24px;
   white-space: nowrap;
 `;
@@ -1039,10 +1047,10 @@ const ComputePlatformsActionsMenu = ({ connections }) => {
     useEffect(() => {
         return () => clearAll();
     }, [clearAll]);
-    return (React.createElement(Container$l, null,
+    return (React.createElement(Container$m, null,
         React.createElement(FlexRow, { "$gap": 16 },
             React.createElement(FlexRow, { "$gap": 12 },
-                React.createElement(Title$1, null, "Compute platforms"),
+                React.createElement(Title$2, null, "Compute platforms"),
                 React.createElement(Badge, { label: connections.length, filled: !!connections.length })),
             React.createElement(Divider, { orientation: 'vertical', length: '20px', margin: '0' }),
             React.createElement(SearchAndFilterWrapper, null,
@@ -12796,7 +12804,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
  */
 memo(ResizeControl);
 
-const Container$k = styled(FlexColumn) `
+const Container$l = styled(FlexColumn) `
   align-items: center !important;
   justify-content: center;
   align-self: stretch;
@@ -12819,7 +12827,7 @@ const Container$k = styled(FlexColumn) `
 const TitleWrapper = styled(FlexRow) `
   gap: 4px;
 `;
-const Title = styled(Text) `
+const Title$1 = styled(Text) `
   font-size: 14px;
   font-weight: 600;
 `;
@@ -12833,24 +12841,24 @@ const AddNode = memo(({ id: nodeId, data }) => {
     const { isThisPending } = usePendingStore();
     const entity = nodeId.split('-')[0];
     const isPending = isThisPending({ entityType: entity });
-    return (React.createElement(Container$k, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$l, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         isPending ? (React.createElement(Fragment, null,
             React.createElement(TitleWrapper, null,
                 React.createElement(FadeLoader, null),
-                React.createElement(Title, { family: 'secondary' },
+                React.createElement(Title$1, { family: 'secondary' },
                     "adding ",
                     entity,
                     "s")),
             React.createElement(SubTitle, null, "Just a few more seconds..."))) : (React.createElement(Fragment, null,
             React.createElement(TitleWrapper, null,
                 React.createElement(PlusIcon$1, null),
-                React.createElement(Title, { family: 'secondary', decoration: 'underline' }, title)),
+                React.createElement(Title$1, { family: 'secondary', decoration: 'underline' }, title)),
             React.createElement(SubTitle, null, subTitle))),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } })));
 });
 
-const Container$j = styled.div `
+const Container$k = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
 `;
 const BaseNode = memo(({ id: nodeId, data }) => {
@@ -12883,7 +12891,7 @@ const BaseNode = memo(({ id: nodeId, data }) => {
         }
         setSelectedSources(namespaces);
     };
-    return (React.createElement(Container$j, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$k, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         React.createElement(DataTab, { title: title, subTitle: subTitle, onClick: () => { }, renderActions: renderActions, iconProps: {
                 icon: icon,
                 icons: icons,
@@ -12903,19 +12911,19 @@ const BaseNode = memo(({ id: nodeId, data }) => {
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } })));
 });
 
-const Container$i = styled.div `
+const Container$j = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   height: ${({ $nodeHeight }) => `${$nodeHeight}px`};
   opacity: 0;
 `;
 const EdgedNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$i, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$j, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
 
-const Container$h = styled.div `
+const Container$i = styled.div `
   width: ${({ $nodeWidth }) => $nodeWidth}px;
   height: ${({ $nodeHeight }) => $nodeHeight}px;
   background: transparent;
@@ -12924,7 +12932,7 @@ const Container$h = styled.div `
 `;
 const FrameNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$h, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$i, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
@@ -12939,7 +12947,7 @@ const nodeConfig = {
 };
 
 const { framePadding: framePadding$3 } = nodeConfig;
-const Container$g = styled.div `
+const Container$h = styled.div `
   position: relative;
   z-index: 1;
   width: fit-content;
@@ -12987,7 +12995,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
         current?.addEventListener('scroll', handleScroll);
         return () => current?.removeEventListener('scroll', handleScroll);
     }, [onScroll]);
-    return (React.createElement(Container$g, { ref: containerRef, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$h, { ref: containerRef, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         items.map((item) => (React.createElement(BaseNodeWrapper, { key: item.id, onClick: (e) => {
                 e.stopPropagation();
                 // @ts-ignore
@@ -12997,7 +13005,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
         React.createElement(BottomOverlay, { "$hide": isBottomOfList })));
 });
 
-const Container$f = styled.div `
+const Container$g = styled.div `
   position: relative;
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   padding: 12px 0px 16px 0px;
@@ -13066,7 +13074,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
             setSelectedSources({});
         }
     };
-    return (React.createElement(Container$f, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$g, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         entityType === EntityTypes.Source && (React.createElement(SelectorWrapper, null,
             React.createElement(Checkbox, { partiallyChecked: hasSelected && sources?.length !== totalSelectedSources, value: hasSelected && sources?.length === totalSelectedSources, onChange: onSelect, disabled: !sources?.length }))),
         React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : badge, badgeTooltip: badgeTooltip, loading: isFetching && !isSourceAwaitingInstrumentation }),
@@ -13128,12 +13136,12 @@ const LabeledEdge = memo(({ id, sourceX, sourceY, targetX, targetY, sourcePositi
                 React.createElement(Tooltip, { text: 'Heads up! The data-flow metrics you see are calculated over 10-second intervals.' }, data?.label)))));
 });
 
-const Container$e = styled.div `
+const Container$f = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
 `;
 const SkeletonNode = memo(({ id: nodeId, data }) => {
     const { nodeWidth } = data;
-    return (React.createElement(Container$e, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$f, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         React.createElement(SkeletonLoader, { size: 3 })));
 });
 
@@ -13628,7 +13636,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
     return nodes;
 };
 
-const Container$d = styled.div `
+const Container$e = styled.div `
   width: 100%;
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
   position: relative;
@@ -13704,7 +13712,7 @@ const DataFlow = ({ heightToRemove, metrics }) => {
         });
         handleNodesChanged(ruleNodes, EntityTypes.InstrumentationRule);
     }, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule]]);
-    return (React.createElement(Container$d, { ref: containerRef, "$heightToRemove": heightToRemove },
+    return (React.createElement(Container$e, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange })));
 };
 
@@ -13717,11 +13725,12 @@ const AbsoluteContainer$2 = styled.div `
   top: calc(100% + 8px);
   left: 0;
   z-index: 1;
+  width: 420px;
+  padding: ${({ $padding }) => $padding || 'unset'};
+  display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};
   background-color: ${({ theme }) => theme.colors.dropdown_bg};
   border: ${({ theme }) => `1px solid ${theme.colors.border}`};
   border-radius: 24px;
-  width: 420px;
-  display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};
 `;
 
 const buildSearchResults = ({ instrumentationRules, sources, actions, destinations, searchText, selectedCategory }) => {
@@ -13803,6 +13812,10 @@ const SearchResults = ({ searchText, onClose }) => {
         searchText,
         selectedCategory,
     }), [instrumentationRules, sources, actions, destinations, selectedStreamName, searchText, selectedCategory]);
+    if (!searchResults.length) {
+        return (React.createElement(AbsoluteContainer$2, { "$padding": '12px' },
+            React.createElement(NoDataFound, null)));
+    }
     return (React.createElement(AbsoluteContainer$2, null,
         React.createElement(HorizontalScroll, { style: { borderBottom: `1px solid ${!searchResults.length ? 'transparent' : theme.colors.border}` } }, categories.map(({ category, label, count }) => !!count && (React.createElement(SelectionButton, { key: `category-select-${category}`, label: label, badgeLabel: count, isSelected: selectedCategory === category, onClick: () => setSelectedCategory(category) })))),
         searchResults.map(({ category, label, entities }, catIdx) => !!entities.length && (React.createElement(Fragment, { key: `category-list-${category}` },
@@ -13924,6 +13937,58 @@ const Filters$1 = () => {
                     React.createElement(ActionButton$1, { variant: 'tertiary', onClick: onReset, "$color": theme.text.error }, "Reset"))))));
 };
 
+const Container$d = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 4px;
+`;
+const DataStreamForm = ({ formData, handleFormChange }) => {
+    return (React.createElement(Container$d, null,
+        React.createElement(Input, { name: 'name', title: DISPLAY_TITLES.STREAM_NAME, required: true, value: formData.name, onChange: ({ target: { value } }) => handleFormChange('name', value) })));
+};
+
+const FormContainer$3 = styled.div `
+  width: 100%;
+  height: 100%;
+  max-height: calc(100vh - 220px);
+  overflow: overlay;
+  overflow-y: auto;
+`;
+const DataStreamDrawer = ({ isOpen, onClose, dataStreamName, updateDataStream }) => {
+    const { dataStreams } = useDataStreamStore();
+    const drawerRef = useRef(null);
+    const [isFormDirty, setIsFormDirty] = useState(false);
+    const { formData, handleFormChange, resetFormData, loadFormWithDrawerItem } = useDataStreamFormData({ name: dataStreamName });
+    const thisItem = useMemo(() => {
+        if (!isOpen)
+            return null;
+        const found = dataStreams?.find((x) => x.name === dataStreamName);
+        if (found)
+            loadFormWithDrawerItem(found);
+        return found;
+    }, [isOpen, dataStreams, dataStreamName]);
+    if (!thisItem)
+        return null;
+    const handleCancel = () => {
+        resetFormData();
+        setIsFormDirty(false);
+        onClose();
+    };
+    const handleSave = () => {
+        updateDataStream(dataStreamName, formData);
+        setIsFormDirty(false);
+        onClose();
+    };
+    const memoizedHandleFormChange = useCallback((key, val) => {
+        handleFormChange(key, val);
+        setIsFormDirty(true);
+    }, [handleFormChange]);
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.name, icons: [DataStreamsIcon], hideEditTitleFromEdit: true, isEdit: true, isFormDirty: isFormDirty, onSave: handleSave, onCancel: handleCancel },
+        React.createElement(FormContainer$3, null,
+            React.createElement(DataStreamForm, { formData: formData, handleFormChange: memoizedHandleFormChange }))));
+};
+
 const RelativeContainer$1 = styled.div `
   position: relative;
 `;
@@ -13935,6 +14000,9 @@ const Container$c = styled(FlexRow) `
     max-height: 28px;
   }
 `;
+const Title = styled(Text) `
+  text-wrap: nowrap;
+`;
 const AbsoluteContainer$1 = styled.div `
   position: absolute;
   top: calc(100% + 8px);
@@ -13945,36 +14013,64 @@ const AbsoluteContainer$1 = styled.div `
   border-radius: 24px;
   width: 420px;
 `;
-const SelectionMenuHeadWrap = styled.div `
+const SelectionMenuHeader = styled.div `
   border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
   padding: 12px;
 `;
-const SelectionWrap = styled(VerticalScroll) `
+const SelectionContent = styled(VerticalScroll) `
   max-height: 240px;
 `;
-const DataStreamSelect = ({ onClickNewDataStream }) => {
+const SelectionRow = styled(FlexRow) `
+  width: 100%;
+`;
+const Stretch = styled.div `
+  width: 100%;
+`;
+const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataStream }) => {
     const theme = Theme.useTheme();
     const { dataStreams, selectedStreamName, setSelectedStreamName } = useDataStreamStore();
-    const containerRef = useRef(null);
     const [popupOpen, setPopupOpen] = useState(false);
+    const containerRef = useRef(null);
     useOnClickOutside(containerRef, () => setPopupOpen(false));
+    const [editOpenForDataStreamName, setEditOpenForDataStreamName] = useState('');
+    const [deleteOpenForDataStreamName, setDeleteOpenForDataStreamName] = useState('');
     const [searchText, setSearchText] = useState('');
     const filteredDataStreams = useMemo(() => dataStreams.filter(({ name }) => !searchText || name.toLowerCase().includes(searchText.toLowerCase())), [dataStreams, searchText]);
-    return (React.createElement(RelativeContainer$1, null,
-        React.createElement(Container$c, { "$gap": 0 },
-            React.createElement(Button, { variant: 'tertiary', onClick: () => setPopupOpen((prev) => !prev) },
-                React.createElement(DataStreamsIcon, { fill: theme.text.info }),
-                React.createElement(Text, null, selectedStreamName),
-                React.createElement(ExtendArrow, { extend: popupOpen })),
-            React.createElement(Divider, { orientation: 'vertical', length: '32px', thickness: 2, margin: '0' }),
-            React.createElement(AddButton$1, { onClick: onClickNewDataStream, label: BUTTON_TEXTS.NEW })),
-        popupOpen && (React.createElement(AbsoluteContainer$1, { ref: containerRef },
-            React.createElement(SelectionMenuHeadWrap, null,
-                React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value) })),
-            React.createElement(SelectionWrap, null, filteredDataStreams.map(({ name }) => (React.createElement(SelectionButton, { key: `stream-${name}`, label: name, isSelected: selectedStreamName === name, onClick: () => {
+    const rows = useMemo(() => filteredDataStreams.map(({ name }) => (React.createElement(SelectionRow, { key: `stream-${name}` },
+        React.createElement(Stretch, null,
+            React.createElement(SelectionButton, { label: name, isSelected: selectedStreamName === name, onClick: () => {
                     setSelectedStreamName(name);
                     setPopupOpen(false);
-                }, color: 'transparent', style: { width: '100%', justifyContent: 'flex-start' } }))))))));
+                }, color: 'transparent', style: { width: '100%', justifyContent: 'flex-start' } })),
+        name !== DEFAULT_DATA_STREAM_NAME && (React.createElement(IconButton, { onClick: () => setDeleteOpenForDataStreamName(name), tooltip: BUTTON_TEXTS.DELETE },
+            React.createElement(TrashIcon, null))),
+        React.createElement(IconButton, { onClick: () => setEditOpenForDataStreamName(name), tooltip: BUTTON_TEXTS.EDIT },
+            React.createElement(EditIcon, null))))), [filteredDataStreams, selectedStreamName]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(RelativeContainer$1, null,
+            React.createElement(Container$c, { "$gap": 0 },
+                React.createElement(Button, { variant: 'tertiary', onClick: () => setPopupOpen((prev) => !prev) },
+                    React.createElement(DataStreamsIcon, { fill: theme.text.info }),
+                    React.createElement(Title, null,
+                        "Data Stream: ",
+                        selectedStreamName),
+                    React.createElement(ExtendArrow, { extend: popupOpen }),
+                    React.createElement(Badge, { label: dataStreams.length })),
+                React.createElement(Divider, { orientation: 'vertical', length: '32px', thickness: 2, margin: '0' }),
+                React.createElement(AddButton$1, { onClick: onClickNewDataStream, label: BUTTON_TEXTS.NEW })),
+            popupOpen && (React.createElement(AbsoluteContainer$1, { ref: containerRef },
+                React.createElement(SelectionMenuHeader, null,
+                    React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value) })),
+                React.createElement(SelectionContent, null, rows)))),
+        React.createElement(DeleteWarning, { isOpen: deleteOpenForDataStreamName !== '', name: deleteOpenForDataStreamName, onApprove: () => {
+                deleteDataStream(deleteOpenForDataStreamName);
+                setDeleteOpenForDataStreamName('');
+            }, onDeny: () => {
+                setDeleteOpenForDataStreamName('');
+            } }),
+        React.createElement(DataStreamDrawer, { isOpen: editOpenForDataStreamName !== '', onClose: () => {
+                setEditOpenForDataStreamName('');
+            }, dataStreamName: editOpenForDataStreamName, updateDataStream: updateDataStream })));
 };
 
 const Container$b = styled.div `
@@ -13988,10 +14084,10 @@ const Container$b = styled.div `
 const PushToEnd = styled.div `
   margin-left: auto;
 `;
-const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream }) => {
+const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream, updateDataStream, deleteDataStream }) => {
     const { setCurrentModal } = useModalStore();
     return (React.createElement(Container$b, null,
-        onClickNewDataStream && React.createElement(DataStreamSelect, { onClickNewDataStream: onClickNewDataStream }),
+        React.createElement(DataStreamSelect, { onClickNewDataStream: onClickNewDataStream, updateDataStream: updateDataStream, deleteDataStream: deleteDataStream }),
         React.createElement(Search, null),
         React.createElement(Filters$1, null),
         addEntity && (React.createElement(PushToEnd, null,
@@ -13999,25 +14095,13 @@ const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream }) => {
 };
 
 const DataStreamSelectionForm = forwardRef(({ isModal, onClickSummary }, ref) => {
-    const { selectedStreamName, dataStreams } = useDataStreamStore();
-    const { formData, handleFormChange, formErrors, handleErrorChange } = useGenericForm({
-        name: selectedStreamName,
-    });
+    const { dataStreams, selectedStreamName } = useDataStreamStore();
+    const dataStreamOptions = useMemo(() => dataStreams.map(({ name }) => ({ label: name })), [dataStreams]);
+    const { formData, handleFormChange, formErrors, validateForm } = useDataStreamFormData({ name: selectedStreamName });
     useImperativeHandle(ref, () => ({
-        validateForm: () => {
-            let isValid = true;
-            if (!formData['name']) {
-                isValid = false;
-                handleErrorChange('name', FORM_ALERTS.FIELD_IS_REQUIRED);
-            }
-            else {
-                handleErrorChange('name', undefined);
-            }
-            return isValid;
-        },
+        validateForm,
         getFormValues: () => formData,
     }));
-    const dataStreamOptions = useMemo(() => dataStreams.map(({ name }) => ({ label: name })), [dataStreams]);
     return (React.createElement(ModalBody, { "$isNotModal": !isModal, "$minHeight": '70vh' },
         React.createElement(FlexColumn, { "$gap": 24 },
             onClickSummary && React.createElement(NoteBackToSummary, { onClick: onClickSummary }),
@@ -14475,19 +14559,19 @@ const SideMenuWrapper = styled.div `
     display: none;
   }
 `;
-const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, testConnection }) => {
+const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, updateDestination, testConnection }) => {
     const { destinations } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
     const { currentModal, setCurrentModal } = useModalStore();
     const { addConfiguredDestination, addConfiguredDestinationUpdateOnly } = useSetupStore();
     const isOpen = currentModal === EntityTypes.Destination;
     const [selectedItem, setSelectedItem] = useState(undefined);
-    const { formData, formErrors, handleFormChange, resetFormData, validateForm, setYamlFields, dynamicFields, setDynamicFields } = useDestinationFormData({
+    const { formData, formErrors, handleFormChange, resetFormData, validateForm, setYamlFields, dynamicFields, setDynamicFields, loadFormWithDrawerItem } = useDestinationFormData({
         supportedSignals: selectedItem?.supportedSignals,
         preLoadedFields: selectedItem?.fields,
     });
     const getDestPayload = (alreadyConfigDest) => {
-        const fields = alreadyConfigDest ? safeJsonParse(alreadyConfigDest.fields, {}) : {};
+        const fields = {};
         if (!alreadyConfigDest) {
             dynamicFields.forEach((f) => {
                 fields[f.name] = (f.componentType === FieldTypes.Dropdown ? f.value?.value || '' : f.value);
@@ -14499,7 +14583,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
             dataStreamNames: alreadyConfigDest?.dataStreamNames || [],
             conditions: alreadyConfigDest?.conditions || [],
             exportedSignals: alreadyConfigDest?.exportedSignals || formData.exportedSignals,
-            fields: JSON.stringify(fields),
+            fields: alreadyConfigDest?.fields || JSON.stringify(fields),
             destinationType: alreadyConfigDest?.destinationType || {
                 type: selectedItem.type,
                 displayName: selectedItem.displayName,
@@ -14512,15 +14596,29 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         };
     };
     const handleAdd = (alreadyConfigDest) => {
-        // Handle case from already configured
-        if (alreadyConfigDest)
-            return addConfiguredDestinationUpdateOnly(getDestPayload(alreadyConfigDest));
         // Handle new cases from onboarding
-        if (isOnboarding)
-            return addConfiguredDestination(getDestPayload());
+        if (isOnboarding && !alreadyConfigDest) {
+            const payload = getDestPayload();
+            addConfiguredDestination(payload);
+        }
+        // Handle already configured cases from onboarding
+        else if (isOnboarding && alreadyConfigDest) {
+            const payload = getDestPayload(alreadyConfigDest);
+            addConfiguredDestinationUpdateOnly(payload);
+        }
         // Handle new cases from overview
-        else
-            return createDestination(formData);
+        else if (!isOnboarding && !alreadyConfigDest) {
+            createDestination(formData);
+        }
+        // Handle already configured cases from overview
+        else if (!isOnboarding && alreadyConfigDest) {
+            const payload = getDestPayload(alreadyConfigDest);
+            const payloadForm = loadFormWithDrawerItem(payload);
+            updateDestination(alreadyConfigDest.id, payloadForm);
+        }
+        else {
+            console.warn('DestinationModal: handleAdd: No action taken, no destination or already configured destination found');
+        }
     };
     const handleClose = () => {
         resetFormData();
@@ -14657,7 +14755,7 @@ const DestinationSelectionForm = ({ isSourcesListEmpty, goToSources, categories,
                         React.createElement(PlusIcon$1, null),
                         React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, DISPLAY_TITLES.ADD_DESTINATION))),
                 React.createElement(DestinationList, { withDelete: true }))),
-        React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, createDestination: () => { }, testConnection: testConnection })));
+        React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, updateDestination: () => { }, createDestination: () => { }, testConnection: testConnection })));
 };
 
 const columns$2 = [
@@ -15041,6 +15139,10 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
             } }))) : (React.createElement(DataCard, { title: 'Instrumentation Rule Details', data: !!thisItem ? buildCard$1(thisItem) : [] }))));
 };
 
+const GapAndMargin = styled(FlexColumn) `
+  margin-top: 24px;
+  gap: 12px;
+`;
 const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) => {
     const { currentModal, setCurrentModal } = useModalStore();
     const isOpen = currentModal === EntityTypes.InstrumentationRule;
@@ -15074,8 +15176,9 @@ const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) =
             ] }) },
         React.createElement(ModalBody, null,
             React.createElement(SectionTitle, { title: 'Select Instrumentation Rule', description: 'Define how telemetry is recorded from your application. Choose a rule type and configure the details.' }),
-            !isEnterprise && React.createElement(NotificationNote, { type: StatusType.Default, message: FORM_ALERTS.ENTERPRISE_ONLY('Instrumentation Rules'), style: { marginTop: '24px' } }),
-            React.createElement(AutocompleteInput, { options: INSTRUMENTATION_RULE_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), style: { marginTop: isEnterprise ? '24px' : '12px' }, autoFocus: !selectedItem?.type }),
+            React.createElement(GapAndMargin, null,
+                !isEnterprise ? (React.createElement(NotificationNote, { type: StatusType.Default, message: FORM_ALERTS.ENTERPRISE_ONLY(DISPLAY_TITLES.INSTRUMENTATION_RULES) })) : (React.createElement(NotificationNote, { type: StatusType.Warning, message: FORM_ALERTS.DEFINED_FOR_ALL_STREAMS(DISPLAY_TITLES.INSTRUMENTATION_RULES) })),
+                React.createElement(AutocompleteInput, { options: INSTRUMENTATION_RULE_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), autoFocus: !selectedItem?.type })),
             !!selectedItem?.type ? (React.createElement("div", null,
                 React.createElement(Divider, { margin: '16px 0' }),
                 React.createElement(InstrumentationRuleForm, { rule: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange }))) : null)));
@@ -15408,8 +15511,8 @@ const NamespaceItem = styled.div `
   }
 `;
 const SourceItem = styled(NamespaceItem) `
-  width: calc(100% - 50px);
-  margin-left: auto;
+  width: calc(100% - 100px);
+  margin: 0 auto;
   padding: 8px;
 `;
 const RelativeWrapper = styled.div `
@@ -15434,6 +15537,7 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
     if (!matrix?.length) {
         return (React.createElement(CenterThis, null, namespacesLoading ? (React.createElement(FadeLoader, null)) : (React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_SOURCES, subTitle: onSelectNamespace ? DISPLAY_TITLES.PLEASE_MAKE_SURE_UNIGNORED_NAMESPACES : DISPLAY_TITLES.PLEASE_ADD_SOURCE }))));
     }
+    const NamespaceIcon = getEntityIcon(EntityTypes.Namespace);
     return (React.createElement(Container$4, { "$isModal": isModal }, matrix.map(([namespace, sources]) => {
         const sourcesForNamespace = selectedSources?.[namespace] || [];
         const onlySelectedSources = sourcesForNamespace.filter(({ selected }) => selected);
@@ -15442,12 +15546,14 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
         const isNamespaceAllSourcesSelected = onlySelectedSources.length > 0 && onlySelectedSources.length === sources.length;
         const isNamespacePartiallySourcesSelected = onlySelectedSources.length > 0 && onlySelectedSources.length !== sources.length;
         const hasSources = sources.length > 0;
+        const onlyOneSource = sources.length === 1;
         if (!onSelectNamespace && !hasSources)
             return null;
         return (React.createElement(Group, { key: `namespace-${namespace}`, "data-id": `namespace-${namespace}`, "$selected": isNamespaceAllSourcesSelected, "$isOpen": isNamespaceSelected },
             React.createElement(NamespaceItem, { "$selected": isNamespaceAllSourcesSelected, "$withClick": !!onSelectNamespace, onClick: () => onSelectNamespace?.(namespace) },
                 React.createElement(FlexRow, { "$gap": 12 },
                     onSelectNamespace && React.createElement(Checkbox, { partiallyChecked: isNamespacePartiallySourcesSelected, value: isNamespaceAllSourcesSelected, onChange: (bool) => onSelectNamespace(namespace, bool) }),
+                    React.createElement(NamespaceIcon, null),
                     React.createElement(Text, null, namespace)),
                 React.createElement(FlexRow, { "$gap": 12 },
                     React.createElement(SelectionCount, { size: 10, color: theme.text.grey }, isNamespaceLoaded ? `${onlySelectedSources.length}/${sources.length}` : null),
@@ -15455,7 +15561,7 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
             (isNamespaceSelected || !onSelectNamespace) &&
                 (hasSources ? (React.createElement(RelativeWrapper, { "$addPadding": !onSelectSource },
                     React.createElement(AbsoluteWrapper, null,
-                        React.createElement(Divider, { orientation: 'vertical', length: `${(sources.length || 0) * 36}px` })),
+                        React.createElement(Divider, { orientation: 'vertical', length: `${onlyOneSource ? 24 : (sources.length) * 34}px` })),
                     sources.map((source) => {
                         const isSourceSelected = onlySelectedSources.some(({ name }) => name === source.name);
                         return React.createElement(SourceRow, { key: `source-${source.name}`, withInstances: withInstances, source: source, namespace: namespace, isSelected: isSourceSelected, onSelect: onSelectSource });
@@ -15466,10 +15572,11 @@ const SourceRow = ({ withInstances, source, namespace, isSelected, onSelect, })
     return (React.createElement(SourceItem, { "data-id": `source-${source.name}`, "$selected": isSelected, "$withClick": !!onSelect, onClick: () => onSelect?.(source) },
         React.createElement(FlexRow, { "$gap": 12 },
             onSelect && React.createElement(Checkbox, { value: isSelected, onChange: () => onSelect(source, namespace) }),
-            React.createElement(Text, null, source.name),
-            React.createElement(Text, { opacity: 0.8, size: 10 },
-                withInstances ? `${source.numberOfInstances || 0} running instance${source.numberOfInstances !== 1 ? 's' : ''} • ` : '',
-                source.kind))));
+            React.createElement(FlexRow, { "$gap": 4 },
+                React.createElement(Text, null, source.name),
+                React.createElement(Text, { opacity: 0.8, size: 10 },
+                    withInstances ? ` • ${source.numberOfInstances || 0} running instance${source.numberOfInstances !== 1 ? 's' : ''}` : '',
+                    ` • ${source.kind}`)))));
 };
 
 const Container$3 = styled.div `
@@ -15744,7 +15851,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
         setIsFormDirty(false);
         setIsEditing(false);
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: [
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', hideEditTitleFromEdit: true, icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: [
             {
                 label: Tabs.Overview,
                 onClick: () => setSelectedTab(Tabs.Overview),
@@ -16218,4 +16325,4 @@ const ToggleDarkMode = () => {
         React.createElement(Background, { "$darkMode": darkMode })));
 };
 
-export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DataStreamSelectionForm, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, SetupSummary, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, TableCellConditions, ToastList, ToggleDarkMode };
+export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DataStreamDrawer, DataStreamForm, DataStreamSelectionForm, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, SetupSummary, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, TableCellConditions, ToastList, ToggleDarkMode };