@odigos/ui-kit 0.0.27 → 0.0.29

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.0.29](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.28...ui-kit-v0.0.29) (2025-05-20)
+
+
+### Features
+
+* add icon for dynamic destination ([#125](https://github.com/odigos-io/ui-kit/issues/125)) ([19015f0](https://github.com/odigos-io/ui-kit/commit/19015f02948dbfb4397cc9ef0348211ed85761af))
+* add namespace icon ([#127](https://github.com/odigos-io/ui-kit/issues/127)) ([c530096](https://github.com/odigos-io/ui-kit/commit/c5300961fe8b89938dfa1ad179bd8a70690f76ea))
+* add notes "is for all streams" to actions and rules ([#122](https://github.com/odigos-io/ui-kit/issues/122)) ([d399704](https://github.com/odigos-io/ui-kit/commit/d39970425686817299af6dbe4300f7e37720ae21))
+* allow custom subtitle texts in stepper ([#129](https://github.com/odigos-io/ui-kit/issues/129)) ([9ac62c8](https://github.com/odigos-io/ui-kit/commit/9ac62c8e5c42461777bbcc0fd06b95898d7c3dd3))
+
+
+### Bug Fixes
+
+* add already-configured destination from overview page ([#126](https://github.com/odigos-io/ui-kit/issues/126)) ([40d9a71](https://github.com/odigos-io/ui-kit/commit/40d9a71d6714e1f88667f1cd4152cd431a20bc16))
+
+## [0.0.28](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.27...ui-kit-v0.0.28) (2025-05-19)
+
+
+### Bug Fixes
+
+* state of source selection ([#118](https://github.com/odigos-io/ui-kit/issues/118)) ([7b73ae3](https://github.com/odigos-io/ui-kit/commit/7b73ae34778d6576a9a3c6645a434ae2ec4a2674))
+* stream name input to include initial value, and validated as required ([#119](https://github.com/odigos-io/ui-kit/issues/119)) ([31a7f97](https://github.com/odigos-io/ui-kit/commit/31a7f9791def013cf1b99dcb36e043d6fa77021a))
+
 ## [0.0.27](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.26...ui-kit-v0.0.27) (2025-05-19)
 
 

package/lib/components/auto-complete-input/index.d.ts

@@ -16,6 +16,7 @@ interface AutocompleteInputProps extends InputHTMLAttributes<HTMLInputElement> {
     onTextChange?: (text: string) => void;
     style?: CSSProperties;
     disabled?: boolean;
+    errorMessage?: string;
 }
 declare const AutocompleteInput: FC<AutocompleteInputProps>;
 export { AutocompleteInput, type AutocompleteInputProps };

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

@@ -4,6 +4,7 @@ interface StepperProps {
     data: {
         stepNumber: number;
         title: string;
+        subtitle?: string;
     }[];
 }
 declare const Stepper: FC<StepperProps>;

package/lib/components.js

@@ -1,19 +1,19 @@
-import { B as Button } from './index-QaNawEGJ.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-QaNawEGJ.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-DlCB8lqz.js';
+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 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-CTgLYGo-.js';
+import './index-B7MM_DAw.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './index-DMXaEyAB.js';
 import './index-CJs4RDHU.js';
 import './index-IKusBlIE.js';
-import './useTransition-BSKilkmZ.js';
+import './useTransition-n4huKtX2.js';
 import 'react-dom';
 
 const ErrorBoundaryContext = createContext(null);

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

@@ -3,6 +3,7 @@ export declare const FORM_ALERTS: {
     FIELD_IS_REQUIRED: string;
     FORBIDDEN: string;
     ENTERPRISE_ONLY: (str?: string) => string;
+    DEFINED_FOR_ALL_STREAMS: (str: string) => string;
     CANNOT_EDIT_RULE: string;
     CANNOT_DELETE_RULE: string;
     LATENCY_HTTP_ROUTE: 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-CTgLYGo-.js';
+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 { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
 import './types.js';
 import './index-CFnxjzaW.js';

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

@@ -4,6 +4,7 @@ interface DataStreamSelectionFormProps {
     onClickSummary?: () => void;
 }
 interface DataStreamSelectionFormRef {
+    validateForm: () => boolean;
     getFormValues: () => {
         name: string;
     };

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

@@ -5,6 +5,7 @@ interface DestinationModalProps {
     categories: DestinationCategories;
     potentialDestinations: DestinationOption[];
     createDestination: (destination: DestinationFormData) => void;
+    updateDestination: (id: string, destination: DestinationFormData) => void;
     testConnection: TestConnectionFunc;
 }
 declare const DestinationModal: FC<DestinationModalProps>;

package/lib/containers.js

@@ -1,25 +1,25 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { D as DISPLAY_TITLES, A as ACTION_OPTIONS, M as MONITORS_OPTIONS, B as BUTTON_TEXTS, I as INSTRUMENTATION_RULE_OPTIONS, F as FORM_ALERTS } from './index-CTgLYGo-.js';
+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 { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a4 as ModalBody, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, a0 as FlexColumn, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, J as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-QaNawEGJ.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 { 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-DAxuVELF.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-BSKilkmZ.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 { 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-DlCB8lqz.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-CPGUhlkI.js';
 import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-CJs4RDHU.js';
-import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, v as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, u as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, c as compareCondition, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, t as isOverTime } from './index-BfatCMWq.js';
+import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, v as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, u as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, c as compareCondition, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, t as isOverTime } from './index-DYNMhZMX.js';
 import { createPortal } from 'react-dom';
-import { N as NoteBackToSummary, E as EditButton } from './index-KyiD2AtF.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-CnBjimup.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-BRW_Nl-n.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-BbbCCewR.js';
 import './index-DGel4E-Z.js';
 import './index-7-KCQK-x.js';
 
@@ -535,6 +535,10 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
         React.createElement(DataCard, { title: DISPLAY_TITLES.ACTION_DETAILS, data: !!thisItem ? buildCard$3(thisItem) : [] })))));
 };
 
+const GapAndMargin$1 = styled(FlexColumn) `
+  margin-top: 24px;
+  gap: 12px;
+`;
 const ActionModal = ({ createAction }) => {
     const { currentModal, setCurrentModal } = useModalStore();
     const isOpen = currentModal === EntityTypes.Action;
@@ -568,7 +572,9 @@ const ActionModal = ({ createAction }) => {
             ] }) },
         React.createElement(ModalBody, null,
             React.createElement(SectionTitle, { title: 'Select Action', description: 'Select an action to modify telemetry data before it`s sent to destinations. Choose an action type and configure its details.' }),
-            React.createElement(AutocompleteInput, { options: ACTION_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), style: { marginTop: '24px' }, autoFocus: !selectedItem?.type }),
+            React.createElement(GapAndMargin$1, null,
+                React.createElement(NotificationNote, { type: StatusType.Warning, message: FORM_ALERTS.DEFINED_FOR_ALL_STREAMS(DISPLAY_TITLES.ACTIONS) }),
+                React.createElement(AutocompleteInput, { options: ACTION_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), autoFocus: !selectedItem?.type })),
             !!selectedItem?.type ? (React.createElement("div", null,
                 React.createElement(Divider, { margin: '16px 0' }),
                 React.createElement(ActionForm, { action: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange }))) : null)));
@@ -13999,19 +14005,30 @@ const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream }) => {
 };
 
 const DataStreamSelectionForm = forwardRef(({ isModal, onClickSummary }, ref) => {
-    const { dataStreams } = useDataStreamStore();
-    const [nameInput, setNameInput] = useState('');
+    const { selectedStreamName, dataStreams } = useDataStreamStore();
+    const { formData, handleFormChange, formErrors, handleErrorChange } = useGenericForm({
+        name: selectedStreamName,
+    });
     useImperativeHandle(ref, () => ({
-        getFormValues: () => ({
-            name: nameInput,
-        }),
+        validateForm: () => {
+            let isValid = true;
+            if (!formData['name']) {
+                isValid = false;
+                handleErrorChange('name', FORM_ALERTS.FIELD_IS_REQUIRED);
+            }
+            else {
+                handleErrorChange('name', undefined);
+            }
+            return isValid;
+        },
+        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 }),
             React.createElement(SectionTitle, { title: DISPLAY_TITLES.NAME_YOUR_STREAM, description: DISPLAY_TITLES.STREAM_DESCRIPTION }),
-            React.createElement(AutocompleteInput, { placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, autoFocus: true, options: dataStreamOptions, defaultText: nameInput, onTextChange: setNameInput }))));
+            React.createElement(AutocompleteInput, { placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, required: true, autoFocus: true, options: dataStreamOptions, defaultText: formData['name'], onTextChange: (v) => handleFormChange('name', v), errorMessage: formErrors['name'] }))));
 });
 
 const buildMonitorsList = (exportedSignals) => Object.keys(exportedSignals)
