Enhance networks Component

packages/playground/src/components/NetworkItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <input-tooltip v-if="value !== null" inline :tooltip="tooltipText">
+    <v-switch
+      hide-details
+      color="primary"
+      inset
+      :label="label"
+      :model-value="value"
+      @update:model-value="callEmitFunction($event ?? false)"
+      :readonly="readonly"
+      :style="{ opacity: readonly ? 0.5 : 1 }"
+    />
+  </input-tooltip>
+</template>
+
+<script lang="ts">
+import { computed, type PropType } from "vue";
+
+export default {
+  name: "NetworkItem",
+  props: {
+    tooltipText: { type: String, required: true },
+    label: { type: String, required: true },
+    value: Boolean as PropType<boolean | null | undefined>,
+    emitFunction: Function as PropType<any>,
+  },
+  setup(props) {
+    const readonly = computed(() => typeof props.emitFunction !== "function");
+    function callEmitFunction(value?: boolean): void {
+      if (typeof props.emitFunction === "function") {
+        props.emitFunction(value);
+      }
+    }
+
+    return { readonly, callEmitFunction };
+  },
+};
+</script>

packages/playground/src/components/input_tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex" v-if="!disabled">
+  <div class="d-flex" v-if="!disabled" v-bind="$attrs">
     <v-tooltip :text="tooltip || 'None!'" :location="location" :width="width ? width : ''">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}

packages/playground/src/components/networks.vue

@@ -1,151 +1,91 @@
 <template>
