@odigos/ui-kit 0.0.67 → 0.0.68

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.0.68](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.67...ui-kit-v0.0.68) (2025-07-23)
+
+
+### Features
+
+* toggle for advanced settings ([#271](https://github.com/odigos-io/ui-kit/issues/271)) ([53e9a0a](https://github.com/odigos-io/ui-kit/commit/53e9a0aedef964f4afea147eb98c3d1eb43ebe83))
+
+
+### Bug Fixes
+
+* dirty form state, and scroll pixels ([#269](https://github.com/odigos-io/ui-kit/issues/269)) ([c3d7a0e](https://github.com/odigos-io/ui-kit/commit/c3d7a0e61704d3dcb0882627c91004d0174ce461))
+
 ## [0.0.67](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.66...ui-kit-v0.0.67) (2025-07-23)
 
 

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

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import type { SVG } from '@/types';
+import type { SVG, StatusType } from '@/types';
 interface DropdownOption<T = string> {
     id?: T | null;
     value?: string | null;
@@ -19,6 +19,7 @@ interface DropdownProps {
     showSearch?: boolean;
     errorMessage?: string;
     hasError?: boolean;
+    status?: StatusType;
 }
 declare const Dropdown: FC<DropdownProps>;
 export { Dropdown, type DropdownProps, type DropdownOption };

package/lib/components/field-label/index.d.ts

@@ -1,9 +1,11 @@
 import { type FC, type CSSProperties } from 'react';
+import { StatusType } from '@/types';
 interface FieldLabelProps {
     title?: string;
     required?: boolean;
     tooltip?: string;
     style?: CSSProperties;
+    status?: StatusType;
 }
 declare const FieldLabel: FC<FieldLabelProps>;
 export { FieldLabel, type FieldLabelProps };

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

@@ -1,5 +1,5 @@
 import { type FC, type InputHTMLAttributes } from 'react';
-import { type SVG } from '@/types';
+import { StatusType, type SVG } from '@/types';
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     title?: string;
     icon?: SVG;
@@ -9,6 +9,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     required?: boolean;
     hasError?: boolean;
     errorMessage?: string;
+    status?: StatusType;
 }
 declare const Input: FC<InputProps>;
 export { Input, type InputProps };

package/lib/components.js

@@ -1,6 +1,6 @@
-import { B as Button } from './index-f2da9ad4.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-f2da9ad4.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-7074fb24.js';
+import { B as Button } from './index-5772129e.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-5772129e.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-847d188f.js';
 import React, { createContext, Component, createElement } from 'react';
 import { T as Theme } from './index-bd48e6e2.js';
 import 'styled-components';

package/lib/containers/system-settings/settings/types.d.ts

@@ -4,8 +4,7 @@ export declare enum SettingsTabs {
     Ui = "UI",
     Rollback = "Rollback",
     CollectorNode = "Collector Node",
-    CollectorGateway = "Collector Gateway",
-    Advanced = "Advanced"
+    CollectorGateway = "Collector Gateway"
 }
 export interface SettingsProps {
     formData: OdigosConfig;

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-bd48e6e2.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, MountMethod, AgentEnvVarsInjectionMethod, 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-f2da9ad4.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-5772129e.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
 import { C as CheckCircledIcon, O as OdigosLogo } from './index-50101bec.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-c1df4281.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-c2aef0e4.js';
 import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-391844c6.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-7074fb24.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-847d188f.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-58440c5c.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-42f40e7c.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
@@ -4730,7 +4730,6 @@ var SettingsTabs;
     SettingsTabs["Rollback"] = "Rollback";
     SettingsTabs["CollectorNode"] = "Collector Node";
     SettingsTabs["CollectorGateway"] = "Collector Gateway";
-    SettingsTabs["Advanced"] = "Advanced";
 })(SettingsTabs || (SettingsTabs = {}));
 
 const Card = styled.div `
@@ -4753,11 +4752,19 @@ const RowOfFields = styled(FlexRow) `
   width: 100%;
   gap: 12px;
   align-items: flex-start;
+  justify-content: space-between;
 `;
 
 const UiSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    const [isAdvanced, setIsAdvanced] = useState(false);
     return (React.createElement(Card, { ref: ref, id: SettingsTabs.Ui },
-        React.createElement(CardTitle, null, "UI"),
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "UI"),
+            React.createElement(Toggle, { title: 'Advanced Settings', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true })),
+        isAdvanced && (React.createElement(Input, { status: StatusType.Warning, title: 'UI Pagination Limit (Advanced)', tooltip: 'Pagination limit for fetching data from the UI backend, bigger limit means more data will be fetched at once, and less requests will be made to the backend', type: 'number', required: true, value: formData.uiPaginationLimit?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('uiPaginationLimit', value === '' ? null : Number(value));
+            } })),
         React.createElement(Input, { title: 'Central Backend URL', tooltip: 'URL of the central backend', required: true, value: formData.centralBackendURL || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('centralBackendURL', value || null);
@@ -4777,9 +4784,34 @@ const UiSettings = forwardRef(({ formData, handleFormChange }, ref) => {
 });
 UiSettings.displayName = UiSettings.name;
 
+const MOUNT_METHOD_OPTIONS = [
+    { id: MountMethod.VirtualDevice, value: 'Virtual Device' },
+    { id: MountMethod.HostPath, value: 'Host Path' },
+    { id: MountMethod.InitContainer, value: 'Init Container' },
+];
+const AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS = [
+    { id: AgentEnvVarsInjectionMethod.Loader, value: 'Loader' },
+    { id: AgentEnvVarsInjectionMethod.PodManifest, value: 'Pod Manifest' },
+    { id: AgentEnvVarsInjectionMethod.LoaderFallbackToPodManifest, value: 'Loader Fallback to Pod Manifest' },
+];
+
 const GeneralSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    const [isAdvanced, setIsAdvanced] = useState(false);
     return (React.createElement(Card, { ref: ref, id: SettingsTabs.General },
-        React.createElement(CardTitle, null, "General"),
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "General"),
+            React.createElement(Toggle, { title: 'Advanced Settings', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true })),
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(Dropdown, { status: StatusType.Warning, title: 'Mount Method (Advanced)', tooltip: 'Method used to mount volume', options: MOUNT_METHOD_OPTIONS, required: true, value: MOUNT_METHOD_OPTIONS.find((option) => option.id === formData.mountMethod) || undefined, onSelect: (option) => handleFormChange('mountMethod', option.id) }),
+            React.createElement(Dropdown, { status: StatusType.Warning, title: 'Agent Envs Injection Method (Advanced)', tooltip: 'How to inject environment variables into agents', options: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS, required: true, value: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS.find((option) => option.id === formData.agentEnvVarsInjectionMethod) || undefined, onSelect: (option) => handleFormChange('agentEnvVarsInjectionMethod', option.id) }),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Odiglet Health Probe Bind Port (Advanced)', tooltip: 'Port to bind the health probe', type: 'number', required: true, value: formData.odigletHealthProbeBindPort?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('odigletHealthProbeBindPort', value === '' ? null : Number(value));
+                } }),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Custom Container Runtime Socket Path (Advanced)', tooltip: 'Path to the custom container runtime socket', required: true, value: formData.customContainerRuntimeSocketPath || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('customContainerRuntimeSocketPath', value || null);
+                } }))),
         React.createElement(Toggle, { title: 'Karpenter Enabled', tooltip: 'Enable Karpenter support', initialValue: formData.karpenterEnabled || false, onChange: (bool) => handleFormChange('karpenterEnabled', bool) }),
         React.createElement(Toggle, { title: 'Allow Concurrent Agents', tooltip: 'Allow concurrent running agents', initialValue: formData.allowConcurrentAgents || false, onChange: (bool) => handleFormChange('allowConcurrentAgents', bool) }),
         React.createElement(Toggle, { title: 'Automatic Rollout Disabled', tooltip: 'Disable automatic rollout of pods after instrumentation', initialValue: formData.rollout?.automaticRolloutDisabled || false, onChange: (bool) => handleFormChange('rollout.automaticRolloutDisabled', bool) }),
@@ -4814,74 +4846,34 @@ const RollbackSettings = forwardRef(({ formData, handleFormChange }, ref) => {
 });
 RollbackSettings.displayName = RollbackSettings.name;
 
-const MOUNT_METHOD_OPTIONS = [
-    { id: MountMethod.VirtualDevice, value: 'Virtual Device' },
-    { id: MountMethod.HostPath, value: 'Host Path' },
-    { id: MountMethod.InitContainer, value: 'Init Container' },
-];
-const AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS = [
-    { id: AgentEnvVarsInjectionMethod.Loader, value: 'Loader' },
-    { id: AgentEnvVarsInjectionMethod.PodManifest, value: 'Pod Manifest' },
-    { id: AgentEnvVarsInjectionMethod.LoaderFallbackToPodManifest, value: 'Loader Fallback to Pod Manifest' },
-];
-
-const AdvancedSettings = forwardRef(({ formData, handleFormChange }, ref) => {
-    return (React.createElement(Card, { ref: ref, id: SettingsTabs.Advanced },
-        React.createElement(CardTitle, null, "Advanced"),
-        React.createElement(Input, { title: 'UI Pagination Limit', tooltip: 'Pagination limit for fetching data from the UI backend, bigger limit means more data will be fetched at once, and less requests will be made to the backend', type: 'number', required: true, value: formData.uiPaginationLimit?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('uiPaginationLimit', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Dropdown, { title: 'Mount Method', tooltip: 'Method used to mount volume', options: MOUNT_METHOD_OPTIONS, required: true, value: MOUNT_METHOD_OPTIONS.find((option) => option.id === formData.mountMethod) || undefined, onSelect: (option) => handleFormChange('mountMethod', option.id) }),
-        React.createElement(Dropdown, { title: 'Agent Env Vars Injection Method', tooltip: 'How to inject env vars into agents', options: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS, required: true, value: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS.find((option) => option.id === formData.agentEnvVarsInjectionMethod) || undefined, onSelect: (option) => handleFormChange('agentEnvVarsInjectionMethod', option.id) }),
-        React.createElement(Input, { title: 'Odiglet Health Probe Bind Port', tooltip: 'Port to bind the health probe', type: 'number', required: true, value: formData.odigletHealthProbeBindPort?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('odigletHealthProbeBindPort', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Custom Container Runtime Socket Path', tooltip: 'Path to the custom container runtime socket', required: true, value: formData.customContainerRuntimeSocketPath || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('customContainerRuntimeSocketPath', value || null);
-            } }),
-        React.createElement(Input, { title: 'K8s Node Logs Directory', tooltip: 'Target directory for K8s logs if `/var/log` is a symlink', required: true, value: formData.collectorNode?.k8sNodeLogsDirectory || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.k8sNodeLogsDirectory', value || null);
-            } }),
-        React.createElement(Input, { title: 'Coll. Node Own Metrics Port', tooltip: "Port for the collector node's own Prometheus metrics", type: 'number', required: true, value: formData.collectorNode?.collectorOwnMetricsPort?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.collectorOwnMetricsPort', value === '' ? null : Number(value));
-            } }),
+const CollectorNodeSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    const [isAdvanced, setIsAdvanced] = useState(false);
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorNode },
         React.createElement(RowOfFields, null,
-            React.createElement(Input, { title: 'Coll. Node Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
+            React.createElement(CardTitle, null, "Collector Node"),
+            React.createElement(Toggle, { title: 'Advanced Settings', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true })),
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(Input, { status: StatusType.Warning, title: 'K8s Node Logs Directory', tooltip: 'Target directory for K8s logs if `/var/log` is a symlink', required: true, value: formData.collectorNode?.k8sNodeLogsDirectory || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorNode.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    handleFormChange('collectorNode.k8sNodeLogsDirectory', value || null);
                 } }),
-            React.createElement(Input, { title: 'Coll. Node Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+            React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Node Own Metrics Port', tooltip: "Port for the collector node's own Prometheus metrics", type: 'number', required: true, value: formData.collectorNode?.collectorOwnMetricsPort?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorNode.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
-                } })),
-        React.createElement(Input, { title: 'Coll. Node Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.goMemLimitMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.goMemLimitMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(RowOfFields, null,
-            React.createElement(Input, { title: 'Coll. Gateway Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
-                    const { value } = e.target;
-                    handleFormChange('collectorGateway.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    handleFormChange('collectorNode.collectorOwnMetricsPort', value === '' ? null : Number(value));
                 } }),
-            React.createElement(Input, { title: 'Coll. Gateway Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+            React.createElement(RowOfFields, null,
+                React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Node Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorNode.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    } }),
+                React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Node Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorNode.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                    } })),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Node Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.goMemLimitMiB?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
-                } })),
-        React.createElement(Input, { title: 'Coll. Gateway Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.goMemLimitMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.goMemLimitMiB', value === '' ? null : Number(value));
-            } })));
-});
-AdvancedSettings.displayName = AdvancedSettings.name;
-
-const CollectorNodeSettings = forwardRef(({ formData, handleFormChange }, ref) => {
-    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorNode },
-        React.createElement(CardTitle, null, "Collector Node"),
+                    handleFormChange('collectorNode.goMemLimitMiB', value === '' ? null : Number(value));
+                } }))),
         React.createElement(RowOfFields, null,
             React.createElement(Input, { title: 'Request Memory (MB)', tooltip: 'Request memory for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.requestMemoryMiB?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
@@ -4904,8 +4896,25 @@ const CollectorNodeSettings = forwardRef(({ formData, handleFormChange }, ref) =
 CollectorNodeSettings.displayName = CollectorNodeSettings.name;
 
 const CollectorGatewaySettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    const [isAdvanced, setIsAdvanced] = useState(false);
     return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorGateway },
-        React.createElement(CardTitle, null, "Collector Gateway"),
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "Collector Gateway"),
+            React.createElement(Toggle, { title: 'Advanced Settings', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true })),
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(RowOfFields, null,
+                React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Gateway Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorGateway.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    } }),
+                React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Gateway Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                    } })),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Gateway Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.goMemLimitMiB?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.goMemLimitMiB', value === '' ? null : Number(value));
+                } }))),
         React.createElement(RowOfFields, null,
             React.createElement(Input, { title: 'Autoscaler Min. Replicas', tooltip: 'Minimum number of replicas for the collector gateway', type: 'number', required: true, value: formData.collectorGateway?.minReplicas?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
@@ -4946,15 +4955,18 @@ const DataContainer = styled.div `
 const DRAWER_WIDTH = '750px';
 const TITLE_TEXT = 'System Settings';
 const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
+    const [isSaving, setIsSaving] = useState(false);
     const [settings, setSettings] = useState(undefined);
     const { formData, handleFormChange, resetFormData, isFormDirty } = useGenericForm(settings);
-    useEffect(() => {
-        fetchSettings().then(setSettings);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const [isSaving, setIsSaving] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
     const toggleOpen = () => setIsOpen((prev) => !prev);
+    useEffect(() => {
+        if (isOpen)
+            fetchSettings().then(setSettings);
+        else
+            setSettings(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
     const [cancelWarningOpen, setCancelWarningOpen] = useState(false);
     const [cancelApproveCallback, setCancelApproveCallback] = useState(null);
     const handleWithCancelWarning = (callback) => {
@@ -4980,9 +4992,8 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
     const rollbackRef = useRef(null);
     const collectorNodeRef = useRef(null);
     const collectorGatewayRef = useRef(null);
-    const advancedRef = useRef(null);
-    const refsArray = [generalRef, uiRef, rollbackRef, collectorNodeRef, collectorGatewayRef, advancedRef];
-    const tabsArray = [SettingsTabs.General, SettingsTabs.Ui, SettingsTabs.Rollback, SettingsTabs.CollectorNode, SettingsTabs.CollectorGateway, SettingsTabs.Advanced];
+    const refsArray = [generalRef, uiRef, rollbackRef, collectorNodeRef, collectorGatewayRef];
+    const tabsArray = [SettingsTabs.General, SettingsTabs.Ui, SettingsTabs.Rollback, SettingsTabs.CollectorNode, SettingsTabs.CollectorGateway];
     const scrollTo = (id) => {
         const scrollContainer = scrollContainerRef.current;
         if (!scrollContainer)
@@ -4993,7 +5004,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
             if (curr && curr.id === id) {
                 const containerRect = scrollContainer.getBoundingClientRect();
                 const targetRect = curr.getBoundingClientRect();
-                relativeTop = targetRect.top - containerRect.top + scrollContainer.scrollTop - 20; // -20px offset for better visual spacing
+                relativeTop = targetRect.top - containerRect.top + scrollContainer.scrollTop;
                 break;
             }
         }
@@ -5054,11 +5065,6 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
                         onClick: () => handleTabChange(SettingsTabs.CollectorGateway),
                         selected: selectedTab === SettingsTabs.CollectorGateway,
                     },
-                    {
-                        label: SettingsTabs.Advanced,
-                        onClick: () => handleTabChange(SettingsTabs.Advanced),
-                        selected: selectedTab === SettingsTabs.Advanced,
-                    },
                 ],
             }, footer: {
                 isOpen: isFormDirty,
@@ -5082,8 +5088,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
             React.createElement(UiSettings, { ref: uiRef, formData: formData, handleFormChange: handleFormChange }),
             React.createElement(RollbackSettings, { ref: rollbackRef, formData: formData, handleFormChange: handleFormChange }),
             React.createElement(CollectorNodeSettings, { ref: collectorNodeRef, formData: formData, handleFormChange: handleFormChange }),
-            React.createElement(CollectorGatewaySettings, { ref: collectorGatewayRef, formData: formData, handleFormChange: handleFormChange }),
-            React.createElement(AdvancedSettings, { ref: advancedRef, formData: formData, handleFormChange: handleFormChange }))) : (React.createElement(CenterThis, null,
+            React.createElement(CollectorGatewaySettings, { ref: collectorGatewayRef, formData: formData, handleFormChange: handleFormChange }))) : (React.createElement(CenterThis, null,
             React.createElement(FadeLoader, { scale: 1.2 })))),
         React.createElement(CancelWarning, { isOpen: cancelWarningOpen, name: TITLE_TEXT, onApprove: () => {
                 cancelApproveCallback?.();

package/lib/{index-f2da9ad4.js → index-5772129e.js}

@@ -17507,18 +17507,19 @@ const Title$5 = styled(Text) `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: ${({ $status, theme }) => ($status ? theme.text[$status] : theme.text.secondary)};
 `;
 const OptionalText = styled(Text) `
   font-size: 12px;
   color: ${({ theme }) => theme.text.darker_grey};
   opacity: 0.8;
 `;
-const FieldLabel = ({ title, required, tooltip, style }) => {
+const FieldLabel = ({ title, required, tooltip, style, status }) => {
     if (!title)
         return null;
     return (React.createElement(Wrapper, { style: style },
         React.createElement(Tooltip, { text: tooltip, withIcon: true },
-            React.createElement(Title$5, null, title),
+            React.createElement(Title$5, { "$status": status }, title),
             !required && React.createElement(OptionalText, null, "(optional)"))));
 };
 
@@ -17543,14 +17544,19 @@ const InputWrapper$2 = styled.div `
       cursor: not-allowed;
       opacity: 0.6;
     `}
-  ${({ $hasError }) => $hasError &&
-    css `
-      border-color: ${({ theme }) => theme.text.error};
-    `}
-  ${({ $isActive }) => $isActive &&
-    css `
-      border-color: ${({ theme }) => theme.colors.secondary};
-    `}
+  ${({ $isActive, $hasError, $status }) => $isActive
+    ? css `
+          border-color: ${({ theme }) => theme.colors.secondary};
+        `
+    : $hasError
+        ? css `
+          border-color: ${({ theme }) => theme.text.error};
+        `
+        : $status
+            ? css `
+          border-color: ${({ theme }) => theme.text[$status]};
+        `
+            : ''}
   &:hover {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
@@ -17612,7 +17618,7 @@ const Button$1 = styled.button `
     cursor: not-allowed;
   }
 `;
-const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, value, onChange, type = InputTypes.Text, name, ...props }) => {
+const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, value, onChange, type = InputTypes.Text, name, status, ...props }) => {
     const theme = Theme.useTheme();
     const isSecret = type === InputTypes.Password;
     const [revealSecret, setRevealSecret] = useState(false);
@@ -17628,8 +17634,8 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
             e.stopPropagation();
     };
     return (React.createElement(Container$g, null,
-        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
-        React.createElement(InputWrapper$2, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus },
+        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip, status: status }),
+        React.createElement(InputWrapper$2, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus, "$status": status },
             isSecret ? (React.createElement(IconWrapperClickable, { onClick: () => setRevealSecret((prev) => !prev) }, revealSecret ? React.createElement(EyeClosedIcon, { size: 14, fill: theme.text.grey }) : React.createElement(EyeOpenIcon, { size: 14, fill: theme.text.grey }))) : Icon ? (React.createElement(IconWrapper$2, null,
                 React.createElement(Icon, { size: 14, fill: theme.text.grey }))) : null,
             React.createElement(StyledInput, { "data-id": name, type: revealSecret ? InputTypes.Text : type === InputTypes.Number ? InputTypes.Text : type, "$hasIcon": !!Icon || isSecret, name: name, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, ...props }),
@@ -17695,10 +17701,15 @@ const DropdownHeader = styled.div `
           background: transparent;
         `};
 
-  ${({ $hasError }) => $hasError &&
-    css `
-      border-color: ${({ theme }) => theme.text.error};
-    `}
+  ${({ $hasError, $status }) => $hasError
+    ? css `
+          border-color: ${({ theme }) => theme.text.error};
+        `
+    : $status
+        ? css `
+          border-color: ${({ theme }) => theme.text[$status]};
+        `
+        : ''}
 
   &:hover {
     border-color: ${({ $isMulti, $hasSelections, $disabled, theme }) => ($disabled ? 'auto' : $isMulti && $hasSelections ? theme.colors.border : theme.colors.secondary)};
@@ -17709,7 +17720,7 @@ const IconWrapper$1 = styled.div `
   align-items: center;
   gap: 4px;
 `;
-const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeholder, disabled = false, isMulti = false, showSearch = false, required = false, errorMessage, hasError = false, }) => {
+const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeholder, disabled = false, isMulti = false, showSearch = false, required = false, errorMessage, hasError = false, status, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [openUpwards, setOpenUpwards] = useState(false);
     const containerRef = useRef(null);
@@ -17727,9 +17738,9 @@ const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeh
     };
     const arrLen = Array.isArray(value) ? value.length : 0;
     return (React.createElement(RootContainer, { "$disabled": disabled },
-        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
+        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip, status: status }),
         React.createElement(RelativeContainer, { ref: containerRef },
-            React.createElement(DropdownHeader, { "$isOpen": isOpen, "$isMulti": isMulti, "$hasSelections": Array.isArray(value) ? !!value.length : false, "$hasError": !!errorMessage || hasError, "$disabled": disabled, onClick: () => !disabled && toggleOpen() },
+            React.createElement(DropdownHeader, { "$isOpen": isOpen, "$isMulti": isMulti, "$hasSelections": Array.isArray(value) ? !!value.length : false, "$hasError": !!errorMessage || hasError, "$status": status, "$disabled": disabled, onClick: () => !disabled && toggleOpen() },
                 React.createElement(DropdownPlaceholder, { value: value, placeholder: placeholder, onDeselect: onDeselect }),
                 React.createElement(IconWrapper$1, null,
                     isMulti && React.createElement(Badge, { label: arrLen, filled: !!arrLen }),

package/lib/{index-7074fb24.js → index-847d188f.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a3 as WarningModal } from './index-f2da9ad4.js';
+import { a3 as WarningModal } from './index-5772129e.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-bd48e6e2.js';
 import 'styled-components';

package/lib/snippets.js

@@ -1,5 +1,5 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-f2da9ad4.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-f2da9ad4.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-5772129e.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-5772129e.js';
 import React from 'react';
 import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-bd48e6e2.js';
 import { E as EditIcon } from './index-391844c6.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -105,22 +105,22 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-docs": "^9.0.18",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "9.0.16",
-    "@types/node": "^24.0.14",
+    "@storybook/react-webpack5": "9.0.18",
+    "@types/node": "^24.1.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "babel-loader": "^10.0.0",
     "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.31.0",
-    "eslint-config-next": "^15.4.1",
-    "eslint-plugin-storybook": "9.0.16",
-    "next": "^15.4.1",
+    "eslint-config-next": "^15.4.3",
+    "eslint-plugin-storybook": "9.0.18",
+    "next": "^15.4.3",
     "postcss": "^8.5.6",
     "rollup": "^3.29.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "9.0.16",
+    "storybook": "9.0.18",
     "typescript": "^5.8.3"
   }
 }

package/lib/containers/system-settings/settings/advanced-settings.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type SettingsProps } from './types';
-declare const AdvancedSettings: React.ForwardRefExoticComponent<SettingsProps & React.RefAttributes<HTMLDivElement>>;
-export { AdvancedSettings };