@@ -14464,19 +14481,19 @@ const SideMenuWrapper = styled.div `
     display: none;
   }
 `;
-const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, testConnection }) => {
+const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, updateDestination, testConnection }) => {
     const { destinations } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
     const { currentModal, setCurrentModal } = useModalStore();
     const { addConfiguredDestination, addConfiguredDestinationUpdateOnly } = useSetupStore();
     const isOpen = currentModal === EntityTypes.Destination;
     const [selectedItem, setSelectedItem] = useState(undefined);
-    const { formData, formErrors, handleFormChange, resetFormData, validateForm, setYamlFields, dynamicFields, setDynamicFields } = useDestinationFormData({
+    const { formData, formErrors, handleFormChange, resetFormData, validateForm, setYamlFields, dynamicFields, setDynamicFields, loadFormWithDrawerItem } = useDestinationFormData({
         supportedSignals: selectedItem?.supportedSignals,
         preLoadedFields: selectedItem?.fields,
     });
     const getDestPayload = (alreadyConfigDest) => {
-        const fields = alreadyConfigDest ? safeJsonParse(alreadyConfigDest.fields, {}) : {};
+        const fields = {};
         if (!alreadyConfigDest) {
             dynamicFields.forEach((f) => {
                 fields[f.name] = (f.componentType === FieldTypes.Dropdown ? f.value?.value || '' : f.value);
@@ -14488,7 +14505,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
             dataStreamNames: alreadyConfigDest?.dataStreamNames || [],
             conditions: alreadyConfigDest?.conditions || [],
             exportedSignals: alreadyConfigDest?.exportedSignals || formData.exportedSignals,
-            fields: JSON.stringify(fields),
+            fields: alreadyConfigDest?.fields || JSON.stringify(fields),
             destinationType: alreadyConfigDest?.destinationType || {
                 type: selectedItem.type,
                 displayName: selectedItem.displayName,
@@ -14501,15 +14518,29 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         };
     };
     const handleAdd = (alreadyConfigDest) => {
-        // Handle case from already configured
-        if (alreadyConfigDest)
-            return addConfiguredDestinationUpdateOnly(getDestPayload(alreadyConfigDest));
         // Handle new cases from onboarding
-        if (isOnboarding)
-            return addConfiguredDestination(getDestPayload());
+        if (isOnboarding && !alreadyConfigDest) {
+            const payload = getDestPayload();
+            addConfiguredDestination(payload);
+        }
+        // Handle already configured cases from onboarding
+        else if (isOnboarding && alreadyConfigDest) {
+            const payload = getDestPayload(alreadyConfigDest);
+            addConfiguredDestinationUpdateOnly(payload);
+        }
         // Handle new cases from overview
-        else
-            return createDestination(formData);
+        else if (!isOnboarding && !alreadyConfigDest) {
+            createDestination(formData);
+        }
+        // Handle already configured cases from overview
+        else if (!isOnboarding && alreadyConfigDest) {
+            const payload = getDestPayload(alreadyConfigDest);
+            const payloadForm = loadFormWithDrawerItem(payload);
+            updateDestination(alreadyConfigDest.id, payloadForm);
+        }
+        else {
+            console.warn('DestinationModal: handleAdd: No action taken, no destination or already configured destination found');
+        }
     };
     const handleClose = () => {
         resetFormData();
@@ -14646,7 +14677,7 @@ const DestinationSelectionForm = ({ isSourcesListEmpty, goToSources, categories,
                         React.createElement(PlusIcon$1, null),
                         React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, DISPLAY_TITLES.ADD_DESTINATION))),
                 React.createElement(DestinationList, { withDelete: true }))),
-        React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, createDestination: () => { }, testConnection: testConnection })));
+        React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, updateDestination: () => { }, createDestination: () => { }, testConnection: testConnection })));
 };
 
 const columns$2 = [
@@ -15030,6 +15061,10 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
             } }))) : (React.createElement(DataCard, { title: 'Instrumentation Rule Details', data: !!thisItem ? buildCard$1(thisItem) : [] }))));
 };
 
