Use CodeMirror in FileContentsCard instead of SyntaxHighlightedCode

[VasylMarchuk]

Related to #1231 #1011

Brief

This updates FileContentsCard to use CodeMirror instead of SyntaxHighlightedCode component.

Details

• Component FileContentsCard now uses CodeMirror instead of SyntaxHighlightedCode
• Better logic for header tooltips in FileContentsCard component
• Better logic for auto-scrolling into view in FileContentsCard component
• Full & automatic Dark Mode support in FileContentsCard component
• Component FileContentsCard currently appears in the following places:
  • courses/redis/admin/buildpacks/buildpack route
  • app/components/course-page/course-stage-step/community-solution-card/content.hbs template
• Added a Demo route /demo/file-contents-card for showcasing FileContentsCard component
• Added support for passing a custom @theme to CodeMirror component
• Added two themes codeCraftersLight and codeCraftersDark
• Added an acceptance test course-admin | view-code-example
• Added @ember/test-waiters package to the project
• Slight tidying up of option styles on the demo route

Screenshots

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

• New Features

  • Introduced new themes: codeCraftersLight and codeCraftersDark for enhanced theme customization.
  • Added a new default theme codeCraftersAuto.

• Enhancements

  • Improved theme handling logic for better user customization in the CodeMirror component.
  • Enhanced styling and interaction behavior of the file contents card component.

• Bug Fixes

  • Fixed issues with collapsible behavior in file contents cards.

• Tests

  • Updated test imports and added new tests for theme handling and file content interactions.

[coderabbitai]

Walkthrough

The recent changes introduce enhancements to the file-contents-card component and theme handling logic across multiple files. The updates improve the visual appearance and interaction behavior of the file contents card, enhance dark mode support, and add new themes for code display. These modifications also involve restructuring various components and services to ensure cohesive functionality and better user experience.

Changes

Files	Change Summary
app/components/file-contents-card.hbs	Adjust CSS classes, event handling, and component structure for enhanced styling and functionality.
app/components/file-contents-card.ts	Add dark mode service, update theme handling, and rename methods for improved collapsible behavior.
app/components/code-mirror.ts	Introduce generateHTMLElement, define FoldGutterIcon enum, update Argument type, and modify theme property and handler.
app/controllers/demo/code-mirror.ts	Update theme handling logic, introduce new themes, and modify theme selection logic in DemoCodeMirrorController.
tests/integration/components/code-mirror-test.js	Reorganize imports related to ember-cli-page-object, and import new theme variables.
tests/pages/course-page.js	Import codeMirror from new location and add functionality for handling changed and unchanged files in solution cards.

Poem

In the land of code, where changes flow,
Themes now brighten, like morning's glow.
Collapsible cards, neat and refined,
With dark mode support, how kind!
Syntax highlighted, our code does gleam,
Thanks to CodeRabbit's dream. 🐰✨

---

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>.
  • 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 generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @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 as 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.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration 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   5m 54s ⏱️ - 1m 12s
550 tests +1  515 ✅ +1  35 💤 ±0  0 ❌ ±0 
565 runs  +1  530 ✅ +1  35 💤 ±0  0 ❌ ±0 

Results for commit 7e0ccab. ± Comparison against base commit f0408fd.

♻️ This comment has been updated with latest results.

[codecov]

Codecov Report

Attention: Patch coverage is 41.46341% with 24 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files	Patch %	Lines
app/controllers/demo/file-contents-card.ts	0.00%	13 Missing ⚠️
app/components/file-contents-card.ts	10.00%	6 Missing and 3 partials ⚠️
app/controllers/demo/code-mirror.ts	75.00%	0 Missing and 2 partials ⚠️

Additional details and impacted files

📢 Thoughts on this report? Let us know!

[codecov]

Bundle Report

Changes will decrease total bundle size by 168.49kB ⬇️

Bundle name	Size	Change
client-array-push	27.41MB	168.49kB ⬇️

[rohitpaulk]

@VasylMarchuk can we try to change the styling so that this matches the current version more closely?

Let's remove the vertical border, adjust spacing + also remove the blue highlight on the selected line (this I'm assuming would just be a codemirror option to disable?)

[rohitpaulk]

Added note re: styling + handling unchanged files in community solutions

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 29d1693 and 04b0704.

Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

Files selected for processing (18)

• app/components/code-mirror.ts (9 hunks)
• app/components/course-page/course-stage-step/community-solution-card/content.hbs (2 hunks)
• app/components/file-contents-card.hbs (2 hunks)
• app/components/file-contents-card.ts (3 hunks)
• app/controllers/demo/code-mirror.ts (3 hunks)
• app/controllers/demo/file-contents-card.ts (1 hunks)
• app/router.ts (1 hunks)
• app/routes/demo/file-contents-card.ts (1 hunks)
• app/templates/course-admin/buildpack.hbs (1 hunks)
• app/templates/demo.hbs (1 hunks)
• app/templates/demo/code-mirror.hbs (6 hunks)
• app/templates/demo/file-contents-card.hbs (1 hunks)
• app/utils/code-mirror-themes.ts (1 hunks)
• package.json (1 hunks)
• tests/acceptance/course-admin/view-code-example-test.js (1 hunks)
• tests/integration/components/code-mirror-test.js (1 hunks)
• tests/pages/components/code-mirror.ts (1 hunks)
• tests/pages/course-page.js (2 hunks)

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

