@devtron-labs/devtron-fe-common-lib 1.20.6-alpha-32 → 1.20.6-alpha-95

package/dist/Common/Constants.d.ts

@@ -3,7 +3,7 @@ export declare const FALLBACK_REQUEST_TIMEOUT = 60000;
 export declare const Host: string;
 export declare const DOCUMENTATION_HOME_PAGE = "https://docs.devtron.ai";
 export declare const DEVTRON_HOME_PAGE = "https://devtron.ai/";
-export declare const DOCUMENTATION_VERSION = "/devtron/v1.7";
+export declare const DOCUMENTATION_VERSION = "/devtron/v2.0";
 export declare const DISCORD_LINK = "https://discord.devtron.ai/";
 export declare const DEFAULT_JSON_SCHEMA_URI = "https://json-schema.org/draft/2020-12/schema";
 export declare const LICENSE_DASHBOARD_HOME_PAGE = "https://license.devtron.ai/dashboard";
@@ -52,9 +52,9 @@ export declare const URLS: {
     readonly LICENSE_AUTH: "/license-auth";
     readonly APPLICATION_MANAGEMENT: "/application-management";
     readonly APPLICATION_MANAGEMENT_OVERVIEW: "/application-management/overview";
-    readonly APPLICATION_MANAGEMENT_APP: "/application-management/app";
-    readonly APPLICATION_MANAGEMENT_APP_LIST: "/application-management/devtron-apps";
-    readonly APPLICATION_MANAGEMENT_CREATE_DEVTRON_APP: "/application-management/devtron-apps/create-app";
+    readonly APPLICATION_MANAGEMENT_APP: "/application-management/devtron-app";
+    readonly APPLICATION_MANAGEMENT_APP_LIST: "/application-management/devtron-app/list";
+    readonly APPLICATION_MANAGEMENT_CREATE_DEVTRON_APP: "/application-management/devtron-app/list/create-app";
     readonly APPLICATION_MANAGEMENT_APPLICATION_GROUP: "/application-management/application-group";
     readonly APPLICATION_MANAGEMENT_TEMPLATES_DEVTRON_APP: "/application-management/templates/devtron-app";
     readonly APPLICATION_MANAGEMENT_TEMPLATES_DEVTRON_APP_CREATE: "/application-management/templates/devtron-app/create";
@@ -69,12 +69,11 @@ export declare const URLS: {
     readonly INFRASTRUCTURE_MANAGEMENT: "/infrastructure-management";
     readonly INFRASTRUCTURE_MANAGEMENT_OVERVIEW: "/infrastructure-management/overview";
     readonly INFRASTRUCTURE_MANAGEMENT_APP_LIST: `/infrastructure-management/apps/:appType(${string})`;
-    readonly INFRASTRUCTURE_MANAGEMENT_APP: "/infrastructure-management/app";
+    readonly INFRASTRUCTURE_MANAGEMENT_APP: "/infrastructure-management/apps";
     readonly INFRASTRUCTURE_MANAGEMENT_CHART_STORE: "/infrastructure-management/chart-store";
     readonly INFRASTRUCTURE_MANAGEMENT_CHART_STORE_DISCOVER: "/infrastructure-management/chart-store/discover";
     readonly INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER: "/infrastructure-management/resource-browser";
     readonly INFRASTRUCTURE_MANAGEMENT_RESOURCE_WATCHER: "/infrastructure-management/resource-watcher";
-    readonly INFRASTRUCTURE_MANAGEMENT_AUDIT_LOGS: "/infrastructure-management/audit-logs";
     readonly SOFTWARE_RELEASE_MANAGEMENT: "/software-release-management";
     readonly COST_VISIBILITY: "/cost-visibility";
     readonly COST_VISIBILITY_OVERVIEW: "/cost-visibility/overview";
@@ -86,6 +85,9 @@ export declare const URLS: {
     readonly COST_BREAKDOWN_DETAIL: ":itemName/:view/:detail?";
     readonly COST_CONFIGURATIONS: "/cost-visibility/configurations";
     readonly SECURITY_CENTER: "/security-center";
+    readonly SECURITY_CENTER_OVERVIEW: "/security-center/overview";
+    readonly SECURITY_CENTER_SCANS: "/security-center/scans";
+    readonly SECURITY_CENTER_POLICIES: "/security-center/policies";
     readonly AUTOMATION_AND_ENABLEMENT: "/automation-and-enablement";
     readonly AUTOMATION_AND_ENABLEMENT_JOB: "/automation-and-enablement/job";
     readonly DATA_PROTECTION: "/data-protection-management";
@@ -101,9 +103,8 @@ export declare const URLS: {
     readonly GLOBAL_CONFIG_EDIT_CLUSTER: "/global-configuration/cluster-env/edit/:clusterId";
     readonly PERMISSION_GROUPS: "/global-configuration/auth/groups";
     readonly AI_RECOMMENDATIONS: "/ai-recommendations";
-    readonly AI_RECOMMENDATIONS_NOTIFICATIONS: "/ai-recommendations/notifications";
+    readonly AI_RECOMMENDATIONS_OVERVIEW: "/ai-recommendations/overview";
     readonly EXTERNAL_APPS: "ea";
-    readonly AI_RECOMMENDATIONS_RUNBOOKS: "/ai-recommendations/runbooks";
 };
 export declare const ROUTES: {
     readonly APP: "app";
@@ -130,6 +131,7 @@ export declare const ROUTES: {
     readonly PATCH: "patch";
     readonly ENVIRONMENT_LIST_MIN: "env/autocomplete";
     readonly CLUSTER: "cluster";
+    readonly CLUSTER_MIN: "cluster/min";
     readonly API_RESOURCE: "k8s/api-resources";
     readonly GVK: "gvk";
     readonly NAMESPACE: "env/namespace";

package/dist/Common/SegmentedControl/Segment.d.ts

@@ -1,3 +1,3 @@
 import { SegmentProps } from './types';
-declare const Segment: ({ segment, isSelected, name, onChange, fullWidth, size, disabled }: SegmentProps) => JSX.Element;
+declare const Segment: <T extends string | number>({ segment, isSelected, name, onChange, fullWidth, size, disabled, }: SegmentProps<T>) => JSX.Element;
 export default Segment;

package/dist/Common/SegmentedControl/SegmentedControl.component.d.ts

@@ -1,3 +1,3 @@
 import { SegmentedControlProps } from './types';
-declare const SegmentedControl: ({ segments, onChange, name, size, value: controlledValue, fullWidth, disabled, }: SegmentedControlProps) => JSX.Element;
+declare const SegmentedControl: <T extends string | number>({ segments, onChange, name, size, value: controlledValue, fullWidth, disabled, }: SegmentedControlProps<T>) => JSX.Element;
 export default SegmentedControl;

package/dist/Common/SegmentedControl/index.d.ts

@@ -1,2 +1,2 @@
 export { default as SegmentedControl } from './SegmentedControl.component';
-export { type SegmentedControlProps } from './types';
+export { type SegmentedControlProps, type SegmentType } from './types';

package/dist/Common/SegmentedControl/types.d.ts

@@ -2,7 +2,7 @@ import { TooltipProps } from '../Tooltip';
 import { IconsProps, SelectPickerOptionType } from '../../Shared/Components';
 import { ComponentSizeType } from '../../Shared/constants';
 type SegmentTooltipProps = Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo' | 'placement'>;
-export type SegmentType = Pick<SelectPickerOptionType, 'value'> & {
+export type SegmentType<T = string | number> = {
     /**
      * If true, the segment will be in error state with error icon
      */
@@ -11,6 +11,10 @@ export type SegmentType = Pick<SelectPickerOptionType, 'value'> & {
      * If true, the segment will be in disabled state
      */
     isDisabled?: boolean;
+    /**
+     * Value for the segment
+     */
+    value: T;
 } & (({
     /**
      * Label for the segment
@@ -40,11 +44,11 @@ export type SegmentType = Pick<SelectPickerOptionType, 'value'> & {
      */
     ariaLabel: string;
 });
-export type SegmentedControlProps = {
+export type SegmentedControlProps<T = string | number> = {
     /**
      * List of segments to be displayed
      */
-    segments: SegmentType[];
+    segments: SegmentType<T>[];
     /**
      * Please make sure this is unique
      */
@@ -57,16 +61,16 @@ export type SegmentedControlProps = {
     /**
      * On change handler for the component
      */
-    onChange?: (selectedSegment: SegmentType) => void;
+    onChange?: (selectedSegment: SegmentType<T>) => void;
 } | {
     /**
      * If defined, the component is controlled and onChange needs to be handled by the parent
      */
-    value: SegmentType['value'];
-    onChange: (selectedSegment: SegmentType) => void;
+    value: SegmentType<T>['value'];
+    onChange: (selectedSegment: SegmentType<T>) => void;
 });
-export interface SegmentProps extends Required<Pick<SegmentedControlProps, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
+export interface SegmentProps<T> extends Required<Pick<SegmentedControlProps<T>, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
     isSelected: boolean;
-    segment: SegmentType;
+    segment: SegmentType<T>;
 }
 export {};

package/dist/Common/Tooltip/Tooltip.d.ts

@@ -1,3 +1,3 @@
 import { TooltipProps } from './types';
-declare const Tooltip: ({ shortcutKeyCombo, alwaysShowTippyOnHover, showOnTruncate, wordBreak, children: child, ...rest }: TooltipProps) => JSX.Element;
+declare const Tooltip: ({ shortcutKeyCombo, alwaysShowTippyOnHover, showOnTruncate, wordBreak, children: child, plugins, ...rest }: TooltipProps) => JSX.Element;
 export default Tooltip;

package/dist/Common/index.d.ts

@@ -37,7 +37,6 @@ export * from './Policy.Types';
 export { default as PopupMenu } from './PopupMenu';
 export * from './Progressing';
 export { default as RadioGroup } from './RadioGroup';
-export { default as StyledRadioGroup } from './RadioGroup/RadioGroup';
 export { default as RadioGroupItem } from './RadioGroupItem';
 export { default as Reload } from './Reload';
 export * from './RJSF';

package/dist/Pages/ResourceBrowser/service.d.ts

@@ -1,6 +1,6 @@
 import { APIOptions, ResponseType } from '../../Common/Types';
-import { CreateResourceDTO, CreateResourcePayload, K8sResourceDetailType, K8sResourceListPayloadType, NodeActionRequest, ResourceListPayloadType, ResourceType } from './ResourceBrowser.Types';
-import { ClusterDetail, NodeCordonRequest } from './types';
+import { CreateResourceDTO, CreateResourcePayload, K8sResourceDetailType, K8sResourceListPayloadType, NodeActionRequest, ResourceListPayloadType, ResourceManifestDTO, ResourceType } from './ResourceBrowser.Types';
+import { ClusterDetail, GetResourceManifestProps, NodeCordonRequest } from './types';
 export declare const getK8sResourceList: (resourceListPayload: K8sResourceListPayloadType, signal?: AbortSignal) => Promise<ResponseType<K8sResourceDetailType>>;
 export declare const createNewResource: (resourceListPayload: CreateResourcePayload, abortControllerRef?: APIOptions["abortControllerRef"]) => Promise<ResponseType<CreateResourceDTO[]>>;
 export declare const deleteResource: (resourceListPayload: ResourceListPayloadType, abortControllerRef?: APIOptions["abortControllerRef"]) => Promise<ResponseType<ResourceType[]>>;
@@ -8,3 +8,4 @@ export declare const deleteNodeCapacity: (requestPayload: NodeActionRequest, abo
 export declare const cordonNodeCapacity: (requestPayload: NodeCordonRequest, abortControllerRef?: APIOptions["abortControllerRef"]) => Promise<ResponseType>;
 export declare const drainNodeCapacity: (requestPayload: NodeActionRequest, abortControllerRef?: APIOptions["abortControllerRef"]) => Promise<ResponseType>;
 export declare const getClusterListRaw: (abortControllerRef?: APIOptions["abortControllerRef"]) => Promise<ResponseType<ClusterDetail[]>>;
+export declare const getK8sResourceManifest: ({ selectedResource, signal }: GetResourceManifestProps) => Promise<ResponseType<ResourceManifestDTO>>;

package/dist/Pages/ResourceBrowser/types.d.ts

@@ -1,6 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { TabProps } from '../../Shared/Components';
 import { InstallationClusterType } from '../../Shared/types';
+import { SelectedResourceType } from '../Applications/DevtronApps/Details/CDPipeline/types';
 import { NodeActionRequest } from './ResourceBrowser.Types';
 export declare enum ClusterFiltersType {
     ALL_CLUSTERS = "all",
@@ -131,4 +132,8 @@ export declare enum ResourceBrowserActionMenuEnum {
     delete = "delete",
     vulnerability = "vulnerability"
 }
+export interface GetResourceManifestProps {
+    selectedResource: SelectedResourceType;
+    signal: AbortSignal;
+}
 export {};

package/dist/Pages-Devtron-2.0/InfrastructureManagement/index.d.ts

@@ -1,2 +1 @@
-export * from './Overview';
 export * from './Shared';

package/dist/Pages-Devtron-2.0/SecurityCenter/Shared/SecurityCenterIcon/SecurityCenterIcon.d.ts

@@ -0,0 +1 @@
+export declare const SecurityCenterIcon: () => JSX.Element;

package/dist/Pages-Devtron-2.0/SecurityCenter/Shared/SecurityCenterIcon/index.d.ts

@@ -0,0 +1 @@
+export { getSecurityCenterBreadcrumb } from './utils';

package/dist/Pages-Devtron-2.0/SecurityCenter/Shared/SecurityCenterIcon/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const getSecurityCenterBreadcrumb: () => {
+    'security-center': {
+        component: JSX.Element;
+        linked: boolean;
+    };
+};

package/dist/Pages-Devtron-2.0/SecurityCenter/Shared/index.d.ts

@@ -0,0 +1 @@
+export * from './SecurityCenterIcon';

package/dist/Pages-Devtron-2.0/SecurityCenter/index.d.ts

@@ -1 +1 @@
-export * from './Overview';
+export * from './Shared';

package/dist/Pages-Devtron-2.0/index.d.ts

@@ -2,3 +2,4 @@ export * from './ApplicationManagement';
 export * from './CostVisibility';
 export * from './DataProtectionManagement';
 export * from './InfrastructureManagement';
+export * from './SecurityCenter';

package/dist/Shared/Components/ActionMenu/useActionMenu.hook.d.ts

@@ -21,8 +21,8 @@ export declare const useActionMenu: <T extends string | number>({ id, position,
         className?: string;
         defaultValue?: string | number | readonly string[];
         id?: string;
-        color?: string;
         role?: import('react').AriaRole;
+        color?: string;
         about?: string;
         is?: string;
         security?: string;

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

@@ -100,7 +100,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: import('react').ReactElement;
     endIcon?: import('react').ReactElement;
     fontWeight?: "bold" | "normal";
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLButtonElement>;
     component?: ButtonComponentType.button;
     buttonProps?: Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "children" | "styles" | "className" | "disabled" | "onClick">;
@@ -135,7 +135,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: never;
     endIcon?: never;
     fontWeight?: never;
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLButtonElement>;
     component?: ButtonComponentType.button;
     buttonProps?: Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "children" | "styles" | "className" | "disabled" | "onClick">;
@@ -164,7 +164,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: import('react').ReactElement;
     endIcon?: import('react').ReactElement;
     fontWeight?: "bold" | "normal";
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLButtonElement>;
     component?: ButtonComponentType.button;
     buttonProps?: Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "children" | "styles" | "className" | "disabled" | "onClick">;
@@ -193,7 +193,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: never;
     endIcon?: never;
     fontWeight?: never;
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLAnchorElement>;
     component: ButtonComponentType.link;
     linkProps: Omit<import('react-router-dom').LinkProps, "children" | "styles" | "className" | "onClick">;
@@ -228,7 +228,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: import('react').ReactElement;
     endIcon?: import('react').ReactElement;
     fontWeight?: "bold" | "normal";
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLAnchorElement>;
     component: ButtonComponentType.link;
     linkProps: Omit<import('react-router-dom').LinkProps, "children" | "styles" | "className" | "onClick">;
@@ -263,7 +263,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: never;
     endIcon?: never;
     fontWeight?: never;
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLAnchorElement>;
     component: ButtonComponentType.link;
     linkProps: Omit<import('react-router-dom').LinkProps, "children" | "styles" | "className" | "onClick">;
@@ -292,7 +292,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: import('react').ReactElement;
     endIcon?: import('react').ReactElement;
     fontWeight?: "bold" | "normal";
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLAnchorElement>;
     component: ButtonComponentType.link;
     linkProps: Omit<import('react-router-dom').LinkProps, "children" | "styles" | "className" | "onClick">;
@@ -321,7 +321,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: never;
     endIcon?: never;
     fontWeight?: never;
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLAnchorElement>;
     component: ButtonComponentType.anchor;
     linkProps?: never;
@@ -356,7 +356,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: import('react').ReactElement;
     endIcon?: import('react').ReactElement;
     fontWeight?: "bold" | "normal";
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLAnchorElement>;
     component: ButtonComponentType.anchor;
     linkProps?: never;
@@ -391,7 +391,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: never;
     endIcon?: never;
     fontWeight?: never;
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLAnchorElement>;
     component: ButtonComponentType.anchor;
     linkProps?: never;
@@ -420,7 +420,7 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: import('react').ReactElement;
     endIcon?: import('react').ReactElement;
     fontWeight?: "bold" | "normal";
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy"> | Pick<{
     ref?: import('react').Ref<HTMLAnchorElement>;
     component: ButtonComponentType.anchor;
     linkProps?: never;
@@ -449,5 +449,5 @@ declare const Button: import('react').ForwardRefExoticComponent<(Pick<{
     startIcon?: never;
     endIcon?: never;
     fontWeight?: never;
-}, "style" | "text" | "id" | "size" | "tooltipProps" | "dataTestId" | "disabled" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy">) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+}, "style" | "text" | "id" | "disabled" | "size" | "tooltipProps" | "dataTestId" | "startIcon" | "endIcon" | "variant" | "ariaLabel" | "icon" | "buttonProps" | "isLoading" | "onClick" | "fullWidth" | "fontWeight" | "component" | "linkProps" | "anchorProps" | "isOpacityHoverChild" | "triggerAutoClickTimestamp" | "showTooltip" | "showAriaLabelInTippy">) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default Button;

package/dist/Shared/Components/Charts/Chart.component.d.ts

@@ -1,7 +1,7 @@
 import { ChartProps } from './types';
 /**
  * A versatile Chart component that renders different types of charts using Chart.js.
- * Supports area charts, pie charts, stacked bar charts (vertical/horizontal), and line charts.
+ * Supports area charts, pie charts, semi-pie charts, stacked bar charts (vertical/horizontal), and line charts.
  *
  * The component automatically adapts to theme changes and provides consistent styling
  * across all chart types. Colors are provided by the user through the CHART_COLORS constant
@@ -29,7 +29,24 @@ import { ChartProps } from './types';
  *   datasets={{
  *     datasetName: 'Adoption Rate (%)',
  *     yAxisValues: [45.2, 28.7, 35.4],
- *     backgroundColor: ['SkyBlue300', 'AquaTeal400', 'LavenderPurple300']
+ *     colors: ['SkyBlue300', 'AquaTeal400', 'LavenderPurple300']
+ *   }}
+ * />
+ *
+ * [Semi-Pie Chart Example with Center Text]
+ * <Chart
+ *   id="performance-metrics"
+ *   type="semiPie"
+ *   xAxisLabels={['Good', 'Average', 'Poor']}
+ *   datasets={{
+ *     datasetName: 'Performance Score (%)',
+ *     yAxisValues: [65, 25, 10],
+ *     colors: ['LimeGreen500', 'GoldenYellow400', 'CoralRed400']
+ *   }}
+ *   centerText={{
+ *     text: '85%',
+ *     fontSize: 24,
+ *     fontWeight: '600'
  *   }}
  * />
  *
@@ -66,11 +83,9 @@ import { ChartProps } from './types';
  * ```
  *
  * @param id - Unique identifier for the chart canvas element
- * @param type - Chart type: 'area', 'pie', 'stackedBar', 'stackedBarHorizontal', or 'line'
- * @param xAxisLabels - Array of labels for the x-axis (or categories for pie charts)
- * @param datasets - Chart data: array of datasets for most charts, single dataset object for pie charts
- * @param xAxisConfig
- * @param yAxisConfig
+ * @param type - Chart type: 'area', 'pie', 'semiPie', 'stackedBar', 'stackedBarHorizontal', or 'line'
+ * @param xAxisLabels - Array of labels for the x-axis (or categories for pie/semi-pie charts)
+ * @param datasets - Chart data: array of datasets for most charts, single dataset object for pie/semi-pie charts
  *
  * @performance
  * **Memoization Recommendations:**
@@ -96,7 +111,9 @@ import { ChartProps } from './types';
  * @notes
  * - Chart automatically re-renders when theme changes (light/dark mode)
  * - Line charts are rendered as non-stacked and non-filled by default
- * - Pie charts expect a single dataset object instead of an array
+ * - Pie and semi-pie charts expect a single dataset object instead of an array
+ * - Semi-pie charts render as half-circles, ideal for gauges or progress indicators
+ * - Center text can be added to pie and semi-pie charts using the centerText prop
  * - Colors should reference CHART_COLORS tokens for consistency
  * - Component destroys and recreates Chart.js instance on prop changes for optimal performance
  */

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

@@ -7,3 +7,4 @@ export declare const CHART_AXIS_LABELS_COLOR: Record<AppThemeType, string>;
 export declare const CHART_CANVAS_BACKGROUND_COLORS: Record<AppThemeType, string>;
 export declare const LINE_DASH: number[];
 export declare const MAX_BAR_THICKNESS = 96;
+export declare const DIS_JOINT_CHART_POINT_RADIUS = 4;

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

@@ -1,4 +1,4 @@
 export { default as Chart } from './Chart.component';
 export { CHART_COLORS } from './constants';
-export type { ChartColorKey, ChartProps, ChartType, ReferenceLineConfigType, SimpleDataset, SimpleDatasetForPie, } from './types';
+export type { CenterTextConfig, ChartColorKey, ChartProps, ChartType, ReferenceLineConfigType, SimpleDataset, SimpleDatasetForPie, } from './types';
 export { chartColorGenerator } from './utils';

package/dist/Shared/Components/Charts/plugins.d.ts

@@ -1,4 +1,7 @@
+import { RefObject } from 'react';
 import { Plugin } from 'chart.js';
 import { AppThemeType } from '../../Providers';
-import { ReferenceLineConfigType } from './types';
+import { CenterTextConfig, ChartType, ReferenceLineConfigType } from './types';
 export declare const drawReferenceLine: (config: ReferenceLineConfigType, id: string, appTheme: AppThemeType) => Plugin;
+export declare const htmlLegendPlugin: (id: string, ref: RefObject<HTMLDivElement>, type: ChartType) => Plugin;
+export declare const drawCenterText: (config: CenterTextConfig, appTheme: AppThemeType) => Plugin;

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

@@ -3,11 +3,11 @@ import { TooltipOptions, TooltipPositionerFunction } from 'chart.js';
 import { TooltipProps } from '../../../Common/Tooltip';
 import { AppThemeType } from '../../Providers';
 import { Never } from '../../types';
-export type ChartType = 'area' | 'pie' | 'stackedBar' | 'stackedBarHorizontal' | 'line';
-export type ColorTokensType = 'DeepPlum' | 'Magenta' | 'Slate' | 'Lavender' | 'SkyBlue' | 'AquaTeal' | 'LimeGreen' | 'CoralRed' | 'GoldenYellow' | 'CharcoalGray' | 'Gray';
+export type ChartType = 'area' | 'pie' | 'semiPie' | 'stackedBar' | 'stackedBarHorizontal' | 'line';
+export type ColorTokensType = 'DeepPlum' | 'Magenta' | 'Slate' | 'Lavender' | 'SkyBlue' | 'AquaTeal' | 'LimeGreen' | 'CoralRed' | 'GoldenYellow' | 'CharcoalGray' | 'Gray' | 'SunsetOrange';
 export type VariantsType = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 export type ChartColorKey = `${ColorTokensType}${VariantsType}`;
-export type ChartTypeWithoutPie = Exclude<ChartType, 'pie'>;
+export type ChartTypeWithoutPie = Exclude<ChartType, 'pie' | 'semiPie'>;
 interface BaseSimpleDataset {
     datasetName: string;
     yAxisValues: number[];
@@ -28,15 +28,12 @@ export interface ReferenceLineConfigType {
     color?: ChartColorKey;
     value: number;
 }
-export interface AxisConfig {
-    title?: string;
-    unit?: string;
-    unitPosition?: 'prefix' | 'suffix';
-    labelFormatter?: (value: number | string, index: number) => string | string[] | number | number[];
-    hide?: boolean;
-    max?: number;
-    min?: number;
-    stepSize?: number;
+export interface CenterTextConfig {
+    text: string;
+    fontSize?: number;
+    fontWeight?: string | number;
+    color?: string;
+    fontFamily?: string;
 }
 type XYAxisMax = {
     xAxisMax?: number;
@@ -45,8 +42,6 @@ type XYAxisMax = {
      * Optional reference lines to draw across the chart
      */
     referenceLines?: ReferenceLineConfigType[];
-    xAxisConfig?: AxisConfig;
-    yAxisConfig?: AxisConfig;
 };
 type OnChartClickHandler = (datasetName: string, value: number) => void;
 type ScaleTickFormatCallbacks = Partial<{
@@ -54,24 +49,29 @@ type ScaleTickFormatCallbacks = Partial<{
     yScaleTickFormat: (value: number, index: number) => string | string[] | number | number[];
 }>;
 export type TypeAndDatasetsType = ({
-    type: 'pie';
+    type: 'pie' | 'semiPie';
     /**
      * Needs to be memoized
      */
     datasets: SimpleDatasetForPie;
     onChartClick?: OnChartClickHandler;
+    /** Configuration for center text (only for doughnut/pie charts) */
+    centerText?: CenterTextConfig;
 } & Never<XYAxisMax> & Never<ScaleTickFormatCallbacks>) | ({
     type: 'line';
     datasets: SimpleDatasetForLineAndArea[];
     onChartClick?: never;
+    centerText?: never;
 } & XYAxisMax & ScaleTickFormatCallbacks) | ({
     type: 'area';
     datasets: SimpleDatasetForLineAndArea;
     onChartClick?: never;
+    centerText?: never;
 } & XYAxisMax & ScaleTickFormatCallbacks) | ({
-    type: Exclude<ChartType, 'pie' | 'line' | 'area'>;
+    type: Exclude<ChartType, 'pie' | 'semiPie' | 'line' | 'area'>;
     datasets: SimpleDataset[];
     onChartClick?: OnChartClickHandler;
+    centerText?: never;
 } & XYAxisMax & ScaleTickFormatCallbacks);
 export type ChartProps = {
     id: string;
@@ -93,19 +93,21 @@ export type ChartProps = {
         placement?: TooltipProps['placement'];
         datasetValueFormatter?: (value: number) => string | number;
     };
+    /** A title for x axis */
     xScaleTitle?: string;
+    /** A title for y axis */
     yScaleTitle?: string;
 } & TypeAndDatasetsType;
 export type TransformDatasetProps = {
     appTheme: AppThemeType;
 } & ({
-    type: 'pie';
+    type: 'pie' | 'semiPie';
     dataset: SimpleDatasetForPie;
 } | {
     type: 'line' | 'area';
     dataset: SimpleDatasetForLineAndArea;
 } | {
-    type: Exclude<ChartType, 'pie' | 'line' | 'area'>;
+    type: Exclude<ChartType, 'pie' | 'semiPie' | 'line' | 'area'>;
     dataset: SimpleDataset;
 });
 export type GetBackgroundAndBorderColorProps = TransformDatasetProps;
@@ -123,4 +125,11 @@ declare module 'chart.js' {
         barElementCenterPositioner: TooltipPositionerFunction<'bar'>;
     }
 }
+export interface HTMLLegendProps {
+    backgroundColor: string;
+    label: string;
+    onClick: () => void;
+    strikeThrough: boolean;
+    variant: 'line' | 'square';
+}
 export {};