Add select all button to modals

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} />
             )
         },
         {

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

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);
+}