fix: add create for partial matches

[ogzhanolguncu]

What does this PR do?

Adds inline create button for partially matches identities(External IDs)

Fixes #3248

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How should this be tested?

• Create identity through our dialog, then type partially matching external Id and verify that new create button is there.

Checklist

Required

• Filled out the "How to test" section in this PR
• Read Contributing Guide
• Self-reviewed my own code
• Commented on my code in hard-to-understand areas
• Ran pnpm build
• Ran pnpm fmt
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Unkey Docs if changes were necessary

Summary by CodeRabbit

• New Features

  • Improved identity selection dropdown with real-time filtering based on search input.
  • Added the ability to create a new identity directly from the dropdown when no exact match is found.
  • Enhanced empty state messaging with prompts and actions for creating new identities.

• Bug Fixes

  • Refined dropdown behavior to prevent duplicate or irrelevant options when searching for identities.

[linear]

ENG-1792 Add button to create new issue even if it partially matches existing one

[changeset-bot]

⚠️ No Changeset found

Latest commit: 33dda85

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 13, 2025 1:13pm
engineering	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 13, 2025 1:13pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The ExternalIdField component was updated to filter identity options based on the search input, detect exact and partial matches, and provide a "Create" option when only partial matches exist. The empty state messaging and selection handling logic were enhanced to support creating new identities even with partial matches.

Changes

