Make the support matrix filter filter, and search operation names - #65
Merged
Merged
Conversation
The support matrix filter updated its count and left every row on screen. The script toggled the `hidden` class, and each row's own `flex` and `sm:grid` won the cascade. Rows now take the `hidden` attribute, which preflight backs with `!important`. With the filter working, the rest of the page is built around using it: - Clearing it: an × in the field, Esc, a "Clear filters" link beside the count, and a second one in the empty state. - Operation names: `PutBucketCors`, `put bucket` or `tag` finds the services that list the operation, with the matching operations and their status under the row. A match has to start at a word in the CamelCase name, so "tag" finds TagResource and not CreateStage. Partial and unsupported operations sort first, ahead of "+N more", since the question is usually whether a call will work. - Looser name matching: every word has to match, against the name and a form with punctuation removed, so `cloud logs`, `cloudwatch-logs` and `CloudWatchLogs` all find CloudWatch Logs. The matched part of the name is highlighted. - All / Has gaps / Complete toggles, whose counts follow the text filter. Pressing the active one again returns to All. - The query, toggle and sort live in the URL (`?q=bucket&show=gaps&sort=gaps`), so a filtered view can be linked and survives the back button from a service page. The operation names are ~1,500 strings most visits never use, so they are served from `/support/operations.json`, built from the same support manifest as the page, and fetched on intent: the first hover or focus on the filter, or on load when the URL carries a query. The page is 21.4 KB gzipped (30.4 KB with the names inline) and the JSON is 8.2 KB. Service names match immediately; while the names are in flight the count says so and the empty state waits. A failed fetch leaves service-name matching working and is retried on the next focus. Checked with `npm run check`, `npm run build` and `npm test`, and in the browser against the built site at desktop and phone widths: filtering, both clears, Esc, the toggles, sorting, URL restore, no request on page load, one on focus and none on refocus. The failed-fetch path was not exercised.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The support matrix filter updated its count and left every row on screen. The script
toggled the
hiddenclass, and each row's ownflexandsm:gridwon the cascade. Rowsnow take the
hiddenattribute, which preflight backs with!important.With the filter working, the rest of the page is built around using it:
second one in the empty state.
PutBucketCors,put bucketortagfinds the services that list theoperation, with the matching operations and their status under the row. A match has to
start at a word in the CamelCase name, so "tag" finds TagResource and not CreateStage.
Partial and unsupported operations sort first, ahead of "+N more", since the question is
usually whether a call will work.
punctuation removed, so
cloud logs,cloudwatch-logsandCloudWatchLogsall findCloudWatch Logs. The matched part of the name is highlighted.
active one again returns to All.
?q=bucket&show=gaps&sort=gaps), so afiltered view can be linked and survives the back button from a service page.
The operation names are ~1,500 strings most visits never use, so they are served from
/support/operations.json, built from the same support manifest as the page, and fetchedon intent: the first hover or focus on the filter, or on load when the URL carries a query.
The page is 21.4 KB gzipped (30.4 KB with the names inline) and the JSON is 8.2 KB. Service
names match immediately; while the names are in flight the count says so and the empty
state waits. A failed fetch leaves service-name matching working and is retried on the next
focus.
Checked with
npm run check,npm run buildandnpm test, and in the browser against thebuilt site at desktop and phone widths: filtering, both clears, Esc, the toggles, sorting,
URL restore, no request on page load, one on focus and none on refocus. The failed-fetch
path was not exercised.