Merge pull request #914 from Ekep-Obasi/enhancement/improved-document…

…-view-for-sidebar

Improve Document view in sidebar

src/components/App/Helper/AskQuestion/Text/index.tsx

@@ -1,17 +1,74 @@
+import styled from 'styled-components'
+import GlobeIcon from '~/components/Icons/GlobeIcon'
+import LinkIcon from '~/components/Icons/LinkIcon'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { useSelectedNode } from '~/stores/useDataStore'
+import { colors } from '~/utils'
 
 export const TextType = () => {
   const selectedNode = useSelectedNode()
+  const hasSourceLink = !!selectedNode?.source_link
 
   return (
-    <div style={{ overflow: 'auto', flex: 1, width: '100%' }}>
-      <Flex align="center" justify="center" p={12}>
+    <Flex align="center" justify="center" p={12}>
+      {hasSourceLink && (
+        <StyledHeader>
+          <GlobeIcon color={colors.GRAY6} />
+          <SyledLinkText>{selectedNode?.source_link}</SyledLinkText>
+          <StyledLink href={selectedNode?.source_link} onClick={(e) => e.stopPropagation()} target="_blank">
+            <LinkIcon />
+          </StyledLink>
+        </StyledHeader>
+      )}
+      <StyledContent hasSourceLink={hasSourceLink}>
         <Text color="primaryText1" kind="regular">
           {selectedNode?.text}
         </Text>
-      </Flex>
-    </div>
+      </StyledContent>
+    </Flex>
   )
 }
+
+const StyledHeader = styled(Flex)`
+  top: 0px;
+  position: absolute;
+  border-radius: 16px 16px 0px 0px;
+  padding: 0px 12px;
+  width: 100%;
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${colors.BG2};
+  gap: 5px;
+  color: ${colors.GRAY6};
+
+  span {
+    font-family: Barlow;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 19px;
+    color: ${colors.GRAY6};
+  }
+`
+
+const StyledLink = styled.a`
+  color: ${colors.GRAY6};
+  font-size: 16px;
+  height: 16px;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+`
+
+const StyledContent = styled(Flex)<{ hasSourceLink: boolean }>`
+  margin-top: ${(props) => (props.hasSourceLink ? '48px' : '')};
+`
+
+const SyledLinkText = styled(Text)`
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`

src/components/App/SideBar/Relevance/Episode/TypeDocument/__tests__/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TypeDocument } from '..'
+
+describe('TypeDocument component', () => {
+  const props = {
+    text: 'Sample text',
+    type: 'Sample type',
+    sourceLink: 'http://example.com',
+  }
+
+  it('renders text correctly', () => {
+    render(<TypeDocument {...props} />)
+    expect(screen.getByTestId('episode-description')).toHaveTextContent('Sample text')
+  })
+
+  it('renders type badge correctly', () => {
+    render(<TypeDocument {...props} />)
+    expect(screen.getByText('Sample type')).toBeInTheDocument()
+  })
+
+  it('renders source link correctly', () => {
+    render(<TypeDocument {...props} />)
+
+    const linkElement = screen.getByRole('link', { name: /http:\/\/example.com/i })
+
+    expect(linkElement).toBeInTheDocument()
+
+    expect(linkElement).toHaveAttribute('href', 'http://example.com')
+  })
+
+  it('clicking on source link does not propagate click event', () => {
+    render(<TypeDocument {...props} />)
+
+    const linkElement = screen.getByRole('link', { name: /http:\/\/example.com/i })
+
+    const mockClickHandler = jest.fn()
+
+    linkElement.addEventListener('click', mockClickHandler)
+
+    userEvent.click(linkElement)
+
+    expect(mockClickHandler).not.toHaveBeenCalled()
+  })
+})

src/components/App/SideBar/Relevance/Episode/TypeDocument/index.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+import GlobeIcon from '~/components/Icons/GlobeIcon'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { TypeBadge } from '~/components/common/TypeBadge'
+import { colors } from '~/utils/colors'
+import { Description } from '..'
+
+interface Props {
+  text: string
+  type: string
+  sourceLink: string
+}
+
+export const TypeDocument = ({ text, type, sourceLink }: Props) => (
+  <Flex direction="column">
+    <Flex align="center" direction="row">
+      <TypeBadge type={type} />
+    </Flex>
+    <Description data-testid="episode-description">{text}</Description>
+    <Flex align="center" direction="row" justify="flex-start">
+      {sourceLink && (
+        <StyledLink href={sourceLink} onClick={(e) => e.stopPropagation()} target="_blank">
+          <GlobeIcon />
+          <SyledLinkText>{sourceLink}</SyledLinkText>
+        </StyledLink>
+      )}
+    </Flex>
+  </Flex>
+)
+
+const StyledLink = styled.a`
+  color: ${colors.GRAY6};
+  font-size: 16px;
+  height: 16px;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+`
+
+const SyledLinkText = styled(Text)`
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${colors.GRAY6};
+  font-family: Barlow;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+`

