From 7ce86bf6c3a3cb72f164665ecacf6b2393b61a78 Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Thu, 18 Apr 2024 17:15:07 +0500
Subject: [PATCH 1/6] fix(correct-shape): loader is not in the correct shape

---
 .../Sources/Table/__tests__/test.tsx          | 28 +++++++++++-
 .../SourcesView/Sources/Table/index.tsx       | 44 ++++++++++++++-----
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx b/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
index 3ce731245..b9b0c2ad4 100644
--- a/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react'
+import { render, screen, within, fireEvent } from '@testing-library/react'
 import React from 'react'
 import { TWITTER_LINK, sourcesMapper } from '~/components/SourcesTableModal/SourcesView/constants'
 import { RSS, TWITTER_HANDLE, YOUTUBE_CHANNEL } from '~/constants'
@@ -55,4 +55,30 @@ describe('Table Component Tests', () => {
     expect(sourceTypeCell).toBeInTheDocument()
     expect(sourceCell).toBeInTheDocument()
   })
+
+  it('should display loader when clicking on delete icon', async () => {
+    render(<Table canEdit={true} data={mockData} />)
+
+    const deleteIcon = screen.getByTestId('delete-icon-2')
+    fireEvent.click(deleteIcon)
+
+    const confirmDelete = await screen.findByText('Yes')
+    fireEvent.click(confirmDelete)
+
+    const loader = await screen.findByTestId('delete-loader-2')
+    expect(loader).toBeInTheDocument()
+  })
+
+  it('should display loader when clicking on edit icon and then check icon', async () => {
+    render(<Table canEdit={true} data={mockData} />)
+
+    const editIcon = screen.getByTestId('edit-icon-1')
+    fireEvent.click(editIcon)
+
+    const checkIcon = screen.getByTestId('check-icon-1')
+    fireEvent.click(checkIcon)
+
+    const loader = await screen.findByTestId('edit-loader-1')
+    expect(loader).toBeInTheDocument()
+  })
 })
diff --git a/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx b/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
index a9b513d92..17b1d2f6f 100644
--- a/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
@@ -1,6 +1,6 @@
 import { Table as MaterialTable, TableBody, TableRow } from '@mui/material'
 import React, { useState } from 'react'
-import { MdCheck, MdClose, MdDeleteForever, MdOutlineModeEdit } from 'react-icons/md'
+import { MdCheck, MdClose, MdOutlineModeEdit } from 'react-icons/md'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { BaseTextInput } from '~/components/BaseTextInput'
@@ -15,6 +15,7 @@ import { RadarRequest, Sources } from '~/types'
 import { colors } from '~/utils/colors'
 import { StyledTableCell, StyledTableHead, StyledTableRow } from '../../common'
 import { TWITTER_LINK, sourcesMapper } from '../../constants'
