@odigos/ui-kit 0.0.29 → 0.0.31

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.0.31](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.30...ui-kit-v0.0.31) (2025-05-20)
+
+
+### Bug Fixes
+
+* data stream drawer crash ([#131](https://github.com/odigos-io/ui-kit/issues/131)) ([aa183d3](https://github.com/odigos-io/ui-kit/commit/aa183d32a6032e6ec759d1d075209ca0a5eb1cda))
+
+## [0.0.30](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.29...ui-kit-v0.0.30) (2025-05-20)
+
+
+### Features
+
+* add action buttons for data streams dropdown ([#123](https://github.com/odigos-io/ui-kit/issues/123)) ([438635f](https://github.com/odigos-io/ui-kit/commit/438635fa308ed6070215a0afb353a026784f1fbb))
+* add no-data to search results ([#128](https://github.com/odigos-io/ui-kit/issues/128)) ([d1f4d36](https://github.com/odigos-io/ui-kit/commit/d1f4d36e0c1ffa8261f88b62e178532a5c8fdc85))
+
 ## [0.0.29](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.28...ui-kit-v0.0.29) (2025-05-20)
 
 

package/lib/components.js

@@ -1,19 +1,19 @@
-import { B as Button } from './index-qzll74wE.js';
-export { a as AutocompleteInput, b as Badge, a1 as CenterThis, C as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as Divider, i as DocsButton, j as Drawer, l as DrawerFooter, k as DrawerHeader, m as Dropdown, E as ExtendArrow, F as FadeLoader, n as FieldError, o as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, p as IconGroup, q as IconTitleBadge, r as IconWrapped, s as IconsNav, t as ImageControlled, u as Input, v as InputList, w as InputTable, x as InteractiveTable, K as KeyValueInputsList, M as Modal, a4 as ModalBody, y as MonitorsCheckboxes, z as MonitorsIcons, N as NavigationButtons, G as NoDataFound, J as NotificationNote, a3 as Overlay, S as ScrollX, L as SectionTitle, O as Segment, P as SelectionButton, Q as SkeletonLoader, R as Status, U as Stepper, a5 as TableContainer, a6 as TableTitleWrap, a7 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, a2 as VerticalScroll, _ as WarningModal } from './index-qzll74wE.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-CPGUhlkI.js';
+import { B as Button } from './index-nltUpkWT.js';
+export { a as AutocompleteInput, b as Badge, a1 as CenterThis, C as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as Divider, i as DocsButton, j as Drawer, l as DrawerFooter, k as DrawerHeader, m as Dropdown, E as ExtendArrow, F as FadeLoader, n as FieldError, o as FieldLabel, a0 as FlexColumn, $ as FlexRow, H as Header, I as IconButton, p as IconGroup, q as IconTitleBadge, r as IconWrapped, s as IconsNav, t as ImageControlled, u as Input, v as InputList, w as InputTable, x as InteractiveTable, K as KeyValueInputsList, M as Modal, a4 as ModalBody, y as MonitorsCheckboxes, z as MonitorsIcons, N as NavigationButtons, G as NoDataFound, J as NotificationNote, a3 as Overlay, S as ScrollX, L as SectionTitle, O as Segment, P as SelectionButton, Q as SkeletonLoader, R as Status, U as Stepper, a5 as TableContainer, a6 as TableTitleWrap, a7 as TableWrap, V as Text, W as TextArea, X as Toggle, T as ToggleCodeComponent, Y as Tooltip, Z as TraceLoader, a2 as VerticalScroll, _ as WarningModal } from './index-nltUpkWT.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-BGK1nMOD.js';
 import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
 import 'styled-components';
 import './index-BJxaoI0G.js';
 import './types.js';
 import './index-BZS1ijMm.js';
-import './index-B7MM_DAw.js';
+import './index-DGuOxbBR.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './index-DMXaEyAB.js';
 import './index-CJs4RDHU.js';
 import './index-IKusBlIE.js';
-import './useTransition-n4huKtX2.js';
+import './useTransition-B65KBqdK.js';
 import 'react-dom';
 
 const ErrorBoundaryContext = createContext(null);

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

@@ -1,3 +1,4 @@
+export declare const DEFAULT_DATA_STREAM_NAME = "default";
 export declare const FORM_ALERTS: {
     REQUIRED_FIELDS: string;
     FIELD_IS_REQUIRED: string;
@@ -92,4 +93,6 @@ export declare const BUTTON_TEXTS: {
     NEXT: string;
     TEST: string;
     TEST_CONNECTION: string;
+    INSTRUMENT: string;
+    UNINSTRUMENT: string;
 };

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, D as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-B7MM_DAw.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, D as DEFAULT_DATA_STREAM_NAME, a as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-DGuOxbBR.js';
 export { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import './types.js';
 import './index-CFnxjzaW.js';

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

@@ -1,6 +1,9 @@
 import { type FC } from 'react';
+import type { DataStream } from '@/types';
 interface DataStreamSelectProps {
     onClickNewDataStream: () => void;
+    updateDataStream: (dataStreamName: string, dataStream: DataStream) => void;
+    deleteDataStream: (dataStreamName: string) => void;
 }
 declare const DataStreamSelect: FC<DataStreamSelectProps>;
 export { DataStreamSelect, type DataStreamSelectProps };

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

@@ -1,4 +1,6 @@
+import { CSSProperties } from 'react';
 export declare const RelativeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const AbsoluteContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $hidden?: boolean;
+    $padding?: CSSProperties["padding"];
 }>> & string;

package/lib/containers/data-stream-drawer/data-stream-drawer.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type DataStreamDrawerProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DataStreamDrawerProps>;
+};
+export default _default;
+export declare const Default: StoryFn<DataStreamDrawerProps>;

package/lib/containers/data-stream-drawer/index.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import type { DataStream } from '@/types';
+interface DataStreamDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    dataStreamName: string;
+    updateDataStream: (dataStreamName: string, dataStream: DataStream) => void;
+}
+declare const DataStreamDrawer: FC<DataStreamDrawerProps>;
+export { DataStreamDrawer, type DataStreamDrawerProps };

package/lib/containers/data-stream-form/data-stream-form.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type DataStreamFormProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DataStreamFormProps>;
+};
+export default _default;
+export declare const Default: StoryFn<DataStreamFormProps>;

package/lib/containers/data-stream-form/index.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import type { DataStream } from '@/types';
+interface DataStreamFormProps {
+    formData: DataStream;
+    handleFormChange: (key: keyof DataStream, val: any) => void;
+}
+declare const DataStreamForm: FC<DataStreamFormProps>;
+export { DataStreamForm, type DataStreamFormProps };

package/lib/containers/index.d.ts

@@ -8,6 +8,8 @@ export * from './compute-platforms/index';
 export * from './compute-platforms-actions-menu/index';
 export * from './data-flow/index';
 export * from './data-flow-actions-menu/index';
+export * from './data-stream-drawer/index';
+export * from './data-stream-form/index';
 export * from './data-stream-selection-form/index';
 export * from './destination-drawer/index';
 export * from './destination-form/index';

package/lib/containers/overview-drawer/index.d.ts

@@ -5,6 +5,7 @@ interface OverviewDrawerProps extends PropsWithChildren {
     width?: number;
     title: string;
     titleTooltip?: string;
+    hideEditTitleFromEdit?: boolean;
     icons?: SVG[];
     iconSrcs?: string[];
     isEdit?: boolean;

package/lib/containers.js

@@ -1,23 +1,23 @@
 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, F as FORM_ALERTS, M as MONITORS_OPTIONS, B as BUTTON_TEXTS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-B7MM_DAw.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, 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, A as AddButton$1, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-qzll74wE.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-Bw2p1Fr4.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-n4huKtX2.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-CPGUhlkI.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-DYNMhZMX.js';
 import { createPortal } from 'react-dom';
-import { N as NoteBackToSummary, E as EditButton } from './index-CnBjimup.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-BbbCCewR.js';
 import './index-DGel4E-Z.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);
@@ -752,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;
@@ -765,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;
 `;
@@ -786,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!"))));
 };
@@ -811,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};
@@ -866,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,
@@ -1025,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;
 `;
@@ -1045,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,
@@ -12802,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;
@@ -12825,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;
 `;
@@ -12839,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 }) => {
@@ -12889,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,
@@ -12909,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;
@@ -12930,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' } })));
 });
@@ -12945,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;
@@ -12993,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
@@ -13003,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;
@@ -13072,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 }),
@@ -13134,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 })));
 });
 
@@ -13634,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;
@@ -13710,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 })));
 };
 
@@ -13723,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 }) => {
@@ -13809,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}` },
@@ -13930,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]);
+    const memoizedHandleFormChange = useCallback((key, val) => {
+        handleFormChange(key, val);
+        setIsFormDirty(true);
+    }, [handleFormChange]);
+    if (!thisItem)
+        return null;
+    const handleCancel = () => {
+        resetFormData();
+        setIsFormDirty(false);
+        onClose();
+    };
+    const handleSave = () => {
+        updateDataStream(dataStreamName, formData);
+        setIsFormDirty(false);
+        onClose();
+    };
+    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;
 `;
@@ -13941,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);
@@ -13951,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 `
@@ -13994,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,
@@ -14005,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 }),
@@ -15773,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),
@@ -16247,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 };

