@odigos/ui-kit 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [0.0.9](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.8...ui-kit-v0.0.9) (2025-03-16)
+
+
+### Features
+
+* add icon for connections ([#23](https://github.com/odigos-io/ui-kit/issues/23)) ([6f28052](https://github.com/odigos-io/ui-kit/commit/6f2805265b6b9dfbaf482decff87fb613bc5c15d))
+* use source logos from SVG imports, not URL fetched ([#22](https://github.com/odigos-io/ui-kit/issues/22)) ([c37b564](https://github.com/odigos-io/ui-kit/commit/c37b564810e8cfb38d1cbd7fa4b4a31979149218))
+
+
+### Bug Fixes
+
+* click area in data-card with expand ([#19](https://github.com/odigos-io/ui-kit/issues/19)) ([a2c661f](https://github.com/odigos-io/ui-kit/commit/a2c661f0d7798328e949bbfd5fa175284a33bc69))
+* controlled-image fallback icon ([#21](https://github.com/odigos-io/ui-kit/issues/21)) ([cb15639](https://github.com/odigos-io/ui-kit/commit/cb15639311588d358b17fc75bb803f222d7f1bc6))
+* no-data for describe source pods ([#20](https://github.com/odigos-io/ui-kit/issues/20)) ([65aa7cb](https://github.com/odigos-io/ui-kit/commit/65aa7cb4f068868cefdf8e9af81cd2424c61b5dc))
+
+## [0.0.8](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.7...ui-kit-v0.0.8) (2025-03-16)
+
+
+### Features
+
+* add error-boundary ([#13](https://github.com/odigos-io/ui-kit/issues/13)) ([8e8e7c8](https://github.com/odigos-io/ui-kit/commit/8e8e7c813a72da550f9d312bfb9f032c391e0aa9))
+* add tooltip to filtered-count ([#16](https://github.com/odigos-io/ui-kit/issues/16)) ([9b7af73](https://github.com/odigos-io/ui-kit/commit/9b7af731cd73e9348dba1ed72ab2b34de28e102b))
+* handle reset inside entity store ([#11](https://github.com/odigos-io/ui-kit/issues/11)) ([09ab02e](https://github.com/odigos-io/ui-kit/commit/09ab02e69d5534c15b0b0e9fa63f6d188c1b9da6))
+
+
+### Bug Fixes
+
+* cannot read "writeText" of undefined ([#18](https://github.com/odigos-io/ui-kit/issues/18)) ([1382940](https://github.com/odigos-io/ui-kit/commit/13829401d5afdf2b51e2a597a52590ecfa3e7e7c))
+* copy CLI command text overflowed ([#17](https://github.com/odigos-io/ui-kit/issues/17)) ([96a0d67](https://github.com/odigos-io/ui-kit/commit/96a0d67fbfec883739c1335a2b47dd797f69c98d))
+* dropdown multi-option click area ([#9](https://github.com/odigos-io/ui-kit/issues/9)) ([43fb125](https://github.com/odigos-io/ui-kit/commit/43fb125cb3dd4c6dc53c8984917061fb51f7b9ea))
+* icon size for CP select ([#8](https://github.com/odigos-io/ui-kit/issues/8)) ([d316e8b](https://github.com/odigos-io/ui-kit/commit/d316e8bdda5a75275e690e1bd4dbe15381a471fa))
+* numberOfInstances in source selection ([#15](https://github.com/odigos-io/ui-kit/issues/15)) ([9b41658](https://github.com/odigos-io/ui-kit/commit/9b416583079839094a76c9be1992ab0b730fe81a))
+* side-nav click area, and bigger icons ([#10](https://github.com/odigos-io/ui-kit/issues/10)) ([63b741a](https://github.com/odigos-io/ui-kit/commit/63b741abe28d8b8d9881109ce9459a4be9dd1215))
+
 ## [0.0.7](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.6...ui-kit-v0.0.7) (2025-03-13)
 
 

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

@@ -6,6 +6,7 @@ interface DataCardProps {
     description?: string;
     action?: ReactNode | (() => ReactNode);
     withExtend?: boolean;
+    initialExtended?: boolean;
     data: DataCardFieldsProps['data'];
 }
 declare const DataCard: FC<DataCardProps>;

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

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

package/lib/components/error-boundary/error-boundary.stories.d.ts

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

package/lib/components/error-boundary/index.d.ts

@@ -0,0 +1,5 @@
+import { type FC, type PropsWithChildren } from 'react';
+interface ErrorBoundaryProps extends PropsWithChildren {
+}
+declare const ErrorBoundary: FC<ErrorBoundaryProps>;
+export { ErrorBoundary, type ErrorBoundaryProps };

package/lib/components/icon-title-badge/index.d.ts

@@ -4,6 +4,7 @@ interface IconTitleBadgeProps {
     icon?: SVG;
     title: string;
     badge?: string | number;
+    badgeTooltip?: string;
     loading?: boolean;
 }
 declare const IconTitleBadge: FC<IconTitleBadgeProps>;

package/lib/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './divider/index';
 export * from './docs-button/index';
 export * from './drawer/index';
 export * from './dropdown/index';
+export * from './error-boundary/index';
 export * from './extend-arrow/index';
 export * from './fade-loader/index';
 export * from './field-error/index';

package/lib/components.js

@@ -1,17 +1,18 @@
-export { A as AutocompleteInput, B as Badge, a as Button, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, f as DATA_CARD_FIELD_TYPES, D as DataCard, e as DataCardFields, g as DataTab, h as DeleteWarning, 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, $ as FlexColumn, _ 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, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-COMxdOJo.js';
-import 'react';
+import { B as Button } from './index-m62aT4IR.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, f as DATA_CARD_FIELD_TYPES, D as DataCard, e as DataCardFields, g as DataTab, h as DeleteWarning, 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, $ as FlexColumn, _ 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, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-m62aT4IR.js';
+import React, { Component, createElement, createContext } from 'react';
+import Theme from './theme.js';
 import './types.js';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
-import './theme.js';
-import './index-4tCBQ2pl.js';
-import './index-DLKEpJJm.js';
+import './index-Bc8gi9FH.js';
 import './index-BGlk5VhF.js';
+import './index-ixs381n-.js';
 import './index-BZS1ijMm.js';
-import './index-BJxaoI0G.js';
-import './index-Byh3BO6S.js';
-import './index-BhCi-TxF.js';
-import './useTransition-5w3VnEhL.js';
+import './index-D_Qn2U89.js';
+import './index-CZe2VX28.js';
+import './index-BumPE6cF.js';
+import './useTransition-Dfxjcy-C.js';
 import 'react-dom';
 import 'babel-runtime/helpers/extends';
 import 'babel-runtime/core-js/object/get-prototype-of';
@@ -20,3 +21,153 @@ import 'babel-runtime/helpers/createClass';
 import 'babel-runtime/helpers/possibleConstructorReturn';
 import 'babel-runtime/helpers/inherits';
 import 'object-assign';
+
+const ErrorBoundaryContext = createContext(null);
+
+const initialState = {
+  didCatch: false,
+  error: null
+};
+let ErrorBoundary$1 = class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: true,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      var _this$props$onReset, _this$props;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      });
+      this.setState(initialState);
+    }
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state;
+    const {
+      resetKeys
+    } = this.props;
+
+    // There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array,
+    // we'd end up resetting the error boundary immediately.
+    // This would likely trigger a second error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.
+
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      });
+      this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props;
+    const {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children;
+    if (didCatch) {
+      const props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = createElement(FallbackComponent, props);
+      } else if (fallback !== undefined) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
+        didCatch,
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
+  }
+};
+function hasArrayChanged() {
+  let a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
+}
+
+const ErrorFallback = ({ error }) => {
+    const theme = Theme.useTheme();
+    const styles = {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
+            color: theme.text.error,
+            fontFamily: theme.font_family.primary,
+        },
+        errorMessage: {
+            padding: 10,
+            borderRadius: 5,
+            whiteSpace: 'pre-wrap',
+            background: theme.colors.error,
+        },
+        errorStack: {
+            whiteSpace: 'pre-wrap',
+            fontSize: '12px',
+        },
+        errorStackWrapper: {
+            textAlign: 'left',
+            marginTop: 10,
+        },
+        infoText: {
+            marginTop: 100,
+            color: theme.text.secondary,
+            fontSize: '14px',
+        },
+    };
+    return (React.createElement("div", { style: styles.container },
+        React.createElement("h2", null, "Something went wrong!"),
+        React.createElement("pre", { style: styles.errorMessage }, error?.message || 'Unknown Error'),
+        React.createElement("details", { style: styles.errorStackWrapper },
+            React.createElement("summary", null, "Stack Trace"),
+            React.createElement("pre", { style: styles.errorStack }, error?.stack || 'Unknown Stack')),
+        React.createElement("p", { style: styles.infoText }, "Try refreshing the page or contact support"),
+        React.createElement(Button, { variant: 'secondary', onClick: () => window.location.reload(), style: { fontSize: '1rem' } }, "Reload")));
+};
+const ErrorBoundary = ({ children }) => {
+    return (React.createElement(ErrorBoundary$1, { FallbackComponent: (props) => (React.createElement(Theme.Provider, null,
+            React.createElement(ErrorFallback, { ...props }))) }, children));
+};
+
+export { Button, ErrorBoundary };

package/lib/constants.js

@@ -1,11 +1,11 @@
-export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-Byh3BO6S.js';
+export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-CZe2VX28.js';
 export { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-Cu2uHOuh.js';
 import './types.js';
-import './index-BhCi-TxF.js';
+import './index-BumPE6cF.js';
 import './index-BGlk5VhF.js';
 import 'react';
 import './theme.js';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
 
 const TOKEN_ABOUT_TO_EXPIRE = 604800000; // 7 days in milliseconds

package/lib/containers/compute-platform-select/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { type Platform } from '@/types';
+import { type Connection } from '@/types';
 interface ComputePlatformSelectProps {
-    computePlatforms: Platform[];
-    selected?: Platform;
-    onSelect: (payload: Platform) => void;
+    connections: Connection[];
+    selected?: Connection;
+    onSelect: (payload: Connection) => void;
     onViewAll: () => void;
 }
 declare const ComputePlatformSelect: React.FC<ComputePlatformSelectProps>;

package/lib/containers/compute-platforms/index.d.ts

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
-import { type Platform } from '@/types';
+import { type Connection } from '@/types';
 interface ComputePlatformsProps {
-    computePlatforms: Platform[];
-    onSelect: (payload: Platform) => void;
+    connections: Connection[];
+    onSelect: (payload: Connection) => void;
 }
 declare const ComputePlatforms: FC<ComputePlatformsProps>;
 export { ComputePlatforms, type ComputePlatformsProps };

package/lib/containers/compute-platforms-actions-menu/index.d.ts

@@ -1,7 +1,7 @@
 import { type FC } from 'react';
-import type { Platform } from '@/types';
+import type { Connection } from '@/types';
 interface ComputePlatformsActionsMenuProps {
-    computePlatforms: Platform[];
+    connections: Connection[];
 }
 declare const ComputePlatformsActionsMenu: FC<ComputePlatformsActionsMenuProps>;
 export { ComputePlatformsActionsMenu, type ComputePlatformsActionsMenuProps };

package/lib/containers/data-flow/nodes/header-node.d.ts

@@ -5,7 +5,8 @@ export interface HeaderNodeProps extends NodeProps<Node<{
     nodeWidth: number;
     icon: SVG;
     title: string;
-    tagValue: string | number;
+    badge: string | number;
+    badgeTooltip?: string;
     isFetching?: boolean;
     sources?: Source[];
 }, NODE_TYPES.HEADER>> {

package/lib/containers/dropdowns/connection-status-dropdown/index.d.ts

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
-import type { Platform } from '@/types';
+import type { Connection } from '@/types';
 import { type DropdownProps } from '@/components';
 interface ConnectionStatusDropdownProps {
-    computePlatforms: Platform[];
+    connections: Connection[];
     title?: string;
     value?: DropdownProps['options'];
     onSelect: (val: DropdownProps['options'][0]) => void;

package/lib/containers/dropdowns/connection-type-dropdown/connection-type-dropdown.stories.d.ts

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

package/lib/containers/dropdowns/{platform-types-dropdown → connection-type-dropdown}/index.d.ts

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
-import type { Platform } from '@/types';
+import type { Connection } from '@/types';
 import { type DropdownProps } from '@/components';
-interface PlatformTypesDropdownProps {
-    computePlatforms: Platform[];
+interface ConnectionTypeDropdownProps {
+    connections: Connection[];
     title?: string;
     value?: DropdownProps['options'];
     onSelect: (val: DropdownProps['options'][0]) => void;
@@ -11,5 +11,5 @@ interface PlatformTypesDropdownProps {
     required?: boolean;
     showSearch?: boolean;
 }
-declare const PlatformTypesDropdown: FC<PlatformTypesDropdownProps>;
-export { PlatformTypesDropdown, type PlatformTypesDropdownProps };
+declare const ConnectionTypeDropdown: FC<ConnectionTypeDropdownProps>;
+export { ConnectionTypeDropdown, type ConnectionTypeDropdownProps };

package/lib/containers/dropdowns/index.d.ts

@@ -1,7 +1,7 @@
 export * from './connection-status-dropdown/index';
+export * from './connection-type-dropdown/index';
 export * from './error-dropdown/index';
 export * from './language-dropdown/index';
 export * from './monitor-dropdown/index';
 export * from './namespace-dropdown/index';
-export * from './platform-types-dropdown/index';
 export * from './kind-dropdown/index';