feat: add natOutgoing option for custom subnet with corresponding tooltip (#878)

* feat: add external connectivity option for subnets with corresponding tooltip

Signed-off-by: Andy Lee <andy.lee@suse.com>

* fix: remove gatewayType from subnet spec when not needed

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: update external connectivity feature to use NAT outgoing and improve tooltip descriptions

Signed-off-by: Andy Lee <andy.lee@suse.com>

* fix: update subnet creation to correctly handle natOutgoing and improve comment clarity

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: improve tooltip clarity for external connectivity NAT option

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/edit/kubeovn.io.subnet/index.vue

@@ -43,18 +43,20 @@ export default {
   created() {
     const vpc = this.$route.query.vpc || '';
     const enableDHCP = this.value?.spec?.enableDHCP || false;
+    const natOutgoing = this.value?.spec?.natOutgoing || false;
 
     set(this.value.spec, 'enableDHCP', enableDHCP);
     set(this.value, 'spec', this.value.spec || {
-      cidrBlock:  '',
-      protocol:   NETWORK_PROTOCOL.IPv4,
-      provider:   '',
+      cidrBlock:    '',
+      protocol:     NETWORK_PROTOCOL.IPv4,
+      provider:     '',
       vpc,
-      gatewayIP:  '',
-      excludeIps: [],
-      private:    false,
+      gateway:      '',
+      excludeIps:   [],
+      private:      false,
       enableDHCP,
-      acls:       []
+      natOutgoing,
+      acls:         []
     });
   },
 
@@ -129,6 +131,10 @@ export default {
         label: n.id,
         value: n.id,
       }));
+    },
+    natOutgoingDisabled() {
+      // Disable the NAT Outgoing option when the subnet belongs to the ovn-cluster VPC and its name is join or ovn-default.
+      return this.value?.spec?.vpc === 'ovn-cluster' && ['join', 'ovn-default'].includes(this.value?.metadata?.name);
     }
   },
 
@@ -304,6 +310,20 @@ export default {
             </Banner>
           </div>
         </div>
+        <div class="row mt-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model:value="value.spec.natOutgoing"
+              name="enableExternalConnectivity"
+              :disabled="natOutgoingDisabled"
+              :options="[true, false]"
+              :label="t('harvester.subnet.externalConnectivity.label')"
+              :labels="[t('generic.enabled'), t('generic.disabled')]"
+              :mode="mode"
+              :tooltip="t('harvester.subnet.externalConnectivity.tooltip')"
+            />
+          </div>
+        </div>
         <div class="row mt-20">
           <div class="col span-6">
             <RadioGroup