Adapt 'Delete' modal to user groups

The 'Delete' modal functionality
must be adapted to work with the
User groups data.

Signed-off-by: Carla Martinez <[email protected]>

src/components/MemberOf/MemberOfDeleteModalUserGroups.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+// PatternFly
+import {
+  TextContent,
+  Text,
+  TextVariants,
+  Button,
+  Modal,
+  Form,
+  FormGroup,
+} from "@patternfly/react-core";
+// Tables
+import MemberOfDeletedGroupsTable from "src/components/MemberOf/MemberOfDeletedGroupsTable";
+// Data types
+import { UserGroup } from "src/utils/datatypes/globalDataTypes";
+
+interface PropsToDelete {
+  showModal: boolean;
+  onCloseModal: () => void;
+  tabName: string;
+  groupNamesToDelete: string[];
+  groupRepository: UserGroup[];
+  updateGroupRepository: (args: UserGroup[]) => void;
+  updateGroupNamesToDelete: (args: string[]) => void;
+}
+
+const MemberOfDeleteModal = (props: PropsToDelete) => {
+  // Given a single group name, obtain full info to be sent and shown on the deletion table
+  const getGroupInfoByName = (groupName: string) => {
+    const res = props.groupRepository.filter(
+      (group) => group.name === groupName
+    );
+    return res[0];
+  };
+
+  // Obtain full info of groups to delete
+  const getListOfGroupsToDelete = () => {
+    const groupsToDelete: UserGroup[] = [];
+    props.groupNamesToDelete.map((groupName) =>
+      groupsToDelete.push(getGroupInfoByName(groupName))
+    );
+    return groupsToDelete;
+  };
+
+  // Groups to delete list
+  const groupsToDelete: UserGroup[] = getListOfGroupsToDelete();
+
+  // Delete groups
+  const deleteGroups = () => {
+    let generalUpdatedGroupList = props.groupRepository;
+    props.groupNamesToDelete.map((groupName) => {
+      const updatedGroupList = generalUpdatedGroupList.filter(
+        (grp) => grp.name !== groupName
+      );
+      // If not empty, replace groupList by new array
+      if (updatedGroupList) {
+        generalUpdatedGroupList = updatedGroupList;
+      }
+    });
+    props.updateGroupRepository(generalUpdatedGroupList);
+    props.updateGroupNamesToDelete([]);
+    props.onCloseModal();
+  };
+
+  // Modal actions
+  const modalActionsDelete: JSX.Element[] = [
+    <Button
+      key="delete-groups"
+      variant="danger"
+      onClick={deleteGroups}
+      form="active-users-remove-groups-modal"
+    >
+      Delete
+    </Button>,
+    <Button
+      key="cancel-remove-group"
+      variant="link"
+      onClick={props.onCloseModal}
+    >
+      Cancel
+    </Button>,
+  ];
+
+  return (
+    <Modal
+      variant={"medium"}
+      position={"top"}
+      positionOffset={"76px"}
+      title={"Remove " + props.tabName}
+      isOpen={props.showModal}
+      onClose={props.onCloseModal}
+      actions={modalActionsDelete}
+      aria-label="Delete member modal"
+    >
+      <Form id={"is-member-of-delete-modal"}>
+        <FormGroup key={"question-text"} fieldId={"question-text"}>
+          <TextContent>
+            <Text component={TextVariants.p}>
+              Are you sure you want to remove the selected entries from the
+              list?
+            </Text>
+          </TextContent>
+        </FormGroup>
+        <FormGroup key={"deleted-users-table"} fieldId={"deleted-users-table"}>
+          <MemberOfDeletedGroupsTable
+            groupsToDelete={groupsToDelete}
+            tabName={props.tabName}
+          />
+        </FormGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+export default MemberOfDeleteModal;

src/components/MemberOf/MemberOfUserGroups.tsx

@@ -11,6 +11,7 @@ import MemberOfToolbarUserGroups, {
 } from "./MemberOfToolbar";
 import MemberOfUserGroupsTable from "./MemberOfTableUserGroups";
 import MemberOfAddModal from "./MemberOfAddModalUserGroups";
+import MemberOfDeleteModal from "./MemberOfDeleteModalUserGroups";
 
 function paginate<Type>(array: Type[], page: number, perPage: number): Type[] {
   const startIdx = (page - 1) * perPage;
@@ -120,6 +121,17 @@ const MemberOfUserGroups = (props: MemberOfUserGroupsProps) => {
           }
         />
       )}
+      {showDeleteModal && someItemSelected && (
+        <MemberOfDeleteModal
+          showModal={showDeleteModal}
+          onCloseModal={() => setShowDeleteModal(false)}
+          tabName="User groups"
+          groupNamesToDelete={groupsNamesSelected}
+          updateGroupNamesToDelete={setGroupsNamesSelected}
+          groupRepository={props.usersGroupsFromUser}
+          updateGroupRepository={props.updateUsersGroupsFromUser}
+        />
+      )}
     </>
   );
 };

src/pages/ActiveUsers/UserMemberOf.tsx

@@ -566,30 +566,6 @@ const UserMemberOf = (props: PropsToUserMemberOf) => {
           </Tab>
         </Tabs>
       </PageSection>
-      {/* {tabName === "User groups" && (
-        <>
-          {showAddModal && (
-            <MemberOfAddModal
-              modalData={addModalData}
-              availableData={userGroupsFilteredData}
-              groupRepository={userGroupsRepository}
-              updateGroupRepository={updateGroupRepository}
-              updateAvOptionsList={updateUserGroupsList}
-              tabData={tabData}
-            />
-          )}
-          {showDeleteModal && groupsNamesSelected.length !== 0 && (
-            <MemberOfDeleteModal
-              modalData={deleteModalData}
-              tabData={deleteTabData}
-              groupNamesToDelete={groupsNamesSelected}
-              groupRepository={userGroupsRepository}
-              updateGroupRepository={updateGroupRepository}
-              buttonData={deleteButtonData}
-            />
-          )}
-        </>
-      )} */}
       {tabName === "Netgroups" && (
         <>
           {showAddModal && (