Refactor frontend main page and badge-example code #2441

paulmelnikow · 2018-12-03T03:02:18Z

The goal of this PR is:
- Consume the new service-definition format. (Service definition export format #2397)
- Make the frontend more readable.
Behavior changes:
- I changed the Image field in the markup modal to show only the path.
- I added another click-to-select field below that shows the complete URL.
- This made it easier to suppress the live badge preview while it contains placeholders like :user or :gem, a minor tweak discussed at namedParams are not interpolated in examples #2427 (comment).
- The search box now searches all categories, regardless of the current page. (This is an improvement, I would say.)
I did not deliberately address performance, though I ripped out a bunch of anonymous functions and avoided re-filtering all the examples by category on every render, which I expect will not hurt. I haven't really tested this on a mobile connection and it'd be worth doing that.
It would be great to have some tests of the components, though getting started with that seemed like a big project and I did not want to make this any larger than it already is.

It's a medium-sized refactor:

Replace BadgeExamples, Category and Badge component with a completely rewritten BadgeExamples component which renders a table of badges, and CategoryHeading and CategoryHeadings components.
Refactor ExamplesPage and SearchResults components into a new Main component.
Rewrite the data flow for MarkupModal. Rather than rely on unmounting and remounting the component to copy the badge URL into state, employ the getDerivedStateFromProps lifecycle method.
Remove prepareExamples and all-badge-examples.
Rewrite the $suggest schema to harmonize with the service definition format. It's not backward-compatible which means at deploy time there probably will be 10–20 minutes of downtime on that feature, between the first server deploy and the final gh-pages deploy. 🤷‍♂️ (We could leave the old version in place if it seems worth it.)
Added two new functions in make-badge-url with tests. I removed most of the uses of the old functions, but there are some in parts of the frontend I didn't touch like the static and dynamic badge generators, and again I didn't want to make this any larger than it already is.
Fix a couple bugs in the service-definition export.

shields-ci · 2018-12-03T03:03:19Z

	Messages
📖	✨ Thanks for your contribution to Shields, @paulmelnikow!
📖	Thanks for contributing to our documentation. We ❤️ our documentarians!

Generated by 🚫 dangerJS

paulmelnikow · 2018-12-03T03:13:11Z

This pull request introduces 1 alert when merging debfa46 into 0a6afb4 - view on LGTM.com

new alerts:

1 for Unused or undefined state property

Comment posted by LGTM.com

paulmelnikow · 2018-12-03T03:21:56Z

This pull request introduces 1 alert when merging ea2f1a4 into 0a6afb4 - view on LGTM.com

new alerts:

1 for Unused or undefined state property

Comment posted by LGTM.com

paulmelnikow · 2018-12-03T03:38:26Z

This pull request introduces 2 alerts when merging b475529 into 0a6afb4 - view on LGTM.com

new alerts:

1 for Useless assignment to local variable
1 for Unused or undefined state property

Comment posted by LGTM.com

chris48s

Nice one. A few minor bits. I think the main problematic thing is the documentation not rendering in the modals.

frontend/components/main.js

chris48s · 2018-12-08T15:14:56Z

frontend/lib/service-definitions/service-definition-set-helper.js

+  }
+
+  asNative() {
+    return this.definitionData


I find this method name a bit confusing

Would toArray() be better?

yeah, that seems more descriptive

frontend/components/markup-modal.js

Co-Authored-By: paulmelnikow <github@paulmelnikow.com>

paulmelnikow · 2018-12-08T19:04:59Z

This pull request introduces 2 alerts when merging 4409563 into 8a8311d - view on LGTM.com

new alerts:

1 for Useless assignment to local variable
1 for Unused or undefined state property

Comment posted by LGTM.com

paulmelnikow · 2018-12-08T19:25:47Z

This pull request introduces 2 alerts when merging 5240559 into 8a8311d - view on LGTM.com

new alerts:

1 for Useless assignment to local variable
1 for Unused or undefined state property

Comment posted by LGTM.com

paulmelnikow · 2018-12-08T20:01:06Z

This pull request introduces 1 alert when merging 74741f7 into 8a8311d - view on LGTM.com

new alerts:

1 for Unused or undefined state property

Comment posted by LGTM.com

chris48s

think this is good to go

paulmelnikow · 2018-12-08T20:25:47Z

Awesome. Thanks for reviewing!

shields-deployment · 2018-12-08T20:26:16Z

This pull request was merged to master branch. This change is now waiting for deployment, which will usually happen within a few days. Stay tuned by joining our #ops channel on Discord!

After deployment, changes are copied to gh-pages branch:

olivierlacan · 2018-12-12T15:28:21Z

Amazing work with all of this @paulmelnikow! 👏

paulmelnikow added 16 commits December 2, 2018 15:30

Minor readability improvements; null -> undefined

c9ba4dd

Get badge listing working

8126a1f

Markup modal working

e4379d9

Fix some problems with the service definition export

c7cad70

longCache is not really needed with static badges

30f2732

Suggestions working

4c7f351

examples-page -> main

6a0d3e3

Clean diff

79057ba

Fix tests, remove dead code

13fcbda

Fix suggest tests

564353a

Remove obsolete code

1b5a10f

Add test coverage for server code changes

37bfedd

Clean lint

bf4db6c

Avoid a runtime warning about uncontrolled components

866bba7

Remove unused dependency

11b4bcb

Remove dead code

9970aa9

paulmelnikow added frontend The React app and the infrastructure that supports it blocker PRs and epics which block other work labels Dec 3, 2018

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 3, 2018 03:05 Inactive

Silence the linter

debfa46

paulmelnikow force-pushed the frontend-example-refactor-2 branch from b9e63fd to debfa46 Compare December 3, 2018 03:06

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 3, 2018 03:06 Inactive

Try to fix the base URL on Heroku

ea2f1a4

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 3, 2018 03:15 Inactive

Restore section headings in search results

b475529

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 3, 2018 03:30 Inactive

chris48s reviewed Dec 8, 2018

View reviewed changes

Update frontend/components/main.js

1d31b62

Co-Authored-By: paulmelnikow <github@paulmelnikow.com>

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 8, 2018 17:50 Inactive

paulmelnikow added 2 commits December 8, 2018 13:28

Merge branch 'master' into frontend-example-refactor-2

79fbbe9

Fix issue with documentation not rendering

1a8feaf

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 8, 2018 18:57 Inactive

Rm console.log

4409563

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 8, 2018 18:59 Inactive

Add link to service def schema

63747a4

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 8, 2018 19:19 Inactive

asNative -> toArray

5240559

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 8, 2018 19:20 Inactive

Fix LGTM warning

9fba1aa

paulmelnikow temporarily deployed to shields-staging-pr-2441 December 8, 2018 19:50 Inactive

Try to fix another LGTM. was this a prettier induced error?

74741f7

paulmelnikow deployed to shields-staging-pr-2441 December 8, 2018 19:55 View deployment

chris48s approved these changes Dec 8, 2018

View reviewed changes

paulmelnikow merged commit 58b2765 into master Dec 8, 2018

paulmelnikow deleted the frontend-example-refactor-2 branch December 8, 2018 20:26

chris48s mentioned this pull request Dec 9, 2018

Path in modal should work with URL base #2495

Closed

3 tasks

paulmelnikow mentioned this pull request Dec 10, 2018

Better modal popup #2496

Closed

12 tasks

chris48s mentioned this pull request Dec 11, 2018

Fix for confusing path behavior in modal #2499

Closed

This was referenced Jan 8, 2019

Better modal #2554

Merged

Add frontend prop-type validation for the service definition schema #2702

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor frontend main page and badge-example code #2441

Refactor frontend main page and badge-example code #2441

paulmelnikow commented Dec 3, 2018 •

edited

Loading

shields-ci commented Dec 3, 2018

paulmelnikow commented Dec 3, 2018

paulmelnikow commented Dec 3, 2018

paulmelnikow commented Dec 3, 2018

chris48s left a comment

chris48s Dec 8, 2018

paulmelnikow Dec 8, 2018

chris48s Dec 8, 2018

paulmelnikow commented Dec 8, 2018

paulmelnikow commented Dec 8, 2018

paulmelnikow commented Dec 8, 2018

chris48s left a comment

paulmelnikow commented Dec 8, 2018

shields-deployment bot commented Dec 8, 2018

olivierlacan commented Dec 12, 2018

Refactor frontend main page and badge-example code #2441

Refactor frontend main page and badge-example code #2441

Conversation

paulmelnikow commented Dec 3, 2018 • edited Loading

shields-ci commented Dec 3, 2018

paulmelnikow commented Dec 3, 2018

paulmelnikow commented Dec 3, 2018

paulmelnikow commented Dec 3, 2018

chris48s left a comment

Choose a reason for hiding this comment

chris48s Dec 8, 2018

Choose a reason for hiding this comment

paulmelnikow Dec 8, 2018

Choose a reason for hiding this comment

chris48s Dec 8, 2018

Choose a reason for hiding this comment

paulmelnikow commented Dec 8, 2018

paulmelnikow commented Dec 8, 2018

paulmelnikow commented Dec 8, 2018

chris48s left a comment

Choose a reason for hiding this comment

paulmelnikow commented Dec 8, 2018

shields-deployment bot commented Dec 8, 2018

olivierlacan commented Dec 12, 2018

paulmelnikow commented Dec 3, 2018 •

edited

Loading