@devtron-labs/devtron-fe-common-lib 0.2.24 → 0.2.26-beta-1

package/dist/Common/Common.service.d.ts

@@ -1,3 +1,4 @@
+import { RuntimeParamsAPIResponseType, RuntimeParamsListItemType } from '../Shared/types';
 import { TeamList, ResponseType, DeploymentNodeType, CDMaterialServiceEnum, CDMaterialServiceQueryParams, CDMaterialResponseType, CDMaterialFilterQuery, EnvironmentListHelmResponse } from './Types';
 import { ApiResourceType } from '../Pages';
 export declare const getTeamListMin: () => Promise<TeamList>;
@@ -14,6 +15,7 @@ export declare const SourceTypeMap: {
 };
 export declare function getUserRole(appName?: string): Promise<UserRole>;
 export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType<any>>;
+export declare const parseRuntimeParams: (response: RuntimeParamsAPIResponseType) => RuntimeParamsListItemType[];
 export declare const processCDMaterialServiceResponse: (cdMaterialsResult: any, stage: DeploymentNodeType, offset: number, filter: CDMaterialFilterQuery, disableDefaultSelection?: boolean) => CDMaterialResponseType;
 export declare const genericCDMaterialsService: (serviceType: CDMaterialServiceEnum, cdMaterialID: number, stage: DeploymentNodeType, signal: AbortSignal, queryParams?: CDMaterialServiceQueryParams) => Promise<CDMaterialResponseType>;
 export declare function extractImage(image: string): string;

package/dist/Common/Types.d.ts

@@ -1,9 +1,9 @@
 import { default as React, ReactNode, CSSProperties } from 'react';
 import { Placement } from 'tippy.js';
+import { UserGroupDTO } from '../Pages/GlobalConfigurations';
 import { ImageComment, ReleaseTag } from './ImageTags.Types';
 import { ACTION_STATE, DEPLOYMENT_WINDOW_TYPE, DockerConfigOverrideType, SortingOrder, TaskErrorObj } from '.';
-import { UserGroupDTO } from '../Pages/GlobalConfigurations';
-import { RegistryType, Severity } from '../Shared';
+import { RegistryType, RuntimeParamsListItemType, Severity } from '../Shared';
 /**
  * Generic response type object with support for overriding the result type
  *
@@ -596,6 +596,7 @@ export interface CDMaterialsMetaInfo {
      * This is the ID of user that has request the material
      */
     requestedUserId: number;
+    runtimeParams: RuntimeParamsListItemType[];
 }
 export interface ImagePromotionMaterialInfo {
     isApprovalPendingForPromotion: boolean;

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

@@ -1,2 +1,2 @@
 import { KeyValueTableProps } from './KeyValueTable.types';
-export declare const KeyValueTable: <K extends string>({ config, maskValue, isSortable, headerComponent, onChange, onDelete, placeholder, isAdditionNotAllowed, readOnly, showError, validationSchema, errorMessages, onError, }: KeyValueTableProps<K>) => JSX.Element;
+export declare const KeyValueTable: <K extends string>({ config, maskValue, isSortable, headerComponent, onChange, onDelete, placeholder, isAdditionNotAllowed, readOnly, showError, validationSchema: parentValidationSchema, errorMessages: parentErrorMessages, onError, validateDuplicateKeys, validateEmptyKeys, }: KeyValueTableProps<K>) => JSX.Element;

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

@@ -35,6 +35,29 @@ export interface KeyValueConfig<K extends string> {
     /** An array of key-value rows. */
     rows: KeyValueRow<K>[];
 }
+type ErrorUIProps = {
+    /**
+     * Indicates whether to show errors.
+     */
+    showError: true;
+    /**
+     * @default - false
+     * If true, would validate for duplicate keys and if present would show error tooltip on the cell.
+     */
+    validateDuplicateKeys?: boolean;
+    /**
+     * @default - false
+     * If true, would validate for rows having values but no key and if error would show error tooltip on the cell.
+     */
+    validateEmptyKeys?: boolean;
+} | {
+    /**
+     * Indicates whether to show errors.
+     */
+    showError?: false;
+    validateDuplicateKeys?: never;
+    validateEmptyKeys?: never;
+};
 /**
  * Type representing a mask for key-value pairs.
  * @template K - A string representing the key type.
@@ -49,7 +72,7 @@ export type KeyValuePlaceholder<K extends string> = {
  * Interface representing the properties for a key-value table component.
  * @template K - A string representing the key type.
  */
-export interface KeyValueTableProps<K extends string> {
+export type KeyValueTableProps<K extends string> = {
     /** The configuration for the key-value table. */
     config: KeyValueConfig<K>;
     /** An optional mask for the key-value pairs. */
@@ -75,18 +98,15 @@ export interface KeyValueTableProps<K extends string> {
      * @param deletedRowIndex - The index of the row that was deleted.
      */
     onDelete?: (deletedRowId: string | number) => void;
-    /**
-     * Indicates whether to show errors.
-     */
-    showError?: boolean;
     /**
      * The function to use to validate the value of the cell.
      * @param value - The value to validate.
      * @param key - The row key of the value.
+     * @param rowId - The id of the row.
      * @returns Return true if the value is valid, otherwise false
      * and set `showError` to `true` and provide errorMessages array to show error message.
      */
-    validationSchema?: (value: string, key: K) => boolean;
+    validationSchema?: (value: string, key: K, rowId: string | number) => boolean;
     /**
      * An array of error messages to be displayed in the cell error tooltip.
      */
@@ -96,4 +116,5 @@ export interface KeyValueTableProps<K extends string> {
      * @param errorState - The error state, true when any cell has error, otherwise false.
      */
     onError?: (errorState: boolean) => void;
-}
+} & ErrorUIProps;
+export {};

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

@@ -0,0 +1,2 @@
+export declare const DUPLICATE_KEYS_VALIDATION_MESSAGE = "Keys must be unique";
+export declare const EMPTY_KEY_VALIDATION_MESSAGE = "Key cannot be empty";

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

@@ -0,0 +1,2 @@
+import { TabGroupProps } from './TabGroup.types';
+export declare const TabGroup: ({ tabs, size, rightComponent, alignActiveBorderWithContainer, hideTopPadding, }: TabGroupProps) => JSX.Element;

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

@@ -0,0 +1,111 @@
+import { LinkProps, NavLinkProps } from 'react-router-dom';
+import { ComponentSizeType } from '../../constants';
+import { DataAttributes } from '../../types';
+type TabComponentProps<TabTypeProps> = TabTypeProps & DataAttributes;
+type ConditionalTabType = {
+    /**
+     *  Type of the tab, either `button`, `link` or `navLink`.
+     */
+    tabType: 'button';
+    /**
+     * Props passed to button component.
+     */
+    props?: TabComponentProps<Omit<React.ComponentProps<'button'>, 'className' | 'style'>>;
+    /**
+     * Indicates if the tab is currently active.
+     */
+    active?: boolean;
+} | {
+    /**
+     *  Type of the tab, either `button`, `link` or `navLink`.
+     */
+    tabType: 'navLink';
+    /**
+     * Props passed to nav link component.
+     */
+    props: TabComponentProps<Omit<NavLinkProps, 'className' | 'style' | 'activeClassName'>>;
+    /**
+     * Active state is determined by matching the URL.
+     */
+    active?: false;
+} | {
+    /**
+     *  Type of the tab, either `button`, `link` or `navLink`.
+     */
+    tabType: 'link';
+    /**
+     * Props passed to link component.
+     */
+    props: TabComponentProps<Omit<LinkProps, 'className' | 'style'>>;
+    /**
+     * Indicates if the tab is currently active.
+     */
+    active?: boolean;
+};
+export type TabProps = {
+    /**
+     * Unique identifier for the tab.
+     */
+    id: string | number;
+    /**
+     * Text label for the tab.
+     */
+    label: string;
+    /**
+     * Icon component to be displayed in the tab.
+     * This should be a functional component that renders an SVG.
+     */
+    icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    /**
+     * Type of the icon, determining whether it uses a stroke or fill style.
+     */
+    iconType?: 'stroke' | 'fill';
+    /**
+     * Badge number to be displayed on the tab, typically for notifications.
+     */
+    badge?: number;
+    /**
+     * Indicates if an indicator should be shown on the tab.
+     */
+    showIndicator?: boolean;
+    /**
+     * Indicates if a warning state should be displayed on the tab.
+     * @note error state will take precedence over warning state.
+     */
+    showWarning?: boolean;
+    /**
+     * Indicates if an error state should be displayed on the tab.
+     * @note error state will take precedence over warning state.
+     */
+    showError?: boolean;
+    /**
+     * Disables the tab, preventing interaction and indicating an inactive state.
+     */
+    disabled?: boolean;
+} & ConditionalTabType;
+export interface TabGroupProps {
+    /**
+     * Array of tabs to be rendered.
+     */
+    tabs: TabProps[];
+    /**
+     * Size of the tabs.
+     * @default ComponentSizeType.large
+     */
+    size?: ComponentSizeType.large | ComponentSizeType.medium;
+    /**
+     * Optional component to be rendered on the right side of the tab list.
+     */
+    rightComponent?: React.ReactElement;
+    /**
+     * Set to `true` to align the active tab's border with the bottom border of the parent container.
+     * @default false
+     */
+    alignActiveBorderWithContainer?: boolean;
+    /**
+     * Determines if the top padding of the tab group should be hidden.
+     * @default false
+     */
+    hideTopPadding?: boolean;
+}
+export {};

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

@@ -0,0 +1,7 @@
+import { TabGroupProps, TabProps } from './TabGroup.types';
+export declare const getClassNameBySizeMap: ({ hideTopPadding, alignActiveBorderWithContainer, }: Pick<TabGroupProps, "hideTopPadding" | "alignActiveBorderWithContainer">) => Record<TabGroupProps["size"], {
+    tabClassName: string;
+    iconClassName: string;
+    badgeClassName: string;
+}>;
+export declare const getIconColorClassMap: ({ active }: Pick<TabProps, "active">) => Record<TabProps["iconType"], string>;

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

@@ -0,0 +1,2 @@
+export * from './TabGroup.component';
+export * from './TabGroup.types';

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

@@ -36,6 +36,7 @@ export * from './ShowMoreText';
 export * from './CollapsibleList';
 export * from './DeploymentConfigDiff';
 export * from './DetectBottom';
+export * from './TabGroup';
 export * from './EditImageFormField';
 export * from './Collapse';
 export * from './FilterButton';

package/dist/Shared/constants.d.ts

@@ -1,3 +1,5 @@
+import { OptionType } from '../Common/Types';
+import { CDMaterialSidebarType } from './types';
 export declare const ARTIFACT_STATUS: {
     PROGRESSING: string;
     DEGRADED: string;
@@ -401,4 +403,5 @@ export declare enum SelectAllGroupedResourceIdentifiers {
     allExistingAndFutureProdEnvironments = "-2",
     allExistingAndFutureEnvironments = "-3"
 }
+export declare const CD_MATERIAL_SIDEBAR_TABS: OptionType<CDMaterialSidebarType, CDMaterialSidebarType>[];
 export declare const TRIGGER_STATUS_PROGRESSING: string[];

package/dist/Shared/types.d.ts

@@ -1,4 +1,5 @@
 import { OptionType, CommonNodeAttr, ResponseType, UserApprovalConfigType, VulnerabilityType, DeploymentAppTypes, ServerErrors, SortingParams } from '../Common';
+import { KeyValueListType } from './Components';
 import { EnvironmentTypeEnum, PatchOperationType } from './constants';
 export declare enum EnvType {
     CHART = "helm_charts",
@@ -286,6 +287,10 @@ export declare enum CIMaterialSidebarType {
     CODE_SOURCE = "Code Source",
     PARAMETERS = "Parameters"
 }
+export declare enum CDMaterialSidebarType {
+    IMAGE = "Image",
+    PARAMETERS = "Parameters"
+}
 /**
  * @example Usage with specific enum for path & `unknown` type for value
  * ```ts
@@ -565,4 +570,12 @@ export type BaseFilterQueryParams<T> = {
      */
     showAll?: boolean;
 } & SortingParams<T>;
+export type DataAttributes = Record<`data-${string}`, unknown>;
+export interface RuntimeParamsListItemType extends KeyValueListType {
+    id: number;
+}
+export declare enum RuntimeParamsHeadingType {
+    KEY = "key",
+    VALUE = "value"
+}
 export {};