Merge branch 'main' into update-dependencies

README.md

@@ -10,13 +10,27 @@ The TicketHub sample application to show off using the Styra OPA SDKs:
 
 ## Running the Tickethub app
 
+To run the Tickethub app you need to select which server and client implementations to use when running `docker compose up`
+
 ```
-docker compose --profile node up
+docker compose --profile <SERVER_IMPLEMENTATION> --profile <CLIENT_IMPLEMENTATION> up
 ```
 
+The list of `<SERVER_IMPLEMENTATION>` is:
+- `node`
+
+The list of `<CLIENT_IMPLEMENTATION>` is:
+- `html`
+- `react`
+
+So for example, running the `node` server with `react` would result in:
+
 ```
-cd client/react
-make run
+docker compose --profile node --profile react up
 ```
 
-Then open the browser at `http://localhost:3000`
+Then open the browser at `http://localhost:3000`
+
+> [!WARNING] Using docker compose requires `networking_mode: host`. 
+> This is disabled by default on MacOS and Windows for Docker Desktop.
+> See the [Docker Desktop documentation](https://docs.docker.com/network/drivers/host/) for information on how to enable this mode.

client/html/public/new_ticket.html

@@ -6,7 +6,7 @@
   <title>New Ticket</title>
   <link rel="stylesheet" type="text/css" href="/stylesheets/style.css"/>
 
-  <script type="module" src="/scripts/login.js"></script>  
+  <script type="module" src="/scripts/login.js"></script>
   <script>
     async function createTicket (event) {
       event.preventDefault();
@@ -34,7 +34,6 @@ <h1 id="tenant"></h1>
         <div class="option"><a href="/tickets">Tickets</a></div>
         <div class="divider option-selected">/</div>
         <div class="option option-selected">New</div>
-        <div class="divider">|</div><div class="option"><a href="/admin">Admin</a></div>
       </div>
     </div>
     <div id="login-menu" class="login-menu"></div>
@@ -54,4 +53,4 @@ <h1 id="tenant"></h1>
     </form>
   </main>
 </body>
-</html>
+</html>

client/html/public/scripts/login.js

@@ -1,4 +1,4 @@
-import accounts from './users.js'
+import accounts from "./users.js";
 
 initialize();
 
@@ -12,47 +12,52 @@ function initialize() {
 function displayUsers() {
   let [currentAccount] = accounts;
 
-  document.cookie.split('; ').forEach((cookie) => {
-    const [cookieName, cookieValue] = cookie.split('=');
-    if (cookieName === 'user') {
+  document.cookie.split("; ").forEach((cookie) => {
+    const [cookieName, cookieValue] = cookie.split("=");
+    if (cookieName === "user") {
       currentAccount = cookieValue;
     }
-  })
+  });
 
-  const menu = document.getElementById('login-menu');
+  const menu = document.getElementById("login-menu");
   const tenantUsers = accounts.reduce((tenantUsers, account) => {
-    const [tenant, user] = account.split('/').map((account) => account.trim());
+    const [tenant, user] = account.split("/").map((account) => account.trim());
     tenantUsers[tenant] ??= [];
-    tenantUsers[tenant].push({account, name: user});
+    tenantUsers[tenant].push({ account, name: user });
     return tenantUsers;
   }, {});
 
-  const [currentTenant, currentUser] = currentAccount.split('/').map((account) => account.trim());
+  const [currentTenant, currentUser] = currentAccount
+    .split("/")
+    .map((account) => account.trim());
 
   menu.innerHTML = `\
   <form id="login">
     <label for="account-select">User</label>
     <select id="account-select" name="account" class="account" onchange="login(true)">
-      ${Object.entries(tenantUsers).map(([tenant, users]) => 
-        `<optgroup label="${tenant}">
-          ${users.map(({name, account}) => {
+      ${Object.entries(tenantUsers)
+        .map(
+          ([tenant, users]) =>
+            `<optgroup label="${tenant}">
+          ${users.map(({ name, account }) => {
             const selected = currentTenant === tenant && currentUser === name;
-            return `<option ${selected ? 'selected' : ''} value="${account}">${name}</option>`;
+            return `<option ${selected ? "selected" : ""} value="${account}">${name}</option>`;
           })}
-        </optgroup>`
-      ).join('')}
+        </optgroup>`,
+        )
+        .join("")}
     </select>
   </form>`;
 
   // Update tenant
   document.title = `${document.title} - ${currentTenant}`;
-  document.getElementById('tenant').textContent = currentTenant;
+  document.getElementById("tenant").textContent = currentTenant;
 }
 
 function login(reload) {
-  const [user] = document.getElementsByName('account');
+  const [user] = document.getElementsByName("account");
   document.cookie = `user=${user.value}; Path=/; SameSite=Lax`;
   if (reload) {
     location.reload();
   }
-}
+}

client/html/public/scripts/users.js

@@ -1,8 +1,8 @@
 export default [
-    "acmecorp / alice",
-    "acmecorp / bob",
-    "acmecorp / cesar",
-    "hooli / dylan",
-    "hooli / eva",
-    "hooli / frank",
-  ]
+  "acmecorp / alice",
+  "acmecorp / bob",
+  "acmecorp / cesar",
+  "hooli / dylan",
+  "hooli / eva",
+  "hooli / frank",
+];

client/html/public/stylesheets/style.css

@@ -1,119 +1,125 @@
 :root {
-  box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 16px;
-  margin: 30px;
-  color: dimgray;
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-size: 16px;
+    margin: 30px;
+    color: dimgray;
 }
 
 select {
-  height: 30px;
-  border: none;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.2), 0 1px 2px rgba(17, 20, 24, 0.1);
-  padding: 5px 0 5px 7px;
-  cursor: pointer;
-}
-
-button, .button-large {
-  cursor: pointer;
-  height: 30px;
-  border: none;
-  background: whitesmoke;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.2), 0 1px 2px rgba(17, 20, 24, 0.1);
-  padding: 5px 10px;
-  text-decoration: none;
-  color: initial;
-  font-size: 16px;
+    height: 30px;
+    border: none;
+    border-radius: 2px;
+    box-shadow:
+        inset 0 0 0 1px rgba(17, 20, 24, 0.2),
+        0 1px 2px rgba(17, 20, 24, 0.1);
+    padding: 5px 0 5px 7px;
+    cursor: pointer;
+}
+
+button,
+.button-large {
+    cursor: pointer;
+    height: 30px;
+    border: none;
+    background: whitesmoke;
+    border-radius: 2px;
+    box-shadow:
+        inset 0 0 0 1px rgba(17, 20, 24, 0.2),
+        0 1px 2px rgba(17, 20, 24, 0.1);
+    padding: 5px 10px;
+    text-decoration: none;
+    color: initial;
+    font-size: 16px;
 }
 
 button[disabled] {
-  color: gray;
-  cursor: not-allowed;
-  box-shadow: none;
-  background-color: gainsboro;
+    color: gray;
+    cursor: not-allowed;
+    box-shadow: none;
+    background-color: gainsboro;
 }
 
 label {
-  color: black;
+    color: black;
 }
 
 /* nav */
 
 nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
 }
 
 nav h1 {
-  margin: 0;
-  margin-bottom: 5px;
+    margin: 0;
+    margin-bottom: 5px;
 }
 
 .nav-menu {
-  display: flex;
-  gap: 10px;
+    display: flex;
+    gap: 10px;
 }
 
 #login label {
-  color: dimgray;
+    color: dimgray;
 }
 
 #login-menu {
-  display: flex;
-  gap: 10px;
+    display: flex;
+    gap: 10px;
 }
 
 #account-select {
