ui: change ipaddress tab label for shared networks (#8305)

In UI, shared network IP addresses are shown in a tab named Public IP addresses inside the network view.

Public IP addresses have their own subsection in the UI. Network → Public IP address. Shared network IP addresses are not shown in this view.

This is confusing for users and Public IP addresses tab in the network view has been renamed as IP addresses for a shared network.

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

Author: shwstppr

ui/public/locales/en.json

@@ -1030,6 +1030,7 @@
 "label.ipv6.dns1": "IPv6 DNS1",
 "label.ipv6.dns2": "IPv6 DNS2",
 "label.ipv6.subnets": "IPv6 Subnets",
+"label.ip.addresses": "IP Addresses",
 "label.iqn": "Target IQN",
 "label.is.in.progress": "is in progress",
 "label.is.shared": "Is shared",

ui/src/components/view/ResourceView.vue

@@ -44,7 +44,7 @@
           <template v-for="tab in tabs" :key="tab.name">
             <a-tab-pane
               :key="tab.name"
-              :tab="$t('label.' + tab.name)"
+              :tab="$t('label.' + tabName(tab))"
               v-if="showTab(tab)">
               <keep-alive>
                 <component
@@ -158,6 +158,12 @@ export default {
       )
       this.$emit('onTabChange', key)
     },
+    tabName (tab) {
+      if (typeof tab.name === 'function') {
+        return tab.name(this.resource)
+      }
+      return tab.name
+    },
     showTab (tab) {
       if (this.networkService && this.networkService.service && tab.networkServiceFilter) {
         return tab.networkServiceFilter(this.networkService.service)

ui/src/config/section/network.js

@@ -65,7 +65,7 @@ export default {
         component: shallowRef(defineAsyncComponent(() => import('@/views/network/Ipv6FirewallRulesTab.vue'))),
         show: (record, route, user) => { return record.type === 'Isolated' && ['IPv6', 'DualStack'].includes(record.internetprotocol) && !('vpcid' in record) && 'listIpv6FirewallRules' in store.getters.apis && (['Admin', 'DomainAdmin'].includes(user.roletype) || record.account === user.account || record.projectid) }
       }, {
-        name: 'public.ip.addresses',
+        name: (record) => { return record.type === 'Shared' ? 'ip.addresses' : 'public.ip.addresses' },
         component: shallowRef(defineAsyncComponent(() => import('@/views/network/IpAddressesTab.vue'))),
         show: (record, route, user) => { return 'listPublicIpAddresses' in store.getters.apis && (record.type === 'Shared' || (record.type === 'Isolated' && !('vpcid' in record) && (['Admin', 'DomainAdmin'].includes(user.roletype) || record.account === user.account || record.projectid))) }
       }, {