@odigos/ui-kit 0.0.45 → 0.0.46

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.46](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.45...ui-kit-v0.0.46) (2025-06-24)
+
+
+### Features
+
+* turn on data streams ([#164](https://github.com/odigos-io/ui-kit/issues/164)) ([f7956f4](https://github.com/odigos-io/ui-kit/commit/f7956f4d9a444aa7c88d62ab9fbeeee3c523e855))
+
 ## [0.0.45](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.44...ui-kit-v0.0.45) (2025-06-23)
 
 

package/lib/components/data-tab/index.d.ts

@@ -20,6 +20,7 @@ interface CheckboxProps {
     withCheckbox?: boolean;
     isCheckboxDisabled?: boolean;
     isChecked?: boolean;
+    isLoading?: boolean;
     onCheckboxChange?: (value: boolean) => void;
 }
 interface ExtendableProps {

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

@@ -6,6 +6,7 @@ interface ToggleProps {
     onChange?: (value: boolean) => void;
     disabled?: boolean;
     allowPropagation?: boolean;
+    flipHorizontally?: boolean;
 }
 declare const Toggle: FC<ToggleProps>;
 export { Toggle, type ToggleProps };

package/lib/components.js

@@ -1,15 +1,15 @@
-import { B as Button } from './index-C4uhvIMP.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-C4uhvIMP.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-CnbEaeQS.js';
+import { B as Button } from './index-B1IScVBT.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-B1IScVBT.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-C8vqcUbP.js';
 import React, { Component, createElement, createContext } from 'react';
-import { T as Theme } from './index-BD7meETN.js';
+import { T as Theme } from './index-BRGQ84pJ.js';
 import './types.js';
-import './index-CY3kjYr3.js';
-import './index-qnmhJI4d.js';
+import './index-BUCure0Q.js';
+import './index-BJpPcCBm.js';
 import 'styled-components';
-import './index-DZWbhK14.js';
+import './index-CeHgnkLY.js';
 import './index-BV85P9UP.js';
-import './useTransition-BWC_F-Pl.js';
+import './useTransition-DsrDiKOV.js';
 import 'react-dom';
 
 const ErrorBoundaryContext = createContext(null);

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

@@ -31,6 +31,7 @@ export declare const DISPLAY_TITLES: {
     NAME_YOUR_STREAM_PLACEHOLDER: string;
     STREAM_DESCRIPTION: string;
     STREAM_CONFIRM: string;
+    DATA_STREAM_EXISTS_WARNING: (curr: string, next: string) => string;
     ACTION: string;
     ACTIONS: string;
     ADD_ACTION: string;
@@ -88,6 +89,8 @@ export declare const DISPLAY_TITLES: {
     TO_MODIFY_OTEL_DATA: string;
     QUICK_BACK_TO_SUMMARY: string;
     GO_TO_SUMMARY: string;
+    FUTURE_APPS_TITLE: string;
+    FUTURE_APPS_DESCRIPTION: string;
     OVERIDE: string;
     OVERIDDEN: string;
     OVERRIDE_RUNTIME_DETAILS: string;

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, k as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, l as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-BD7meETN.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, k as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, l as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-BRGQ84pJ.js';
 export { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import 'react';
 import './types.js';

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

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import type { DataStream } from '@/types';
+import { type DataStream } from '@/types';
 interface DataStreamFormProps {
     formData: DataStream;
     handleFormChange: (key: keyof DataStream, val: any) => void;

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

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

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

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+interface DataStreamModalProps {
+}
+declare const DataStreamModal: FC<DataStreamModalProps>;
+export { DataStreamModal, type DataStreamModalProps };

package/lib/containers/destination-modal/choose-destination/destinations-list/index.d.ts

@@ -4,6 +4,7 @@ interface DestinationsListProps {
     items: DestinationCategories;
     onSelectNew: (item: DestinationOption) => void;
     onSelectConfigured: (id: string) => void;
+    isLoadingForDestinationIds: string[];
 }
 declare const DestinationsList: FC<DestinationsListProps>;
 export { DestinationsList, type DestinationsListProps };

package/lib/containers/destination-modal/choose-destination/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
+import { DestinationsListProps } from './destinations-list';
 import { type DestinationCategories, type DestinationOption, SignalType } from '@/types';
-interface Props {
+interface Props extends Pick<DestinationsListProps, 'onSelectConfigured' | 'isLoadingForDestinationIds'> {
     hidden?: boolean;
     categories: DestinationCategories;
     potentialDestinations: DestinationOption[];
     onSelectNew: (item: DestinationOption, selectedMonitors: SignalType[]) => void;
-    onSelectConfigured: (id: string) => void;
 }
 export declare const ChooseDestinationBody: React.FC<Props>;
 export {};

package/lib/containers/destination-modal/index.d.ts

@@ -4,8 +4,9 @@ interface DestinationModalProps {
     isOnboarding?: boolean;
     categories: DestinationCategories;
     potentialDestinations: DestinationOption[];
-    createDestination: (destination: DestinationFormData) => void;
-    updateDestination: (id: string, destination: DestinationFormData) => void;
+    createDestination: (destination: DestinationFormData) => Promise<void>;
+    updateDestination: (id: string, destination: DestinationFormData) => Promise<void>;
+    deleteDestination: (id: string) => Promise<void>;
     testConnection: TestConnectionFunc;
 }
 declare const DestinationModal: FC<DestinationModalProps>;

package/lib/containers.js

@@ -1,22 +1,22 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { l as DISPLAY_TITLES, T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, B as BUTTON_TEXTS, c as useEntityStore, A as ACTION_OPTIONS, m as getActionIcon, f as useModalStore, F as FORM_ALERTS, d as useFilterStore, M as MONITORS_OPTIONS, $ as styleInject, i as useSelectedStore, e as useInstrumentStore, o as getInstrumentationRuleIcon, a as useDataStreamStore, n as getEntityId, S as STORAGE_KEYS, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, u as useDarkMode } from './index-BD7meETN.js';
+import { l as DISPLAY_TITLES, T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, B as BUTTON_TEXTS, c as useEntityStore, A as ACTION_OPTIONS, m as getActionIcon, f as useModalStore, F as FORM_ALERTS, d as useFilterStore, M as MONITORS_OPTIONS, $ as styleInject, i as useSelectedStore, e as useInstrumentStore, o as getInstrumentationRuleIcon, a as useDataStreamStore, n as getEntityId, S as STORAGE_KEYS, k as DEFAULT_DATA_STREAM_NAME, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, u as useDarkMode } from './index-BRGQ84pJ.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, SignalType, HeadersCollectionKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind } 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-C4uhvIMP.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-B1IScVBT.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BV85P9UP.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-DZWbhK14.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-BL1s2-bo.js';
-import { u as useActionFormData, a as useClickNode, e as useSessionStorage, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-DmZnRueA.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-BWC_F-Pl.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, P as PlusIcon$1, h as CheckIcon, A as ArrowIcon, a as CopyIcon, i as CrossIcon } from './index-CY3kjYr3.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-CnbEaeQS.js';
-import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-qnmhJI4d.js';
-import { f as filterActions, m as getEntityLabel, l as getEntityIcon, v as sleep$1, o as getPlatformIcon, p as getPlatformLabel, h as formatBytes, j as getContainersIcons, q as getValueForRange, k as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, s as getYamlFieldsForDestination, d as deepClone, n as getMetricForEntity, r as getWorkloadId, i as getContainersInstrumentedCount, t as isOverTime } from './index-BSjQAYib.js';
+import { C as CheckCircledIcon, O as OdigosLogo } from './index-CeHgnkLY.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-C4aVlsHh.js';
+import { u as useActionFormData, a as useClickNode, e as useSessionStorage, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-CMXqoHZs.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-DsrDiKOV.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, P as PlusIcon$1, h as CheckIcon, A as ArrowIcon, a as CopyIcon, i as CrossIcon } from './index-BUCure0Q.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-C8vqcUbP.js';
+import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-BJpPcCBm.js';
+import { f as filterActions, m as getEntityLabel, l as getEntityIcon, v as sleep$1, o as getPlatformIcon, p as getPlatformLabel, h as formatBytes, j as getContainersIcons, q as getValueForRange, k as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, s as getYamlFieldsForDestination, d as deepClone, n as getMetricForEntity, r as getWorkloadId, i as getContainersInstrumentedCount, t as isOverTime } from './index-CpT8LSxY.js';
 import { createPortal } from 'react-dom';
 import { m as mapExportedSignals } from './index-BlZKWuxe.js';
-import { N as NoteBackToSummary, E as EditButton } from './index-lkkeQEOt.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-fEP_guwb.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-C3BU6Xe-.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-DypjdLnz.js';
 
 const buildCard$3 = (action) => {
     const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, servicesNameFilters, attributeFilters, }, } = action;
@@ -14376,8 +14376,11 @@ const Container$d = styled.div `
   padding: 4px;
 `;
 const DataStreamForm = ({ formData, handleFormChange, formErrors }) => {
+    const { dataStreams, selectedStreamName } = useDataStreamStore();
+    const existingDS = useMemo(() => dataStreams.find((s) => s.name === formData.name && s.name !== selectedStreamName), [dataStreams, formData.name, selectedStreamName]);
     return (React.createElement(Container$d, null,
-        React.createElement(Input, { name: 'name', title: DISPLAY_TITLES.STREAM_NAME, placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, required: true, value: formData.name, onChange: ({ target: { value } }) => handleFormChange('name', value), errorMessage: formErrors['name'] })));
+        React.createElement(Input, { name: 'name', title: DISPLAY_TITLES.STREAM_NAME, placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, required: true, value: formData.name, onChange: ({ target: { value } }) => handleFormChange('name', value), errorMessage: formErrors['name'] }),
+        existingDS && React.createElement(NotificationNote, { type: StatusType.Warning, message: DISPLAY_TITLES.DATA_STREAM_EXISTS_WARNING(selectedStreamName, existingDS.name) })));
 };
 
 const FormContainer$3 = styled.div `
@@ -14460,9 +14463,7 @@ const SelectionRow = styled(FlexRow) `
 const Stretch = styled.div `
   width: 100%;
 `;
-const DataStreamSelect = ({ 
-// onClickNewDataStream,
-updateDataStream, deleteDataStream, }) => {
+const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataStream }) => {
     const theme = Theme.useTheme();
     const { dataStreams, selectedStreamName, setSelectedStreamName } = useDataStreamStore();
     const [popupOpen, setPopupOpen] = useState(false);
@@ -14471,13 +14472,18 @@ updateDataStream, deleteDataStream, }) => {
     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]);
-    const rows = useMemo(() => filteredDataStreams.map(({ name }) => (React.createElement(SelectionRow, { key: `stream-${name}` },
+    const rows = useMemo(() => dataStreams
+        .filter(({ name }) => !searchText || name.toLowerCase().includes(searchText.toLowerCase()))
+        .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' } }))))), [filteredDataStreams, selectedStreamName]);
+                }, 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))))), [dataStreams, selectedStreamName, searchText]);
     return (React.createElement(React.Fragment, null,
         React.createElement(RelativeContainer$1, null,
             React.createElement(Container$c, { "$gap": 0 },
@@ -14487,7 +14493,12 @@ updateDataStream, deleteDataStream, }) => {
                         "Data Stream: ",
                         selectedStreamName),
                     React.createElement(ExtendArrow, { extend: popupOpen }),
-                    React.createElement(Badge, { label: dataStreams.length }))),
+                    React.createElement(Badge, { label: dataStreams.length })),
+                React.createElement(Divider, { orientation: 'vertical', length: '32px', thickness: 2, margin: '0' }),
+                React.createElement(AddButton$1, { onClick: () => {
+                        setSelectedStreamName('');
+                        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) })),
@@ -14531,7 +14542,7 @@ const DataStreamSelectionForm = forwardRef(({ isModal, onClickSummary }, ref) =>
         validateForm,
         getFormValues: () => formData,
     }));
