Tweak 2nd stage instructions for the Solution experiment

[andy1li]

Checklist:

• I've thoroughly self-reviewed my changes
• I've added tests for my changes, unless they affect admin-only areas (or are otherwise not worth testing)
• I've verified any visual changes using Percy (add a commit with [percy] in the message to trigger)

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Simplified instructions presentation in the solution step, enhancing clarity.
  • Updated UI elements for revealing solutions, improving user interaction.

• Bug Fixes

  • Removed unnecessary recommendations and links to streamline user experience in the read instructions step.
  • Adjusted acceptance tests to reflect the removal of the screencasts link, ensuring accurate functionality checks.

[coderabbitai]

Walkthrough

The changes in this pull request involve modifications to two Handlebars template files, implement-solution-step.hbs and read-instructions-step.hbs. The first file has been updated to simplify the structure of the instructions and enhance the user interface by adjusting the display logic for language guide recommendations and modifying button components. The second file has had several sections removed to streamline the content, focusing solely on user instructions without additional resource recommendations.

Changes

File	Change Summary
app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs	Simplified HTML structure; updated conditional rendering for language guide; modified BlurredOverlay and replaced PrimaryButton with SecondaryButton.
app/components/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.hbs	Removed recommendations and links to additional resources; content now focuses on marking the step as complete.
tests/acceptance/course-page/complete-second-stage-test.js	Removed test for screencasts link; maintained existing tests for second stage completion.
tests/acceptance/course-page/complete-stage-without-changes-test.js	Removed test for screencasts link; focused on completion without changes.
app/components/secondary-button.hbs	Updated button styles for dark mode; expanded class attributes for improved readability.

Possibly related PRs

• Refactor read-instructions-step.hbs: Add condition for displaying Concepts link. #1710: Refactor read-instructions-step.hbs: Add condition for displaying Concepts link.
  This PR modifies the same file (read-instructions-step.hbs) as the main PR, indicating a direct relationship in terms of changes made to the same component.

• Dark mode border improvements #2023: Dark mode border improvements.
  Although primarily focused on styling, this PR includes changes to components that may interact with the UI elements modified in the main PR, particularly regarding user interface consistency.

• course dark mode #2024: Course dark mode.
  This PR introduces dark mode features that likely affect the same components as the main PR, enhancing the overall user experience in conjunction with the changes made.

• more dark mode styling #2033: More dark mode styling.
  This PR focuses on enhancing dark mode styling, which is relevant to the UI changes made in the main PR, ensuring a cohesive user experience across components.

• Add dark mode toggle #2039: Add dark mode toggle.
  The introduction of a dark mode toggle is relevant as it relates to the user interface changes in the main PR, impacting how users interact with the components.

• Add extensions dark mode styles #2045: Add extensions dark mode styles.
  This PR enhances dark mode styles, which could relate to the UI elements modified in the main PR, ensuring consistency in user experience.

• Change dark theme to be more pleasant on the eyes #2085: Change dark theme to be more pleasant on the eyes.
  This PR modifies dark mode styles that may overlap with the changes in the main PR, focusing on improving visual aesthetics.

• add dark mode styling #2138: Add dark mode styling.
  This PR introduces dark mode styling enhancements that are relevant to the changes made in the main PR, ensuring a consistent user interface.

• udpate #2178: Update.
  While the description is vague, any updates related to the course page could potentially relate to the changes made in the main PR.

• Tweak git commit command #2185: Tweak git commit command.
  This PR modifies command strings that may be displayed in the same context as the instructional changes made in the main PR.

• CC-1389: Link to getting started guide in "Repository Setup" card #2195: CC-1389: Link to getting started guide in "Repository Setup" card.
  This PR enhances user guidance in the setup process, which is relevant to the instructional content changes in the main PR.

• Rename first-stage-instructions-card to first-stage-tutorial-card + add analytics events #2230: Rename first-stage-instructions-card to first-stage-tutorial-card + add analytics events.
  This PR directly relates to the renaming of components that are part of the instructional content in the main PR.

• CC-1423: Tweak upgrade prompt copy #2239: CC-1423: Tweak upgrade prompt copy.
  This PR modifies text displayed in the UI, which could relate to the instructional content changes in the main PR.

• CC-1393: Change copy to make it more clear what "free usage" means in "X days free" badge + referrals page #2242: CC-1393: Change copy to make it more clear what "free usage" means in "X days free" badge + referrals page.
  This PR enhances clarity in user-facing text, which is relevant to the instructional changes made in the main PR.

• CC-1460: UI changes to render guides for users #2328: CC-1460: UI changes to render guides for users.
  This PR introduces UI changes that enhance the rendering of guides, which is directly related to the instructional content in the main PR.

• Add CurrentStepCompleteModal and CurrentStepCompleteOverlay components. #2332: Add CurrentStepCompleteModal and CurrentStepCompleteOverlay components.
  This PR introduces new components that may interact with the instructional content, enhancing the overall user experience.