package/lib/hooks/index.d.ts

@@ -3,6 +3,7 @@ export * from './useClickNode';
 export * from './useClickNotification';
 export * from './useContainerSize';
 export * from './useCopy';
+export * from './useDataStreamFormData';
 export * from './useDestinationFormData';
 export * from './useGenericForm';
 export * from './useInstrumentationRuleFormData';

package/lib/hooks/useDataStreamFormData.d.ts

@@ -0,0 +1,12 @@
+import { DataStream } from '@/types';
+export declare const useDataStreamFormData: (initialFormData: DataStream) => {
+    formData: DataStream;
+    formErrors: Partial<Record<"name", string>>;
+    handleFormChange: (key?: string | undefined, val?: any, obj?: DataStream | undefined) => void;
+    resetFormData: () => void;
+    validateForm: (params?: {
+        withAlert?: boolean;
+        alertTitle?: string;
+    }) => boolean;
+    loadFormWithDrawerItem: ({ name }: DataStream) => void;
+};

package/lib/hooks.js

@@ -1,11 +1,11 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-Bw2p1Fr4.js';
-export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-n4huKtX2.js';
+export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDataStreamFormData, d as useDestinationFormData, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-BWz8fTJr.js';
+export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-B65KBqdK.js';
 import './types.js';
 import 'react';
 import './index-DMXaEyAB.js';
 import 'styled-components';
 import './index-BZS1ijMm.js';
