From 0f26f55019679014dc9de10872a15eea2edbb3c0 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Feb 2023 12:31:21 +0000
Subject: [PATCH] some style updates for the sidebar

---
 .../_components/ViewDetailsRenderer.svelte    |  2 +-
 .../portal/account/auditLogs/index.svelte     | 61 +++++++++++++++----
 packages/frontend-core/src/api/auditLogs.js   |  6 +-
 3 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/ViewDetailsRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/ViewDetailsRenderer.svelte
index a222871966..b62ee48cb8 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/ViewDetailsRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/ViewDetailsRenderer.svelte
@@ -10,4 +10,4 @@
   }
 </script>
 
-<ActionButton size="S" on:click={onClick}>Edit</ActionButton>
+<ActionButton size="S" on:click={onClick}>Details</ActionButton>
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
index 09b8466d8e..821e504774 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte
@@ -55,8 +55,10 @@
   let prevLogSearch = undefined
   let selectedUsers = []
   let selectedApps = []
+  let selectedEvents = []
   let selectedLog
   let sidePanelVisible = false
+  let wideSidePanel = false
   let startDate, endDate
 
   $: fetchUsers(userPage, userSearchTerm)
@@ -66,7 +68,8 @@
     startDate,
     endDate,
     selectedUsers,
-    selectedApps
+    selectedApps,
+    selectedEvents
   )
 
   $: userPage = $userPageInfo.page
@@ -100,7 +103,8 @@
     startDate,
     endDate,
     selectedUsers,
-    selectedApps
+    selectedApps,
+    selectedEvents
   ) => {
     if ($logsPageInfo.loading) {
       return
@@ -120,6 +124,7 @@
         metadataSearch: search,
         userIds: selectedUsers,
         appIds: selectedApps,
+        events: selectedEvents,
       })
       logsPageInfo.fetched(
         $auditLogs.logs.hasNextPage,
@@ -225,7 +230,7 @@
           autocomplete
           placeholder="All apps"
           label="App"
-          getOptionValue={app => "app_dev_" + app.appId}
+          getOptionValue={app => app.instance._id}
           getOptionLabel={app => app.name}
           options={$apps}
           bind:value={selectedApps}
@@ -239,6 +244,7 @@
           options={Object.entries($auditLogs.events)}
           placeholder="All events"
           label="Event"
+          bind:value={selectedEvents}
         />
       </div>
     </div>
@@ -266,23 +272,35 @@
 {#if selectedLog}
   <div
     id="side-panel"
+    class:wide={wideSidePanel}
     class:visible={sidePanelVisible}
     use:clickOutside={() => {
       sidePanelVisible = false
     }}
   >
     <div class="side-panel-header">
-      Audit Logs
-      <Icon
-        hoverable
-        name="Close"
-        on:click={() => {
-          sidePanelVisible = false
-        }}
-      />
+      Audit Log
+      <div class="side-panel-icons">
+        <Icon
+          size="S"
+          hoverable
+          name={wideSidePanel ? "Minimize" : "Maximize"}
+          on:click={() => {
+            wideSidePanel = !wideSidePanel
+          }}
+        />
+        <Icon
+          hoverable
+          name="Close"
+          on:click={() => {
+            sidePanelVisible = false
+          }}
+        />
+      </div>
     </div>
     <div style="padding-top: 10px; height: 95%">
       <CoreTextArea
+        disabled
         minHeight={"300px"}
         height={"100%"}
         value={JSON.stringify(selectedLog.metadata, null, 2)}
@@ -319,6 +337,22 @@
     transform: translateX(0);
   }
 
+  #side-panel.wide {
+    width: 500px;
+  }
+
+  #side-panel :global(textarea) {
+    min-height: 202px !important;
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    color: var(
+      --spectrum-textfield-m-text-color,
+      var(--spectrum-alias-text-color)
+    );
+  }
+
   .search :global(.spectrum-InputGroup) {
     width: 100px;
   }
@@ -331,6 +365,11 @@
     align-items: flex-end;
   }
 
+  .side-panel-icons {
+    display: flex;
+    gap: var(--spacing-l);
+  }
+
   .select {
     flex-basis: 130px;
     width: 0;
diff --git a/packages/frontend-core/src/api/auditLogs.js b/packages/frontend-core/src/api/auditLogs.js
index 35c5a59c1f..745bfbc742 100644
--- a/packages/frontend-core/src/api/auditLogs.js
+++ b/packages/frontend-core/src/api/auditLogs.js
@@ -4,7 +4,7 @@ const buildOpts = ({
   startDate,
   endDate,
   metadataSearch,
-  event,
+  events,
 }) => {
   const opts = {}
 
@@ -17,8 +17,8 @@ const buildOpts = ({
     opts.metadataSearch = metadataSearch
   }
 
-  if (event) {
-    opts.event = event
+  if (events) {
+    opts.event = events
   }
 
   if (userIds) {