usebruno / bruno Goto Github PK

Decouple Electron build into its own package.
Lets use npm workspaces.

Currently, the functionality to search is limited to the request body and not available in the response body. In case of large response received for certain requests the user is unable to search in the response body. Similarly in case of copying the response also the user is restricted.

This is a proposal for implementing workflows in Bruno.

Somewhat related to Bruno Test Script RFC #46

Workflows:

1. A workflow is an ordered sequence of API calls
2. Data from the previous response can be used in the current request
3. A developer can easily setup and run a sequence of api calls, as opposed to painfully copy pasting response snippets one by one before executing the next collection method
4. This could also be used in test scripts to assert the final response.

Examples:

1. Login and pass the auth token in further API calls
2. A Shopping flow would search for products, add product(s) to the cart, encrypt payment method then checkout

A workflow would be a first class concept in Bruno similar to collections.

├── collections
│   ├── POST /login
│   └── PUT  /profile
└── workflows
    ├── Update Profile
    │   ├── 1. login
    │   └── 2. update profile
    └── Shop
        ├── 1. search products
        ├── 2. add item
        ├── 3. encrypt card
        └── 4. checkout

Defining a workflow is simple enough, but how do we pass variables over is the interesting part of this proposal.

In Postman after an API call we can run a "post request script" to set collection variables, which are then reused in rest of API calls. But usually it is difficult to understand what the script does, what variables are set, since these are well... scripts :)

Workflow implementation

1. Every workflow runs in a new session
2. A session holds a set of variables that can be embedded in request body or headers
3. Each step in the workflow can declare a post request json config
4. This config updates the session variables (using say json query) which are further used down the chain

The idea is... look ma, no scripts!

Update profile workflow steps

1. login
   post script config

   {
      "token": "$res.data.token"
   }

2. update profile schema

   {
     "method": "PUT",
     "url": "/profile",
     "headers": {
       "Authorization": "Bearer $token"
     },
     "body": {
     }
   }

Tests:

• Rather than complex asserts in scripts, the workflow could define the expected json at the end of the workflow
• Bruno would compare the final response to the expected json
• The workflow runner could capture and show intermediate step failures.
  • Step gave a non 2xx response
  • Step succeeded but did not contain a value that was supposed to populate a variable

Everything being simple json provides a lot of benefits and opportunities.

@helloanoop I can do a PR if this is something you'd be interested in.

Description

Collections should be fully encrypted while being saved on the server (both for users and teams)

Why

Well, security is very important. And users should have the option to choose to have their collections stored end to end encrypted on the server

Problems

This requires the user to create a vault password for decrypting the collections locally. The problem with this is that if a user forgets the vault password (which is not that rare), then the whole collection is lost.

This gets trickier with teams, as you don't want the entire team to come to a standstill if the admin forgets his password.

Notes

• I have reviewed Insomnia's approach of implementing e2ee and I like that approach of making team collections work using diffie hellman based key exchange. I'd be happy to hear other approaches.
• The project is at very early stages, and I'd like first to have a decent platform built which supports teams and collaboration feature, before working on encryption. The plan is to allow provide an option to choose e2ee when collections are created.
• The UI needed to enable a smooth e2ee experience will also need time to be designed well.

Support Environment Variables at the Collection level.

I added the package to build using tauri in #20

When I brought the app up on Webview on linux, it was a bit janky. The fonts were not smooth, the transitions were slow.
I am holding off a tauri build for v1.alpha and pushing it to v2.alpha

The good parts that came out of this exercise was that, I was able to decouple the nextjs app from being tightly coupled with electron. Now I plan to also make the app available on web

Initially I thought that I will have to ditch electron in favour of tauri. But after going through the exercise of splitting up the nextjs app separately and the electron packager into separate repos, this led me to the realisation that I can ship multiple distributions (electron, tauri, webapp, chrome extension)

In the long term Bruno will ship both Tauri and Electron builds.

Bruno will ship desktop app by packaging using Tauri.

Note: We will still keep the electron build also available.

