@atlaskit/editor-plugin-table 1.1.4 → 1.2.0

package/src/__tests__/integration/delete-last-column-in-full-width.ts

@@ -16,7 +16,7 @@ import {
 BrowserTestCase(
   'Delete last table column in full-width mode',
   // Only Chrome has logging support in BrowserStack now
-  { skip: ['safari'] },
+  { skip: [] },
   async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,

package/src/__tests__/integration/floating-toolbar.ts

@@ -330,7 +330,7 @@ BrowserTestCase(
 
 BrowserTestCase(
   'should the context menu disabled item stay open when clicked.',
-  { skip: ['safari'] }, // The test does not pass on CI but works on physical browser
+  { skip: [] },
   async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,

package/src/__tests__/integration/sticky-header.ts

@@ -0,0 +1,160 @@
+import WebdriverPage from '@atlaskit/webdriver-runner/wd-wrapper';
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  fullpage,
+  tableSelectors,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import stickyTable from './__fixtures__/large-table-with-sticky-header';
+
+const scrollTo = async (page: WebdriverPage, height: number) => {
+  const editorScrollParentSelector = '.fabric-editor-popup-scroll-parent';
+  await page.execute(
+    (editorScrollParentSelector: string, height: number) => {
+      const editor = document.querySelector(editorScrollParentSelector);
+      editor && editor.scroll(0, height);
+    },
+    editorScrollParentSelector,
+    height,
+  );
+};
+
+const insertColumn = async (page: any, cell: 'first' | 'last') => {
+  const columnControl = tableSelectors.nthColumnControl(1);
+  const insertButton = tableSelectors.insertButton;
+  const firstCell = tableSelectors.topLeftCell;
+  const firstCellLastRow = `table > tbody > tr:nth-child(48) > td:nth-child(1)`;
+
+  if (cell === 'first') {
+    await page.click(firstCell);
+  } else if (cell === 'last') {
+    await page.click(firstCellLastRow);
+  }
+
+  const columnDecorationSelector = columnControl;
+  await page.hover(columnDecorationSelector);
+
+  await page.waitForSelector(insertButton);
+  await page.click(insertButton);
+};
+
+BrowserTestCase(
+  'Sticky header should correctly toggle on and off',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(stickyTable),
+      allowTables: {
+        advanced: true,
+        stickyHeaders: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTable, {}, true),
+    ).toBeTruthy();
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTr, {}, true),
+    ).toBeTruthy();
+
+    await scrollTo(page, window.innerHeight * 100);
+
+    expect(await page.waitForSelector(tableSelectors.stickyTable)).toBeTruthy();
+    expect(await page.waitForSelector(tableSelectors.stickyTr)).toBeTruthy();
+
+    await scrollTo(page, 0);
+
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTable, {}, true),
+    ).toBeTruthy();
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTr, {}, true),
+    ).toBeTruthy();
+  },
+);
+
+BrowserTestCase(
+  'Sticky header should still correctly toggle on and off, after a column has been added',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(stickyTable),
+      allowTables: {
+        advanced: true,
+        stickyHeaders: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTable, {}, true),
+    ).toBeTruthy();
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTr, {}, true),
+    ).toBeTruthy();
+
+    await insertColumn(page, 'first');
+
+    await scrollTo(page, window.innerHeight * 100);
+
+    expect(await page.waitForSelector(tableSelectors.stickyTable)).toBeTruthy();
+    expect(await page.waitForSelector(tableSelectors.stickyTr)).toBeTruthy();
+  },
+);
+
+BrowserTestCase(
+  'Sticky header should correctly toggle on and off, after table is scrolled to the bottom and a column has been added',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(stickyTable),
+      allowTables: {
+        advanced: true,
+        stickyHeaders: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+
+    await scrollTo(page, window.innerHeight * 100);
+
+    await insertColumn(page, 'last');
+
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTable, {}, true),
+    ).toBeTruthy();
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTr, {}, true),
+    ).toBeTruthy();
+
+    // ED-16817 This checks for a bug where the table row would become not sticky
+    // but the numbered column header would stay sticky
+    const numberedCol = await page.$(tableSelectors.numberedColumnTopLeftCell);
+    const numberedColStyle = await numberedCol.getAttribute('style');
+    expect(!numberedColStyle.includes('top')).toBeTruthy();
+  },
+);

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-visual-hints-should-be-added-to-the-table-column-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:73e26bdfa1009884d8657a69ff2a721ecf9f0a0763629cae053550cf9b640425
-size 29791
+oid sha256:ac570fb3172970569166ac27d43c4d4330ed10407894ae2882fc91268b7c6543
+size 29647

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-visual-hints-should-be-added-to-the-table-row-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4c6f837604b1df78aef416e043bfd090906490e7604121f6f0c683d43dd7c9da
-size 29783
+oid sha256:91b791b54bbda59e690dbec1a779bbba00ccdfdd2b1658def547de0edb8164c5
+size 29662

package/src/__tests__/visual-regression/__image_snapshots__/index-ts-snapshot-test-table-numbered-list-should-not-overflow-table-cell-when-there-are-more-than-100-ordered-list-items-3-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:61cd30f491d1cf3499042fe4c002d5ec610520b57e395cc78c998b71dadc9cd3
-size 42193
+oid sha256:918d6eca1f77862b22c2530a59567a7bed80e221c1d1050a3e45c0803112437e
+size 42897

package/src/plugins/table/index.tsx

@@ -79,8 +79,9 @@ const defaultGetEditorFeatureFlags = () => ({});
 
 const tablesPlugin: NextEditorPlugin<
   'table',