-    return (React.createElement(ModalBody, { "$isNotModal": !isModal, "$minHeight": '70vh' },
+    return (React.createElement(ModalBody, { "$isNotModal": !isModal },
         React.createElement(FlexColumn, { "$gap": 24 },
             onClickSummary && React.createElement(NoteBackToSummary, { onClick: onClickSummary }),
             React.createElement(SectionTitle, { title: DISPLAY_TITLES.NAME_YOUR_STREAM, description: DISPLAY_TITLES.STREAM_DESCRIPTION }),
@@ -14849,7 +14860,7 @@ const ListsWrapper = styled.div `
   flex-direction: column;
   gap: 12px;
 `;
-const DestinationsList = ({ items, onSelectNew, onSelectConfigured }) => {
+const DestinationsList = ({ items, onSelectNew, onSelectConfigured, isLoadingForDestinationIds }) => {
     const { configuredDestinationsUpdateOnly } = useSetupStore();
     return items.map((category) => {
         const isAlreadyExisting = category.name === DESTINATION_CATEGORIES['EXISTS']['TITLE'];
@@ -14858,13 +14869,15 @@ const DestinationsList = ({ items, onSelectNew, onSelectConfigured }) => {
             category.items.map((item) => {
                 // Following replaceAll() is to create a "legal" data-id (no spaces) for Cypress testing
                 const key = `select-${category.name.replaceAll(' ', '')}-destination-${item.type}`;
-                const isChecked = item.selected || configuredDestinationsUpdateOnly.some((dest) => dest.id === item.id);
                 const monitors = Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported);
-                const onClick = isAlreadyExisting ? () => onSelectConfigured(item.id) : () => onSelectNew(item);
                 const { icon, iconSrc } = getDestinationIcon(item.type);
+                const isChecked = item.selected || configuredDestinationsUpdateOnly.some((dest) => dest.id === item.id);
+                const isLoading = !!isLoadingForDestinationIds.find((id) => id === item.id);
+                const onClick = isAlreadyExisting ? () => onSelectConfigured(item.id) : () => onSelectNew(item);
                 return (React.createElement(DataTab, { key: key, "data-id": key, title: item.displayName, hoverText: BUTTON_TEXTS.SELECT, onClick: onClick, iconProps: { icon, iconSrc }, visualProps: { monitors, monitorsWithLabels: true }, checkboxProps: {
                         withCheckbox: isAlreadyExisting,
                         isChecked,
+                        isLoading,
                         onCheckboxChange: () => onSelectConfigured(item.id),
                     } }));
             })));
@@ -14928,7 +14941,7 @@ const createConfiguredItems = (destinations, selectedStreamName, configuredDesti
         },
     };
 });
-const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelectNew, onSelectConfigured }) => {
+const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelectNew, onSelectConfigured, isLoadingForDestinationIds }) => {
     const { destinations } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
     const { configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
@@ -14975,7 +14988,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
         React.createElement(Divider, null),
         !filteredDestinations.length ? (React.createElement(NoDataFoundWrapper, null,
             React.createElement(NoDataFound, { title: 'No destinations found' }))) : (React.createElement(ListsContainer, null,
-            React.createElement(DestinationsList, { items: filteredDestinations, onSelectNew: (dest) => onSelectNew(dest, selectedMonitors), onSelectConfigured: onSelectConfigured })))));
+            React.createElement(DestinationsList, { items: filteredDestinations, onSelectNew: (dest) => onSelectNew(dest, selectedMonitors), onSelectConfigured: onSelectConfigured, isLoadingForDestinationIds: isLoadingForDestinationIds })))));
 };
 
 const Container$8 = styled.div `
@@ -14989,17 +15002,18 @@ const SideMenuWrapper = styled.div `
     display: none;
   }
 `;
-const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, updateDestination, testConnection }) => {
+const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, updateDestination, deleteDestination, testConnection }) => {
     const { destinations } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
     const { currentModal, setCurrentModal } = useModalStore();
-    const { addConfiguredDestination, addConfiguredDestinationUpdateOnly } = useSetupStore();
+    const { addConfiguredDestination, addConfiguredDestinationUpdateOnly, removeConfiguredDestinationUpdateOnly, configuredDestinationsUpdateOnly } = useSetupStore();
     const isOpen = currentModal === EntityTypes.Destination;
     const [selectedItem, setSelectedItem] = useState(undefined);
     const { formData, formErrors, handleFormChange, resetFormData, validateForm, setYamlFields, dynamicFields, setDynamicFields, loadFormWithDrawerItem } = useDestinationFormData({
         supportedSignals: selectedItem?.supportedSignals,
         preLoadedFields: selectedItem?.fields,
     });
+    const [isLoadingForDestinationIds, setIsLoadingForDestinationIds] = useState([]);
     const getDestPayload = (alreadyConfigDest) => {
         const fields = {};
         if (!alreadyConfigDest) {
@@ -15025,7 +15039,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
             },
         };
     };
-    const handleAdd = (alreadyConfigDest) => {
+    const handleAdd = async (alreadyConfigDest) => {
         // Handle new cases from onboarding
         if (isOnboarding && !alreadyConfigDest) {
             const payload = getDestPayload();
@@ -15034,7 +15048,13 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         // Handle already configured cases from onboarding
         else if (isOnboarding && alreadyConfigDest) {
             const payload = getDestPayload(alreadyConfigDest);
-            addConfiguredDestinationUpdateOnly(payload);
+            const alreadyAdded = configuredDestinationsUpdateOnly.some((dest) => dest.id === alreadyConfigDest.id);
+            if (alreadyAdded) {
+                removeConfiguredDestinationUpdateOnly(alreadyConfigDest);
+            }
+            else {
+                addConfiguredDestinationUpdateOnly(payload);
+            }
         }
         // Handle new cases from overview
         else if (!isOnboarding && !alreadyConfigDest) {
@@ -15043,8 +15063,15 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         // Handle already configured cases from overview
         else if (!isOnboarding && alreadyConfigDest) {
             const payload = getDestPayload(alreadyConfigDest);
-            const payloadForm = loadFormWithDrawerItem(payload);
-            updateDestination(alreadyConfigDest.id, payloadForm);
+            const alreadyAdded = payload.dataStreamNames.some((streamName) => streamName === selectedStreamName);
+            setIsLoadingForDestinationIds((prev) => [...prev, alreadyConfigDest.id]);
+            if (alreadyAdded) {
+                await deleteDestination(alreadyConfigDest.id);
+            }
+            else {
+                await updateDestination(alreadyConfigDest.id, loadFormWithDrawerItem(payload));
+            }
+            setIsLoadingForDestinationIds((prev) => prev.filter((id) => id !== alreadyConfigDest.id));
         }
         else {
             console.warn('DestinationModal: handleAdd: No action taken, no destination or already configured destination found');
@@ -15115,7 +15142,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
                         { stepNumber: 2, title: DISPLAY_TITLES.CONNECTION },
                     ] })),
             React.createElement(ModalBody, { style: { margin: '32px 24px 12px 24px' } },
-                React.createElement(ChooseDestinationBody, { hidden: selectedItem !== undefined, categories: categories, potentialDestinations: potentialDestinations, onSelectNew: handleSelectNew, onSelectConfigured: handleSelectConfigured }),
+                React.createElement(ChooseDestinationBody, { hidden: selectedItem !== undefined, categories: categories, potentialDestinations: potentialDestinations, onSelectNew: handleSelectNew, onSelectConfigured: handleSelectConfigured, isLoadingForDestinationIds: isLoadingForDestinationIds }),
                 selectedItem && (React.createElement(DestinationForm, { categoryItem: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange, dynamicFields: dynamicFields, setDynamicFields: setDynamicFields, validateForm: validateForm, testConnection: testConnection }))))));
 };
 
@@ -15192,7 +15219,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, { categories: categories, withDelete: true }))),
-        React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, updateDestination: () => { }, createDestination: () => { }, testConnection: testConnection })));
+        React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, updateDestination: async () => { }, createDestination: async () => { }, deleteDestination: async () => { }, testConnection: testConnection })));
 };
 
 const columns$2 = [
@@ -16001,7 +16028,7 @@ const NotSourcesWrapper = styled(CenterThis) `
 const SelectionCount = styled(Text) `
   width: 18px;
 `;
