ui/services: fix reactivity issue when switching between services

pkgs/clan-app/ui/src/workflows/Service/Service.tsx

@@ -128,7 +128,6 @@ const ConfigureService = () => {
       ([instances, machines]) => {
         // Wait for all queries to be ready
         if (!instances || !machines) return;
-
         const instance = instances[routerProps.id || routerProps.name];
 
         set("roles", {});
@@ -147,6 +146,15 @@ const ConfigureService = () => {
     ),
   );
 
+  const currentModuleRoles = createMemo(() => {
+    const module = selectedModule();
+    if (!module) return [];
+    return Object.keys(module.info.roles).map((role) => ({
+      role,
+      members: store.roles?.[role] || [],
+    }));
+  });
+
   const tagsQuery = useTags(useClanURI());
 
   const options = useOptions(tagsQuery, machinesQuery);
@@ -220,12 +228,11 @@ const ConfigureService = () => {
           when={serviceModulesQuery.data && store.roles}
           fallback={<div>Loading...</div>}
         >
-          <For each={Object.keys(selectedModule()?.info.roles || {})}>
+          <For each={currentModuleRoles()}>
             {(role) => {
-              const values = store.roles?.[role] || [];
               return (
                 <TagSelect<TagType>
-                  label={role}
+                  label={role.role}
                   renderItem={(item: TagType) => (
                     <Tag
                       inverted
@@ -240,10 +247,10 @@ const ConfigureService = () => {
                       {item.label}
                     </Tag>
                   )}
-                  values={values}
+                  values={role.members}
                   options={options()}
                   onClick={() => {
-                    set("currentRole", role);
+                    set("currentRole", role.role);
                     stepper.next();
                   }}
                 />