feat: add config option for pause screen links #288
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
WalkthroughThe changes add a new configuration property named Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant P as PauseScreen
participant C as AppConfig
participant G as openGithub
U->>P: Open PauseScreen
P->>C: Retrieve pauseLinks configuration
C-->>P: Return pauseLinks array with link details
P->>U: Render dynamic pause buttons
U->>P: Click on a pause button (e.g., GitHub)
alt Button type is "github"
P->>G: Invoke openGithub()
G-->>P: Process GitHub link action
else Button type is "discord"
P->>U: Process Discord action (or similar)
end
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/react/PauseScreen.tsx (1)
226-243: Implementation of dynamic pauseLinks rendering.The implementation effectively renders configurable buttons based on the pauseLinks configuration, with proper handling of different button types (discord, github, url).
Consider the following improvements:
- Type safety could be improved by replacing
any[]with more specific types- Consider extracting button rendering into a separate component for better code organization
- Adding validation for URL type buttons to ensure they have a valid URL
- const pauseLinks: any[] = [] + const pauseLinks: JSX.Element[] = [] const pauseLinksConfig = miscUiState.appConfig?.pauseLinks if (pauseLinksConfig) { for (const row of pauseLinksConfig) { - const rowButtons: any[] = [] + const rowButtons: JSX.Element[] = [] for (const button of row) { const style = { width: (204 / row.length - (row.length > 1 ? 4 : 0)) + 'px' } if (button.type === 'discord') { rowButtons.push(<DiscordButton style={style} text={button.text}/>) } else if (button.type === 'github') { rowButtons.push(<Button className="button" style={style} onClick={() => openGithub()}>{button.text ?? 'GitHub'}</Button>) - } else if (button.type === 'url' && button.text) { + } else if (button.type === 'url' && button.text && button.url) { rowButtons.push(<Button className="button" style={style} onClick={() => openURL(button.url)}>{button.text}</Button>) } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
config.json(1 hunks)src/globalState.ts(1 hunks)src/react/DiscordButton.tsx(3 hunks)src/react/PauseScreen.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (8)
config.json (1)
20-29: Looks good! Default configuration for pauseLinks properly structured.The addition of the
pauseLinksconfiguration is well-structured as an array of button rows, with each row containing button definitions. The default configuration includes GitHub and Discord buttons, which matches the PR objectives.src/globalState.ts (1)
125-125: Type definition matches the configuration structure.The type definition for
pauseLinksasArray<Array<Record<string, any>>>correctly represents the nested structure seen in the config file, allowing for rows of buttons with flexible properties.src/react/PauseScreen.tsx (2)
21-21: Import required utility for GitHub actions.Correctly importing the
openGithubutility function to handle GitHub button clicks.
258-258: Integration of dynamic links into the UI.The implementation correctly renders the dynamic pauseLinks in the pause screen UI, replacing the previous hardcoded buttons.
src/react/DiscordButton.tsx (4)
7-7: Enhanced component props for better reusability.The DiscordButton component now accepts additional optional props for customization:
text: allows customizing the button textstyle: allows applying custom stylesThis enhancement supports the new configurable pause links feature.
19-19: Properly passing props to child component.The component correctly passes the received props to the DropdownButton component, with a sensible default for the text prop.
27-27: DropdownButton component enhanced with style prop.Updated the DropdownButton component to accept and use the style prop, supporting the customization requirements of the pause links feature.
53-53: Proper application of default styles.The component correctly applies the provided style or falls back to the default style when none is provided.
|
@Phoenix616 insane! very clean, thank you so much |
User description
This adds the ability to configure the links shown in the pause screen via the
config.json. The github and Discord buttons are hardcoded for now (as they include custom logic and the link from the environment variable) but the ability to specify custom URL buttons was included too:{ "type": "url", "text": "Button Text", "url": "https://example.com" }(Multiple lines of buttons are supported too as every line is an array of button records)
PR Type
Enhancement
Description
Added configurable pause screen links via
config.json.Enhanced
DiscordButtonandDropdownButtoncomponents with style and text props.Updated
PauseScreento dynamically render buttons based on configuration.Introduced
pauseLinksconfiguration inconfig.jsonfor custom button rows.Changes walkthrough 📝
globalState.ts
Added `pauseLinks` configuration to global state.src/globalState.ts
pauseLinksproperty toAppConfigtype.DiscordButton.tsx
Enhanced `DiscordButton` and `DropdownButton` components.src/react/DiscordButton.tsx
DiscordButtonto accepttextandstyleprops.DropdownButtonto accept optionalstyleprop.PauseScreen.tsx
Updated `PauseScreen` to support configurable buttons.src/react/PauseScreen.tsx
configuration.
DiscordButtonand GitHub button with configurable styles.pauseLinksrendering.config.json
Introduced `pauseLinks` configuration in `config.json`.config.json
pauseLinksconfiguration for customizable button rows.Summary by CodeRabbit