fix: Create key to be sticky #2435

Roshansuthar1105 · 2024-10-15T10:15:07Z

What does this PR do?

This pull request implements a button component with a sticky position at the bottom of the page. The button triggers a mutation to create a new key based on the provided name and selected permissions. The changes address user experience by ensuring the button remains visible during scrolling, enhancing usability.

No specific issue is linked to this change, but it improves accessibility for users interacting with the key creation functionality. There are no additional dependencies required for this update.

Fixes #2414

This pull request does not currently address a specific issue. However, it aims to enhance the user experience by ensuring that the button for creating a new key remains accessible at the bottom of the page during scrolling.

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?

Test A: Verified that the button is sticky at the bottom of the page during scrolling.
- Steps to reproduce:
  1. Navigate to this page in the application.
  2. Scroll down to confirm that the button remains visible at the bottom of the viewport.
  3. Click the button to ensure the functionality works as intended (triggering the key mutation).

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
- The button in the settings now sticks to the bottom of the container during scrolling for improved accessibility.
Bug Fixes
- Enhanced the dialog component to reset selected permissions and key upon closure, ensuring a cleaner user experience.
Performance Improvements
- Updated performance optimizations for better efficiency in handling state management.

changeset-bot · 2024-10-15T10:15:13Z

⚠️ No Changeset found

Latest commit: 7eefaf7

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-15T10:15:14Z

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-15T10:15:15Z

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 15, 2024 10:16am

vercel · 2024-10-15T10:15:17Z

@Roshansuthar1105 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-15T10:15:17Z

📝 Walkthrough

Walkthrough

The changes in this pull request involve modifications to the Client component in client.tsx. Key updates include the addition of a className property to the Button component for improved positioning, adjustments to the useEffect hook for performance optimization, and modifications to the Dialog component's onOpenChange handler to reset states upon closing. These changes enhance the user interface and performance while maintaining the existing structure and functionality of the component.

Changes

File Path	Change Summary
apps/dashboard/app/(app)/settings/root-keys/new/client.tsx	Added `className` to `Button` for sticky positioning, updated `useEffect` for performance, modified `Dialog` handler to reset states.

Possibly related PRs

fix: Workspace Permissions overlaps with their descriptions on smaller windows #2127: This PR modifies the Client component in the same client.tsx file, making changes to the layout and styling that could be relevant to the modifications made in the main PR regarding the Client component's button positioning and overall structure.

Suggested labels

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

Suggested reviewers

mcstepp
chronark
perkinsjr

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-15T10:15:22Z

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

coderabbitai

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

apps/dashboard/app/(app)/settings/root-keys/new/client.tsx (1)
Line range hint 280-289: LGTM: Improved state management on dialog close.

The modifications to the onOpenChange handler effectively reset the component state when the dialog is closed, which is a good practice for maintaining a clean state. The navigation to "/settings/root-keys" after closing the dialog provides a smooth user experience.

For consistency, consider using the setName function to reset the name state, similar to how setSelectedPermissions is used:
  if (!v) {
    // Remove the key from memory when closing the modal
    key.reset();
    setSelectedPermissions([]);
-   setName("");
+   setName(undefined);
    router.push("/settings/root-keys");
  }
This ensures that the name state is reset to its initial value of undefined as defined in the useState hook.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between c6373b4 and 7eefaf7.

📒 Files selected for processing (1)

apps/dashboard/app/(app)/settings/root-keys/new/client.tsx (1 hunks)

🧰 Additional context used

🔇 Additional comments (2)

apps/dashboard/app/(app)/settings/root-keys/new/client.tsx (2)

263-263: LGTM: Button positioning aligns with PR objectives.

The addition of the sticky bottom-0 class to the Button component successfully implements the sticky positioning at the bottom of the page, as outlined in the PR objectives. This change enhances user experience by ensuring the button remains visible during scrolling, improving accessibility for users interacting with the key creation functionality.

Line range hint 1-391: Overall assessment: Changes effectively implement PR objectives.

The modifications in this file successfully address the PR objectives by implementing a sticky button component and improving state management. The changes enhance user experience and maintain good coding practices. The implementation aligns well with the intended functionality and contributes positively to the overall quality of the codebase.

Key points:

Sticky button positioning improves accessibility and user interaction.

Enhanced state management on dialog close ensures a clean component state.

The changes are focused and do not introduce unnecessary complexity.

Great job on these improvements!

perkinsjr · 2024-10-15T12:42:00Z

Please sign the CLA @Roshansuthar1105

perkinsjr

See my previous note.

Button Position Changed

7eefaf7

Roshansuthar1105 requested review from perkinsjr, chronark and mcstepp as code owners October 15, 2024 10:15

vercel bot deployed to Preview – engineering October 15, 2024 10:16 View deployment

coderabbitai bot reviewed Oct 15, 2024

View reviewed changes

perkinsjr self-assigned this Oct 15, 2024

perkinsjr requested changes Oct 15, 2024

View reviewed changes

perkinsjr changed the title ~~Button Position Changed~~ fix: Create key to be sticky Oct 15, 2024

chronark added the Requires CLA Waiting for a contributor to sign the CLA label Oct 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Create key to be sticky #2435

fix: Create key to be sticky #2435

Roshansuthar1105 commented Oct 15, 2024 •

edited by perkinsjr

Loading

changeset-bot bot commented Oct 15, 2024

CLAassistant commented Oct 15, 2024

vercel bot commented Oct 15, 2024 •

edited

Loading

vercel bot commented Oct 15, 2024

coderabbitai bot commented Oct 15, 2024 •

edited

Loading

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

github-actions bot commented Oct 15, 2024 •

edited

Loading

coderabbitai bot left a comment

perkinsjr commented Oct 15, 2024 •

edited

Loading

perkinsjr left a comment

fix: Create key to be sticky #2435

Are you sure you want to change the base?

fix: Create key to be sticky #2435

Conversation

Roshansuthar1105 commented Oct 15, 2024 • edited by perkinsjr Loading

What does this PR do?

Fixes #2414

Type of change

How should this be tested?

Checklist

Required

Appreciated

Summary by CodeRabbit

changeset-bot bot commented Oct 15, 2024

⚠️ No Changeset found

CLAassistant commented Oct 15, 2024

vercel bot commented Oct 15, 2024 • edited Loading

vercel bot commented Oct 15, 2024

coderabbitai bot commented Oct 15, 2024 • edited Loading

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

github-actions bot commented Oct 15, 2024 • edited Loading

coderabbitai bot left a comment

Choose a reason for hiding this comment

perkinsjr commented Oct 15, 2024 • edited Loading

perkinsjr left a comment

Choose a reason for hiding this comment

Roshansuthar1105 commented Oct 15, 2024 •

edited by perkinsjr

Loading

vercel bot commented Oct 15, 2024 •

edited

Loading

coderabbitai bot commented Oct 15, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

github-actions bot commented Oct 15, 2024 •

edited

Loading

perkinsjr commented Oct 15, 2024 •

edited

Loading