Implemented edit query and member section

query-connector/src/app/(pages)/userManagement/components/DataProvider.tsx

@@ -9,7 +9,8 @@ interface UserManagementData {
     isOpen: boolean;
     title: string;
     subtitle: string;
-    content: JSX.Element;
+    placeholder: string;
+    subjectData: unknown;
     subjectType: SubjectType;
   };
 }
@@ -22,14 +23,18 @@ interface UserManagementContext extends UserManagementData {
     subjectId: string,
   ) => void;
   CloseEditSection: () => void;
+  HandleSearch: (searchFilter: string) => void;
+  HandleMemberUpdate: () => void;
+  HandleQueryUpdate: () => void;
 }
 
 const initData: UserManagementData = {
   TeamQueryEditSection: {
     isOpen: false,
     title: "",
     subtitle: "",
-    content: <></>,
+    placeholder: "Search",
+    subjectData: [],
     subjectType: "Members",
   },
 };
@@ -38,6 +43,9 @@ export const DataContext = createContext<UserManagementContext>({
   ...initData,
   OpenEditSection: () => {},
   CloseEditSection: () => {},
+  HandleSearch: (searchFilter: string) => {},
+  HandleMemberUpdate: () => {},
+  HandleQueryUpdate: () => {},
 });
 
 /**
@@ -49,6 +57,9 @@ export const DataContext = createContext<UserManagementContext>({
 const DataProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
   const [innerState, setInnerState] = useState<UserManagementData>(initData);
 
+  /**
+   * Event handlers for edit section
+   */
   function CloseEditSection() {
     const newState: UserManagementData = {
       ...innerState,
@@ -66,23 +77,74 @@ const DataProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
     subjectType: SubjectType,
     subjectId: string,
   ) {
-    // here we retrieve the relevant data
+    let subjectData = null;
+    let placeholder = "";
+
+    if (subjectType == "Members") {
+      placeholder = "Search members";
+      subjectData = GetTeamMembers(subjectId);
+    } else {
+      placeholder = "Search queries";
+      subjectData = GetTeamQueries(subjectId);
+    }
+
     const newState: UserManagementData = {
       ...innerState,
       TeamQueryEditSection: {
         ...innerState.TeamQueryEditSection,
         title,
         subtitle,
+        placeholder,
         subjectType,
+        subjectData,
         isOpen: true,
       },
     };
     setInnerState(newState);
   }
 
+  function HandleSearch(filter: string) {
+    // TODO data filtering
+    console.log("filtering ...");
+  }
+
+  function HandleMemberUpdate() {
+    console.log("update team members");
+  }
+
+  function HandleQueryUpdate() {
+    console.log("update team queries");
+  }
+
+  /**
+   * Data fetching
+   */
+
+  function GetTeamMembers(teamId: string): unknown {
+    // TODO retrieve member data
+    const ListOfMembers = ["Member 1", "Member 2", "Member 3"];
+    return ListOfMembers;
+  }
+
+  function GetTeamQueries(teamId: string): unknown {
+    // TODO retrieve queries data
+    const ListOfQueries = ["Query 1", "Query 2", "Query 3"];
+    return ListOfQueries;
+  }
+
+  /**
+   * HTML
+   */
   return (
     <DataContext.Provider
-      value={{ ...innerState, OpenEditSection, CloseEditSection }}
+      value={{
+        ...innerState,
+        OpenEditSection,
+        CloseEditSection,
+        HandleSearch,
+        HandleMemberUpdate,
+        HandleQueryUpdate,
+      }}
     >
       {children}
     </DataContext.Provider>

query-connector/src/app/(pages)/userManagement/components/TeamQueryEditSection.tsx

@@ -3,21 +3,70 @@
 import { useContext } from "react";
 import Drawer from "@/app/ui/designSystem/drawer/Drawer";
 import { DataContext } from "./DataProvider";
+import classNames from "classnames";
+import { Checkbox } from "@trussworks/react-uswds";
 
 /**
  *  @returns TeamQueryEditSection component which is the collapsible section that allows to edit members and queries of a team
  */
 const TeamQueryEditSection: React.FC = () => {
-  const { TeamQueryEditSection, CloseEditSection } = useContext(DataContext);
+  const {
+    TeamQueryEditSection,
+    CloseEditSection,
+    HandleSearch,
+    HandleMemberUpdate,
+    HandleQueryUpdate,
+  } = useContext(DataContext);
+
+  /**
+   * DOM content helpers
+   */
+
+  function CreateListOfItems(items: string[]): JSX.Element {
+    const isMemberView = TeamQueryEditSection.subjectType == "Members";
+
+    const description = isMemberView
+      ? "members of {TeamQueryEditSection.title}"
+      : "queries of {TeamQueryEditSection.title}";
+
+    return (
+      <ul
+        aria-description={description}
+        className={classNames("usa-list--unstyled", "margin-top-2")}
+      >
+        {items.map((item: string) => (
+          <li key={item}>
+            <Checkbox
+              id={item}
+              name={item}
+              label={item}
+              defaultChecked
+              onChange={isMemberView ? HandleMemberUpdate : HandleQueryUpdate}
+              className={classNames("margin-bottom-3")}
+            />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  function GenerateContent(): JSX.Element {
+    return CreateListOfItems(TeamQueryEditSection.subjectData as string[]);
+  }
+
+  /**
+   * HTML
+   */
 
   return (
     <Drawer
       title={TeamQueryEditSection.title}
       subtitle={TeamQueryEditSection.subtitle}
-      placeholder={"Loading data..."}
-      toRender={TeamQueryEditSection.content}
+      placeholder={TeamQueryEditSection.placeholder}
+      toRender={GenerateContent()}
       isOpen={TeamQueryEditSection.isOpen}
       onSave={() => {}}
+      onSearch={HandleSearch}
       onClose={CloseEditSection}
     />
   );

query-connector/src/app/(pages)/userManagement/userGroups/page.tsx

@@ -64,7 +64,12 @@ const UserGroups: React.FC = () => {
                 unstyled
                 aria-description={`Edit ${group.name} queries`}
                 onClick={() => {
-                  OpenEditSection(group.name, "Queries", "Query", group.id);
+                  OpenEditSection(
+                    group.name,
+                    "Assigned queries",
+                    "Query",
+                    group.id,
+                  );
                 }}
               >
                 {GetQueryLabel(group.querySize)}