From 40420207409fe785b95d0680756e3c5bb1eec6aa Mon Sep 17 00:00:00 2001
From: tiwari-nishant <tiwari.nishant@ibm.com>
Date: Wed, 23 Oct 2024 14:26:37 +0530
Subject: [PATCH] Removed Prefix Length input from IPV6DefaultGateway table
 Jira Story:https://jsw.ibm.com/browse/PFEBMC-3374

---
 .../Network/ModalIpv6StaticDefaultGateway.vue | 54 +-----------
 .../Network/TableIpv6StaticDefaultGateway.vue | 83 +++++++++----------
 2 files changed, 42 insertions(+), 95 deletions(-)

diff --git a/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue b/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue
index 52a63032cd..bf21df30d4 100644
--- a/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue
+++ b/src/views/Settings/Network/ModalIpv6StaticDefaultGateway.vue
@@ -19,6 +19,7 @@
             <b-form-input
               id="ipAddress"
               v-model="form.ipAddress"
+              style="width: 215%"
               type="text"
               :state="getValidationState($v.form.ipAddress)"
               @input="$v.form.ipAddress.$touch()"
@@ -33,38 +34,6 @@
             </b-form-invalid-feedback>
           </b-form-group>
         </b-col>
-        <b-col sm="6">
-          <b-form-group
-            :label="$t('pageNetwork.modal.prefixLength')"
-            label-for="prefixLength"
-          >
-            <b-form-input
-              id="prefixLength"
-              v-model="form.prefixLength"
-              type="number"
-              :state="getValidationState($v.form.prefixLength)"
-              @blur="$v.form.prefixLength.$touch()"
-            />
-            <b-form-invalid-feedback role="alert">
-              <template v-if="!$v.form.prefixLength.required">
-                {{ $t('global.form.fieldRequired') }}
-              </template>
-              <template
-                v-if="
-                  !$v.form.prefixLength.minLength ||
-                  !$v.form.prefixLength.maxLength
-                "
-              >
-                {{
-                  $t('global.form.valueMustBeBetween', {
-                    min: 0,
-                    max: 128,
-                  })
-                }}
-              </template>
-            </b-form-invalid-feedback>
-          </b-form-group>
-        </b-col>
       </b-row>
     </b-form>
     <template #modal-footer="{ cancel }">
@@ -85,20 +54,11 @@
 
 <script>
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import {
-  required,
-  minValue,
-  maxValue,
-  helpers,
-} from 'vuelidate/lib/validators';
+import { required, helpers } from 'vuelidate/lib/validators';
 
 export default {
   mixins: [VuelidateMixin],
   props: {
-    prefixLength: {
-      type: Number,
-      default: 0,
-    },
     ipAddress: {
       type: String,
       default: '',
@@ -112,7 +72,6 @@ export default {
     return {
       form: {
         ipAddress: '',
-        prefixLength: 0,
       },
     };
   },
@@ -120,9 +79,6 @@ export default {
     ipAddress() {
       this.form.ipAddress = this.ipAddress;
     },
-    prefixLength() {
-      this.form.prefixLength = this.prefixLength;
-    },
   },
   validations() {
     return {
@@ -134,11 +90,6 @@ export default {
             /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))|(^\s*((?=.{1,255}$)(?=.*[A-Za-z].*)[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?(?:\.[0-9A-Za-z](?:(?:[0-9A-Za-z]|\b-){0,61}[0-9A-Za-z])?)*)\s*$)/
           ),
         },
-        prefixLength: {
-          required,
-          minValue: minValue(0),
-          maxValue: maxValue(128),
-        },
       },
     };
   },
@@ -148,7 +99,6 @@ export default {
       if (this.$v.$invalid) return;
       this.$emit('ok', {
         Address: this.form.ipAddress,
-        PrefixLength: Number(this.form.prefixLength),
       });
       this.closeModal();
     },
diff --git a/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue b/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue
index 1ab2eb1c51..ceea9785e3 100644
--- a/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue
+++ b/src/views/Settings/Network/TableIpv6StaticDefaultGateway.vue
@@ -2,45 +2,48 @@
   <div>
     <page-section :section-title="$t('pageNetwork.ipv6StaticDefaultGateway')">
       <b-row>
-        <b-col class="text-right">
-          <b-button
-            variant="primary"
-            :disabled="isTablesDisabled"
-            @click="initIpv6DefaultGatewayModal()"
+        <b-col lg="6">
+          <div class="text-right">
+            <b-button
+              variant="primary"
+              :disabled="isTablesDisabled"
+              @click="initIpv6DefaultGatewayModal()"
+            >
+              <icon-add />
+              {{ $t('pageNetwork.table.addIpv6StaticDefaultGateway') }}
+            </b-button>
+          </div>
+
+          <b-table
+            responsive="md"
+            hover
+            :fields="ipv6DefaultGatewayTableFields"
+            :items="form.ipv6DefaultGatewayTableItems"
+            :empty-text="$t('global.table.emptyMessage')"
+            :busy="isTablesDisabled"
+            class="mb-0"
+            show-empty
           >
-            <icon-add />
-            {{ $t('pageNetwork.table.addIpv6StaticDefaultGateway') }}
-          </b-button>
+            <template #cell(actions)="{ item }">
+              <table-row-action
+                v-for="(action, actionIndex) in item.actions"
+                :key="actionIndex"
+                :value="action.value"
+                :title="action.title"
+                :enabled="action.enabled"
+                @click-table-action="
+                  onIpv6DefaultGatewayTableAction(action, $event, item)
+                "
+              >
+                <template #icon>
+                  <icon-edit v-if="action.value === 'edit'" />
+                  <icon-trashcan v-if="action.value === 'delete'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
         </b-col>
       </b-row>
-      <b-table
-        responsive="md"
-        hover
-        :fields="ipv6DefaultGatewayTableFields"
-        :items="form.ipv6DefaultGatewayTableItems"
-        :empty-text="$t('global.table.emptyMessage')"
-        :busy="isTablesDisabled"
-        class="mb-0"
-        show-empty
-      >
-        <template #cell(actions)="{ item }">
-          <table-row-action
-            v-for="(action, actionIndex) in item.actions"
-            :key="actionIndex"
-            :value="action.value"
-            :title="action.title"
-            :enabled="action.enabled"
-            @click-table-action="
-              onIpv6DefaultGatewayTableAction(action, $event, item)
-            "
-          >
-            <template #icon>
-              <icon-edit v-if="action.value === 'edit'" />
-              <icon-trashcan v-if="action.value === 'delete'" />
-            </template>
-          </table-row-action>
-        </template>
-      </b-table>
     </page-section>
   </div>
 </template>
@@ -90,10 +93,6 @@ export default {
           key: 'Address',
           label: this.$t('pageNetwork.table.ipAddress'),
         },
-        {
-          key: 'PrefixLength',
-          label: this.$t('pageNetwork.table.prefixLength'),
-        },
         { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
@@ -128,7 +127,6 @@ export default {
       this.form.ipv6DefaultGatewayTableItems = addresses.map((ipv6) => {
         return {
           Address: ipv6.Address,
-          PrefixLength: ipv6.PrefixLength,
           actions: [
             {
               value: 'edit',
@@ -161,10 +159,9 @@ export default {
       const newIpv6Array = this.form.ipv6DefaultGatewayTableItems
         .filter((row) => row.Address !== item.Address)
         .map((ipv6) => {
-          const { Address, PrefixLength } = ipv6;
+          const { Address } = ipv6;
           return {
             Address,
-            PrefixLength,
           };
         });
       const addressIp = item.Address;