fix: Enhancement of Visual Json Schema Editor #1065

Gmin2 · 2024-04-05T19:29:27Z

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 Enhance the Visual JSON Schema Editor #1023

…ses which path contain `array<object>`

changeset-bot · 2024-04-05T19:29:31Z

⚠️ No Changeset found

Latest commit: 7b4fb9d

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 · 2024-04-05T19:29:43Z

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

Name	Link
🔨 Latest commit	`7b4fb9d`
🔍 Latest deploy log	https://app.netlify.com/sites/modest-rosalind-098b67/deploys/6658a4656503190008bcac4a
😎 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 · 2024-04-05T19:29:44Z

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

Name	Link
🔨 Latest commit	`7b4fb9d`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-studio-design-system/deploys/6658a465964d9d00084167cd
😎 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.

github-actions

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

netlify · 2024-04-05T19:29:45Z

✅ Deploy Preview for studio-next ready!

Name	Link
🔨 Latest commit	`7b4fb9d`
🔍 Latest deploy log	https://app.netlify.com/sites/studio-next/deploys/6658a465d763680008b7697b
😎 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 · 2024-04-12T21:35:17Z

Hey @princerajpoot20 it is done and ready for review

cc @Amzani

princerajpoot20

Good work @utnim2 .

Have you tested this with all the sample JSON schemas?

There is no option to add property to the array<object> type.
In the UI for array properties, we should not have Array Items as text.
If we are changing the type of an existing property, when I change it to type array of string, it directly assigns the same value. For example: "type": "array<string>".

Instead, it should be like

"type": "array",
  "items": {
    "type": "number"
  }

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

… removed "Array Items", fixed changing of type for array types

Gmin2 · 2024-04-15T15:41:37Z

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 · 2024-04-16T16:13:57Z

@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 , in next line we again mention object.

This text is there if root is of type array

This text can be removed

packages/ui/components/VisualEditor/SchemaProperty.tsx

Gmin2 · 2024-05-22T17:11:55Z

@Gmin2 deploy is failing. Could you check that?

fixed 👍

KhudaDad414

LGTM

princerajpoot20 · 2024-05-25T21:16:26Z

@Gmin2, Good work! Just a few changes:

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.

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.
The UI doesn't support selecting multiple data types while adding a new property.
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.⬇︎

Blank Json Schema

{
      
}

Root type string

{
      "type": "string"
}

Property having multiple data types

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

Gmin2 · 2024-05-27T12:54:34Z

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 · 2024-05-27T17:47:50Z

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 · 2024-05-27T18:22:24Z

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 · 2024-05-27T20:30:47Z

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 · 2024-05-28T05:51:10Z

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 · 2024-05-29T08:42:21Z

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

princerajpoot20 · 2024-05-29T08:54:03Z

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

screen.recording.mov

KhudaDad414 · 2024-05-29T09:41:20Z

@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

LGTM!

packages/ui/components/DropdownMenu.tsx

princerajpoot20 · 2024-05-29T10:47:57Z

@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.

This reverts commit 2be5cb0.

sonarcloud · 2024-05-30T16:08:54Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.1% Duplication on New Code

See analysis details on SonarCloud

Gmin2 added 2 commits April 5, 2024 16:16

changed type of property function

06a2f4e

added ability to delete properties and added property function for ca…

d5104da

…ses which path contain `array<object>`

Gmin2 requested review from KhudaDad414, Amzani and princerajpoot20 as code owners April 5, 2024 19:29

github-actions bot reviewed Apr 5, 2024

View reviewed changes

Gmin2 marked this pull request as draft April 5, 2024 19:29

Gmin2 changed the title ~~Test editor~~ fix: Enhancement of Visual Json Schema Editor Apr 5, 2024

Gmin2 added 9 commits April 9, 2024 02:23

added toggle property for nested and non nested objects

3d33502

modified the UI

c530d52

improve the UI

fa72fc6

cleanup

3e567cb

modified the delete property

284832a

array of type is visible

d81d930

fix for adding property type to array<object>

2ceb3c6

added all the changes requested

dadc00d

cleanup

4334c14

Gmin2 marked this pull request as ready for review April 12, 2024 21:34

princerajpoot20 requested changes Apr 13, 2024

View reviewed changes

Gmin2 added 2 commits April 15, 2024 21:08

added option to add property to the array<object> type, in the UI…

04648c8

… removed "Array Items", fixed changing of type for array types

cleanup

1b1fd96

princerajpoot20 reviewed Apr 16, 2024

View reviewed changes

packages/ui/components/VisualEditor/SchemaProperty.tsx Outdated Show resolved Hide resolved

princerajpoot20 reviewed Apr 16, 2024

View reviewed changes

packages/ui/components/VisualEditor/SchemaProperty.tsx Outdated Show resolved Hide resolved

princerajpoot20 and others added 2 commits May 22, 2024 22:26

