Improve typecheck (annotation-publish-control, annotation-share-control)

src/sidebar/components/annotation-publish-control.js

@@ -12,11 +12,26 @@ import Menu from './menu';
 import MenuItem from './menu-item';
 import SvgIcon from '../../shared/components/svg-icon';
 
+/**
+ * @typedef {import('../../types/api').Annotation} Annotation
+ * @typedef {import('../../types/config').MergedConfig} MergedConfig
+ */
+
+/**
+ * @typedef AnnotationPublishControlProps
+ * @prop {Annotation} annotation
+ * @prop {boolean} [isDisabled]
+ *  - Should the save button be disabled? Hint: it will be if the annotation has no content
+ * @prop {() => any} onSave - Callback for save button click
+ * @prop {MergedConfig} settings - Injected service
+ */
+
 /**
  * Render a compound control button for publishing (saving) an annotation:
  * - Save the annotation — left side of button
  * - Choose sharing/privacy option - drop-down menu on right side of button
  *
+ * @param {AnnotationPublishControlProps} props
  */
 function AnnotationPublishControl({
   annotation,
@@ -32,6 +47,12 @@ function AnnotationPublishControl({
   const setDefault = useStore(store => store.setDefault);
   const removeAnnotations = useStore(store => store.removeAnnotations);
 
+  if (!group) {
+    // If there is no group, then don't render anything as a missing group
+    // may mean the group is not loaded yet.
+    return null;
+  }
+
   const isPrivate = draft ? draft.isPrivate : !isShared(annotation.permissions);
 
   const publishDestination = isPrivate ? 'Only Me' : group.name;
@@ -114,17 +135,8 @@ function AnnotationPublishControl({
 
 AnnotationPublishControl.propTypes = {
   annotation: propTypes.object.isRequired,
-
-  /**
-   * Should the save button be disabled?
-   * Hint: it will be if the annotation has no content
-   */
   isDisabled: propTypes.bool,
-
-  /** Callback for save button click */
   onSave: propTypes.func.isRequired,
-
-  /** services */
   settings: propTypes.object.isRequired,
 };
 

src/sidebar/components/annotation-share-control.js

@@ -11,8 +11,27 @@ import useElementShouldClose from './hooks/use-element-should-close';
 import ShareLinks from './share-links';
 import SvgIcon from '../../shared/components/svg-icon';
 
+/**
+ * @typedef {import('../../types/api').Annotation} Annotation
+ * @typedef {import('../../types/api').Group} Group
+ */
+
+/**
+ * @typedef AnnotationShareControlProps
+ * @prop {Annotation} annotation - The annotation in question
+ * @prop {Group} [group] -
+ *  Group that the annotation is in. If missing, this component will not render.
+ *  FIXME: Refactor after root cause is addressed.
+ *  See https://github.com/hypothesis/client/issues/1542
+ * @prop {string} shareUri - The URI to view the annotation on its own
+ * @prop {Object} analytics - Injected service
+ * @prop {Object} toastMessenger - Injected service
+ */
+
 /**
  * "Popup"-style component for sharing a single annotation.
+ *
+ * @param {AnnotationShareControlProps} props
  */
 function AnnotationShareControl({
   annotation,
@@ -135,18 +154,9 @@ function AnnotationShareControl({
 }
 
 AnnotationShareControl.propTypes = {
-  /* The annotation in question */
   annotation: propTypes.object.isRequired,
-  /** group that the annotation is in
-   *  If missing, this component will not render
-   *  FIXME: Refactor after root cause is addressed
-   *  See https://github.com/hypothesis/client/issues/1542
-   */
   group: propTypes.object,
-  /** The URI to view the annotation on its own */
   shareUri: propTypes.string.isRequired,
-
-  /* services */
   analytics: propTypes.object.isRequired,
   toastMessenger: propTypes.object.isRequired,
 };

src/sidebar/components/test/annotation-publish-control-test.js

@@ -70,6 +70,12 @@ describe('AnnotationPublishControl', () => {
     $imports.$restore();
   });
 
+  it('should not render if group is missing', () => {
+    fakeStore.getGroup.returns(undefined);
+    const wrapper = createAnnotationPublishControl();
+    assert.isFalse(wrapper.find('.annotation-publish-control').exists());
+  });
+
   describe('theming', () => {
     it('should apply theme styles', () => {
       const fakeStyle = { foo: 'bar' };

src/tsconfig.json

@@ -33,9 +33,7 @@
     // Remove them from this list as they are resolved.
     "sidebar/components/hooks/use-root-thread.js",
     "sidebar/components/annotation-header.js",
-    "sidebar/components/annotation-publish-control.js",
     "sidebar/components/annotation-quote.js",
-    "sidebar/components/annotation-share-control.js",
     "sidebar/components/annotation-share-info.js",
     "sidebar/components/annotation-viewer-content.js",
     "sidebar/components/annotation.js",

src/types/api.js

@@ -118,6 +118,7 @@
  * @prop {string} logo
  * @prop {boolean} isMember
  * @prop {boolean} isScopedToUri
+ * @prop {string} name
  * @prop {boolean} canLeave
  */