-  font-size: 16px;
-  min-width: 120px;
+    font-size: 16px;
+    min-width: 120px;
 }
 
 /* main */
 
 main {
-  margin-top: 30px;
+    margin-top: 30px;
 }
 
 table {
-  border-collapse: collapse;
+    border-collapse: collapse;
 }
 
 thead > tr {
-  border-bottom: solid 1px lightgray;
-  color: black;
+    border-bottom: solid 1px lightgray;
+    color: black;
 }
 
 tr {
-  vertical-align: baseline;
-  text-align: left;
+    vertical-align: baseline;
+    text-align: left;
 }
 
-th, td {
-  text-align: left;
-  font-weight: normal;
-  padding: 16px 24px;
+th,
+td {
+    text-align: left;
+    font-weight: normal;
+    padding: 16px 24px;
 }
 
 .form-grid {
-  display: grid;
-  grid-template-columns: 150px auto;
-  row-gap: 30px;
-  max-width: 500px;
+    display: grid;
+    grid-template-columns: 150px auto;
+    row-gap: 30px;
+    max-width: 500px;
 }
 
 .update-status {
-  color: black;
-  font-weight: 600;
+    color: black;
+    font-weight: 600;
 }
 
 #ticket-list {
-  margin-bottom: 30px;
+    margin-bottom: 30px;
 }
 
 #ticket-list tbody > tr:hover {
-  background: gainsboro;
-  cursor: pointer;
-}
+    background: gainsboro;
+    cursor: pointer;
+}