From ee7b6451e0b261d1095355523fbb98af3b3fd2bb Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 13 May 2022 12:49:37 +0200
Subject: [PATCH] fix: events ui

---
 app/views/console/functions/function.phtml | 58 ++++++++++++----------
 app/views/console/webhooks/webhook.phtml   | 50 +++++++++++--------
 2 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/app/views/console/functions/function.phtml b/app/views/console/functions/function.phtml
index 38d8de8d9c..b5e5fa3bac 100644
--- a/app/views/console/functions/function.phtml
+++ b/app/views/console/functions/function.phtml
@@ -532,28 +532,29 @@ sort($patterns);
                                 </section>
 
                                 <section class="margin-bottom-small" data-ls-attrs="x-init=load({{project-function.events}})">
-                            <label class="margin-bottom">Events <button class="pull-end small" type="button" @click="showModal($refs.modal)">Add Event</button></label>
-                            <template x-for="event in Array.from(events)">
-                                <div class="row events responsive thin margin-bottom-small">
-                                    <div class="col span-12 margin-bottom-small">
-                                        <span class="text" x-text="event"></span>
-                                        <span class="action" @click="removeEvent(event)">
-                                            <i class="icon-trash"></i>
-                                        </span>
+                                    <label class="margin-bottom-small">Events <span class="tooltip small" data-tooltip="Set events that will trigger your function."><i class="icon-info-circled"></i></span></label>
+                                    <div>
+                                        <template x-for="event in Array.from(events)">
+                                            <div class="row events responsive thin margin-bottom-small">
+                                                <div class="col span-12 margin-bottom-small">
+                                                    <span class="text" x-text="event"></span>
+                                                    <span class="action" @click="removeEvent(event)">
+                                                        <i class="icon-trash"></i>
+                                                    </span>
+                                                </div>
+                                                <input name="events" data-cast-to="array" type="hidden" :value="event"></input>
+                                            </div>
+                                        </template>
                                     </div>
-                                    <input name="events" data-cast-to="array" type="hidden" :value="event"></input>
-                                </div>
-                            </template>
-                        </section>
+                                    <button class="margin-end margin-bottom-small reverse" type="button" @click="showModal($refs.modal_function)">Add Event</button>
+                                </section>
 
                                 <label for="schedule">Schedule (CRON Syntax) <span class="tooltip small" data-tooltip="Set a CRON schedule to trigger this function."><i class="icon-info-circled"></i></span></label>
                                 <input type="text" id="function-schedule" class="full-width" name="schedule" autocomplete="off" data-ls-bind="{{project-function.schedule}}" placeholder="* * * * *" />
                                 <div class="text-size-small text-fade margin-bottom margin-top-negative-small">Leave blank for no schedule</div>
 
-                                <h3 class="margin-bottom-small">Variables <span class="tooltip small" data-tooltip="Set variables or secret keys that will be passed as env vars to your function at runtime."><i class="icon-info-circled"></i></span></h3>
+                                <label class="margin-bottom-small">Variables <span class="tooltip small" data-tooltip="Set variables or secret keys that will be passed as env vars to your function at runtime."><i class="icon-info-circled"></i></span></label>
                                 <div data-ls-if="(!{{project-function.vars.length}})">
-                                    <hr class="margin-bottom margin-top-no" />
-
                                     <fieldset name="vars" data-cast-to="object">
                                         <div data-ls-loop="project-function.vars" data-ls-as="var" id="project-vars" style="visibility: visible;">
                                             <div class="margin-bottom-small">
@@ -562,7 +563,7 @@ sort($patterns);
                                                         <input type="hidden" data-forms-key-value data-ls-attrs="name={{$index}}" data-ls-bind="{{var}}" />
                                                     </div>
                                                     <div class="col span-2">
-                                                        <button type="button" data-remove class="close pull-end is-margin-top-10"><i class="icon-cancel"></i></button>
+                                                        <button type="button" data-remove class="close pull-end is-margin-top-10"><i class="icon-trash"></i></button>
                                                     </div>
                                                 </div>
                                             </div>
@@ -575,14 +576,14 @@ sort($patterns);
                                                         <input type="hidden" data-ls-attrs="data-forms-key-value"/>
                                                     </div>
                                                     <div class="col span-2">