+import DeleteIcon from '~/components/Icons/DeleteIcon'
 
 type Props = {
   data: Sources[] | undefined
@@ -119,13 +120,19 @@ const Table: React.FC<Props> = ({ data, canEdit = false }) => {
             </StyledTableCell>
             {canEdit && (
               <StyledTableCell align="left">
-                <div className="delete-wrapper" id={`delete-${i.source}`}>
+                <div className="delete-wrapper" data-testid={`delete-wrapper-${i.ref_id}`} id={`delete-${i.source}`}>
                   {loadingId === i.ref_id ? (
-                    <ClipLoader color={colors.white} />
+                    <ClipLoaderWrapper data-testid={`delete-loader-${i.ref_id}`}>
+                      <ClipLoader color={colors.white} size={16} />
+                    </ClipLoaderWrapper>
                   ) : (
-                    <ConfirmPopover message="Are you sure ?" onConfirm={() => handleRemove(i.ref_id)}>
-                      <IconWrapper className="centered">
-                        <MdDeleteForever />
+                    <ConfirmPopover
+                      data-testid={`delete-icon-${i.ref_id}`}
+                      message="Are you sure ?"
+                      onConfirm={() => handleRemove(i.ref_id)}
+                    >
+                      <IconWrapper className="centered" data-testid={`delete-icon-${i.ref_id}`}>
+                        <DeleteIcon />
                       </IconWrapper>
                     </ConfirmPopover>
                   )}
@@ -180,7 +187,7 @@ const EditableCell: React.FC<EditableCellProps> = ({ value, onSave, id, children
   return (
     <div>
       {editing ? (
-        <EditModeCellWrapper direction="row">
+        <EditModeCellWrapper align="center" direction="row">
           <BaseTextInput
             className="editable-cell__input"
             name="cell-input"
@@ -188,7 +195,13 @@ const EditableCell: React.FC<EditableCellProps> = ({ value, onSave, id, children
             value={name}
           />
           <IconWrapper align="center" justify="center">
-            {loading ? <ClipLoader /> : <MdCheck onClick={handleSave} />}
+            {loading ? (
+              <ClipLoaderWrapper data-testid={`edit-loader-${id}`}>
+                <ClipLoader color={colors.white} size={12} />
+              </ClipLoaderWrapper>
+            ) : (
+              <MdCheck data-testid={`check-icon-${id}`} onClick={handleSave} />
+            )}
           </IconWrapper>
           <IconWrapper align="center" className="secondary" justify="center" onClick={() => setEditing(false)}>
             <MdClose />
@@ -198,7 +211,7 @@ const EditableCell: React.FC<EditableCellProps> = ({ value, onSave, id, children
         <EditableCellWrapper direction="row">
           {children}
           <IconWrapper onClick={() => setEditing(true)}>
-            <MdOutlineModeEdit size={20} />
+            <MdOutlineModeEdit data-testid={`edit-icon-${id}`} size={20} />
           </IconWrapper>
         </EditableCellWrapper>
       )}
@@ -231,7 +244,8 @@ const IconWrapper = styled(Flex)`
   border-radius: 50%;
   cursor: pointer;
   background: transparent;
-  color: ${colors.lightBlue500};
+  align-items: center;
+  justify-content: center;
   &.centered {
     margin: 0 auto;
   }
@@ -239,6 +253,10 @@ const IconWrapper = styled(Flex)`
   & + & {
     margin-left: 4px;
   }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
 `
 
 const NoResultWrapper = styled(Flex)`
@@ -283,3 +301,9 @@ const StyledLink = styled.a`
     color: ${colors.white};
   }
 `
+
+const ClipLoaderWrapper = styled(Flex)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`

From 98a4140e2ec319eeb5fd7f512d906118adca3ce5 Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Thu, 18 Apr 2024 17:22:03 +0500
Subject: [PATCH 2/6] fix(correct-shape): fix lint issue

---
 .../SourcesView/Sources/Table/__tests__/test.tsx            | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx b/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
index b9b0c2ad4..2550ae0cb 100644
--- a/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
@@ -60,12 +60,15 @@ describe('Table Component Tests', () => {
     render(<Table canEdit={true} data={mockData} />)
 
     const deleteIcon = screen.getByTestId('delete-icon-2')
+
     fireEvent.click(deleteIcon)
 
     const confirmDelete = await screen.findByText('Yes')
+
     fireEvent.click(confirmDelete)
 
     const loader = await screen.findByTestId('delete-loader-2')
+
     expect(loader).toBeInTheDocument()
   })
 
@@ -73,12 +76,15 @@ describe('Table Component Tests', () => {
     render(<Table canEdit={true} data={mockData} />)
 
     const editIcon = screen.getByTestId('edit-icon-1')
+
     fireEvent.click(editIcon)
 
     const checkIcon = screen.getByTestId('check-icon-1')
+
     fireEvent.click(checkIcon)
 
     const loader = await screen.findByTestId('edit-loader-1')
+
     expect(loader).toBeInTheDocument()
   })
 })

From fa588aa92641bf432382e525d58597afd7ed955d Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Thu, 18 Apr 2024 17:28:55 +0500
Subject: [PATCH 3/6] fix(correct-shape): fix lint issue

---
 .../SourcesView/Sources/Table/__tests__/test.tsx          | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx b/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
index 2550ae0cb..fad7b9345 100644
--- a/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
@@ -57,7 +57,9 @@ describe('Table Component Tests', () => {
   })
 
   it('should display loader when clicking on delete icon', async () => {
-    render(<Table canEdit={true} data={mockData} />)
+    const isEdit: boolean = true
+
+    render(<Table canEdit={isEdit} data={mockData} />)
 
     const deleteIcon = screen.getByTestId('delete-icon-2')
 
@@ -73,7 +75,9 @@ describe('Table Component Tests', () => {
   })
 
   it('should display loader when clicking on edit icon and then check icon', async () => {
-    render(<Table canEdit={true} data={mockData} />)
+    const isEdit: boolean = true
+
+    render(<Table canEdit={isEdit} data={mockData} />)
 
     const editIcon = screen.getByTestId('edit-icon-1')
 

From f75742a2f20ccacc966e2300f19d59127e1d3433 Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Thu, 18 Apr 2024 17:32:43 +0500
Subject: [PATCH 4/6] fix(correct-shape): fix lint issue again

---
 .../SourcesView/Sources/Table/__tests__/test.tsx              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx b/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
index fad7b9345..0b1c7d0a1 100644
--- a/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Sources/Table/__tests__/test.tsx
@@ -57,7 +57,7 @@ describe('Table Component Tests', () => {
   })
 
   it('should display loader when clicking on delete icon', async () => {
-    const isEdit: boolean = true
+    const isEdit = true
 
     render(<Table canEdit={isEdit} data={mockData} />)
 
@@ -75,7 +75,7 @@ describe('Table Component Tests', () => {
   })
 
   it('should display loader when clicking on edit icon and then check icon', async () => {
-    const isEdit: boolean = true
+    const isEdit = true
 
     render(<Table canEdit={isEdit} data={mockData} />)
 

From e08cc9d03d96f6d65c905c957c78f43fe54720d6 Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Thu, 18 Apr 2024 18:45:29 +0500
Subject: [PATCH 5/6] fix(correct-shape): fix test issue

---
 .../SourcesTableModal/SourcesView/Sources/Table/index.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx b/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
index 17b1d2f6f..968e85bf3 100644
--- a/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
@@ -120,7 +120,7 @@ const Table: React.FC<Props> = ({ data, canEdit = false }) => {
             </StyledTableCell>
             {canEdit && (
               <StyledTableCell align="left">
-                <div className="delete-wrapper" data-testid={`delete-wrapper-${i.ref_id}`} id={`delete-${i.source}`}>
+                <div className="delete-wrapper" id={`delete-${i.source}`}>
                   {loadingId === i.ref_id ? (
                     <ClipLoaderWrapper data-testid={`delete-loader-${i.ref_id}`}>
                       <ClipLoader color={colors.white} size={16} />

From 07c0db2e2cb2e57ab569ff894d392e24581c8273 Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Thu, 18 Apr 2024 18:48:47 +0500
Subject: [PATCH 6/6] fix(correct-shape): fix test issue again

---
 .../SourcesTableModal/SourcesView/Sources/Table/index.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx b/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
index 968e85bf3..447beac2c 100644
--- a/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Sources/Table/index.tsx
@@ -128,7 +128,7 @@ const Table: React.FC<Props> = ({ data, canEdit = false }) => {
                   ) : (
                     <ConfirmPopover
                       data-testid={`delete-icon-${i.ref_id}`}
-                      message="Are you sure ?"
+                      message="Are you sure?"
                       onConfirm={() => handleRemove(i.ref_id)}
                     >
                       <IconWrapper className="centered" data-testid={`delete-icon-${i.ref_id}`}>