Improve typechecking for components

- annotation-user
- annotation-header
- filter-status

src/sidebar/components/annotation-header.js

@@ -12,10 +12,27 @@ import Button from './button';
 import SvgIcon from '../../shared/components/svg-icon';
 import Timestamp from './timestamp';
 
+/**
+ * @typedef {import("../../types/api").Annotation} Annotation
+ */
+
+/**
+ * @typedef AnnotationHeaderProps
+ * @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} [showDocumentInfo] -
+ *   Should document metadata be rendered? Hint: this is enabled for single annotation
+ *   and stream views.
+ * @prop {boolean} threadIsCollapsed - Is this thread currently collapsed?
+ */
+
 /**
  * Render an annotation's header summary, including metadata about its user,
  * sharing status, document and timestamp. It also allows the user to
  * toggle sub-threads/replies in certain cases.
+ *
+ * @param {AnnotationHeaderProps} props
  */
 export default function AnnotationHeader({
   annotation,
@@ -109,19 +126,9 @@ export default function AnnotationHeader({
 }
 
 AnnotationHeader.propTypes = {
-  /* The annotation */
   annotation: propTypes.object.isRequired,
-  /* Whether the annotation is actively being edited */
   isEditing: propTypes.bool,
-  /* How many replies this annotation currently has */
   replyCount: propTypes.number,
-  /**
-   * Should document metadata be rendered? Hint: this is enabled for single-
-   * annotation and stream views
-   */
   showDocumentInfo: propTypes.bool,
-  /**
-   * Is this thread currently collapsed?
-   */
   threadIsCollapsed: propTypes.bool.isRequired,
 };

src/sidebar/components/annotation-user.js

@@ -4,9 +4,25 @@ import propTypes from 'prop-types';
 import { isThirdPartyUser, username } from '../util/account-id';
 import { withServices } from '../util/service-context';
 
+/**
+ * @typedef {import("../../types/api").Annotation} Annotation
+ * @typedef {import('../../types/config').MergedConfig} MergedConfig
+ * @typedef {import('../services/service-url').ServiceUrlGetter} ServiceUrlGetter
+ */
+
+/**
+ * @typedef AnnotationUserProps
+ * @prop {Annotation} annotation - The annotation whose user is relevant
+ * @prop {Object} features - Injected service
+ * @prop {ServiceUrlGetter} serviceUrl - Injected service
+ * @prop {MergedConfig} settings - Injected service
+ */
+
 /**
  * Display information about an annotation's user. Link to the user's
  * activity if it is a first-party user or `settings.usernameUrl` is present.
+ *
+ * @param {AnnotationUserProps} props
  */
 function AnnotationUser({ annotation, features, serviceUrl, settings }) {
   const user = annotation.user;
@@ -53,10 +69,7 @@ function AnnotationUser({ annotation, features, serviceUrl, settings }) {
 }
 
 AnnotationUser.propTypes = {
-  /** The annotation whose user is relevant */
   annotation: propTypes.object.isRequired,
-
-  /** services */
   features: propTypes.object.isRequired,
   serviceUrl: propTypes.func.isRequired,
   settings: propTypes.object.isRequired,

src/sidebar/components/filter-status.js

@@ -125,9 +125,12 @@ export default function FilterStatus() {
   const buttonProps = {
     buttonText,
     onClick: () => clearSelection(),
-    icon: filterMode !== 'focusOnly' ? 'cancel' : null,
   };
 
+  if (filterMode !== 'focusOnly') {
+    buttonProps.icon = 'cancel';
+  }
+
   // In most cases, the action button will clear the current (filter) selection,
   // but when in 'focusOnly' mode, it will toggle activation of the focus
   if (filterMode === 'focusOnly' && !filterState.forcedVisibleCount) {

src/sidebar/store/modules/selection.js

@@ -628,6 +628,7 @@ const threadState = createSelector(
  * // Selectors
  * @prop {() => Object<string,boolean>} expandedMap
  * @prop {() => string|null} filterQuery
+ * @prop {() => FilterState} filterState
  * @prop {() => boolean} focusModeActive
  * @prop {() => boolean} focusModeConfigured
  * @prop {() => string|null} focusModeUserFilter

src/tsconfig.json

@@ -25,11 +25,9 @@
     // Files in `src/sidebar/components` that may still have errors.
     // Remove them from this list as they are resolved.
     "sidebar/components/hooks/use-root-thread.js",
-    "sidebar/components/annotation-header.js",
     "sidebar/components/annotation-share-info.js",
     "sidebar/components/annotation-viewer-content.js",
     "sidebar/components/annotation.js",
-    "sidebar/components/filter-status.js",
     "sidebar/components/hypothesis-app.js",
     "sidebar/components/share-annotations-panel.js",
     "sidebar/components/sidebar-content-error.js",

src/types/api.js

@@ -74,6 +74,9 @@
  *   @prop {string} [links.incontext]
  *   @prop {string} [links.html]
  *
+ * @prop {Object} [user_info]
+ *   @prop {string|null} user_info.display_name
+ *
  * // Properties not present on API objects, but added by utilities in the client.
  * @prop {boolean} [$highlight]
  * @prop {boolean} [$orphan]