arm64 version is not working on my MacBook 14 M1 Pro. It's damaged.

Reported by @jozefrebjak on twitter

https://twitter.com/jozefrebjak/status/1582467505125486592?t=fLWOWQmzZ-XjS0W892U9DQ&s=19

The api testbench sits in a separate repo.
Since we are using npm workspaces and using a monorepo model, lets create a package for testbench and archive the older repo.

When i launch bruno in my Linux Mint Desktop:

1. Renaming workspace (I need to quit from window and start bruno, then I can see workspace name is changed)
2. When I cancel to create a collection (I need to ctrl+r or click view > reload and my cursor work again)

Bruno version: v1.25.2 (On Desktop App)
File I downloaded is: bruno_0.1.0_amd64_linux.deb from Github Release Page

This project is amazing, if bruno have code request generator like Postman it will be nice 👍 and dark mode theme.
Where I can read CONTRIBUTION.md to know how it build and I can contribute to translate or documenting bruno.

Develop functionality to generate api documentation for a collection.
This should be available to be executed in the app (generate a zip file with assets) as well as as a cli command that can be run on the local collections on the filesystem.

Requested by Jannis - https://dev.to/jannisdev/comment/22eh8

Support for sending Text and XML data in request body

Request dropdown should support to duplicate a request.

As a user, I must be able to clone a folder.

Notes
I think users clone requests more often, then cloning entire folder.
Assigning this to v2 milestone

This is totally a nice to have and a low priority thing but an AUR package could make it easier for linux users to install Bruno.

https://aur.archlinux.org/

https://wiki.archlinux.org/title/AUR_submission_guidelines

Query params are currently being saved in url. They need to be saved in request too, and get hydrated in the UI upon reload.

I don't know whether this is a bug or intended behaviour, but either way something goes wrong.

The first workspace cannot be deleted like the other workspaces while it can be renamed.

If it cannot be deleted, the trash icon should not be shown in my opinion.

As a user I should be able to search through collections in current workspace.

On clicking icons, the action should be the same as clicking on the text alongside the icon. 'Import Collection' and 'Load Sample Collection' icons are clickable, but the Icons of 'Create Collection' and 'Add Collection to Workspace' has no action.

On hovering the icons, cursor should become pointer.

Most of the open source api clients out there always bring in their custom flavour of version control to enable collaboration amongst teams. This is usually how the projects are able to earn some revenue.

While developing bruno, it occurred to me that we could mirror the structure of collection directly on the filesystem. And have the request stored as json files. This also enables people to keep their collections entirely private as well as use their preferred version control tool (like git) to enable team collaboration over collections.

I want bruno to offer both possibilities for the user.
The user can choose to use the teams feature (yet to be built) to collaborate with teams OR store the collection directly on filesystem.

We need to have support for exporting and importing Bruno Collections.

I am not including this in the v1.alpha.
The goal of v1.alpha is to get the project out first.

Currently assigning this to v1.beta
If you are looking to contribute to the project, this is a good issue to pick up.

Lets use husky to run prettier format as a pre commit hook.

@anusreesubash assigning this task to you.

Please add Insomnia format when importing

Reported by @vyskh2498

Currently the shortcut for Save is Ctrl+S / Cmd+S
Need to see if we can add a save button in the UI

Also, When you close a tab which has unsaved changes, we need to show a popup whether they want to save the changes OR close the tab without saving

Need to be able to cancel a request that is running.

• Support for running graphql queries
• Graphql Docs Explorer (similar to graphiql)

We need to support developers to run bruno on docker

Once you run npm run build:dev, it will create a build in the packages/bruno-app/out folder.
We need to take the contents of the "out" folder and create a docker image and be able to run the docker image on your local and use bruno.

Dockerfile will be located at the root of the project directory

A nice video to get NextJS builds running on docker
https://youtu.be/Pd2tVxhFnO4

Autocomplete for request header keys.
Like the user should not have to type the entire work "Content-Type"

We need to support the commonly used request header types as well as allow the user to enter custom headers.

