feat: UI for deleting discord groups by super users (#909)

* UI changes for delete group feature under feature flag

* chore: Test cases

* fix: issue is no group found

__tests__/groups/group.test.js

@@ -1,10 +1,21 @@
 const puppeteer = require('puppeteer');
-const { allUsersData } = require('../../mock-data/users');
+const { allUsersData, superUserData } = require('../../mock-data/users');
 const { discordGroups, GroupRoleData } = require('../../mock-data/groups');
 
 const BASE_URL = 'https://api.realdevsquad.com';
 const PAGE_URL = 'http://localhost:8000';
 
+function setSuperUserPermission() {
+  allUsersData.users[0] = superUserData;
+}
+
+function resetUserPermission() {
+  allUsersData.users[0] = {
+    ...allUsersData.users[0],
+    roles: { archived: false },
+  };
+}
+
 describe('Discord Groups Page', () => {
   let browser;
   let page;
@@ -297,4 +308,66 @@ describe('Discord Groups Page', () => {
     const repoLinkStyle = await page.evaluate((el) => el.style, repoLink);
     expect(repoLinkStyle).toBeTruthy();
   });
+
+  test('Should display delete button for super users', async () => {
+    setSuperUserPermission();
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+    await page.waitForTimeout(1000);
+
+    const deleteButtons = await page.$$('.delete-group');
+    const cards = await page.$$('.card');
+    expect(deleteButtons.length).toBe(cards.length);
+    expect(deleteButtons.length).toBeGreaterThan(0);
+  });
+
+  test('Should not display delete button when user is normal user', async () => {
+    resetUserPermission();
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+
+    const deleteButtons = await page.$$('.delete-group');
+    expect(deleteButtons.length).toBe(0);
+  });
+
+  test('Should not display delete button when dev=false', async () => {
+    setSuperUserPermission();
+    await page.goto(`${PAGE_URL}/groups`);
+    await page.waitForNetworkIdle();
+
+    const deleteButtons = await page.$$('.delete-group');
+    expect(deleteButtons.length).toBe(0);
+  });
+
+  test('Should display delete confirmation modal on click of delete button', async () => {
+    setSuperUserPermission();
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+    await page.waitForTimeout(1000);
+
+    const deleteButton = await page.$('.delete-group');
+    await deleteButton.click();
+
+    const deleteConfirmationModal = await page.waitForSelector(
+      '.delete-confirmation-modal',
+    );
+
+    expect(deleteConfirmationModal).toBeTruthy();
+  });
+
+  test('Should close delete confirmation modal when cancel button is clicked', async () => {
+    setSuperUserPermission();
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+    await page.waitForTimeout(1000);
+
+    const deleteButton = await page.$('.delete-group');
+    await deleteButton.click();
+
+    const cancelButton = await page.waitForSelector('#cancel-delete');
+    await cancelButton.click();
+
+    const modalClosed = await page.$('.delete-confirmation-modal');
+    expect(modalClosed).toBeFalsy();
+  });
 });

groups/createElements.js

@@ -1,4 +1,9 @@
-const createCard = (rawGroup, onClick = () => {}) => {
+const createCard = (
+  rawGroup,
+  onClick = () => {},
+  onDelete = () => {},
+  isSuperUser = false,
+) => {
   const group = {
     ...rawGroup,
     description:
@@ -10,7 +15,17 @@ const createCard = (rawGroup, onClick = () => {}) => {
   cardElement.className = 'card';
   cardElement.id = `group-${group.id}`;
   cardElement.innerHTML = `
-        <h5 class="card__title"></h5>
+        <div class="card__header">
+          <h5 class="card__title"></h5>
+          ${
+            isSuperUser
+              ? `
+            <button class="delete-group">
+              <img class="delete-group__icon" src="assets/delete.svg" alt="Delete" />
+            </button>`
+              : ''
+          }  
+        </div>
         <p class="card__description"></p>
         <div class="card__action">
             <button class="card__btn button"></button>
@@ -36,6 +51,15 @@ const createCard = (rawGroup, onClick = () => {}) => {
     .querySelector('.card__btn')
     .addEventListener('click', () => group.isUpdating || onClick());
 
+  if (isSuperUser) {
+    cardElement
+      .querySelector('.delete-group')
+      .addEventListener('click', (e) => {
+        e.stopPropagation();
+        onDelete(rawGroup.id, rawGroup.roleId);
+      });
+  }
+
   return cardElement;
 };
 
@@ -214,6 +238,44 @@ const createGroupCreationModal = (onClose = () => {}, onSubmit = () => {}) => {
   return backdropElement;
 };
 
+const createDeleteConfirmationModal = (
+  onClose = () => {},
+  onConfirm = () => {},
+) => {
+  const backdropElement = document.createElement('div');
+  backdropElement.className = 'backdrop';
+
+  const modalElement = document.createElement('div');
+  modalElement.className = 'delete-confirmation-modal';
+  modalElement.innerHTML = `
+    <div class="delete-modal__header">
+      <h2 class="delete-modal__title">Confirm Delete</h2>
+      <button type="button" id="close-button" class="delete-modal__close">
+        <img src="assets/close.svg" alt="Close" />
+      </button>
+    </div>
+    <div class="delete-modal__content">
+      <p class="delete-modal__msg"> Are you sure you want to delete this group? </p>
+    </div>
+    
+    <div class="delete-modal__buttons">
+      <button class="delete-modal-button button--secondary" id="cancel-delete">Cancel</button>
+      <button class="delete-modal-button button--danger" id="confirm-delete">Delete</button>
+    </div>
+  `;
+
+  modalElement.querySelector('#close-button').onclick = onClose;
+  modalElement.querySelector('#cancel-delete').onclick = onClose;
+  modalElement.querySelector('#confirm-delete').onclick = onConfirm;
+
+  backdropElement.appendChild(modalElement);
+  backdropElement.onclick = (e) => {
+    if (e.target === backdropElement) onClose();
+  };
+
+  return backdropElement;
+};
+
 export {
   createCard,
   createLoadingCard,
@@ -222,4 +284,5 @@ export {
   createNavbarProfileLoading,
   createNavbarProfileSignin,
   createGroupCreationModal,
+  createDeleteConfirmationModal,
 };

groups/index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/groups/style.css" />
     <script src="/helpers/loadENV.js"></script>
     <script src="/constants.js"></script>
+    <script src="../utils.js" defer></script>
     <script type="module" src="/groups/script.js" defer></script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

groups/render.js

@@ -6,6 +6,7 @@ import {
   createNavbarProfile,
   createNavbarProfileLoading,
   createNavbarProfileSignin,
+  createDeleteConfirmationModal,
 } from './createElements.js';
 
 const renderNotAuthenticatedPage = () => {
@@ -86,8 +87,13 @@ const removeLoadingCards = () => {
   loadingCards.forEach((card) => mainContainer.removeChild(card));
 };
 
-const renderGroupById = ({ group, cardOnClick = () => {} }) => {
-  const card = createCard(group, cardOnClick);
+const renderGroupById = ({
+  group,
+  cardOnClick = () => {},
+  onDelete = () => {},
+  isSuperUser = false,
+}) => {
+  const card = createCard(group, cardOnClick, onDelete, isSuperUser);
   const mainContainer = document.querySelector('.group-container');
   const groupElement = document.getElementById(`group-${group.id}`);
   if (groupElement) {
@@ -105,6 +111,29 @@ const renderNoGroupFound = () => {
   mainContainer.append(noGroupContainer);
 };
 
+const renderDeleteConfirmationModal = ({
+  onClose = () => {},
+  onConfirm = () => {},
+}) => {
+  const container = document.querySelector('body');
+  const existingBackdrop = document.querySelector('.backdrop');
+
+  if (existingBackdrop) {
+    container.removeChild(existingBackdrop);
+  }
+
+  const modal = createDeleteConfirmationModal(onClose, onConfirm);
+  container.appendChild(modal);
+};
+
+const removeDeleteConfirmationModal = () => {
+  const container = document.querySelector('body');
+  const backdrop = document.querySelector('.backdrop');
+  if (backdrop) {
+    container.removeChild(backdrop);
+  }
+};
+
 export {
   renderNotAuthenticatedPage,
   renderGroupCreationModal,
@@ -117,4 +146,6 @@ export {
   removeLoadingCards,
   renderGroupById,
   renderNoGroupFound,
+  renderDeleteConfirmationModal,
+  removeDeleteConfirmationModal,
 };