src/components/App/SideBar/Relevance/Episode/index.tsx

@@ -9,6 +9,7 @@ import { Text } from '~/components/common/Text'
 import { TypeBadge } from '~/components/common/TypeBadge'
 import { colors } from '~/utils/colors'
 import { TypeCustom } from './TypeCustom'
+import { TypeDocument } from './TypeDocument'
 import { TypePerson } from './TypePerson'
 import { TypeTweet } from './TypeTweet'
 
@@ -76,7 +77,7 @@ export const Episode = ({
   const description = type === 'show' ? showTitle : episodeTitle
   const subtitle = type === 'show' ? '' : showTitle
 
-  const defaultViewTypes = ['tweet', 'person', 'guest', 'topic']
+  const defaultViewTypes = ['tweet', 'person', 'guest', 'topic', 'document']
 
   const imageType = type === 'youtube' ? 'video' : 'audio'
 
@@ -136,6 +137,7 @@ export const Episode = ({
               verified={verified}
             />
           )}
+          {type === 'document' && <TypeDocument sourceLink={sourceLink || ''} text={text || ''} type={type} />}
         </>
       )}
     </EpisodeWrapper>

src/components/Icons/GlobeIcon.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import React from 'react';
+
+const GlobeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 14 14"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.00261 14C6.03462 14 5.12456 13.8163 4.27241 13.449C3.42026 13.0816 2.67901 12.583 2.04865 11.9533C1.4183 11.3235 0.919269 10.5829 0.551561 9.73159C0.183854 8.88024 0 7.97058 0 7.00261C0 6.03462 0.183679 5.12456 0.551036 4.27241C0.918407 3.42026 1.41698 2.67901 2.04674 2.04865C2.67651 1.4183 3.41706 0.919269 4.26841 0.551562C5.11976 0.183854 6.02942 0 6.99739 0C7.96538 0 8.87544 0.183679 9.72759 0.551036C10.5797 0.918406 11.321 1.41697 11.9514 2.04674C12.5817 2.67651 13.0807 3.41706 13.4484 4.26841C13.8161 5.11976 14 6.02942 14 6.99739C14 7.96538 13.8163 8.87544 13.449 9.72759C13.0816 10.5797 12.583 11.321 11.9533 11.9514C11.3235 12.5817 10.5829 13.0807 9.73159 13.4484C8.88024 13.8161 7.97058 14 7.00261 14ZM6.22222 13.1833V11.6667C5.79444 11.6667 5.42824 11.5144 5.12361 11.2097C4.81898 10.9051 4.66667 10.5389 4.66667 10.1111V9.33333L0.933333 5.6C0.894445 5.83333 0.858796 6.06667 0.826389 6.3C0.793981 6.53333 0.777778 6.76667 0.777778 7C0.777778 8.56852 1.29306 9.94259 2.32361 11.1222C3.35417 12.3019 4.6537 12.9889 6.22222 13.1833ZM11.5889 11.2C11.8481 10.9148 12.0815 10.6069 12.2889 10.2764C12.4963 9.94583 12.6681 9.60231 12.8042 9.24583C12.9403 8.88935 13.044 8.52315 13.1153 8.14722C13.1866 7.7713 13.2222 7.38889 13.2222 7C13.2222 5.72211 12.8715 4.55506 12.17 3.49885C11.4685 2.44264 10.5229 1.68121 9.33333 1.21454V1.55556C9.33333 1.98333 9.18102 2.34954 8.87639 2.65417C8.57176 2.9588 8.20556 3.11111 7.77778 3.11111H6.22222V4.66667C6.22222 4.88704 6.14769 5.07176 5.99861 5.22083C5.84954 5.36991 5.66481 5.44444 5.44444 5.44444H3.88889V7H8.55556C8.77593 7 8.96065 7.07454 9.10972 7.22361C9.2588 7.37269 9.33333 7.55741 9.33333 7.77778V10.1111H10.1111C10.4481 10.1111 10.7528 10.2116 11.025 10.4125C11.2972 10.6134 11.4852 10.8759 11.5889 11.2Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default GlobeIcon;