@devtron-labs/devtron-fe-common-lib 1.17.0-pre-3 → 1.17.0-pre-6

package/dist/Shared/Components/ActionMenu/types.d.ts

@@ -1,12 +1,8 @@
-import { LegacyRef, MouseEvent, ReactElement, Ref } from 'react';
+import { LegacyRef, MouseEvent, Ref } from 'react';
 import { LinkProps } from 'react-router-dom';
-import { OmitNever } from '../../types';
-import { ButtonProps } from '../Button';
-import { IconsProps } from '../Icon';
-import { NumbersCountProps } from '../NumbersCount';
 import { PopoverProps, UsePopoverProps } from '../Popover';
 import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker';
-import { DTSwitchProps } from '../Switch';
+import { ActionMenuItemIconType, TrailingItemType } from '../TrailingItem';
 type ConditionalActionMenuComponentType = {
     /**
      * @default 'button'
@@ -25,33 +21,6 @@ type ConditionalActionMenuComponentType = {
     to: LinkProps['to'];
     href?: never;
 };
-type ActionMenuItemIconType = Pick<IconsProps, 'name'> & {
-    /** @default 'N800' */
-    color?: IconsProps['color'];
-};
-type TrailingItemType = {
-    type: 'icon';
-    config: ActionMenuItemIconType;
-} | {
-    type: 'text';
-    config: {
-        value: string;
-        icon?: ActionMenuItemIconType;
-    };
-} | {
-    type: 'counter';
-    config: {
-        value: NumbersCountProps['count'];
-    };
-} | {
-    type: 'switch';
-    config: Pick<DTSwitchProps, 'ariaLabel' | 'isChecked' | 'indeterminate' | 'isDisabled' | 'isLoading' | 'name' | 'onChange' | 'tooltipContent'>;
-} | {
-    type: 'button';
-    config: OmitNever<Omit<Extract<ButtonProps, {
-        icon: ReactElement;
-    }>, 'size' | 'variant'>>;
-};
 export type ActionMenuItemType<T extends string | number = string | number> = Omit<SelectPickerOptionType, 'label' | 'value' | 'endIcon' | 'startIcon'> & {
     /** A unique identifier for the action menu item. */
     id: T;

package/dist/Shared/Components/CollapsibleList/CollapsibleList.component.d.ts

@@ -1,2 +1,5 @@
 import { CollapsibleListProps, TabOptions } from './CollapsibleList.types';
+/**
+ * @deprecated - Please use `TreeView` component instead.
+ */
 export declare const CollapsibleList: <TabType extends TabOptions>({ config, tabType, onCollapseBtnClick, }: CollapsibleListProps<TabType>) => JSX.Element;

package/dist/Shared/Components/Icon/Icon.d.ts

@@ -111,6 +111,7 @@ export declare const iconMap: {
     'ic-heart-green': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-heart-red-animated': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-heart-red': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
+    'ic-helm-app': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-helm': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-help-filled': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;
     'ic-help-outline': import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement>>;

package/dist/Shared/Components/Security/SecurityModal/config/Sidebar.d.ts

@@ -1,3 +1,6 @@
-import { ScanCategoriesWithLicense } from '../../types';
-import { SidebarDataType } from '../types';
-export declare const getSidebarData: (categoriesConfig: Record<ScanCategoriesWithLicense, boolean>) => SidebarDataType[];
+import { TreeViewProps } from '../../../TreeView';
+import { GetSidebarDataParamsType } from '../../types';
+import { SidebarDataChildType } from '../types';
+export declare const getSecurityModalSidebarId: ({ category, subCategory }: SidebarDataChildType["value"]) => string;
+export declare const getSecurityModalSidebarChildFromId: (id: string) => SidebarDataChildType["value"];
+export declare const getSidebarData: ({ imageScan, codeScan, kubernetesManifest, imageScanLicenseRisks, selectedId, scanResult, }: GetSidebarDataParamsType) => TreeViewProps["nodes"];

package/dist/Shared/Components/Security/SecurityModal/config/index.d.ts

@@ -1,4 +1,4 @@
 export { getProgressingStateForStatus } from './ImageScan';
 export { getInfoCardData } from './InfoCard';
-export { getSidebarData } from './Sidebar';
+export { getSecurityModalSidebarChildFromId, getSecurityModalSidebarId, getSidebarData } from './Sidebar';
 export { getTableData } from './Table';

package/dist/Shared/Components/Security/SecurityModal/index.d.ts

@@ -1,7 +1,7 @@
-export { getProgressingStateForStatus, getSidebarData } from './config';
+export { getProgressingStateForStatus, getSecurityModalSidebarChildFromId, getSecurityModalSidebarId, getSidebarData, } from './config';
 export { CATEGORY_LABELS } from './constants';
 export { default as SecurityModal } from './SecurityModal';
 export { getSecurityScan } from './service';
-export type { GetResourceScanDetailsPayloadType, GetResourceScanDetailsResponseType, ScanResultDTO, SidebarDataChildType, SidebarDataType, SidebarPropsType, } from './types';
+export type { GetResourceScanDetailsPayloadType, GetResourceScanDetailsResponseType, ScanResultDTO, SidebarDataChildType, SidebarPropsType, } from './types';
 export { SeveritiesDTO } from './types';
 export { getSecurityScanSeveritiesCount, getTotalVulnerabilityCount, parseGetResourceScanDetailsResponse, } from './utils';

package/dist/Shared/Components/Security/SecurityModal/types.d.ts

@@ -224,12 +224,6 @@ export type SidebarDataChildType = {
         subCategory: ScanSubCategories;
     };
 };
-export type SidebarDataType = {
-    label: string;
-    isExpanded: boolean;
-    children: NonNullable<SidebarDataChildType[]>;
-    hideInHelmApp?: boolean;
-};
 export type EmptyStateType = Pick<GenericEmptyStateType, 'image' | 'SvgImage' | 'subTitle' | 'title' | 'children'>;
 export declare const VulnerabilityState: {
     readonly [-1]: "Failed";

package/dist/Shared/Components/Security/types.d.ts

@@ -1,4 +1,4 @@
-import { CATEGORIES, SUB_CATEGORIES } from './SecurityModal/types';
+import { CATEGORIES, ScanResultDTO, SUB_CATEGORIES } from './SecurityModal/types';
 export type ScanCategories = (typeof CATEGORIES)[keyof typeof CATEGORIES];
 export type ScanSubCategories = (typeof SUB_CATEGORIES)[keyof typeof SUB_CATEGORIES];
 export type ScanCategoriesWithLicense = ScanCategories | 'imageScanLicenseRisks';
@@ -16,4 +16,8 @@ export interface SecurityConfigType {
     codeScan?: SecurityConfigCategoryType;
     kubernetesManifest?: SecurityConfigCategoryType;
 }
+export interface GetSidebarDataParamsType extends Record<ScanCategoriesWithLicense, boolean> {
+    selectedId: string;
+    scanResult: ScanResultDTO;
+}
 export {};

package/dist/Shared/Components/SelectPicker/type.d.ts

@@ -101,7 +101,7 @@ export declare enum SelectPickerVariantType {
     BORDER_LESS = "border-less",
     COMPACT = "compact"
 }
-export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<SelectProps<OptionValue, IsMulti>, 'name' | 'classNamePrefix' | 'options' | 'value' | 'onChange' | 'isSearchable' | 'isClearable' | 'hideSelectedOptions' | 'controlShouldRenderValue' | 'closeMenuOnSelect' | 'isDisabled' | 'isLoading' | 'required' | 'isOptionDisabled' | 'placeholder' | 'menuPosition' | 'getOptionLabel' | 'getOptionValue' | 'isOptionSelected' | 'menuIsOpen' | 'onMenuOpen' | 'onMenuClose' | 'autoFocus' | 'onBlur' | 'onKeyDown' | 'formatOptionLabel' | 'onInputChange' | 'inputValue' | 'filterOption' | 'noOptionsMessage' | 'defaultMenuIsOpen' | 'onFocus'> & Partial<Pick<SelectProps<OptionValue, IsMulti>, 'shouldRenderCustomOptions' | 'renderCustomOptions' | 'icon' | 'showSelectedOptionIcon' | 'renderOptionsFooter' | 'shouldRenderTextArea'>> & Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> & Partial<Pick<CreatableProps<SelectPickerOptionType<OptionValue>, IsMulti, GroupBase<SelectPickerOptionType<OptionValue>>>, 'onCreateOption' | 'formatCreateLabel' | 'menuPortalTarget'>> & Omit<FormFieldWrapperProps, 'children'> & {
+export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<SelectProps<OptionValue, IsMulti>, 'name' | 'classNamePrefix' | 'options' | 'value' | 'onChange' | 'isSearchable' | 'isClearable' | 'hideSelectedOptions' | 'controlShouldRenderValue' | 'closeMenuOnSelect' | 'isDisabled' | 'isLoading' | 'required' | 'isOptionDisabled' | 'placeholder' | 'menuPosition' | 'getOptionLabel' | 'getOptionValue' | 'isOptionSelected' | 'menuIsOpen' | 'onMenuOpen' | 'onMenuClose' | 'autoFocus' | 'onBlur' | 'onKeyDown' | 'formatOptionLabel' | 'onInputChange' | 'inputValue' | 'filterOption' | 'noOptionsMessage' | 'defaultMenuIsOpen'> & Partial<Pick<SelectProps<OptionValue, IsMulti>, 'shouldRenderCustomOptions' | 'renderCustomOptions' | 'icon' | 'showSelectedOptionIcon' | 'renderOptionsFooter' | 'shouldRenderTextArea'>> & Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> & Partial<Pick<CreatableProps<SelectPickerOptionType<OptionValue>, IsMulti, GroupBase<SelectPickerOptionType<OptionValue>>>, 'onCreateOption' | 'formatCreateLabel' | 'menuPortalTarget'>> & Omit<FormFieldWrapperProps, 'children'> & {
     /**
      * Config for the footer at the bottom of menu list. It is sticky by default
      *

package/dist/Shared/Components/TrailingItem/TrailingItem.component.d.ts

@@ -0,0 +1,3 @@
+import { TrailingItemProps } from './types';
+declare const TrailingItem: ({ type, config, variant }: TrailingItemProps) => JSX.Element;
+export default TrailingItem;

package/dist/Shared/Components/TrailingItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TrailingItem } from './TrailingItem.component';
+export * from './types';

package/dist/Shared/Components/TrailingItem/types.d.ts

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+import { OmitNever } from '../../types';
+import { ButtonProps } from '../Button';
+import { IconsProps } from '../Icon';
+import { NumbersCountProps } from '../NumbersCount';
+import { DTSwitchProps } from '../Switch';
+export type ActionMenuItemIconType = Pick<IconsProps, 'name'> & {
+    /** @default 'N800' */
+    color?: IconsProps['color'];
+};
+export type TrailingItemType = {
+    type: 'icon';
+    config: ActionMenuItemIconType;
+} | {
+    type: 'text';
+    config: {
+        value: string;
+        icon?: ActionMenuItemIconType;
+    };
+} | {
+    type: 'counter';
+    config: {
+        value: NumbersCountProps['count'];
+    } & Pick<NumbersCountProps, 'isSelected'>;
+} | {
+    type: 'switch';
+    config: Pick<DTSwitchProps, 'ariaLabel' | 'isChecked' | 'indeterminate' | 'isDisabled' | 'isLoading' | 'name' | 'onChange' | 'tooltipContent'>;
+} | {
+    type: 'button';
+    config: OmitNever<Omit<Extract<ButtonProps, {
+        icon: ReactElement;
+    }>, 'size' | 'variant'>>;
+};
+export type TrailingItemProps = TrailingItemType & {
+    /**
+     * @default 'neutral'
+     */
+    variant?: 'neutral' | 'negative';
+};

package/dist/Shared/Components/TreeView/TreeView.component.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewProps } from './types';
+declare const TreeView: <DataAttributeType = null>({ nodes, isControlled, expandedMap: expandedMapProp, selectedId, onToggle: onToggleProp, onSelect, depth, mode, flatNodeList: flatNodeListProp, getUpdateItemsRefMap: getUpdateItemsRefMapProp, variant, defaultExpandedMap, }: TreeViewProps<DataAttributeType>) => JSX.Element;
+export default TreeView;

package/dist/Shared/Components/TreeView/TreeViewNodeContent.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewNodeContentProps } from './types';
+declare const TreeViewNodeContent: ({ startIconConfig, title, subtitle, type, customTooltipConfig, strikeThrough, isSelected, }: TreeViewNodeContentProps) => JSX.Element;
+export default TreeViewNodeContent;

package/dist/Shared/Components/TreeView/constants.d.ts

@@ -0,0 +1,4 @@
+import { TreeViewProps } from './types';
+export declare const DEFAULT_NO_ITEMS_TEXT = "No items found";
+export declare const VARIANT_TO_BG_CLASS_MAP: Record<TreeViewProps['variant'], string>;
+export declare const VARIANT_TO_HOVER_CLASS_MAP: Record<TreeViewProps['variant'], string>;

package/dist/Shared/Components/TreeView/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TreeView } from './TreeView.component';
+export * from './types';

