add services page clone

src/ui/client/builder/pages/services.py

@@ -269,7 +269,7 @@ def services_action(
             }
         )
 
-    if operation == "edit" or operation == "new":
+    if operation == "edit" or operation == "new" or operation == "clone":
         modes = ("easy", "advanced", "raw")
         mode_buttons = []
         for mode in modes:
@@ -281,7 +281,7 @@ def services_action(
                     size="normal",
                     attrs={
                         "role": "link",
-                        "data-link": f"modes?service_name={server_name}&mode={mode}" if operation != "new" else f"modes?mode={mode}",
+                        "data-link": f"modes?service_name={'' if operation == 'new' else server_name}&mode={mode}&operation={operation}",
                     },
                 )
             )
@@ -340,7 +340,7 @@ def get_services_list(services):
                 ),
                 button_widget(
                     id=f"open-modal-manage-{index}",
-                    text="manage",
+                    text="action_manage",
                     hideText=True,
                     color="edit",
                     size="normal",
@@ -373,6 +373,23 @@ def get_services_list(services):
                         is_draft=is_draft,
                     ),
                 ),
+                button_widget(
+                    id=f"open-modal-clone-{index}",
+                    text="action_clone",
+                    hideText=True,
+                    color="sky",
+                    size="normal",
+                    iconName="clone",
+                    iconColor="white",
+                    modal=services_action(
+                        server_name=server_name,
+                        operation="clone",
+                        title="services_clone_title",
+                        subtitle="services_clone_subtitle",
+                        additional=server_name,
+                    ),
+                    attrs={"data-server-name": server_name},
+                ),
                 button_widget(
                     attrs={"data-server-name": server_name},
                     id=f"open-modal-delete-{index}",

src/ui/client/dashboard/components/Icons/Clone.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { defineProps, reactive } from "vue";
+/**
+ *  @name Icons/Clone.vue
+ *  @description This component is a svg icon representing clone.
+ *  @example
+ *  {
+ *    color: 'info',
+ *  }
+ *  @param {String} [iconClass="icon-default"] - The class of the icon.
+ *  @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
+ *  @param {String} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
+ *  @param {Boolean} [disabled=false] - If true, the icon will be disabled.
+ */
+
+const props = defineProps({
+  iconClass: {
+    type: String,
+    required: false,
+    default: "icon-default",
+  },
+  value: {
+    type: [String, Number],
+    required: false,
+    default: "",
+  },
+  color: {
+    type: String,
+    required: false,
+    default: "sky",
+  },
+  disabled: { type: Boolean, required: false, default: false },
+});
+
+const icon = reactive({
+  color: props.color || "sky",
+});
+</script>
+<template>
+  <svg
+    :data-color="icon.color"
+    :data-value="props.value"
+    :aria-disabled="props.disabled ? 'true' : 'false'"
+    data-svg="back"
+    role="img"
+    aria-hidden="true"
+    :class="[props.iconClass, icon.color, 'fill']"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z"
+    />
+    <path
+      d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z"
+    />
+  </svg>
+</template>

src/ui/client/dashboard/components/Widget/Icons.vue

@@ -41,6 +41,8 @@ import Uncheck from "@components/Icons/Uncheck.vue";
 import Back from "@components/Icons/Back.vue";
 import Refresh from "@components/Icons/Refresh.vue";
 import Download from "@components/Icons/Download.vue";
+import Clone from "@components/Icons/Clone.vue";
+
 /**
  *  @name Widget/Icons.vue
  *  @description This component is a wrapper that contains all the icons available in the application (Icons folder).
@@ -112,6 +114,7 @@ onMounted(() => {
       v-if="useEqualStr(props.iconName, 'exclamation')"
       v-bind="icon"
     />
+    <Clone v-if="useEqualStr(props.iconName, 'clone')" v-bind="icon" />
     <Download v-if="useEqualStr(props.iconName, 'download')" v-bind="icon" />
     <Refresh v-if="useEqualStr(props.iconName, 'refresh')" v-bind="icon" />
     <Back v-if="useEqualStr(props.iconName, 'back')" v-bind="icon" />

src/ui/client/dashboard/components/Widget/Tabulator.vue

@@ -291,7 +291,9 @@ onMounted(() => {
       a11yTable(table.instance);
       // Add table instance to store in order to use it in other components
       tableStore.setTable(props.id, table.instance);
-      table.instance.redraw();
+      setTimeout(() => {
+        table.instance.redraw();
+      }, 20);
     });
   } catch (e) {}
 

src/ui/client/dashboard/lang/en.json

@@ -144,6 +144,8 @@
   "icons_linkedin_desc": "Linkedin icon representing a link to a Linkedin profile.",
   "icons_twitter_desc": "Twitter icon representing a link to a Twitter account.",
   "action_switch": "switch {name}",
+  "action_manage": "manage {name}",
+  "action_clone": "clone {name}",
   "action_send": "send {name}",
   "action_start": "start {name}",
   "action_disable": "disable {name}",
@@ -329,6 +331,8 @@
   "services_mode_subtitle": "Manage your service settings.",
   "services_manage_subtitle": "Manage your service settings.",
   "services_no_easy_mode": "No easy mode for this template",
+  "services_clone_title": "Clone service",
+  "services_clone_subtitle": "Choose a mode to clone service",
   "logs_title": "Logs",
   "logs_not_found": "No logs found",
   "logs_no_files_found": "No log files found",