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

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

@@ -0,0 +1,62 @@
+import { ButtonProps } from './types';
+/**
+ * Generic component for Button.
+ * Should be used in combination of variant, size and style.
+ *
+ * @example Default button
+ * ```tsx
+ * <Button text="Hello World"  />
+ * ```
+ *
+ * @example Custom variant
+ * ```tsx
+ * <Button text="Hello World" variant={ButtonVariantType.secondary}  />
+ * ```
+ *
+ * @example Custom size
+ * ```tsx
+ * <Button text="Hello World" size={ComponentSizeType.medium}  />
+ * ```
+ *
+ * @example Custom style
+ * ```tsx
+ * <Button text="Hello World" style={ButtonStyleType.positive}  />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Button text="Hello World" disabled  />
+ * ```
+ *
+ * @example Loading state
+ * ```tsx
+ * <Button text="Hello World" isLoading  />
+ * ```
+ *
+ * @example With start icon
+ * ```tsx
+ * <Button text="Hello World" startIcon={<ICCube />}  />
+ * ```
+ *
+ * @example With end icon
+ * ```tsx
+ * <Button text="Hello World" endIcon={<ICCube />}  />
+ * ```
+ *
+ * @example With tippy
+ * ```tsx
+ * <Button text="Hello World" showTippy tippyContent="Tippy content"  />
+ * ```
+ *
+ * @example With onClick
+ * ```tsx
+ * <Button text="Hello World" onClick={noop}  />
+ * ```
+ *
+ * @example Link component
+ * ```tsx
+ * <Button component={ButtonComponentType.link} linkProps={{ to: '#' }} />
+ * ```
+ */
+declare const Button: ({ dataTestId, text, variant, size, style, startIcon, endIcon, disabled, isLoading, showTooltip, tooltipProps, ...props }: ButtonProps) => JSX.Element;
+export default Button;

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

@@ -0,0 +1,5 @@
+import { ProgressingProps } from '../../../Common/Types';
+import { ButtonProps } from './types';
+export declare const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string>;
+export declare const BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP: Record<ButtonProps['size'], string>;
+export declare const BUTTON_SIZE_TO_LOADER_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']>;

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

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

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

@@ -0,0 +1,100 @@
+import { TooltipProps } from '@Common/Tooltip/types';
+import { ComponentSizeType } from '../../constants';
+import { ButtonHTMLAttributes, ReactElement } from 'react';
+import { LinkProps } from 'react-router-dom';
+export declare enum ButtonVariantType {
+    primary = "primary",
+    secondary = "secondary",
+    borderLess = "border-less",
+    text = "text"
+}
+export declare enum ButtonStyleType {
+    default = "default",
+    negative = "negative",
+    positive = "positive",
+    warning = "warning",
+    neutral = "neutral"
+}
+export declare enum ButtonComponentType {
+    button = "button",
+    link = "link"
+}
+export type ButtonProps = ({
+    /**
+     * Component to be rendered from the available options
+     *
+     * @default ButtonComponentType.button
+     */
+    component?: ButtonComponentType.button | never;
+    /**
+     * Props for the button component
+     */
+    buttonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'styles' | 'className' | 'disabled' | 'onClick'>;
+    linkProps?: never;
+    onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+} | {
+    component: ButtonComponentType.link;
+    /**
+     * Props for the link component
+     */
+    linkProps: Omit<LinkProps, 'children' | 'styles' | 'className' | 'onClick'>;
+    buttonProps?: never;
+    onClick?: LinkProps['onClick'];
+}) & {
+    /**
+     * Variant of the button
+     *
+     * @default ButtonVariantType.primary
+     */
+    variant?: ButtonVariantType;
+    /**
+     * Size of the button
+     *
+     * @default ComponentSizeType.large
+     */
+    size?: ComponentSizeType;
+    /**
+     * Style to be applied on the button
+     *
+     * @default ButtonStyleType.default
+     */
+    style?: ButtonStyleType;
+    /**
+     * Text to be displayed in the button
+     */
+    text: string;
+    /**
+     * If provided, icon to be displayed at the start of the button
+     */
+    startIcon?: ReactElement;
+    /**
+     * If provided, icon to be displayed at the end of the button
+     */
+    endIcon?: ReactElement;
+    /**
+     * If true, the loading state is shown for the button with disabled
+     */
+    isLoading?: boolean;
+    /**
+     * Test id for the component
+     */
+    dataTestId: string;
+    /**
+     * If true, the button is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+} & ({
+    /**
+     * If true, the tooltip is shown for the button
+     */
+    showTooltip: boolean;
+    /**
+     * Props for tooltip
+     */
+    tooltipProps: Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate'>;
+} | {
+    showTooltip?: never;
+    tooltipProps?: never;
+});

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

@@ -0,0 +1,2 @@
+import { ButtonProps } from './types';
+export declare const getButtonDerivedClass: ({ size, variant, style, isLoading, }: Pick<ButtonProps, "variant" | "size" | "style" | "isLoading">) => string;

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

@@ -1,5 +1,5 @@
 import { default as React, Component } from 'react';
-export interface ButtonProps {
+export interface ButtonWithLoaderProps {
     disabled?: boolean;
     rootClassName: string;
     isLoading: boolean;
@@ -8,7 +8,10 @@ export interface ButtonProps {
     children?: React.ReactNode;
     type?: 'submit' | 'reset' | 'button';
 }
-export declare class ButtonWithLoader extends Component<ButtonProps> {
+/**
+ * @deprecated use Button instead
+ */
+export declare class ButtonWithLoader extends Component<ButtonWithLoaderProps> {
     constructor(props: any);
     clickHandler(event: any): void;
     render(): JSX.Element;

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

@@ -1,2 +1,2 @@
-import { DeploymentConfigDiffProps } from './types';
-export declare const DeploymentConfigDiff: ({ isLoading, configList, collapsibleNavList, navList, goBackURL, navHeading, navHelpText, ...resProps }: DeploymentConfigDiffProps) => JSX.Element;
+import { DeploymentConfigDiffProps } from './DeploymentConfigDiff.types';
+export declare const DeploymentConfigDiff: ({ isLoading, configList, collapsibleNavList, navList, goBackURL, navHeading, navHelpText, tabConfig, ...resProps }: DeploymentConfigDiffProps) => JSX.Element;

package/dist/Shared/Components/DeploymentConfigDiff/{types.d.ts → DeploymentConfigDiff.types.d.ts}

@@ -1,5 +1,5 @@
 import { SortingOrder } from '../../../Common/Constants';
-import { ConfigMapSecretDataConfigDatumDTO, DeploymentTemplateDTO } from '../../Services';
+import { AppEnvDeploymentConfigDTO, ConfigMapSecretDataConfigDatumDTO, DeploymentTemplateDTO, EnvResourceType, ManifestTemplateDTO } from '../../Services';
 import { DeploymentHistoryDetail } from '../CICDHistory';
 import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList';
 import { SelectPickerProps } from '../SelectPicker';
@@ -35,6 +35,11 @@ export interface DeploymentConfigDiffNavigationCollapsibleItem extends Pick<Coll
 }
 export interface DeploymentConfigDiffProps {
     isLoading?: boolean;
+    errorConfig?: {
+        error: boolean;
+        code: number;
+        reload: () => void;
+    };
     configList: DeploymentConfigListItem[];
     headerText?: string;
     scrollIntoViewId?: string;
@@ -52,10 +57,17 @@ export interface DeploymentConfigDiffProps {
     goBackURL?: string;
     navHeading: string;
     navHelpText?: string;
+    tabConfig?: {
+        tabs: {
+            value: string;
+            href: string;
+        }[];
+        onClick: (tab: string) => void;
+    };
 }
-export interface DeploymentConfigDiffNavigationProps extends Pick<DeploymentConfigDiffProps, 'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText'> {
+export interface DeploymentConfigDiffNavigationProps extends Pick<DeploymentConfigDiffProps, 'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText' | 'tabConfig'> {
 }
-export interface DeploymentConfigDiffMainProps extends Pick<DeploymentConfigDiffProps, 'isLoading' | 'headerText' | 'configList' | 'scrollIntoViewId' | 'selectorsConfig' | 'sortingConfig'> {
+export interface DeploymentConfigDiffMainProps extends Pick<DeploymentConfigDiffProps, 'isLoading' | 'errorConfig' | 'headerText' | 'configList' | 'scrollIntoViewId' | 'selectorsConfig' | 'sortingConfig'> {
 }
 export interface DeploymentConfigDiffAccordionProps extends Pick<CollapseProps, 'onTransitionEnd'> {
     id: string;
@@ -66,3 +78,15 @@ export interface DeploymentConfigDiffAccordionProps extends Pick<CollapseProps,
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 export type DiffHeadingDataType<DeploymentTemplate> = DeploymentTemplate extends true ? DeploymentTemplateDTO : ConfigMapSecretDataConfigDatumDTO;
+export type AppEnvDeploymentConfigListParams<IsManifestView> = (IsManifestView extends true ? {
+    currentList: ManifestTemplateDTO;
+    compareList: ManifestTemplateDTO;
+    sortOrder?: never;
+} : {
+    currentList: AppEnvDeploymentConfigDTO;
+    compareList: AppEnvDeploymentConfigDTO;
+    sortOrder?: SortingOrder;
+}) & {
+    getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string;
+    isManifestView?: IsManifestView;
+};

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

@@ -1,6 +1,5 @@
-import { SortingOrder } from '../../../Common/Constants';
-import { DeploymentConfigDiffProps } from '..';
-import { AppEnvDeploymentConfigDTO, ConfigMapSecretDataConfigDatumDTO, EnvResourceType, TemplateListDTO } from '../../Services/app.types';
+import { AppEnvDeploymentConfigListParams, DeploymentConfigDiffProps } from '..';
+import { ConfigMapSecretDataConfigDatumDTO, TemplateListDTO } from '../../Services/app.types';
 /**
  * Retrieves the draft data from the given configuration data object.
  *
@@ -19,14 +18,16 @@ export declare const mergeConfigDataArraysByName: (primaryArray: ConfigMapSecret
 /**
  * Generates a list of deployment configurations for application environments and identifies changes between the current and compare lists.
  *
- * @param currentList - The current deployment configuration list.
- * @param compareList - The deployment configuration list to compare against.
- * @param getNavItemHref - A function to generate navigation item URLs based on the resource type and resource name.
- * @param sortOrder - (Optional) The order in which to sort the deployment templates.
+ * @param params - An object containing the following properties:
+ * @param params.currentList - The current deployment configuration list.
+ * @param params.compareList - The deployment configuration list to compare against.
+ * @param params.getNavItemHref - A function to generate navigation item URLs based on the resource type and resource name.
+ * @param params.isManifestView - A boolean that, when true, modifies the output for a manifest view.
+ * @param params.sortOrder - (Optional) The order in which to sort the deployment templates.
  *
  * @returns An object containing the combined deployment configuration list, a collapsible navigation list, and a navigation list.
  */
-export declare const getAppEnvDeploymentConfigList: (currentList: AppEnvDeploymentConfigDTO, compareList: AppEnvDeploymentConfigDTO, getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string, sortOrder?: SortingOrder) => {
+export declare const getAppEnvDeploymentConfigList: <ManifestView extends boolean = false>({ currentList, compareList, getNavItemHref, isManifestView, sortOrder, }: AppEnvDeploymentConfigListParams<ManifestView>) => {
     configList: DeploymentConfigDiffProps["configList"];
     navList: DeploymentConfigDiffProps["navList"];
     collapsibleNavList: DeploymentConfigDiffProps["collapsibleNavList"];

package/dist/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.d.ts

@@ -1,2 +1,2 @@
-import { DeploymentConfigDiffAccordionProps } from './types';
+import { DeploymentConfigDiffAccordionProps } from './DeploymentConfigDiff.types';
 export declare const DeploymentConfigDiffAccordion: import('react').ForwardRefExoticComponent<DeploymentConfigDiffAccordionProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.d.ts

@@ -1,2 +1,2 @@
-import { DeploymentConfigDiffMainProps } from './types';
-export declare const DeploymentConfigDiffMain: ({ isLoading, headerText, configList, selectorsConfig, sortingConfig, scrollIntoViewId, }: DeploymentConfigDiffMainProps) => JSX.Element;
+import { DeploymentConfigDiffMainProps } from './DeploymentConfigDiff.types';
+export declare const DeploymentConfigDiffMain: ({ isLoading, errorConfig, headerText, configList, selectorsConfig, sortingConfig, scrollIntoViewId, }: DeploymentConfigDiffMainProps) => JSX.Element;

package/dist/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.d.ts

@@ -1,2 +1,2 @@
-import { DeploymentConfigDiffNavigationProps } from './types';
-export declare const DeploymentConfigDiffNavigation: ({ isLoading, collapsibleNavList, navList, goBackURL, navHeading, navHelpText, }: DeploymentConfigDiffNavigationProps) => JSX.Element;
+import { DeploymentConfigDiffNavigationProps } from './DeploymentConfigDiff.types';
+export declare const DeploymentConfigDiffNavigation: ({ isLoading, collapsibleNavList, navList, goBackURL, navHeading, navHelpText, tabConfig, }: DeploymentConfigDiffNavigationProps) => JSX.Element;

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

@@ -1,3 +1,3 @@
 export * from './DeploymentConfigDiff.component';
-export * from './types';
+export * from './DeploymentConfigDiff.types';
 export * from './DeploymentConfigDiff.utils';

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

@@ -134,5 +134,5 @@ import { SelectPickerProps } from './type';
  * />
  * ```
  */
-declare const SelectPicker: <OptionValue, IsMulti extends boolean>({ error, icon, helperText, placeholder, label, showSelectedOptionIcon, size, disabledTippyContent, showSelectedOptionsCount, menuSize, optionListError, reloadOptionList, menuPosition, variant, disableDescriptionEllipsis, multiSelectProps, isMulti, name, classNamePrefix, shouldRenderCustomOptions, isSearchable, selectRef, shouldMenuAlignRight, fullWidth, customSelectedOptionsCount, ...props }: SelectPickerProps<OptionValue, IsMulti>) => JSX.Element;
+declare const SelectPicker: <OptionValue, IsMulti extends boolean>({ error, icon, helperText, placeholder, label, showSelectedOptionIcon, size, disabledTippyContent, showSelectedOptionsCount, menuSize, optionListError, reloadOptionList, menuPosition, variant, disableDescriptionEllipsis, multiSelectProps, isMulti, name, classNamePrefix, shouldRenderCustomOptions, isSearchable, selectRef, shouldMenuAlignRight, fullWidth, customSelectedOptionsCount, renderMenuListFooter, ...props }: SelectPickerProps<OptionValue, IsMulti>) => JSX.Element;
 export default SelectPicker;

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

@@ -164,7 +164,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
 export type SelectPickerGroupHeadingProps<OptionValue> = GroupHeadingProps<SelectPickerOptionType<OptionValue>> & {
     isGroupHeadingSelectable: boolean;
 };
-export interface FilterSelectPickerProps extends Required<Pick<SelectPickerProps<number | string, true>, 'options' | 'isDisabled' | 'placeholder' | 'isLoading'>>, Pick<SelectPickerProps<number | string, true>, 'selectRef' | 'inputId' | 'menuPosition' | 'autoFocus' | 'shouldMenuAlignRight'> {
+export interface FilterSelectPickerProps extends Required<Pick<SelectPickerProps<number | string, true>, 'options' | 'isDisabled' | 'placeholder' | 'isLoading'>>, Pick<SelectPickerProps<number | string, true>, 'selectRef' | 'inputId' | 'menuPosition' | 'autoFocus' | 'shouldMenuAlignRight' | 'optionListError' | 'reloadOptionList'> {
     appliedFilterOptions: SelectPickerOptionType[];
     handleApplyFilter: (filtersToApply: SelectPickerOptionType<number | string>[]) => void;
 }

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,8 @@ export * from './ShowMoreText';
 export * from './CollapsibleList';
 export * from './DeploymentConfigDiff';
 export * from './DetectBottom';
+export * from './TabGroup';
 export * from './EditImageFormField';
 export * from './Collapse';
 export * from './FilterButton';
+export * from './Button';

package/dist/Shared/Services/app.types.d.ts

@@ -197,6 +197,11 @@ export interface TemplateListDTO {
     status?: string;
     pipelineId?: number;
 }
+export interface ManifestTemplateDTO {
+    data: string;
+    resolvedData: string;
+    variableSnapshot: null;
+}
 export declare enum DraftState {
     Init = 1,
     Discarded = 2,
@@ -206,6 +211,7 @@ export declare enum DraftState {
 export declare enum EnvResourceType {
     ConfigMap = "configmap",
     Secret = "secrets",
-    DeploymentTemplate = "deployment-template"
+    DeploymentTemplate = "deployment-template",
+    Manifest = "manifest"
 }
 export {};

package/dist/Shared/constants.d.ts

@@ -389,9 +389,11 @@ export declare const ANSI_UP_REGEX: RegExp;
  * Size variants for components
  */
 export declare enum ComponentSizeType {
+    xs = "xs",
     small = "small",
     medium = "medium",
-    large = "large"
+    large = "large",
+    xl = "xl"
 }
 export declare const POP_UP_MENU_MODAL_ID = "popup";
 /**

package/dist/Shared/types.d.ts

@@ -570,6 +570,7 @@ export type BaseFilterQueryParams<T> = {
      */
     showAll?: boolean;
 } & SortingParams<T>;
+export type DataAttributes = Record<`data-${string}`, unknown>;
 export interface RuntimeParamsListItemType extends KeyValueListType {
     id: number;
 }