diff --git a/packages/manager/.changeset/pr-11176-tests-1730144406169.md b/packages/manager/.changeset/pr-11176-tests-1730144406169.md
new file mode 100644
index 00000000000..0a1b937db45
--- /dev/null
+++ b/packages/manager/.changeset/pr-11176-tests-1730144406169.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit tests to declutter LKE ACL cypress tests, fix lke-create.spec.ts failures ([#11176](https://github.com/linode/manager/pull/11176))
diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
index b9be678ad32..2398df08e8c 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
@@ -411,14 +411,6 @@ describe('LKE Cluster Creation with ACL', () => {
cy.wait(['@getAccount']);
cy.contains('Control Plane ACL').should('not.exist');
- cy.contains(
- 'Enable an access control list (ACL) on your LKE cluster to restrict access to your cluster’s control plane. When enabled, only the IP addresses and ranges specified by you can connect to the control plane.'
- ).should('not.exist');
- cy.contains('Enable Control Plane ACL').should('not.exist');
- cy.contains('IPv4 Addresses or CIDRs').should('not.exist');
- cy.contains('IPv6 Addresses or CIDRs').should('not.exist');
- cy.contains('Add IPv4 Address').should('not.exist');
- cy.contains('Add IPv6 Address').should('not.exist');
});
// setting up mocks
@@ -511,26 +503,13 @@ describe('LKE Cluster Creation with ACL', () => {
.should('be.visible')
.click();
- // Confirm ACL section and disable ACL
+ // Disable ACL
cy.contains('Control Plane ACL').should('be.visible');
- cy.contains(
- 'Enable an access control list (ACL) on your LKE cluster to restrict access to your cluster’s control plane. When enabled, only the IP addresses and ranges specified by you can connect to the control plane.'
- ).should('be.visible');
- cy.contains('Enable Control Plane ACL').should('be.visible');
- cy.contains('IPv4 Addresses or CIDRs').should('be.visible');
- cy.contains('IPv6 Addresses or CIDRs').should('be.visible');
- cy.contains('Add IPv4 Address').should('be.visible');
- cy.contains('Add IPv6 Address').should('be.visible');
ui.toggle
.find()
.should('have.attr', 'data-qa-toggle', 'true')
.should('be.visible')
.click();
- // IP related fields do not exist when ACL is not enabled
- cy.get('IPv4 Addresses or CIDRs').should('not.exist');
- cy.get('IPv6 Addresses or CIDRs').should('not.exist');
- cy.get('Add IPv4 Address').should('not.exist');
- cy.get('Add IPv6 Address').should('not.exist');
// Add a node pool
cy.log(`Adding ${nodeCount}x ${getLkePlanName(clusterPlan)} node(s)`);
@@ -637,20 +616,12 @@ describe('LKE Cluster Creation with ACL', () => {
// Confirm ACL section
cy.contains('Control Plane ACL').should('be.visible');
- cy.contains(
- 'Enable an access control list (ACL) on your LKE cluster to restrict access to your cluster’s control plane. When enabled, only the IP addresses and ranges specified by you can connect to the control plane.'
- ).should('be.visible');
- cy.contains('Enable Control Plane ACL').should('be.visible');
- cy.contains('IPv4 Addresses or CIDRs').should('be.visible');
- cy.contains('IPv6 Addresses or CIDRs').should('be.visible');
- cy.contains('Add IPv4 Address').should('be.visible');
- cy.contains('Add IPv6 Address').should('be.visible');
ui.toggle
.find()
.should('have.attr', 'data-qa-toggle', 'true')
.should('be.visible');
// Add some IPv4s and an IPv6
- cy.findByPlaceholderText('0.0.0.0/0')
+ cy.findByLabelText('IPv4 Addresses or CIDRs ip-address-0')
.should('be.visible')
.click()
.type('10.0.0.0/24');
@@ -662,7 +633,7 @@ describe('LKE Cluster Creation with ACL', () => {
.should('be.visible')
.click()
.type('10.0.1.0/24');
- cy.findByPlaceholderText('::/0')
+ cy.findByLabelText('IPv6 Addresses or CIDRs ip-address-0')
.should('be.visible')
.click()
.type('8e61:f9e9:8d40:6e0a:cbff:c97a:2692:827e');
@@ -763,7 +734,7 @@ describe('LKE Cluster Creation with ACL', () => {
.click();
// Confirm ACL IPv4 validation works as expected
- cy.findByPlaceholderText('0.0.0.0/0')
+ cy.findByLabelText('IPv4 Addresses or CIDRs ip-address-0')
.should('be.visible')
.click()
.type('invalid ip');
@@ -771,7 +742,7 @@ describe('LKE Cluster Creation with ACL', () => {
cy.contains('Control Plane ACL').should('be.visible').click();
cy.contains('Must be a valid IPv4 address.').should('be.visible');
// enter valid IP
- cy.findByPlaceholderText('0.0.0.0/0')
+ cy.findByLabelText('IPv4 Addresses or CIDRs ip-address-0')
.should('be.visible')
.click()
.clear()
@@ -781,7 +752,7 @@ describe('LKE Cluster Creation with ACL', () => {
cy.contains('Must be a valid IPv4 address.').should('not.exist');
// Confirm ACL IPv6 validation works as expected
- cy.findByPlaceholderText('::/0')
+ cy.findByLabelText('IPv6 Addresses or CIDRs ip-address-0')
.should('be.visible')
.click()
.type('invalid ip');
@@ -789,7 +760,7 @@ describe('LKE Cluster Creation with ACL', () => {
cy.contains('Control Plane ACL').should('be.visible').click();
cy.contains('Must be a valid IPv6 address.').should('be.visible');
// enter valid IP
- cy.findByPlaceholderText('::/0')
+ cy.findByLabelText('IPv6 Addresses or CIDRs ip-address-0')
.should('be.visible')
.click()
.clear()
diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
index 85de03b7b2d..7c20f14834f 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts
@@ -1436,16 +1436,8 @@ describe('LKE ACL updates', () => {
.should('be.visible')
.should('not.be.enabled');
- cy.contains(
- "Control Plane ACL secures network access to your LKE cluster's control plane. Use this form to enable or disable the ACL on your LKE cluster, update the list of allowed IP addresses, and adjust other settings."
- ).should('be.visible');
-
- // confirm Activation Status section and toggle on 'Enable'
+ // Enable ACL
cy.contains('Activation Status').should('be.visible');
- cy.contains(
- 'Enable or disable the Control Plane ACL. If the ACL is not enabled, any public IP address can be used to access your control plane. Once enabled, all network access is denied except for the IP addresses and CIDR ranges defined on the ACL.'
- ).should('be.visible');
- cy.findByText('Enable Control Plane ACL');
ui.toggle
.find()
.should('have.attr', 'data-qa-toggle', 'false')
@@ -1458,39 +1450,19 @@ describe('LKE ACL updates', () => {
.should('be.visible')
.should('be.enabled');
- // confirm Revision ID section and edit Revision ID
- cy.findAllByText('Revision ID').should('have.length', 2);
- cy.contains(
- 'A unique identifying string for this particular revision to the ACL, used by clients to track events related to ACL update requests and enforcement. This defaults to a randomly generated string but can be edited if you prefer to specify your own string to use for tracking this change.'
- ).should('be.visible');
+ // Edit Revision ID
cy.findByLabelText('Revision ID').should(
'have.value',
mockACLOptions['revision-id']
);
cy.findByLabelText('Revision ID').clear().type(mockRevisionId);
- // confirm Addresses section
- cy.findByText('Addresses').should('be.visible');
- cy.findByText(
- "A list of allowed IPv4 and IPv6 addresses and CIDR ranges. This cluster's control plane will only be accessible from IP addresses within this list."
- ).should('be.visible');
- cy.findByText('IPv4 Addresses or CIDRs').should('be.visible');
- cy.findByText('Add IPv4 Address')
- .should('be.visible')
- .should('be.enabled');
- // confirm current IPv4 value and enter new IP
+ // Addresses section: confirm current IPv4 value and enter new IP
cy.findByDisplayValue('10.0.3.0/24')
.should('be.visible')
.click()
.clear()
.type('10.0.0.0/24');
- cy.findByText('IPv6 Addresses or CIDRs').should('be.visible');
- cy.findByLabelText('IPv6 Addresses or CIDRs ip-address-0').should(
- 'be.visible'
- );
- cy.findByText('Add IPv6 Address')
- .should('be.visible')
- .should('be.enabled');
// submit
ui.button
@@ -1662,16 +1634,8 @@ describe('LKE ACL updates', () => {
.should('be.visible')
.should('not.be.enabled');
- cy.contains(
- "Control Plane ACL secures network access to your LKE cluster's control plane. Use this form to enable or disable the ACL on your LKE cluster, update the list of allowed IP addresses, and adjust other settings."
- ).should('be.visible');
-
- // confirm Activation Status section and toggle off 'Enable'
+ // Activation Status section: toggle off 'Enable'
cy.contains('Activation Status').should('be.visible');
- cy.contains(
- 'Enable or disable the Control Plane ACL. If the ACL is not enabled, any public IP address can be used to access your control plane. Once enabled, all network access is denied except for the IP addresses and CIDR ranges defined on the ACL.'
- ).should('be.visible');
- cy.findByText('Enable Control Plane ACL');
ui.toggle
.find()
.should('have.attr', 'data-qa-toggle', 'true')
@@ -1684,23 +1648,13 @@ describe('LKE ACL updates', () => {
.should('be.visible')
.should('be.enabled');
- // confirm Revision ID section exists
- cy.findAllByText('Revision ID').should('have.length', 2);
- cy.contains(
- 'A unique identifying string for this particular revision to the ACL, used by clients to track events related to ACL update requests and enforcement. This defaults to a randomly generated string but can be edited if you prefer to specify your own string to use for tracking this change.'
- ).should('be.visible');
+ // confirm Revision ID section
cy.findByLabelText('Revision ID').should(
'have.value',
mockACLOptions['revision-id']
);
- // confirm Addresses section
- cy.findByText('Addresses').should('be.visible');
- cy.findByText(
- "A list of allowed IPv4 and IPv6 addresses and CIDR ranges. This cluster's control plane will only be accessible from IP addresses within this list."
- ).should('be.visible');
- cy.findByText('IPv4 Addresses or CIDRs').should('be.visible');
- // update IPv4
+ // Addresses Section: update IPv4
cy.findByLabelText('IPv4 Addresses or CIDRs ip-address-0')
.should('be.visible')
.click()
@@ -1709,7 +1663,6 @@ describe('LKE ACL updates', () => {
.should('be.visible')
.should('be.enabled')
.click();
- cy.findByText('IPv6 Addresses or CIDRs').should('be.visible');
// update IPv6
cy.findByLabelText('IPv6 Addresses or CIDRs ip-address-0')
.should('be.visible')
@@ -1808,35 +1761,24 @@ describe('LKE ACL updates', () => {
.findByTitle('Control Plane ACL')
.should('be.visible')
.within(() => {
+ // Confirm installation notice is displayed
cy.contains(
- "Control Plane ACL secures network access to your LKE cluster's control plane. Use this form to enable or disable the ACL on your LKE cluster, update the list of allowed IP addresses, and adjust other settings."
+ 'Control Plane ACL has not yet been installed on this cluster. During installation, it may take up to 15 minutes for the access control list to be fully enforced.'
).should('be.visible');
// Confirm Activation Status section and Enable ACL
cy.contains('Activation Status').should('be.visible');
- cy.contains(
- 'Enable or disable the Control Plane ACL. If the ACL is not enabled, any public IP address can be used to access your control plane. Once enabled, all network access is denied except for the IP addresses and CIDR ranges defined on the ACL.'
- ).should('be.visible');
ui.toggle
.find()
.should('have.attr', 'data-qa-toggle', 'false')
.should('be.visible')
.click();
- // Confirm revision ID section does not exist
+ // Revision ID section does not exist
cy.contains('Revision ID').should('not.exist');
- cy.contains(
- 'A unique identifying string for this particular revision to the ACL, used by clients to track events related to ACL update requests and enforcement. This defaults to a randomly generated string but can be edited if you prefer to specify your own string to use for tracking this change.'
- ).should('not.exist');
- // Confirm Addresses section and add IP addresses
+ // Addresses section: add IP addresses
cy.findByText('Addresses').should('be.visible');
- cy.findByText(
- "A list of allowed IPv4 and IPv6 addresses and CIDR ranges. This cluster's control plane will only be accessible from IP addresses within this list."
- ).should('be.visible');
- cy.findByText('IPv4 Addresses or CIDRs').should('be.visible');
- cy.findByText('IPv6 Addresses or CIDRs').should('be.visible');
-
cy.findByLabelText('IPv4 Addresses or CIDRs ip-address-0')
.should('be.visible')
.click()
@@ -1847,11 +1789,6 @@ describe('LKE ACL updates', () => {
.click()
.type('8e61:f9e9:8d40:6e0a:cbff:c97a:2692:827e');
- // Confirm installation notice is displayed
- cy.contains(
- 'Control Plane ACL has not yet been installed on this cluster. During installation, it may take up to 15 minutes for the access control list to be fully enforced.'
- ).should('be.visible');
-
// submit
ui.button
.findByTitle('Update')
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.test.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.test.tsx
new file mode 100644
index 00000000000..dc160e53c01
--- /dev/null
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.test.tsx
@@ -0,0 +1,79 @@
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { ControlPlaneACLPane } from './ControlPlaneACLPane';
+
+import type { ControlPlaneACLProps } from './ControlPlaneACLPane';
+
+const props: ControlPlaneACLProps = {
+ enableControlPlaneACL: true,
+ errorText: undefined,
+ handleIPv4Change: vi.fn(),
+ handleIPv6Change: vi.fn(),
+ ipV4Addr: [{ address: '' }],
+ ipV6Addr: [{ address: '' }],
+ setControlPlaneACL: vi.fn(),
+};
+
+describe('ControlPlaneACLPane', () => {
+ it('renders all fields when enableControlPlaneACL is true', () => {
+ const { getByText } = renderWithTheme();
+
+ expect(getByText('Control Plane ACL')).toBeVisible();
+ expect(
+ getByText(
+ 'Enable an access control list (ACL) on your LKE cluster to restrict access to your cluster’s control plane. When enabled, only the IP addresses and ranges you specify can connect to the control plane.'
+ )
+ ).toBeVisible();
+ expect(getByText('Enable Control Plane ACL')).toBeVisible();
+ expect(getByText('IPv4 Addresses or CIDRs')).toBeVisible();
+ expect(getByText('Add IPv4 Address')).toBeVisible();
+ expect(getByText('IPv6 Addresses or CIDRs')).toBeVisible();
+ expect(getByText('Add IPv6 Address')).toBeVisible();
+ });
+
+ it('hides IP fields when enableControlPlaneACL is false', () => {
+ const { getByText, queryByText } = renderWithTheme(
+
+ );
+
+ expect(getByText('Control Plane ACL')).toBeVisible();
+ expect(
+ getByText(
+ 'Enable an access control list (ACL) on your LKE cluster to restrict access to your cluster’s control plane. When enabled, only the IP addresses and ranges you specify can connect to the control plane.'
+ )
+ ).toBeVisible();
+ expect(getByText('Enable Control Plane ACL')).toBeVisible();
+ expect(queryByText('IPv4 Addresses or CIDRs')).not.toBeInTheDocument();
+ expect(queryByText('Add IPv4 Address')).not.toBeInTheDocument();
+ expect(queryByText('IPv6 Addresses or CIDRs')).not.toBeInTheDocument();
+ expect(queryByText('Add IPv6 Address')).not.toBeInTheDocument();
+ });
+
+ it('calls setControlPlaneACL when clicking the toggle', async () => {
+ const { getByText } = renderWithTheme();
+
+ const toggle = getByText('Enable Control Plane ACL');
+ await userEvent.click(toggle);
+
+ expect(props.setControlPlaneACL).toHaveBeenCalled();
+ });
+
+ it('handles IP changes', async () => {
+ const { getByLabelText } = renderWithTheme(
+
+ );
+
+ const ipv4 = getByLabelText('IPv4 Addresses or CIDRs ip-address-0');
+ await userEvent.type(ipv4, 'test');
+
+ expect(props.handleIPv4Change).toHaveBeenCalled();
+
+ const ipv6 = getByLabelText('IPv6 Addresses or CIDRs ip-address-0');
+ await userEvent.type(ipv6, 'test');
+
+ expect(props.handleIPv6Change).toHaveBeenCalled();
+ });
+});
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.test.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.test.tsx
new file mode 100644
index 00000000000..810b3929640
--- /dev/null
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.test.tsx
@@ -0,0 +1,133 @@
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { KubeControlPlaneACLDrawer } from './KubeControlPaneACLDrawer';
+
+import type { KubeControlPlaneACLDrawerProps } from './KubeControlPaneACLDrawer';
+
+const props: KubeControlPlaneACLDrawerProps = {
+ closeDrawer: vi.fn(),
+ clusterId: 1,
+ clusterLabel: 'Test',
+ clusterMigrated: true,
+ open: true,
+ showControlPlaneACL: true,
+};
+
+const queryMocks = vi.hoisted(() => ({
+ useKubernetesControlPlaneACLQuery: vi.fn().mockReturnValue({
+ data: {
+ acl: {
+ addresses: {
+ ipv4: [''],
+ ipv6: [''],
+ },
+ enabled: false,
+ 'revision-id': '',
+ },
+ },
+ }),
+}));
+
+vi.mock('src/queries/kubernetes', async () => {
+ const actual = await vi.importActual('src/queries/kubernetes');
+ return {
+ ...actual,
+ useKubernetesControlPlaneACLQuery:
+ queryMocks.useKubernetesControlPlaneACLQuery,
+ };
+});
+
+describe('KubeControlPaneACLDrawer', () => {
+ it('renders the drawer as expected when the cluster is migrated', async () => {
+ const { getAllByText, getByText, queryByText } = renderWithTheme(
+
+ );
+
+ expect(getByText('Control Plane ACL')).toBeVisible();
+ expect(
+ getByText(
+ "Control Plane ACL secures network access to your LKE cluster's control plane. Use this form to enable or disable the ACL on your LKE cluster, update the list of allowed IP addresses, and adjust other settings."
+ )
+ ).toBeVisible();
+
+ // Activation Status section
+ expect(getByText('Activation Status')).toBeVisible();
+ expect(
+ getByText(
+ 'Enable or disable the Control Plane ACL. If the ACL is not enabled, any public IP address can be used to access your control plane. Once enabled, all network access is denied except for the IP addresses and CIDR ranges defined on the ACL.'
+ )
+ ).toBeVisible();
+ expect(getByText('Enable Control Plane ACL')).toBeVisible();
+
+ // Revision ID section
+ expect(getAllByText('Revision ID').length).toEqual(2);
+ expect(
+ getByText(
+ 'A unique identifying string for this particular revision to the ACL, used by clients to track events related to ACL update requests and enforcement. This defaults to a randomly generated string but can be edited if you prefer to specify your own string to use for tracking this change.'
+ )
+ ).toBeVisible();
+
+ // Addresses section
+ expect(getByText('Addresses')).toBeVisible();
+ expect(
+ getByText(
+ "A list of allowed IPv4 and IPv6 addresses and CIDR ranges. This cluster's control plane will only be accessible from IP addresses within this list."
+ )
+ ).toBeVisible();
+ expect(getByText('IPv4 Addresses or CIDRs')).toBeVisible();
+ expect(getByText('Add IPv4 Address')).toBeVisible();
+ expect(getByText('IPv6 Addresses or CIDRs')).toBeVisible();
+ expect(getByText('Add IPv6 Address')).toBeVisible();
+
+ // Confirm notice does not display
+ expect(
+ queryByText(
+ 'Control Plane ACL has not yet been installed on this cluster. During installation, it may take up to 15 minutes for the access control list to be fully enforced.'
+ )
+ ).not.toBeInTheDocument();
+ });
+
+ it('shows a notice and hides revision ID if cluster is not migrated', () => {
+ const { getByText, queryByText } = renderWithTheme(
+
+ );
+
+ // Confirm notice displays
+ expect(
+ getByText(
+ 'Control Plane ACL has not yet been installed on this cluster. During installation, it may take up to 15 minutes for the access control list to be fully enforced.'
+ )
+ ).toBeVisible();
+
+ // Confirm Revision ID section doesn't display
+ expect(queryByText('Revision ID')).not.toBeInTheDocument();
+ expect(
+ queryByText(
+ 'A unique identifying string for this particular revision to the ACL, used by clients to track events related to ACL update requests and enforcement. This defaults to a randomly generated string but can be edited if you prefer to specify your own string to use for tracking this change.'
+ )
+ ).not.toBeInTheDocument();
+
+ // Confirm other sections still exist
+ expect(getByText('Activation Status')).toBeVisible();
+ expect(getByText('Enable Control Plane ACL')).toBeVisible();
+ expect(getByText('Addresses')).toBeVisible();
+ expect(getByText('IPv4 Addresses or CIDRs')).toBeVisible();
+ expect(getByText('Add IPv4 Address')).toBeVisible();
+ expect(getByText('IPv6 Addresses or CIDRs')).toBeVisible();
+ expect(getByText('Add IPv6 Address')).toBeVisible();
+ });
+
+ it('closes the drawer', async () => {
+ const { getByText } = renderWithTheme(
+
+ );
+
+ const cancel = getByText('Cancel');
+ await userEvent.click(cancel);
+
+ expect(props.closeDrawer).toHaveBeenCalled();
+ });
+});
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx
index 49522dc4d39..841e1d36ca6 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx
@@ -20,11 +20,12 @@ import {
useKubernetesControlPlaneACLMutation,
useKubernetesControlPlaneACLQuery,
} from 'src/queries/kubernetes';
+import { omittedProps } from 'src/utilities/omittedProps';
import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
import type { KubernetesControlPlaneACLPayload } from '@linode/api-v4';
-interface Props {
+export interface KubeControlPlaneACLDrawerProps {
closeDrawer: () => void;
clusterId: number;
clusterLabel: string;
@@ -33,7 +34,9 @@ interface Props {
showControlPlaneACL: boolean;
}
-export const KubeControlPlaneACLDrawer = (props: Props) => {
+export const KubeControlPlaneACLDrawer = (
+ props: KubeControlPlaneACLDrawerProps
+) => {
const formContainerRef = React.useRef(null);
const {
closeDrawer,
@@ -241,8 +244,8 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
)}
Addresses
A list of allowed IPv4 and IPv6 addresses and CIDR ranges. This
@@ -307,6 +310,7 @@ export const KubeControlPlaneACLDrawer = (props: Props) => {
const StyledTypography = styled(Typography, {
label: 'StyledTypography',
+ shouldForwardProp: omittedProps(['topMargin']),
})<{ topMargin?: boolean }>(({ theme, ...props }) => ({
...(props.topMargin ? { marginTop: theme.spacing(1) } : {}),
width: '90%',