From c176b48b4184211df2236b8eca46f1a27fe1d2b8 Mon Sep 17 00:00:00 2001
From: Thomas <thomas@guntenaar.org>
Date: Wed, 22 Nov 2023 17:20:05 +0200
Subject: [PATCH] feedback: settings page direction

---
 src/devhub/components/molecule/ListEditor.jsx |  87 ++++++
 src/devhub/entity/team/Configurator.jsx       |  20 +-
 src/devhub/entity/team/LabelRow.jsx           | 177 ++++++------
 src/devhub/entity/team/TeamInfo.jsx           | 259 ------------------
 src/devhub/page/admin.jsx                     | 241 ++++++++++------
 5 files changed, 332 insertions(+), 452 deletions(-)
 create mode 100644 src/devhub/components/molecule/ListEditor.jsx
 delete mode 100644 src/devhub/entity/team/TeamInfo.jsx

diff --git a/src/devhub/components/molecule/ListEditor.jsx b/src/devhub/components/molecule/ListEditor.jsx
new file mode 100644
index 000000000..6aa92cd3c
--- /dev/null
+++ b/src/devhub/components/molecule/ListEditor.jsx
@@ -0,0 +1,87 @@
+const { Tile } =
+  VM.require("${REPL_DEVHUB}/widget/devhub.components.molecule.Tile") ||
+  (() => <></>);
+
+const { data, setList, validate, invalidate } = props;
+
+const [newItem, setNewItem] = useState("");
+
+const handleAddItem = () => {
+  if (validate(newItem)) {
+    setList([...data.list, newItem]);
+    setNewItem("");
+  } else {
+    return invalidate();
+  }
+};
+
+const handleDeleteItem = (index) => {
+  const updatedData = [...data.list];
+  updatedData.splice(index, 1);
+  setList(updatedData);
+};
+
+const Item = styled.div`
+  padding: 10px;
+  margin: 5px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 10px;
+`;
+
+return (
+  <>
+    {data.list.map((item, index) => (
+      <Item key={index}>
+        <div className="flex-grow-1">
+          <Widget
+            src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
+            props={{
+              className: "flex-grow-1",
+              value: item,
+              skipPaddingGap: true,
+              placeholder: data.placeholder,
+              inputProps: {
+                prefix: data.prefix,
+                disabled: true,
+              },
+            }}
+          />
+        </div>
+        <button
+          className="btn btn-outline-danger"
+          onClick={() => handleDeleteItem(index)}
+        >
+          <i className="bi bi-trash-fill" />
+        </button>
+      </Item>
+    ))}
+    {data.list.length < data.maxLength && (
+      <Item>
+        <div className="flex-grow-1">
+          <Widget
+            src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
+            props={{
+              className: "flex-grow-1",
+              skipPaddingGap: true,
+              onChange: (e) => setNewItem(e.target.value),
+              value: newItem,
+              placeholder: data.placeholder,
+              inputProps: {
+                prefix: data.prefix,
+              },
+            }}
+          />
+        </div>
+        <button
+          className="btn btn-success add-member"
+          onClick={handleAddItem}
+          disabled={newItem === ""}
+        >
+          <i className="bi bi-plus" />
+        </button>
+      </Item>
+    )}
+  </>
+);
diff --git a/src/devhub/entity/team/Configurator.jsx b/src/devhub/entity/team/Configurator.jsx
index 591c69bed..ab703bd3b 100644
--- a/src/devhub/entity/team/Configurator.jsx
+++ b/src/devhub/entity/team/Configurator.jsx
@@ -1,8 +1,3 @@
-/**
- * In the context of the contract, a group is essentially a member identified
- * by the prefix 'team:'; therefore, on the front end, we also employ 'team,'
- * with the user interface displaying 'group' for clarity.
- */
 const { Tile } =
   VM.require("${REPL_DEVHUB}/widget/devhub.components.molecule.Tile") ||
   (() => <></>);
@@ -40,7 +35,6 @@ const [newItem, setNewItem] = useState("");
 const [teamName, setTeamName] = useState(
   backwardsCompatibleTeam(data.teamName) || ""
 );