-import './index-B7MM_DAw.js';
+import './index-DGuOxbBR.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './theme.js';

package/lib/{index-CnBjimup.js → index-B46Mcu9H.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import Theme from './theme.js';
 import { E as EditIcon } from './index-CWbxXTof.js';
-import { B as BUTTON_TEXTS, D as DISPLAY_TITLES } from './index-B7MM_DAw.js';
-import { B as Button, V as Text, J as NotificationNote } from './index-qzll74wE.js';
+import { B as BUTTON_TEXTS, a as DISPLAY_TITLES } from './index-DGuOxbBR.js';
+import { B as Button, V as Text, J as NotificationNote } from './index-nltUpkWT.js';
 import { StatusType } from './types.js';
 import './index-DMXaEyAB.js';
 import 'styled-components';

package/lib/{index-CPGUhlkI.js → index-BGK1nMOD.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { _ as WarningModal } from './index-qzll74wE.js';
+import { _ as WarningModal } from './index-nltUpkWT.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-DMXaEyAB.js';
 import 'styled-components';

package/lib/{index-B7MM_DAw.js → index-DGuOxbBR.js}

@@ -125,6 +125,7 @@ const MONITORS_OPTIONS = [
     },
 ];
 
+const DEFAULT_DATA_STREAM_NAME = 'default';
 const FORM_ALERTS = {
     REQUIRED_FIELDS: 'Required fields are missing',
     FIELD_IS_REQUIRED: 'This field is required',
@@ -219,6 +220,8 @@ const BUTTON_TEXTS = {
     NEXT: 'Next',
     TEST: 'Test',
     TEST_CONNECTION: 'Test Connection',
+    INSTRUMENT: 'Instrument',
+    UNINSTRUMENT: 'Uninstrument',
 };
 
-export { ACTION_OPTIONS as A, BUTTON_TEXTS as B, DISPLAY_TITLES as D, FORM_ALERTS as F, INSTRUMENTATION_RULE_OPTIONS as I, MONITORS_OPTIONS as M };
+export { ACTION_OPTIONS as A, BUTTON_TEXTS as B, DEFAULT_DATA_STREAM_NAME as D, FORM_ALERTS as F, INSTRUMENTATION_RULE_OPTIONS as I, MONITORS_OPTIONS as M, DISPLAY_TITLES as a };

package/lib/{index-qzll74wE.js → index-nltUpkWT.js}

@@ -4,10 +4,10 @@ import styled, { css } from 'styled-components';
 import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, P as PlusIcon, T as TrashIcon, A as ArrowIcon } from './index-BJxaoI0G.js';
 import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages } from './types.js';
 import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.js';
