MWPW-158345 Decode CaaS Config (#247)

* MWPW-158345 Decode Multiple CaaS Configs from Query Index

blocks/url-decode/readme.md

@@ -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
+]
+```

blocks/url-decode/url-decode.css

@@ -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;
+  }
+}