Merge remote-tracking branch 'origin/EDSC-4263-fix-warning' into EDSC…

…-4263
nasa · Nov 15, 2024 · b6d4a58 · b6d4a58
2 parents 55371d7 + b73b17e
commit b6d4a58
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/static/src/js/components/ExternalLink/ExternalLink.jsx b/static/src/js/components/ExternalLink/ExternalLink.jsx
@@ -11,6 +11,7 @@ export const ExternalLink = ({
   children,
   className,
   variant,
+  innerLink,
   ...rest
 }) => {
   const classes = classNames([
@@ -21,6 +22,21 @@ export const ExternalLink = ({
     className
   ])
 
+  // If the link has a parent link this is needed to avoid DOM warnings while keeping styling
+  if (innerLink) {
+    return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+      <span className={classes} {...rest}>
+        {children}
+        <EDSCIcon
+          className="external-link__icon"
+          icon={ArrowLineDiagonal}
+          size="0.875em"
+        />
+      </span>
+    )
+  }
+
   return (
   // eslint-disable-next-line react/jsx-props-no-spreading
     <a className={classes} target="_blank" rel="noopener noreferrer" {...rest}>
@@ -37,13 +53,15 @@ export const ExternalLink = ({
 ExternalLink.defaultProps = {
   children: null,
   className: null,
-  variant: null
+  variant: null,
+  innerLink: false
 }
 
 ExternalLink.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  variant: PropTypes.string
+  variant: PropTypes.string,
+  innerLink: PropTypes.bool
 }
 
 export default ExternalLink
diff --git a/static/src/js/components/ExternalLink/__tests__/ExternalLink.test.js b/static/src/js/components/ExternalLink/__tests__/ExternalLink.test.js
@@ -4,14 +4,34 @@ import { screen, render } from '@testing-library/react'
 
 import ExternalLink from '../ExternalLink'
 
-const setup = () => {
+const setup = (props) => {
+  const { withWrappingLink } = props
+  if (withWrappingLink) {
+    render(
+      <a href="www.example.com">
+        <ExternalLink innerLink href="example.test.com">example.test.com</ExternalLink>
+      </a>
+    )
+
+    return
+  }
+
   render(<ExternalLink href="example.test.com">example.test.com</ExternalLink>)
 }
 
 describe('when a link and child is passed into the component', () => {
   test('the link renders and the external icon appears', () => {
-    setup()
+    setup({ withWrappingLink: false })
     expect(screen.getByRole('link', { name: 'example.test.com' })).toBeInTheDocument()
     expect(screen.getByTestId('edsc-icon')).toBeInTheDocument()
   })
 })
+
+describe('when the link is inside of another link and child is passed into the component', () => {
+  test('the link renders only once and the external icon appears', () => {
+    setup({ withWrappingLink: true })
+    // This will fail without `innerLink` prop because its against DOM rules
+    expect(screen.getAllByRole('link', { name: 'example.test.com' }).length).toBe(1)
+    expect(screen.getByTestId('edsc-icon')).toBeInTheDocument()
+  })
+})
diff --git a/static/src/js/components/Tour/SearchTour.scss b/static/src/js/components/Tour/SearchTour.scss
@@ -196,7 +196,7 @@
   }
 
   &__webinar-inner-link {
-    display: inline-block;
+    display: inline;
     font-size: 1rem;
     font-weight: bold;
     margin-top: 0.625rem;

diff --git a/static/src/js/components/Tour/TourSteps.jsx b/static/src/js/components/Tour/TourSteps.jsx
@@ -628,7 +628,7 @@ const TourSteps = ({
                 Discover and Access Earth Science Data Using Earthdata Search
               </div>
               <p className="search-tour__webinar-inner-link">
-                <ExternalLink>
+                <ExternalLink innerLink>
                   Watch the webinar on YouTube
                 </ExternalLink>
               </p>
@@ -641,7 +641,6 @@ const TourSteps = ({
             <li>
               <ExternalLink
                 href="https://www.earthdata.nasa.gov/learn/earthdata-search"
-                className="search-tour__earthdata-link"
               >
                 Earthdata Search wiki
               </ExternalLink>