From 8de85a858e9323d538e604cdea43e6c2c57a2705 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Fri, 24 May 2024 12:16:13 +0530
Subject: [PATCH] ui: add move to top/bottom for acl rules list

Addresses #8865

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
---
 ui/src/core/lazy_lib/icons_use.js        |  4 ++++
 ui/src/views/network/AclListRulesTab.vue | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/ui/src/core/lazy_lib/icons_use.js b/ui/src/core/lazy_lib/icons_use.js
index ea0abdc3506b..2e0eea4f84b4 100644
--- a/ui/src/core/lazy_lib/icons_use.js
+++ b/ui/src/core/lazy_lib/icons_use.js
@@ -167,6 +167,8 @@ import {
   UserOutlined,
   UserSwitchOutlined,
   UploadOutlined,
+  VerticalAlignBottomOutlined,
+  VerticalAlignTopOutlined,
   WarningOutlined,
   WifiOutlined,
   SolutionOutlined
@@ -326,6 +328,8 @@ export default {
     app.component('UserOutlined', UserOutlined)
     app.component('UserSwitchOutlined', UserSwitchOutlined)
     app.component('UploadOutlined', UploadOutlined)
+    app.component('VerticalAlignBottomOutlined', VerticalAlignBottomOutlined)
+    app.component('VerticalAlignTopOutlined', VerticalAlignTopOutlined)
     app.component('WarningOutlined', WarningOutlined)
     app.component('WifiOutlined', WifiOutlined)
     app.component('renderIcon', renderIcon)
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index 4207a4629823..c4a882de18af 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -90,6 +90,16 @@
               </div>
             </div>
             <div class="list__actions">
+              <tooltip-button
+                v-if="element.id !== acls[0].id"
+                :tooltip="$t('label.move.to.top')"
+                icon="vertical-align-top-outlined"
+                @onClick="() => moveRuleToTop(element)" />
+              <tooltip-button
+                v-if="element.id !== acls[acls.length - 1].id"
+                :tooltip="$t('label.move.to.bottom')"
+                icon="vertical-align-bottom-outlined"
+                @onClick="() => moveRuleToBottom(element)" />
               <tooltip-button :tooltip="$t('label.tags')" icon="tag-outlined" @onClick="() => openTagsModal(element)" />
               <tooltip-button :tooltip="$t('label.edit')" icon="edit-outlined" @onClick="() => openEditRuleModal(element)" />
               <tooltip-button
@@ -632,6 +642,12 @@ export default {
 
       if (e.moved.newIndex + 1 < this.acls.length) nextaclruleid = this.acls[e.moved.newIndex + 1].id
 
+      this.moveRule(
+        id,
+        previousaclruleid,
+        nextaclruleid)
+    },
+    moveRule (id, previousaclruleid, nextaclruleid) {
       this.fetchLoading = true
       api('moveNetworkAclItem', {
         id,
@@ -664,6 +680,12 @@ export default {
         this.fetchLoading = false
       })
     },
+    moveRuleToTop (element) {
+      this.moveRule(element.id, null, this.acls[0].id)
+    },
+    moveRuleToBottom (element) {
+      this.moveRule(element.id, this.acls[this.acls.length - 1].id, null)
+    },
     exportAclList () {
       const csvData = this.csv({ data: this.acls })