From 7e7b796450b4afa6e1b4a7028e23cb9cdad587d5 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Sat, 24 Dec 2022 14:07:27 +0100
Subject: [PATCH] fix: always show log messages with higher severity than
 chosen one

---
 frontend/src/ui/components/LogViewer.tsx | 34 +++++++++++++++---------
 frontend/src/ui/theme/forms.ts           |  2 +-
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ui/components/LogViewer.tsx b/frontend/src/ui/components/LogViewer.tsx
index 1e2f82c..22b9220 100644
--- a/frontend/src/ui/components/LogViewer.tsx
+++ b/frontend/src/ui/components/LogViewer.tsx
@@ -82,20 +82,24 @@ const LevelToggle = styled(MultiToggleItem, {
       info: {},
       warn: {
         backgroundColor: '$yellow4',
-        '&:hover': {
-          backgroundColor: '$yellow5',
-        },
-        "&[data-state='on']": {
-          backgroundColor: '$yellow8',
+        '&:not(:disabled)': {
+          '&:hover': {
+            backgroundColor: '$yellow5',
+          },
+          "&[data-state='on']": {
+            backgroundColor: '$yellow8',
+          },
         },
       },
       error: {
         backgroundColor: '$red4',
-        '&:hover': {
-          backgroundColor: '$red5',
-        },
-        "&[data-state='on']": {
-          backgroundColor: '$red8',
+        '&:not(:disabled)': {
+          '&:hover': {
+            backgroundColor: '$red5',
+          },
+          "&[data-state='on']": {
+            backgroundColor: '$red8',
+          },
         },
       },
     },
@@ -289,14 +293,14 @@ const LogEntriesContainer = styled('div', {
 });
 
 interface LogDialogProps {
-  initialFilter: LogLevel;
+  initialFilter: LogLevel[];
 }
 
 function LogDialog({ initialFilter }: LogDialogProps) {
   const logEntries = useSelector((state: RootState) => state.logging.messages);
   const [filter, setFilter] = useState({
     ...emptyFilter,
-    [initialFilter]: true,
+    ...Object.fromEntries(initialFilter.map((f) => [f, true])),
   });
   const { t } = useTranslation();
   const enabled = levels.filter((level) => filter[level]);
@@ -413,7 +417,11 @@ function LogViewer() {
           }
         }}
       >
-        {activeDialog ? <LogDialog initialFilter={activeDialog} /> : null}
+        {activeDialog ? (
+          <LogDialog
+            initialFilter={levels.slice(levels.indexOf(activeDialog))}
+          />
+        ) : null}
       </Dialog>
     </div>
   );
diff --git a/frontend/src/ui/theme/forms.ts b/frontend/src/ui/theme/forms.ts
index 7db4e69..5b11659 100644
--- a/frontend/src/ui/theme/forms.ts
+++ b/frontend/src/ui/theme/forms.ts
@@ -272,7 +272,7 @@ export const MultiToggleItem = styled(ToggleGroup.Item, {
     },
     "&[data-state='on']": {
       ...button['&:not(:disabled)']['&:active'],
-      background: '$gray8',
+      backgroundColor: '$gray8',
     },
   },
 });