package/dist/Shared/Components/TreeView/types.d.ts

@@ -0,0 +1,204 @@
+import { SyntheticEvent } from 'react';
+import { TooltipProps } from '../../../Common/Tooltip';
+import { DataAttributes, Never } from '../../types';
+import { IconsProps } from '../Icon';
+import { TrailingItemProps } from '../TrailingItem';
+export type TreeNode<DataAttributeType = null> = TreeHeading<DataAttributeType> | TreeItem<DataAttributeType>;
+/**
+ * Represents a base node structure for a tree view component.
+ *
+ * @typeParam DataAttributeType - The type for data attributes, defaults to null. If it extends `DataAttributes`, the node can have `dataAttributes` of this type.
+ *
+ * @property id - Unique identifier for the node.
+ * @property title - The main title text displayed for the node.
+ * @property subtitle - Optional subtitle text for the node.
+ * @property customTooltipConfig - Optional configuration for a custom tooltip.
+ * @property strikeThrough - If true, the title will be rendered with a line-through style.
+ * @property startIconConfig - Optional configuration for a start icon, which can be either a standard icon (with `name` and `color`) or a custom JSX element.
+ * @property trailingItem - Optional configuration for a trailing item (e.g., button, icon) displayed at the end of the node.
+ * @property dataAttributes - Optional data attributes, present only if `DataAttributeType` extends `DataAttributes`.
+ */
+type BaseNode<DataAttributeType = null> = {
+    /**
+     * id - Unique identifier for the node.
+     */
+    id: string;
+    /**
+     * The title of the list item.
+     */
+    title: string;
+    /**
+     * The subtitle of the list item.
+     */
+    subtitle?: string;
+    /**
+     *  Optional configuration for a custom tooltip.
+     */
+    customTooltipConfig?: TooltipProps;
+    /**
+     * If true, the title will be rendered with line-through.
+     */
+    strikeThrough?: boolean;
+    /**
+     * Optional configuration for a start icon, which can be either a standard icon (with `name` and `color`) or a custom JSX element.
+     */
+    startIconConfig?: {
+        tooltipContent?: string;
+    } & ((Pick<IconsProps, 'name' | 'color'> & {
+        customIcon?: never;
+    }) | (Never<Pick<IconsProps, 'name' | 'color'>> & {
+        customIcon?: JSX.Element;
+    }));
+    trailingItem?: TrailingItemProps;
+} & (DataAttributeType extends DataAttributes ? {
+    dataAttributes?: DataAttributeType;
+} : {
+    dataAttributes?: never;
+});
+export type TreeHeading<DataAttributeType = null> = BaseNode<DataAttributeType> & {
+    type: 'heading';
+    items?: TreeNode<DataAttributeType>[];
+    /**
+     * Text to display when there are no items in the list.
+     * @default DEFAULT_NO_ITEMS_TEXT
+     */
+    noItemsText?: string;
+};
+export type NodeElementType = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
+/**
+ * Represents an item node in a tree structure, supporting different rendering modes.
+ *
+ * @template DataAttributeType - The type for custom data attributes, defaults to null.
+ *
+ * A `TreeItem` can be rendered as a button, link, or div, each with its own set of properties:
+ * - When `as` is `'button'` (default), it can have an `onClick` handler.
+ * - When `as` is `'link'`, it requires an `href`, can have an `onClick` handler, and supports clearing query parameters on navigation.
+ * - When `as` is `'div'`, it is a non-interactive container.
+ *
+ * @property {'item'} type - Identifies the node as an item.
+ * @property {boolean} [isDisabled=false] - If true, disables the item.
+ * @property {'button' | 'link' | 'div'} [as] - Determines the rendered element type.
+ * @property {(e: SyntheticEvent) => void} [onClick] - Callback for click events (button or link only).
+ * @property {string} [href] - The navigation URL (link only).
+ * @property {boolean} [clearQueryParamsOnNavigation=false] - If true, clears query parameters during navigation (link only).
+ */
+export type TreeItem<DataAttributeType = null> = BaseNode<DataAttributeType> & {
+    type: 'item';
+    /**
+     * @default false
+     */
+    isDisabled?: boolean;
+} & ({
+    as?: 'button';
+    /**
+     * The callback function to handle click events on the button.
+     */
+    onClick?: (e: SyntheticEvent) => void;
+    href?: never;
+    clearQueryParamsOnNavigation?: never;
+} | {
+    as: 'link';
+    href: string;
+    /**
+     * The callback function to handle click events on the nav link.
+     */
+    onClick?: (e: SyntheticEvent) => void;
+    /**
+     * If `true`, clears query parameters during navigation.
+     * @default false
+     */
+    clearQueryParamsOnNavigation?: boolean;
+} | {
+    as: 'div';
+    href?: never;
+    onClick?: never;
+    clearQueryParamsOnNavigation?: never;
+});
+/**
+ * Props for the TreeView component.
+ *
+ * @template DataAttributeType - The type for data attributes associated with tree nodes.
+ *
+ * @property nodes - An array of tree nodes to be rendered in the tree view.
+ * @property selectedId - (Optional) The ID of the currently selected tree item.
+ * @property onSelect - (Optional) Callback invoked when a tree item is selected.
+ * @property mode - (Optional) Determines the navigation mode of the tree view.
+ *   - `'navigation'`: Enables keyboard navigation and focuses only the selected item.
+ *   - `'form'`: Leaves navigation to the browser.
+ *   - @default 'navigation'
+ * @property variant - (Optional) Visual variant of the tree view.
+ *   - `'primary'`: Uses primary background and hover colors.
+ *   - `'secondary'`: Uses secondary background and hover colors.
+ *   - @default 'primary'
+ * @property defaultExpandedMap - (Optional) Initial map of node IDs to their expanded state.
+ *   - @default {}
+ *
+ * @property depth - (Internal use only) The current depth level in the tree.
+ * @property getUpdateItemsRefMap - (Internal use only) Function to update the ref map for item buttons/anchors.
+ * @property flatNodeList - (Internal use only) List of all visible node IDs for keyboard navigation.
+ * @property onToggle - (Internal use only) Callback invoked when a tree heading is toggled.
+ * @property expandedMap - (Internal use only) Map of node IDs to their expanded state.
+ * @property isControlled - (Internal use only) Indicates if the tree view is controlled.
+ */
+export type TreeViewProps<DataAttributeType = null> = {
+    nodes: TreeNode<DataAttributeType>[];
+    selectedId?: string;
+    onSelect?: (item: TreeItem<DataAttributeType>) => void;
+    /**
+     * If navigation mode, the tree view will provide navigation through keyboard actions and make the only selected item focusable.
+     * If form mode, will leave the navigation to browser.
+     * @default 'navigation'
+     */
+    mode?: 'navigation' | 'form';
+    /**
+     * If primary the background color will be bg__primary and bg__hover--opaque, if secondary the background color will be bg__secondary bg__hover-secondary--opaque.
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * @default {}
+     */
+    defaultExpandedMap?: Record<string, boolean>;
+} /**
+ * WARNING: For internal use only.
+ */ & ({
+    depth: number;
+    /**
+     * Would pass this to item button/ref and store it in out ref map through this function.
+     */
+    getUpdateItemsRefMap: (id: string) => (element: NodeElementType) => void;
+    /**
+     * List of all nodes visible in tree view for keyboard navigation.
+     */
+    flatNodeList: string[];
+    /**
+     * Would be called when the user toggles a heading.
+     */
+    onToggle: (item: TreeHeading<DataAttributeType>) => void;
+    /**
+     * Map of id to whether the item is expanded or not.
+     */
+    expandedMap: Record<string, boolean>;
+    isControlled: true;
+} | {
+    depth?: never;
+    getUpdateItemsRefMap?: never;
+    flatNodeList?: never;
+    onToggle?: never;
+    expandedMap?: never;
+    isControlled?: false;
+});
+export interface TreeViewNodeContentProps extends Pick<BaseNode, 'startIconConfig' | 'title' | 'subtitle' | 'customTooltipConfig' | 'strikeThrough'> {
+    type: 'heading' | 'item';
+    isSelected: boolean;
+}
+export interface GetSelectedIdParentNodesProps<DataAttributeType = null> extends Pick<TreeViewProps<DataAttributeType>, 'nodes' | 'selectedId'> {
+}
+export interface FindSelectedIdParentNodesProps<DataAttributeType = null> extends Pick<GetSelectedIdParentNodesProps<DataAttributeType>, 'selectedId'> {
+    node: TreeNode<DataAttributeType>;
+    onFindParentNode: (id: string) => void;
+}
+export interface GetVisibleNodesProps<DataAttributeType = null> extends Pick<TreeViewProps<DataAttributeType>, 'expandedMap'> {
+    nodeList: TreeNode<DataAttributeType>[];
+}
+export {};

