task: improve pretty printer for graphql editor

[james-m-henderson]

Component

Frontend UI

Task Description

On the graphql editor, if asked to pretty print, it puts all of the arguments into one line, even if that line overflows.

This can make the graphql more difficult to read rather than easier.

This was noticed first with the InfraInterfaceL3Create mutation:

mutation {
  InfraInterfaceL3Create(
    data: {
      name: { value: "Ethernet9" }
      enabled: { value: true }
      description: { value: "new interface in branch" }
      device: { id: "ord1-edge1" }
      status: { id: "active" }
      speed: { value: 10000 }
      role: { id: "spare" }
    }
  ) {
    ok
    object {
      id
      name {
        value
      }
      description {
        value
      }
    }
  }
}

Before pretty print:

After pretty print:

[bilalabbad]

Hi ! Thanks for opening this issue :)

We're using GraphiQL as our GraphQL editor, and unfortunately, it doesn't currently allow us to customize the prettify function.

I agree that the current prettification is not the best. Maybe we can try to open an issue on their repository ?