More firewall rule form help copy (#2286)

* Add helper text to firewall form

* Use Message component

* might as well go all out

---------

Co-authored-by: David Crespo <[email protected]>

Author: charliepark

app/forms/firewall-rules-create.tsx

@@ -228,6 +228,12 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
         label="Direction of traffic"
         column
         control={control}
+        description={
+          <>
+            An inbound rule applies to traffic <em>to</em> the targets, while an outbound
+            rule applies to traffic <em>from</em> the targets.
+          </>
+        }
         items={[
           { value: 'inbound', label: 'Inbound' },
           { value: 'outbound', label: 'Outbound' },
@@ -247,7 +253,15 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
       <h3 className="mb-4 text-sans-2xl">Targets</h3>
       <Message
         variant="info"
-        content="Targets determine the instances to which this rule applies. You can target instances directly or specify a VPC, VPC subnet, IP, or IP subnet which will apply the rule to all matching instances. Targets are additive: the rule applies to instances matching any target."
+        content={
+          <>
+            Targets determine the instances to which this rule applies. You can target
+            instances directly by name, or specify a VPC, VPC subnet, IP, or IP subnet,
+            which will apply the rule to traffic going to all matching instances. Targets
+            are additive: the rule applies to instances matching{' '}
+            <span className="underline">any</span> target.
+          </>
+        }
       />
       {/* TODO: make ListboxField smarter with the values like RadioField is */}
       <ListboxField
@@ -338,7 +352,14 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
 
       <Message
         variant="info"
-        content="Filters reduce the scope of this rule. Without filters, the rule applies to all traffic to the targets (or from the targets, if it's an outbound rule). With multiple filters, it applies to traffic matching all filters."
+        content={
+          <>
+            Filters reduce the scope of this rule. Without filters, the rule applies to all
+            traffic to the targets (or from the targets, if it&rsquo;s an outbound rule).
+            With multiple filters, the rule applies to traffic matching{' '}
+            <span className="underline">all</span> filters.
+          </>
+        }
       />
 
       <div className="flex flex-col gap-3">
@@ -349,7 +370,7 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
             Port filters
           </label>
           <TextInputHint id="portRange-help-text" className="mb-2">
-            A single port (1234) or a range (1234&ndash;2345)
+            A single destination port (1234) or a range (1234&ndash;2345)
           </TextInputHint>
           <TextFieldInner
             id="portRange"
@@ -426,6 +447,16 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
 
       <div className="flex flex-col gap-3">
         <h3 className="mt-4 text-sans-lg">Host filters</h3>
+        <Message
+          variant="info"
+          content={
+            <>
+              Host filters match the &ldquo;other end&rdquo; of traffic from the
+              target&rsquo;s perspective: for an inbound rule, they match the source of
+              traffic. For an outbound rule, they match the destination.
+            </>
+          }
+        />
         <ListboxField
           name="type"
           label="Host type"