Replace ui-constants module with sidebar typedefs

Author: lyzadanger

src/sidebar/components/AnnotationActionBar.js

@@ -1,7 +1,6 @@
 import { createElement } from 'preact';
 import propTypes from 'prop-types';
 
-import uiConstants from '../ui-constants';
 import { useStoreProxy } from '../store/use-store';
 import {
   sharingEnabled,
@@ -84,7 +83,7 @@ function AnnotationActionBar({
 
   const onReplyClick = () => {
     if (!isLoggedIn) {
-      store.openSidebarPanel(uiConstants.PANEL_LOGIN_PROMPT);
+      store.openSidebarPanel('loginPrompt');
       return;
     }
     onReply();

src/sidebar/components/HelpPanel.js

@@ -4,7 +4,6 @@ import { useCallback, useMemo, useState } from 'preact/hooks';
 import propTypes from 'prop-types';
 
 import { useStoreProxy } from '../store/use-store';
-import uiConstants from '../ui-constants';
 import { withServices } from '../service-context';
 import VersionData from '../helpers/version-data';
 
@@ -110,7 +109,7 @@ function HelpPanel({ auth, session }) {
   return (
     <SidebarPanel
       title="Help"
-      panelName={uiConstants.PANEL_HELP}
+      panelName="help"
       onActiveChanged={onActiveChanged}
     >
       <div className="HelpPanel__content u-vertical-rhythm">

src/sidebar/components/HypothesisApp.js

@@ -6,7 +6,6 @@ import propTypes from 'prop-types';
 import bridgeEvents from '../../shared/bridge-events';
 import serviceConfig from '../config/service-config';
 import { useStoreProxy } from '../store/use-store';
-import uiConstants from '../ui-constants';
 import { parseAccountID } from '../helpers/account-id';
 import { shouldAutoDisplayTutorial } from '../helpers/session';
 import { applyTheme } from '../helpers/theme';
@@ -101,7 +100,7 @@ function HypothesisApp({
 
   useEffect(() => {
     if (shouldAutoDisplayTutorial(isSidebar, profile, settings)) {
-      store.openSidebarPanel(uiConstants.PANEL_HELP);
+      store.openSidebarPanel('help');
     }
   }, [isSidebar, profile, settings, store]);
 
@@ -115,7 +114,7 @@ function HypothesisApp({
     try {
       await auth.login();
 
-      store.closeSidebarPanel(uiConstants.PANEL_LOGIN_PROMPT);
+      store.closeSidebarPanel('loginPrompt');
       store.clearGroups();
       session.reload();
     } catch (err) {

src/sidebar/components/LoginPromptPanel.js

@@ -2,7 +2,6 @@ import { createElement } from 'preact';
 import propTypes from 'prop-types';
 
 import { useStoreProxy } from '../store/use-store';
-import uiConstants from '../ui-constants';
 
 import Button from './Button';
 import SidebarPanel from './SidebarPanel';
@@ -28,7 +27,7 @@ export default function LoginPromptPanel({ onLogin, onSignUp }) {
     <SidebarPanel
       icon="restricted"
       title="Login needed"
-      panelName={uiConstants.PANEL_LOGIN_PROMPT}
+      panelName="loginPrompt"
     >
       <p>Please log in to create annotations or highlights.</p>
       <div className="SidebarPanel__actions">

src/sidebar/components/NewNoteBtn.js

@@ -1,7 +1,6 @@
 import { createElement } from 'preact';
 import propTypes from 'prop-types';
 
-import uiConstants from '../ui-constants';
 import { useStoreProxy } from '../store/use-store';
 import { withServices } from '../service-context';
 import { applyTheme } from '../helpers/theme';
@@ -25,7 +24,7 @@ function NewNoteButton({ annotationsService, settings }) {
 
   const onNewNoteBtnClick = function () {
     if (!isLoggedIn) {
-      store.openSidebarPanel(uiConstants.PANEL_LOGIN_PROMPT);
+      store.openSidebarPanel('loginPrompt');
       return;
     }
     if (!topLevelFrame) {

src/sidebar/components/SelectionTabs.js

@@ -4,13 +4,13 @@ import { createElement } from 'preact';
 import propTypes from 'prop-types';
 
 import { useStoreProxy } from '../store/use-store';
-import uiConstants from '../ui-constants';
 import { withServices } from '../service-context';
 
 import NewNoteBtn from './NewNoteBtn';
 
 /**
  * @typedef {import('../../types/config').MergedConfig} MergedConfig
+ * @typedef {import('../../types/sidebar').TabName} TabName
  */
 
 /**
@@ -98,54 +98,57 @@ function SelectionTabs({ isLoading, settings }) {
   const orphanCount = store.orphanCount();
   const isWaitingToAnchorAnnotations = store.isWaitingToAnchorAnnotations();
 
+  /**
+   * @param {TabName} tabId
+   */
   const selectTab = tabId => {
     store.clearSelection();
     store.selectTab(tabId);
   };
 
   const showAnnotationsUnavailableMessage =
-    selectedTab === uiConstants.TAB_ANNOTATIONS &&
+    selectedTab === 'annotation' &&
     annotationCount === 0 &&
     !isWaitingToAnchorAnnotations;
 
-  const showNotesUnavailableMessage =
-    selectedTab === uiConstants.TAB_NOTES && noteCount === 0;
+  const showNotesUnavailableMessage = selectedTab === 'note' && noteCount === 0;
 
   return (
     <div className="SelectionTabs-container">
       <div className="SelectionTabs" role="tablist">
         <Tab
           count={annotationCount}
           isWaitingToAnchor={isWaitingToAnchorAnnotations}
-          isSelected={selectedTab === uiConstants.TAB_ANNOTATIONS}
+          isSelected={selectedTab === 'annotation'}
           label="Annotations"
-          onSelect={() => selectTab(uiConstants.TAB_ANNOTATIONS)}
+          onSelect={() => selectTab('annotation')}
         >
           Annotations
         </Tab>
         <Tab
           count={noteCount}
           isWaitingToAnchor={isWaitingToAnchorAnnotations}
-          isSelected={selectedTab === uiConstants.TAB_NOTES}
+          isSelected={selectedTab === 'note'}
           label="Page notes"
-          onSelect={() => selectTab(uiConstants.TAB_NOTES)}
+          onSelect={() => selectTab('note')}
         >
           Page Notes
         </Tab>
         {orphanCount > 0 && (
           <Tab
             count={orphanCount}
             isWaitingToAnchor={isWaitingToAnchorAnnotations}
-            isSelected={selectedTab === uiConstants.TAB_ORPHANS}
+            isSelected={selectedTab === 'orphan'}
             label="Orphans"
-            onSelect={() => selectTab(uiConstants.TAB_ORPHANS)}
+            onSelect={() => selectTab('orphan')}
           >
             Orphans
           </Tab>
         )}
       </div>
-      {selectedTab === uiConstants.TAB_NOTES &&
-        settings.enableExperimentalNewNoteButton && <NewNoteBtn />}
+      {selectedTab === 'note' && settings.enableExperimentalNewNoteButton && (
+        <NewNoteBtn />
+      )}
       {!isLoading && showNotesUnavailableMessage && (
         <div className="SelectionTabs__message">
           There are no page notes in this group.

src/sidebar/components/ShareAnnotationsPanel.js

@@ -3,7 +3,6 @@ import { SvgIcon } from '@hypothesis/frontend-shared';
 import propTypes from 'prop-types';
 
 import { useStoreProxy } from '../store/use-store';
-import uiConstants from '../ui-constants';
 import { pageSharingLink } from '../helpers/annotation-sharing';
 import { copyText } from '../util/copy-to-clipboard';
 import { withServices } from '../service-context';
@@ -54,10 +53,7 @@ function ShareAnnotationsPanel({ analytics, toastMessenger }) {
   };
 
   return (
-    <SidebarPanel
-      title={panelTitle}
-      panelName={uiConstants.PANEL_SHARE_ANNOTATIONS}
-    >
+    <SidebarPanel title={panelTitle} panelName="shareGroupAnnotations">
       {!sharingReady && (
         <div className="ShareAnnotationsPanel__spinner">
           <Spinner />

src/sidebar/components/SidebarPanel.js

@@ -9,11 +9,15 @@ import { useStoreProxy } from '../store/use-store';
 import Button from './Button';
 import Slider from './Slider';
 
+/**
+ * @typedef {import("../../types/sidebar").PanelName} PanelName
+ */
+
 /**
  * @typedef SidebarPanelProps
  * @prop {Object} [children]
  * @prop {string} [icon] - An optional icon name for display next to the panel's title
- * @prop {string} panelName -
+ * @prop {PanelName} panelName -
  *   A string identifying this panel. Only one `panelName` may be active at any time.
  *   Multiple panels with the same `panelName` would be "in sync", opening and closing together.
  * @prop {string} title - The panel's title: rendered in its containing visual "frame"

src/sidebar/components/TopBar.js

@@ -4,7 +4,6 @@ import propTypes from 'prop-types';
 import bridgeEvents from '../../shared/bridge-events';
 import serviceConfig from '../config/service-config';
 import { useStoreProxy } from '../store/use-store';
-import uiConstants from '../ui-constants';
 import isThirdPartyService from '../helpers/is-third-party-service';
 import { withServices } from '../service-context';
 import { applyTheme } from '../helpers/theme';
@@ -58,12 +57,12 @@ function TopBar({
   const applyPendingUpdates = () => streamer.applyPendingUpdates();
 
   const toggleSharePanel = () => {
-    store.toggleSidebarPanel(uiConstants.PANEL_SHARE_ANNOTATIONS);
+    store.toggleSidebarPanel('shareGroupAnnotations');
   };
 
-  const isHelpPanelOpen = store.isSidebarPanelOpen(uiConstants.PANEL_HELP);
+  const isHelpPanelOpen = store.isSidebarPanelOpen('help');
   const isAnnotationsPanelOpen = store.isSidebarPanelOpen(
-    uiConstants.PANEL_SHARE_ANNOTATIONS
+    'shareGroupAnnotations'
   );
 
   /**
@@ -75,7 +74,7 @@ function TopBar({
     if (service && service.onHelpRequestProvided) {
       bridge.call(bridgeEvents.HELP_REQUESTED);
     } else {
-      store.toggleSidebarPanel(uiConstants.PANEL_HELP);
+      store.toggleSidebarPanel('help');
     }
   };
 

src/sidebar/components/test/AnnotationActionBar-test.js

@@ -5,7 +5,6 @@ import { act } from 'preact/test-utils';
 import AnnotationActionBar from '../AnnotationActionBar';
 import { $imports } from '../AnnotationActionBar';
 import * as fixtures from '../../test/annotation-fixtures';
-import uiConstants from '../../ui-constants';
 
 import { checkAccessibility } from '../../../test-util/accessibility';
 import mockImportedComponents from '../../../test-util/mock-imported-components';
@@ -210,10 +209,7 @@ describe('AnnotationActionBar', () => {
           button.props().onClick();
         });
 
-        assert.calledWith(
-          fakeStore.openSidebarPanel,
-          uiConstants.PANEL_LOGIN_PROMPT
-        );
+        assert.calledWith(fakeStore.openSidebarPanel, 'loginPrompt');
         assert.notCalled(fakeOnReply);
       });