chore: Added inline style elements to keep the view and copy btns visible when keys longer than 87 characters. by adot-7 · Pull Request #2606 · unkeyed/unkey

adot-7 · 2024-10-29T15:29:01Z

What does this PR do?

I added inline style elements to pre tag in client.tsx to keep the view and copy buttons visible even if the key is longer than 87 characters as before the key was pushing the buttons out and making them inaccessible as a result.

Before

After

Fixes # 2401

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?

Go to https://app.unkey.com/apis/[api_123]/keys/[ks_123]/new
Create a key of byte size more than 87, for example, 95.
-Notice that both view and copy buttons are visible, which previously they were not.

Checklist

Required

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
- Enhanced the display of the API key in the CreateKey component for improved readability.
Bug Fixes
- Resolved issues with text overflow in the API key display.
Documentation
- Updated styles for the API key display to enhance user experience while maintaining existing functionality.

… visible even with api keys longer than 87 characters

… visible even with api keys longer than 87 characters and did pnpm build and pnpm fmt

changeset-bot · 2024-10-29T15:29:05Z

⚠️ No Changeset found

Latest commit: 5327325

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

CLAassistant · 2024-10-29T15:29:08Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

vercel · 2024-10-29T15:29:09Z

@akash-2004 is attempting to deploy a commit to the Unkey Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2024-10-29T15:29:11Z

📝 Walkthrough

Walkthrough

The changes in this pull request primarily focus on the CreateKey component within the new/client.tsx file. The modifications enhance the display of the API key by introducing a new CSS module for styling, specifically applying the .keyText class to the API key display. The existing functionality for managing key visibility, error handling, and form submission remains unchanged, ensuring that the component's core logic is intact while improving the visual presentation.

Changes

File Path	Change Summary
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx	Modified the `CreateKey` component to apply a new CSS class for styling the API key display while retaining existing functionality.
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/KeyDisplay.module.css	Introduced a new CSS class `.keyText` to control text display properties, preventing text wrapping and managing overflow.

Possibly related PRs

feat: Show keyId after creating a new key #2107: This PR enhances the user interface for displaying API key information in the CreateKey component, which is directly related to the changes made in the new/client.tsx file of the main PR, as both involve modifications to the API key display.
fix: make keys UI responsive to mobile devices #2145: This PR focuses on making the keys UI responsive to mobile devices, which may relate to the overall presentation of the API key display in the main PR, especially considering the styling changes made.
fix: Enhance API Key Detail Page: Change Permissions Visualization to Tree Format #2238: This PR enhances the API Key Detail Page by changing the permissions visualization, which could be relevant as it also deals with the display of API key-related information, albeit in a different context.
Bug Fix: Improved full-width layout and text truncation to prevent overlap with button #2374: This PR addresses layout issues in the RolesPage component, which may relate to the overall UI improvements and text presentation in the API key display context of the main PR.

Suggested labels

Bug, 🕹️ oss.gg, :joystick: 150 points

Suggested reviewers

mcstepp
chronark
perkinsjr

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 1ef7cf1 and 5327325.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/KeyDisplay.module.css (1 hunks)
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx (2 hunks)

✅ Files skipped from review due to trivial changes (1)

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/KeyDisplay.module.css

🚧 Files skipped from review as they are similar to previous changes (1)

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 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.
- Generate unit testing code for this file.
- 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 generate unit testing code for this file.
- @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 generate unit testing code.
- @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.

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 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 · 2024-10-29T15:29:15Z

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

vercel · 2024-10-29T15:31:12Z

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

Name	Status	Preview	Comments	Updated (UTC)
engineering	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 29, 2024 5:50pm

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 7322cef and 1ef7cf1.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (1)

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx (1 hunks)

🔇 Additional comments (1)

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx (1)

288-298: LGTM! The styling changes effectively handle long keys.

The implementation successfully prevents the view and copy buttons from being pushed out of view when keys are longer than 87 characters by properly handling text overflow.

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx

…e view and copy btns always visible even with long api key

adot-7 · 2024-10-29T17:49:58Z

I have added the KeyDisplay.module.css file and removed inline styling as suggested by the bot above.

adot-7 · 2024-10-30T09:27:19Z

@chronark Would it be possible to get this merged? Actually this is my first time contributing and I am participating in the hacktoberfest.

chronark · 2024-10-30T11:06:38Z

we're not going to accept non-tailwind solutions for this, as it adds too much techdebt for such a simple fix

adot-7 · 2024-10-30T16:22:37Z

@chronark I will add tailwind solution then

adot-7 added 2 commits October 29, 2024 20:02

chore: Added inline style modification to keep the view and copy btns…

0a5868e

… visible even with api keys longer than 87 characters

chore: Added inline style modification to keep the view and copy btns…

381c3dd

… visible even with api keys longer than 87 characters and did pnpm build and pnpm fmt

adot-7 requested review from MichaelUnkey, chronark, mcstepp and perkinsjr as code owners October 29, 2024 15:29

vercel bot deployed to Preview – engineering October 29, 2024 15:32 View deployment

coderabbitai bot reviewed Oct 29, 2024

View reviewed changes

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx Outdated Show resolved Hide resolved

chore: Added KeyDisplay.module.css to style the <pre> tag to make sur…

1e9bf70

…e view and copy btns always visible even with long api key

adot-7 force-pushed the fix/view-copy-icon-missing-when-api-key-long branch from 1ef7cf1 to 1e9bf70 Compare October 29, 2024 17:48

Merge branch 'main' into fix/view-copy-icon-missing-when-api-key-long

5327325

vercel bot deployed to Preview – engineering October 29, 2024 17:50 View deployment

chronark closed this Oct 30, 2024

Conversation

adot-7 commented Oct 29, 2024 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Before

After

Type of change

How should this be tested?

Checklist

Required

Appreciated

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

CLAassistant commented Oct 29, 2024

Uh oh!

vercel bot commented Oct 29, 2024

Uh oh!

coderabbitai bot commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Possibly related PRs

Suggested labels

Suggested reviewers

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

github-actions bot commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

adot-7 commented Oct 29, 2024

Uh oh!

adot-7 commented Oct 30, 2024

Uh oh!

chronark commented Oct 30, 2024

Uh oh!

adot-7 commented Oct 30, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

adot-7 commented Oct 29, 2024 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Oct 29, 2024 •

edited

Loading

coderabbitai bot commented Oct 29, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

github-actions bot commented Oct 29, 2024 •

edited

Loading

vercel bot commented Oct 29, 2024 •

edited

Loading