From 95cd2445f5afd4ae80f1ddf8050329e7e499d857 Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Wed, 9 Oct 2024 16:46:34 +0500
Subject: [PATCH 1/2] fix(persist-header): source table header should be
 persist

---
 .../SourcesView/Topics/Table/index.tsx        | 259 +++++++++---------
 .../SourcesView/Topics/index.tsx              |  35 +--
 .../SourcesTableModal/SourcesView/types.ts    |   1 +
 3 files changed, 144 insertions(+), 151 deletions(-)

diff --git a/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx
index 6e797046e..14c748b14 100644
--- a/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx
@@ -30,13 +30,14 @@ interface CheckboxIconProps {
 export const Table: React.FC<TopicTableProps> = ({
   setShowMuteUnmute,
   showMuted,
+  loading,
   onTopicEdit,
   onChangeFilter,
   checkedStates,
   setCheckedStates,
 }) => {
   const { close } = useModal('sourcesTable')
-  const [loading, setLoading] = useState(false)
+  const [muteLoading, setMuteLoading] = useState(false)
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
   const [selectedRefId, setSelectedRefId] = React.useState<string>('')
 
@@ -74,7 +75,7 @@ export const Table: React.FC<TopicTableProps> = ({
   const id = open ? 'simple-popover' : undefined
 
   const handleSelectedMuteUnmute = async () => {
-    setLoading(true)
+    setMuteLoading(true)
 
     try {
       const promises = Object.keys(checkedStates).map(async (checkedId) => {
@@ -105,153 +106,149 @@ export const Table: React.FC<TopicTableProps> = ({
 
       setCheckedStates({})
 
-      setLoading(false)
+      setMuteLoading(false)
     } catch (error) {
       console.error('Error:', error)
-      setLoading(false)
+      setMuteLoading(false)
     }
   }
 
-  return !data ? (
+  return !loading && !data ? (
     <Flex>
       <Text>There is not any results for selected filters</Text>
       <FilterOffIcon />
     </Flex>
   ) : (
     <>
-      {!Object.keys(data).length ? (
+      {data && !Object.keys(data).length ? (
         <Flex>
           <Text>There is not any results for selected filters</Text>
           <FilterOffIcon />
         </Flex>
       ) : (
-        <TableInnerWrapper align="center" justify={loading ? 'center' : 'flex-start'}>
-          {loading ? (
-            <ClipLoader color={colors.white} />
-          ) : (
-            <>
-              <MaterialTable component="table">
-                {checkedCount > 0 ? (
-                  <ActionStyledTableHead>
-                    <TableRow component="tr">
-                      <StyledTableCell>
-                        <IconButton onClick={() => setCheckedStates({})}>
-                          <ClearIcon />
-                        </IconButton>
-                      </StyledTableCell>
-                      <StyledTableCell colSpan={12}>
-                        <StatusBarSection>
-                          <CheckCountBoxSection>
-                            <CheckedCount>{checkedCount}</CheckedCount>
-                            selected
-                          </CheckCountBoxSection>
-                          <StyledTableCell className="empty" />
-
-                          <MuteStatusSection onClick={handleSelectedMuteUnmute} role="button">
-                            {showMuted ? (
-                              <>
-                                <VisibilityOn /> Unmute ALL
-                              </>
-                            ) : (
-                              <>
-                                <VisibilityOff /> Mute ALL
-                              </>
-                            )}
-                          </MuteStatusSection>
-                          <StyledTableCell className="empty" />
-                          <MuteStatusSection onClick={() => handlePopoverAction('mergeTopic')}>
-                            <MergeIcon /> Merge
-                          </MuteStatusSection>
-                        </StatusBarSection>
-                      </StyledTableCell>
+        <TableInnerWrapper align="center" justify={muteLoading ? 'center' : 'flex-start'}>
+          <MaterialTable component="table">
+            {checkedCount > 0 ? (
+              <ActionStyledTableHead>
+                <TableRow component="tr">
+                  <StyledTableCell>
+                    <IconButton onClick={() => setCheckedStates({})}>
+                      <ClearIcon />
+                    </IconButton>
+                  </StyledTableCell>
+                  <StyledTableCell colSpan={12}>
+                    <StatusBarSection>
+                      <CheckCountBoxSection>
+                        <CheckedCount>{checkedCount}</CheckedCount>
+                        selected
+                      </CheckCountBoxSection>
                       <StyledTableCell className="empty" />
-                    </TableRow>
-                  </ActionStyledTableHead>
-                ) : (
-                  <StyledTableHead>
-                    <TableRow component="tr">
+
+                      <MuteStatusSection onClick={handleSelectedMuteUnmute} role="button">
+                        {showMuted ? (
+                          <>
+                            <VisibilityOn /> Unmute ALL
+                          </>
+                        ) : (
+                          <>
+                            <VisibilityOff /> Mute ALL
+                          </>
+                        )}
+                      </MuteStatusSection>
                       <StyledTableCell className="empty" />
-                      <StyledTableCell>
-                        <SortedIcon onClick={() => handleChange(ALPHABETICALLY)}>
-                          Name <SortFilterIcon />
-                        </SortedIcon>
-                      </StyledTableCell>
-                      <StyledTableCell>Type</StyledTableCell>
-                      <StyledTableCell>
-                        <SortedIcon onClick={() => handleChange(EDGE_COUNT)}>
-                          Count <SortFilterIcon />
-                        </SortedIcon>
-                      </StyledTableCell>
-                      <StyledTableCell>Edge list</StyledTableCell>
-                      <StyledTableCell>
-                        <SortedIcon onClick={() => handleChange(DATE)}>
-                          Date <SortFilterIcon />
-                        </SortedIcon>
-                      </StyledTableCell>
-                      <StyledTableCell>
-                        <Flex px={8}>
-                          <CheckboxSection onClick={setShowMuteUnmute}>
-                            <CheckboxIcon checked={showMuted}>
-                              <Checkmark>{showMuted && <CheckIcon />}</Checkmark>
-                            </CheckboxIcon>
-                            Muted
-                          </CheckboxSection>
-                        </Flex>
-                      </StyledTableCell>
-                    </TableRow>
-                  </StyledTableHead>
-                )}
-
-                {data && (
-                  <tbody>
-                    {ids?.map((i: string) => (
-                      <TopicRow
-                        key={i}
-                        checkedStates={checkedStates}
-                        isMuteDisabled={Object.values(checkedStates).filter((isChecked) => isChecked).length > 1}
-                        onClick={handleClick}
-                        onSearch={handleSearch}
-                        setCheckedStates={setCheckedStates}
-                        topic={data[i]}
-                      />
-                    ))}
-                  </tbody>
-                )}
-              </MaterialTable>
-              {selectedRefId ? (
-                <PopoverWrapper
-                  anchorEl={anchorEl}
-                  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-                  id={id}
-                  onClose={handleClose}
-                  open={open}
-                  transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-                >
-                  {showMuted ? (
-                    <PopoverOption data-testid="unmute" onClick={() => handlePopoverAction('unMute')}>
-                      {' '}
-                      <VisibilityOn data-testid="" /> Unmute
-                    </PopoverOption>
-                  ) : (
-                    <PopoverOption data-testid="mute" onClick={() => handlePopoverAction('mute')}>
-                      {' '}
-                      <VisibilityOff data-testid="VisibilityOff" /> Mute
-                    </PopoverOption>
-                  )}
-                  <PopoverOption data-testid="rename" onClick={() => handlePopoverAction('editTopic')}>
-                    <EditTopicIcon data-testid="EditTopicIcon" /> Rename
-                  </PopoverOption>
-
-                  <PopoverOption data-testid="merge" onClick={() => handlePopoverAction('mergeTopic')}>
-                    <MergeIcon data-testid="MergeIcon" /> Merge
-                  </PopoverOption>
-                  <PopoverOption data-testid="add_edge" onClick={() => handlePopoverAction('addEdge')}>
-                    <AddCircleIcon data-testid="AddCircleIcon" /> Add edge
-                  </PopoverOption>
-                </PopoverWrapper>
-              ) : null}
-            </>
-          )}
+                      <MuteStatusSection onClick={() => handlePopoverAction('mergeTopic')}>
+                        <MergeIcon /> Merge
+                      </MuteStatusSection>
+                    </StatusBarSection>
+                  </StyledTableCell>
+                  <StyledTableCell className="empty" />
+                </TableRow>
+              </ActionStyledTableHead>
+            ) : (
+              <StyledTableHead>
+                <TableRow component="tr">
+                  <StyledTableCell className="empty" />
+                  <StyledTableCell>
+                    <SortedIcon onClick={() => handleChange(ALPHABETICALLY)}>
+                      Name <SortFilterIcon />
+                    </SortedIcon>
+                  </StyledTableCell>
+                  <StyledTableCell>Type</StyledTableCell>
+                  <StyledTableCell>
+                    <SortedIcon onClick={() => handleChange(EDGE_COUNT)}>
+                      Count <SortFilterIcon />
+                    </SortedIcon>
+                  </StyledTableCell>
+                  <StyledTableCell>Edge list</StyledTableCell>
+                  <StyledTableCell>
+                    <SortedIcon onClick={() => handleChange(DATE)}>
+                      Date <SortFilterIcon />
+                    </SortedIcon>
+                  </StyledTableCell>
+                  <StyledTableCell>
+                    <Flex px={8}>
+                      <CheckboxSection onClick={setShowMuteUnmute}>
+                        <CheckboxIcon checked={showMuted}>
+                          <Checkmark>{showMuted && <CheckIcon />}</Checkmark>
+                        </CheckboxIcon>
+                        Muted
+                      </CheckboxSection>
+                    </Flex>
+                  </StyledTableCell>
+                </TableRow>
+              </StyledTableHead>
+            )}
+
+            {(loading || muteLoading) && !data && <ClipLoader color={colors.white} />}
+
+            {data && (
+              <tbody>
+                {ids?.map((i: string) => (
+                  <TopicRow
+                    key={i}
+                    checkedStates={checkedStates}
+                    isMuteDisabled={Object.values(checkedStates).filter((isChecked) => isChecked).length > 1}
+                    onClick={handleClick}
+                    onSearch={handleSearch}
+                    setCheckedStates={setCheckedStates}
+                    topic={data[i]}
+                  />
+                ))}
+              </tbody>
+            )}
+          </MaterialTable>
+          {selectedRefId ? (
+            <PopoverWrapper
+              anchorEl={anchorEl}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+              id={id}
+              onClose={handleClose}
+              open={open}
+              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+              {showMuted ? (
+                <PopoverOption data-testid="unmute" onClick={() => handlePopoverAction('unMute')}>
+                  {' '}
+                  <VisibilityOn data-testid="" /> Unmute
+                </PopoverOption>
+              ) : (
+                <PopoverOption data-testid="mute" onClick={() => handlePopoverAction('mute')}>
+                  {' '}
+                  <VisibilityOff data-testid="VisibilityOff" /> Mute
+                </PopoverOption>
+              )}
+              <PopoverOption data-testid="rename" onClick={() => handlePopoverAction('editTopic')}>
+                <EditTopicIcon data-testid="EditTopicIcon" /> Rename
+              </PopoverOption>
+
+              <PopoverOption data-testid="merge" onClick={() => handlePopoverAction('mergeTopic')}>
+                <MergeIcon data-testid="MergeIcon" /> Merge
+              </PopoverOption>
+              <PopoverOption data-testid="add_edge" onClick={() => handlePopoverAction('addEdge')}>
+                <AddCircleIcon data-testid="AddCircleIcon" /> Add edge
+              </PopoverOption>
+            </PopoverWrapper>
+          ) : null}
         </TableInnerWrapper>
       )}
     </>
diff --git a/src/components/SourcesTableModal/SourcesView/Topics/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/index.tsx
index 530edcd5d..be34b9eed 100644
--- a/src/components/SourcesTableModal/SourcesView/Topics/index.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Topics/index.tsx
@@ -146,26 +146,21 @@ export const TopicSources = () => {
         </InputWrapper>
 
         <TableWrapper align="center" justify={loading && !data ? 'center' : 'flex-start'}>
-          {loading && !data ? (
-            <ClipLoader color={colors.white} />
-          ) : (
-            <>
-              <Table
-                checkedStates={checkedStates}
-                onChangeFilter={handleFilterChange}
-                onTopicEdit={onTopicEdit}
-                setCheckedStates={setCheckedStates}
-                setShowMuteUnmute={() => setFilters({ is_muted: !filters.is_muted })}
-                showMuted={filters.is_muted}
-              />
-              {total > ids.length ? (
-                <Button className="load-more" disabled={loading} onClick={handleLoadMore}>
-                  Load more
-                  {loading && <ClipLoader color={colors.lightGray} size={10} />}
-                </Button>
-              ) : null}
-            </>
-          )}
+          <Table
+            checkedStates={checkedStates}
+            loading={loading}
+            onChangeFilter={handleFilterChange}
+            onTopicEdit={onTopicEdit}
+            setCheckedStates={setCheckedStates}
+            setShowMuteUnmute={() => setFilters({ is_muted: !filters.is_muted })}
+            showMuted={filters.is_muted}
+          />
+          {total > ids.length ? (
+            <Button className="load-more" disabled={loading} onClick={handleLoadMore}>
+              Load more
+              {loading && <ClipLoader color={colors.lightGray} size={10} />}
+            </Button>
+          ) : null}
         </TableWrapper>
       </Wrapper>
 
diff --git a/src/components/SourcesTableModal/SourcesView/types.ts b/src/components/SourcesTableModal/SourcesView/types.ts
index 11c10fca4..8977299ba 100644
--- a/src/components/SourcesTableModal/SourcesView/types.ts
+++ b/src/components/SourcesTableModal/SourcesView/types.ts
@@ -7,6 +7,7 @@ export type Props = {
 
 export type TopicTableProps = {
   showMuted?: boolean
+  loading: boolean
   onTopicEdit: (id: string, action: string) => void
   onChangeFilter: (val: string) => void
   setShowMuteUnmute: () => void

From 16e0160ce966e770dcdb0e282a70ed637fa5f8c9 Mon Sep 17 00:00:00 2001
From: MahtabBukhari <mahtabali50447@gmail.com>
Date: Wed, 9 Oct 2024 17:47:52 +0500
Subject: [PATCH 2/2] fix(persist-header): source table header should persist

---
 .../SourcesView/Topics/Table/index.tsx          | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx b/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx
index 14c748b14..2e09c4ea4 100644
--- a/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx
+++ b/src/components/SourcesTableModal/SourcesView/Topics/Table/index.tsx
@@ -199,7 +199,11 @@ export const Table: React.FC<TopicTableProps> = ({
               </StyledTableHead>
             )}
 
-            {(loading || muteLoading) && !data && <ClipLoader color={colors.white} />}
+            {(loading || muteLoading) && !data && (
+              <ClipLoaderWrapper>
+                <ClipLoader color={colors.white} />
+              </ClipLoaderWrapper>
+            )}
 
             {data && (
               <tbody>
@@ -365,3 +369,14 @@ const TableInnerWrapper = styled(Flex)`
   width: 100%;
   position: relative;
 `
+
+const ClipLoaderWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`