• app/components/code-mirror.ts
• app/components/course-page/course-stage-step/community-solution-card/content.hbs
• app/components/file-contents-card.hbs
• app/components/file-contents-card.ts
• app/controllers/demo/code-mirror.ts
• app/router.ts
• app/templates/course-admin/buildpack.hbs
• app/templates/demo.hbs
• app/templates/demo/code-mirror.hbs
• app/templates/demo/file-contents-card.hbs
• app/utils/code-mirror-themes.ts
• package.json
• tests/acceptance/course-admin/view-code-example-test.js
• tests/integration/components/code-mirror-test.js
• tests/pages/course-page.js

Additional comments not posted (2)

app/routes/demo/file-contents-card.ts (1)

1-3: Basic Route Setup Looks Good

The class DemoFileContentsCardRoute is defined correctly for a basic Ember.js route. It appears to be a placeholder for future expansions or specific route handling.

tests/pages/components/code-mirror.ts (1)

1-29: Comprehensive Test Setup for CodeMirror Component

The page object setup for the CodeMirror component is well-structured and covers a wide range of interactions which are essential for thorough testing. The use of aliases enhances the readability and reusability of the code.

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 04b0704 and 846a0ed.

Files selected for processing (3)

• app/components/file-contents-card.hbs (2 hunks)
• app/components/file-contents-card.ts (1 hunks)
• app/templates/demo/file-contents-card.hbs (1 hunks)

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

• app/components/file-contents-card.hbs
• app/components/file-contents-card.ts
• app/templates/demo/file-contents-card.hbs

[coderabbitai]

Actionable comments posted: 2

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 846a0ed and ec38ee0.

Files selected for processing (4)

• app/components/code-mirror.ts (9 hunks)
• app/controllers/demo/code-mirror.ts (3 hunks)
• tests/integration/components/code-mirror-test.js (2 hunks)
• tests/pages/course-page.js (2 hunks)

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

• app/components/code-mirror.ts
• tests/integration/components/code-mirror-test.js
• tests/pages/course-page.js

Additional context used

Biome

app/controllers/demo/code-mirror.ts

[error] 152-152: This return should return a value because it is located in a getter.

(lint/suspicious/useGetterReturn)

Additional comments not posted (3)

app/controllers/demo/code-mirror.ts (3)

14-15: Ensure the new themes are properly added.

The addition of codeCraftersLight and codeCraftersDark to THEME_EXTENSIONS is noted. Ensure that these themes are properly defined and imported as they are crucial for the functionality of the CodeMirror component.

---

113-113: Review the initialization of theme-related properties.

The initialization of themes using SUPPORTED_THEMES and selectedThemeIndex using the default theme index are crucial for ensuring that the theme functionality works as expected. Confirm that these properties are correctly utilized throughout the component.

Also applies to: 119-119

---

18-19: Verify the new theme support.

The addition of 'codeCraftersAuto' to SUPPORTED_THEMES and its setting as the DEFAULT_THEME are significant changes. Verify that this theme dynamically adjusts according to the system's theme settings.

Verification successful

---

Verified: The codeCraftersAuto theme dynamically adjusts according to the system's theme settings.

The logic in the app/controllers/demo/code-mirror.ts file confirms that the codeCraftersAuto theme switches between codeCraftersDark and codeCraftersLight based on the system's dark mode setting.

• app/controllers/demo/code-mirror.ts: Lines showing the dynamic adjustment logic.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify that 'codeCraftersAuto' dynamically adjusts according to the system's theme settings.

# Test: Search for the theme adjustment logic.
rg --type python -A 5 $'codeCraftersAuto'

Length of output: 71

---

Script:

#!/bin/bash
# Description: Verify that 'codeCraftersAuto' dynamically adjusts according to the system's theme settings.

# Test: Search for the theme adjustment logic in TypeScript files.
rg --type typescript -A 10 'codeCraftersAuto'

Length of output: 80

---

Script:

#!/bin/bash
# Description: Verify that 'codeCraftersAuto' dynamically adjusts according to the system's theme settings.

# Test: Search for the theme adjustment logic.
rg -A 10 'codeCraftersAuto'

Length of output: 1484

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between ec38ee0 and 7e0ccab.

Files selected for processing (1)

• app/controllers/demo/code-mirror.ts (3 hunks)

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

• app/controllers/demo/code-mirror.ts