From b274baf67e27d79fd4e764607ded7c5aa755ee8b Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 19 Jun 2024 09:06:48 -0500 Subject: [PATCH 1/6] unit test coverage for HostNameTableCell --- .../AccessKeyTable/HostNameTableCell.test.tsx | 115 ++++++++++++++++++ .../AccessKeyTable/HostNameTableCell.tsx | 17 +-- 2 files changed, 124 insertions(+), 8 deletions(-) create mode 100644 packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx new file mode 100644 index 00000000000..92c072ca4e9 --- /dev/null +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx @@ -0,0 +1,115 @@ +import '@testing-library/jest-dom'; +import { waitFor } from '@testing-library/react'; +import React from 'react'; + +import { regionFactory } from 'src/factories'; +import { makeResourcePage } from 'src/mocks/serverHandlers'; +import { HttpResponse, http, server } from 'src/mocks/testServer'; +import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; + +import { HostNameTableCell } from './HostNameTableCell'; + +const storageKeyData = { + access_key: 'test_key', + bucket_access: null, + id: 12345, + label: 'this is regular key', + limited: false, + regions: [ + { + id: 'us-east', + s3_endpoint: 'alpha.test.com', + }, + ], + secret_key: '[test]', +}; + +describe('HostNameTableCell', () => { + it('should render "None" when there are no regions', () => { + const { getByText } = renderWithThemeAndHookFormContext({ + component: ( + + ), + }); + + expect(getByText('None')).toBeInTheDocument(); + }); + + test('should render "Regions/S3 Hostnames" cell when there are regions', async () => { + const region = regionFactory.build({ + capabilities: ['Object Storage'], + id: 'us-east', + label: 'Newark, NJ', + }); + + server.use( + http.get('*/v4/regions', () => { + return HttpResponse.json(makeResourcePage([region])); + }) + ); + const { findByText } = renderWithThemeAndHookFormContext({ + component: ( + + ), + }); + + const hostname = await findByText('Newark, NJ: alpha.test.com'); + + await waitFor(() => expect(hostname).toBeInTheDocument()); + }); + test('should render all "Regions/S3 Hostnames" in the cell when there are multiple regions', async () => { + const region = regionFactory.build({ + capabilities: ['Object Storage'], + id: 'us-east', + label: 'Newark, NJ', + }); + + server.use( + http.get('*/v4/regions', () => { + return HttpResponse.json(makeResourcePage([region])); + }) + ); + const { findByText } = renderWithThemeAndHookFormContext({ + component: ( + + ), + }); + const hostname = await findByText('Newark, NJ: alpha.test.com'); + const moreButton = await findByText(/and\s+1\s+more\.\.\./); + await waitFor(() => expect(hostname).toBeInTheDocument()); + + await expect(moreButton).toBeInTheDocument(); + }); +}); diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx index e5fb3ce88db..644e2558d5d 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx @@ -1,7 +1,3 @@ -import { - ObjectStorageKey, - RegionS3EndpointAndID, -} from '@linode/api-v4/lib/object-storage'; import { styled } from '@mui/material/styles'; import React from 'react'; @@ -11,6 +7,11 @@ import { TableCell } from 'src/components/TableCell'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { getRegionsByRegionId } from 'src/utilities/regions'; +import type { + ObjectStorageKey, + RegionS3EndpointAndID, +} from '@linode/api-v4/lib/object-storage'; + type Props = { setHostNames: (hostNames: RegionS3EndpointAndID[]) => void; setShowHostNamesDrawers: (show: boolean) => void; @@ -31,14 +32,14 @@ export const HostNameTableCell = ({ if (!regionsLookup || !regionsData || !regions || regions.length === 0) { return None; } + const label = regionsLookup[storageKeyData.regions[0].id]?.label; + const s3endPoint = storageKeyData?.regions[0]?.s3_endpoint; return ( - {`${regionsLookup[storageKeyData.regions[0].id].label}: ${ - storageKeyData?.regions[0]?.s3_endpoint - } `} + {`${label}: ${s3endPoint} `} {storageKeyData?.regions?.length === 1 && ( - + )} {storageKeyData.regions.length > 1 && ( Date: Wed, 19 Jun 2024 09:09:10 -0500 Subject: [PATCH 2/6] Revert "unit test coverage for HostNameTableCell" This reverts commit b274baf67e27d79fd4e764607ded7c5aa755ee8b. --- .../AccessKeyTable/HostNameTableCell.test.tsx | 115 ------------------ .../AccessKeyTable/HostNameTableCell.tsx | 17 ++- 2 files changed, 8 insertions(+), 124 deletions(-) delete mode 100644 packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx deleted file mode 100644 index 92c072ca4e9..00000000000 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.test.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import '@testing-library/jest-dom'; -import { waitFor } from '@testing-library/react'; -import React from 'react'; - -import { regionFactory } from 'src/factories'; -import { makeResourcePage } from 'src/mocks/serverHandlers'; -import { HttpResponse, http, server } from 'src/mocks/testServer'; -import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers'; - -import { HostNameTableCell } from './HostNameTableCell'; - -const storageKeyData = { - access_key: 'test_key', - bucket_access: null, - id: 12345, - label: 'this is regular key', - limited: false, - regions: [ - { - id: 'us-east', - s3_endpoint: 'alpha.test.com', - }, - ], - secret_key: '[test]', -}; - -describe('HostNameTableCell', () => { - it('should render "None" when there are no regions', () => { - const { getByText } = renderWithThemeAndHookFormContext({ - component: ( - - ), - }); - - expect(getByText('None')).toBeInTheDocument(); - }); - - test('should render "Regions/S3 Hostnames" cell when there are regions', async () => { - const region = regionFactory.build({ - capabilities: ['Object Storage'], - id: 'us-east', - label: 'Newark, NJ', - }); - - server.use( - http.get('*/v4/regions', () => { - return HttpResponse.json(makeResourcePage([region])); - }) - ); - const { findByText } = renderWithThemeAndHookFormContext({ - component: ( - - ), - }); - - const hostname = await findByText('Newark, NJ: alpha.test.com'); - - await waitFor(() => expect(hostname).toBeInTheDocument()); - }); - test('should render all "Regions/S3 Hostnames" in the cell when there are multiple regions', async () => { - const region = regionFactory.build({ - capabilities: ['Object Storage'], - id: 'us-east', - label: 'Newark, NJ', - }); - - server.use( - http.get('*/v4/regions', () => { - return HttpResponse.json(makeResourcePage([region])); - }) - ); - const { findByText } = renderWithThemeAndHookFormContext({ - component: ( - - ), - }); - const hostname = await findByText('Newark, NJ: alpha.test.com'); - const moreButton = await findByText(/and\s+1\s+more\.\.\./); - await waitFor(() => expect(hostname).toBeInTheDocument()); - - await expect(moreButton).toBeInTheDocument(); - }); -}); diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx index 644e2558d5d..e5fb3ce88db 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/HostNameTableCell.tsx @@ -1,3 +1,7 @@ +import { + ObjectStorageKey, + RegionS3EndpointAndID, +} from '@linode/api-v4/lib/object-storage'; import { styled } from '@mui/material/styles'; import React from 'react'; @@ -7,11 +11,6 @@ import { TableCell } from 'src/components/TableCell'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { getRegionsByRegionId } from 'src/utilities/regions'; -import type { - ObjectStorageKey, - RegionS3EndpointAndID, -} from '@linode/api-v4/lib/object-storage'; - type Props = { setHostNames: (hostNames: RegionS3EndpointAndID[]) => void; setShowHostNamesDrawers: (show: boolean) => void; @@ -32,14 +31,14 @@ export const HostNameTableCell = ({ if (!regionsLookup || !regionsData || !regions || regions.length === 0) { return None; } - const label = regionsLookup[storageKeyData.regions[0].id]?.label; - const s3endPoint = storageKeyData?.regions[0]?.s3_endpoint; return ( - {`${label}: ${s3endPoint} `} + {`${regionsLookup[storageKeyData.regions[0].id].label}: ${ + storageKeyData?.regions[0]?.s3_endpoint + } `} {storageKeyData?.regions?.length === 1 && ( - + )} {storageKeyData.regions.length > 1 && ( Date: Wed, 18 Sep 2024 09:50:44 -0500 Subject: [PATCH 3/6] fix: [M3-8508] - Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog --- .../NodeBalancerConfigConfirmationActions.tsx | 30 +++ .../NodeBalancerConfigurations.tsx | 199 +++++++++--------- 2 files changed, 124 insertions(+), 105 deletions(-) create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx new file mode 100644 index 00000000000..45659856a9b --- /dev/null +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; + +export const NodeBalancerConfigConfirmationActions = ({ + isLoading, + onClose, + onDelete, +}: { + isLoading: boolean; + onClose: () => void; + onDelete: () => void; +}) => ( + +); + +export default NodeBalancerConfigConfirmationActions; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx index 620cd6e10f9..1ba7cd42602 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx @@ -1,6 +1,4 @@ import { - NodeBalancerConfig, - NodeBalancerConfigNode, createNodeBalancerConfig, createNodeBalancerConfigNode, deleteNodeBalancerConfig, @@ -10,10 +8,8 @@ import { updateNodeBalancerConfig, updateNodeBalancerConfigNode, } from '@linode/api-v4/lib/nodebalancers'; -import { APIError, ResourcePage } from '@linode/api-v4/lib/types'; import { styled } from '@mui/material/styles'; import { - Lens, append, clone, compose, @@ -25,23 +21,18 @@ import { view, } from 'ramda'; import * as React from 'react'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { compose as composeC } from 'recompose'; import { Accordion } from 'src/components/Accordion'; -import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import PromiseLoader, { - PromiseLoaderResponse, -} from 'src/components/PromiseLoader/PromiseLoader'; +import PromiseLoader from 'src/components/PromiseLoader/PromiseLoader'; import { Typography } from 'src/components/Typography'; -import { - WithQueryClientProps, - withQueryClient, -} from 'src/containers/withQueryClient.container'; +import { withQueryClient } from 'src/containers/withQueryClient.container'; +import { nodebalancerQueries } from 'src/queries/nodebalancers'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView'; @@ -56,13 +47,22 @@ import { parseAddresses, transformConfigsForRequest, } from '../utils'; +import { NodeBalancerConfigConfirmationActions } from './NodeBalancerConfigConfirmationActions'; import type { NodeBalancerConfigFieldsWithStatus, NodeBalancerConfigNodeFields, } from '../types'; import type { Grants } from '@linode/api-v4'; -import { nodebalancerQueries } from 'src/queries/nodebalancers'; +import type { + NodeBalancerConfig, + NodeBalancerConfigNode, +} from '@linode/api-v4/lib/nodebalancers'; +import type { APIError, ResourcePage } from '@linode/api-v4/lib/types'; +import type { Lens } from 'ramda'; +import type { RouteComponentProps } from 'react-router-dom'; +import type { PromiseLoaderResponse } from 'src/components/PromiseLoader/PromiseLoader'; +import type { WithQueryClientProps } from 'src/containers/withQueryClient.container'; const StyledPortsSpan = styled('span', { label: 'StyledPortsSpan', @@ -171,62 +171,25 @@ class NodeBalancerConfigurations extends React.Component< NodeBalancerConfigurationsProps, State > { - render() { - const { nodeBalancerLabel } = this.props; - const { - configErrors, - configSubmitting, - configs, - hasUnsavedConfig, - panelMessages, - } = this.state; - - const isNodeBalancerReadOnly = this.isNodeBalancerReadOnly(); - - return ( -
- - {Array.isArray(configs) && - configs.map( - this.renderConfig(panelMessages, configErrors, configSubmitting) - )} + static defaultDeleteConfigConfirmDialogState = { + errors: undefined, + idxToDelete: undefined, + open: false, + portToDelete: undefined, + submitting: false, + }; - {!hasUnsavedConfig && ( - - this.addNodeBalancerConfig()} - > - {configs.length === 0 - ? 'Add a Configuration' - : 'Add Another Configuration'} - - - )} + static defaultDeleteNodeConfirmDialogState = { + configIdxToDelete: undefined, + errors: undefined, + nodeIdxToDelete: undefined, + open: false, + submitting: false, + }; - - - Are you sure you want to delete this NodeBalancer Configuration? - - -
- ); - } + static defaultFieldsStates = { + configs: [createNewNodeBalancerConfig(true)], + }; addNode = (configIdx: number) => () => { this.setState( @@ -343,26 +306,6 @@ class NodeBalancerConfigurations extends React.Component< ); }; - static defaultDeleteConfigConfirmDialogState = { - errors: undefined, - idxToDelete: undefined, - open: false, - portToDelete: undefined, - submitting: false, - }; - - static defaultDeleteNodeConfirmDialogState = { - configIdxToDelete: undefined, - errors: undefined, - nodeIdxToDelete: undefined, - open: false, - submitting: false, - }; - - static defaultFieldsStates = { - configs: [createNewNodeBalancerConfig(true)], - }; - deleteConfig = () => { const { deleteConfigConfirmDialog: { idxToDelete }, @@ -749,23 +692,6 @@ class NodeBalancerConfigurations extends React.Component< ); }; - renderConfigConfirmationActions = ({ onClose }: { onClose: () => void }) => ( - - ); - resetSubmitting = (configIdx: number) => { // reset submitting const newSubmitting = clone(this.state.configSubmitting); @@ -1164,6 +1090,69 @@ class NodeBalancerConfigurations extends React.Component< const clampedValue = clampNumericString(0, Number.MAX_SAFE_INTEGER)(value); this.updateState(lens, L, callback)(clampedValue); }; + + render() { + const { nodeBalancerLabel } = this.props; + const { + configErrors, + configSubmitting, + configs, + hasUnsavedConfig, + panelMessages, + } = this.state; + + const isNodeBalancerReadOnly = this.isNodeBalancerReadOnly(); + + return ( +
+ + {Array.isArray(configs) && + configs.map( + this.renderConfig(panelMessages, configErrors, configSubmitting) + )} + + {!hasUnsavedConfig && ( + + this.addNodeBalancerConfig()} + > + {configs.length === 0 + ? 'Add a Configuration' + : 'Add Another Configuration'} + + + )} + + + } + title={ + typeof this.state.deleteConfigConfirmDialog.portToDelete !== + 'undefined' + ? `Delete this configuration on port ${this.state.deleteConfigConfirmDialog.portToDelete}?` + : 'Delete this configuration?' + } + error={this.confirmationConfigError()} + onClose={this.onCloseConfirmation} + open={this.state.deleteConfigConfirmDialog.open} + > + + Are you sure you want to delete this NodeBalancer Configuration? + + +
+ ); + } } const preloaded = PromiseLoader({ From d2436ef86829d620b96bbac28949423168924757 Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Wed, 18 Sep 2024 10:20:37 -0500 Subject: [PATCH 4/6] Add unit test coverage --- ...BalancerConfigConfirmationActions.test.tsx | 27 +++++++++++++++++++ .../NodeBalancerConfigConfirmationActions.tsx | 14 +++++----- 2 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.test.tsx diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.test.tsx new file mode 100644 index 00000000000..f0cacf51821 --- /dev/null +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.test.tsx @@ -0,0 +1,27 @@ +import { fireEvent, screen } from '@testing-library/react'; +import * as React from 'react'; + +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { NodeBalancerConfigConfirmationActions } from './NodeBalancerConfigConfirmationActions'; + +import type { NodeBalancerConfigConfirmationActionsPros } from './NodeBalancerConfigConfirmationActions'; + +const props: NodeBalancerConfigConfirmationActionsPros = { + isLoading: false, + onClose: vi.fn(), + onDelete: vi.fn(), +}; + +describe('NodeBalancerConfigConfirmationActions', () => { + test('should call onClose handler upon clicking cancel button', () => { + renderWithTheme(); + fireEvent.click(screen.getByRole('button', { name: 'Cancel' })); + expect(props.onClose).toHaveBeenCalled(); + }); + test('should call onDelete handler upon clicking delete button', () => { + renderWithTheme(); + fireEvent.click(screen.getByRole('button', { name: 'Delete' })); + expect(props.onDelete).toHaveBeenCalled(); + }); +}); diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx index 45659856a9b..cd01309aea5 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx @@ -1,16 +1,18 @@ -import React from 'react'; +import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; +export interface NodeBalancerConfigConfirmationActionsPros { + isLoading: boolean; + onClose: () => void; + onDelete: () => void; +} + export const NodeBalancerConfigConfirmationActions = ({ isLoading, onClose, onDelete, -}: { - isLoading: boolean; - onClose: () => void; - onDelete: () => void; -}) => ( +}: NodeBalancerConfigConfirmationActionsPros) => ( Date: Wed, 18 Sep 2024 14:45:54 -0500 Subject: [PATCH 5/6] Added changeset: Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog --- packages/manager/.changeset/pr-10962-fixed-1726688754577.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10962-fixed-1726688754577.md diff --git a/packages/manager/.changeset/pr-10962-fixed-1726688754577.md b/packages/manager/.changeset/pr-10962-fixed-1726688754577.md new file mode 100644 index 00000000000..851aa610027 --- /dev/null +++ b/packages/manager/.changeset/pr-10962-fixed-1726688754577.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog ([#10962](https://github.com/linode/manager/pull/10962)) From e749e1b86bb3df311a59ebba703a939529b39a8c Mon Sep 17 00:00:00 2001 From: cpathipa <119517080+cpathipa@users.noreply.github.com> Date: Tue, 24 Sep 2024 09:33:50 -0500 Subject: [PATCH 6/6] PR feedback - @HanaXu --- ...BalancerConfigConfirmationActions.test.tsx | 27 ---------------- .../NodeBalancerConfigConfirmationActions.tsx | 32 ------------------- .../NodeBalancerConfigurations.tsx | 19 ++++++++--- 3 files changed, 14 insertions(+), 64 deletions(-) delete mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.test.tsx delete mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.test.tsx deleted file mode 100644 index f0cacf51821..00000000000 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { fireEvent, screen } from '@testing-library/react'; -import * as React from 'react'; - -import { renderWithTheme } from 'src/utilities/testHelpers'; - -import { NodeBalancerConfigConfirmationActions } from './NodeBalancerConfigConfirmationActions'; - -import type { NodeBalancerConfigConfirmationActionsPros } from './NodeBalancerConfigConfirmationActions'; - -const props: NodeBalancerConfigConfirmationActionsPros = { - isLoading: false, - onClose: vi.fn(), - onDelete: vi.fn(), -}; - -describe('NodeBalancerConfigConfirmationActions', () => { - test('should call onClose handler upon clicking cancel button', () => { - renderWithTheme(); - fireEvent.click(screen.getByRole('button', { name: 'Cancel' })); - expect(props.onClose).toHaveBeenCalled(); - }); - test('should call onDelete handler upon clicking delete button', () => { - renderWithTheme(); - fireEvent.click(screen.getByRole('button', { name: 'Delete' })); - expect(props.onDelete).toHaveBeenCalled(); - }); -}); diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx deleted file mode 100644 index cd01309aea5..00000000000 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigConfirmationActions.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; - -import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; - -export interface NodeBalancerConfigConfirmationActionsPros { - isLoading: boolean; - onClose: () => void; - onDelete: () => void; -} - -export const NodeBalancerConfigConfirmationActions = ({ - isLoading, - onClose, - onDelete, -}: NodeBalancerConfigConfirmationActionsPros) => ( - -); - -export default NodeBalancerConfigConfirmationActions; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx index 1ba7cd42602..66e713df1a8 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx @@ -25,6 +25,7 @@ import { withRouter } from 'react-router-dom'; import { compose as composeC } from 'recompose'; import { Accordion } from 'src/components/Accordion'; +import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; @@ -47,7 +48,6 @@ import { parseAddresses, transformConfigsForRequest, } from '../utils'; -import { NodeBalancerConfigConfirmationActions } from './NodeBalancerConfigConfirmationActions'; import type { NodeBalancerConfigFieldsWithStatus, @@ -1130,10 +1130,19 @@ class NodeBalancerConfigurations extends React.Component< } title={