From 8f2c4c62a1fd10d1bfd638ae66d3f7bee6c40ffa Mon Sep 17 00:00:00 2001 From: Amrit Kashyap Borah Date: Sun, 6 Apr 2025 19:12:17 +0530 Subject: [PATCH 01/25] feat: add ClustersAndEnvironments in Pages --- src/Assets/IconV2/ic-cluster.svg | 3 +++ .../ClustersAndEnvironments/index.ts | 1 + .../ClustersAndEnvironments/types.ts | 11 +++++++++++ src/Pages/GlobalConfigurations/index.ts | 1 + src/Shared/Components/Icon/Icon.tsx | 2 ++ 5 files changed, 18 insertions(+) create mode 100644 src/Assets/IconV2/ic-cluster.svg create mode 100644 src/Pages/GlobalConfigurations/ClustersAndEnvironments/index.ts create mode 100644 src/Pages/GlobalConfigurations/ClustersAndEnvironments/types.ts diff --git a/src/Assets/IconV2/ic-cluster.svg b/src/Assets/IconV2/ic-cluster.svg new file mode 100644 index 000000000..f6aea37fd --- /dev/null +++ b/src/Assets/IconV2/ic-cluster.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/index.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/index.ts new file mode 100644 index 000000000..cb3c3c34c --- /dev/null +++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/index.ts @@ -0,0 +1 @@ +export type { NewClusterFormProps, NewClusterFormFooterProps } from './types' diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/types.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/types.ts new file mode 100644 index 000000000..a52837d0d --- /dev/null +++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/types.ts @@ -0,0 +1,11 @@ +import { Dispatch, SetStateAction } from 'react' + +export interface NewClusterFormFooterProps { + apiCallInProgress: boolean + handleModalClose: () => void +} + +export interface NewClusterFormProps extends NewClusterFormFooterProps { + setApiCallInProgress: Dispatch> + FooterComponent: React.FunctionComponent +} diff --git a/src/Pages/GlobalConfigurations/index.ts b/src/Pages/GlobalConfigurations/index.ts index 69c70dff6..e57d047fa 100644 --- a/src/Pages/GlobalConfigurations/index.ts +++ b/src/Pages/GlobalConfigurations/index.ts @@ -18,3 +18,4 @@ export * from './BuildInfra' export * from './Authorization' export * from './ScopedVariables' export * from './DeploymentCharts' +export * from './ClustersAndEnvironments' diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx index 53f04b867..7266c1d37 100644 --- a/src/Shared/Components/Icon/Icon.tsx +++ b/src/Shared/Components/Icon/Icon.tsx @@ -24,6 +24,7 @@ import { ReactComponent as ICCiWebhook } from '@IconsV2/ic-ci-webhook.svg' import { ReactComponent as ICCircleLoader } from '@IconsV2/ic-circle-loader.svg' import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg' import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg' +import { ReactComponent as ICCluster } from '@IconsV2/ic-cluster.svg' import { ReactComponent as ICCode } from '@IconsV2/ic-code.svg' import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg' import { ReactComponent as ICCookr } from '@IconsV2/ic-cookr.svg' @@ -118,6 +119,7 @@ export const iconMap = { 'ic-circle-loader': ICCircleLoader, 'ic-clock': ICClock, 'ic-close-small': ICCloseSmall, + 'ic-cluster': ICCluster, 'ic-code': ICCode, 'ic-container': ICContainer, 'ic-cookr': ICCookr, From 5859e44bccc9b5dc7bff828afb7a861b073d7508 Mon Sep 17 00:00:00 2001 From: Amrit Kashyap Borah Date: Mon, 7 Apr 2025 22:08:39 +0530 Subject: [PATCH 02/25] feat: add Icons & installationId in cluster capacity type --- src/Assets/IconV2/ic-pencil.svg | 3 + src/Assets/IconV2/ic-sliders-vertical.svg | 3 + src/Pages/ResourceBrowser/types.ts | 1 + .../Components/Button/Button.component.tsx | 237 ++++++++++-------- src/Shared/Components/Icon/Icon.tsx | 4 + src/Shared/types.ts | 1 + 6 files changed, 149 insertions(+), 100 deletions(-) create mode 100644 src/Assets/IconV2/ic-pencil.svg create mode 100644 src/Assets/IconV2/ic-sliders-vertical.svg diff --git a/src/Assets/IconV2/ic-pencil.svg b/src/Assets/IconV2/ic-pencil.svg new file mode 100644 index 000000000..38e2207ed --- /dev/null +++ b/src/Assets/IconV2/ic-pencil.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Assets/IconV2/ic-sliders-vertical.svg b/src/Assets/IconV2/ic-sliders-vertical.svg new file mode 100644 index 000000000..9d147df87 --- /dev/null +++ b/src/Assets/IconV2/ic-sliders-vertical.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Pages/ResourceBrowser/types.ts b/src/Pages/ResourceBrowser/types.ts index 935665f2f..764817022 100644 --- a/src/Pages/ResourceBrowser/types.ts +++ b/src/Pages/ResourceBrowser/types.ts @@ -64,6 +64,7 @@ export interface ClusterCapacityType { nodeErrors: Record[] status?: ClusterStatusType isProd: boolean + installationId?: number } export interface ClusterDetail extends ClusterCapacityType { diff --git a/src/Shared/Components/Button/Button.component.tsx b/src/Shared/Components/Button/Button.component.tsx index 118c118b6..b6bdb726b 100644 --- a/src/Shared/Components/Button/Button.component.tsx +++ b/src/Shared/Components/Button/Button.component.tsx @@ -14,7 +14,16 @@ * limitations under the License. */ -import { ButtonHTMLAttributes, MutableRefObject, PropsWithChildren, useEffect, useRef, useState } from 'react' +import { + ButtonHTMLAttributes, + forwardRef, + MutableRefObject, + PropsWithChildren, + RefCallback, + useEffect, + useRef, + useState, +} from 'react' import { Link, LinkProps } from 'react-router-dom' import { Progressing } from '@Common/Progressing' import { Tooltip } from '@Common/Tooltip' @@ -30,6 +39,7 @@ const ButtonElement = ({ buttonProps, onClick, elementRef, + forwardedRef, ...props }: PropsWithChildren< Omit< @@ -51,8 +61,28 @@ const ButtonElement = ({ 'data-testid': ButtonProps['dataTestId'] 'aria-label': ButtonProps['ariaLabel'] elementRef: MutableRefObject + forwardedRef: + | RefCallback + | MutableRefObject } >) => { + const refCallback = (node: HTMLButtonElement | HTMLAnchorElement) => { + // eslint-disable-next-line no-param-reassign + elementRef.current = node + + if (!forwardedRef) { + return + } + + if (typeof forwardedRef === 'function') { + forwardedRef(node) + return + } + + // eslint-disable-next-line no-param-reassign + forwardedRef.current = node + } + if (component === ButtonComponentType.link) { return ( } + ref={refCallback} /> ) } @@ -73,7 +103,7 @@ const ButtonElement = ({ // eslint-disable-next-line react/button-has-type type={buttonProps?.type || 'button'} onClick={onClick as ButtonHTMLAttributes['onClick']} - ref={elementRef as MutableRefObject} + ref={refCallback} /> ) } @@ -142,116 +172,123 @@ const ButtonElement = ({ *