-const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesAndSources, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource }) => {
+const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesAndSources, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource, selectedFutureApps, onSelectFutureApps, }) => {
     const theme = Theme.useTheme();
     const { namespacesLoading } = useEntityStore();
     const matrix = Object.entries(filteredNamespacesAndSources || {});
@@ -16011,6 +16038,7 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
     const NamespaceIcon = getEntityIcon(EntityTypes.Namespace);
     return (React.createElement(Container$4, { "$isModal": isModal }, matrix.map(([namespace, sources]) => {
         const sourcesForNamespace = selectedSources?.[namespace] || [];
+        const futureAppsForNamespace = selectedFutureApps?.[namespace]?.selected || false;
         const onlySelectedSources = sourcesForNamespace.filter(({ selected }) => selected);
         const isNamespaceLoaded = sourcesForNamespace.length > 0;
         const isNamespaceSelected = selectedNamespace === namespace;
@@ -16027,6 +16055,9 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
                     React.createElement(NamespaceIcon, null),
                     React.createElement(Text, null, namespace)),
                 React.createElement(FlexRow, { "$gap": 12 },
+                    onSelectFutureApps && (React.createElement(React.Fragment, null,
+                        React.createElement(Toggle, { title: DISPLAY_TITLES.FUTURE_APPS_TITLE, tooltip: DISPLAY_TITLES.FUTURE_APPS_DESCRIPTION, initialValue: futureAppsForNamespace, onChange: (bool) => onSelectFutureApps(bool, namespace), flipHorizontally: true }),
+                        React.createElement(Divider, { orientation: 'vertical', length: '12px', margin: '0' }))),
                     React.createElement(SelectionCount, { size: 10, color: theme.text.grey }, isNamespaceLoaded ? `${onlySelectedSources.length}/${sources.length}` : null),
                     onSelectNamespace && React.createElement(ExtendArrow, { extend: isNamespaceSelected }))),
             (isNamespaceSelected || !onSelectNamespace) &&
@@ -16060,16 +16091,15 @@ const Container$3 = styled.div `
   height: fit-content;
   overflow-y: scroll;
 `;
-const SetupSummary = ({ 
-// onEditStream,
-onEditSources, onEditDestinations, categories, }) => {
-    // const { selectedStreamName } = useDataStreamStore();
+const SetupSummary = ({ onEditStream, onEditSources, onEditDestinations, categories }) => {
+    const { selectedStreamName } = useDataStreamStore();
     const { configuredSources, configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
     const sourceCount = useMemo(() => Object.values(configuredSources).reduce((total, sourceList) => total + sourceList.filter((s) => s.selected).length, 0), [configuredSources]);
     return (React.createElement(ModalBody, { "$isNotModal": true },
         React.createElement(FlexColumn, { "$gap": 12 },
             React.createElement(SectionTitle, { title: DISPLAY_TITLES.SUMMARY, description: DISPLAY_TITLES.STREAM_CONFIRM }),
             React.createElement(Container$3, null,
+                React.createElement(DataCard, { title: DISPLAY_TITLES.STREAM_NAME, action: () => React.createElement(EditButton, { onClick: onEditStream }), data: [{ title: '', value: selectedStreamName }] }),
                 React.createElement(DataCard, { title: DISPLAY_TITLES.SELECTED_SOURCES, titleBadge: sourceCount, action: () => React.createElement(EditButton, { onClick: onEditSources }) },
                     React.createElement(SourceList, { filteredNamespacesAndSources: configuredSources, withInstances: false })),
                 React.createElement(DataCard, { title: DISPLAY_TITLES.SELECTED_DESTINATIONS, titleBadge: configuredDestinations.length + configuredDestinationsUpdateOnly.length, action: () => React.createElement(EditButton, { onClick: onEditDestinations }) },

package/lib/functions.js

@@ -1,13 +1,13 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, d as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, e as splitCamelString } from './index-qnmhJI4d.js';
-export { c as compareCondition, d as deepClone, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, e as filterSources, g as filterSourcesByStream, h as formatBytes, j as getContainersIcons, i as getContainersInstrumentedCount, k as getDestinationIcon, l as getEntityIcon, m as getEntityLabel, n as getMetricForEntity, o as getPlatformIcon, p as getPlatformLabel, q as getValueForRange, r as getWorkloadId, s as getYamlFieldsForDestination, t as isOverTime, u as mapDestinationFieldsForDisplay, v as sleep } from './index-BSjQAYib.js';
-export { m as getActionIcon, n as getEntityId, o as getInstrumentationRuleIcon, p as getProgrammingLanguageIcon } from './index-BD7meETN.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, d as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, e as splitCamelString } from './index-BJpPcCBm.js';
+export { c as compareCondition, d as deepClone, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, e as filterSources, g as filterSourcesByStream, h as formatBytes, j as getContainersIcons, i as getContainersInstrumentedCount, k as getDestinationIcon, l as getEntityIcon, m as getEntityLabel, n as getMetricForEntity, o as getPlatformIcon, p as getPlatformLabel, q as getValueForRange, r as getWorkloadId, s as getYamlFieldsForDestination, t as isOverTime, u as mapDestinationFieldsForDisplay, v as sleep } from './index-CpT8LSxY.js';
+export { m as getActionIcon, n as getEntityId, o as getInstrumentationRuleIcon, p as getProgrammingLanguageIcon } from './index-BRGQ84pJ.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-BlZKWuxe.js';
 import { EntityTypes } from './types.js';
 export { i as isEmpty, s as safeJsonParse } from './index-BV85P9UP.js';
 import 'react';
 import 'styled-components';
-import './index-DZWbhK14.js';
-import './index-C3BU6Xe-.js';
+import './index-CeHgnkLY.js';
+import './index-DypjdLnz.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     const cleanArray = (arr) => arr.filter((item) => {

package/lib/hooks/useSourceSelectionFormData.d.ts

@@ -1,7 +1,7 @@
 import { type Dispatch, type SetStateAction } from 'react';
 import { EntityTypes, type FetchSingleNamespace } from '@/types';
 import { type AvailableSource, type AvailableSourcesByNamespace, type NamespaceSelectionFormData, type SourceSelectionFormData } from '@/store';
-export type SelectedNamespace = string;
+export type NamespaceName = string;
 interface UseSourceFormDataParams {
     fetchSingleNamespace: FetchSingleNamespace;
 }
@@ -11,11 +11,11 @@ export interface UseSourceSelectionFormData {
     getApiSourcesPayload: () => SourceSelectionFormData;
     getApiFutureAppsPayload: () => NamespaceSelectionFormData;
     selectedNamespace: string;
-    onSelectNamespace: (namespace: SelectedNamespace, selectAll?: boolean) => void;
+    onSelectNamespace: (namespace: NamespaceName, selectAll?: boolean) => void;
     selectedSources: SourceSelectionFormData;
-    onSelectSource: (source: AvailableSource, namespace?: SelectedNamespace) => void;
+    onSelectSource: (source: AvailableSource, namespace?: NamespaceName) => void;
     selectedFutureApps: NamespaceSelectionFormData;
-    onSelectFutureApps: (bool: boolean, namespace?: SelectedNamespace) => void;
+    onSelectFutureApps: (bool: boolean, namespace?: NamespaceName) => void;
     searchText: string;
     setSearchText: Dispatch<SetStateAction<string>>;
     searchBy: EntityTypes;

package/lib/hooks.js

@@ -1,7 +1,7 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDataStreamFormData, d as useDestinationFormData, e as useSessionStorage, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-DmZnRueA.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-BWC_F-Pl.js';
+export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDataStreamFormData, d as useDestinationFormData, e as useSessionStorage, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-CMXqoHZs.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-DsrDiKOV.js';
 import './types.js';
-import './index-BD7meETN.js';
+import './index-BRGQ84pJ.js';
 import 'react';
 import 'styled-components';
 import './index-BV85P9UP.js';

package/lib/icons.js

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

package/lib/{index-C4uhvIMP.js → index-B1IScVBT.js}

@@ -1,13 +1,13 @@
 import React, { useState, useEffect, useRef, forwardRef, createElement, useCallback, useMemo, Fragment } from 'react';
-import { T as Theme, t as ImageErrorIcon, M as MONITORS_OPTIONS, g as useNotificationStore, l as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, p as getProgrammingLanguageIcon, D as DISPLAY_LANGUAGES, B as BUTTON_TEXTS } from './index-BD7meETN.js';
+import { T as Theme, t as ImageErrorIcon, M as MONITORS_OPTIONS, g as useNotificationStore, l as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, p as getProgrammingLanguageIcon, D as DISPLAY_LANGUAGES, B as BUTTON_TEXTS } from './index-BRGQ84pJ.js';
 import { StatusType, OtherStatus, ProgrammingLanguages, SortDirection, IntrumentationStatus, InputTypes, FieldTypes } from './types.js';
-import { M as MinusIcon, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, E as EditIcon, i as CrossIcon, T as TrashIcon, e as SortArrowsIcon, b as EditedIcon, a as CopyIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, S as SearchIcon, P as PlusIcon, A as ArrowIcon } from './index-CY3kjYr3.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isValidVersion, d as parseJsonStringToPrettyString, e as splitCamelString, p as parseBooleanFromString, n as numbersOnly } from './index-qnmhJI4d.js';
+import { M as MinusIcon, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, E as EditIcon, i as CrossIcon, T as TrashIcon, e as SortArrowsIcon, b as EditedIcon, a as CopyIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, S as SearchIcon, P as PlusIcon, A as ArrowIcon } from './index-BUCure0Q.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isValidVersion, d as parseJsonStringToPrettyString, e as splitCamelString, p as parseBooleanFromString, n as numbersOnly } from './index-BJpPcCBm.js';
 import styled, { css } from 'styled-components';
 import { s as safeJsonParse, i as isEmpty } from './index-BV85P9UP.js';
-import { b as useGenericForm, e as useOnClickOutside, d as useKeyDown, u as useContainerSize, a as useCopy, g as useTransition } from './useTransition-BWC_F-Pl.js';
+import { b as useGenericForm, e as useOnClickOutside, d as useKeyDown, u as useContainerSize, a as useCopy, g as useTransition } from './useTransition-DsrDiKOV.js';
 import ReactDOM from 'react-dom';
-import { I as InfoIcon } from './index-DZWbhK14.js';
+import { I as InfoIcon } from './index-CeHgnkLY.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -4303,7 +4303,7 @@ const SubText = styled(Text) `
   font-size: 10px;
   color: ${({ theme }) => theme.text.grey};
 `;
-const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps: { icon, icons, iconSrc, iconSrcs } = {}, visualProps: { status, faded, bgColor, bgColorHover, monitors, monitorsWithLabels, componentsUnderTitles } = {}, checkboxProps: { withCheckbox, isCheckboxDisabled, isChecked, onCheckboxChange } = {}, extendableProps: { withExtend, isExtended, renderExtended } = {}, ...props }) => {
+const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps: { icon, icons, iconSrc, iconSrcs } = {}, visualProps: { status, faded, bgColor, bgColorHover, monitors, monitorsWithLabels, componentsUnderTitles } = {}, checkboxProps: { withCheckbox, isCheckboxDisabled, isChecked, isLoading: isCheckboxLoading, onCheckboxChange } = {}, extendableProps: { withExtend, isExtended, renderExtended } = {}, ...props }) => {
     const theme = Theme.useTheme();
     const [extend, setExtend] = useState(isExtended || false);
     const [textMaxWidth, setTextMaxWidth] = useState(0);
@@ -4324,7 +4324,7 @@ const DataTab = ({ title, subTitle, hoverText, onClick, renderActions, iconProps
     return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$bgColor": bgColor, "$bgColorHover": bgColorHover, "$withClick": !!onClick, onClick: onClick, ...props },
         React.createElement(FlexRow, { "$gap": 8 },
             React.createElement(FlexRow, { "$gap": 16 },
-                withCheckbox && React.createElement(Checkbox, { value: isChecked, onChange: onCheckboxChange, disabled: isCheckboxDisabled }),
+                isCheckboxLoading ? React.createElement(FadeLoader, null) : withCheckbox ? React.createElement(Checkbox, { value: isChecked, onChange: onCheckboxChange, disabled: isCheckboxDisabled }) : null,
                 !!icons?.length || !!iconSrcs?.length ? (React.createElement(IconGroup, { icons: icons, iconSrcs: iconSrcs, status: status, id: `${title}-${subTitle}` })) : !!icon || !!iconSrc ? (React.createElement(IconWrapped, { icon: icon, src: iconSrc, status: status })) : null),
             React.createElement(FlexColumn, { "$gap": 4 },
                 title && React.createElement(ScrollX, { maxWidth: textMaxWidth, text: title, textSize: 14 }),
@@ -6314,7 +6314,7 @@ const ToggleSwitch = styled.div `
     transition: background-color 0.3s, transform 0.3s;
   }
 `;
-const Toggle = ({ title, tooltip, initialValue = false, onChange, disabled, allowPropagation = false }) => {
+const Toggle = ({ title, tooltip, initialValue = false, onChange, disabled, allowPropagation = false, flipHorizontally }) => {
     const [isActive, setIsActive] = useState(initialValue);
     useEffect(() => setIsActive(initialValue), [initialValue]);
     const handleToggle = (e) => {
@@ -6328,9 +6328,10 @@ const Toggle = ({ title, tooltip, initialValue = false, onChange, disabled, allo
             setIsActive((prev) => !prev);
     };
     return (React.createElement(Container$2, { "$disabled": disabled, onClick: handleToggle },
-        React.createElement(ToggleSwitch, { "$disabled": disabled, "$isActive": isActive }),
+        !flipHorizontally && React.createElement(ToggleSwitch, { "$disabled": disabled, "$isActive": isActive }),
         React.createElement(Tooltip, { text: tooltip, withIcon: true },
-            React.createElement(Text, { size: 14 }, title))));
+            React.createElement(Text, { size: 14 }, title)),
+        flipHorizontally && React.createElement(ToggleSwitch, { "$disabled": disabled, "$isActive": isActive })));
 };
 
 function getDefaultExportFromCjs (x) {

package/lib/{index-qnmhJI4d.js → index-BJpPcCBm.js}

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

package/lib/{index-BD7meETN.js → index-BRGQ84pJ.js}

@@ -917,6 +917,7 @@ const DISPLAY_TITLES = {
     NAME_YOUR_STREAM_PLACEHOLDER: 'e.g. Highest priority',
     STREAM_DESCRIPTION: 'Provide a clear and descriptive name for your pipeline to ensure its purpose is easily understood by you and your team.',
     STREAM_CONFIRM: 'Confirm your new Data Stream',
+    DATA_STREAM_EXISTS_WARNING: (curr, next) => `A Data Stream with this name already exists, you can still rename the current "${curr}", but it will merge into the existing "${next}".`,
     ACTION: 'Action',
     ACTIONS: 'Actions',
     ADD_ACTION: 'Add Action',
@@ -974,6 +975,8 @@ const DISPLAY_TITLES = {
     TO_MODIFY_OTEL_DATA: 'To modify OpenTelemetry data',
     QUICK_BACK_TO_SUMMARY: 'When you finish editing you can quickly go back to the summary.',
     GO_TO_SUMMARY: 'Go to summary',
+    FUTURE_APPS_TITLE: 'Auto-instrument new apps',
+    FUTURE_APPS_DESCRIPTION: 'When enabled, new applications will be instrumented automatically and included in the current data stream.',
     OVERIDE: 'Override',
     OVERIDDEN: 'Overridden',
     OVERRIDE_RUNTIME_DETAILS: 'Override Runtime Details',

package/lib/{index-CY3kjYr3.js → index-BUCure0Q.js}

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

package/lib/{index-BL1s2-bo.js → index-C4aVlsHh.js}

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

package/lib/{index-CnbEaeQS.js → index-C8vqcUbP.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { _ as WarningModal } from './index-C4uhvIMP.js';
+import { _ as WarningModal } from './index-B1IScVBT.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-BD7meETN.js';
+import './index-BRGQ84pJ.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-DZWbhK14.js → index-CeHgnkLY.js}

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

package/lib/{index-BSjQAYib.js → index-CpT8LSxY.js}

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

package/lib/{index-C3BU6Xe-.js → index-DypjdLnz.js}

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

package/lib/{index-lkkeQEOt.js → index-fEP_guwb.js}

@@ -1,10 +1,10 @@
 import React from 'react';
-import { T as Theme, B as BUTTON_TEXTS, l as DISPLAY_TITLES } from './index-BD7meETN.js';
-import { E as EditIcon } from './index-CY3kjYr3.js';
-import { B as Button, V as Text, J as NotificationNote } from './index-C4uhvIMP.js';
+import { T as Theme, B as BUTTON_TEXTS, l as DISPLAY_TITLES } from './index-BRGQ84pJ.js';
+import { E as EditIcon } from './index-BUCure0Q.js';
+import { B as Button, V as Text, J as NotificationNote } from './index-B1IScVBT.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-DZWbhK14.js';
+import { I as InfoIcon } from './index-CeHgnkLY.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/snippets.js

@@ -1,12 +1,12 @@
-export { A as AddButton } from './index-C4uhvIMP.js';
-export { E as EditButton, N as NoteBackToSummary } from './index-lkkeQEOt.js';
+export { A as AddButton } from './index-B1IScVBT.js';
+export { E as EditButton, N as NoteBackToSummary } from './index-fEP_guwb.js';
 import 'react';
-import './index-BD7meETN.js';
+import './index-BRGQ84pJ.js';
 import './types.js';
 import 'styled-components';
-import './index-CY3kjYr3.js';
-import './index-qnmhJI4d.js';
-import './index-DZWbhK14.js';
+import './index-BUCure0Q.js';
+import './index-BJpPcCBm.js';
+import './index-CeHgnkLY.js';
 import './index-BV85P9UP.js';
-import './useTransition-BWC_F-Pl.js';
+import './useTransition-DsrDiKOV.js';
 import 'react-dom';

package/lib/store/useSetupStore.d.ts

@@ -1,5 +1,5 @@
 import type { Destination, Source } from '@/types';
-export type AvailableSource = Pick<Source, 'name' | 'kind' | 'selected' | 'numberOfInstances'>;
+export type AvailableSource = Pick<Source, 'namespace' | 'name' | 'kind' | 'selected' | 'numberOfInstances'>;
 export interface AvailableSourcesByNamespace {
     [namespace: string]: AvailableSource[];
 }
@@ -9,8 +9,13 @@ export type SelectedSource = AvailableSource & {
 export interface SourceSelectionFormData {
     [namespace: string]: SelectedSource[];
 }
+export type SelectedNamespace = {
+    namespace: string;
+    selected: boolean;
+    currentStreamName: string;
+};
 export interface NamespaceSelectionFormData {
-    [namespace: string]: boolean;
+    [namespace: string]: SelectedNamespace;
 }
 export interface ISetupState {
     availableSources: AvailableSourcesByNamespace;

package/lib/store.js

@@ -1,4 +1,4 @@
-export { u as useDarkMode, a as useDataStreamStore, b as useDrawerStore, c as useEntityStore, d as useFilterStore, e as useInstrumentStore, f as useModalStore, g as useNotificationStore, h as usePendingStore, i as useSelectedStore, j as useSetupStore } from './index-BD7meETN.js';
+export { u as useDarkMode, a as useDataStreamStore, b as useDrawerStore, c as useEntityStore, d as useFilterStore, e as useInstrumentStore, f as useModalStore, g as useNotificationStore, h as usePendingStore, i as useSelectedStore, j as useSetupStore } from './index-BRGQ84pJ.js';
 import 'react';
 import './types.js';
 import 'styled-components';

package/lib/theme.js

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

package/lib/types/common/index.d.ts

@@ -63,6 +63,9 @@ export declare enum EntityTypes {
     Action = "Action",
     InstrumentationRule = "InstrumentationRule"
 }
+export declare enum OtherEntityTypes {
+    DataStream = "DataStream"
+}
 export declare enum FieldTypes {
     Input = "input",
     MultiInput = "multiInput",

package/lib/types/namespaces/index.d.ts

@@ -2,6 +2,7 @@ import type { Source } from '../sources';
 export interface Namespace {
     name: string;
     selected: boolean;
+    dataStreamNames: string[];
     sources?: Source[];
 }
 export type FetchSingleNamespace = (payload: {

package/lib/types/sources/index.d.ts

@@ -1,5 +1,5 @@
-import { SelectedSource } from '@/store';
 import { type Condition, ProgrammingLanguages } from '../common';
+import type { NamespaceSelectionFormData, SourceSelectionFormData } from '@/store';
 export declare enum K8sResourceKind {
     Deployment = "Deployment",
     DaemonSet = "DaemonSet",
@@ -34,8 +34,4 @@ export interface SourceFormData {
     language?: ProgrammingLanguages | null;
     version?: string;
 }
-export type PersistSources = (selectAppsList: {
-    [namespace: string]: SelectedSource[];
-}, futureSelectAppsList: {
-    [namespace: string]: boolean;
-}) => void;
+export type PersistSources = (selectAppsList: SourceSelectionFormData, futureSelectAppsList: NamespaceSelectionFormData) => void;

package/lib/types.js

@@ -131,6 +131,10 @@ var EntityTypes;
     EntityTypes["Action"] = "Action";
     EntityTypes["InstrumentationRule"] = "InstrumentationRule";
 })(EntityTypes || (EntityTypes = {}));
+var OtherEntityTypes;
+(function (OtherEntityTypes) {
+    OtherEntityTypes["DataStream"] = "DataStream";
+})(OtherEntityTypes || (OtherEntityTypes = {}));
 var FieldTypes;
 (function (FieldTypes) {
     FieldTypes["Input"] = "input";
@@ -309,4 +313,4 @@ var K8sResourceKind;
     K8sResourceKind["CronJob"] = "CronJob";
 })(K8sResourceKind || (K8sResourceKind = {}));
 
-export { ActionCategory, ActionKeyTypes, ActionType, AddNodeTypes, BooleanOperation, CodeAttributesKeyTypes, Crud, DestinationTypes, EdgeTypes, EntityTypes, FieldTypes, HeadersCollectionKeyTypes, InputTypes, InstrumentationRuleType, IntrumentationStatus, JsonOperation, K8sResourceKind, NodeTypes, NumberOperation, OtherStatus, PayloadCollectionKeyTypes, PlatformType, ProgrammingLanguages, SignalType, SortDirection, StatusType, StringOperation, Tier };
+export { ActionCategory, ActionKeyTypes, ActionType, AddNodeTypes, BooleanOperation, CodeAttributesKeyTypes, Crud, DestinationTypes, EdgeTypes, EntityTypes, FieldTypes, HeadersCollectionKeyTypes, InputTypes, InstrumentationRuleType, IntrumentationStatus, JsonOperation, K8sResourceKind, NodeTypes, NumberOperation, OtherEntityTypes, OtherStatus, PayloadCollectionKeyTypes, PlatformType, ProgrammingLanguages, SignalType, SortDirection, StatusType, StringOperation, Tier };

package/lib/{useSourceSelectionFormData-DmZnRueA.js → useSourceSelectionFormData-CMXqoHZs.js}

@@ -1,9 +1,9 @@
 import { ActionKeyTypes, ActionType, StatusType, AddNodeTypes, EntityTypes, FieldTypes } from './types.js';
-import { g as useNotificationStore, F as FORM_ALERTS, f as useModalStore, b as useDrawerStore, c as useEntityStore, a as useDataStreamStore, j as useSetupStore } from './index-BD7meETN.js';
+import { g as useNotificationStore, F as FORM_ALERTS, f as useModalStore, b as useDrawerStore, c as useEntityStore, a as useDataStreamStore, j as useSetupStore } from './index-BRGQ84pJ.js';
 import { useState, useEffect, useMemo } from 'react';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-BV85P9UP.js';
-import { b as useGenericForm } from './useTransition-BWC_F-Pl.js';
+import { b as useGenericForm } from './useTransition-DsrDiKOV.js';
 import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-BlZKWuxe.js';
 
 const INITIAL$2 = {
@@ -454,31 +454,43 @@ const useSourceFormData = () => {
     };
 };
 
-const mapSourceToAvailableSource = (source, selectedStreamName, selectAll) => {
-    const sourceIsInCurrentStream = source.dataStreamNames?.includes(selectedStreamName) || source.currentStreamName === selectedStreamName;
-    const selected = typeof selectAll === 'boolean' ? selectAll : sourceIsInCurrentStream ? source.selected : false;
+const mapToAvailableSource = (source, selectedStreamName, selectAll) => {
+    const isBooleanOverride = typeof selectAll === 'boolean';
+    const isInCurrentStream = source.dataStreamNames?.includes(selectedStreamName) || source.currentStreamName === selectedStreamName;
+    const selected = (isBooleanOverride ? selectAll : source.selected) || false;
     return {
+        namespace: source.namespace,
         name: source.name,
         kind: source.kind,
-        selected,
+        selected: isInCurrentStream || isBooleanOverride ? selected : false,
         numberOfInstances: source.numberOfInstances,
     };
 };
-const mapSourceToSelectedSource = (source, selectedStreamName, selectAll) => {
+const mapToSelectedSource = (source, selectedStreamName, selectAll) => {
     return {
-        ...mapSourceToAvailableSource(source, selectedStreamName, selectAll),
+        ...mapToAvailableSource(source, selectedStreamName, selectAll),
+        currentStreamName: selectedStreamName,
+    };
+};
+const mapToSelectedNamespace = (ns, selectedStreamName, selectAll) => {
+    const isBooleanOverride = typeof selectAll === 'boolean';
+    const isInCurrentStream = ns.dataStreamNames?.includes(selectedStreamName);
+    const selected = (isBooleanOverride ? selectAll : ns.selected) || false;
+    return {
+        namespace: ns.name,
+        selected: isInCurrentStream || isBooleanOverride ? selected : false,
         currentStreamName: selectedStreamName,
     };
 };
 const mergeAvailableAndSelectedSources = (available, selected, currentStreamName) => {
     const payload = {};
     Object.entries(available).forEach(([namespace, sources]) => {
-        payload[namespace] = sources.map((s) => mapSourceToSelectedSource(s, currentStreamName));
+        payload[namespace] = sources.map((s) => mapToSelectedSource(s, currentStreamName));
     });
     Object.entries(selected).forEach(([namespace, sources]) => {
         sources.forEach((s) => {
             const foundIdx = payload[namespace].findIndex((src) => src.name === s.name && src.kind === s.kind);
-            const mapped = mapSourceToSelectedSource(s, currentStreamName);
+            const mapped = mapToSelectedSource(s, currentStreamName);
             if (foundIdx !== -1) {
                 payload[namespace][foundIdx] = mapped;
             }
@@ -501,25 +513,25 @@ const useSourceSelectionFormData = (params) => {
     const [selectedNamespace, setSelectedNamespace] = useState('');
     const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
     const [selectedSources, setSelectedSources] = useState(mergeAvailableAndSelectedSources(availableSourcesFromStore, configuredSources, selectedStreamName));
-    const fetchAndSetThisNamespace = (ns, selectAll) => {
-        fetchSingleNamespace?.({ variables: { namespaceName: ns } }).then(({ data }) => {
+    const fetchAndSetThisNamespace = async (ns, selectAll) => {
+        if (fetchSingleNamespace) {
+            const { data } = await fetchSingleNamespace({ variables: { namespaceName: ns.name } });
             const { name, sources = [] } = data?.computePlatform?.k8sActualNamespace || {};
             if (!name)
                 return;
-            // initialize sources for this namespace
             setRecordedInitialSources((prev) => ({
                 ...prev,
-                [name]: sources.map((s) => mapSourceToAvailableSource(s, selectedStreamName)),
+                [name]: sources.map((s) => mapToAvailableSource(s, selectedStreamName)),
             }));
             setSelectedSources((prev) => ({
                 ...prev,
-                [name]: typeof selectAll !== 'boolean' && prev[name]?.length ? prev[name] : sources.map((s) => mapSourceToSelectedSource(s, selectedStreamName, selectAll)),
+                [name]: typeof selectAll !== 'boolean' && prev[name]?.length ? prev[name] : sources.map((s) => mapToSelectedSource(s, selectedStreamName, selectAll)),
             }));
-        });
+        }
     };
     useEffect(() => {
         if (!!namespaces?.length) {
-            // initialize all states (to avoid undefined errors)
+            // initialize empty states to avoid undefined errors
             setRecordedInitialSources((prev) => {
                 const payload = { ...prev };
                 namespaces.forEach(({ name }) => (payload[name] = payload[name] || []));
@@ -532,22 +544,28 @@ const useSourceSelectionFormData = (params) => {
             });
             setSelectedFutureApps((prev) => {
                 const payload = { ...prev };
-                namespaces.forEach(({ name, selected }) => (payload[name] = payload[name] || selected || false));
+                namespaces.forEach((ns) => (payload[ns.name] = payload[ns.name] || mapToSelectedNamespace(ns, selectedStreamName)));
                 return payload;
             });
-            namespaces.forEach(({ name }) => fetchAndSetThisNamespace(name));
+            (async () => {
+                for await (const ns of namespaces)
+                    await fetchAndSetThisNamespace(ns);
+            })();
         }
-    }, [namespaces]);
+    }, [namespaces, selectedStreamName]);
     // form filters
     const [searchText, setSearchText] = useState('');
     const [searchBy, setSearchBy] = useState(EntityTypes.Source);
     const [showSelectedOnly, setShowSelectedOnly] = useState(false);
-    const onSelectNamespace = (ns, selectAll) => {
-        setSelectedNamespace((prev) => (prev === ns && typeof selectAll !== 'boolean' ? '' : ns));
-        fetchAndSetThisNamespace(ns, selectAll);
+    const onSelectNamespace = (nsName, selectAll) => {
+        const ns = namespaces.find((namespace) => namespace.name === nsName);
+        if (ns) {
+            setSelectedNamespace((prev) => (prev === nsName && typeof selectAll !== 'boolean' ? '' : nsName));
+            fetchAndSetThisNamespace(ns, selectAll);
+        }
     };
-    const onSelectSource = (source, namespace) => {
-        const id = namespace || selectedNamespace;
+    const onSelectSource = (source, nsName) => {
+        const id = nsName || selectedNamespace;
         if (!id)
             return;
         const arr = [...(selectedSources[id] || [])];
@@ -562,11 +580,13 @@ const useSourceSelectionFormData = (params) => {
         }
         setSelectedSources((prev) => ({ ...prev, [id]: arr }));
     };
-    const onSelectFutureApps = (bool, namespace) => {
-        const id = namespace || selectedNamespace;
+    const onSelectFutureApps = (bool, nsName) => {
+        const id = nsName || selectedNamespace;
         if (!id)
             return;
-        setSelectedFutureApps((prev) => ({ ...prev, [id]: bool }));
+        const ns = namespaces.find((namespace) => namespace.name === nsName);
+        if (ns)
+            setSelectedFutureApps((prev) => ({ ...prev, [id]: mapToSelectedNamespace(ns, selectedStreamName, bool) }));
     };
     const filteredNamespacesAndSources = useMemo(() => {
         const isSearchOk = (targetText, entityType) => !searchText || searchBy !== entityType || (searchBy === entityType && targetText.toLowerCase().includes(searchText));
@@ -585,7 +605,7 @@ const useSourceSelectionFormData = (params) => {
         const payload = {};
         Object.entries(selectedSources).forEach(([namespace, sources]) => {
             sources.forEach((source) => {
-                const foundInitial = availableSources[namespace]?.find((initialSource) => initialSource.name === source.name && initialSource.kind === source.kind);
+                const foundInitial = availableSources[namespace]?.find((src) => src.name === source.name && src.kind === source.kind);
                 if (foundInitial?.selected !== source.selected) {
                     if (!payload[namespace])
                         payload[namespace] = [];
@@ -598,10 +618,10 @@ const useSourceSelectionFormData = (params) => {
     // This is to filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist namespaces".
     const getApiFutureAppsPayload = () => {
         const payload = {};
-        Object.entries(selectedFutureApps).forEach(([namespace, selected]) => {
+        Object.entries(selectedFutureApps).forEach(([namespace, obj]) => {
             const foundInitial = namespaces?.find((ns) => ns.name === namespace);
-            if (foundInitial?.selected !== selected) {
-                payload[namespace] = selected;
+            if ((obj.selected && !foundInitial?.dataStreamNames?.includes(selectedStreamName)) || (!obj.selected && foundInitial?.dataStreamNames?.includes(selectedStreamName))) {
+                payload[namespace] = obj;
             }
         });
         return payload;

package/lib/{useTransition-BWC_F-Pl.js → useTransition-DsrDiKOV.js}

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { g as useNotificationStore } from './index-BD7meETN.js';
+import { g as useNotificationStore } from './index-BRGQ84pJ.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.45",
+  "version": "0.0.46",
   "author": "Odigos",
   "repository": {
     "type": "git",