FIX: multi setups release fixes (#1935)

* FIX: node page fetching setups back from control

* REMOVE: logs

* FIX: servive menu

* REMOVE: selecting network on custom installation

* ADD: skeletons to empty node page

* UPDATE: skeletons space

* FIX: drawer error

* FIX: switching plugin for lidocsm

* FIX: switching both category clinet

* FIX: fetching new clients on edit page

* FIX: setup info modal

launcher/public/output.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -2571,6 +2571,11 @@ video {
           appearance: none;
 }
 
+.auto-cols-max{
+  grid-auto-columns: -webkit-max-content;
+  grid-auto-columns: max-content;
+}
+
 .grid-flow-row{
   grid-auto-flow: row;
 }
@@ -2881,6 +2886,12 @@ video {
   margin-bottom: calc(1px * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .divide-x > :not([hidden]) ~ :not([hidden]){
   --tw-divide-x-reverse: 0;
   border-right-width: calc(1px * var(--tw-divide-x-reverse));

launcher/src/components/UI/custom-installation/components/CustomFooter.vue

@@ -26,7 +26,6 @@ const props = defineProps({
   },
 });
 
-console.log("props", props.disabledBtn);
 const emit = defineEmits(["prepareStereum"]);
 
 const prepareStereum = () => {

launcher/src/components/UI/custom-installation/components/CustomPath.vue

@@ -1,25 +1,21 @@
 <template>
-  <div
-    class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-24 grid-rows-12"
-  >
+  <div class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-24 grid-rows-12">
     <CustomHeader />
     <div
       class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto"
     >
       <div
-        class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1E2429] rounded-md grid grid-cols-12 grid-rows-7 p-2"
+        class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1E2429] rounded-md grid grid-cols-12 grid-rows-7 p-4"
       >
-        <div
-          class="col-start-1 col-span-full row-start-1 row-span-2 flex justify-center items-center p-2"
-        >
-          <span class="text-left text-gray-200 text-sm">
+        <div class="col-start-1 col-span-full row-start-1 row-span-2 flex justify-center items-center p-2">
+          <span class="text-left text-gray-300 text-md font-sans font-semibold">
             {{ $t("customInstallation.customInstallationText") }}</span
           >
         </div>
         <div
           class="col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-12 grid-rows-7 relative duration-500"
         >
-          <div
+          <!-- <div
             class="col-start-3 col-span-8 row-start-1 row-span-1 bg-gray-200 rounded-md grid grid-cols-6 cursor-pointer"
             @click="networkListDropdown = !networkListDropdown"
           >
@@ -69,20 +65,16 @@
                 >{{ item.name }}</span
               >
             </li>
-          </TransitionGroup>
+          </TransitionGroup> -->
           <div
-            class="w-full col-start-1 col-span-full row-start-3 row-span-full mx-auto flex flex-col justify-start items-center px-2"
+            class="w-full col-start-1 col-span-full row-start-2 row-span-full mx-auto flex flex-col justify-start items-center px-2"
           >
             <div class="w-full h-10 flex justify-center items-center">
               <span class="text-center text-gray-200 text-md">{{ inputTitle }}:</span>
             </div>
 
-            <div
-              class="w-full h-20 flex justify-center items-center p-4 bg-[#3d4449] rounded-full"
-            >
-              <div
-                class="w-full h-full bg-gray-300 rounded-full flex justify-start items-center"
-              >
+            <div class="w-full h-20 flex justify-center items-center p-4 bg-[#3d4449] rounded-full">
+              <div class="w-full h-full bg-gray-300 rounded-full flex justify-start items-center">
                 <input
                   v-model="userSelectedPath"
                   type="text"
@@ -105,21 +97,15 @@ import CustomHeader from "./CustomHead.vue";
 import ControlService from "@/store/ControlService";
 import { useRouter } from "vue-router";
 import { useNodeHeader } from "@/store/nodeHeader";
-import { useNodeManage } from "@/store/nodeManage";
 import { useClickInstall } from "@/store/clickInstallation";
 
 // Data
 
 const headerStore = useNodeHeader();
-const manageStore = useNodeManage();
 const clickStore = useClickInstall();
 
 const router = useRouter();
-const networkListDropdown = ref(false);
-// const selectedNetwork = ref("click to select a network");
 const userSelectedPath = ref("/opt/stereum");
-const selectedNetworkIcon = ref("");
-const selectedNetworkName = ref("");
 const inputTitle = ref("Choose your installation path where Stereum will be installed");
 const nextBtnDisabled = ref(false);
 const displayItem = ref("Click to select a network");
@@ -129,7 +115,7 @@ watch(userSelectedPath, (newValue) => {
 });
 
 watchEffect(() => {
-  if (userSelectedPath.value === "" || !selectedNetworkName.value) {
+  if (userSelectedPath.value === "") {
     nextBtnDisabled.value = true;
   } else {
     nextBtnDisabled.value = false;
@@ -150,21 +136,11 @@ onMounted(() => {
 });
 
 // Methods
-const selectNetwork = (network) => {
-  selectedNetworkIcon.value = network.icon;
-  selectedNetworkName.value = network.name;
-  manageStore.currentNetwork = network;
-  displayItem.value = network;
-  nextBtnDisabled.value = false;
-  networkListDropdown.value = false;
-};
 
 const getInstallPath = async () => {
   let largestVolumePath = await ControlService.getLargestVolumePath();
   if (largestVolumePath === "/") largestVolumePath += "opt";
-  const stereumInstallationPath = [largestVolumePath, "/stereum"]
-    .join("/")
-    .replace(/\/{2,}/, "/");
+  const stereumInstallationPath = [largestVolumePath, "/stereum"].join("/").replace(/\/{2,}/, "/");
   clickStore.installationPath = stereumInstallationPath;
 };
 

launcher/src/components/UI/edit-page/EditScreen.vue

@@ -299,14 +299,6 @@ const listKeys = async (forceRefresh) => {
   await useListKeys(forceRefresh);
 };
 
-// const updateDisplayNetworkList = () => {
-//   if (manageStore.newConfiguration.length === 0) {
-//     manageStore.displayNetworkList = true;
-//   } else {
-//     manageStore.displayNetworkList = false;
-//   }
-// };
-
 // Random ID generator
 function generateRandomId() {
   const timestamp = new Date().getTime().toString(16);
@@ -516,7 +508,11 @@ const cancelChangeHandler = (item) => {
 
 const addServices = (service) => {
   let item = useDeepClone(service);
-  if (item?.category === "service" && manageStore.newConfiguration.map((s) => s.service).includes(item.service)) {
+  if (
+    item?.category === "service" &&
+    manageStore.newConfiguration.map((s) => s.service).includes(item.service) &&
+    setupStore.selectedSetup?.setupId === service?.setupId
+  ) {
     return;
   } else {
     item.id = manageStore.newConfiguration.length;
@@ -533,7 +529,8 @@ const addServices = (service) => {
 
 const addServerServices = (service) => {
   let item = useDeepClone(service);
-  if (item.category === "service" && manageStore.newConfiguration.map((s) => s.service).includes(item.service)) {
+
+  if (item.category === "service" && manageStore.newConfiguration.map((s) => s?.service).includes(item?.service)) {
     return;
   } else {
     item.id = manageStore.newConfiguration.length;
@@ -542,7 +539,9 @@ const addServerServices = (service) => {
       isNewClient: true,
     };
     manageStore.newConfiguration.push(newItem);
-    setupStore.editSetups.find((s) => s.setupId === setupStore.selectedSetup?.setupId).services.push(newItem);
+
+    setupStore.editSetups.find((s) => s.setupId === setupStore.selectedSetup?.setupId)?.services.push(newItem);
+
     clientToInstall.value = newItem;
     clientToInstall.value.addPanel = true;
   }
@@ -791,12 +790,14 @@ const destroyNode = async () => {
 // Confirm Changes methods
 const confirmHandler = async () => {
   manageStore.disableConfirmButton = true;
+
   const setupExists = manageStore.confirmChanges.some(
     (item) =>
       item.service?.hasOwnProperty("setupName") &&
       item.service?.hasOwnProperty("setupId") &&
       item.service.setupId == item.id
   );
+
   const serverServiceExists = manageStore.confirmChanges.some(
     (change) => change.content === "INSTALL" && setupStore.serverServices.includes(change.service.service)
   );
@@ -852,15 +853,15 @@ const handleSwitchSetupNetwork = async () => {
 };
 
 const resetState = async () => {
-  updateDom();
   manageStore.confirmChanges = [];
   manageStore.selectedNetwork = {};
   setupStore.selectedSetupToRemove = [];
   manageStore.isLineHidden = false;
   await listKeys();
   setTimeout(() => {
     manageStore.disableConfirmButton = false;
-  }, 2000);
+  }, 3000);
+  await updateDom();
 };
 
 const nukeConfirmation = () => {

launcher/src/components/UI/edit-page/components/drawer/DrawerMenu.vue

@@ -5,9 +5,7 @@
     <div
       class="col-start-1 col-span-full row-start-1 row-end-3 w-full h-full bg-[#232428] rounded-md flex flex-col justify-between items-center p-1"
     >
-      <span class="text-xs text-center text-gray-300 font-sans uppercase mt-1"
-        >Create a setup</span
-      >
+      <span class="text-xs text-center text-gray-300 font-sans uppercase mt-1">Create a setup</span>
 
       <div
         class="w-full h-7 bg-teal-700 rounded-[5px] text-center cursor-pointer hover:bg-teal-900 hover:scale-95 active:scale-90 transition-all duration-100"
@@ -19,9 +17,7 @@
     <div
       class="col-start-1 col-span-full row-start-3 row-end-5 w-full h-full bg-[#232428] rounded-md flex flex-col justify-between items-center p-1"
     >
-      <span class="text-xs text-center text-gray-300 font-sans uppercase mt-1"
-        >IMPORT A SETUP</span
-      >
+      <span class="text-xs text-center text-gray-300 font-sans uppercase mt-1">IMPORT A SETUP</span>
 
       <div
         class="w-full h-7 bg-teal-700 rounded-[5px] text-center cursor-pointer hover:bg-teal-900 hover:scale-95 active:scale-90 transition-all duration-100"
@@ -44,18 +40,13 @@
           v-for="service in getServerServices"
           :key="service"
           class="w-full h-7 min-h-7 bg-[#282a2c] hover:bg-gray-700 rounded-sm border border-gray-600 mx-auto shadow-md shadow-black grid grid-cols-6 items-center p-[2px] cursor-pointer overflow-hidden"
-          :class="service.isDuplicated ? 'pointer-events-none opacity-50' : ''"
+          :class="service?.isDuplicated ? 'pointer-events-none opacity-50' : ''"
           @dblclick="addService(service)"
         >
-          <img
-            class="w-5 h-5 col-start-1 col-span-1 mx-auto self-center"
-            :src="service.icon"
-            alt="Service Icon"
-          />
-          <span
-            class="col-start-2 col-span-full self-center text-xs text-gray-200 text-left font-sans truncate"
-            >{{ service.service }}</span
-          >
+          <img class="w-5 h-5 col-start-1 col-span-1 mx-auto self-center" :src="service.icon" alt="Service Icon" />
+          <span class="col-start-2 col-span-full self-center text-xs text-gray-200 text-left font-sans truncate">{{
+            service?.service
+          }}</span>
         </div>
       </div>
     </div>
@@ -77,13 +68,13 @@ const allServices = ref([]);
 
 const getServerServices = computed(() => {
   const newConfigServices = new Set(manageStore.newConfiguration.map((e) => e.service));
-  const serverServices = new Set(setupStore.serverServices.map((e) => e));
+  const serverServices = new Set(setupStore?.serverServices.map((e) => e));
 
   return allServices.value
     .filter((e) => e.category === "service" && serverServices.has(e.service))
     .map((service) => ({
       ...service,
-      isDuplicated: newConfigServices.has(service.service),
+      isDuplicated: newConfigServices.has(service?.service),
     }))
     .sort((a, b) => a.name.localeCompare(b.name));
 });

launcher/src/components/UI/edit-page/components/drawer/ServicesDrawer.vue

@@ -2,8 +2,7 @@
   <div
     class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-6 grid-rows-15 items-center gap-y-1 bg-[#292e32] p-1 rounded-md"
   >
-    <span
-      class="col-start-1 col-span-full row-start-1 row-span-1 text-xs text-center text-gray-100 font-sans uppercase"
+    <span class="col-start-1 col-span-full row-start-1 row-span-1 text-xs text-center text-gray-100 font-sans uppercase"
       >ADD A CONFIG SERVICE</span
     >
     <DrawerFilter />
@@ -54,23 +53,16 @@
         @click="addServices(service)"
         @mouseenter="footerStore.cursorLocation = `${service.name} ${serv}`"
       >
-        <img
-          :src="service.icon"
-          alt="Client Icon"
-          class="col-start-1 col-span-1 w-full mx-auto"
-        />
-        <span
-          class="col-start-2 col-span-full w-full self-center text-xs text-gray-100 truncate ml-2"
-          >{{ service.name }}</span
-        >
+        <img :src="service.icon" alt="Client Icon" class="col-start-1 col-span-1 w-full mx-auto" />
+        <span class="col-start-2 col-span-full w-full self-center text-xs text-gray-100 truncate ml-2">{{
+          service.name
+        }}</span>
       </div>
     </div>
     <div
       class="col-start-1 col-span-full row-start-14 row-span-full w-full h-full bg-[#151618] rounded-md flex flex-col justify-between items-center p-1 shadow-sm shadow-black active:shadow-none border border-gray-700"
     >
-      <span class="text-xs text-center text-gray-100 font-sans uppercase mt-1"
-        >CUSTOM SERVICE</span
-      >
+      <span class="text-xs text-center text-gray-100 font-sans uppercase mt-1">CUSTOM SERVICE</span>
 
       <div
         class="w-full h-8 bg-teal-700 rounded-sm text-center p-1 cursor-pointer hover:bg-teal-900 transition-all duration-100"
@@ -109,13 +101,13 @@ const emit = defineEmits(["addServices", "startDrag"]);
 const filteredServices = computed(() => {
   return serviceStore.filteredServices
     .filter((service) => {
-      return !setupStore.serverServices.includes(service.service);
+      return !setupStore.serverServices.includes(service?.service);
     })
     .filter((service) => {
-      return service.service !== "CustomService";
+      return service?.service !== "CustomService";
     })
     .filter((service) => {
-      return service.name.toLowerCase().includes(searchQuery.value.toLowerCase());
+      return service?.name.toLowerCase().includes(searchQuery.value.toLowerCase());
     });
 });
 

launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue

@@ -75,7 +75,7 @@ import ExecutionClients from "./clients/ExecutionClients.vue";
 import ValidatorClients from "./clients/ValidatorClients.vue";
 
 import { useNodeManage } from "@/store/nodeManage";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useMultiSetups } from "../../../../../composables/multiSetups";
 import { useSetups } from "../../../../../store/setups";
 
@@ -105,12 +105,13 @@ const activateScrollBar = computed(() => {
 });
 
 //Update selected setup
-watch(
-  () => manageStore.newConfiguration,
-  () => {
-    updateDom();
-  }
-);
+// watch(
+//   () => manageStore.newConfiguration,
+//   () => {
+//     updateDom();
+
+//   }
+// );
 
 //Lifecycle Hooks
 onMounted(() => {