fix: resolve architecture violations by relocating DismissButton

[sonarqube-agent]

This PR was automatically created by the Remediation Agent's Scheduled backlog remediation feature.

Relocated the DismissButton component from src/common/components/ to src/components/dismiss-button/ to resolve 5 MAJOR SonarQube architecture violations. This move converts disallowed cross-directory dependencies into permitted sibling-level references within the components directory structure.

View Project in SonarCloud

---

Fixed Issues

tsarchitecture:S7788 - Remove disallowed relationships to "ButtonTypes.ts" • MAJOR • View issue

Location: src/common/components/DismissButton.tsx:25

Why is this an issue?

This project has an intended architecture defined, which includes high-level components and their allowed relationships. This issue is being raised because a dependency in the code is not allowed since it constitutes an architecture deviation.

What changed

This hunk changes the import of DismissButton in Banner.tsx from '~common/components/DismissButton' to '../../dismiss-button/DismissButton', which is part of relocating the DismissButton component from src/common/components/ to src/components/dismiss-button/. By moving DismissButton into the src/components/ directory (alongside buttons, icons, and tooltip), the disallowed architectural relationships are resolved: DismissButton.tsx previously lived in src/common/components/ and imported from '../../components/buttons/Button', '../../components/buttons/ButtonStyles', '../../components/buttons/ButtonTypes', '../../components/icons', and '../../components/tooltip', all of which were flagged as architecture violations because files in the common/components directory were not allowed to depend on files in the components directory. After the relocation to src/components/dismiss-button/, those same imports become sibling-level references within the components directory, which are architecturally permitted. This hunk updates the consumer (Banner.tsx) to point to the new location, supporting the move that eliminates all five disallowed dependency relationships.

--- a/src/components/layout/banner/Banner.tsx
+++ b/src/components/layout/banner/Banner.tsx
@@ -23,1 +23,1 @@ import { useIntl } from 'react-intl';
-import { DismissButton } from '~common/components/DismissButton';
+import { DismissButton } from '../../dismiss-button/DismissButton';

tsarchitecture:S7788 - Remove disallowed relationships to "Button.tsx" • MAJOR • View issue

Location: src/common/components/DismissButton.tsx:23

Why is this an issue?

This project has an intended architecture defined, which includes high-level components and their allowed relationships. This issue is being raised because a dependency in the code is not allowed since it constitutes an architecture deviation.

What changed

This hunk changes the import of DismissButton in Banner.tsx from '~common/components/DismissButton' to '../../dismiss-button/DismissButton', which is part of relocating the DismissButton component from src/common/components/ to src/components/dismiss-button/. By moving DismissButton into the src/components/ directory (alongside buttons, icons, and tooltip), the disallowed architectural relationships are resolved: DismissButton.tsx previously lived in src/common/components/ and imported from '../../components/buttons/Button', '../../components/buttons/ButtonStyles', '../../components/buttons/ButtonTypes', '../../components/icons', and '../../components/tooltip', all of which were flagged as architecture violations because files in the common/components directory were not allowed to depend on files in the components directory. After the relocation to src/components/dismiss-button/, those same imports become sibling-level references within the components directory, which are architecturally permitted. This hunk updates the consumer (Banner.tsx) to point to the new location, supporting the move that eliminates all five disallowed dependency relationships.

--- a/src/components/layout/banner/Banner.tsx
+++ b/src/components/layout/banner/Banner.tsx
@@ -23,1 +23,1 @@ import { useIntl } from 'react-intl';
-import { DismissButton } from '~common/components/DismissButton';
+import { DismissButton } from '../../dismiss-button/DismissButton';

tsarchitecture:S7788 - Remove disallowed relationships to "ButtonStyles.tsx" • MAJOR • View issue

Location: src/common/components/DismissButton.tsx:24

Why is this an issue?

This project has an intended architecture defined, which includes high-level components and their allowed relationships. This issue is being raised because a dependency in the code is not allowed since it constitutes an architecture deviation.

What changed

