@odigos/ui-kit 0.0.76 → 0.0.78

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.0.78](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.77...ui-kit-v0.0.78) (2025-08-06)
+
+
+### Features
+
+* display loaders when namespaces are fetching ([#302](https://github.com/odigos-io/ui-kit/issues/302)) ([9916914](https://github.com/odigos-io/ui-kit/commit/99169143ae04bb479c7837b1f3b40c0af37146c4))
+* show destination boolean in data flow nodes ([#300](https://github.com/odigos-io/ui-kit/issues/300)) ([7bb56be](https://github.com/odigos-io/ui-kit/commit/7bb56bedad94985e1333a980b66bead1e8321e51))
+
+## [0.0.77](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.76...ui-kit-v0.0.77) (2025-08-06)
+
+
+### Features
+
+* add disabled state to destination form and modal ([#298](https://github.com/odigos-io/ui-kit/issues/298)) ([fa20002](https://github.com/odigos-io/ui-kit/commit/fa2000297df8745415bf6095ec31a18caad60725))
+
 ## [0.0.76](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.75...ui-kit-v0.0.76) (2025-08-06)
 
 

package/lib/components.js

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

package/lib/containers.js

@@ -2,14 +2,14 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, us
 import styled, { css } from 'styled-components';
 import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-fdf3a268.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, ProgrammingLanguages, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-a1b59a38.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-0a99fd0b.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
 import { C as CheckCircledIcon, O as OdigosLogo } from './index-1d5c06a0.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-b5b322ad.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
 import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-ba7b6d8a.js';
 import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-ba84d272.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-45ee08be.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-3a26952d.js';
 import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-0d93b2b4.js';
 import { f as filterActions, l as getEntityLabel, k as getEntityIcon, v as sleep, n as getPlatformIcon, o as getPlatformLabel, g as formatBytes, i as getContainersIcons, p as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, r as getYamlFieldsForDestination, m as getMetricForEntity, q as getWorkloadId, s as hasUnhealthyInstances, h as getContainersInstrumentedCount, t as isOverTime } from './index-c51fc6a4.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
@@ -509,14 +509,14 @@ const Container$i = styled.div `
   gap: 24px;
   padding: 4px;
 `;
-const FieldTitle$1 = styled(Text) `
+const FieldTitle$2 = styled(Text) `
   margin-bottom: 12px;
 `;
 const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
     return (React.createElement(Container$i, null,
         isUpdate && (React.createElement("div", null,
-            React.createElement(FieldTitle$1, null, "Status"),
+            React.createElement(FieldTitle$2, null, "Status"),
             React.createElement(Segment, { options: [
                     { icon: CheckCircledIcon, label: 'active', value: false, selectedBgColor: theme.text.success + Theme.opacity.hex['050'] },
                     { icon: CrossCircledIcon, label: 'inactive', value: true, selectedBgColor: theme.text.error + Theme.opacity.hex['050'] },
@@ -1707,6 +1707,7 @@ const mapToNodeData$1 = (entity) => {
         icon,
         iconSrc,
         monitors: mapExportedSignals(entity.exportedSignals),
+        isActive: !entity.disabled,
         raw: entity,
     };
 };
@@ -2398,8 +2399,12 @@ const NotesWrapper = styled.div `
 const SignalsAndDocsWrapper = styled(FlexRow) `
   justify-content: space-between;
 `;
+const FieldTitle$1 = styled(Text) `
+  margin-bottom: 12px;
+`;
 const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validateForm, handleFormChange, dynamicFields, setDynamicFields, testConnection }) => {
     const { type, displayName, supportedSignals, testConnectionSupported } = categoryItem || {};
+    const theme = Theme.useTheme();
     const [autoFilled, setAutoFilled] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
     const [connection, setConnection] = useState(undefined);
@@ -2484,6 +2489,12 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
         React.createElement(SignalsAndDocsWrapper, null,
             React.createElement(MonitorsCheckboxes, { title: isUpdate ? '' : 'This connection will monitor:', required: true, allowedSignals: supportedMonitors, selectedSignals: selectedMonitors, setSelectedSignals: handleSelectedSignals, errorMessage: formErrors['exportedSignals'] }),
             !isUpdate && React.createElement(DocsButton, { endpoint: `/backends/${type}` })),
+        isUpdate && (React.createElement("div", null,
+            React.createElement(FieldTitle$1, null, "Status"),
+            React.createElement(Segment, { options: [
+                    { icon: CheckCircledIcon, label: 'active', value: false, selectedBgColor: theme.text.success + Theme.opacity.hex['050'] },
+                    { icon: CrossCircledIcon, label: 'inactive', value: true, selectedBgColor: theme.text.error + Theme.opacity.hex['050'] },
+                ], selected: formData.disabled, setSelected: (bool) => handleFormChange('disabled', bool) }))),
         !isUpdate && (React.createElement(Input, { title: 'Destination name', placeholder: 'Enter destination name', value: formData['name'], onChange: (e) => {
                 dirtyForm();
                 handleFormChange('name', e.target.value);
@@ -2745,6 +2756,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         return {
             id: alreadyConfigDest?.id || '',
             name: alreadyConfigDest?.name || formData.name,
+            disabled: alreadyConfigDest?.disabled || formData.disabled,
             dataStreamNames: alreadyConfigDest?.dataStreamNames || [],
             conditions: alreadyConfigDest?.conditions || [],
             exportedSignals: alreadyConfigDest?.exportedSignals || formData.exportedSignals,
@@ -4032,7 +4044,7 @@ const NotSourcesWrapper = styled(CenterThis) `
 const SelectionCount = styled(Text) `
   width: 18px;
 `;
-const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesAndSources, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource, selectedFutureApps, onSelectFutureApps, }) => {
+const SourceList = ({ isModal = false, withInstances = true, isFetchingEachNamespace, fetchedNamespaces, filteredNamespacesAndSources, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource, selectedFutureApps, onSelectFutureApps, }) => {
     const theme = Theme.useTheme();
     const { namespacesLoading } = useEntityStore();
     const matrix = Object.entries(filteredNamespacesAndSources || {});
@@ -4040,39 +4052,41 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
         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 futureAppsForNamespace = selectedFutureApps?.[namespace]?.selected || false;
-        const onlySelectedSources = sourcesForNamespace.filter(({ selected }) => selected);
-        const isNamespaceLoaded = sourcesForNamespace.length > 0;
-        const isNamespaceSelected = selectedNamespace === namespace;
-        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 },
-                    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) &&
-                (hasSources ? (React.createElement(RelativeWrapper, { "$addPadding": !onSelectSource },
-                    React.createElement(AbsoluteWrapper, null,
-                        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 });
-                    }))) : (React.createElement(NotSourcesWrapper, { "$addPadding": !onSelectSource }, namespacesLoading ? React.createElement(FadeLoader, null) : React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_SOURCES_NAMESPACE, subTitle: DISPLAY_TITLES.TRY_SEARCH_OR_OTHER_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;
+            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 },
+                        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' }))),
+                        isFetchingEachNamespace && !fetchedNamespaces?.includes(namespace) ? (React.createElement(FadeLoader, { scale: 0.8 })) : (React.createElement(SelectionCount, { size: 10, color: theme.text.grey }, isNamespaceLoaded ? `${onlySelectedSources.length}/${sources.length}` : null)),
+                        onSelectNamespace && React.createElement(ExtendArrow, { extend: isNamespaceSelected }))),
+                (isNamespaceSelected || !onSelectNamespace) &&
+                    (hasSources ? (React.createElement(RelativeWrapper, { "$addPadding": !onSelectSource },
+                        React.createElement(AbsoluteWrapper, null,
+                            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 });
+                        }))) : (React.createElement(NotSourcesWrapper, { "$addPadding": !onSelectSource }, namespacesLoading || (isFetchingEachNamespace && !fetchedNamespaces?.includes(namespace)) ? (React.createElement(FadeLoader, null)) : (React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_SOURCES_NAMESPACE, subTitle: DISPLAY_TITLES.TRY_SEARCH_OR_OTHER_NAMESPACE })))))));
+        }),
+        isFetchingEachNamespace && React.createElement(FadeLoader, { scale: 1.2 })));
 };
 const SourceRow = ({ withInstances, source, namespace, isSelected, onSelect, }) => {
     return (React.createElement(SourceItem, { "data-id": `source-${source.name}`, "$selected": isSelected, "$withClick": !!onSelect, onClick: () => onSelect?.(source) },

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) => DestinationFormData;
+    loadFormWithDrawerItem: ({ destinationType: { type }, name, disabled, exportedSignals, fields }: Destination) => DestinationFormData;
     yamlFields: DestinationYamlProperties[];
     setYamlFields: import("react").Dispatch<import("react").SetStateAction<DestinationYamlProperties[]>>;
     dynamicFields: DestinationDynamicField[];

package/lib/hooks/useSourceSelectionFormData.d.ts

@@ -6,6 +6,8 @@ interface UseSourceFormDataParams {
     fetchSingleNamespace: FetchSingleNamespace;
 }
 export interface UseSourceSelectionFormData {
+    isFetchingEachNamespace: boolean;
+    fetchedNamespaces: string[];
     availableSources: AvailableSourcesByNamespace;
     filteredNamespacesAndSources: AvailableSourcesByNamespace;
     getApiSourcesPayload: () => SourceSelectionFormData;

package/lib/hooks.js

@@ -243,6 +243,7 @@ const INITIAL$1 = {
         traces: false,
     },
     fields: [],
+    disabled: false,
 };
 const buildFormDynamicFields = (fields) => {
     return fields
@@ -347,11 +348,12 @@ const useDestinationFormData = (params) => {
         handleErrorChange(undefined, undefined, errors);
         return ok;
     };
-    const loadFormWithDrawerItem = ({ destinationType: { type }, name, exportedSignals, fields }) => {
+    const loadFormWithDrawerItem = ({ destinationType: { type }, name, disabled, exportedSignals, fields }) => {
         const updatedData = {
             ...INITIAL$1,
             type,
             name,
+            disabled,
             exportedSignals,
             fields: Object.entries(safeJsonParse(fields, {})).map(([key, value]) => ({ key, value })),
         };
@@ -470,6 +472,8 @@ const useSourceSelectionFormData = (params) => {
     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 [availableSources, setRecordedInitialSources] = useState(availableSourcesFromStore);
+    const [isFetchingEachNamespace, setIsFetchingEachNamespace] = useState(false);
+    const [fetchedNamespaces, setFetchedNamespaces] = useState([]);
     const [selectedNamespace, setSelectedNamespace] = useState('');
     const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
     const [selectedSources, setSelectedSources] = useState(mergeAvailableAndSelectedSources(availableSourcesFromStore, configuredSources, selectedStreamName));
@@ -479,6 +483,7 @@ const useSourceSelectionFormData = (params) => {
             const { name, sources = [] } = data?.computePlatform?.k8sActualNamespace || {};
             if (!name)
                 return;
+            setFetchedNamespaces((prev) => [...prev, name]);
             setRecordedInitialSources((prev) => ({
                 ...prev,
                 [name]: sources.map((s) => mapToAvailableSource(s, selectedStreamName)),
@@ -508,8 +513,10 @@ const useSourceSelectionFormData = (params) => {
                 return payload;
             });
             (async () => {
+                setIsFetchingEachNamespace(true);
                 for await (const ns of namespaces)
                     await fetchAndSetThisNamespace(ns);
+                setIsFetchingEachNamespace(false);
             })();
         }
     }, [namespaces, selectedStreamName]);
@@ -589,6 +596,8 @@ const useSourceSelectionFormData = (params) => {
         return payload;
     };
     return {
+        isFetchingEachNamespace,
+        fetchedNamespaces,
         availableSources,
         filteredNamespacesAndSources,
         getApiSourcesPayload,

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

@@ -16522,7 +16522,7 @@ const BaseNode = memo(({ id: nodeId, data }) => {
     const isPending = isThisPending({ entityType, entityId });
     const renderActions = () => {
         const StatusIcon = hasActiveBoolean ? getStatusIcon(isActive ? StatusType.Success : StatusType.Info, theme) : status && getStatusIcon(status, theme);
-        const statusTooltipText = hasActiveBoolean ? `${entityType} is ${isActive ? 'active' : 'inactive'}` : undefined;
+        const statusTooltipText = hasActiveBoolean ? `${entityType} is ${isActive ? 'enabled' : 'disabled'}` : undefined;
         const sourceIsInstrumenting = isSource && (!raw.conditions?.length || raw.conditions?.some(({ status }) => status === 'loading'));
         // TODO: handle action/icon to apply instrumentation-rules for individual sources (@Notion GEN-1650)
         return isPending ? (React.createElement(FadeLoader, null)) : StatusIcon ? (React.createElement(Tooltip, { text: statusTooltipText },

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a3 as WarningModal } from './index-a1b59a38.js';
+import { a3 as WarningModal } from './index-0a99fd0b.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-fdf3a268.js';
 import 'styled-components';

package/lib/snippets.js

@@ -1,5 +1,5 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-a1b59a38.js';
-export { ai as AddButton, an as AddNode, ao as BaseNode, ak as CopyText, ap as EdgedNode, ag as Flow, aq as FrameNode, ar as HeaderNode, aw as LabeledEdge, as as MapItemNode, at as NoDataNode, al as PodContainer, au as ScrollNode, av as SkeletonNode, am as SourceContainer, ad as nodeConfig } from './index-a1b59a38.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-0a99fd0b.js';
+export { ai as AddButton, an as AddNode, ao as BaseNode, ak as CopyText, ap as EdgedNode, ag as Flow, aq as FrameNode, ar as HeaderNode, aw as LabeledEdge, as as MapItemNode, at as NoDataNode, al as PodContainer, au as ScrollNode, av as SkeletonNode, am as SourceContainer, ad as nodeConfig } from './index-0a99fd0b.js';
 import React from 'react';
 import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-fdf3a268.js';
 import { E as EditIcon } from './index-ba84d272.js';

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

@@ -70,6 +70,7 @@ export declare enum DestinationTypes {
 export interface Destination {
     id: string;
     name: string;
+    disabled: boolean;
     dataStreamNames: string[];
     exportedSignals: {
         traces: boolean;
@@ -134,6 +135,7 @@ export interface DestinationFormData {
         key: string;
         value: string;
     }[];
+    disabled: Destination['disabled'];
 }
 export interface DestinationDynamicField {
     name: DestinationYamlProperties['name'];

package/package.json

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