+const GapAndMargin = styled(FlexColumn) `
+  margin-top: 24px;
+  gap: 12px;
+`;
 const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) => {
     const { currentModal, setCurrentModal } = useModalStore();
     const isOpen = currentModal === EntityTypes.InstrumentationRule;
@@ -15063,8 +15098,9 @@ const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) =
             ] }) },
         React.createElement(ModalBody, null,
             React.createElement(SectionTitle, { title: 'Select Instrumentation Rule', description: 'Define how telemetry is recorded from your application. Choose a rule type and configure the details.' }),
-            !isEnterprise && React.createElement(NotificationNote, { type: StatusType.Default, message: FORM_ALERTS.ENTERPRISE_ONLY('Instrumentation Rules'), style: { marginTop: '24px' } }),
-            React.createElement(AutocompleteInput, { options: INSTRUMENTATION_RULE_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), style: { marginTop: isEnterprise ? '24px' : '12px' }, autoFocus: !selectedItem?.type }),
+            React.createElement(GapAndMargin, null,
+                !isEnterprise ? (React.createElement(NotificationNote, { type: StatusType.Default, message: FORM_ALERTS.ENTERPRISE_ONLY(DISPLAY_TITLES.INSTRUMENTATION_RULES) })) : (React.createElement(NotificationNote, { type: StatusType.Warning, message: FORM_ALERTS.DEFINED_FOR_ALL_STREAMS(DISPLAY_TITLES.INSTRUMENTATION_RULES) })),
+                React.createElement(AutocompleteInput, { options: INSTRUMENTATION_RULE_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), autoFocus: !selectedItem?.type })),
             !!selectedItem?.type ? (React.createElement("div", null,
                 React.createElement(Divider, { margin: '16px 0' }),
                 React.createElement(InstrumentationRuleForm, { rule: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange }))) : null)));
