Refactor `ShareAnnotationsPanel` to prepare for tabbed dialog

Restructure `ShareAnnotationsPanel` internally to make it possible to
swap in tabbed-dialog import/export features.

src/sidebar/components/ShareAnnotationsPanel.tsx

@@ -6,6 +6,7 @@ import {
   LockIcon,
   Spinner,
 } from '@hypothesis/frontend-shared';
+import { useCallback } from 'preact/hooks';
 
 import { pageSharingLink } from '../helpers/annotation-sharing';
 import { withServices } from '../service-context';
@@ -20,50 +21,34 @@ export type ShareAnnotationPanelProps = {
   toastMessenger: ToastMessengerService;
 };
 
+type SharePanelContentProps = {
+  loading: boolean;
+  shareURI?: string | null;
+  /** Callback for when "copy URL" button is clicked */
+  onCopyShareLink: () => void;
+  groupName?: string;
+  groupType?: string;
+};
+
 /**
- * A panel for sharing the current group's annotations on the current document.
- *
- * Links within this component allow a user to share the set of annotations that
- * are on the current page (as defined by the main frame's URI) and contained
- * within the app's currently-focused group.
+ * Render content for "share" panel or tab
  */
-function ShareAnnotationsPanel({ toastMessenger }: ShareAnnotationPanelProps) {
-  const store = useSidebarStore();
-  const mainFrame = store.mainFrame();
-  const focusedGroup = store.focusedGroup();
-  const groupName = (focusedGroup && focusedGroup.name) || '...';
-  const panelTitle = `Share Annotations in ${groupName}`;
-
-  // To be able to concoct a sharing link, a focused group and frame need to
-  // be available
-  const sharingReady = focusedGroup && mainFrame;
-
-  const shareURI =
-    sharingReady && pageSharingLink(mainFrame.uri, focusedGroup.id);
-
-  const copyShareLink = () => {
-    try {
-      if (shareURI) {
-        copyText(shareURI);
-        toastMessenger.success('Copied share link to clipboard');
-      }
-    } catch (err) {
-      toastMessenger.error('Unable to copy link');
-    }
-  };
-
+function SharePanelContent({
+  groupName,
+  groupType,
+  loading,
+  onCopyShareLink,
+  shareURI,
+}: SharePanelContentProps) {
+  if (loading) {
     return (
-    <SidebarPanel
-      title={panelTitle}
-      panelName="shareGroupAnnotations"
-      variant="custom"
-    >
-      {!sharingReady && (
       <div className="flex flex-row items-center justify-center">
         <Spinner size="md" />
       </div>
-      )}
-      {sharingReady && (
+    );
+  }
+
+  return (
     <div className="text-color-text-light space-y-3">
       {shareURI ? (
         <>
@@ -71,7 +56,7 @@ function ShareAnnotationsPanel({ toastMessenger }: ShareAnnotationPanelProps) {
             className="text-color-text font-medium"
             data-testid="sharing-intro"
           >
-                {focusedGroup!.type === 'private' ? (
+            {groupType === 'private' ? (
               <p>
                 Use this link to share these annotations with other group
                 members:
@@ -90,23 +75,22 @@ function ShareAnnotationsPanel({ toastMessenger }: ShareAnnotationPanelProps) {
               />
               <IconButton
                 icon={CopyIcon}
-                    onClick={copyShareLink}
+                onClick={onCopyShareLink}
                 title="Copy share link"
                 variant="dark"
               />
             </InputGroup>
           </div>
           <p data-testid="sharing-details">
-                {focusedGroup!.type === 'private' ? (
+            {groupType === 'private' ? (
               <span>
-                    Annotations in the private group{' '}
-                    <em>{focusedGroup.name}</em> are only visible to group
-                    members.
+                Annotations in the private group <em>{groupName}</em> are only
+                visible to group members.
               </span>
             ) : (
               <span>
                 Anyone using this link may view the annotations in the group{' '}
-                    <em>{focusedGroup.name}</em>.
+                <em>{groupName}</em>.
               </span>
             )}{' '}
             <span>
@@ -126,7 +110,50 @@ function ShareAnnotationsPanel({ toastMessenger }: ShareAnnotationPanelProps) {
         </p>
       )}
     </div>
-      )}
+  );
+}
+
+/**
+ * A panel for sharing the current group's annotations on the current document.
+ *
+ * Links within this component allow a user to share the set of annotations that
+ * are on the current page (as defined by the main frame's URI) and contained
+ * within the app's currently-focused group.
+ */
+function ShareAnnotationsPanel({ toastMessenger }: ShareAnnotationPanelProps) {
+  const store = useSidebarStore();
+  const mainFrame = store.mainFrame();
+  const focusedGroup = store.focusedGroup();
+  const groupName = (focusedGroup && focusedGroup.name) || '...';
+  const panelTitle = `Share Annotations in ${groupName}`;
+
+  // To be able to concoct a sharing link, a focused group and frame need to
+  // be available
+  const sharingReady = focusedGroup && mainFrame;
+
+  const shareURI =
+    sharingReady && pageSharingLink(mainFrame.uri, focusedGroup.id);
+
+  const copyShareLink = useCallback(() => {
+    try {
+      if (shareURI) {
+        copyText(shareURI);
+        toastMessenger.success('Copied share link to clipboard');
+      }
+    } catch (err) {
+      toastMessenger.error('Unable to copy link');
+    }
+  }, [shareURI, toastMessenger]);
+
+  return (
+    <SidebarPanel title={panelTitle} panelName="shareGroupAnnotations">
+      <SharePanelContent
+        groupName={focusedGroup?.name}
+        groupType={focusedGroup?.type}
+        loading={!sharingReady}
+        onCopyShareLink={copyShareLink}
+        shareURI={shareURI}
+      />
     </SidebarPanel>
   );
 }