Read only error takes higher precendence over multiple resource warnings

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

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')