From 0e818c54ad7399a25269f0319d8a27b8f5c4fdd6 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Wed, 11 Jun 2025 14:07:24 +0200 Subject: [PATCH] chore: fix weird button styling (#10113) --- .../CreateApiToken/CreateApiToken.test.tsx | 4 +- .../CreateApiTokenButton.test.tsx | 2 +- .../PermissionButton/PermissionButton.tsx | 34 +++++++----- .../CreateEnvironment.test.tsx | 2 +- .../FeatureOverviewEnvironment.test.tsx | 2 +- .../FeatureTypeForm/FeatureTypeForm.test.tsx | 10 +++- .../CreateProjectDialog.test.tsx | 2 +- .../project/Project/Import/Import.test.tsx | 2 +- .../project/ProjectList/ProjectList.test.tsx | 4 +- .../__snapshots__/TagTypeList.test.tsx.snap | 52 +++++++++---------- 10 files changed, 62 insertions(+), 52 deletions(-) diff --git a/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.test.tsx b/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.test.tsx index 688f8bb057..cf901b9419 100644 --- a/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.test.tsx +++ b/frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.test.tsx @@ -41,7 +41,7 @@ test('Enabled new token button when limits, version and permission allow for it' await waitFor(async () => { const button = await screen.findByText('Create token'); - expect(button).not.toBeDisabled(); + expect(button).not.toHaveAttribute('aria-disabled'); }); }); @@ -54,5 +54,5 @@ test('Token limit reached', async () => { await screen.findByText('You have reached the limit for API tokens'); const button = await screen.findByText('Create token'); - expect(button).toBeDisabled(); + expect(button).toHaveAttribute('aria-disabled', 'true'); }); diff --git a/frontend/src/component/common/ApiTokenTable/CreateApiTokenButton/CreateApiTokenButton.test.tsx b/frontend/src/component/common/ApiTokenTable/CreateApiTokenButton/CreateApiTokenButton.test.tsx index f409f9108f..dc6df4aff0 100644 --- a/frontend/src/component/common/ApiTokenTable/CreateApiTokenButton/CreateApiTokenButton.test.tsx +++ b/frontend/src/component/common/ApiTokenTable/CreateApiTokenButton/CreateApiTokenButton.test.tsx @@ -57,6 +57,6 @@ test('should not allow you to create API tokens when you have reached the limit' await waitFor(async () => { const button = await screen.findByRole('button'); - expect(button).toBeDisabled(); + expect(button).toHaveAttribute('aria-disabled', 'true'); }); }); diff --git a/frontend/src/component/common/PermissionButton/PermissionButton.tsx b/frontend/src/component/common/PermissionButton/PermissionButton.tsx index 0a73aad280..94a9ebce92 100644 --- a/frontend/src/component/common/PermissionButton/PermissionButton.tsx +++ b/frontend/src/component/common/PermissionButton/PermissionButton.tsx @@ -15,6 +15,9 @@ import { const StyledButton = styled(Button)({ justifySelf: 'start', alignSelf: 'start', + '&.Mui-disabled': { + pointerEvents: 'auto', + }, }); export interface IPermissionButtonProps extends Omit { @@ -96,10 +99,12 @@ const BasePermissionButton = React.forwardRef< environmentId, tooltipProps, hideLockIcon, + className, ...rest }, ref, ) => { + const disableButton = disabled || !access; const id = useId(); const endIcon = getEndIcon(access, rest.endIcon, hideLockIcon); @@ -109,20 +114,21 @@ const BasePermissionButton = React.forwardRef< title={formatAccessText(access, tooltipProps?.title)} arrow > - - - {children} - - + + {children} + ); }, diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.test.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.test.tsx index 4a67695ff6..3edf14b2df 100644 --- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.test.tsx +++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.test.tsx @@ -31,7 +31,7 @@ test('show limit reached info', async () => { const createButton = await screen.findByText('Create environment', { selector: 'button', }); - expect(createButton).toBeDisabled(); + expect(createButton).toHaveAttribute('aria-disabled', 'true'); }); test('show approaching limit info', async () => { diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.test.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.test.tsx index 8cd5aa6407..e30674ed52 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.test.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.test.tsx @@ -61,6 +61,6 @@ describe('FeatureOverviewEnvironment', () => { ); const button = await screen.findByText('Add strategy'); - expect(button).toBeDisabled(); + expect(button).toHaveAttribute('aria-disabled', 'true'); }); }); diff --git a/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.test.tsx b/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.test.tsx index ae2b1b690d..865efd14a6 100644 --- a/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.test.tsx +++ b/frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.test.tsx @@ -29,7 +29,10 @@ describe('FeatureTypeForm', () => { ); expect(screen.getByLabelText('Expected lifetime')).toBeDisabled(); expect(screen.getByLabelText("doesn't expire")).toBeDisabled(); - expect(screen.getByText('Save feature flag type')).toBeDisabled(); + expect(screen.getByText('Save feature flag type')).toHaveAttribute( + 'aria-disabled', + 'true', + ); }); it('should check "doesn\'t expire" when lifetime is 0', () => { @@ -87,6 +90,9 @@ describe('FeatureTypeForm', () => { loading={false} />, ); - expect(screen.getByText('Save feature flag type')).toBeDisabled(); + expect(screen.getByText('Save feature flag type')).toHaveAttribute( + 'aria-disabled', + 'true', + ); }); }); diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.test.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.test.tsx index 9b209f1a68..e4bb4ff6d5 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.test.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.test.tsx @@ -46,5 +46,5 @@ test('Project limit reached', async () => { const button = await screen.findByRole('button', { name: 'Create project', }); - expect(button).toBeDisabled(); + expect(button).toHaveAttribute('aria-disabled', 'true'); }); diff --git a/frontend/src/component/project/Project/Import/Import.test.tsx b/frontend/src/component/project/Project/Import/Import.test.tsx index 9819f51949..5444754cd9 100644 --- a/frontend/src/component/project/Project/Import/Import.test.tsx +++ b/frontend/src/component/project/Project/Import/Import.test.tsx @@ -148,5 +148,5 @@ test('Show validation errors', async () => { await screen.findByText('itemF'); const importButton = screen.getByText('Import configuration'); - expect(importButton).toBeDisabled(); + expect(importButton).toHaveAttribute('aria-disabled', 'true'); }); diff --git a/frontend/src/component/project/ProjectList/ProjectList.test.tsx b/frontend/src/component/project/ProjectList/ProjectList.test.tsx index 4c38dc9f28..936aaf1470 100644 --- a/frontend/src/component/project/ProjectList/ProjectList.test.tsx +++ b/frontend/src/component/project/ProjectList/ProjectList.test.tsx @@ -26,10 +26,10 @@ test('Enabled new project button when version and permission allow for it and li }); const button = await screen.findByText('New project'); - expect(button).toBeDisabled(); + expect(button).toHaveAttribute('aria-disabled', 'true'); await waitFor(async () => { const button = await screen.findByText('New project'); - expect(button).not.toBeDisabled(); + expect(button).not.toHaveAttribute('aria-disabled', 'true'); }); }); diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap index ca6a43b103..6b4e7ab0b6 100644 --- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap +++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap @@ -73,33 +73,31 @@ exports[`renders an empty list correctly 1`] = `
- - - +