From 98b122f8c5d74d6d4db02bcd9e96cd004bc4eece Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Wed, 20 Jan 2021 22:05:16 -0800
Subject: [PATCH] Add select all button to modals

---
 web/pages/access-tokens.tsx | 18 +++++++++++++-----
 web/pages/webhooks.tsx      | 13 +++++++++++--
 web/utils/urls.ts           | 10 ++++++++++
 3 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 web/utils/urls.ts

diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx
index c13541448..a87de960f 100644
--- a/web/pages/access-tokens.tsx
+++ b/web/pages/access-tokens.tsx
@@ -36,6 +36,7 @@ function convertScopeStringToTag(scopeString) {
 
 function NewTokenModal(props) {
     const [selectedScopes, setSelectedScopes] = useState([]);
+    const [name, setName] = useState('');
 
     const scopes = Object.keys(availableScopes).map(function (key) {
         return { value: key, label: availableScopes[key].description }
@@ -46,15 +47,21 @@ function NewTokenModal(props) {
     }
 
     function saveToken() {
-        props.onOk(name, selectedScopes)
-    }
+        props.onOk(name, selectedScopes);
 
-    const [name, setName] = useState('');
+        // Clear the modal
+        setSelectedScopes([]);
+        setName('');
+    }
 
     const okButtonProps = {
         disabled: selectedScopes.length === 0 || name === ''
     };
 
+    function selectAll() {
+        setSelectedScopes(Object.keys(availableScopes));
+    }
+
     return (
         <Modal title="Create New Access token" visible={props.visible} onOk={saveToken} onCancel={props.onCancel} okButtonProps={okButtonProps}>
             <p><Input value={name} placeholder="Access token name/description" onChange={(input) => setName(input.currentTarget.value)} /></p>
@@ -62,7 +69,8 @@ function NewTokenModal(props) {
             <p>
                 Select the permissions this access token will have.  It cannot be edited after it's created.
             </p>
-            <Checkbox.Group options={scopes} onChange={onChange} />
+            <Checkbox.Group options={scopes} value={selectedScopes} onChange={onChange} />
+            <Button onClick={selectAll}>Select all</Button>
         </Modal>
     )
 }
@@ -91,7 +99,7 @@ export default function AccessTokens() {
             dataIndex: 'token',
             key: 'token',
             render: (text, record) => (
-               <Input.Password size="small" bordered={false} value={text}/>
+                <Input.Password size="small" bordered={false} value={text} />
             )
         },
         {
diff --git a/web/pages/webhooks.tsx b/web/pages/webhooks.tsx
index 2e3c4a214..8efb71095 100644
--- a/web/pages/webhooks.tsx
+++ b/web/pages/webhooks.tsx
@@ -54,12 +54,20 @@ function NewWebhookModal(props) {
         setSelectedEvents(checkedValues);
     }
 
+    function selectAll() {
+        setSelectedEvents(Object.keys(availableEvents));
+    }
+
     function save() {
         props.onOk(webhookUrl, selectedEvents)
+        
+        // Reset the modal
+        setWebhookUrl('');
+        setSelectedEvents(null);
     }
 
     const okButtonProps = {
-        disabled: selectedEvents.length === 0 || !isValidUrl(webhookUrl)
+        disabled: selectedEvents?.length === 0 || !isValidUrl(webhookUrl)
     };
 
     return (
@@ -69,7 +77,8 @@ function NewWebhookModal(props) {
             <p>
                 Select the events that will be sent to this webhook.
             </p>
-            <Checkbox.Group options={events} onChange={onChange} />
+            <Checkbox.Group options={events} value={selectedEvents} onChange={onChange} />
+            <Button onClick={selectAll}>Select all</Button>
         </Modal>
     )
 }
diff --git a/web/utils/urls.ts b/web/utils/urls.ts
new file mode 100644
index 000000000..f5fc6427e
--- /dev/null
+++ b/web/utils/urls.ts
@@ -0,0 +1,10 @@
+// Stolen from https://stackoverflow.com/a/5717133
+export function isValidUrl(url: string): boolean {
+    var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
+    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
+    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
+    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
+    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
+  return !!pattern.test(url);
+}
\ No newline at end of file