@@ -15397,8 +15433,8 @@ const NamespaceItem = styled.div `
   }
 `;
 const SourceItem = styled(NamespaceItem) `
-  width: calc(100% - 50px);
-  margin-left: auto;
+  width: calc(100% - 100px);
+  margin: 0 auto;
   padding: 8px;
 `;
 const RelativeWrapper = styled.div `
@@ -15423,6 +15459,7 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
     if (!matrix?.length) {
         return (React.createElement(CenterThis, null, namespacesLoading ? (React.createElement(FadeLoader, null)) : (React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_SOURCES, subTitle: onSelectNamespace ? DISPLAY_TITLES.PLEASE_MAKE_SURE_UNIGNORED_NAMESPACES : DISPLAY_TITLES.PLEASE_ADD_SOURCE }))));
     }
+    const NamespaceIcon = getEntityIcon(EntityTypes.Namespace);
     return (React.createElement(Container$4, { "$isModal": isModal }, matrix.map(([namespace, sources]) => {
         const sourcesForNamespace = selectedSources?.[namespace] || [];
         const onlySelectedSources = sourcesForNamespace.filter(({ selected }) => selected);
@@ -15431,12 +15468,14 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
         const isNamespaceAllSourcesSelected = onlySelectedSources.length > 0 && onlySelectedSources.length === sources.length;
         const isNamespacePartiallySourcesSelected = onlySelectedSources.length > 0 && onlySelectedSources.length !== sources.length;
         const hasSources = sources.length > 0;
+        const onlyOneSource = sources.length === 1;
         if (!onSelectNamespace && !hasSources)
             return null;
         return (React.createElement(Group, { key: `namespace-${namespace}`, "data-id": `namespace-${namespace}`, "$selected": isNamespaceAllSourcesSelected, "$isOpen": isNamespaceSelected },
             React.createElement(NamespaceItem, { "$selected": isNamespaceAllSourcesSelected, "$withClick": !!onSelectNamespace, onClick: () => onSelectNamespace?.(namespace) },
                 React.createElement(FlexRow, { "$gap": 12 },
                     onSelectNamespace && React.createElement(Checkbox, { partiallyChecked: isNamespacePartiallySourcesSelected, value: isNamespaceAllSourcesSelected, onChange: (bool) => onSelectNamespace(namespace, bool) }),
+                    React.createElement(NamespaceIcon, null),
                     React.createElement(Text, null, namespace)),
                 React.createElement(FlexRow, { "$gap": 12 },
                     React.createElement(SelectionCount, { size: 10, color: theme.text.grey }, isNamespaceLoaded ? `${onlySelectedSources.length}/${sources.length}` : null),
@@ -15444,7 +15483,7 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
             (isNamespaceSelected || !onSelectNamespace) &&
                 (hasSources ? (React.createElement(RelativeWrapper, { "$addPadding": !onSelectSource },
                     React.createElement(AbsoluteWrapper, null,
-                        React.createElement(Divider, { orientation: 'vertical', length: `${(sources.length || 0) * 36}px` })),
+                        React.createElement(Divider, { orientation: 'vertical', length: `${onlyOneSource ? 24 : (sources.length) * 34}px` })),
                     sources.map((source) => {
                         const isSourceSelected = onlySelectedSources.some(({ name }) => name === source.name);
                         return React.createElement(SourceRow, { key: `source-${source.name}`, withInstances: withInstances, source: source, namespace: namespace, isSelected: isSourceSelected, onSelect: onSelectSource });
@@ -15455,10 +15494,11 @@ const SourceRow = ({ withInstances, source, namespace, isSelected, onSelect, })
     return (React.createElement(SourceItem, { "data-id": `source-${source.name}`, "$selected": isSelected, "$withClick": !!onSelect, onClick: () => onSelect?.(source) },
         React.createElement(FlexRow, { "$gap": 12 },
             onSelect && React.createElement(Checkbox, { value: isSelected, onChange: () => onSelect(source, namespace) }),
-            React.createElement(Text, null, source.name),
-            React.createElement(Text, { opacity: 0.8, size: 10 },
-                withInstances ? `${source.numberOfInstances || 0} running instance${source.numberOfInstances !== 1 ? 's' : ''} • ` : '',
-                source.kind))));
+            React.createElement(FlexRow, { "$gap": 4 },
+                React.createElement(Text, null, source.name),
+                React.createElement(Text, { opacity: 0.8, size: 10 },
+                    withInstances ? ` • ${source.numberOfInstances || 0} running instance${source.numberOfInstances !== 1 ? 's' : ''}` : '',
+                    ` • ${source.kind}`)))));
 };
 
 const Container$3 = styled.div `