-  <div ref="input">
-    <input-tooltip tooltip="Enable the network options to be able access your deployment">
-      <v-expansion-panels variant="inset" class="mb-4">
-        <v-expansion-panel expand-icon="mdi-menu-down" collapse-icon="mdi-menu-up" :disabled="$props.disabled">
-          <template v-slot:title>
-            <span class="text-h6">Network</span>
-            <v-chip v-if="error" variant="text">
-              <v-icon color="warning" icon="mdi-alert-circle" />
-            </v-chip>
-            <v-chip v-if="ipv4" variant="outlined" class="ml-2"> IPV4 </v-chip>
-            <v-chip v-if="ipv6" variant="outlined" class="ml-2"> IPV6 </v-chip>
-            <v-chip v-if="planetary" variant="outlined" class="ml-2"> Planetary </v-chip>
-            <v-chip v-if="mycelium" variant="outlined" class="ml-2"> Mycelium </v-chip>
-            <v-chip v-if="wireguard" variant="outlined" class="ml-2"> Wireguard </v-chip>
-          </template>
-          <v-expansion-panel-text>
-            <input-tooltip
-              v-if="ipv4 !== null"
-              inline
-              tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Public IPv4"
-                :readonly="enableIpv4"
-                :model-value="$props.ipv4"
-                @update:model-value="$emit('update:ipv4', $event ?? undefined)"
-                :style="enableIpv4 ? 'opacity: .5' : 'opacity: 1'"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="ipv6 !== null"
-              inline
-              tooltip="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Public IPv6"
-                :modelValue="$props.ipv6"
-                @update:modelValue="$emit('update:ipv6', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="planetary !== null"
-              inline
-              tooltip="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Planetary Network"
-                :modelValue="$props.planetary"
-                @update:modelValue="$emit('update:planetary', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="mycelium !== null"
-              inline
-              tooltip="Mycelium is an IPv6 overlay network. Each node that joins the overlay network will receive an overlay network IP."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="mycelium"
-                :modelValue="$props.mycelium"
-                @update:modelValue="$emit('update:mycelium', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="wireguard !== null"
-              inline
-              tooltip="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Add Wireguard Access"
-                :modelValue="$props.wireguard"
-                @update:modelValue="$emit('update:wireguard', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <v-alert v-show="error" class="mb-2" type="warning" variant="tonal">
-              You must enable at least one of network options.
-            </v-alert>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-      </v-expansion-panels>
-    </input-tooltip>
-  </div>
+  <input-tooltip ref="input" tooltip="Enable the network options to be able access your deployment">
+    <v-expansion-panels variant="inset" class="mb-4">
+      <v-expansion-panel expand-icon="mdi-menu-down" collapse-icon="mdi-menu-up" :disabled="$props.disabled">
+        <v-expansion-panel-title>
+          <v-card-title class="py-0" v-text="'Network'" />
+          <v-icon v-if="error" color="warning" icon="mdi-alert-circle" class="ml-2" size="small" />
+          <v-chip v-if="ipv4" variant="outlined" class="ml-2" text="IPV4" />
+          <v-chip v-if="ipv6" variant="outlined" class="ml-2" text="IPV6" />
+          <v-chip v-if="planetary" variant="outlined" class="ml-2" text="Planetary" />
+          <v-chip v-if="mycelium" variant="outlined" class="ml-2" text="Mycelium" />
+          <v-chip v-if="wireguard" variant="outlined" class="ml-2" text="Wireguard" />
+        </v-expansion-panel-title>
+
+        <v-expansion-panel-text>
+          <NetworkItem
+            tooltip-text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+            label="Public IPv4"
+            :value="$props.ipv4"
+            :emit-function="$attrs['onUpdate:ipv4']"
+          />
+
+          <NetworkItem
+            tooltip-text="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
+            label="Public IPv6"
+            :value="$props.ipv6"
+            :emit-function="$attrs['onUpdate:ipv6']"
+          />
+
+          <NetworkItem
+            tooltip-text="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
+            label="Planetary Network"
+            :value="$props.planetary"
+            :emit-function="$attrs['onUpdate:planetary']"
+          />
+
+          <NetworkItem
+            tooltip-text="Mycelium is an IPv6 overlay network. Each node that joins the overlay network will receive an overlay network IP."
+            label="Mycelium"
+            :value="$props.mycelium"
+            :emit-function="$attrs['onUpdate:mycelium']"
+          />
+
+          <NetworkItem
+            tooltip-text="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
+            label="Add Wireguard Access"
+            :value="$props.wireguard"
+            :emit-function="readonlyWireguard ? undefined : $attrs['onUpdate:wireguard']"
+          />
+
+          <v-alert
+            v-if="error"
+            class="my-2"
+            type="warning"
+            variant="tonal"
+            text="You must enable at least one of network options."
+          />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </input-tooltip>
 </template>
 
 <script lang="ts">
 import { noop } from "lodash";
-import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
 
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
 
