Added edit options for services

ui/src/recoil/atoms/services.tsx

@@ -34,6 +34,27 @@ export const services = atom({
   effects_UNSTABLE: [persistAtom],
 });
 
+export const servicesFilter = selectorFamily({
+  key: "service/default",
+  get:
+    (id: string) =>
+    ({ get }) => {
+      const servs = get(services);
+      return servs.find((x: Service) => x.id === id);
+    },
+  set:
+    (id: string) =>
+    ({ get, set }, newValue) => {
+      const servs: any = get(services);
+      const servInd = servs.findIndex((x: Service) => x.id === id);
+
+      var cp = [...servs];
+      cp[servInd] = { ...cp[servInd], ...newValue };
+
+      return set(services, cp);
+    },
+});
+
 export const servicesList = selector({
   key: "servicesListSelector",
   get: ({ get }) => get(services),

ui/src/routes/profiles/ProfilesTable.tsx

@@ -33,7 +33,7 @@ const EditProfile = ({ profile }: { profile: Profile }) => {
   // Create the form with the default values as they currently are
   const content = (
     <SimpleForm
-      create={true}
+      create={false}
       defaultValues={profile}
       errors={profileFormFieldErrors}
       onSubmit={onSubmit}

ui/src/routes/services/ServiceForm.tsx

@@ -32,8 +32,9 @@ export const ServiceFormFields = [
   },
   {
     name: "network",
-    help: "Network layer protocol",
+    readOnly: true,
     type: "select",
+    help: "Network layer protocol",
     fieldattrs: {
       options: NetworkOptions,
     },

ui/src/routes/services/ServicesTable.tsx

@@ -1,15 +1,55 @@
 import {
   Address,
   DeleteDropdownItem,
+  EditDropdownItem,
   InteractionBadge,
   NetworkBadge,
   OptionsDropdown,
 } from "../../components/utils/Common";
 import { getPage } from "../../constants/globals";
 import Table from "../../components/table/Table";
-import { services, Service } from "../../recoil/atoms/services";
-import { useRecoilState, useRecoilValue } from "recoil";
+import {
+  services,
+  Service,
+  serviceFormFieldErrors,
+  servicesFilter,
+} from "../../recoil/atoms/services";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { removeFromList } from "../../recoil/atoms/common";
+import { ServiceFormFields } from "./ServiceForm";
+import { SimpleForm } from "../../components/forms/Form";
+
+const EditService = ({ service }: { service: Service }) => {
+  const pageName = "Services";
+
+  // Get the page to set the icon
+  const page = getPage(pageName);
+
+  // Get the current values of the profile
+  const setter = useSetRecoilState(servicesFilter(service.id));
+
+  // Create a setter for the submit
+  const onSubmit = (newElement: any) => {
+    setter(newElement);
+  };
+
+  // Create the form with the default values as they currently are
+  const content = (
+    <SimpleForm
+      create={false}
+      defaultValues={service}
+      errors={serviceFormFieldErrors}
+      onSubmit={onSubmit}
+      page={pageName}
+      fields={ServiceFormFields}
+    />
+  );
+
+  // Get the form with the update tag
+  return (
+    <EditDropdownItem form={content} icon={page?.icon} title={"profile"} />
+  );
+};
 
 const ServiceRowOptions = ({ service }: { service: Service }) => {
   // Services
@@ -24,6 +64,7 @@ const ServiceRowOptions = ({ service }: { service: Service }) => {
 
   return (
     <OptionsDropdown>
+      <EditService service={service} />
       {page && (
         <DeleteDropdownItem
           page={page}