Lets see if we can make this work without having to use any autocomplete react library.
I have implemented dropdown like this in an older project (that is not completed yet) see here

We will implement the Header Value autocomplete once this has been done for Header Names.

I have tried to reason from first principles as much as possible while building bruno, and not be blinded by the current status quo (which is how postman does the same stuff).

Here is a page on how bruno thinks differently: https://www.usebruno.com/design

Test scripts are very big and important feature. And I'd like to take this opportunity to rethink from first principles before we build this feature.
Being a developer, I have used api clients mostly to connect with api's, but not to write automation tests for them.

So I'd like to hear out from the community

1. What are your biggest pain points while writing test scripts in postman ?
2. What are some of the features that you adore in postman or other similar tools ?
3. Any additional suggestions or comments

I have tried to use bruno with Shopify GraphQL.
It requires X-Shopify-Access-Token header to be set for authorization purposes.

Load schema function does not use custom headers, so fetch fails with status 401 and response:
{"errors":"[API] Invalid API key or access token (unrecognized login or wrong password)"}

Simple request works as expected, header is used normally. Schema load fails.

Bruno should be built with extensibility in mind to allow customization and enhancement of the application. It would be nice to have something similar to what VS Code have

Display Collections list upon clicking the collections icon in the menubar

This feature is super critical before we introduce test scripts.
Because in test scripts, the order of execution matters.

Thinking of saving a new key called position in every request.
To start, Let's just build support for ordering requests under the same parent using drag and drop.

And then we can later extend it to moving requests anywhere inside the collection.
And then, much later, to move folders anywhere. This looks like a pretty challenging and fun feature to implement.

The split line should only be allowed to go up to a certain limit on both sides. Allowing it to go till the end is making stuffs overflow and non-readable.

Postman is the de-facto tool when among developers.
It's very important to allow developers to be able to import a postman collection into bruno.

It must be noted that bruno has a lot less features than postman, but we do support the essentials for anyone to get started.

Resources:
Bruno's request schema: https://github.com/usebruno/bruno/tree/main/packages/bruno-schema
Importer for bruno collections: https://github.com/usebruno/bruno/blob/main/packages/bruno-app/src/utils/collections/import.js

Lets get started with just importing as much of a request data that we can import from postman.

Currently, we can create a new file called 'import-postman-collections.js'. Once this is coming along well, we can move the importers to a separate package called as "bruno-importers"

UX:
Right now, clicking on import brings up a file selector. We need to bring up a modal that has 2 links.
One to import bruno collection, another to import postman collection.

As a user, I should be able to create ephermal requests.
When I click on the "+" icon, It should create a request with the name as "Untitled" and GET method with url being empty.
Upon clicking Save, it should show a location selector where I can select the folder where I want to save the request.

• User should be able to create, edit and delete
• Edit should open a nested modal
• Delete should ask for confirmation
• Create should also open a new modal
• Current workspace should cannot be deleted (disable delete button)

Currently if there is a schema validation error due to workspace or collection not matching the schema, we are not parsing the error thrown by yup.

We need to write a parser that can parse the errors and humanize the message

export const addWorkspace = (workspaceName) => (dispatch) => {
  const newWorkspace = {
    uid: uuid() + "junk",
    name: workspaceName
  };

  return new Promise((resolve, reject) => {
    workspaceSchema
      .validate(newWorkspace)
      .then(() => saveWorkspaceToIdb(window.__idb, newWorkspace))
      .then(() => dispatch(_addWorkspace({
        workspace: newWorkspace
      })))
      .then(resolve)
      .catch((err) => reject(parseError(err)));
  });
};

Bruno's layout is inspired by VSCode layout and colors.
For the dark theme colors, please refer the vscode dark theme.

Goal here is to get a dark theme out soon (based on vscode dark theme)

PS: In the future, we will add support for custom themes.

In dark mode body form input text color not visible enough. Refer the below screenshot.

I would like to contribute on this issue fix.

Is Code Request Generator will available in the future?

It would be great if there was a possibility to save or copy a response to the clipboard. The right click context menu also does not work in this field.