-                                                        <button type="button" data-remove class="close pull-end is-margin-top-10"><i class="icon-cancel"></i></button>
+                                                        <button type="button" data-remove class="close pull-end is-margin-top-10"><i class="icon-trash"></i></button>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </fieldset>
-                                    <hr class="margin-bottom margin-top-small" />
                                 </div>
+                                <hr class="margin-bottom margin-top-small" />
 
                                 <button>Update</button>
                             </div>
@@ -622,28 +623,31 @@ sort($patterns);
                         </form>
                     </div>
                 </div>
-                <div x-ref="modal" data-ui-modal class="modal box close width-small height-small" data-button-hide="on">
+                <div x-ref="modal_function" data-ui-modal class="modal box close width-small height-small" data-button-hide="on">
                     <div>
-                        <form @submit.prevent="addEvent($refs.modal)">
-                            <select x-model="selected" @change="setEvent()">
+                        <form @submit.prevent="addEvent($refs.modal_function)">
+                            <label for="event">
+                                Event
+                            </label>
+                            <select id="event" x-model="selected" @change="setEvent()">
                                 <option value="" selected>Select event</option>
                                 <?php foreach ($patterns as $event) : ?>
                                     <option value="<?php echo $event; ?>"><?php echo $event; ?></option>
                                 <?php endforeach; ?>
                             </select>
                             <div x-show="hasResource">
-                                <label x-text="'Select ' + resourceName + ' (optional)'"></label>
-                                <input type="text" :placeholder="resourceName" x-model="resource" maxlength="36" pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$">
+                                <label x-text="'Select ' + resourceName + ' (optional)'" for="resource"></label>
+                                <input id="resource" type="text" :placeholder="resourceName" x-model="resource" maxlength="36" pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$">
                                 <div class="text-fade text-size-xs margin-top-negative-small margin-bottom">Leave empty for wildcard</div>
                             </div>
                             <div x-show="hasSubResource">
-                                <label x-text="'Select ' + subResourceName + ' (optional)'"></label>
-                                <input type="text" :placeholder="subResourceName" x-model="subResource" maxlength="36" pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$">
+                                <label x-text="'Select ' + subResourceName + ' (optional)'" for="subResource"></label>
+                                <input id="subResource" type="text" :placeholder="subResourceName" x-model="subResource" maxlength="36" pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$">
                                 <div class="text-fade text-size-xs margin-top-negative-small margin-bottom">Leave empty for wildcard</div>
                             </div>
                             <div x-show="hasAttribute">
-                                <label for="subResource">Add Attribute (optional)</label>
-                                <select x-model="attribute">
+                                <label for="attribute">Add Attribute (optional)</label>
+                                <select id="attribute" x-model="attribute">
                                     <option value="*">Select attribute</option>
                                     <template x-for="attr in attributes">
                                         <option :value="attr" x-text="attr"></option>
diff --git a/app/views/console/webhooks/webhook.phtml b/app/views/console/webhooks/webhook.phtml
index 1e23d83f57..a0adb522a0 100644
--- a/app/views/console/webhooks/webhook.phtml
+++ b/app/views/console/webhooks/webhook.phtml
@@ -92,18 +92,21 @@ sort($patterns);
                         <input type="url" class="full-width" data-ls-attrs="id=url-{{project-webhook.$id}}" name="url" required autocomplete="off" placeholder="https://example.com/callback" data-ls-bind="{{project-webhook.url}}" />
 
                         <section class="margin-bottom-small" data-ls-attrs="x-init=load({{project-webhook.events}})">
-                            <label class="margin-bottom">Events <button class="pull-end small" type="button" @click="showModal($refs.modal_function)">Add Event</button></label>
-                            <template x-for="event in Array.from(events)">
-                                <div class="row events responsive thin margin-bottom-small">
-                                    <div class="col span-12 margin-bottom-small">
-                                        <span class="text" x-text="event"></span>
-                                        <span class="action" @click="removeEvent(event)">
-                                            <i class="icon-trash"></i>
-                                        </span>
+                            <label class="margin-bottom-small">Events <span class="tooltip small" data-tooltip="Set events that will trigger your webhook."><i class="icon-info-circled"></i></span></label>
+                            <div>
+                                <template x-for="event in Array.from(events)">
+                                    <div class="row events responsive thin margin-bottom-small">
+                                        <div class="col span-12 margin-bottom-small">
+                                            <span class="text" x-text="event"></span>
+                                            <span class="action" @click="removeEvent(event)">
+                                                <i class="icon-trash"></i>
+                                            </span>
+                                        </div>
+                                        <input name="events" data-cast-to="array" type="hidden" :value="event"></input>
                                     </div>