Merge branch 'master' into test-editor

13bc7c8

added pnpm lock file

562c640

Gmin2 requested review from magicmatatjahu and asyncapi-bot-eve as code owners May 22, 2024 17:08

Gmin2 added 2 commits May 24, 2024 13:34

removed unused prop in Dropdown

a3b9654

cleanup

e18dedd

KhudaDad414 previously approved these changes May 24, 2024

View reviewed changes

fixed sonarcloud error

472ae06

Gmin2 dismissed KhudaDad414’s stale review via 472ae06 May 24, 2024 14:33

cleannnn

b616a30

added some reviewed change

33e0b9f

KhudaDad414 requested changes May 29, 2024

View reviewed changes

packages/ui/components/DropdownMenu.tsx Show resolved Hide resolved

packages/ui/components/DropdownMenu.tsx Show resolved Hide resolved

KhudaDad414 mentioned this pull request May 29, 2024

[PITCH]: JSON Schema Editor Improvements #1105

Open

6 tasks

removed unused props in dropdownEditor

2be5cb0

Revert "removed unused props in dropdownEditor"

67d41dd

This reverts commit 2be5cb0.

KhudaDad414 previously approved these changes May 29, 2024

View reviewed changes

added three more examples and resolved some bugs

7b4fb9d

Gmin2 dismissed KhudaDad414’s stale review via 7b4fb9d May 30, 2024 16:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Enhancement of Visual Json Schema Editor #1065

fix: Enhancement of Visual Json Schema Editor #1065

Gmin2 commented Apr 5, 2024 •

edited

changeset-bot bot commented Apr 5, 2024 •

edited

netlify bot commented Apr 5, 2024 •

edited

netlify bot commented Apr 5, 2024 •

edited

github-actions bot left a comment

netlify bot commented Apr 5, 2024 •

edited

Gmin2 commented Apr 12, 2024

princerajpoot20 left a comment •

edited

Gmin2 commented Apr 15, 2024

princerajpoot20 commented Apr 16, 2024

Gmin2 commented May 22, 2024

KhudaDad414 left a comment

princerajpoot20 commented May 25, 2024 •

edited

Gmin2 commented May 27, 2024 •

edited

princerajpoot20 commented May 27, 2024 •

edited

Gmin2 commented May 27, 2024

princerajpoot20 commented May 27, 2024 •

edited

Gmin2 commented May 28, 2024 •

edited

Gmin2 commented May 29, 2024 •

edited

princerajpoot20 commented May 29, 2024

KhudaDad414 commented May 29, 2024

KhudaDad414 left a comment

princerajpoot20 commented May 29, 2024

sonarcloud bot commented May 30, 2024

fix: Enhancement of Visual Json Schema Editor #1065

Are you sure you want to change the base?

fix: Enhancement of Visual Json Schema Editor #1065

Conversation

Gmin2 commented Apr 5, 2024 • edited

changeset-bot bot commented Apr 5, 2024 • edited

⚠️ No Changeset found

netlify bot commented Apr 5, 2024 • edited

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

netlify bot commented Apr 5, 2024 • edited

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

github-actions bot left a comment

Choose a reason for hiding this comment

netlify bot commented Apr 5, 2024 • edited

✅ Deploy Preview for studio-next ready!

Gmin2 commented Apr 12, 2024

princerajpoot20 left a comment • edited

Choose a reason for hiding this comment

Gmin2 commented Apr 15, 2024

princerajpoot20 commented Apr 16, 2024

Gmin2 commented May 22, 2024

KhudaDad414 left a comment

Choose a reason for hiding this comment

princerajpoot20 commented May 25, 2024 • edited

Gmin2 commented May 27, 2024 • edited

princerajpoot20 commented May 27, 2024 • edited

Gmin2 commented May 27, 2024

princerajpoot20 commented May 27, 2024 • edited

Gmin2 commented May 28, 2024 • edited

Gmin2 commented May 29, 2024 • edited

princerajpoot20 commented May 29, 2024

KhudaDad414 commented May 29, 2024

KhudaDad414 left a comment

Choose a reason for hiding this comment

princerajpoot20 commented May 29, 2024

sonarcloud bot commented May 30, 2024

Quality Gate passed

Gmin2 commented Apr 5, 2024 •

edited

changeset-bot bot commented Apr 5, 2024 •

edited

netlify bot commented Apr 5, 2024 •

edited

netlify bot commented Apr 5, 2024 •

edited

netlify bot commented Apr 5, 2024 •

edited

princerajpoot20 left a comment •

edited

princerajpoot20 commented May 25, 2024 •

edited

Gmin2 commented May 27, 2024 •

edited

princerajpoot20 commented May 27, 2024 •

edited

princerajpoot20 commented May 27, 2024 •

edited

Gmin2 commented May 28, 2024 •

edited

Gmin2 commented May 29, 2024 •

edited