wp-api-console icon indicating copy to clipboard operation
wp-api-console copied to clipboard

Add ability to share urls.

Open yansern opened this issue 1 year ago • 2 comments

Update: I didn't realize there was another PR working on a similar feature here until I submitted this PR. https://github.com/Automattic/wp-api-console/pull/106

Update 2: I looked into the other PR and I would say the approach taken in this PR is more feature complete. This PR supports restoring the endpoint selected from suggestion dropdown, and the path values of those selected endpoint and also the query params from filled from the UI.

Description

This PR generates a shareable URL and pushes the browser history state when the "Run Endpoint" button is clicked, allowing the URL to be copied from the address bar and shared to colleagues.

In order to achieve this, I created a redux middleware called router that would encode and decode relevant states to and from URLs.

Test Instructions

  1. You can test this with the following urls and you can see the values prefilled:

    • Manual URL with different API & Version chosen: http://localhost:3000/?method=GET&url=%252Fsites%252F201582167%252Fsubscribers&api=WP%2520REST%2520API&version=wpcom%252Fv2
    • Selected from endpoint suggestion with path values & query params filled: http://localhost:3000/?endpoint=%252Fsites%252F%2524site%252Fcomments%252F%2524comment_ID&method=GET&pathValues=%257B%2522%2524site%2522%253A%2522201582167%2522%257D&queryParams=%257B%2522http_envelope%2522%253A%25220%2522%252C%2522fields%2522%253A%2522ID%252Cpost%252CURL%252Cshort_URL%252Ccontent%2522%252C%2522meta%2522%253A%2522post%252Clikes%2522%252C%2522pretty%2522%253A%2522false%2522%257D&api=WP.COM%2520API&version=v1.1
      • This will take a couple of seconds to load (as it needs to load the endpoints directory first). So it will look like nothing is filled for a few seconds until you see it filled on the screen.
  2. Test entering the URLs signed-out, and then sign-in. After signing-in, you should be redirected back to the same url with all the params intact.

Additional notes

  • The endpoint doesn't automatically run on page load. It only prefills everything for you. User is expected to click on the "Run Endpoint" button themselves. :)
  • Pressing "Back" currently does not restore previous state as I foresaw additional complexity around this when trying to implement this and I thought its best left for another PR. User can just refresh the page for now.

Screenshots

image image

yansern avatar Sep 14 '23 18:09 yansern

I have yet to test it, but it looks great! It's way simpler than my PR. 👍

valterlorran avatar Sep 22 '23 12:09 valterlorran

@TimBroddin discovered that the existing implementation of state persistence needsStoring = nextState === state; is most likely incorrect, as it should be needsStoring = nextState !== state;.

At the same time, I'd like to ensure that loading initial state from param also takes in considering of existing data in local storage, which may already have endpoints data loaded, which will shave off a couple of seconds on repeat pageload.

Will continue refining this PR. We're in no rush.

yansern avatar Sep 23 '23 03:09 yansern