FIX: item handling on edit service page (stereum-dev#2184)

- Fix bug where static "randomId" var breaks installer
- Use dynamic classes for "Config Services" items
- Avoid JS errors if no mev boost item is choosen
- Avoid JS errors if service has no dependencies
- Show "Add Connection" dialog for new KAPI service

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

@@ -302,8 +302,6 @@ const setArchitecture = async () => {
   manageStore.architecture = settings.stereum?.settings.arch;
 };
 
-const randomId = computed(() => generateRandomId());
-
 // Switch Clients methods
 const switchClientModalhandler = (item) => {
   manageStore.isLineHidden = true;
@@ -370,7 +368,7 @@ const confirmModifyingService = (item) => {
   }
 
   manageStore.confirmChanges.push({
-    id: randomId,
+    id: generateRandomId(),
     content: "MODIFY",
     contentIcon: "/img/icon/edit-node-icons/service-connected.png",
     service: item.client,
@@ -398,7 +396,7 @@ const hideModifyModal = () => {
 const confirmConsensusConnection = (item) => {
   clientToConnect.value.isNotConnectedToConsensus = false;
   manageStore.confirmChanges.push({
-    id: randomId,
+    id: generateRandomId(),
     content: "CLIENT CONNECT",
     contentIcon: "/img/icon/edit-node-icons/service-connecting.png",
     service: item,
@@ -410,13 +408,13 @@ const confirmConsensusConnection = (item) => {
 const changeMevboostConnection = () => {
   manageStore.isLineHidden = true;
   const hasConsensusWithMevboost = manageStore.newConfiguration.some((e) => {
-    return e.category === "consensus" && !e.config.dependencies.mevboost[0];
+    return e.category === "consensus" && !e.config.dependencies?.mevboost[0];
   });
   if (hasConsensusWithMevboost) {
     manageStore.newConfiguration.forEach((e) => {
-      if (e.config.dependencies.mevboost[0]) {
+      if (e.config.dependencies?.mevboost[0]) {
         e.isConnectedToMevboost = true;
-      } else if (!e.config.dependencies.mevboost[0]) {
+      } else if (!e.config.dependencies?.mevboost[0]) {
         e.isNotConnectedToMevboost = true;
       }
     });
@@ -543,7 +541,7 @@ const installService = async (client, setupId, executionClients, consensusClient
   };
 
   manageStore.confirmChanges.push({
-    id: randomId,
+    id: generateRandomId(),
     content: "INSTALL",
     contentIcon: "/img/icon/edit-node-icons/add-service-icon.png",
     service: client,
@@ -700,7 +698,7 @@ const addServiceHandler = (item) => {
   }
 
   manageStore.confirmChanges.push({
-    id: randomId,
+    id: generateRandomId(),
     content: "INSTALL",
     contentIcon: "/img/icon/edit-node-icons/add-service-icon.png",
     service: item.client,

launcher/src/components/UI/edit-page/components/modals/AddModal.vue

@@ -66,7 +66,7 @@ const getConfirmText = computed(() => {
     } else if (
       props.client.category === "consensus" ||
       (props.client.category === "validator" && !/Web3Signer/.test(props.client.service)) ||
-      /LidoObolExit|ValidatorEjector/.test(props.client.service)
+      /LidoObolExit|ValidatorEjector|KeysAPI/.test(props.client.service)
     ) {
       text = "next";
     } else if (props.client.category === "service" && props.client.service !== "FlashbotsMevBoostService") {
@@ -118,7 +118,7 @@ const confirmInstall = () => {
   } else if (
     (props.client.category === "consensus" && getConfirmText.value === "next") ||
     (props.client.category === "validator" && getConfirmText.value === "next") ||
-    /LidoObolExit|ValidatorEjector/.test(props.client.service)
+    /LidoObolExit|ValidatorEjector|KeysAPI/.test(props.client.service)
   ) {
     isAddPanelActivated.value = false;
     isModifyActivated.value = true;

launcher/src/components/UI/edit-page/components/modals/ModifyContent.vue

@@ -200,11 +200,11 @@ const updateProperties = () => {
 const getConnectedClient = () => {
   list.value.forEach((service) => {
     if (service.config?.dependencies) {
-      const allDependencies = props.client.config.dependencies.consensusClients.concat(
+      const allDependencies = props.client.config.dependencies?.consensusClients.concat(
         props.client.config.dependencies.executionClients,
         props.client.config.dependencies.otherServices
       );
-      if (allDependencies.map((s) => s.id).includes(service.config.serviceID)) {
+      if (allDependencies && allDependencies.map((s) => s.id).includes(service.config.serviceID)) {
         service.isConnected = true;
       }
       if (props.client.service === "FlashbotsMevBoostService") {

launcher/src/components/UI/edit-page/components/service/ServiceBody.vue

@@ -18,8 +18,13 @@
       <div
         v-for="item in getServices"
         :key="item"
+        :ref="
+          (el) => {
+            item.ref = el;
+          }
+        "
         class="w-full max-h-[78px] grid grid-cols-2 p-2 rounded-md border border-gray-600 shadow-md mx-auto bg-[#212629]"
-        :class="{ 'border border-red-600 bg-red-600': item.isRemoveProcessing }"
+        :class="getDynamicClasses(item)"
         style="cursor: default"
         @mouseenter="footerStore.cursorLocation = `${item.name} ${$t('editPageServices.service')}`"
         @mouseleave="footerStore.cursorLocation = ''"
@@ -68,6 +73,19 @@ const emit = defineEmits(["changeConnection", "deleteService"]);
 const manageStore = useNodeManage();
 const setupStore = useSetups();
 
+// Methods
+const getDynamicClasses = (item) => {
+  if (item.hasOwnProperty("isRemoveProcessing") && item.isRemoveProcessing) {
+    return "border bg-red-600 border-white hover:bg-red-600";
+  } else if (item.hasOwnProperty("isNewClient") && item.isNewClient) {
+    return "opacity-50 cursor-not-allowed pointer-events-none bg-[#212629] border border-gray-700";
+  } else if (item.hasOwnProperty("modifierPanel") && item.modifierPanel) {
+    return "opacity-50 cursor-not-allowed pointer-events-none bg-[#212629] border border-gray-700";
+  } else {
+    return "bg-[#212629] hover:bg-[#374045] border border-gray-700";
+  }
+};
+
 const getServices = computed(() => {
   let services = manageStore.newConfiguration.filter((e) => e.category === "service").sort((a, b) => a.name.localeCompare(b.name));