From 686599c594575684f06610789b05f46968ebd859 Mon Sep 17 00:00:00 2001
From: Axel Boberg <git@axelboberg.se>
Date: Sat, 20 Apr 2024 23:07:41 +0200
Subject: [PATCH] Add a warning when targeting an acestor with a reference

Signed-off-by: Axel Boberg <git@axelboberg.se>
---
 app/components/Grid/index.jsx                 |  1 +
 app/components/Notification/index.jsx         |  2 +-
 app/components/Notification/style.css         | 27 ++++++++++++++++---
 app/components/Sharing/index.jsx              |  6 ++++-
 app/components/Sharing/style.css              |  4 +++
 .../inspector/app/components/Form/index.jsx   | 11 ++++++++
 .../inspector/app/components/Form/style.css   |  5 ++++
 plugins/types/index.js                        |  2 +-
 8 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/app/components/Grid/index.jsx b/app/components/Grid/index.jsx
index 7b4a24d..8f089f4 100644
--- a/app/components/Grid/index.jsx
+++ b/app/components/Grid/index.jsx
@@ -244,6 +244,7 @@ export function Grid ({ children, data = {}, onChange }) {
         userIsEditingLayout &&
         <Notification
           icon='edit'
+          type='inline'
           title='Editing layout'
           description='Right click to manage widgets'
           controls={<button className='Button Button--ghost' onClick={() => handleLeaveEditMode()}>Leave edit mode</button>}
diff --git a/app/components/Notification/index.jsx b/app/components/Notification/index.jsx
index 5483de0..b134479 100644
--- a/app/components/Notification/index.jsx
+++ b/app/components/Notification/index.jsx
@@ -22,7 +22,7 @@ export function Notification ({ type, size = 'normal', icon, title, description,
     <div className={`Notification Notification--${type} Notification-size--${size}`}>
       <div className='Notification-content'>
         {
-          icon && <span className='Notification-contentSection'><Icon name={icon} /></span>
+          icon && <span className='Notification-contentSection Notification-icon'><Icon name={icon} color='var(--color-text)' /></span>
         }
         {
           title && <span className='Notification-contentSection Notification-title'>{title}</span>
diff --git a/app/components/Notification/style.css b/app/components/Notification/style.css
index c8eb888..97bd8e5 100644
--- a/app/components/Notification/style.css
+++ b/app/components/Notification/style.css
@@ -1,14 +1,23 @@
 .Notification {
   display: flex;
+
   width: 100%;
 
   box-sizing: border-box;
   justify-content: space-between;
 
-  color: var(--base-color--notificationColor);
   background-color: var(--base-color--notificationBackground);
 
+  border-radius: 6px;
+  
   --color-warning: #FFDC8C;
+  --color-text: var(--base-color--notificationColor);
+  
+  color: var(--color-text);
+}
+
+.Notification--inline {
+  border-radius: 0;
 }
 
 .Notification-size--normal {
@@ -22,6 +31,8 @@
 .Notification-content {
   display: flex;
   align-items: center;
+
+  color: var(--color-text);
 }
 
 .Notification-size--normal .Notification-content {
@@ -51,5 +62,15 @@
 
 .Notification--warning *,
 .Notification--warning .Notification-hideBtn {
-  color: black;
-}
\ No newline at end of file
+  --color-text: black;
+}
+
+.Notification-hideBtn {
+  color: var(--color-text);
+}
+
+.Notification-icon,
+.Notification-icon .Icon {
+  width: 1.5em;
+  height: 1.5em;
+}
diff --git a/app/components/Sharing/index.jsx b/app/components/Sharing/index.jsx
index 8174673..929a5bc 100644
--- a/app/components/Sharing/index.jsx
+++ b/app/components/Sharing/index.jsx
@@ -44,7 +44,11 @@ export function Sharing ({ open, onClose = () => {} }) {
       <div className='Sharing u-theme--light'>
         {
           HOST === 'localhost' &&
-          <Notification size='small' description='Bridge is only accessible on localhost, change this in settings' />
+          (
+            <div className='Sharing-notification'>
+              <Notification size='small' description='Bridge is only accessible on localhost, change this in settings' />
+            </div>
+          )
         }
         <div className='Sharing-content'>
           <div className='Sharing-icon' dangerouslySetInnerHTML={{ __html: CollaborationIcon }} />
diff --git a/app/components/Sharing/style.css b/app/components/Sharing/style.css
index 4cb45ca..207e6ea 100644
--- a/app/components/Sharing/style.css
+++ b/app/components/Sharing/style.css
@@ -17,4 +17,8 @@
 
 .Sharing-icon {
   margin: 5px 0 10px;
+}
+
+.Sharing-notification {
+  padding: 5px;
 }
\ No newline at end of file
diff --git a/plugins/inspector/app/components/Form/index.jsx b/plugins/inspector/app/components/Form/index.jsx
index 1bf39b2..d3ab01b 100644
--- a/plugins/inspector/app/components/Form/index.jsx
+++ b/plugins/inspector/app/components/Form/index.jsx
@@ -30,7 +30,9 @@ import './style.css'
 import { StoreContext } from '../../storeContext'
 
 import { Accordion } from '../Accordion'
+
 import { Frame } from '../../../../../app/components/Frame'
+import { Notification } from '../../../../../app/components/Notification'
 
 import { TextInput } from '../TextInput'
 import { ColorInput } from '../ColorInput'
@@ -38,6 +40,7 @@ import { StringInput } from '../StringInput'
 import { SelectInput } from '../SelectInput'
 import { BooleanInput } from '../BooleanInput'
 
+
 const INPUT_COMPONENTS = {
   boolean: BooleanInput,
   string: StringInput,
@@ -244,6 +247,14 @@ export function Form () {
   return (
     <div className='Form'>
       <div className='Form-section'>
+        <div className='Form-notifications'>
+          {
+            Object.values(store.items?.[0]?.issues ?? {})
+              .map((issue, i) => {
+                return <Notification key={i} description={issue?.description} type='warning' icon='warning' size='small' />
+              })
+          }
+        </div>
         <div className='Form-row'>
           <ColorInput value={getValue('color')} onChange={value => handleDataChange('color', value)} />
           <StringInput value={getValue('name')} onChange={value => handleDataChange('name', value)} large />
diff --git a/plugins/inspector/app/components/Form/style.css b/plugins/inspector/app/components/Form/style.css
index 04dd241..70295a9 100644
--- a/plugins/inspector/app/components/Form/style.css
+++ b/plugins/inspector/app/components/Form/style.css
@@ -84,4 +84,9 @@
   font-size: 0.9em;
 
   box-sizing: border-box;
+}
+
+.Form-notifications .Notification {
+  margin-top: -10px;
+  margin-bottom: 15px;
 }
\ No newline at end of file
diff --git a/plugins/types/index.js b/plugins/types/index.js
index 0d77372..276e021 100644
--- a/plugins/types/index.js
+++ b/plugins/types/index.js
@@ -101,7 +101,7 @@ const ITEM_CHANGE_HANDLERS = {
     }
 
     bridge.items.applyIssue(item?.id, 'types.rta', {
-      description: 'Be careful referencing ancestor as loops may occur'
+      description: 'Reference is targeting an ancestor, loops may occur'
     })
   }
 }