Files	Change Summary
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/external-id-field.tsx	Refactored identity filtering to support partial and exact matches, added "Create" option, improved empty state messaging, and updated selection logic.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ExternalIdField
    participant IdentitiesList
    participant CreateIdentityMutation

    User->>ExternalIdField: Types in search input
    ExternalIdField->>IdentitiesList: Filter identities by search input
    alt Exact match exists
        ExternalIdField->>User: Show matching identities
    else Partial matches only
        ExternalIdField->>User: Show partial matches + "Create" option
        User->>ExternalIdField: Selects "Create" option
        ExternalIdField->>CreateIdentityMutation: Trigger create mutation with input
        CreateIdentityMutation-->>ExternalIdField: Return new identity
        ExternalIdField->>User: Update selection with new identity
    end
    alt No matches and input non-empty
        ExternalIdField->>User: Show warning and create prompt
    end

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Add button to create new issue even if it partially matches existing one (#3248)	✅

Suggested reviewers

• perkinsjr
• mcstepp

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dc052cf and 33dda85.

📒 Files selected for processing (1)

• apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/external-id-field.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (11)

• GitHub Check: Test Packages / Test ./packages/cache
• GitHub Check: Test Packages / Test ./packages/hono
• GitHub Check: Test Packages / Test ./apps/dashboard
• GitHub Check: Test Packages / Test ./internal/clickhouse
• GitHub Check: Test Packages / Test ./packages/nextjs
• GitHub Check: Test Packages / Test ./internal/encryption
• GitHub Check: Test Packages / Test ./packages/api
• GitHub Check: Test Packages / Test ./internal/id
• GitHub Check: Test Packages / Test ./internal/keys
• GitHub Check: autofix
• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (8)

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/external-id-field.tsx (8)

39-41: Good implementation of exact match detection.

The case-insensitive comparison with trimming of whitespace provides a reliable way to identify exact matches in the identity list, improving user experience.

---

43-47: Clean implementation of filtered results.

The filtering logic is well implemented, showing only identities that contain the search string while maintaining the full list when the search field is empty.

---

49-50: Simple but effective check for partial matches.

This flag is used effectively to control when to show the create option.

---

51-56: Good reuse of existing utility function.

Using the filtered identities with the existing createIdentityOptions function maintains consistency and reduces code duplication.

---

58-83: Well-implemented create option with clear visual distinction.

The create option implementation is well thought out, with:

• Appropriate conditional rendering (only when there's a search value, no exact match, but partial matches exist)
• Clear visual indicators (warning icon)
• Descriptive text that includes the value being created
• A special value identifier for selection handling

This is a key component of the enhancement and provides a good user experience.

---

95-98: Correct handling of the special create option.

The selection handler properly detects and processes the create action before falling back to the existing identity selection logic.

---

109-151: Comprehensive empty state UI for identity creation.

The empty state UI is well-designed with:

• Clear conditional rendering based on search state
• Appropriate warning icon and message
• Helpful explanatory text
• A prominent create button with proper loading and disabled states

This provides a good user experience when no matches are found.

---

39-151:

Details

❓ Verification inconclusive

Verify accessibility of the create option UI elements.

While the implementation looks good functionally, ensure that the UI elements are accessible, including proper contrast ratios and keyboard navigation.

---

🌐 Web query:

What are the WCAG requirements for warning elements and contrast ratios for text on colored backgrounds?

💡 Result:

WCAG Requirements for Warning Elements and Contrast Ratios

Warning elements—such as error messages, alerts, or system notifications—often use colored backgrounds and are critical for accessibility. Ensuring these elements meet appropriate contrast ratios is vital for users with visual impairments, including color blindness and low vision.

Minimum Contrast Ratio Requirements

WCAG 2.1 and 2.2 specify minimum contrast ratios for text and images of text to ensure readability:

• Normal (Small) Text:
  The contrast ratio between text and its background must be at least 4.5:1[5][6][7][9][10].

• Large Text:
  For text that is considered "large" (defined as 18pt or 24px or larger, or 14pt/19px bold or larger), the minimum contrast ratio is 3:1[6][7][9][10].

These requirements apply to:

• All visible text, including within warning banners, error messages, and status alerts.
• Text within images (e.g., text rendered as part of an icon or SVG)[5][6].

Special Considerations for Warning Elements

• Non-Text Contrast (UI Components):
  For interactive or graphical interface elements (like icons that accompany warning messages), a contrast ratio of at least 3:1 is required between the essential graphic and its adjacent colors[7].

• Status Messages (WCAG 2.1+):
  If a warning or status message is visually presented without moving focus, it must be programmatically annunciated (typically using live regions such as aria-live), so users of assistive technologies are notified[3].

Levels of Conformance

Text Type	WCAG AA Minimum Ratio	WCAG AAA Enhanced Ratio
Normal (body) text	4.5 : 1	7 : 1
Large text (18pt/24px or bold)	3 : 1	4.5 : 1
Non-text UI components/graphics	3 : 1*	Not defined

*For non-text contrast (UI elements, icons): Applies to essential graphics, not decorative elements[7].

Examples

• White text on a yellow warning background often fails the 4.5:1 contrast requirement.
• Black text on a yellow background usually passes (e.g. #000000 on #FFFF00 is 19.56:1)[9].
• Red text on yellow or green text on red commonly fails due to insufficient luminance difference[5][9].

Tips for Designers

• Avoid relying solely on color to convey warning messages.
• Use tools such as the WebAIM Color Contrast Checker or browser accessibility inspectors to verify compliance[7][9].
• Always test warning elements in realistic contexts—considering overlays, shadows, and surrounding content.

Summary

All visible text in warning elements—regardless of their background color—must have:

• Contrast ratio of at least 4.5:1 for normal-size text.
• At least 3:1 for large text.
• Applicable to both static and dynamic warning components.
• Additionally, warning messages should be accessible to screen readers, not just visually apparent[3].

These requirements are outlined in the following WCAG Success Criteria:

• 1.4.3: Contrast (Minimum)
• 1.4.11: Non-text Contrast (for graphical objects)
• 4.1.3: Status Messages (for live region announcements)[7][3].

Meeting these standards ensures warning elements are accessible to all users, regardless of vision or device.

Citations:

• 1: https://www.w3.org/TR/WCAG21/
• 2: https://www.w3.org/TR/WCAG20/
• 3: https://webaim.org/standards/wcag/checklist
• 4: https://digital.va.gov/section-508/checklists/web-content-accessibility/
• 5: https://webaim.org/articles/contrast/
• 6: https://www.accessibilitychecker.org/wcag-guides/ensure-the-contrast-between-foreground-and-background-colors-meets-wcag-2-aa-minimum-contrast-ratio-thresholds/
• 7: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast
• 8: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG
• 9: https://dequeuniversity.com/tips/color-contrast
• 10: https://www.sitelint.com/docs/accessibility/the-contrast-ratio-should-be-at-least-451-for-normal-text-and-31-for-large-text-against-a-background

---

Verify WCAG Contrast and Keyboard Accessibility for Create Option

Please double-check that all warning UI elements comply with WCAG 2.1 AA:

• Contrast

  • Ensure the warning icon’s container (bg-warningA-4 / text-warning-11) meets at least 4.5:1 contrast for text and 3:1 for non-text graphics (WCAG 1.4.3 & 1.4.11).
  • Verify that the “Create” label (text-accent-10) on its background also passes 4.5:1.

• Keyboard Navigation

  • Confirm that the dynamic “Create ‘…’” option in the combobox is focusable via Tab/arrow keys and actionable via Enter/Space.
  • Check the “Create” button in the empty-state message is reachable and operable without a mouse.

• Screen-Reader Announcements

  • Make sure status changes (e.g., “External ID not found” and the create prompt) are programmatically exposed—e.g. wrap the emptyMessage in a live region (aria-live="polite" or role="alert") so assistive technologies announce it.

Locations to review:

• apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/external-id-field.tsx (lines 39–151)

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