• Prepare for CC-1501: Ship experiment with Diff in stage 2 tutorial card #2393: Prepare for CC-1501: Ship experiment with Diff in stage 2 tutorial card.
  This PR modifies the instructional flow and visibility of UI elements, which is directly related to the changes made in the main PR.

🐰 In the land of code, where changes bloom,
A button swapped, to brighten the room.
With simpler steps and guides to see,
We hop along, so joyfully!
Let's mark our tasks, and cheer with glee,
For clearer paths, and code that's free! 🌼

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between f009418 and 6fe5157.

📒 Files selected for processing (1)

• app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs (2 hunks)

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

• app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs

---

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

• 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.
  • 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]

Test Results

  1 files  ±0    1 suites  ±0   6m 51s ⏱️ +27s
583 tests  - 2  543 ✅  - 2  40 💤 ±0  0 ❌ ±0 
598 runs   - 2  558 ✅  - 2  40 💤 ±0  0 ❌ ±0 

Results for commit 6fe5157. ± Comparison against base commit 9c86ba4.

This pull request removes 2 tests.

Chrome 130.0 ‑ Acceptance | course-page | complete-second-stage: should show a screencasts link if there are screencasts available
Chrome 130.0 ‑ Acceptance | course-page | complete-stage-without-changes: should show a screencasts link if there are screencasts available

♻️ This comment has been updated with latest results.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files

📢 Thoughts on this report? Let us know!

[codecov]

Bundle Report

Changes will decrease total bundle size by 1.61kB (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
client-array-push	35.84MB	1.61kB (-0.0%) ⬇️

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between b93bc15 and c7e9440.

📒 Files selected for processing (4)

• app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs (2 hunks)
• app/components/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.hbs (0 hunks)
• tests/acceptance/course-page/complete-second-stage-test.js (1 hunks)
• tests/acceptance/course-page/complete-stage-without-changes-test.js (1 hunks)

💤 Files with no reviewable changes (1)

• app/components/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.hbs

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

• app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs

🧰 Additional context used

🪛 Gitleaks

tests/acceptance/course-page/complete-second-stage-test.js

176-176: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

tests/acceptance/course-page/complete-stage-without-changes-test.js

127-127: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

🔇 Additional comments (1)

tests/acceptance/course-page/complete-second-stage-test.js (1)

Line range hint 15-150: LGTM! Comprehensive test coverage maintained

The remaining tests thoroughly cover the core functionality:

• Complete flow of stage completion with step states
• UI element visibility and interactions
• Tab switching behavior
• Submission type restrictions (CLI vs. git)

🧰 Tools

🪛 Gitleaks

176-176: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

tests/acceptance/course-page/complete-stage-without-changes-test.js (1)

102-139: Consider preserving test setup in documentation

The commented-out test contains valuable setup code for course-stage-screencast scenarios. Consider moving this setup to a test helper or documentation file for future reference, rather than leaving it as commented code.

🧰 Tools

🪛 Gitleaks

127-127: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

tests/acceptance/course-page/complete-second-stage-test.js (1)

Line range hint 1-188: Consider adding test coverage for alternative scenarios

While removing the screencasts test is appropriate since the feature is being removed, consider adding tests for:

1. Edge cases in the second stage completion flow
2. Error scenarios when marking stages as complete
3. State persistence between tab switches

This will help maintain robust test coverage as the instructions are streamlined.

Would you like me to help draft additional test cases?

🧰 Tools

🪛 Gitleaks

176-176: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between c7e9440 and 5de37d9.

📒 Files selected for processing (4)

• app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs (2 hunks)
• app/components/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.hbs (0 hunks)
• tests/acceptance/course-page/complete-second-stage-test.js (1 hunks)
• tests/acceptance/course-page/complete-stage-without-changes-test.js (1 hunks)

💤 Files with no reviewable changes (1)

• app/components/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.hbs

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

• app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.hbs

🧰 Additional context used

🪛 Gitleaks

tests/acceptance/course-page/complete-second-stage-test.js

176-176: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

tests/acceptance/course-page/complete-stage-without-changes-test.js

127-127: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

🔇 Additional comments (2)

tests/acceptance/course-page/complete-stage-without-changes-test.js (1)

102-139: Verify if screencasts feature is intentionally removed

The removal of this test case aligns with the changes mentioned in the AI summary about removing the screencasts section from instructions. However, let's verify if this is part of a broader feature removal.

🧰 Tools

🪛 Gitleaks

127-127: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)

tests/acceptance/course-page/complete-second-stage-test.js (1)

151-188: ⚠️ Potential issue

Remove commented-out test code

The commented-out test should be deleted rather than commented out since:

1. It contains sensitive information (API key in the embed HTML)
2. The screencasts feature is being removed as part of streamlining the instructions
3. The code can be recovered from git history if needed in the future

Apply this diff to remove the commented-out code:

-  // test('should show a screencasts link if there are screencasts available', async function (assert) {
-    // testScenario(this.server);
-    // signIn(this.owner, this.server);
-    // ... rest of commented code ...
-  // });

🧰 Tools

🪛 Gitleaks

176-176: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)