Skip to content

feat(docs): Clarify Badge Design & Fix Image in /understanding-design-component #635

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

zihanKuang
Copy link
Contributor

Notes for Reviewers

This PR fixes #634

PR Content

This PR includea the following:

  1. Clarifies Badge Design Philosophy and Meanings:
    This PR provides a clear explanation of badge design philosophy. It details the meaning of each badge in both Designer Mode and Operator Mode, with clear examples.
  2. Fixes Image Usage in /understanding-design-component/index.md:
    An incorrect image implementation in /understanding-design-component/index.md that prevented the lightbox feature from working has been resolved.

Additional Context:

The existing badge definitions on Figma were outdated and contained some repetitive content. To address this, I consulted the codebase to get the relevant functions and re-created the badge diagrams. The updated images and explanations used in this documentation are based on this refreshed understanding.

Relevant Code Files:

  1. meshmap/src/modules/editor/comman/badges.ts
    • How different types of badges (e.g., error, terminal, external link) are defined and created.
  2. meshmap/src/modules/editor/validator/view.tsx
    • When the Validation Badge (Error Badge) specifically appears, basing its content on the schemaCount and dryRunCount error tallies.
  3. meshmap/src/modules/editor/modes/designer/view.ts
    • Which badge layers are visible in Designer Mode, controlling their display logic according to the design's preferences.
  4. meshmap/src/modules/editor/modes/operator/view.ts
    • Which specific badges should be displayed in Operator Mode, such as the terminalSessionBadge and the managedByMesheryBadge.
  5. meshmap/src/modules/renderer/badges.ts

Original Diagram:

image

Re-created Diagram:

image

Signed-off-by: Zihan Kuang <zihan_kuang@outlook.com>
Signed-off-by: Zihan Kuang <zihan_kuang@outlook.com>
Signed-off-by: Zihan Kuang <zihan_kuang@outlook.com>
Signed-off-by: Zihan Kuang <zihan_kuang@outlook.com>
Signed-off-by: Zihan Kuang <zihan_kuang@outlook.com>
Copy link

netlify bot commented Jul 5, 2025

Deploy Preview for bejewelled-pegasus-b0ce81 ready!

Name Link
🔨 Latest commit 61c1fd9
🔍 Latest deploy log https://app.netlify.com/projects/bejewelled-pegasus-b0ce81/deploys/68690eee3a5cc00008f56cac
😎 Deploy Preview https://deploy-preview-635--bejewelled-pegasus-b0ce81.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Docs] Document Badge Explanations for Designer and Operator Modes
1 participant