-import { M as MONITORS_OPTIONS, B as BUTTON_TEXTS } from './index-B7MM_DAw.js';
+import { M as MONITORS_OPTIONS, B as BUTTON_TEXTS } from './index-DGuOxbBR.js';
 import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-CJs4RDHU.js';
 import './index-DMXaEyAB.js';
-import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-n4huKtX2.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-B65KBqdK.js';
 import { I as ImageErrorIcon } from './index-DGel4E-Z.js';
 import ReactDOM from 'react-dom';
 import { I as InfoIcon } from './index-IKusBlIE.js';

package/lib/snippets.js

@@ -1,5 +1,5 @@
-export { A as AddButton } from './index-qzll74wE.js';
-export { E as EditButton, N as NoteBackToSummary } from './index-CnBjimup.js';
+export { A as AddButton } from './index-nltUpkWT.js';
+export { E as EditButton, N as NoteBackToSummary } from './index-B46Mcu9H.js';
 import 'react';
 import './theme.js';
 import './index-DMXaEyAB.js';
@@ -7,11 +7,11 @@ import './types.js';
 import 'styled-components';
 import './index-BJxaoI0G.js';
 import './index-BZS1ijMm.js';
-import './index-B7MM_DAw.js';
+import './index-DGuOxbBR.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './index-CJs4RDHU.js';
 import './index-IKusBlIE.js';
-import './useTransition-n4huKtX2.js';
+import './useTransition-B65KBqdK.js';
 import 'react-dom';
 import './index-CWbxXTof.js';

package/lib/{useSourceSelectionFormData-Bw2p1Fr4.js → useSourceSelectionFormData-BWz8fTJr.js}

@@ -3,8 +3,8 @@ import { useState, useEffect, useMemo } from 'react';
 import { g as useNotificationStore, f as useModalStore, b as useDrawerStore, c as useEntityStore, a as useDataStreamStore, j as useSetupStore } from './index-DMXaEyAB.js';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import { F as FORM_ALERTS } from './index-B7MM_DAw.js';
-import { b as useGenericForm } from './useTransition-n4huKtX2.js';
+import { F as FORM_ALERTS } from './index-DGuOxbBR.js';
+import { b as useGenericForm } from './useTransition-B65KBqdK.js';
 import { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
 
 const INITIAL$2 = {
@@ -203,6 +203,47 @@ const useClickNotification = () => {
     return { onClickNotification };
 };
 
+const useDataStreamFormData = (initialFormData) => {
+    const { addNotification } = useNotificationStore();
+    const { formData, handleFormChange, formErrors, handleErrorChange, resetFormData } = useGenericForm(initialFormData);
+    const validateForm = (params) => {
+        const errors = {};
+        let isValid = true;
+        if (!formData['name']) {
+            isValid = false;
+            errors['name'] = FORM_ALERTS.FIELD_IS_REQUIRED;
+        }
+        else {
+            errors['name'] = undefined;
+        }
+        if (!isValid && params?.withAlert) {
+            addNotification({
+                type: StatusType.Warning,
+                title: params.alertTitle,
+                message: FORM_ALERTS.REQUIRED_FIELDS,
+                hideFromHistory: true,
+            });
+        }
+        handleErrorChange(undefined, undefined, errors);
+        return isValid;
+    };
+    const loadFormWithDrawerItem = ({ name }) => {
+        const updatedData = {
+            ...initialFormData,
+            name,
+        };
+        handleFormChange(undefined, undefined, updatedData);
+    };
+    return {
+        formData,
+        formErrors,
+        handleFormChange,
+        resetFormData,
+        validateForm,
+        loadFormWithDrawerItem,
+    };
+};
+
 const INITIAL$1 = {
     // @ts-ignore form should be initialized with empty values
     type: '',
@@ -541,4 +582,4 @@ const useSourceSelectionFormData = (params) => {
     };
 };
 
-export { useClickNode as a, useClickNotification as b, useDestinationFormData as c, useSourceFormData as d, useSourceSelectionFormData as e, useActionFormData as u };
+export { useClickNode as a, useClickNotification as b, useDataStreamFormData as c, useDestinationFormData as d, useSourceFormData as e, useSourceSelectionFormData as f, useActionFormData as u };

package/lib/{useTransition-n4huKtX2.js → useTransition-B65KBqdK.js}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-B7MM_DAw.js';
+import './index-DGuOxbBR.js';
 import { g as useNotificationStore } from './index-DMXaEyAB.js';
 import { CodeAttributesKeyTypes, PayloadCollectionKeyTypes } from './types.js';
 import styled from 'styled-components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "author": "Odigos",
   "repository": {
     "type": "git",