From 1cb5c30e9dbcf43194013433d592f53353e793d7 Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Tue, 17 Aug 2021 13:09:36 +0530
Subject: [PATCH 1/3] ui: Update placeholders for adding new tier

---
 ui/public/locales/en.json | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 2b991fd15fbe..25ca38eac784 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -333,7 +333,7 @@
 "label.add.new.netscaler": "Add new NetScaler",
 "label.add.new.pa": "Add new Palo Alto",
 "label.add.new.srx": "Add new SRX",
-"label.add.new.tier": "Add new tier",
+"label.add.new.tier": "Add New Tier",
 "label.add.nfs.secondary.staging.store": "Add NFS Secondary Staging Store",
 "label.add.niciranvp.device": "Add Nvp Controller",
 "label.add.note": "Add Note",
@@ -617,8 +617,6 @@
 "label.create.account": "Create Account",
 "label.create.backup": "Start Backup",
 "label.create.network": "Create New Network",
-"label.create.network.gateway.description": "The gateway of the tier in the super CIDR range and not overlapping the CIDR of any other tier in this VPC.",
-"label.create.network.netmask.description": "Netmask of the tier. For example, with VPC CIDR of 10.0.0.0/16 and network tier CIDR of 10.1.1.0/24, gateway is 10.1.1.1 and netmask is 255.255.255.0",
 "label.create.nfs.secondary.staging.storage": "Create NFS Secondary Staging Store",
 "label.create.nfs.secondary.staging.store": "Create NFS secondary staging store",
 "label.create.project": "Create project",
@@ -628,6 +626,12 @@
 "label.create.snapshot.for.volume": "Created snapshot for volume",
 "label.create.ssh.key.pair": "Create a SSH Key Pair",
 "label.create.template": "Create template",
+"label.create.tier.aclid.description": "The ACL associated with the Tier",
+"label.create.tier.externalid.description": "ID of the network in an external system",
+"label.create.tier.gateway.description": "Gateway of the tier in the super CIDR range, not overlapping the CIDR of other tier in this VPC.",
+"label.create.tier.name.description": "A unique name for the tier",
+"label.create.tier.netmask.description": "Netmask of the tier. For example 255.255.255.0",
+"label.create.tier.networkofferingid.description": "The network offering for the tier",
 "label.create.user": "Create user",
 "label.create.vpn.connection": "Create VPN Connection",
 "label.created": "Created",
@@ -2163,7 +2167,6 @@
 "label.unauthorized": "Unauthorized",
 "label.unavailable": "Unavailable",
 "label.unhealthy.threshold": "Unhealthy Threshold",
-"label.unique.name.tier": "A unique name of the tier",
 "label.unit": "Usage Unit",
 "label.unknown": "Unknown",
 "label.unlimited": "Unlimited",

From 3b1459e11c62c39d6b1b25fc78dfecb1cdf91f07 Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Tue, 17 Aug 2021 14:30:27 +0530
Subject: [PATCH 2/3] Fix VpcTiersTab

---
 ui/src/views/network/VpcTiersTab.vue | 60 +++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 11 deletions(-)

diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index f64bd0d5ff8f..e7703a58af3f 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -22,7 +22,7 @@
       icon="plus"
       style="width: 100%;margin-bottom: 20px;"
       :disabled="!('createNetwork' in $store.getters.apis)"
-      @click="handleOpenModal">{{ $t('label.add.network') }}</a-button>
+      @click="handleOpenModal">{{ $t('label.add.new.tier') }}</a-button>
     <a-list class="list">
       <a-list-item v-for="(network, idx) in networks" :key="idx" class="list__item">
         <div class="list__item-outer-container">
@@ -161,13 +161,25 @@
       @ok="handleAddNetworkSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddNetworkSubmit" :form="form">
-          <a-form-item :label="$t('label.name')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.name') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.name.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input
-              :placeholder="$t('label.unique.name.tier')"
+              :placeholder="$t('label.create.tier.name.description')"
               v-decorator="['name',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
