From 68a305201d7ce3d69980fc2995b4d9ef4bca7cef Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 23 Aug 2023 17:45:18 +0800
Subject: [PATCH] Read only error takes higher precendence over multiple
 resource warnings

---
 .../Home/ProjectList/ProjectCardWarnings.tsx       | 14 +++++++++-----
 .../ui/UsageWarnings/UsageWarningBanner.tsx        | 11 +++++++----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/studio/components/interfaces/Home/ProjectList/ProjectCardWarnings.tsx b/studio/components/interfaces/Home/ProjectList/ProjectCardWarnings.tsx
index 887230179ed..5453f2df74b 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectCardWarnings.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectCardWarnings.tsx
@@ -34,12 +34,14 @@ const RESOURCE_WARNING_MESSAGES = {
   },
 }
 
-export default function ProjectCardWarnings({ resourceWarnings }: ProjectCardWarningsProps) {
-  const activeWarnings = Object.keys(resourceWarnings).filter(
-    (property) => resourceWarnings[property as keyof typeof resourceWarnings] === true
-  )
+const ProjectCardWarnings = ({ resourceWarnings }: ProjectCardWarningsProps) => {
+  // [Joshen] Read only takes higher precendence over multiple resource warnings
+  const activeWarnings = resourceWarnings.is_readonly_mode_enabled
+    ? ['is_readonly_mode_enabled']
+    : Object.keys(resourceWarnings).filter(
+        (property) => resourceWarnings[property as keyof typeof resourceWarnings] === true
+      )
   const hasHighPriorityWarning = activeWarnings.includes('is_readonly_mode_enabled')
-  // [Joshen] We should probably read readonly mode separately for multiple resource warnings, read only mode needs to take highest precedence
 
   return (
     <div>
@@ -66,3 +68,5 @@ export default function ProjectCardWarnings({ resourceWarnings }: ProjectCardWar
     </div>
   )
 }
+
+export default ProjectCardWarnings
diff --git a/studio/components/ui/UsageWarnings/UsageWarningBanner.tsx b/studio/components/ui/UsageWarnings/UsageWarningBanner.tsx
index 48656d4a197..aab7bd51390 100644
--- a/studio/components/ui/UsageWarnings/UsageWarningBanner.tsx
+++ b/studio/components/ui/UsageWarnings/UsageWarningBanner.tsx
@@ -73,12 +73,15 @@ const UsageWarningBanner = () => {
     (warning) => warning.project === ref
   )
 
+  // [Joshen] Read only takes higher precendence over multiple resource warnings
   const activeWarnings =
     projectResourceWarnings !== undefined
-      ? Object.keys(projectResourceWarnings).filter(
-          (property) =>
-            projectResourceWarnings[property as keyof typeof projectResourceWarnings] === true
-        )
+      ? projectResourceWarnings.is_readonly_mode_enabled
+        ? ['is_readonly_mode_enabled']
+        : Object.keys(projectResourceWarnings).filter(
+            (property) =>
+              projectResourceWarnings[property as keyof typeof projectResourceWarnings] === true
+          )
       : []
 
   const hasHighPriorityWarning = activeWarnings.includes('is_readonly_mode_enabled')