Commit 651e8157 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Convert `AnnotationHeader` to TS

Simplify internal components (remove `HeaderRow` local component).
parent 50a70015
...@@ -5,6 +5,9 @@ import { ...@@ -5,6 +5,9 @@ import {
} from '@hypothesis/frontend-shared/lib/next'; } from '@hypothesis/frontend-shared/lib/next';
import { useMemo } from 'preact/hooks'; import { useMemo } from 'preact/hooks';
import type { Annotation } from '../../../types/api';
import type { SidebarSettings } from '../../../types/config';
import { withServices } from '../../service-context'; import { withServices } from '../../service-context';
import { useSidebarStore } from '../../store'; import { useSidebarStore } from '../../store';
import { import {
...@@ -24,29 +27,15 @@ import AnnotationShareInfo from './AnnotationShareInfo'; ...@@ -24,29 +27,15 @@ import AnnotationShareInfo from './AnnotationShareInfo';
import AnnotationTimestamps from './AnnotationTimestamps'; import AnnotationTimestamps from './AnnotationTimestamps';
import AnnotationUser from './AnnotationUser'; import AnnotationUser from './AnnotationUser';
/** export type AnnotationHeaderProps = {
* @typedef {import("../../../types/api").Annotation} Annotation annotation: Annotation;
* @typedef {import('../../../types/config').SidebarSettings} SidebarSettings isEditing?: boolean;
*/ replyCount: number;
threadIsCollapsed: boolean;
/** @param {{ children: import("preact").ComponentChildren}} props */
function HeaderRow({ children }) {
return (
<div className="flex gap-x-1 items-baseline flex-wrap-reverse">
{children}
</div>
);
}
/** // injected
* @typedef AnnotationHeaderProps settings: SidebarSettings;
* @prop {Annotation} annotation };
* @prop {boolean} [isEditing] - Whether the annotation is actively being edited
* @prop {number} replyCount - How many replies this annotation currently has
* @prop {boolean} threadIsCollapsed - Is this thread currently collapsed?
* @prop {SidebarSettings} settings - Injected
*
*/
/** /**
* Render an annotation's header summary, including metadata about its user, * Render an annotation's header summary, including metadata about its user,
...@@ -61,7 +50,7 @@ function AnnotationHeader({ ...@@ -61,7 +50,7 @@ function AnnotationHeader({
replyCount, replyCount,
threadIsCollapsed, threadIsCollapsed,
settings, settings,
}) { }: AnnotationHeaderProps) {
const store = useSidebarStore(); const store = useSidebarStore();
const defaultAuthority = store.defaultAuthority(); const defaultAuthority = store.defaultAuthority();
...@@ -112,13 +101,13 @@ function AnnotationHeader({ ...@@ -112,13 +101,13 @@ function AnnotationHeader({
const onReplyCountClick = () => const onReplyCountClick = () =>
// If an annotation has replies it must have been saved and therefore have // If an annotation has replies it must have been saved and therefore have
// an ID. // an ID.
store.setExpanded(/** @type {string} */ (annotation.id), true); store.setExpanded(annotation.id!, true);
const group = store.getGroup(annotation.group); const group = store.getGroup(annotation.group);
return ( return (
<header> <header>
<HeaderRow> <div className="flex gap-x-1 items-baseline flex-wrap-reverse">
{isPrivate(annotation.permissions) && !isEditing && ( {isPrivate(annotation.permissions) && !isEditing && (
<LockIcon <LockIcon
className="text-tiny w-em h-em" className="text-tiny w-em h-em"
...@@ -147,10 +136,13 @@ function AnnotationHeader({ ...@@ -147,10 +136,13 @@ function AnnotationHeader({
/> />
</div> </div>
)} )}
</HeaderRow> </div>
{!isReply(annotation) && ( {!isReply(annotation) && (
<HeaderRow> <div
className="flex gap-x-1 items-baseline flex-wrap-reverse"
data-testid="extended-header-info"
>
{group && ( {group && (
<AnnotationShareInfo <AnnotationShareInfo
group={group} group={group}
...@@ -170,7 +162,7 @@ function AnnotationHeader({ ...@@ -170,7 +162,7 @@ function AnnotationHeader({
title={documentInfo.titleText} title={documentInfo.titleText}
/> />
)} )}
</HeaderRow> </div>
)} )}
</header> </header>
); );
......
...@@ -284,8 +284,10 @@ describe('AnnotationHeader', () => { ...@@ -284,8 +284,10 @@ describe('AnnotationHeader', () => {
fakeIsReply.returns(false); fakeIsReply.returns(false);
const wrapper = createAnnotationHeader(); const wrapper = createAnnotationHeader();
// Extended header information is rendered in a second (flex) row assert.equal(
assert.equal(wrapper.find('HeaderRow').length, 2); wrapper.find('[data-testid="extended-header-info"]').length,
1
);
}); });
it('should not render extended header information if annotation is reply', () => { it('should not render extended header information if annotation is reply', () => {
...@@ -294,7 +296,10 @@ describe('AnnotationHeader', () => { ...@@ -294,7 +296,10 @@ describe('AnnotationHeader', () => {
showDocumentInfo: true, showDocumentInfo: true,
}); });
assert.equal(wrapper.find('HeaderRow').length, 1); assert.equal(
wrapper.find('[data-testid="extended-header-info"]').length,
0
);
}); });
describe('annotation is-highlight icon', () => { describe('annotation is-highlight icon', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment