fix(highlight): Remove unnecessary Highlight Creator (#608)

Author: Mingze

src/highlight/HighlightAnnotations.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import HighlightCanvas from './HighlightCanvas';
-import HighlightCreator from './HighlightCreator';
 import HighlightList from './HighlightList';
 import HighlightSvg from './HighlightSvg';
 import HighlightTarget from './HighlightTarget';
@@ -107,10 +106,7 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
             {/* Layer 1: Saved annotations */}
             <HighlightList activeId={activeAnnotationId} annotations={annotations} onSelect={handleAnnotationActive} />
 
-            {/* Layer 2: Drawn (unsaved) incomplete annotation target, if any */}
-            {canCreate && <HighlightCreator className="ba-HighlightAnnotations-creator" />}
-
-            {/* Layer 3: Staged (unsaved) highlight target, if any */}
+            {/* Layer 2: Staged (unsaved) highlight target, if any */}
             {canCreate && staged && (
                 <div className="ba-HighlightAnnotations-target">
                     <HighlightCanvas shapes={staged.shapes} />
@@ -120,14 +116,14 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
                 </div>
             )}
 
-            {/* Layer 4a: Annotations promoter to promote selection to staged */}
+            {/* Layer 3a: Annotations promoter to promote selection to staged */}
             {!isCreating && selection && !selection.hasError && (
                 <div className="ba-HighlightAnnotations-popup">
                     <PopupHighlight onClick={handlePromote} shape={getBoundingRect(selection.rects)} />
                 </div>
             )}
 
-            {/* Layer 4b: Highlight error popup */}
+            {/* Layer 3b: Highlight error popup */}
             {selection && selection.hasError && (
                 <div className="ba-HighlightAnnotations-popup">
                     <PopupHighlightError shape={getBoundingRect(selection.rects)} />

src/highlight/HighlightCreator.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { ReactWrapper, mount } from 'enzyme';
 import HighlightAnnotations from '../HighlightAnnotations';
 import HighlightCanvas from '../HighlightCanvas';
-import HighlightCreator from '../HighlightCreator';
 import HighlightList from '../HighlightList';
 import HighlightSvg from '../HighlightSvg';
 import PopupHighlight from '../../components/Popups/PopupHighlight';
@@ -49,19 +48,16 @@ describe('HighlightAnnotations', () => {
     const getWrapper = (props = {}): ReactWrapper => mount(<HighlightAnnotations {...defaults} {...props} />);
 
     describe('render()', () => {
-        test('should render a HighlightCreator if in creation mode', () => {
+        test('should render a HighlightList if in creation mode', () => {
             const wrapper = getWrapper({ isCreating: true });
-            const creator = wrapper.find(HighlightCreator);
 
             expect(wrapper.find(HighlightList).exists()).toBe(true);
-            expect(creator.hasClass('ba-HighlightAnnotations-creator')).toBe(true);
         });
 
         test('should not render creation components if not in creation mode', () => {
             const wrapper = getWrapper({ isCreating: false });
 
             expect(wrapper.find(HighlightList).exists()).toBe(true);
-            expect(wrapper.exists(HighlightCreator)).toBe(false);
             expect(wrapper.exists(HighlightCanvas)).toBe(false);
             expect(wrapper.exists(HighlightSvg)).toBe(false);
             expect(wrapper.exists(PopupReply)).toBe(false);