-const [description, setDescription] = useState(data.description || "");
 const [label, setLabel] = useState(data.label || "");
 const [labelType, setLabelType] = useState(
   (data.label || "").startsWith("starts-with:") ? "starts-with:" : ""
@@ -86,7 +80,6 @@ const handleSubmit = () => {
 
   onSubmit({
     teamName,
-    description,
     label: labelType + backwardsCompatibleLabel(label),
     editPost,
     useLabels,
@@ -97,7 +90,7 @@ const handleSubmit = () => {
 return (
   <Tile className="p-3">
     <Container>
-      <h3>{data.teamName ? "Edit label" : "Create group"}</h3>
+      <h3>{data.teamName == "" ? "Edit label" : "Create label"}</h3>
       <Widget
         src="${REPL_DEVHUB}/widget/devhub.components.atom.Alert"
         props={{
@@ -121,16 +114,7 @@ return (
               }}
             />
           </div>
-          <div className="flex-grow-1">
-            <span>Group description</span>
-            <Widget
-              src="${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownEditor"
-              props={{
-                data: { content: description },
-                onChange: setDescription,
-              }}
-            />
-          </div>
+
           <div className="flex-grow-1">
             <div>
               Would you like this group to limit their restrictions to a single
diff --git a/src/devhub/entity/team/LabelRow.jsx b/src/devhub/entity/team/LabelRow.jsx
index 3cbbcd6eb..f3501c55d 100644
--- a/src/devhub/entity/team/LabelRow.jsx
+++ b/src/devhub/entity/team/LabelRow.jsx
@@ -158,97 +158,94 @@ const backwardsCompatibleLabel = (oldLabel) => {
 const backwardsCompatibleTeam = (oldTeam) =>
   oldTeam.startsWith("team:") ? oldTeam.slice(5) : oldTeam;
 
-return editMode ? (
+return (
   <>
-    <Widget
-      src={"${REPL_DEVHUB}/widget/devhub.entity.team.Configurator"}
-      props={{
-        data: configuratorData,
-        onCancel: () => setEditMode(false),
-        onSubmit: (params) => editTeam(params),
-      }}
-    />
-    <Widget
-      src="${REPL_DEVHUB}/widget/devhub.components.atom.Alert"
-      props={{
-        onClose: () => setAlertMessage(""),
-        message: alertMessage,
-      }}
-    />
-  </>
-) : (
-  /**
-   *  <th scope="col">label name</th>
-                  <th scope="col">Type</th>
-                  <th scope="col">Members</th>
-                  <th scope="col">Only allow members to use label</th>
-                  <th scope="col">Allow members to edit any post with label</th>
-                  <th scope="col">Actions</th>
-   */
-  <tr>
-    <th scope="row">
-      <Widget
-        src={"${REPL_DEVHUB}/widget/devhub.components.atom.Tag"}
-        props={{
-          tag: backwardsCompatibleLabel(label),
-        }}
-      />
-    </th>
-    <td>
-      {(label || "").startsWith("starts-with:")
-        ? "Multiple labels with common prefix"
-        : "Single label"}
-    </td>
-    <td>
-      {metadata.children && (
-        <div class="vstack">
-          {metadata.children.length ? (
-            metadata.children.map((child) => <p>{child}</p>)
-          ) : (
-            <div>No members in this group</div>
-          )}
-        </div>
-      )}
-    </td>
-    <td>
-      <div class="form-check">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          value={useLabels}
-          id={`useLabelsCheckbox${identifier}`}
-          checked={useLabels}
-          onChange={() => setUseLabels(!useLabels)}
-          disabled={disabled}
+    <tr>
+      <th scope="row" class=" justify-content-center align-items-center p-3">
+        <Widget
+          src={"${REPL_DEVHUB}/widget/devhub.components.atom.Tag"}
+          props={{
+            tag: backwardsCompatibleLabel(label),
+          }}
         />
-      </div>
-    </td>
-    <td>
-      <div class="form-check">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          value={editPost}
-          id={`editPostCheckbox${identifier}`}
-          checked={editPost}
-          onChange={() => setEditPost(!editPost)}
-          disabled={disabled}
+      </th>
+      <td class=" justify-content-center align-items-center p-3">
+        {(label || "").startsWith("starts-with:")
+          ? "Multiple labels with common prefix"
+          : "Single label"}
+      </td>
+      <td class=" justify-content-center align-items-center p-3">
+        {metadata.children && (
+          <div class="vstack">
+            {metadata.children.length ? (
+              metadata.children.map((child) => <p>{child}</p>)
+            ) : (
+              <div>No members in this group</div>
+            )}
+          </div>
+        )}
+      </td>
+      <td class=" justify-content-center align-items-center p-3">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            value={useLabels}
+            id={`useLabelsCheckbox${identifier}`}
+            checked={useLabels}
+            onChange={() => setUseLabels(!useLabels)}
+            disabled={disabled}
+          />
+        </div>
+      </td>
+      <td class=" justify-content-center align-items-center p-3">
+        <div class="form-check">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            value={editPost}
+            id={`editPostCheckbox${identifier}`}
+            checked={editPost}
+            onChange={() => setEditPost(!editPost)}
+            disabled={disabled}
+          />
+        </div>
+      </td>
+      <td class=" justify-content-center align-items-center p-3">
+        <Widget
+          src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+          props={{
+            classNames: { root: "btn-outline-light text-dark" },
+            icon: {
+              type: "bootstrap_icon",
+              variant: "bi-gear-wide-connected",
+            },
+            label: "Edit",
+            onClick: () => setEditMode(true),
+          }}
         />
-      </div>
-    </td>
-    <td>
-      <Widget
-        src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
-        props={{
-          classNames: { root: "btn-outline-light text-dark" },
-          icon: {
-            type: "bootstrap_icon",
-            variant: "bi-gear-wide-connected",
-          },
-          label: "Edit",
-          onClick: () => setEditMode(true),
-        }}
-      />
-    </td>
-  </tr>
+      </td>
+    </tr>
+    {editMode && (
+      <tr>
+        <th scope="row" colspan="6">
+          <Widget
+            src={"${REPL_DEVHUB}/widget/devhub.entity.team.Configurator"}
+            props={{
+              data: configuratorData,
+              onCancel: () => setEditMode(false),
+              onSubmit: (params) => editTeam(params),
+            }}
+          />
+          <Widget
+            src="${REPL_DEVHUB}/widget/devhub.components.atom.Alert"
+            props={{
+              onClose: () => setAlertMessage(""),
+              message: alertMessage,
+            }}
+          />
+        </th>
+      </tr>
+    )}
+  </>
 );
diff --git a/src/devhub/entity/team/TeamInfo.jsx b/src/devhub/entity/team/TeamInfo.jsx
deleted file mode 100644
index 302e2285a..000000000
--- a/src/devhub/entity/team/TeamInfo.jsx
+++ /dev/null
@@ -1,259 +0,0 @@
-/**
- * In the context of the contract, a group is essentially a member identified
- * by the prefix 'team:'; therefore, on the front end, we also employ 'team,'
- * with the user interface displaying 'group' for clarity.
- */
-const { Tile } =
-  VM.require("${REPL_DEVHUB}/widget/devhub.components.molecule.Tile") ||
-  (() => <></>);
-
-const { getAccessControlInfo, getRootMembers } = VM.require(
-  "${REPL_DEVHUB}/widget/core.adapter.devhub-contract"
-);
-
-if (!getAccessControlInfo || !getRootMembers) {
-  return <p>Loading modules...</p>;
-}
-
-const accessControlInfo = getAccessControlInfo();
-const rootMembers = getRootMembers();
-const allTeamNames = Object.keys(rootMembers || {});
-
-if (!accessControlInfo || !rootMembers) {
-  return <p>Loading access control info...</p>;
-}
-
-const { teamName } = props;
-const teamModerators = teamName == "team:moderators";
-const label = Object.keys(rootMembers[teamName].permissions)[0] || "";
-const metadata = accessControlInfo.members_list[teamName];
-const editPost = rootMembers[teamName].permissions[label].includes("edit-post");
-const useLabels =
-  rootMembers[teamName].permissions[label].includes("use-labels");
-const members = rootMembers[teamName].children || [];
-
-const configuratorData = {
-  teamName: teamName,
-  description: metadata.description,
-  label: label,
-  members,
-  editPost,
-  useLabels,
-};
-
-const [editMode, setEditMode] = useState(false);
-const [alertMessage, setAlertMessage] = useState("");
-
-function arrayEq(arr1, arr2) {
-  if (arr1.length !== arr2.length) {
-    return false;
-  }
-  const sortedArr1 = arr1.slice().sort();
-  const sortedArr2 = arr2.slice().sort();
-  for (let i = 0; i < sortedArr1.length; i++) {
-    if (sortedArr1[i] !== sortedArr2[i]) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-function editTeam({
-  teamName: tmnm,
-  description: dscrptn,
-  label: lbl,
-  editPost: edtpst,
-  useLabels: uslbls,
-  members: mmbrs,
-}) {
-  let txn = [];
-  let numberOfChanges = 0;
-
-  if (backwardsCompatibleTeam(teamName) !== tmnm) {
-    numberOfChanges++;
-    if (allTeamNames.includes(`team:${tmnm}`)) {
-      return setAlertMessage("This team name already exists");
-    }
-  }
-
-  console.log(label, lbl);
-  if (label !== lbl) {
-    const allLabels = Object.keys(accessControlInfo.rules_list);
-    if (allLabels.includes(lbl)) {
-      return setAlertMessage(
-        "This label is already restricted by another team"
-      );
-    }
-  }
-
-  if (description !== dscrptn || editPost !== edtpst || useLabels !== uslbls) {
-    numberOfChanges++;
-  }
-
-  if (!arrayEq(members, mmbrs)) {
-    numberOfChanges++;
-    let membersAndTeams = Object.keys(accessControlInfo.members_list);
-
-    mmbrs.forEach((member) => {
-      if (!membersAndTeams.includes(member)) {
-        // Contract panic member does not exist in the members_list yet.
-        txn.push({
-          contractName: "${REPL_DEVHUB_CONTRACT}",
-          methodName: "add_member",
-          args: {
-            member: member,
-            metadata: {
-              member_metadata_version: "V0",
-              description: "",
-              permissions: {},
-              children: [],
-              parents: [],
-            },
-          },
-          deposit: Big(0).pow(21),
-          gas: Big(10).pow(12).mul(100),
-        });
-      }
-    });
-  }
-
-  if (numberOfChanges < 1) {
-    return setAlertMessage("No changes found.");
-  }
-
-  Near.call([
-    ...txn,
-    {
-      contractName: "${REPL_DEVHUB_CONTRACT}",
-      methodName: "edit_member",
-      args: {
-        member: `team:${tmnm}`,
-        metadata: {
-          member_metadata_version: "V0",
-          description: dscrptn,
-          permissions: {
-            [lbl]: [
-              ...(edtpst ? ["edit-post"] : []),
-              ...(uslbls ? ["use-labels"] : []),
-            ],
-          },
-          children: mmbrs,
-          parents: [],
-        },
-      },
-      deposit: Big(0).pow(21),
-      gas: Big(10).pow(12).mul(100),
-    },
-  ]);
-}
-// Teams are saved in contract by their prefix 'team:'
-// This function makes the teamName display friendly.
-const backwardsCompatibleTeam = (oldTeam) =>
-  oldTeam.startsWith("team:") ? oldTeam.slice(5) : oldTeam;
-
-return editMode ? (
-  <>
-    <Widget
-      src={"${REPL_DEVHUB}/widget/devhub.entity.team.Configurator"}
-      props={{
-        data: configuratorData,
-        onCancel: () => setEditMode(false),
-        onSubmit: (params) => editTeam(params),
-      }}
-    />
-    <Widget
-      src="${REPL_DEVHUB}/widget/devhub.components.atom.Alert"
-      props={{
-        onClose: () => setAlertMessage(""),
-        message: alertMessage,
-      }}
-    />
-  </>
-) : (
-  <div className="card my-2 attractable">
-    <div className="card-body">
-      <div class="d-flex justify-content-between">
-        <h3>{backwardsCompatibleTeam(teamName)}</h3>
-        <Widget
-          src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
-          props={{
-            classNames: { root: "btn-outline-light text-dark" },
-            icon: {
-              type: "bootstrap_icon",
-              variant: "bi-gear-wide-connected",
-            },
-            label: teamModerators ? "Edit members" : "Edit group",
-            onClick: () => setEditMode(true),
-          }}
-        />
-      </div>
-    </div>
-
-    <div className="card-body">
-      {
-        <p class="card-text" key="description">
-          {!teamModerators ? (
-            <Widget
-              src={
-                "${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownViewer"
-              }
-              props={{
-                text: metadata.description,
-              }}
-            />
-          ) : (
-            "The moderator group has permissions to edit any posts and apply all labels, including restricted ones."
-          )}
-        </p>
-      }
-      {/* Hide this case of the moderators */}
-      {!teamModerators && (
-        <>
-          <span class="pt-4">
-            Restricted label:
-            <Widget
-              src={"${REPL_DEVHUB}/widget/devhub.components.atom.Tag"}
-              props={{
-                tag: label,
-              }}
-            />
-          </span>
-
-          <div class="pt-4">Permissions associated with that label</div>
-
-          <Widget
-            src="${REPL_DEVHUB}/widget/devhub.entity.team.LabelPermissions"
-            props={{
-              identifier: teamName,
-              editPost,
-              useLabels,
-              setEditPost: console.log,
-              setUseLabels: console.log,
-              disabled: true,
-            }}
-          />
-        </>
-      )}
-
-      <div class="pt-4">Members</div>
-
-      {metadata.children && (
-        <div class="vstack">
-          {metadata.children.length ? (
-            metadata.children.map((child) => (
-              <Tile className="w-25 p-3 m-1" minHeight={10}>
-                <Widget
-                  src={`neardevgov.near/widget/ProfileLine`}
-                  props={{ accountId: child }}
-                />
-              </Tile>
-            ))
-          ) : (
-            <div>No members in this group</div>
-          )}
-        </div>
-      )}
-    </div>
-  </div>
-);
diff --git a/src/devhub/page/admin.jsx b/src/devhub/page/admin.jsx
index 2aeb313de..067735168 100644
--- a/src/devhub/page/admin.jsx
+++ b/src/devhub/page/admin.jsx
@@ -33,6 +33,11 @@ if (!fc) {
 const featuredCommunityList = fc || [];
 const allMetadata = getAllCommunitiesMetadata();
 const accessControlInfo = getAccessControlInfo();
+
+if (!accessControlInfo.members_list) {
+  return <p>Loading members list...</p>;
+}
+
 const rootMembers = getRootMembers();
 const teamNames = Object.keys(rootMembers || {});
 
@@ -46,9 +51,11 @@ const [createTeam, setCreateTeam] = useState(false);
 const [communityHandles, setCommunityHandles] = useState(
   featuredCommunityList.map(({ handle }) => handle)
 );
-const [newItem, setNewItem] = useState("");
-const [editMode, setEditMode] = useState(false);
 const [previewConnect, setPreviewConnect] = useState(false);
+const [editModerators, setEditModerators] = useState(false);
+const [moderators, setModerators] = useState(
+  accessControlInfo.members_list["team:moderators"].children || []
+);
 
 const handleResetItems = () => {
   setCommunityHandles(featuredCommunityList.map(({ handle }) => handle));
@@ -95,21 +102,25 @@ function handleSubmit() {
   setFeaturedCommunities({ handles: communityHandles });
 }
 
-function createNewTeam({
+function createEditTeam({
   teamName,
   description,
   label,
   editPost,
   useLabels,
   members,
+  contractCall, // TODO typescript edit_member || add_member
 }) {
   let txn = [];
 
-  if (rootMembers.includes(`team:${teamName}`)) {
+  if (
+    rootMembers.includes(`team:${teamName}`) &&
+    contractCall === "add_member"
+  ) {
     return setAlertMessage("This team name already exists");
   }
   const allLabels = Object.keys(accessControlInfo.rules_list);
-  if (allLabels.includes(label)) {
+  if (allLabels.includes(label) && contractCall === "add_member") {
     return setAlertMessage("This label is already restricted by another team");
   }
 
@@ -142,7 +153,7 @@ function createNewTeam({
     ...txn,
     {
       contractName: "${REPL_DEVHUB_CONTRACT}",
-      methodName: "add_member",
+      methodName: contractCall, // add_member || edit_member
       args: {
         member: `team:${teamName}`,
         metadata: {
@@ -164,6 +175,19 @@ function createNewTeam({
   ]);
 }
 
+const handleEditModerators = () => {
+  createEditTeam({
+    teamName: "team:moderators",
+    description:
+      "The moderator group has permissions to edit any posts and apply all labels, including restricted ones.",
+    label: "any",
+    editPost: true,
+    useLabels: true,
+    members: moderators,
+    contractCall: "edit_member",
+  });
+};
+
 const Item = styled.div`
   padding: 10px;
   margin: 5px;
@@ -256,59 +280,27 @@ return (
               message: communityMessage,
             }}
           />
-          <Tile className="p-3">
+          <Tile className="p-3 mb-3">
             <h3> Manage featured communities</h3>
-            {communityHandles.map((item, index) => (
-              <Item key={index}>
-                <div className="flex-grow-1">
-                  <Widget
-                    src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
-                    props={{
-                      className: "flex-grow-1",
-                      value: item,
-                      skipPaddingGap: true,
-                      placeholder: "Community handle",
-                      inputProps: {
-                        prefix: "Community handle",
-                        disabled: true,
-                      },
-                    }}
-                  />
-                </div>
-                <button
-                  className="btn btn-outline-danger"
-                  onClick={() => handleDeleteItem(index)}
-                >
-                  <i className="bi bi-trash-fill" />
-                </button>
-              </Item>
-            ))}
-            {communityHandles.length < 5 && (
-              <Item>
-                <div className="flex-grow-1">
-                  <Widget
-                    src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
-                    props={{
-                      className: "flex-grow-1",
-                      skipPaddingGap: true,
-                      onChange: (e) => setNewItem(e.target.value),
-                      value: newItem,
-                      placeholder: "zero-knowledge",
-                      inputProps: {
-                        prefix: "Community handle",
-                      },
-                    }}
-                  />
-                </div>
-                <button
-                  className="btn btn-success add-member"
-                  onClick={handleAddItem}
-                  disabled={newItem === ""}
-                >
-                  <i className="bi bi-plus" />
-                </button>
-              </Item>
-            )}
+            <Widget
+              src="${REPL_DEVHUB}/widget/devhub.components.molecule.ListEditor"
+              props={{
+                data: {
+                  maxLength: 5,
+                  placeholder: "Community handle",
+                  prefix: "Community handle",
+                  list: communityHandles,
+                },
+                setList: setCommunityHandles,
+
+                validate: (newItem) =>
+                  !allMetadata.map(({ handle }) => handle).includes(newItem),
+                invalidate: () =>
+                  setCommunityMessage(
+                    "This community handle does not exist, make sure you use an existing handle."
+                  ),
+              }}
+            />
             <div
               className={
                 "d-flex align-items-center justify-content-end gap-3 mt-4"
@@ -322,7 +314,6 @@ return (
                   },
                   label: "Cancel",
                   onClick: () => {
-                    setEditMode(false);
                     handleResetItems();
                   },
                 }}
@@ -352,13 +343,14 @@ return (
               testId: "preview-homepage",
             }}
           />
-
-          {previewConnect && (
-            <Widget
-              src="${REPL_DEVHUB}/widget/devhub.components.island.connect"
-              props={{ ...props }}
-            />
-          )}
+          <div class="mt-3">
+            {previewConnect && (
+              <Widget
+                src="${REPL_DEVHUB}/widget/devhub.components.island.connect"
+                props={{ ...props }}
+              />
+            )}
+          </div>
         </div>
         <div
           class="tab-pane fade"
@@ -367,23 +359,101 @@ return (
           aria-labelledby="profile-tab"
         >
           <h1>Moderators</h1>
-          {teamNames.includes("team:moderators") && (
-            <>
-              <Widget
-                src={"${REPL_DEVHUB}/widget/devhub.entity.team.TeamInfo"}
-                props={{
-                  teamName: "team:moderators",
-                }}
-              />
-              <Widget
-                src="${REPL_DEVHUB}/widget/devhub.components.atom.Alert"
-                props={{
-                  onClose: () => setAlertMessage(""),
-                  message: alertMessage,
-                }}
-              />
-            </>
-          )}
+          <div className="card-body">
+            <h5>
+              The moderator group has permissions to edit any posts and apply
+              all labels, including restricted ones.
+            </h5>
+            <Widget
+              src={
+                "${REPL_DEVHUB}/widget/devhub.components.molecule.PostControls"
+              }
+              props={{
+                icon: "bi bi-gear-wide-connected",
+                className: "mb-3",
+
+                title: "Edit members",
+                onClick: () => setEditModerators(!editModerators),
+                testId: "edit-members",
+              }}
+            />
+          </div>
+          <Tile className="p-3">
+            {editModerators ? (
+              <>
+                <Widget
+                  src="${REPL_DEVHUB}/widget/devhub.components.molecule.ListEditor"
+                  props={{
+                    data: {
+                      maxLength: 100,
+                      placeholder: "member.near",
+                      prefix: "member",
+                      list: moderators,
+                    },
+                    setList: setModerators,
+
+                    validate: (newItem) => true,
+                    invalidate: () => null, // TODO check if id exists on near
+                  }}
+                />
+                <div
+                  className={
+                    "d-flex align-items-center justify-content-end gap-3 mt-4"
+                  }
+                >
+                  <Widget
+                    src={
+                      "${REPL_DEVHUB}/widget/devhub.components.molecule.Button"
+                    }
+                    props={{
+                      classNames: {
+                        root: "btn-outline-danger shadow-none border-0",
+                      },
+                      label: "Cancel",
+                      onClick: () => {
+                        handleResetItems();
+                      },
+                    }}
+                  />
+                  <Widget
+                    src={
+                      "${REPL_DEVHUB}/widget/devhub.components.molecule.Button"
+                    }
+                    props={{
+                      classNames: { root: "btn" },
+                      icon: {
+                        type: "bootstrap_icon",
+                        variant: "bi-check-circle-fill",
+                      },
+                      label: "Submit",
+                      onClick: handleEditModerators,
+                    }}
+                  />
+                </div>
+              </>
+            ) : (
+              <>
+                <div class="pt-4">Members</div>
+
+                {moderators && (
+                  <div class="vstack">
+                    {moderators.length ? (
+                      moderators.map((child) => (
+                        <Tile className="w-25 p-3 m-1" minHeight={10}>
+                          <Widget
+                            src={`neardevgov.near/widget/ProfileLine`}
+                            props={{ accountId: child }}
+                          />
+                        </Tile>
+                      ))
+                    ) : (
+                      <div>No moderators</div>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+          </Tile>
         </div>
         <div
           class="tab-pane fade"
@@ -412,12 +482,13 @@ return (
               src={"${REPL_DEVHUB}/widget/devhub.entity.team.Configurator"}
               props={{
                 onCancel: () => setCreateTeam(false),
-                onSubmit: (params) => createNewTeam(params),
+                onSubmit: (params) =>
+                  createEditTeam({ ...params, contractCall: "add_member" }),
               }}
             />
           )}
 
-          <div class="table-responsive">
+          <div class="table-responsive mt-3">
             <table class="table table-hover table-sm table-bordered table-striped">
               <thead class="thead-dark">
                 <tr>