-                                    <input name="events" data-cast-to="array" type="hidden" :value="event"></input>
-                                </div>
-                            </template>
+                                </template>
+                            </div>
+                            <button class="margin-end margin-bottom-small reverse" type="button" @click="showModal($refs.modal_webhook)">Add Event</button>
                         </section>
 
                         <div class="margin-bottom toggle" data-ls-ui-open data-button-aria="Advanced Options">
@@ -116,9 +119,9 @@ sort($patterns);
                             </h2>
 
                             <label data-ls-attrs="for=security-{{project-webhook.$id}}" class="margin-bottom-small">
-                                <div class="margin-bottom-small text-bold">SSL / TLS (Certificate verification)</div>
+                                <div class="margin-bottom-small">SSL / TLS (Certificate verification)</div>
 
-                                <input name="security" type="radio" required data-ls-attrs="id=secure-yes-{{project-webhook.$id}}" data-ls-bind="{{project-webhook.security}}" value="true" data-cast-to="boolean" /> &nbsp; <span>Enabled</span> &nbsp;
+                                <input <?php if ($new): ?>checked<?php else: ?>data-ls-bind="{{project-webhook.security}}"<?php endif; ?> name="security" type="radio" required data-ls-attrs="id=secure-yes-{{project-webhook.$id}}" value="true" data-cast-to="boolean" /> &nbsp; <span>Enabled</span> &nbsp;
                                 <input name="security" type="radio" required data-ls-attrs="id=secure-no-{{project-webhook.$id}}" data-ls-bind="{{project-webhook.security}}" value="false" data-cast-to="boolean" /> &nbsp; <span>Disabled</span> &nbsp;
                             </label>
 
@@ -162,28 +165,31 @@ sort($patterns);
                     </form>
                 </div>
             <?php endif; ?>
-            <div x-ref="modal_function" data-ui-modal class="modal box close width-small height-small" data-button-hide="on">
+            <div x-ref="modal_webhook" data-ui-modal class="modal box close width-small height-small" data-button-hide="on">
                 <div>
-                    <form @submit.prevent="addEvent($refs.modal_function)">
-                        <select x-model="selected" @change="setEvent()">
+                    <form @submit.prevent="addEvent($refs.modal_webhook)">
+                        <label for="event">
+                            Event
+                        </label>
+                        <select id="event" x-model="selected" @change="setEvent()">
                             <option value="" selected>Select event</option>
                             <?php foreach ($patterns as $event) : ?>
                                 <option value="<?php echo $event; ?>"><?php echo $event; ?></option>
                             <?php endforeach; ?>
                         </select>
                         <div x-show="hasResource">
-                            <label x-text="'Select ' + resourceName + ' (optional)'"></label>
-                            <input type="text" :placeholder="resourceName" x-model="resource" maxlength="36" pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$">
+                            <label x-text="'Select ' + resourceName + ' (optional)'" for="resource"></label>
+                            <input id="resource" type="text" :placeholder="resourceName" x-model="resource" maxlength="36" pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$">
                             <div class="text-fade text-size-xs margin-top-negative-small margin-bottom">Leave empty for wildcard</div>
                         </div>
                         <div x-show="hasSubResource">
-                            <label x-text="'Select ' + subResourceName + ' (optional)'"></label>
-                            <input type="text" :placeholder="subResourceName" x-model="subResource" maxlength="36" pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$">
+                            <label x-text="'Select ' + subResourceName + ' (optional)'" for="subResource"></label>
+                            <input id="subResource" type="text" :placeholder="subResourceName" x-model="subResource" maxlength="36" pattern="^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$">
                             <div class="text-fade text-size-xs margin-top-negative-small margin-bottom">Leave empty for wildcard</div>
                         </div>
                         <div x-show="hasAttribute">
-                            <label for="subResource">Add Attribute (optional)</label>
-                            <select x-model="attribute">
+                            <label for="attribute">Add Attribute (optional)</label>
+                            <select id="attribute" x-model="attribute">
                                 <option value="*">Select attribute</option>
                                 <template x-for="attr in attributes">
                                     <option :value="attr" x-text="attr"></option>