Refactor test console ahead of upcoming auth changes #6

efixler · 2024-07-12T16:03:23Z

This PR makes some organizational changes to the test console preceding disabling open access to the test console via a short-lived token and requiring users to enter a token. No functional changes in this release, just tweaking the html/js/css.

Main changes here:

Remove the iframe that was previously the response target and replace it with a div
Update the HTML/CSS with a more coherent box model
Incorporate AlpineJS and bind the form submission to the Alpine lifecycle (and evaluate and learn Alpine)

Steps to Test

Again, no functional changes in this release, so it should operate exactly as https://stage.scrape.mozsoc-ml.nonprod.dataservices.mozgcp.net with some extremely minor visual changes.

Building this PR

Check out the branch

Without Go on your machine

In the branch root:
- make docker-build
- make docker-run

With Go 1.22.x on your machine

In the branch root:
- make
- ./build/scrape-server

Testing this PR

Point your browser to http://127.0.0.1:8080
Enter a url in the Enter a URL text field (like https://arstechnica.com/gadgets/2024/07/arduinos-plug-and-make-kit-lets-your-hacking-imagination-run-wild-sans-solder/)
Click "Hit It"
You should see metadata from the web page in the big text area
Using the same URL, try the Headless and Feed options from the pulldown. You should see errors in the big text area.
(For Feed, if you enter a valid RSS feed you should get results. Headless will work on mozgcp.net, but not in the local build you just made)

References and Decisions

In general, keeping the html simple and self-contained here is more important than download size/performance at this time. Hence everything is inline right now.
For more info about AlpineJS see here. Moving forward, this view will get more interactive, so I'm evaluating Alpine as a lightweight tool to use for these cases.

- Use Alpine JS to submit form

efixler · 2024-07-12T18:45:07Z

Comment from maxx (autocomplete not working) copied from Slack, will answer inline:

Does this need to be fully-responsive?

I'm not exactly sure what is precisely meant by the question, but I think I'd say it should be "pretty responsive", by which I mean that I expect it to be used generally at desktop dimensions and it should reasonably adjust for those. In particular, the metadata can be big so I want to make sure that we use the max available space for that and let the user adjust their browser if they want the text display to be wider or narrower.

It's certainly not going to win any beauty contests right now and it doesn't need to. If you have suggestions for how I can better handle resizing [within the constraint that this is intended to be very simple and as close to depedency-free as I can reasonably make it], I'd love suggestions.

Are there future UI bits going into it?

The next part is just to let the user add their own token, which I'll probably make hideable and storable if hey want it to be, just to reduce hassle (my #1 goal here is that it should be easy to get to to test and verify url output). No concrete plans beyond that.

Is there any other tool this sits next to that should "match" styles?

Nope :)

maxxcrawford

I had a few suggestions and questions, but overall, this is great as is. Thanks!

maxxcrawford · 2024-07-12T19:03:18Z

internal/server/templates/index.html

 <label for="url">Enter a URL:</label>
 <input type="submit" value="Hit It">
 <input type="url" name="url" id="url" value="https://" size="96" maxlength="200" pattern="https?://.*" required title="URL">
-<select title="URL Type" id="actionSelect" onchange="updateFormAction()">
+<select title="URL Type" x-model="formAction">


UX Suggestion: Swap the placement of the <input type="submit"> and <select> tag.

Having the submit button before the text input and URL type is a bit of an anti-pattern.

I'm glad the above worked with the trailing paren!

And great suggestion!

Made this change in 7362a59, I think it's tight!

maxxcrawford · 2024-07-12T19:12:21Z

internal/server/templates/index.html

+					headers.append('Authorization', `Bearer ${token}`);
+				}
+				const formData = new FormData(form);
+				formData.delete('token');


Question: Why does the token deleted from the formData here?

Only because we don't need to submit it with the form, it needs to go as a header. In the next PR I intend to pull that out of the form entirely.

maxxcrawford · 2024-07-12T19:15:19Z

internal/server/templates/index.html

+		.response-container {
+			width: 100%;
+			min-width: 768px;
+			flex: 1;
+			overflow: auto;
+			border: 0.1rem inset #ccc;
+			padding-block: 0.2rem;
+			padding-inline: 0.4rem;
+			box-sizing: border-box;
+		}


