Add AnnotationDocument component

Author: acelaya

src/components/AnnotationDocument.tsx

@@ -0,0 +1,39 @@
+import { domainAndTitle } from '../helpers/annotation-metadata';
+import type { Annotation } from '../helpers/annotation-metadata';
+import AnnotationDocumentInfo from './AnnotationDocumentInfo';
+
+export type AnnotationDocumentProps = {
+  annotation: Annotation;
+  pageNumber?: string;
+};
+
+/**
+ * Renders annotation document information, like document title, document URL
+ * and a page number if provided.
+ */
+export default function AnnotationDocument({
+  annotation,
+  pageNumber,
+}: AnnotationDocumentProps) {
+  const documentInfo = domainAndTitle(annotation);
+  const annotationURL = annotation.links?.html || '';
+  const documentLink =
+    annotationURL && documentInfo.titleLink ? documentInfo.titleLink : '';
+
+  return (
+    <span className="flex">
+      {documentInfo.titleText && (
+        <AnnotationDocumentInfo
+          domain={documentInfo.domain}
+          link={documentLink}
+          title={documentInfo.titleText}
+        />
+      )}
+      {pageNumber && (
+        <span className="text-grey-6" data-testid="page-number">
+          {documentInfo.titleText && ', '}p. {pageNumber}
+        </span>
+      )}
+    </span>
+  );
+}

src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as AnnotationDocument } from './AnnotationDocument';
 export { default as AnnotationDocumentInfo } from './AnnotationDocumentInfo';
 export { default as AnnotationGroupInfo } from './AnnotationGroupInfo';
 export { default as AnnotationTimestamps } from './AnnotationTimestamps';

src/components/test/AnnotationDocument-test.js

@@ -0,0 +1,67 @@
+import {
+  checkAccessibility,
+  mockImportedComponents,
+  mount,
+} from '@hypothesis/frontend-testing';
+
+import AnnotationDocument, { $imports } from '../AnnotationDocument';
+
+describe('AnnotationDocument', () => {
+  let fakeAnnotation;
+  let fakeDomainAndTitle;
+
+  beforeEach(() => {
+    fakeAnnotation = {};
+    fakeDomainAndTitle = sinon.stub().returns({
+      titleText: 'This document',
+      titleLink: 'http://www.example.com',
+      domain: 'www.foo.com',
+    });
+
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
+      '../helpers/annotation-metadata': {
+        domainAndTitle: fakeDomainAndTitle,
+      },
+    });
+  });
+
+  function createComponent() {
+    return mount(<AnnotationDocument annotation={fakeAnnotation} />);
+  }
+
+  it('should not render document info if document does not have a title', () => {
+    fakeDomainAndTitle.returns({});
+
+    const wrapper = createComponent();
+    const documentInfo = wrapper.find('AnnotationDocumentInfo');
+
+    assert.isFalse(documentInfo.exists());
+  });
+
+  it('should set document properties as props to `AnnotationDocumentInfo`', () => {
+    const wrapper = createComponent();
+
+    const documentInfo = wrapper.find('AnnotationDocumentInfo');
+
+    assert.isTrue(documentInfo.exists());
+    assert.equal(documentInfo.props().title, 'This document');
+    assert.equal(documentInfo.props().domain, 'www.foo.com');
+  });
+
+  it('should provide document link for document info if annotation has an HTML link/URL', () => {
+    fakeAnnotation.links = { html: 'http://www.whatever' };
+    const wrapper = createComponent();
+
+    const documentInfo = wrapper.find('AnnotationDocumentInfo');
+
+    assert.equal(documentInfo.props().link, 'http://www.example.com');
+  });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility({
+      content: () => createComponent(),
+    }),
+  );
+});

src/helpers/annotation-metadata.ts

@@ -0,0 +1,115 @@
+export type Annotation = {
+  uri: string;
+  document: { title: string };
+  links: {
+    /** A "bouncer" URL that takes the user to see the annotation in context */
+    incontext?: string;
+    /** URL to view the annotation by itself. */
+    html?: string;
+  };
+};
+
+export type DocumentMetadata = {
+  uri: string;
+  domain: string;
+  title: string;
+};
+
+/**
+ * Extract document metadata from an annotation.
+ */
+export function documentMetadata(annotation: Annotation): DocumentMetadata {
+  const uri = annotation.uri;
+
+  let domain;
+  try {
+    domain = new URL(uri).hostname;
+  } catch {
+    // Annotation URI parsing on the backend is very liberal compared to the URL
+    // constructor. There is also some historic invalid data in h (eg [1]).
+    // Hence, we must handle URL parsing failures in the client.
+    //
+    // [1] https://github.com/hypothesis/client/issues/3666
+    domain = '';
+  }
+  if (domain === 'localhost') {
+    domain = '';
+  }
+
+  let title = domain;
+  if (annotation.document && annotation.document.title) {
+    title = annotation.document.title[0];
+  }
+
+  return { uri, domain, title };
+}
+
+export type DomainAndTitle = {
+  domain: string;
+  titleText: string;
+  titleLink: string | null;
+};
+
+/**
+ * Return the domain and title of an annotation for display on an annotation
+ * card.
+ */
+export function domainAndTitle(annotation: Annotation): DomainAndTitle {
+  return {
+    domain: domainTextFromAnnotation(annotation),
+    titleText: titleTextFromAnnotation(annotation),
+    titleLink: titleLinkFromAnnotation(annotation),
+  };
+}
+
+function titleLinkFromAnnotation(annotation: Annotation): string | null {
+  let titleLink: string | null = annotation.uri;
+
+  if (
+    titleLink &&
+    !(titleLink.indexOf('http://') === 0 || titleLink.indexOf('https://') === 0)
+  ) {
+    // We only link to http(s) URLs.
+    titleLink = null;
+  }
+
+  if (annotation.links && annotation.links.incontext) {
+    titleLink = annotation.links.incontext;
+  }
+
+  return titleLink;
+}
+/**
+ * Returns the domain text from an annotation.
+ */
+function domainTextFromAnnotation(annotation: Annotation): string {
+  const document = documentMetadata(annotation);
+
+  let domainText = '';
+  if (document.uri && document.uri.indexOf('file://') === 0 && document.title) {
+    const parts = document.uri.split('/');
+    const filename = parts[parts.length - 1];
+    if (filename) {
+      domainText = filename;
+    }
+  } else if (document.domain && document.domain !== document.title) {
+    domainText = document.domain;
+  }
+
+  return domainText;
+}
+
+/**
+ * Returns the title text from an annotation and crops it to 30 chars
+ * if needed.
+ */
+function titleTextFromAnnotation(annotation: Annotation): string {
+  const document = documentMetadata(annotation);
+
+  let titleText = document.title;
+  if (titleText.length > 30) {
+    titleText = titleText.slice(0, 30) + '…';
+  }
+
+  return titleText;
+}

src/helpers/index.ts

@@ -1,4 +1,6 @@
+export { documentMetadata } from './annotation-metadata';
 export { processAndReplaceMentionElements } from './mentions';
 
+export type { DocumentMetadata, DomainAndTitle } from './annotation-metadata';
 export type { Group, GroupType } from './groups';
 export type { Mention, MentionMode, InvalidMentionContent } from './mentions';