Analysis of commit 2121254

Assignee: @copilot

Summary

Four control components in code/addons/docs/src/blocks/controls/ contain a near-identical ~12-line JSX block that renders a "Set X" button when the control value is undefined. This duplication was introduced/reinforced by PR #34021 (adding storyId to IDs for uniqueness). Extracting this into a shared component would reduce repetition and make future changes to the button's appearance or accessibility attributes easier to maintain consistently.

Duplication Details

Pattern: Undefined-value fallback "Set X" button

• Severity: Medium
• Occurrences: 4
• Locations:
  • code/addons/docs/src/blocks/controls/Boolean.tsx (lines 128–141)
  • code/addons/docs/src/blocks/controls/Number.tsx (lines 100–113)
  • code/addons/docs/src/blocks/controls/Object.tsx (lines 206–217)
  • code/addons/docs/src/blocks/controls/Text.tsx (lines 46–58)
• Code Sample (Boolean.tsx):

if (value === undefined) {
  return (
    (Button
      ariaLabel={false}
      variant="outline"
      size="medium"
      id={getControlSetterButtonId(name, storyId)}
      onClick={onSetFalse}
      disabled={readonly}
    )
      Set boolean
    (/Button)
  );
}

Each occurrence is identical in structure; only the onClick handler and the label text (Set boolean, Set string, Set number, Set object) differ.

Impact Analysis

• Maintainability: Any change to the button's styling, variant, size, or ARIA attributes must be replicated in four places, making omissions likely.
• Bug Risk: Inconsistent fixes—e.g., if one component's button gets updated for an accessibility fix but the others don't.
• Code Bloat: ~48 lines of nearly identical JSX spread across four files.

Refactoring Recommendations

1. Extract a shared SetValueButton component
   • Create: code/addons/docs/src/blocks/controls/SetValueButton.tsx
   • Props: name: string, storyId?: string, label: string, onClick: () => void, disabled?: boolean
   • Implementation:

     export const SetValueButton: FC(SetValueButtonProps) = ({ name, storyId, label, onClick, disabled }) => (
       (Button
         ariaLabel={false}
         variant="outline"
         size="medium"
         id={getControlSetterButtonId(name, storyId)}
         onClick={onClick}
         disabled={disabled}
       )
         {label}
       (/Button)
     );

   • Estimated effort: 1–2 hours
   • Benefits: Single point of change for button styling/accessibility; eliminates ~36 lines of duplication

Implementation Checklist

• Review duplication findings
• Create SetValueButton component
• Replace the 4 duplicated blocks with calls to SetValueButton
• Run existing tests to verify no regression
• Verify no functionality broken

Analysis Metadata

• Analyzed Files: 18 changed .ts/.tsx files from PR Docs: Ensure unique control id attributes across multiple Controls blocks #34021
• Detection Method: Semantic code analysis
• Commit: 2121254105b5d20331b811ec080b17354e02b2f1
• Analysis Date: 2026-03-19

Generated by Duplicate Code Detector · ◷

To install this agentic workflow, run

gh aw add github/gh-aw/.github/workflows/duplicate-code-detector.md@852cb06ad52958b402ed982b69957ffc57ca0619