Update display of External references where there is no URL (#483)

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.scss

@@ -4,7 +4,7 @@
   font-size: 13px;
 }
 .sectionHead {
-  color: $dark-grey;
+  font-weight: $light;
   font-size: 12px;
   border-bottom: 1px solid $grey;
   margin-bottom: 15px;
@@ -35,11 +35,12 @@
 }
 
 .xrefAccordionButton {
-  color: $black;
+  color: $blue;
   padding: 0px;
   width: auto;
   padding-right: 60px;
   display: inline-block;
+  margin-left: 20px;
 
   &:before,
   &:after {
@@ -62,9 +63,11 @@
   cursor: pointer;
 }
 .transcriptXrefs {
-  margin: 10px 0 20px 20px;
+  margin: 10px 0 20px 0;
 }
 
 .externalReferenceContainer{
   margin-bottom:10px;
+  margin-left: 20px;
 }
+

src/ensembl/src/shared/components/external-link/ExternalLink.scss

 @import 'src/styles/common';
 
-.container {
+.externalLinkContainer {
   display: inline-grid;
-  grid-template-columns:  [icon] 12px 5px [link] auto;
+  grid-template-columns:  [icon] auto [link] auto;
 }
 
 .icon {
@@ -12,11 +12,12 @@
   top: 1px;
   position: relative;
   height: 12px;
+  width: 12px;
 }
 
 .link {
   display: inline-block;
-  grid-column: link;
   position: relative;
   top: -2px;
+  margin-left: 5px;
 }

src/ensembl/src/shared/components/external-link/ExternalLink.test.tsx

@@ -16,7 +16,6 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-
 import faker from 'faker';
 
 import ExternalLink, { ExternalLinkProps } from './ExternalLink';
@@ -31,9 +30,7 @@ const defaultProps: ExternalLinkProps = {
 };
 
 describe('<ExternalLink />', () => {
-  const renderExternalLink = (props: Partial<ExternalLinkProps> = {}) =>
-    render(<ExternalLink {...defaultProps} {...props} />);
-
+  const renderExternalLink = () => render(<ExternalLink {...defaultProps} />);
   it('renders without error', () => {
     const { container } = renderExternalLink();
     expect(() => container).not.toThrow();
@@ -41,11 +38,16 @@ describe('<ExternalLink />', () => {
 
   it('applies the passed in classNames', () => {
     const { container } = renderExternalLink();
-    expect(container.getElementsByClassName('.icon')).toBeTruthy();
+
     expect(
       container
-        .querySelector('.link')
-        ?.classList.contains(defaultProps.classNames?.link as string)
+        .querySelector(`icon-mock`)
+        ?.getAttribute('classname')
+        ?.includes(defaultProps.classNames?.icon as string)
+    ).toBeTruthy();
+
+    expect(
+      container.querySelector(`.link.${defaultProps.classNames?.link}`)
     ).toBeTruthy();
   });
 });

src/ensembl/src/shared/components/external-link/ExternalLink.tsx

@@ -36,7 +36,7 @@ const ExternalLink = (props: ExternalLinkProps) => {
   const linkClass = classNames(styles.link, props.classNames?.link);
 
   return (
-    <span className={styles.container} data-test-id="external link container">
+    <span className={styles.externalLinkContainer}>
       <LinkIcon className={iconClass} />
       <a
         className={linkClass}

src/ensembl/src/shared/components/external-reference/ExternalReference.scss

@@ -2,9 +2,14 @@
 
 .label {
   margin-right: 5px;
+  font-weight: $light;
 }
 
 .xrefText {
   font-weight: $light;
   margin-left: 7px;
 }
+
+.noLink {
+  margin-left: 5px;
+}

src/ensembl/src/shared/components/external-reference/ExternalReference.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import faker from 'faker';
 
 import ExternalReference, { ExternalReferenceProps } from './ExternalReference';
@@ -37,45 +37,57 @@ describe('<ExternalReference />', () => {
     props: Partial<ExternalReferenceProps> = {}
   ) => render(<ExternalReference {...defaultProps} {...props} />);
 
-  let container: any;
-
   beforeEach(() => {
     jest.resetAllMocks();
-    container = renderExternalReference().container;
   });
 
   it('renders without error', () => {
+    const { container } = renderExternalReference();
     expect(() => container).not.toThrow();
   });
 
   it('hides label container div when there is no label', () => {
-    container = renderExternalReference({ label: undefined }).container;
-    expect(container.querySelectorAll('.label')).toHaveLength(0);
+    const { container } = renderExternalReference({ label: undefined });
+
+    expect(container.querySelector('.label')).toBeFalsy();
   });
 
   it('applies the passed in classNames', () => {
+    const { container } = renderExternalReference();
+
     expect(
-      screen
-        .getByTestId('external reference container')
-        .classList.contains(defaultProps.classNames?.container as string)
+      container.querySelector(`.${defaultProps.classNames?.container}`)
     ).toBeTruthy();
 
     expect(
       container
         .querySelector('.label')
-        .classList.contains(defaultProps.classNames?.label)
+        ?.classList.contains(defaultProps.classNames?.label as string)
     ).toBeTruthy();
 
-    const externalLink = screen.getByTestId('external link container');
     expect(
-      externalLink
-        .getElementsByTagName('icon-mock')[0]
-        .getAttribute('classname')
-    ).toMatch(defaultProps.classNames?.icon as string);
+      container
+        .querySelector(`.externalLinkContainer icon-mock`)
+        ?.getAttribute('classname')
+        ?.includes(defaultProps.classNames?.icon as string)
+    ).toBeTruthy();
+
     expect(
-      externalLink
-        .getElementsByTagName('a')[0]
-        .classList.contains(defaultProps.classNames?.link as string)
+      container.querySelector(
+        `.externalLinkContainer .${defaultProps.classNames?.link}`
+      )
     ).toBeTruthy();
   });
+
+  it('does not display ExternalLink component when there is no link', () => {
+    const { container } = renderExternalReference({ to: undefined });
+
+    expect(container.querySelector(`.externalLinkContainer`)).toBeFalsy();
+
+    expect(container.querySelector(`.noLink`)).toBeTruthy();
+
+    expect(container.querySelector(`.noLink`)?.textContent).toBe(
+      defaultProps.linkText
+    );
+  });
 });

src/ensembl/src/shared/components/external-reference/ExternalReference.tsx

@@ -46,6 +46,7 @@ const ExternalReference = (props: ExternalReferenceProps) => {
   return (
     <div {...containerProps} data-test-id="external reference container">
       {!!props.label && <span className={labelClass}>{props.label}</span>}
+
       {props.to ? (
         <ExternalLink
           to={props.to}
@@ -56,7 +57,7 @@ const ExternalReference = (props: ExternalReferenceProps) => {
           }}
         />
       ) : (
-        <span className={styles.xrefText}>{props.linkText}</span>
+        <span className={styles.noLink}>{props.linkText}</span>
       )}
     </div>
   );