+import NetworkItem from "./NetworkItem.vue";
+
 export default {
   name: "Network",
+  components: { NetworkItem },
   props: {
-    required: {
-      type: Boolean,
-      default: () => false,
-    },
-    ipv4: {
-      type: Boolean,
-      default: () => null,
-    },
-    ipv6: {
-      type: Boolean,
-      default: () => null,
-    },
-    planetary: {
-      type: Boolean,
-      default: () => null,
-    },
-    mycelium: {
-      type: Boolean,
-      default: () => null,
-    },
-    wireguard: {
-      type: Boolean,
-      default: () => null,
-    },
-    disabled: { type: Boolean },
-    enableIpv4: {
-      type: Boolean,
-      default: () => null,
-    },
-  },
-  emits: {
-    "update:ipv4": (value?: boolean) => value,
-    "update:ipv6": (value?: boolean) => value,
-    "update:planetary": (value?: boolean) => value,
-    "update:mycelium": (value?: boolean) => value,
-    "update:wireguard": (value?: boolean) => value,
+    required: { type: Boolean, default: () => false },
+    ipv4: { type: Boolean, default: () => null },
+    ipv6: { type: Boolean, default: () => null },
+    planetary: { type: Boolean, default: () => null },
+    mycelium: { type: Boolean, default: () => null },
+    wireguard: { type: Boolean, default: () => null },
+    hasCustomDomain: { type: Boolean, default: () => true },
+    disabled: Boolean,
   },
-  setup(props, { expose }) {
+  setup(props, { attrs }) {
     const input = ref();
+    const $el = computed(() => input.value?.$el);
 
     if (
       props.ipv4 === null &&
@@ -156,11 +96,8 @@ export default {
     ) {
       throw new Error("You must provide at least one network  option");
     }
-    const error = computed(
-      () => !(props.ipv4 || props.ipv6 || props.planetary || props.wireguard || props.mycelium) && props.required,
-    );
-    expose({
-      error,
+    const error = computed(() => {
+      return !(props.ipv4 || props.ipv6 || props.planetary || props.wireguard || props.mycelium) && props.required;
     });
 
     /* Adapter to work with old code validation */
@@ -173,7 +110,7 @@ export default {
       reset: noop,
       status: ValidatorStatus.Valid,
       error: null,
-      $el: input,
+      $el,
       highlightOnError: true,
     };
 
@@ -185,9 +122,22 @@ export default {
       form?.updateStatus(uid.toString(), fakeService.status);
     });
 
+    const readonlyWireguard = computed(() => props.hasCustomDomain && !props.ipv4);
+    watch(
+      readonlyWireguard,
+      readonly => {
+        const fn = attrs["onUpdate:wireguard"];
+        if (readonly && !props.wireguard && typeof fn === "function") {
+          fn(true);
+        }
+      },
+      { immediate: true },
+    );
+
     return {
       error,
       input,
+      readonlyWireguard,
     };
   },
 };

packages/playground/src/weblets/freeflow.vue

@@ -46,7 +46,11 @@
         :large="{ cpu: 4, memory: 32, disk: 1000 }"
       />
 
-      <Networks v-model:ipv4="ipv4" v-model:ipv6="ipv6"></Networks>
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:ipv6="ipv6"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />

packages/playground/src/weblets/full_vm.vue

@@ -46,7 +46,6 @@
 
         <Network
           required
-          ref="network"
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:planetary="planetary"
@@ -155,7 +154,6 @@ const selectionDetails = ref<SelectionDetails>();
 
 const layout = useLayout();
 const tabs = ref();
-const profileManager = useProfileManager();
 const solution = ref() as Ref<SolutionFlavor>;
 const images: VmImage[] = [
   {
@@ -196,7 +194,6 @@ const wireguard = ref(false);
 const dedicated = ref(false);
 const certified = ref(false);
 const disks = ref<Disk[]>([]);
-const network = ref();
 const hasGPU = ref(false);
 const rootFilesystemSize = computed(() =>
   flist.value?.name === "Ubuntu-24.04" || flist.value?.name === "Other" ? solution.value?.disk : 2,

packages/playground/src/weblets/micro_vm.vue

@@ -53,7 +53,6 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          ref="network"
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -245,7 +244,6 @@ const mycelium = ref(true);
 const wireguard = ref(false);
 const envs = ref<Env[]>([]);
 const disks = ref<Disk[]>([]);
-const network = ref();
 const dedicated = ref(false);
 const certified = ref(false);
 const selectionDetails = ref<SelectionDetails>();

packages/playground/src/weblets/tf_casperlabs.vue

@@ -36,7 +36,13 @@
         :large="{ cpu: 8, memory: 32, disk: 1000 }"
       />
 
-      <Networks v-model:ipv4="ipv4" v-model:planetary="planetary" v-model:mycelium="mycelium" v-model:ipv6="ipv6" />
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:planetary="planetary"
+        v-model:mycelium="mycelium"
+        v-model:ipv6="ipv6"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />

packages/playground/src/weblets/tf_discourse.vue

@@ -60,9 +60,9 @@
         <Networks
           v-model:mycelium="mycelium"
           v-model:planetary="planetary"
-          v-model:ipv4="ipv4"
+          :ipv4="ipv4"
           v-model:ipv6="ipv6"
-          enableIpv4
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">