@odigos/ui-kit 0.0.75 → 0.0.77

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* limit source-drawer tabs ([#296](https://github.com/odigos-io/ui-kit/issues/296)) ([7526675](https://github.com/odigos-io/ui-kit/commit/7526675c8de778ecc7e98a3881e9cd185b988077))
+
 ## [0.0.75](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.74...ui-kit-v0.0.75) (2025-08-06)
 
 

package/lib/containers.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback, Children } from 'react';
 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, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.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 { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
 import { C as CheckCircledIcon, O as OdigosLogo } from './index-1d5c06a0.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'] },
@@ -2398,8 +2398,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 +2488,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 +2755,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,
@@ -4339,6 +4350,8 @@ var Tabs;
     Tabs["Pods"] = "Pods";
     Tabs["Libraries"] = "Libraries";
 })(Tabs || (Tabs = {}));
+const SUPPORTED_KINDS_FOR_DESCRIBE = [K8sResourceKind.Deployment, K8sResourceKind.StatefulSet, K8sResourceKind.DaemonSet];
+const SUPPORTED_LANGUAGES_FOR_LIBRARIES = [ProgrammingLanguages.Python];
 const FormContainer = styled.div `
   width: 100%;
   height: 100%;
@@ -4386,6 +4399,30 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
             containers: thisItem?.containers || [],
         };
     }, [thisItem]);
+    const tabs = useMemo(() => {
+        const arr = [
+            {
+                label: Tabs.Overview,
+                onClick: () => setSelectedTab(Tabs.Overview),
+                selected: selectedTab === Tabs.Overview,
+            },
+        ];
+        if (SUPPORTED_KINDS_FOR_DESCRIBE.includes(thisItem?.kind)) {
+            arr.push({
+                label: Tabs.Pods,
+                onClick: () => setSelectedTab(Tabs.Pods),
+                selected: selectedTab === Tabs.Pods,
+            });
+        }
+        if (thisItem?.containers?.some(({ language }) => SUPPORTED_LANGUAGES_FOR_LIBRARIES.includes(language))) {
+            arr.push({
+                label: Tabs.Libraries,
+                onClick: () => setSelectedTab(Tabs.Libraries),
+                selected: selectedTab === Tabs.Libraries,
+            });
+        }
+        return arr;
+    }, [selectedTab, thisItem]);
     if (!thisItem)
         return null;
     const handleEdit = (bool) => {
@@ -4412,23 +4449,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
         setIsFormDirty(false);
         setIsEditing(false);
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', hideEditTitleFromEdit: true, icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: [
-            {
-                label: Tabs.Overview,
-                onClick: () => setSelectedTab(Tabs.Overview),
-                selected: selectedTab === Tabs.Overview,
-            },
-            {
-                label: Tabs.Pods,
-                onClick: () => setSelectedTab(Tabs.Pods),
-                selected: selectedTab === Tabs.Pods,
-            },
-            {
-                label: Tabs.Libraries,
-                onClick: () => setSelectedTab(Tabs.Libraries),
-                selected: selectedTab === Tabs.Libraries,
-            },
-        ], headerActionButtons: [
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', hideEditTitleFromEdit: true, icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: tabs, headerActionButtons: [
             {
                 'data-id': 'rollout-restart',
                 variant: 'tertiary',

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.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 })),
         };

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.75",
+  "version": "0.0.77",
   "author": "Odigos",
   "repository": {
     "type": "git",