Rename `bucketBarContainer` config to `bucketContainerSelector`

We have settled on this for the moment for consistency with
`externalContainerSelector`, although the "Selector" suffix is a bit verbose,
and this could be a problem if we want to support specifying an HTML element
directly via JS config, rather than a selector.

src/annotator/config/index.ts

@@ -41,7 +41,7 @@ function configurationKeys(context: Context): string[] {
       'appType',
       'annotations',
       'branding',
-      'bucketBarContainer',
+      'bucketContainerSelector',
       'enableExperimentalNewNoteButton',
       'externalContainerSelector',
       'focus',
@@ -107,7 +107,7 @@ const configDefinitions: ConfigDefinitionMap = {
     allowInBrowserExt: false,
     getValue: getHostPageSetting,
   },
-  bucketBarContainer: {
+  bucketContainerSelector: {
     defaultValue: null,
     allowInBrowserExt: false,
     getValue: getHostPageSetting,

src/annotator/config/test/index-test.js

@@ -77,7 +77,7 @@ describe('annotator/config/index', () => {
             appType: 'fakeValue',
             annotations: 'fakeValue',
             branding: null,
-            bucketBarContainer: null,
+            bucketContainerSelector: null,
             clientUrl: 'fakeValue',
             contentInfoBanner: null,
             enableExperimentalNewNoteButton: null,
@@ -111,7 +111,7 @@ describe('annotator/config/index', () => {
             appType: 'fakeValue',
             annotations: 'fakeValue',
             branding: 'fakeValue',
-            bucketBarContainer: 'fakeValue',
+            bucketContainerSelector: 'fakeValue',
             clientUrl: 'fakeValue',
             contentInfoBanner: 'fakeValue',
             enableExperimentalNewNoteButton: 'fakeValue',
@@ -169,7 +169,7 @@ describe('annotator/config/index', () => {
         appType: null,
         annotations: null,
         branding: null,
-        bucketBarContainer: null,
+        bucketContainerSelector: null,
         clientUrl: null,
         contentInfoBanner: null,
         enableExperimentalNewNoteButton: null,
@@ -235,7 +235,7 @@ describe('annotator/config/index', () => {
           'appType',
           'annotations',
           'branding',
-          'bucketBarContainer',
+          'bucketContainerSelector',
           'enableExperimentalNewNoteButton',
           'externalContainerSelector',
           'focus',

src/annotator/sidebar.tsx

@@ -45,7 +45,7 @@ export type SidebarConfig = { sidebarAppUrl: string } & Record<string, unknown>;
  */
 export type SidebarContainerConfig = {
   /** CSS selector for the container of the bucket bar. */
-  bucketBarContainer?: string;
+  bucketContainerSelector?: string;
 
   /**
    * Details of the annotation service the client should connect to.
@@ -173,13 +173,13 @@ export class Sidebar implements Destroyable {
         this.iframeContainer.classList.add('theme-clean');
       } else {
         let bucketBarContainer: HTMLElement | undefined;
-        if (config.bucketBarContainer) {
+        if (config.bucketContainerSelector) {
           bucketBarContainer = document.querySelector(
-            config.bucketBarContainer
+            config.bucketContainerSelector
           ) as HTMLElement | undefined;
           if (!bucketBarContainer) {
             console.warn(
-              `Custom bucket bar container "${config.bucketBarContainer}" not found`
+              `Custom bucket container "${config.bucketContainerSelector}" not found`
             );
           }
         }

src/annotator/test/sidebar-test.js

@@ -1073,14 +1073,14 @@ describe('Sidebar', () => {
       assert.isNull(sidebar.bucketBar);
     });
 
-    it('creates bucket bar in specified container if `bucketBarContainer` config is supplied', () => {
+    it('creates bucket bar in specified container if `bucketContainerSelector` config is supplied', () => {
       const bucketBarContainer = document.createElement('div');
       bucketBarContainer.id = 'bucket-bar-container';
       document.body.append(bucketBarContainer);
 
       try {
         const sidebar = createSidebar({
-          bucketBarContainer: '#bucket-bar-container',
+          bucketContainerSelector: '#bucket-bar-container',
         });
         assert.ok(sidebar.bucketBar);
         assert.calledWith(FakeBucketBar, bucketBarContainer, sinon.match.any);
@@ -1089,15 +1089,15 @@ describe('Sidebar', () => {
       }
     });
 
-    it('warns if `bucketBarContainer` config is supplied but invalid', () => {
+    it('warns if `bucketContainerSelector` config is supplied but invalid', () => {
       sinon.stub(console, 'warn');
       try {
         createSidebar({
-          bucketBarContainer: '#invalid-selector',
+          bucketContainerSelector: '#invalid-selector',
         });
         assert.calledWith(
           console.warn,
-          `Custom bucket bar container "#invalid-selector" not found`
+          `Custom bucket container "#invalid-selector" not found`
         );
       } finally {
         console.warn.restore();