Repository: kestra-io/kestra
Issue: Auto refresh button is not a switch
Labels: bug
enhancement

### Expected Behavior

_No response_

### Actual Behaviour

At first it looks like the auto refresh button is a switch cause when we click on it the background color stays purple. However it is only due to button keeping focus effect afterwards. If you click anywhere else on the page then you have no feedback of whether or not the auto refresh is active.

Also, it is even worst when the local storage kicks in as it retrieves the previous state from the local storage. However when we come on a page with the auto refresh being active due to local storage, since we didn't click on it we don't have the "on focus" effect, which make the auto refresh looking disabled while it is active.

I think we should use the [checkbox element](https://element-plus.org/en-US/component/checkbox.html) instead.

### Steps To Reproduce

_No response_

### Environment Information

- Kestra Version: 0.11.0-SNAPSHOT
- Operating System (OS / Docker / Kubernetes):
- Java Version (If not docker):


### Example flow

_No response_

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/layout/RefreshButton.vue b/ui/src/components/layout/RefreshButton.vue
index 9fa6677b69..d5e8d6ee48 100644
--- a/ui/src/components/layout/RefreshButton.vue
+++ b/ui/src/components/layout/RefreshButton.vue
@@ -1,8 +1,8 @@
 <template>
     <el-button-group>
-        <el-button @click="toggleAutoRefresh" :pressed="autoRefresh">
+        <el-button :active="autoRefresh" @click="toggleAutoRefresh">
             <kicon :tooltip="$t('toggle periodic refresh each 10 seconds')" placement="bottom">
-                <clock />
+                <component :is="autoRefresh ? 'auto-renew' : 'auto-renew-off'" class="auto-refresh-icon" />
             </kicon>
         </el-button>
         <el-button @click="triggerRefresh">
@@ -14,10 +14,11 @@
 </template>
 <script>
     import Refresh from "vue-material-design-icons/Refresh.vue";
-    import Clock from "vue-material-design-icons/Clock.vue";
+    import AutoRenew from "vue-material-design-icons/Autorenew.vue";
+    import AutoRenewOff from "vue-material-design-icons/AutorenewOff.vue";
     import Kicon from "../Kicon.vue"
     export default {
-        components: {Refresh, Clock, Kicon},
+        components: {Refresh, AutoRenew, AutoRenewOff, Kicon},
         emits: ["refresh"],
         data() {
             return {
@@ -32,12 +33,6 @@
             toggleAutoRefresh() {
                 this.autoRefresh = !this.autoRefresh;
                 localStorage.setItem("autoRefresh", this.autoRefresh ? "1" : "0");
-                if (this.autoRefresh) {
-                    this.refreshHandler = setInterval(this.triggerRefresh, 10000);
-                    this.triggerRefresh()
-                } else {
-                    this.stopRefresh();
-                }
             },
             triggerRefresh() {
                 this.$emit("refresh");
@@ -51,7 +46,29 @@
         },
         beforeUnmount() {
             this.stopRefresh();
+        },
+        watch: {
+            autoRefresh(newValue) {
+                if (newValue) {
+                    this.refreshHandler = setInterval(this.triggerRefresh, 10000);
+                    this.triggerRefresh()
+                } else {
+                    this.stopRefresh();
+                }
+            }
         }
     };
 </script>
-
+<style scoped lang="scss">
+    button[active=true] .auto-refresh-icon {
+        animation: rotate 10s linear infinite;
+    }
+    @keyframes rotate {
+        0% {
+            rotate: 0deg;
+        }
+        100% {
+            rotate: 360deg;
+        }
+    }
+</style>
\ No newline at end of file


Test patch: