improve enum display in JSONViewer

[sajdakabir]

Description

Modified CSS in enum and examples components to hide secondary name elements and remove "=" separators for cleaner enum value display.

Motivation and Context

Fixes visual clutter in enum display introduced with JSONViewer component in v5.20.1. Hides secondary elements and separators that create unnecessary visual noise.

Fixes: #10555

How Has This Been Tested?

Visual testing with various enum configurations Verified cross-browser compatibility Confirmed no regression in existing functionality Tested integration with JSONViewer component

Screenshots :

Checklist

My PR contains...

• [ ] No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• [ ] Dependency changes (any modification to dependencies in package.json)
• [x] Bug fixes (non-breaking change which fixes an issue)
• [ ] Improvements (misc. changes to existing features)
• [ ] Features (non-breaking change which adds functionality)

My changes...

• [ ] are breaking changes to a public API (config options, System API, major UI change, etc).
• [ ] are breaking changes to a private API (Redux, component props, utility functions, etc.).
• [ ] are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• [x] are not breaking changes.

Documentation

• [x] My changes do not require a change to the project documentation.
• [ ] My changes require a change to the project documentation.
• [ ] If yes to above: I have updated the documentation accordingly.

Automated tests

• [x] My changes can not or do not need to be tested.
• [ ] My changes can and should be tested by unit and/or integration tests.
• [ ] If yes to above: I have added tests to cover my changes.
• [ ] If yes to above: I have taken care to cover edge cases in my tests.
• [ ] All new and existing tests passed.

[glowcloud]

Hi @sajdakabir,

Thanks for trying to improve JSON Viewer! Unfortunately, there are some issues with this solution:

1. There is no indication whether we display enum or examples, as the keywords are hidden:

• Before:

• After:

2. Hiding the keywords also breaks the view for complex values, for which JSON Viewer was introduced:

• Before:

• After:

This can be seen using this definition:

openapi: 3.1.0
info:
  title: JSON Viewer
  version: 1.0.0
components:
  schemas:
    Primitive:
      enum:
        - 123
        - test
      examples:
        - 123
        - test
    Complex:
      enum:
        # object in enum
        - prop1: abc
          prop2:
            nestedProp1: test
          prop3:
            nestedProp2: 
              - test1
              - 
                - test2
                - test3
        # array in enum
        - 
          - test
          - 123
          - prop1: abc
            prop2:
              nestedProp1: test
            prop3:
              nestedProp2: 
                - test1
                - 
                  - test2
                  - test3
          - 
            - test
            - 123
            - prop1: abc
              prop2:
                nestedProp1: test
              prop3:
                nestedProp2: 
                  - test1
                  - 
                    - test2
                    - test3
      examples:
        # object in examples
        - prop1: abc
          prop2:
            nestedProp1: test
          prop3:
            nestedProp2: 
              - test1
              - 
                - test2
                - test3
        # array in examples
        - 
          - test
          - 123
          - prop1: abc
            prop2:
              nestedProp1: test
            prop3:
              nestedProp2: 
                - test1
                - 
                  - test2
                  - test3
          - 
            - test
            - 123
            - prop1: abc
              prop2:
                nestedProp1: test
              prop3:
                nestedProp2: 
                  - test1
                  - 
                    - test2
                    - test3

These issues would need to be addressed, so the solution might require more extensive changes.

[sajdakabir]

Hi @sajdakabir,

Thanks for trying to improve JSON Viewer! Unfortunately, there are some issues with this solution:

1. There is no indication whether we display enum or examples, as the keywords are hidden:

• Before:
• After:

2. Hiding the keywords also breaks the view for complex values, for which JSON Viewer was introduced:

• Before:
• After:

This can be seen using this definition:

openapi: 3.1.0
info:
  title: JSON Viewer
  version: 1.0.0
components:
  schemas:
    Primitive:
      enum:
        - 123
        - test
      examples:
        - 123
        - test
    Complex:
      enum:
        # object in enum
        - prop1: abc
          prop2:
            nestedProp1: test
          prop3:
            nestedProp2: 
              - test1
              - 
                - test2
                - test3
        # array in enum
        - 
          - test
          - 123
          - prop1: abc
            prop2:
              nestedProp1: test
            prop3:
              nestedProp2: 
                - test1
                - 
                  - test2
                  - test3
          - 
            - test
            - 123
            - prop1: abc
              prop2:
                nestedProp1: test
              prop3:
                nestedProp2: 
                  - test1
                  - 
                    - test2
                    - test3
      examples:
        # object in examples
        - prop1: abc
          prop2:
            nestedProp1: test
          prop3:
            nestedProp2: 
              - test1
              - 
                - test2
                - test3
        # array in examples
        - 
          - test
          - 123
          - prop1: abc
            prop2:
              nestedProp1: test
            prop3:
              nestedProp2: 
                - test1
                - 
                  - test2
                  - test3
          - 
            - test
            - 123
            - prop1: abc
              prop2:
                nestedProp1: test
              prop3:
                nestedProp2: 
                  - test1
                  - 
                    - test2
                    - test3

These issues would need to be addressed, so the solution might require more extensive changes.

looking into it

[sajdakabir]

@glowcloud an you check the latest commit and let me know if anything else needs tweaking?