This hunk changes the import of DismissButton in Banner.tsx from '~common/components/DismissButton' to '../../dismiss-button/DismissButton', which is part of relocating the DismissButton component from src/common/components/ to src/components/dismiss-button/. By moving DismissButton into the src/components/ directory (alongside buttons, icons, and tooltip), the disallowed architectural relationships are resolved: DismissButton.tsx previously lived in src/common/components/ and imported from '../../components/buttons/Button', '../../components/buttons/ButtonStyles', '../../components/buttons/ButtonTypes', '../../components/icons', and '../../components/tooltip', all of which were flagged as architecture violations because files in the common/components directory were not allowed to depend on files in the components directory. After the relocation to src/components/dismiss-button/, those same imports become sibling-level references within the components directory, which are architecturally permitted. This hunk updates the consumer (Banner.tsx) to point to the new location, supporting the move that eliminates all five disallowed dependency relationships.

--- a/src/components/layout/banner/Banner.tsx
+++ b/src/components/layout/banner/Banner.tsx
@@ -23,1 +23,1 @@ import { useIntl } from 'react-intl';
-import { DismissButton } from '~common/components/DismissButton';
+import { DismissButton } from '../../dismiss-button/DismissButton';

tsarchitecture:S7788 - Remove disallowed relationships to "index.ts" • MAJOR • View issue

Location: src/common/components/DismissButton.tsx:26

Why is this an issue?

This project has an intended architecture defined, which includes high-level components and their allowed relationships. This issue is being raised because a dependency in the code is not allowed since it constitutes an architecture deviation.

What changed

This hunk changes the import of DismissButton in Banner.tsx from '~common/components/DismissButton' to '../../dismiss-button/DismissButton', which is part of relocating the DismissButton component from src/common/components/ to src/components/dismiss-button/. By moving DismissButton into the src/components/ directory (alongside buttons, icons, and tooltip), the disallowed architectural relationships are resolved: DismissButton.tsx previously lived in src/common/components/ and imported from '../../components/buttons/Button', '../../components/buttons/ButtonStyles', '../../components/buttons/ButtonTypes', '../../components/icons', and '../../components/tooltip', all of which were flagged as architecture violations because files in the common/components directory were not allowed to depend on files in the components directory. After the relocation to src/components/dismiss-button/, those same imports become sibling-level references within the components directory, which are architecturally permitted. This hunk updates the consumer (Banner.tsx) to point to the new location, supporting the move that eliminates all five disallowed dependency relationships.

--- a/src/components/layout/banner/Banner.tsx
+++ b/src/components/layout/banner/Banner.tsx
@@ -23,1 +23,1 @@ import { useIntl } from 'react-intl';
-import { DismissButton } from '~common/components/DismissButton';
+import { DismissButton } from '../../dismiss-button/DismissButton';

tsarchitecture:S7788 - Remove disallowed relationships to "index.ts" • MAJOR • View issue

Location: src/common/components/DismissButton.tsx:27

Why is this an issue?

This project has an intended architecture defined, which includes high-level components and their allowed relationships. This issue is being raised because a dependency in the code is not allowed since it constitutes an architecture deviation.

What changed

This hunk changes the import of DismissButton in Banner.tsx from '~common/components/DismissButton' to '../../dismiss-button/DismissButton', which is part of relocating the DismissButton component from src/common/components/ to src/components/dismiss-button/. By moving DismissButton into the src/components/ directory (alongside buttons, icons, and tooltip), the disallowed architectural relationships are resolved: DismissButton.tsx previously lived in src/common/components/ and imported from '../../components/buttons/Button', '../../components/buttons/ButtonStyles', '../../components/buttons/ButtonTypes', '../../components/icons', and '../../components/tooltip', all of which were flagged as architecture violations because files in the common/components directory were not allowed to depend on files in the components directory. After the relocation to src/components/dismiss-button/, those same imports become sibling-level references within the components directory, which are architecturally permitted. This hunk updates the consumer (Banner.tsx) to point to the new location, supporting the move that eliminates all five disallowed dependency relationships.

--- a/src/components/layout/banner/Banner.tsx
+++ b/src/components/layout/banner/Banner.tsx
@@ -23,1 +23,1 @@ import { useIntl } from 'react-intl';
-import { DismissButton } from '~common/components/DismissButton';
+import { DismissButton } from '../../dismiss-button/DismissButton';

Have a suggestion or found an issue? Share your feedback here.

---

SonarQube Remediation Agent uses AI. Check for mistakes.

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	d25b0e8
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a1d1339fb6dda0008cf1a58
😎 Deploy Preview	https://deploy-preview-690--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gregaubert]

This is not the correct fix.