fix: Enhancement of Visual Json Schema Editor

[Gmin2]

Description

• [✅ ] Added Delete Property Function
• [✅ ] Changed Type of Property Function
• [✅] Toggle Required/NotRequired Function
• [ ✅] UI
• [✅ ] Added Property function, but only for cases which have a path containing array

Related issue(s) Resolves #1023

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 7707e06e2523a2b5ba176a1ea35ed09b8fadcf3d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify[bot]]

✅ Deploy Preview for modest-rosalind-098b67 ready!

Name	Link
🔨 Latest commit	7707e06e2523a2b5ba176a1ea35ed09b8fadcf3d
🔍 Latest deploy log	https://app.netlify.com/sites/modest-rosalind-098b67/deploys/66603d5598d3bd0008b8c8e0
😎 Deploy Preview	https://deploy-preview-1065--modest-rosalind-098b67.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify[bot]]

✅ Deploy Preview for asyncapi-studio-design-system ready!

Name	Link
🔨 Latest commit	7707e06e2523a2b5ba176a1ea35ed09b8fadcf3d
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-studio-design-system/deploys/66603d55f26f9a0009f1919a
😎 Deploy Preview	https://deploy-preview-1065--asyncapi-studio-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify[bot]]

✅ Deploy Preview for studio-next ready!

Name	Link
🔨 Latest commit	7707e06e2523a2b5ba176a1ea35ed09b8fadcf3d
🔍 Latest deploy log	https://app.netlify.com/sites/studio-next/deploys/66603d554ee7720008445c92
😎 Deploy Preview	https://deploy-preview-1065--studio-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Gmin2]

Hey @princerajpoot20 it is done and ready for review

cc @Amzani

[Gmin2]

Done all the reviewed changes @princerajpoot20

Could you make the code editor text be beautify after performing any operation

could you explain this more what exactly do you want, ig i have matched the design provided

[princerajpoot20]

@utnim2 After modification, the JSON schema is not in a readable form.

• In the schema shown in Figma, the friends array can have two data types: integer or null. We should make it accordingly.
• In the above case, if we consider creating this JSON schema using a visual editor, we currently cannot make the friends array support more than one value. To address this, we could add a multiselect checklist or something similar in the add property field, allowing us to select two data types when adding a property.
• Some UI changes are still needed, such as the colors for arrays and objects being different in array<object>, and the colors, font size and font style are not exactly matching those in Figma.

After having array

This text is there if root is of type array

This text can be removed

[aeworxet]

@asyncapi/bounty_team

[Amzani]

@utnim2 thanks for working on this, could you check the failed tests?

[Gmin2]

@utnim2 thanks for working on this, could you check the failed tests?

Looking into it

[Gmin2]

Currently my end sem exams are going on and it will finish in 6th of may. I will be able to do the rest of the work in the next two weeks max Todo - some changes as reviewed by @KhudaDad414 and @princerajpoot20

If @aeworxet you can extend the finish date of the issue by 1 week it would be enough

[Gmin2]

Some modifications are needed , not ready for a fresh review

[KhudaDad414]

@Gmin2 what do you think about converting the Json Schema to a tree first? it would make the implementation a lot easier. https://github.com/stoplightio/json-schema-tree

[Gmin2]

@Gmin2 what do you think about converting the Json Schema to a tree first? it would make the implementation a lot easier. https://github.com/stoplightio/json-schema-tree

What are you thinking about it? I dont get the point why we need to do this(I may be naive here), I was thinking of parsing it to a schema validator(like ajv)

cc @KhudaDad414

[Gmin2]

Can i get a review cc @Amzani @princerajpoot20 @KhudaDad414

[KhudaDad414]

What are you thinking about it?

@Gmin2 the main benefit that we get is that traversing a tree much easier than a object. plus, that library will handle allOf and anyOf and $ref fields for us. which is a real pain to work with. but I guess we can iterate one more time on this component and solve this problems there.

[Gmin2]

@Gmin2 the main benefit that we get is that traversing a tree much easier than a object. plus, that library will handle allOf and anyOf and $ref fields for us. which is a real pain to work with. but I guess we can iterate one more time on this component and solve this problems there.

@KhudaDad414 i will do it in the follow up PR

[Gmin2]

@KhudaDad414 done with all the changes

[princerajpoot20]

@Gmin2 deploy is failing. Could you check that?

[Gmin2]

@Gmin2 deploy is failing. Could you check that?

fixed 👍

[princerajpoot20]

@Gmin2, Good work! Just a few changes:

1. We are not able to build the JSON schema from scratch.
   • In the case of an empty JSON schema {}, we should only have the option to define the root type. We should not have the add property option there. It should be there only for the type defined as object or array-object.

Like for example:

{
      "type": "string"
}

In this JSON schema, we will not have an add property option, as we cannot add a property anywhere in this JSON schema since the root is of type string.

2. The add property option is not working correctly in cases where the root is of type array-object. If we try to add a property to that schema, it changes the root type from array-object to object.

3. The UI doesn't support selecting multiple data types while adding a new property.

4. After modification from the visual editor, the code editor (JSON schema) is not in a readable form.

You can add these JSON schemas to the stories as well.⬇︎

1. Blank Json Schema

{
      
}

2. Root type string

{
      "type": "string"
}

3. Property having multiple data types

{
      "type": "object",
      "properties": {
        "mixedTypeProperty": {
          "type": ["boolean", "integer"]
        }
      },
      "required": ["mixedTypeProperty"]
}

[Gmin2]

The UI doesn't support selecting multiple data types while adding a new property.

as we are using radix Dropdown component (can you check this), not sure if we can implement it, we might have a workaround but i am constantly trying with introducing state but multi-select is not working.

After modification from the visual editor, the code editor (JSON schema) is not in a readable form.

it is same as was before the changes that i have made

cc @princerajpoot20

[princerajpoot20]

it is same as was before the changes that i have made

I have tested this through the Netlify deploy link in the PR, there it is not rendering in a readable form.

[Gmin2]

I have tested this through the Netlify deploy link in the PR, there it is not rendering in a readable form.

netlify is not rendering the latest commits, you can use github cli and then see the changes

[princerajpoot20]

It is not that Netlify has not rendered your latest commit. It automatically takes your latest commit. Their problem is something else.

If the changes are not visible in the PR preview, then they will not be visible in deployment (after merge) either.

[Gmin2]

If the changes are not visible in the PR preview, then they will not be visible in deployment (after merge) either.

it is working fine in my machine, idk why netlify is parsing it as a string rather then schemaObject

[Gmin2]

Hey @princerajpoot20 in the deploy preview also it is showing right

[princerajpoot20]

@Gmin2 I'm talking about editor after making changes through visual editor. Ref::

https://github.com/asyncapi/studio/assets/44585452/49e10ca9-4c6f-4cbd-bdac-bed25cd4fa72

[KhudaDad414]

@princerajpoot20 is that necessary? we will have something nicer like a Codemirror editor and an easy-to- edit format like YAML over there anyway.

[princerajpoot20]

@princerajpoot20 is that necessary? we will have something nicer like a Codemirror editor and an easy-to- edit format like YAML over there anyway.

@KhudaDad414 Sure, this sounds good.