Rearrange firewall rules form and add help text (#2190)

* rearrange firewall rules form and add help text

* move priority to the bottom of the top section, add help text

* rearrange filters and fix typographic hierarchy

* validate port range, both syntax and dupe

* improve targets help text, thanks @taspelund

Author: david-crespo

app/api/util.spec.ts

@@ -23,6 +23,12 @@ describe('parsePortRange', () => {
       expect(parsePortRange('1-45690')).toEqual([1, 45690])
       expect(parsePortRange('5-5')).toEqual([5, 5])
     })
+
+    it('with surrounding whitespace', () => {
+      expect(parsePortRange('123-456 ')).toEqual([123, 456])
+      expect(parsePortRange('  1-45690')).toEqual([1, 45690])
+      expect(parsePortRange('  5-5  \n')).toEqual([5, 5])
+    })
   })
 
   describe('rejects', () => {

app/api/util.ts

@@ -45,7 +45,7 @@ type PortRange = [number, number]
 // null so we can annotate the failure with a reason
 export function parsePortRange(portRange: string): PortRange | null {
   // TODO: pull pattern from openapi spec (requires generator work)
-  const match = /^([0-9]{1,5})((?:-)[0-9]{1,5})?$/.exec(portRange)
+  const match = /^([0-9]{1,5})((?:-)[0-9]{1,5})?$/.exec(portRange.trim())
   if (!match) return null
 
   const p1 = parseInt(match[1], 10)