@atlaskit/editor-plugin-table 0.0.7 → 0.0.9

package/src/plugins/table/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -33,9 +33,9 @@ jest.mock('@atlaskit/editor-common/ui', () => ({
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { updateStickyState } from '../../../../pm-plugins/sticky-headers/commands';
 import { TableCssClassName } from '../../../../types';
-import { mount } from 'enzyme';
 import TableComponent from '../../../../nodeviews/TableComponent';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import {
   stickyRowOffsetTop,
   tableScrollbarOffset,
@@ -388,13 +388,13 @@ describe('TableRowNodeView', () => {
       return scrollContainer;
     }
 
-    function mountTableComponent({
+    function renderTableComponent({
       disableContentDomMock,
     }: {
       disableContentDomMock?: true;
     } = {}) {
       const getNode = () => editorView.state.doc.firstChild;
-      return mount(
+      return render(
         <TableComponent
           view={editorView}
           eventDispatcher={eventDispatcher}
@@ -428,28 +428,21 @@ describe('TableRowNodeView', () => {
     });
 
     it('sentinel elements are rendered inside table component', () => {
-      const tableComponent = mountTableComponent();
-      // rafStub.flush();
-      const sentinelWrapperTop = tableComponent.find(
-        `.${TableCssClassName.TABLE_STICKY_SENTINEL_TOP}`,
-      );
-      const sentinelWrapperBottom = tableComponent.find(
-        `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-      );
-      expect(sentinelWrapperTop).toHaveLength(1);
-      expect(sentinelWrapperBottom).toHaveLength(1);
+      renderTableComponent();
+      const sentinelTop = screen.getByTestId('sticky-sentinel-top');
+      const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
+
+      expect(sentinelTop).toBeTruthy();
+      expect(sentinelBottom).toBeTruthy();
     });
 
     describe('updates sticky header state', () => {
       it('top sentinel does nothing if the rootBounds has height 0', () => {
-        const tableComponent = mountTableComponent();
-        const sentinelWrapperTop = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_TOP}`,
-        );
-        const sentinelTop = sentinelWrapperTop.getDOMNode() as HTMLElement;
+        renderTableComponent();
+        const sentinelTop = screen.getByTestId('sticky-sentinel-top');
 
         triggerElementIntersect({
-          target: sentinelTop,
+          target: sentinelTop as HTMLElement,
           isIntersecting: false,
           rootBounds: { bottom: 0, top: 0, height: 0 },
           boundingClientRect: { bottom: 0, top: 0 },
@@ -459,13 +452,10 @@ describe('TableRowNodeView', () => {
       });
 
       it('bottom sentinel does nothing if the rootBounds has height 0', () => {
-        const tableComponent = mountTableComponent();
-        const sentinelWrapperBottom = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-        );
-        const sentinelBottom = sentinelWrapperBottom.getDOMNode() as HTMLElement;
+        renderTableComponent();
+        const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
         triggerElementIntersect({
-          target: sentinelBottom,
+          target: sentinelBottom as HTMLElement,
           isIntersecting: false,
           rootBounds: { bottom: 0, top: 0, height: 0 },
           boundingClientRect: { bottom: 0, top: 0 },
@@ -474,12 +464,9 @@ describe('TableRowNodeView', () => {
         expect(updateStickyState).not.toHaveBeenCalled();
       });
 
-      it('when top sentinel leaves scroll area', () => {
-        const tableComponent = mountTableComponent();
-        const sentinelWrapperTop = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_TOP}`,
-        );
-        const sentinelTop = sentinelWrapperTop.getDOMNode() as HTMLElement;
+      it('updates sticky header when top of sticky header sentinel leaves scroll area', () => {
+        renderTableComponent();
+        const sentinelTop = screen.getByTestId('sticky-sentinel-top');
 
         triggerElementIntersect({
           target: sentinelTop,
@@ -512,12 +499,9 @@ describe('TableRowNodeView', () => {
         );
       });
 
-      it('when bottom sentinel enters or leaves scroll area', () => {
-        const tableComponent = mountTableComponent();
-        const sentinelWrapperBottom = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-        );
-        const sentinelBottom = sentinelWrapperBottom.getDOMNode() as HTMLElement;
+      it('updates sticky header when bottom of sticky header sentinel enters or leaves scroll area', () => {
+        renderTableComponent();
+        const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
 
         triggerElementIntersect({
           target: sentinelBottom,
@@ -560,13 +544,10 @@ describe('TableRowNodeView', () => {
       (_, contentRectSupported: boolean) => {
         const { tableWrapper } = getTableElements(tableRowDom);
         // disabled due to editorView dom being cleared by use of contentDom mocks
-        const tableComponent = mountTableComponent({
+        renderTableComponent({
           disableContentDomMock: true,
         });
-        const sentinelWrapperBottom = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-        );
-        const sentinelBottom = sentinelWrapperBottom.getDOMNode() as HTMLElement;
+        const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
         tableWrapper?.appendChild(sentinelBottom);
         rafStub.flush();
 
@@ -584,13 +565,10 @@ describe('TableRowNodeView', () => {
     it('marks sentinels as unobserved when isHeaderRowEnabled is set to false', () => {
       const { tableWrapper } = getTableElements(tableRowDom);
       // disabled due to editorView dom being cleared by use of contentDom mocks
-      const tableComponent = mountTableComponent({
+      renderTableComponent({
         disableContentDomMock: true,
       });
-      const sentinelWrapperBottom = tableComponent.find(
-        `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-      );
-      const sentinelBottom = sentinelWrapperBottom.getDOMNode() as HTMLElement;
+      const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
       tableWrapper?.appendChild(sentinelBottom);
       rafStub.flush();
       expect(sentinelBottom.dataset.isObserved).toBeDefined();

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -394,7 +394,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         data-layout={node.attrs.layout}
       >
         {stickyHeadersOptimization && (
-          <div className={ClassName.TABLE_STICKY_SENTINEL_TOP} />
+          <div
+            className={ClassName.TABLE_STICKY_SENTINEL_TOP}
+            data-testid="sticky-sentinel-top"
+          />
         )}
         {allowControls &&
           (!isLoading || initialRenderOptimization) &&
@@ -465,7 +468,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           </div>
         )}
         {stickyHeadersOptimization && (
-          <div className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM} />
+          <div
+            className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM}
+            data-testid="sticky-sentinel-bottom"
+          />
         )}
       </div>
     );

package/src/plugins/table/nodeviews/table.tsx

@@ -72,6 +72,10 @@ export default class TableView extends ReactNodeView<Props> {
       props.portalProviderAPI,
       props.eventDispatcher,
       props,
+      undefined,
+      undefined,
+      undefined,
+      props.hasIntlContext,
     );
     this.getPos = props.getPos;
     this.tableRenderOptimization = props.tableRenderOptimization;
@@ -233,6 +237,8 @@ export const createTableView = (
   const { pluginConfig } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
   const { tableRenderOptimization } = getEditorFeatureFlags();
+  const hasIntlContext = true;
+
   return new TableView({
     node,
     view,
@@ -244,5 +250,6 @@ export const createTableView = (
     tableRenderOptimization,
     getEditorContainerWidth,
     getEditorFeatureFlags,
+    hasIntlContext,
   }).init();
 };

package/src/plugins/table/nodeviews/types.ts

@@ -26,4 +26,5 @@ export interface Props {
   tableRenderOptimization?: boolean;
   getEditorContainerWidth: GetEditorContainerWidth;
   getEditorFeatureFlags: GetEditorFeatureFlags;
+  hasIntlContext: boolean;
 }

package/src/plugins/table/toolbar.ts

@@ -57,7 +57,6 @@ import { findParentDomRefOfType } from 'prosemirror-utils';
 import { EditorView } from 'prosemirror-view';
 import { closestElement } from '@atlaskit/editor-common/utils';
 
-// TODO: ED-14403 investigate why these translations don't work
 export const messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/src/plugins/table/ui/FloatingContextualMenu/__tests__/ContextualMenu.tsx

@@ -37,7 +37,7 @@ it.skip('TODO: restore unit', () => {});
 //       }));
 //     });
 
-//     test('should render contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
+//     it('should render contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
 //       const intl = createIntl({ locale: 'en' });
 //       const wrapper = shallow(
 //         <ContextualMenu

package/src/plugins/table/ui/FloatingContextualMenu/__tests__/FloatingContextualMenu.tsx

@@ -34,7 +34,7 @@ it.skip('TODO: restore unit', () => {});
 //       }));
 //     });
 
-//     test('should render floating contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
+//     it('should render floating contextual menu when no tableCellPosition is passed but exist on editor state ', () => {
 //       const wrapper = shallow(
 //         <FloatingContextualMenu
 //           editorView={editorView}

package/src/plugins/table/ui/TableFloatingControls/CornerControls/index.tsx

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { defineMessages, injectIntl } from 'react-intl-next';
 
 import classnames from 'classnames';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -12,6 +14,15 @@ import { EditorView } from 'prosemirror-view';
 import { clearHoverSelection, hoverTable } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 
+const messages = defineMessages({
+  cornerControl: {
+    id: 'fabric.editor.cornerControl',
+    defaultMessage: 'Highlight table',
+    description:
+      'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.',
+  },
+});
+
 export interface Props {
   editorView: EditorView;
   tableRef?: HTMLTableElement;
@@ -23,13 +34,17 @@ export interface Props {
   stickyTop?: number;
 }
 
-export default class CornerControls extends Component<Props, any> {
+class CornerControlComponent extends Component<
+  Props & WrappedComponentProps,
+  any
+> {
   render() {
     const {
       isInDanger,
       tableRef,
       isHeaderColumnEnabled,
       isHeaderRowEnabled,
+      intl: { formatMessage },
     } = this.props;
     if (!tableRef) {
       return null;
@@ -50,6 +65,7 @@ export default class CornerControls extends Component<Props, any> {
         }}
       >
         <button
+          aria-label={formatMessage(messages.cornerControl)}
           type="button"
           className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
             danger: isActive && isInDanger,
@@ -103,3 +119,5 @@ export default class CornerControls extends Component<Props, any> {
     hoverTable()(state, dispatch);
   };
 }
+
+export const CornerControls = injectIntl(CornerControlComponent);

package/src/plugins/table/ui/TableFloatingControls/RowControls/index.tsx

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 
 import { EditorView } from 'prosemirror-view';
+import type { WrappedComponentProps } from 'react-intl-next';
+import { defineMessages, injectIntl } from 'react-intl-next';
 
 import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -12,6 +14,15 @@ import {
 } from '../../../utils';
 import { tableControlsSpacing, tableToolbarSize } from '../../consts';
 
+const messages = defineMessages({
+  rowControl: {
+    id: 'fabric.editor.rowControl',
+    defaultMessage: 'Highlight row',
+    description:
+      'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.',
+  },
+});
+
 export interface Props {
   editorView: EditorView;
   tableRef: HTMLTableElement;
@@ -24,7 +35,7 @@ export interface Props {
   stickyTop?: number;
 }
 
-export default class RowControls extends Component<Props> {
+class RowControlsComponent extends Component<Props & WrappedComponentProps> {
   render() {
     const {
       editorView,
@@ -32,6 +43,7 @@ export default class RowControls extends Component<Props> {
       hoveredRows,
       isInDanger,
       isResizing,
+      intl: { formatMessage },
     } = this.props;
     if (!tableRef) {
       return null;
@@ -89,6 +101,7 @@ export default class RowControls extends Component<Props> {
                   }}
                 >
                   <button
+                    aria-label={formatMessage(messages.rowControl)}
                     type="button"
                     className={`${ClassName.ROW_CONTROLS_BUTTON}
                   ${ClassName.CONTROLS_BUTTON}
@@ -117,3 +130,5 @@ export default class RowControls extends Component<Props> {
     clearHoverSelection()(state, dispatch);
   };
 }
+
+export const RowControls = injectIntl(RowControlsComponent);

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -11,9 +11,9 @@ import { RowStickyState } from '../../pm-plugins/sticky-headers';
 
 import { isSelectionUpdated } from '../../utils';
 
-import CornerControls from './CornerControls';
+import { CornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
-import RowControls from './RowControls';
+import { RowControls } from './RowControls';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
 export interface Props {