Extract nested ternary operations into independent statements

[sonarqube-agent]

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

Why these issues? Selected for their MAJOR severity and straightforward mechanical transformation patterns. These issues involve extracting nested ternary logic into variables or helper functions—a well-defined refactoring with clear rules and high automation success potential, requiring minimal changes to business logic.

This PR resolves 5 SonarQube MAJOR issues by extracting nested ternary expressions into separate variables and helper functions. Nested ternary operations reduce code readability and maintainability, so extracting them into clearly-named independent statements makes the codebase easier to understand and less prone to logic errors.

View Project in SonarCloud

---

Fixed Issues

typescript:S3358 - Extract this nested ternary operation into an independent statement. • MAJOR • View issue

Location: src/components/owa/OakSaveCount/OakSaveCount.tsx:53

Why is this an issue?

Nested ternaries are hard to read and can make the order of operations complex to understand.

What changed

This hunk extracts the nested ternary expression count === 1 ? "" : "s" into a separate variable unitSuffix. By computing the pluralization suffix in an independent statement before the template literal, it eliminates the nested ternary that was flagged as hard to read. This is the first part of the fix — defining the extracted variable.

--- a/src/components/owa/OakSaveCount/OakSaveCount.tsx
+++ b/src/components/owa/OakSaveCount/OakSaveCount.tsx
@@ -51,0 +52,1 @@ export const OakSaveCount = ({
+  const unitSuffix = hasCount && count === 1 ? "" : "s";

typescript:S3358 - Extract this nested ternary operation into an independent statement. • MAJOR • View issue

Location: src/components/owa/teacher/OakUnitListItem/OakUnitListItem.tsx:140

Why is this an issue?

Nested ternaries are hard to read and can make the order of operations complex to understand.

What changed

Introduces an if/else if/else block to compute the indexBoxBackground variable, replacing the nested ternary logic that was previously inlined in two JSX locations. By pre-computing the background value using clear conditional statements, this hunk eliminates the need for nested ternary expressions in the JSX, directly addressing the 'nested ternary operation' code smell at both locations where it appeared.

--- a/src/components/owa/teacher/OakUnitListItem/OakUnitListItem.tsx
+++ b/src/components/owa/teacher/OakUnitListItem/OakUnitListItem.tsx
@@ -110,0 +111,9 @@ export const OakUnitListItem = <element extends ElementType = "a">(
+  let indexBoxBackground: "bg-neutral-stronger" | "bg-decorative3-subdued" | "bg-decorative3-main";
+  if (unavailable) {
+    indexBoxBackground = "bg-neutral-stronger";
+  } else if (isLegacy) {
+    indexBoxBackground = "bg-decorative3-subdued";
+  } else {
+    indexBoxBackground = "bg-decorative3-main";
+  }
+

typescript:S3358 - Extract this nested ternary operation into an independent statement. • MAJOR • View issue

Location: src/components/internal-components/InternalShadowIconButton/InternalShadowIconButton.tsx:164

Why is this an issue?

Nested ternaries are hard to read and can make the order of operations complex to understand.

What changed

This hunk extracts the nested ternary logic into a separate variable defaultColorFilter. The original code had a nested ternary (props.disabled ? disabledIconColor : defaultIconColor ? defaultIconColor : null) which violated the rule against nested ternary operations. By pre-computing the value using defaultIconColor || null instead of a nested ternary (defaultIconColor ? defaultIconColor : null), this hunk eliminates the nested ternary and makes the code more readable.

--- a/src/components/internal-components/InternalShadowIconButton/InternalShadowIconButton.tsx
+++ b/src/components/internal-components/InternalShadowIconButton/InternalShadowIconButton.tsx
@@ -130,0 +131,4 @@ export const InternalShadowIconButton = <C extends ElementType = "button">(
+  const defaultColorFilter = props.disabled
+    ? disabledIconColor
+    : defaultIconColor || null;
+

typescript:S3358 - Extract this nested ternary operation into an independent statement. • MAJOR • View issue

Location: src/components/owa/teacher/OakUnitListItem/OakUnitListItem.tsx:227

Why is this an issue?

Nested ternaries are hard to read and can make the order of operations complex to understand.

What changed

Introduces an if/else if/else block to compute the indexBoxBackground variable, replacing the nested ternary logic that was previously inlined in two JSX locations. By pre-computing the background value using clear conditional statements, this hunk eliminates the need for nested ternary expressions in the JSX, directly addressing the 'nested ternary operation' code smell at both locations where it appeared.

--- a/src/components/owa/teacher/OakUnitListItem/OakUnitListItem.tsx
+++ b/src/components/owa/teacher/OakUnitListItem/OakUnitListItem.tsx
@@ -110,0 +111,9 @@ export const OakUnitListItem = <element extends ElementType = "a">(
+  let indexBoxBackground: "bg-neutral-stronger" | "bg-decorative3-subdued" | "bg-decorative3-main";
+  if (unavailable) {
+    indexBoxBackground = "bg-neutral-stronger";
+  } else if (isLegacy) {
+    indexBoxBackground = "bg-decorative3-subdued";
+  } else {
+    indexBoxBackground = "bg-decorative3-main";
+  }
+

typescript:S3358 - Extract this nested ternary operation into an independent statement. • MAJOR • View issue

Location: src/components/layout-and-structure/OakGridArea/OakGridArea.tsx:85

Why is this an issue?

Nested ternaries are hard to read and can make the order of operations complex to understand.

What changed

Introduces a helper function resolveResponsiveValue that encapsulates the Array.isArray(value) ? value[index] : value logic into a single reusable function. This eliminates the need for nested ternary expressions in the calling code, where previously the array check was nested inside another ternary, violating the rule against nested ternary operations.

--- a/src/components/layout-and-structure/OakGridArea/OakGridArea.tsx
+++ b/src/components/layout-and-structure/OakGridArea/OakGridArea.tsx
@@ -69,0 +70,7 @@ const parseSpanStart = (value?: string | null) => {
+const resolveResponsiveValue = <T,>(
+  value: ResponsiveValues<T> | undefined,
+  index: number,
+): T | undefined => {
+  return Array.isArray(value) ? value[index] : value;
+};
+

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

---

SonarQube Remediation Agent uses AI. Check for mistakes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
oak-components-storybook	Ready	Preview, Comment	Jun 10, 2026 9:06am