-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MWPW-158345 Decode CaaS Config (#247)
* MWPW-158345 Decode Multiple CaaS Configs from Query Index
- Loading branch information
Showing
5 changed files
with
654 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
# URL Decode Validator | ||
|
||
This block validates that a CaaS indexed URL is able to be decoded. | ||
|
||
## Use Case | ||
|
||
Select a locale to fetch the query index from. | ||
The block will then attempt to decode the URL and return the result in a table. | ||
|
||
## Process | ||
|
||
1. **Fetch Query Index**: The block fetches the index (`query-index.json`) based on the selected locale. | ||
2. **Decode URLs**: The URLs from the fetched JSON are decoded using the `validateDecodedUrls` function. | ||
3. **Validation**: Each decoded URL is validated to check if it can be successfully decoded and accessed. | ||
4. **Generate Report**: The results are compiled into a table | ||
|
||
## Generate Report | ||
|
||
The URL Decode block will create a table with the following columns: | ||
|
||
- `path`: The page where the CaaS links are indexed from. | ||
- `valid`: Status of the URL decode (true if all links are valid, false otherwise). | ||
- `message`: Detailed message about the validation status. | ||
- `count`: Number of URLs decoded. | ||
|
||
## Validation Process | ||
|
||
Each entry in the query index processed by parsing the caas-url column and looping through each URL. Each URL is decoded using the `parseEncodedConfig` or `decodeCompressedString` function. If any of the URLs are not able to be decoded, the validation will fail. | ||
|
||
## Decode URLs output | ||
|
||
The `decodeUrls` function is designed to decode an array of URLs or a single URL from a JSON string. It attempts to decode each URL using the `decodeUrl` function and returns an array of decoded configurations. If a URL cannot be decoded, null is returned for that URL. | ||
|
||
Example output: | ||
|
||
```json | ||
[ | ||
{ | ||
"decodedKey1": "decodedValue1", | ||
"decodedKey2": "decodedValue2" | ||
}, | ||
null | ||
] | ||
``` |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,182 @@ | ||
.url-decode { | ||
--color-error: #c9252d; | ||
--color-border: #d5d5d5; | ||
--color-hover: #F0F0F0; | ||
--color-active: #E5E5E5; | ||
|
||
font-size: 14px; | ||
padding: 20px; | ||
} | ||
|
||
.url-decode .options, | ||
.url-decode .ribbon { | ||
display: flex; | ||
justify-content: space-between; | ||
margin-bottom: 20px; | ||
} | ||
|
||
.url-decode .ribbon { | ||
border-bottom: solid 1px var(--color-border); | ||
} | ||
|
||
.url-decode .options p, | ||
.url-decode .ribbon p { | ||
margin: 0; | ||
} | ||
|
||
.url-decode .ribbon .error { | ||
color: var(--color-error); | ||
font-weight: bold; | ||
} | ||
|
||
.url-decode .options label { | ||
margin: 0 5px; | ||
} | ||
|
||
.url-decode .table { | ||
border: solid 1px var(--color-border); | ||
padding: 0 10px; | ||
max-height: 80vh; | ||
overflow: auto; | ||
} | ||
|
||
.url-decode table { | ||
width: 100%; | ||
border-spacing: 0; | ||
overflow: scroll; | ||
} | ||
|
||
.url-decode tr { | ||
margin-bottom: 0; | ||
font-size: 14px; | ||
align-items: center; | ||
} | ||
|
||
.url-decode tr th { | ||
max-width: 25vw; | ||
background: var(--color-white); | ||
color: var(--color-black); | ||
cursor: pointer; | ||
} | ||
|
||
.url-decode tbody tr td { | ||
max-width: 100vw; | ||
} | ||
|
||
.url-decode thead { | ||
position: sticky; | ||
top: -3px; | ||
background: var(--color-white); | ||
} | ||
|
||
.url-decode tbody th { | ||
position: sticky; | ||
left: 0; | ||
} | ||
|
||
.url-decode thead tr th { | ||
padding: 10px 16px; | ||
font-size: 14px; | ||
font-weight: bold; | ||
letter-spacing: 1px; | ||
z-index: 1; | ||
} | ||
|
||
.url-decode tbody tr th, | ||
.url-decode tbody tr td { | ||
font-size: 14px; | ||
text-align: left; | ||
vertical-align: top; | ||
border: 1px solid var(--color-border); | ||
background: var(--color-white); | ||
color: #222; | ||
padding: 14px 16px; | ||
} | ||
|
||
.url-decode tr th:hover { | ||
background: var(--color-hover); | ||
} | ||
|
||
.url-decode tr th:active, | ||
.url-decode tr th.sorted { | ||
background: var(--color-active); | ||
} | ||
|
||
.url-decode tr th.sorted::after { | ||
position: relative; | ||
color: #888; | ||
margin-left: 5px; | ||
} | ||
|
||
.url-decode tr th.sorted-desc::after { | ||
content: "▼"; | ||
} | ||
|
||
.url-decode tr th.sorted-asc::after { | ||
content: "▲"; | ||
} | ||
|
||
.url-decode.centered tbody tr td { | ||
text-align: center; | ||
} | ||
|
||
.url-decode thead tr th:first-child { | ||
left: 0; | ||
z-index: 2; | ||
} | ||
|
||
.url-decode tbody tr.cta-row th, | ||
.url-decode tbody tr.cta-row td { | ||
border: none; | ||
} | ||
|
||
.url-decode tbody tr:not(.cta-row):hover th, | ||
.url-decode tbody tr:not(.cta-row):hover td { | ||
background-color: var(--color-hover); | ||
} | ||
|
||
.url-decode tbody tr:not(.cta-row):active th, | ||
.url-decode tbody tr:not(.cta-row):active td { | ||
background-color: var(--color-active); | ||
} | ||
|
||
.url-decode table thead tr:first-child th:first-child { | ||
border-top-left-radius: 5px; | ||
} | ||
|
||
.url-decode table thead tr:first-child th:last-child { | ||
border-top-right-radius: 5px; | ||
} | ||
|
||
.url-decode table tbody tr:last-child th:first-child { | ||
border-bottom-left-radius: 5px; | ||
} | ||
|
||
.url-decode table tbody tr:last-child td:last-child { | ||
border-bottom-right-radius: 5px; | ||
} | ||
|
||
.url-decode svg.icon-milo { | ||
position: initial; | ||
} | ||
|
||
@media screen and (min-width: 1200px) { | ||
.url-decode tr th { | ||
background: transparent; | ||
color: inherit; | ||
} | ||
|
||
.url-decode tbody tr.cta-row th, | ||
.url-decode tbody tr.cta-row td { | ||
background: transparent; | ||
color: inherit; | ||
} | ||
|
||
.url-decode table tbody tr:first-child th:first-child { | ||
border-top-left-radius: 5px; | ||
} | ||
|
||
.url-decode table tbody tr:first-child td:last-child { | ||
border-top-right-radius: 5px; | ||
} | ||
} |
Oops, something went wrong.