-              autoFocus></a-input>
+              autoFocus />
           </a-form-item>
-          <a-form-item :label="$t('label.networkofferingid')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.networkofferingid') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.networkofferingid.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
               v-decorator="['networkOffering',{rules: [{ required: true, message: `${$t('label.required')}` }]}]">
               <a-select-option v-for="item in networkOfferings" :key="item.id" :value="item.id">
@@ -175,22 +187,48 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item :label="$t('label.gateway')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.gateway') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.gateway.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input
-              :placeholder="$t('label.create.network.gateway.description')"
+              :placeholder="$t('label.create.tier.gateway.description')"
               v-decorator="['gateway',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('label.netmask')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.netmask') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.netmask.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input
-              :placeholder="$t('label.create.network.netmask.description')"
+              :placeholder="$t('label.create.tier.netmask.description')"
               v-decorator="['netmask',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('label.externalid')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.externalid') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.externalid.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-input
+              :placeholder=" $t('label.create.tier.externalid.description')"
               v-decorator="['externalId']"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('label.aclid')">
+          <a-form-item>
+            <span slot="label">
+              {{ $t('label.aclid') }}
+              <a-tooltip placement="right" :title="$t('label.create.tier.aclid.description')">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
             <a-select
+              :placeholder="$t('label.create.tier.aclid.description')"
               v-decorator="['acl',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
               @change="val => { this.handleNetworkAclChange(val) }">
               <a-select-option v-for="item in networkAclList" :key="item.id" :value="item.id">

From a5d46e13e70e12e09f8dab6e5275dfac8f390f11 Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Thu, 19 Aug 2021 13:43:02 +0530
Subject: [PATCH 3/3] Removing icon style and colon

---
 ui/src/views/network/VpcTiersTab.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index e7703a58af3f..f53f73609d37 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -161,23 +161,23 @@
       @ok="handleAddNetworkSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddNetworkSubmit" :form="form">
-          <a-form-item>
+          <a-form-item :colon="false">
             <span slot="label">
               {{ $t('label.name') }}
               <a-tooltip placement="right" :title="$t('label.create.tier.name.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
               :placeholder="$t('label.create.tier.name.description')"
-              v-decorator="['name',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
+              v-decorator="['name', {rules: [{ required: true, message: `${$t('label.required')}` }]}]"
               autoFocus />
           </a-form-item>
-          <a-form-item>
+          <a-form-item :colon="false">
             <span slot="label">
               {{ $t('label.networkofferingid') }}
               <a-tooltip placement="right" :title="$t('label.create.tier.networkofferingid.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select
@@ -187,44 +187,44 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item>
+          <a-form-item :colon="false">
             <span slot="label">
               {{ $t('label.gateway') }}
               <a-tooltip placement="right" :title="$t('label.create.tier.gateway.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
               :placeholder="$t('label.create.tier.gateway.description')"
               v-decorator="['gateway',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
           </a-form-item>
-          <a-form-item>
+          <a-form-item :colon="false">
             <span slot="label">
               {{ $t('label.netmask') }}
               <a-tooltip placement="right" :title="$t('label.create.tier.netmask.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
               :placeholder="$t('label.create.tier.netmask.description')"
               v-decorator="['netmask',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
           </a-form-item>
-          <a-form-item>
+          <a-form-item :colon="false">
             <span slot="label">
               {{ $t('label.externalid') }}
               <a-tooltip placement="right" :title="$t('label.create.tier.externalid.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-input
               :placeholder=" $t('label.create.tier.externalid.description')"
               v-decorator="['externalId']"></a-input>
           </a-form-item>
-          <a-form-item>
+          <a-form-item :colon="false">
             <span slot="label">
               {{ $t('label.aclid') }}
               <a-tooltip placement="right" :title="$t('label.create.tier.aclid.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                <a-icon type="info-circle" />
               </a-tooltip>
             </span>
             <a-select