Refresh inner computer widget of code setup widget when the code_setu…

…p traitlets update (#415)

When the `code_setup` traitslet of AiidaCodeWidget update, it will not trigger the update of computer widget it include, this lead to the issue that the if the computer is setup in the session after the code setup widget is initialized, the computer does not exist and will raise the error when set the value of the inner computer widget.
It is solved by refresh the computer inside the `_on_code_setup` function, it is a reasonable strategy since every time the code setup inputs update, we need to check if the new computers are available.

aiidalab_widgets_base/computational_resources.py

@@ -1126,12 +1126,12 @@ def _reset(self):
         self.append_text.value = ""
 
     def refresh(self):
-        self.computer.refresh()
         self._observe_code_setup()
 
     @traitlets.observe("code_setup")
     def _observe_code_setup(self, _=None):
         # Setup.
+        self.computer.refresh()
         if not self.code_setup:
             self._reset()
         for key, value in self.code_setup.items():

notebooks/computational_resources.ipynb

@@ -30,7 +30,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "resources = awb.ComputationalResourcesWidget()"
+    "resources1 = awb.ComputationalResourcesWidget()\n",
+    "resources2 = awb.ComputationalResourcesWidget()"
    ]
   },
   {
@@ -40,7 +41,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "display(resources)"
+    "display(resources1)\n",
+    "display(resources2)"
    ]
   }
  ],
@@ -61,6 +63,11 @@
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
    "version": "3.9.13"
+  },
+  "vscode": {
+   "interpreter": {
+    "hash": "d4d1e4263499bec80672ea0156c357c1ee493ec2b1c70f0acce89fc37c4a6abe"
+   }
   }
  },
  "nbformat": 4,

tests/test_notebooks.py

@@ -70,29 +70,58 @@ def test_computational_resources_code_setup(
     driver = selenium_driver("notebooks/computational_resources.ipynb")
 
     # click the "Setup new code" button
-    driver.find_element(By.XPATH, '//button[text()="Setup new code"]').click()
+    driver.find_element(By.XPATH, '(//button[text()="Setup new code"])[1]').click()
 
     # Select daint.cscs.ch domain
-    driver.find_element(By.XPATH, '//option[text()="daint.cscs.ch"]').click()
+    driver.find_element(By.XPATH, '(//option[text()="daint.cscs.ch"])[1]').click()
 
     # Select computer multicore
-    driver.find_element(By.XPATH, '//option[text()="multicore"]').click()
+    driver.find_element(By.XPATH, '(//option[text()="multicore"])[1]').click()
 
     # select code pw-7.0-multicore
-    driver.find_element(By.XPATH, '//option[text()="pw-7.0-multicore"]').click()
+    driver.find_element(By.XPATH, '(//option[text()="pw-7.0-multicore"])[1]').click()
 
     # fill the SSH username
     driver.find_element(
-        By.XPATH, "//label[text()='SSH username:']/following-sibling::input"
+        By.XPATH, "(//label[text()='SSH username:'])[1]/following-sibling::input"
     ).send_keys("dummyuser")
 
     # click the quick setup
-    driver.find_element(By.XPATH, '//button[text()="Quick Setup"]').click()
+    driver.find_element(By.XPATH, '(//button[text()="Quick Setup"])[1]').click()
     time.sleep(1.0)
 
     # check the new code pw-7.0@daint-mc is in code list
     output = aiidalab_exec("verdi code list").decode().strip()
     assert "pw-7.0@daint-mc" in output
 
+    # Set the second code of the same computer
+    # issue https://github.com/aiidalab/aiidalab-widgets-base/issues/416
+    # click the "Setup new code" button
+    driver.find_element(By.XPATH, '(//button[text()="Setup new code"])[2]').click()
+
+    # Select daint.cscs.ch domain
+    driver.find_element(By.XPATH, '(//option[text()="daint.cscs.ch"])[2]').click()
+
+    # Select computer multicore
+    driver.find_element(By.XPATH, '(//option[text()="multicore"])[2]').click()
+
+    # select code pw-7.0-multicore
+    driver.find_element(By.XPATH, '(//option[text()="dos-7.0-multicore"])[2]').click()
+
+    # fill the SSH username
+    # Get the element of index 3 which is the SSH username of second widget
+    # the one of index 2 is the SSH username in detail setup of the first widget.
+    driver.find_element(
+        By.XPATH, "(//label[text()='SSH username:'])[3]/following-sibling::input"
+    ).send_keys("dummyuser")
+
+    # click the quick setup
+    driver.find_element(By.XPATH, '(//button[text()="Quick Setup"])[2]').click()
+    time.sleep(1.0)
+
+    # check the new code pw-7.0@daint-mc is in code list
+    output = aiidalab_exec("verdi code list").decode().strip()
+    assert "dos-7.0@daint-mc" in output
+
     # take screenshots
     driver.get_screenshot_as_file(f"{screenshot_dir}/computational-resources.png")