package/dist/Shared/Components/TreeView/utils.d.ts

@@ -0,0 +1,22 @@
+import { GetSelectedIdParentNodesProps, GetVisibleNodesProps } from './types';
+/**
+ * Retrieves an array of parent node IDs for the currently selected node.
+ *
+ * Iterates through the provided tree nodes and collects the IDs of all parent nodes
+ * leading to the node identified by `selectedId`. If no node is selected, returns an empty array.
+ *
+ * @returns {string[]} An array of parent node IDs for the selected node, or an empty array if no node is selected.
+ */
+export declare const getSelectedIdParentNodes: <DataAttributeType = null>({ nodes, selectedId, }: GetSelectedIdParentNodesProps<DataAttributeType>) => string[];
+/**
+ * Recursively traverses a list of tree nodes and returns an array of all node IDs that are present in DOM.
+ *
+ * For each node in the provided list:
+ * - Adds the node's `id` to the result array.
+ * - If the node is of type `'heading'`, is expanded (as per `expandedMap`), and has child items,
+ *   recursively traverses its child items and includes their IDs as well.
+ *
+ * @param nodeList - The list of nodes to traverse.
+ * @returns An array of strings representing the IDs of all traversed nodes.
+ */
+export declare const getVisibleNodes: <DataAttributeType = null>({ nodeList, expandedMap, }: GetVisibleNodesProps<DataAttributeType>) => string[];

package/dist/Shared/Components/index.d.ts

@@ -85,6 +85,7 @@ export * from './TargetPlatforms';
 export * from './Textarea';
 export * from './ThemeSwitcher';
 export * from './ToggleResolveScopedVariables';
+export * from './TreeView';
 export * from './Typewriter';
 export * from './UnsavedChanges';
 export * from './UnsavedChangesDialog';