@@ -15763,10 +15803,10 @@ const SearchWrapper = styled.div `
 `;
 const SourceSelectionForm = forwardRef(({ isModal, fetchSingleNamespace, onClickSummary }, ref) => {
     const formState = useSourceSelectionFormData({ fetchSingleNamespace });
-    const { recordedInitialSources, selectedSources, getApiSourcesPayload, getApiFutureAppsPayload, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly } = formState;
+    const { availableSources, selectedSources, getApiSourcesPayload, getApiFutureAppsPayload, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly } = formState;
     useImperativeHandle(ref, () => ({
         getFormValues: () => ({
-            initial: recordedInitialSources,
+            initial: availableSources,
             apps: getApiSourcesPayload(),
             futureApps: getApiFutureAppsPayload(),
         }),

package/lib/functions.js

@@ -1,5 +1,5 @@
 export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-CJs4RDHU.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, i as getConditionsBooleans, k as getContainersIcons, j as getContainersInstrumentedCount, l as getDestinationIcon, m as getEntityIcon, n as getEntityLabel, o as getMetricForEntity, p as getPlatformIcon, q as getPlatformLabel, r as getValueForRange, s as getWorkloadId, t as isOverTime, u as mapExportedSignals, v as sleep } from './index-BfatCMWq.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, i as getConditionsBooleans, k as getContainersIcons, j as getContainersInstrumentedCount, l as getDestinationIcon, m as getEntityIcon, n as getEntityLabel, o as getMetricForEntity, p as getPlatformIcon, q as getPlatformLabel, r as getValueForRange, s as getWorkloadId, t as isOverTime, u as mapExportedSignals, v as sleep } from './index-DYNMhZMX.js';
 export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CFnxjzaW.js';
 export { k as getEntityId } from './index-DMXaEyAB.js';
 export { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
@@ -10,7 +10,7 @@ import 'styled-components';
 import './index-DGel4E-Z.js';
 import './theme.js';
 import './index-IKusBlIE.js';
-import './index-BRW_Nl-n.js';
+import './index-BbbCCewR.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     const cleanArray = (arr) => arr.filter((item) => {

package/lib/hooks/useDestinationFormData.d.ts

@@ -12,7 +12,7 @@ export declare const useDestinationFormData: (params?: Params) => {
         withAlert?: boolean;
         alertTitle?: string;
     }) => boolean;
-    loadFormWithDrawerItem: ({ destinationType: { type }, name, exportedSignals, fields }: Destination) => void;
+    loadFormWithDrawerItem: ({ destinationType: { type }, name, exportedSignals, fields }: Destination) => DestinationFormData;
     yamlFields: DestinationYamlProperties[];
     setYamlFields: import("react").Dispatch<import("react").SetStateAction<DestinationYamlProperties[]>>;
     dynamicFields: DestinationDynamicField[];

package/lib/hooks/useSourceSelectionFormData.d.ts

@@ -6,7 +6,7 @@ interface UseSourceFormDataParams {
     fetchSingleNamespace: FetchSingleNamespace;
 }
 export interface UseSourceSelectionFormData {
-    recordedInitialSources: AvailableSourcesByNamespace;
+    availableSources: AvailableSourcesByNamespace;
     filteredNamespacesAndSources: AvailableSourcesByNamespace;
     getApiSourcesPayload: () => SourceSelectionFormData;
     getApiFutureAppsPayload: () => NamespaceSelectionFormData;

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-DAxuVELF.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-BSKilkmZ.js';
+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';
 import './types.js';
 import 'react';
 import './index-DMXaEyAB.js';
 import 'styled-components';
 import './index-BZS1ijMm.js';
-import './index-CTgLYGo-.js';
+import './index-B7MM_DAw.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './theme.js';

package/lib/icons.js

@@ -5,7 +5,7 @@ export { A as ArrowIcon, f as CheckIcon, C as CodeIcon, a as CopyIcon, g as Cros
 import React from 'react';
 import Theme from './theme.js';
 export { E as EditIcon } from './index-CWbxXTof.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-BRW_Nl-n.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-BbbCCewR.js';
 import './index-DMXaEyAB.js';
 import './types.js';
 import 'styled-components';

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

@@ -130,6 +130,7 @@ const FORM_ALERTS = {
     FIELD_IS_REQUIRED: 'This field is required',
     FORBIDDEN: 'Forbidden',
     ENTERPRISE_ONLY: (str = 'This') => `${str} is an Enterprise feature. Please upgrade your plan.`,
+    DEFINED_FOR_ALL_STREAMS: (str) => `${str} are defined for all Data Streams.`,
     CANNOT_EDIT_RULE: 'Cannot edit a system-managed instrumentation rule',
     CANNOT_DELETE_RULE: 'Cannot delete a system-managed instrumentation rule',
     LATENCY_HTTP_ROUTE: 'HTTP route must start with a forward slash "/"',

package/lib/{index-BRW_Nl-n.js → index-BbbCCewR.js}

@@ -632,7 +632,7 @@ const NamespacesIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
     return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7 12H17M7 12C6.536 12 6.303 12 6.108 12.022C5.32013 12.1108 4.58575 12.4645 4.02511 13.0251C3.46447 13.5857 3.1108 14.3201 3.022 15.108C3 15.303 3 15.536 3 16C3 16.464 3 16.697 3.022 16.892C3.1108 17.6799 3.46447 18.4143 4.02511 18.9749C4.58575 19.5355 5.32013 19.8892 6.108 19.978C6.303 20 6.536 20 7 20H17C17.464 20 17.697 20 17.892 19.978C18.6799 19.8892 19.4143 19.5355 19.9749 18.9749C20.5355 18.4143 20.8892 17.6799 20.978 16.892C21 16.697 21 16.464 21 16C21 15.536 21 15.303 20.978 15.108C20.8892 14.3201 20.5355 13.5857 19.9749 13.0251C19.4143 12.4645 18.6799 12.1108 17.892 12.022C17.697 12 17.464 12 17 12M7 12C6.536 12 6.303 12 6.108 11.978C5.32013 11.8892 4.58575 11.5355 4.02511 10.9749C3.46447 10.4143 3.1108 9.67987 3.022 8.892C3 8.697 3 8.464 3 8C3 7.536 3 7.303 3.022 7.108C3.1108 6.32013 3.46447 5.58575 4.02511 5.02511C4.58575 4.46447 5.32013 4.1108 6.108 4.022C6.303 4 6.536 4 7 4H17C17.464 4 17.697 4 17.892 4.022C18.6799 4.1108 19.4143 4.46447 19.9749 5.02511C20.5355 5.58575 20.8892 6.32013 20.978 7.108C21 7.303 21 7.536 21 8C21 8.464 21 8.697 20.978 8.892C20.8892 9.67987 20.5355 10.4143 19.9749 10.9749C19.4143 11.5355 18.6799 11.8892 17.892 11.978C17.697 12 17.464 12 17 12M13 8H13.01M17 8H17.01M13 16H13.01M17 16H17.01' })));
+        React.createElement("path", { stroke: fill, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M12 12V21.5M12 12L3.33967 7.38776M12 12L16.3302 9.69388M12 21.5C12.2173 21.5 12.4345 21.4782 12.6482 21.4347C13.1312 21.3363 13.5855 21.0848 14.4942 20.5819L18.5058 18.3616C19.4145 17.8587 19.8688 17.6073 20.1992 17.2555C20.4916 16.9442 20.7124 16.5775 20.8474 16.1792C21 15.729 21 15.2261 21 14.2203V9.77967C21 8.77388 21 8.27099 20.8474 7.82079C20.7968 7.67159 20.7342 7.52683 20.6603 7.38776M12 21.5C11.7827 21.5 11.5655 21.4782 11.3518 21.4347C10.8688 21.3363 10.4145 21.0848 9.50585 20.5819L5.49415 18.3616C4.58552 17.8587 4.13121 17.6073 3.8008 17.2555C3.50845 16.9442 3.2876 16.5775 3.15259 16.1792C3 15.729 3 15.2261 3 14.2203V9.77967C3 8.77388 3 8.27099 3.15259 7.82079C3.20316 7.67159 3.26577 7.52683 3.33967 7.38776M20.6603 7.38776C20.5369 7.15554 20.3821 6.93919 20.1992 6.74452C19.8688 6.39274 19.4145 6.14129 18.5058 5.6384L14.4942 3.41807C13.5855 2.91518 13.1312 2.66373 12.6482 2.56531C12.2208 2.47823 11.7792 2.47823 11.3518 2.56531C10.8688 2.66373 10.4145 2.91518 9.50585 3.41807L7.5 4.52823M20.6603 7.38776L16.3302 9.69388M3.33967 7.38776C3.46307 7.15554 3.61795 6.93919 3.8008 6.74452C4.13121 6.39274 4.58552 6.14129 5.49415 5.6384L7.5 4.52823M7.5 4.52823L16.3302 9.69388' })));
 };
 
 const RulesIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {

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

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

package/lib/{index-KyiD2AtF.js → index-CnBjimup.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-CTgLYGo-.js';
-import { B as Button, V as Text, J as NotificationNote } from './index-QaNawEGJ.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 { StatusType } from './types.js';
 import './index-DMXaEyAB.js';
 import 'styled-components';

package/lib/{index-BfatCMWq.js → index-DYNMhZMX.js}

@@ -3,7 +3,7 @@ import { a as getProgrammingLanguageIcon } from './index-CJs4RDHU.js';
 import 'react';
 import './index-DMXaEyAB.js';
 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-BRW_Nl-n.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-BbbCCewR.js';
 import { K as KafkaLogo, O as OdigosLogo } from './index-IKusBlIE.js';
 import { K as K8sLogo } from './index-DGel4E-Z.js';
 
@@ -139,6 +139,7 @@ const getDestinationIcon = (type, forceFromUrl) => {
         [DestinationTypes.Coralogix]: CoralogixLogo,
         [DestinationTypes.Dash0]: Dash0Logo,
         [DestinationTypes.Datadog]: DatadogLogo,
+        [DestinationTypes.Dynamic]: OpenTelemetryLogo,
         [DestinationTypes.Dynatrace]: DynatraceLogo,
         [DestinationTypes.ElasticApm]: ElasticApmLogo,
         [DestinationTypes.ElasticSearch]: ElasticSearchLogo,

package/lib/{index-QaNawEGJ.js → index-qzll74wE.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-CTgLYGo-.js';
+import { M as MONITORS_OPTIONS, B as BUTTON_TEXTS } from './index-B7MM_DAw.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-BSKilkmZ.js';
+import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-n4huKtX2.js';
 import { I as ImageErrorIcon } from './index-DGel4E-Z.js';
 import ReactDOM from 'react-dom';
 import { I as InfoIcon } from './index-IKusBlIE.js';
@@ -26,6 +26,18 @@ const Text = ({ children, color, size, weight, align, family, opacity, decoratio
     return (React.createElement(TextWrapper$2, { "$color": color, "$size": size, "$weight": weight, "$align": align, "$family": family, "$opacity": opacity, "$decoration": decoration, ...props }, children));
 };
 
+const ErrorWrapper = styled.div `
+  padding: 4px 0 0 0;
+`;
+const ErrorMessage = styled(Text) `
+  font-size: 12px;
+  color: ${({ theme }) => theme.text.error};
+`;
+const FieldError = ({ children }) => {
+    return (React.createElement(ErrorWrapper, null,
+        React.createElement(ErrorMessage, null, children)));
+};
+
 const AutocompleteContainer = styled.div `
   position: relative;
   width: 100%;
@@ -39,13 +51,13 @@ const InputWrapper$2 = styled.div `
   padding-left: 12px;
   transition: border-color 0.3s;
   border-radius: 32px;
-  border: 1px solid ${({ theme }) => theme.colors.border};
+  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.text.error : theme.colors.border)};
 
   &:hover {
-    border-color: ${({ theme }) => theme.colors.secondary};
+    border-color: ${({ theme, $hasError }) => ($hasError ? theme.text.error_secondary : theme.colors.secondary)};
   }
   &:focus-within {
-    border-color: ${({ theme }) => theme.colors.secondary};
+    border-color: ${({ theme, $hasError }) => ($hasError ? theme.text.error_secondary : theme.colors.secondary)};
   }
 `;
 const StyledInput$1 = styled.input `
@@ -146,7 +158,7 @@ const filterOptions = (optionsList, input) => {
         return acc;
     }, []);
 };
-const AutocompleteInput = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, defaultText, onTextChange, style, disabled, ...props }) => {
+const AutocompleteInput = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, defaultText, onTextChange, style, disabled, errorMessage, ...props }) => {
     const [query, setQuery] = useState(selectedOption?.label || defaultText || '');
     const [filteredOptions, setFilteredOptions] = useState(filterOptions(options, query));
     const [showOptions, setShowOptions] = useState(false);
@@ -178,10 +190,11 @@ const AutocompleteInput = ({ placeholder = 'Type to search...', options, selecte
         return;
     };
     return (React.createElement(AutocompleteContainer, { style: style },
-        React.createElement(InputWrapper$2, null,
+        React.createElement(InputWrapper$2, { "$hasError": !!errorMessage },
             Icon && React.createElement(Icon, null),
             React.createElement(StyledInput$1, { type: 'text', value: query, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onBlur: () => !disabled && setShowOptions(false), onFocus: () => !disabled && setShowOptions(true), ...props })),
-        showOptions && filteredOptions.length ? (React.createElement(OptionsList, null, filteredOptions.map((option) => (React.createElement(OptionItem, { key: option.type || option.label, option: option, onClick: handleOptionClick }))))) : null));
+        showOptions && filteredOptions.length ? (React.createElement(OptionsList, null, filteredOptions.map((option) => (React.createElement(OptionItem, { key: option.type || option.label, option: option, onClick: handleOptionClick }))))) : null,
+        errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
 const OptionItem = ({ option, renderIcon = true, onClick }) => {
     const hasSubItems = !!option.items && option.items.length > 0;
@@ -455,18 +468,6 @@ const Popup = forwardRef(({ top, left, children }, ref) => {
     return ReactDOM.createPortal(React.createElement(PopupContainer, { ref: ref, "$top": top, "$left": left }, children), document.body);
 });
 
-const ErrorWrapper = styled.div `
-  padding: 4px 0 0 0;
-`;
-const ErrorMessage = styled(Text) `
-  font-size: 12px;
-  color: ${({ theme }) => theme.text.error};
-`;
-const FieldError = ({ children }) => {
-    return (React.createElement(ErrorWrapper, null,
-        React.createElement(ErrorMessage, null, children)));
-};
-
 const Container$t = styled.div `
   display: flex;
   align-items: center;
@@ -6046,13 +6047,16 @@ const Stepper = ({ data, currentStep = 0 }) => {
     useEffect(() => {
         setStepsList(data.map((step, i) => {
             if (i < currentStep - 1) {
-                return { ...step, state: StepState.Finished, subtitle: 'Success' };
+                // Finished
+                return { ...step, state: StepState.Finished, subtitle: step.subtitle || StatusType.Success };
             }
             else if (i === currentStep - 1) {
-                return { ...step, state: StepState.Active };
+                // Current
+                return { ...step, state: StepState.Active, subtitle: '' };
             }
             else {
-                return { ...step, state: StepState.Disabled };
+                // Future
+                return { ...step, state: StepState.Disabled, subtitle: '' };
             }
         }));
     }, [currentStep, data]);

package/lib/mock-data/sources/index.d.ts

@@ -4,7 +4,7 @@ export declare const MOCK_SOURCE_JAEGER: {
     namespace: string;
     name: string;
     kind: K8sResourceKind;
-    dataStreamNames: never[];
+    dataStreamNames: string[];
     selected: boolean;
     otelServiceName: string;
     numberOfInstances: number;

package/lib/snippets.js

@@ -1,5 +1,5 @@
-export { A as AddButton } from './index-QaNawEGJ.js';
-export { E as EditButton, N as NoteBackToSummary } from './index-KyiD2AtF.js';
+export { A as AddButton } from './index-qzll74wE.js';
+export { E as EditButton, N as NoteBackToSummary } from './index-CnBjimup.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-CTgLYGo-.js';
+import './index-B7MM_DAw.js';
 import './index-CFnxjzaW.js';
 import './index-DGel4E-Z.js';
 import './index-CJs4RDHU.js';
 import './index-IKusBlIE.js';
-import './useTransition-BSKilkmZ.js';
+import './useTransition-n4huKtX2.js';
 import 'react-dom';
 import './index-CWbxXTof.js';

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

@@ -17,6 +17,7 @@ export declare enum DestinationTypes {
     Coralogix = "coralogix",
     Dash0 = "dash0",
     Datadog = "datadog",
+    Dynamic = "dynamic",
     Dynatrace = "dynatrace",
     ElasticApm = "elasticapm",
     ElasticSearch = "elasticsearch",

package/lib/types.js

@@ -148,6 +148,7 @@ var DestinationTypes;
     DestinationTypes["Coralogix"] = "coralogix";
     DestinationTypes["Dash0"] = "dash0";
     DestinationTypes["Datadog"] = "datadog";
+    DestinationTypes["Dynamic"] = "dynamic";
     DestinationTypes["Dynatrace"] = "dynatrace";
     DestinationTypes["ElasticApm"] = "elasticapm";
     DestinationTypes["ElasticSearch"] = "elasticsearch";

package/lib/{useSourceSelectionFormData-DAxuVELF.js → useSourceSelectionFormData-Bw2p1Fr4.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-CTgLYGo-.js';
-import { b as useGenericForm } from './useTransition-BSKilkmZ.js';
+import { F as FORM_ALERTS } from './index-B7MM_DAw.js';
+import { b as useGenericForm } from './useTransition-n4huKtX2.js';
 import { g as getIdFromSseTarget } from './index-7-KCQK-x.js';
 
 const INITIAL$2 = {
@@ -327,6 +327,7 @@ const useDestinationFormData = (params) => {
             fields: Object.entries(safeJsonParse(fields, {})).map(([key, value]) => ({ key, value })),
         };
         handleFormChange(undefined, undefined, updatedData);
+        return updatedData;
     };
     return {
         formData,
@@ -373,10 +374,12 @@ 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;
     return {
         name: source.name,
         kind: source.kind,
-        selected: typeof selectAll === 'boolean' ? selectAll : source.selected && source.dataStreamNames?.includes(selectedStreamName) ? source.selected : false,
+        selected,
         numberOfInstances: source.numberOfInstances,
     };
 };
@@ -386,18 +389,37 @@ const mapSourceToSelectedSource = (source, selectedStreamName, selectAll) => {
         currentStreamName: selectedStreamName,
     };
 };
+const mergeAvailableAndSelectedSources = (available, selected, currentStreamName) => {
+    const payload = {};
+    Object.entries(available).forEach(([namespace, sources]) => {
+        payload[namespace] = sources.map((s) => mapSourceToSelectedSource(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);
+            if (foundIdx !== -1) {
+                payload[namespace][foundIdx] = mapped;
+            }
+            else {
+                payload[namespace].push(mapped);
+            }
+        });
+    });
+    return payload;
+};
 const useSourceSelectionFormData = (params) => {
     const { fetchSingleNamespace } = params || {};
     const { namespaces } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
     // only for "onboarding" - get unsaved values and set to state
     // (this is to persist the values when user navigates back to this page)
-    const { configuredSources, configuredFutureApps, availableSources } = useSetupStore();
+    const { configuredSources, configuredFutureApps, availableSources: availableSourcesFromStore } = useSetupStore();
     // Keeps intial values fetched from API, so we can later filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist sources".
-    const [recordedInitialSources, setRecordedInitialSources] = useState(availableSources);
+    const [availableSources, setRecordedInitialSources] = useState(availableSourcesFromStore);
     const [selectedNamespace, setSelectedNamespace] = useState('');
-    const [selectedSources, setSelectedSources] = useState(configuredSources);
     const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
+    const [selectedSources, setSelectedSources] = useState(mergeAvailableAndSelectedSources(availableSourcesFromStore, configuredSources, selectedStreamName));
     const fetchAndSetThisNamespace = (ns, selectAll) => {
         fetchSingleNamespace?.({ variables: { namespaceName: ns } }).then(({ data }) => {
             const { name, sources = [] } = data?.computePlatform?.k8sActualNamespace || {};
@@ -480,7 +502,7 @@ const useSourceSelectionFormData = (params) => {
         const payload = {};
         Object.entries(selectedSources).forEach(([namespace, sources]) => {
             sources.forEach((source) => {
-                const foundInitial = recordedInitialSources[namespace]?.find((initialSource) => initialSource.name === source.name && initialSource.kind === source.kind);
+                const foundInitial = availableSources[namespace]?.find((initialSource) => initialSource.name === source.name && initialSource.kind === source.kind);
                 if (foundInitial?.selected !== source.selected) {
                     if (!payload[namespace])
                         payload[namespace] = [];
@@ -502,7 +524,7 @@ const useSourceSelectionFormData = (params) => {
         return payload;
     };
     return {
-        recordedInitialSources,
+        availableSources,
         filteredNamespacesAndSources,
         getApiSourcesPayload,
         getApiFutureAppsPayload,

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import './index-CTgLYGo-.js';
+import './index-B7MM_DAw.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.27",
+  "version": "0.0.29",
   "author": "Odigos",
   "repository": {
     "type": "git",