Question/suggestion: Will users need to copy result contents?

If so, we might add user-select: all or another method to make the text inside more easily selectable for copy/pasting.

Suggested change

.response-container {

width: 100%;

min-width: 768px;

flex: 1;

overflow: auto;

border: 0.1rem inset #ccc;

padding-block: 0.2rem;

padding-inline: 0.4rem;

box-sizing: border-box;

}

.response-container {

width: 100%;

min-width: 768px;

flex: 1;

overflow: auto;

border: 0.1rem inset #ccc;

padding-block: 0.2rem;

padding-inline: 0.4rem;

box-sizing: border-box;

user-select: all

}

There's no use case for that right now, it is a good idea tho. At some point (probably not in the near future due to time constraints) I hope to break this down into a different sort of display

I tried this out and decided that it's better to let the user copy text at-will from the box (like if you want an image url). I did make the param explicit with text.

maxxcrawford · 2024-07-12T19:17:03Z

internal/server/templates/index.html

+		pre {
+			white-space: pre-wrap;
+			width: 100%;
+		}
 		label {
 			display: block;
 			font: 1rem 'Verdana'


(nit) Suggestion: Add multiple font families for better font choice fallback.

font-family: Verdana, Arial, Helvetica, sans-serif;

Updated in 7362a59

internal/server/templates/index.html

efixler · 2024-07-15T16:33:49Z

Does this need to be fully-responsive?

Preview: the page's responsiveness overall, and particularly the url entry form, are much better in #7

maxxcrawford

Runs great! Thanks for answering my questions as well. 🚀

* Refactor test console ahead of upcoming auth changes (#6) * Add token entry/storage functionality to test console (#7)

efixler added 4 commits July 11, 2024 22:58

Working Alpine, with iframe

ffecac3

- Remove iframe

2a13044

- Use Alpine JS to submit form

Update CSS box model

25fc6a7

Re-hide the token field to cut this PR before material auth changes

feb5392

maxxcrawford reviewed Jul 12, 2024

View reviewed changes

Review feedback

7362a59

efixler requested a review from maxxcrawford July 15, 2024 13:30

efixler mentioned this pull request Jul 15, 2024

Add token entry/storage functionality to test console #7

Merged

maxxcrawford approved these changes Jul 15, 2024

View reviewed changes

efixler merged commit 0e48c95 into main Jul 15, 2024
1 check passed

efixler added a commit that referenced this pull request Jul 16, 2024

Merge test console changes upstream (efixler#35)

c58bb5a

* Refactor test console ahead of upcoming auth changes (#6) * Add token entry/storage functionality to test console (#7)

This was referenced Jul 17, 2024

Token entry on homepage efixler/scrape#37

Merged

Don't autogenerate access token on homepage. #8

Closed

efixler deleted the token-on-index branch August 13, 2024 10:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor test console ahead of upcoming auth changes #6

Refactor test console ahead of upcoming auth changes #6

efixler commented Jul 12, 2024 •

edited

Loading

efixler commented Jul 12, 2024

maxxcrawford left a comment

maxxcrawford Jul 12, 2024

efixler Jul 12, 2024

efixler Jul 12, 2024

efixler Jul 13, 2024 •

edited

Loading

maxxcrawford Jul 12, 2024

efixler Jul 12, 2024 •

edited

Loading

maxxcrawford Jul 12, 2024

efixler Jul 12, 2024

efixler Jul 13, 2024

maxxcrawford Jul 12, 2024

efixler Jul 13, 2024

efixler commented Jul 15, 2024

maxxcrawford left a comment

Refactor test console ahead of upcoming auth changes #6

Refactor test console ahead of upcoming auth changes #6

Conversation

efixler commented Jul 12, 2024 • edited Loading

Steps to Test

Building this PR

Without Go on your machine

With Go 1.22.x on your machine

Testing this PR

References and Decisions

efixler commented Jul 12, 2024

maxxcrawford left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

efixler Jul 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

efixler Jul 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

efixler commented Jul 15, 2024

maxxcrawford left a comment

Choose a reason for hiding this comment

efixler commented Jul 12, 2024 •

edited

Loading

efixler Jul 13, 2024 •

edited

Loading

efixler Jul 12, 2024 •

edited

Loading