-  never,
-  TablePluginOptions | undefined
+  {
+    pluginConfiguration: TablePluginOptions | undefined;
+  }
 > = (options?: TablePluginOptions) => {
   const editorViewRef: Record<'current', EditorView | null> = { current: null };
   const defaultGetEditorContainerWidth: GetEditorContainerWidth = () => {

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -190,9 +190,15 @@ export class TableRowNodeView implements NodeView {
     if (!this.listening) {
       return;
     }
-
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();
+      // ED-16211 Once intersection observer is disconnected, we need to remove the isObserved from the sentinels
+      // Otherwise when new intersection observer is created it will not observe because it thinks its already being observed
+      [this.sentinels.top, this.sentinels.bottom].forEach((el) => {
+        if (el) {
+          delete el.dataset.isObserved;
+        }
+      });
     }
 
     if (this.resizeObserver) {
@@ -633,7 +639,6 @@ export class TableRowNodeView implements NodeView {
     table.classList.remove(ClassName.TABLE_STICKY);
 
     this.isSticky = false;
-
     this.dom.style.top = '';
     table.style.removeProperty('margin-top');
 

package/src/plugins/table/toolbar.tsx

@@ -475,6 +475,8 @@ export const getToolbarConfig =
       let confirmDialog;
 
       if (isReferencedSource(state, tableObject.node)) {
+        const localSourceName = intl.formatMessage(tableMessages.unnamedSource);
+
         confirmDialog = (): ConfirmDialogOptions => ({
           title: intl.formatMessage(tableMessages.deleteElementTitle),
           okButtonLabel: intl.formatMessage(
@@ -482,7 +484,9 @@ export const getToolbarConfig =
           ),
           message: intl.formatMessage(
             tableMessages.confirmDeleteLinkedModalMessage,
-            { nodeName: getNodeName(state, tableObject.node) },
+            {
+              nodeName: getNodeName(state, tableObject.node) || localSourceName,
+            },
           ),
           messagePrefix: intl.formatMessage(
             tableMessages.confirmDeleteLinkedModalMessagePrefix,
@@ -524,7 +528,7 @@ export const getToolbarConfig =
         title: 'Table floating controls',
         getDomRef,
         nodeType,
-        offset: [0, 3],
+        offset: [0, 18],
         zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
         items: [
           menu,

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

@@ -22,7 +22,10 @@ import {
 } from '@atlaskit/editor-common/ui-color';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 
-import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import {
+  ArrowKeyNavigationType,
+  DropdownMenu,
+} from '@atlaskit/editor-common/ui-menu';
 
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { cellColourPreviewStyles } from './styles';
@@ -162,7 +165,10 @@ export class ContextualMenu extends Component<
           mountTo={mountPoint}
           //This needs be removed when the a11y is completely handled
           //Disabling key navigation now as it works only partially
-          disableArrowKeyNavigation={true}
+          arrowKeyNavigationProviderOptions={{
+            type: ArrowKeyNavigationType.MENU,
+            disableArrowKeyNavigation: true,
+          }}
           items={items}
           isOpen={isOpen}
           onOpenChange={this.handleOpenChange}

package/src/plugins/table/ui/common-styles.ts

@@ -362,6 +362,13 @@ export const tableStyles = (
 
       .${ClassName.ROW_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
+
+        // https://product-fabric.atlassian.net/browse/ED-16386
+        // Fixes issue where the extra padding that is added here throws off the position
+        // of the rows control dot
+        &::after {
+          right: 6px !important;
+        }
       }
 
       &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -707,8 +714,7 @@ export const tableStyles = (
     .${ClassName.TABLE_NODE_WRAPPER} {
       padding-right: ${insertColumnButtonOffset}px;
       margin-right: -${insertColumnButtonOffset}px;
-      padding-bottom: ${tableScrollbarOffset}px;
-      margin-bottom: -${tableScrollbarOffset}px;
+      padding-bottom: 0px;
       /* fixes gap cursor height */
       overflow: auto;
       position: relative;
@@ -726,7 +732,7 @@ export const tableStyles = (
     cursor: col-resize;
   }
 
-  /* 
+  /*
   ED-15882: When custom start numbers is enabled for lists, we have
   styles that handle this generally (in editor-common) so we can
   throw away the older table-specific styles here.

package/src/plugins/table/ui/messages.ts

@@ -55,4 +55,9 @@ export default defineMessages({
     description:
       'Title text for confirm modal when deleting an extension linked to a data consumer.',
   },
+  unnamedSource: {
+    id: 'fabric.editor.extension.sourceNoTitledName',
+    defaultMessage: 'this element',
+    description: 'The current element without preset name been selected',
+  },
 });

package/src/plugins/table/ui/ui-styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 import {
   tableCellBorderWidth,
-  tableMarginBottom,
   tableMarginTop,
+  tableMarginTopWithControl,
 } from '@atlaskit/editor-common/styles';
 import {
   akEditorShadowZIndex,
@@ -246,7 +246,7 @@ export const DeleteButton = css`
 export const OverflowShadow = (props: ThemeProps) => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
-    height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
+    height: calc(100% - ${tableMarginTop}px);
     position: absolute;
     pointer-events: none;
     top: ${tableMarginTop}px;
@@ -282,10 +282,13 @@ export const OverflowShadow = (props: ThemeProps) => css`
       );
     left: calc(100% + 2px);
   }
+  .${ClassName.TABLE_COLUMN_CONTROLS_DECORATIONS} {
+    z-index: 0;
+  }
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
-      top: ${tableMarginTop}px;
+      height: calc(100% - ${tableMarginTopWithControl}px);
+      top: ${tableMarginTopWithControl}px;
     }
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor(props)};
@@ -326,6 +329,7 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
     left: -1px;
     top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
     height: ${columnControlsDecorationHeight}px;
+    z-index: 0;
 
     &::before {
       content: ' ';