sync with latest changes

ui/src/components/base/Field.svelte

@@ -1,5 +1,6 @@
 <script>
     import { onMount } from "svelte";
+    import { slide } from "svelte/transition";
     import { errors, removeError } from "@/stores/errors";
     import CommonHelper from "@/utils/CommonHelper";
 
@@ -38,7 +39,7 @@
     <slot {uniqueId} />
 
     {#each fieldErrors as error}
-        <div class="help-block help-block-error">
+        <div class="help-block help-block-error" transition:slide|local={{ duration: 150 }}>
             {#if typeof error === "object"}
                 <pre>{error?.message || error?.code || defaultError}</pre>
             {:else}

ui/src/components/base/FilterAutocompleteInput.svelte

@@ -256,6 +256,7 @@
         result.push("@request.method");
         result.push("@request.query.");
         result.push("@request.data.");
+        result.push("@request.headers.");
         result.push("@request.auth.id");
         result.push("@request.auth.collectionId");
         result.push("@request.auth.collectionName");

ui/src/components/collections/CollectionRulesTab.svelte

@@ -45,7 +45,7 @@
                         The request fields could be accessed with the special <em>@request</em> filter:
                     </p>
                     <div class="inline-flex flex-gap-5">
-                        <code>@request.method</code>
+                        <code>@request.headers.*</code>
                         <code>@request.query.*</code>
                         <code>@request.data.*</code>
                         <code>@request.auth.*</code>
@@ -77,22 +77,22 @@
 
 <RuleField label="List/Search rule" formKey="listRule" {collection} bind:rule={collection.listRule} />
 
-<hr class="m-t-sm m-b-sm" />
+<hr />
 <RuleField label="View rule" formKey="viewRule" {collection} bind:rule={collection.viewRule} />
 
 {#if !collection?.isView}
-    <hr class="m-t-sm m-b-sm" />
+    <hr />
     <RuleField label="Create rule" formKey="createRule" {collection} bind:rule={collection.createRule} />
 
-    <hr class="m-t-sm m-b-sm" />
+    <hr />
     <RuleField label="Update rule" formKey="updateRule" {collection} bind:rule={collection.updateRule} />
 
-    <hr class="m-t-sm m-b-sm" />
+    <hr />
     <RuleField label="Delete rule" formKey="deleteRule" {collection} bind:rule={collection.deleteRule} />
 {/if}
 
 {#if collection?.isAuth}
-    <hr class="m-t-sm m-b-sm" />
+    <hr />
     <RuleField
         label="Manage rule"
         formKey="options.manageRule"

ui/src/components/collections/RuleField.svelte

@@ -53,7 +53,7 @@
     </div>
 {:else}
     <Field
-        class="form-field rule-field m-0 {required ? 'requied' : ''} {isAdminOnly ? 'disabled' : ''}"
+        class="form-field rule-field {required ? 'requied' : ''} {isAdminOnly ? 'disabled' : ''}"
         name={formKey}
         let:uniqueId
     >
@@ -93,20 +93,11 @@
             bind:value={rule}
             baseCollection={collection}
             disabled={isAdminOnly}
+            placeholder={!isAdminOnly ? "Leave empty to grant everyone access..." : ""}
         />
 
         <div class="help-block">
-            <slot {isAdminOnly}>
-                <p>
-                    {#if isAdminOnly}
-                        Only admins will be able to perform this action (
-                        <button type="button" class="link-primary" on:click={unlock}>unlock to change</button>
-                        ).
-                    {:else}
-                        Leave empty to grant everyone access.
-                    {/if}
-                </p>
-            </slot>
+            <slot {isAdminOnly} />
         </div>
     </Field>
 {/if}
@@ -126,4 +117,7 @@
         border-bottom-right-radius: 0;
         background: rgba(53, 71, 104, 0.09);
     }
+    :global(.rule-field .code-editor .cm-placeholder) {
+        font-family: var(--baseFontFamily);
+    }
 </style>