test(screenshots): add test for userColumnPresets

packages/ui/src/server/configs/e2e/local.ts

@@ -47,6 +47,11 @@ const e2eConfig: Partial<AppConfig> = {
         reUseEffectiveAclForPath: '//sys/access_control_object_namespaces[^/+]{0,}',
     },
 
+    userColumnPresets: {
+        cluster: 'ui',
+        dynamicTablePath: '//tmp/userColumnPresets',
+    },
+
     defaultUserSettingsOverrides: {
         ...common.defaultUserSettingsOverrides,
         ['global::navigation::useSmartSort']: false,

packages/ui/src/ui/pages/navigation/content/Table/TableOverview/ColumnSelectorButton.tsx

@@ -60,6 +60,7 @@ function ColumnSelectorButton({
                 view={view}
                 pin={allowUserColumnPresets ? 'round-brick' : 'round-round'}
                 style={showAllColumns ? undefined : actionStyle}
+                qa="table-columns-button"
             >
                 <Icon awesome="filter" face="solid" />
                 Columns

packages/ui/src/ui/pages/navigation/content/Table/TableOverview/ColumnsPresetButton.tsx

@@ -21,7 +21,12 @@ function SharePresetButton(props: Props) {
 
     return (
         <Tooltip content={'Share current set of columns for the table'}>
-            <Button {...props} pin={'clear-round'} onClick={handleClick}>
+            <Button
+                {...props}
+                pin={'clear-round'}
+                onClick={handleClick}
+                qa="table-columns-share-button"
+            >
                 <Icon awesome={'share'} />
             </Button>
         </Tooltip>

packages/ui/src/ui/store/actions/navigation/content/table/table.js

@@ -571,6 +571,9 @@ export function openTableWithPresetOfColumns() {
         saveColumnPreset(map_(visibleColumns, 'name'), cluster).then((hash) => {
             const {href} = window.location;
             const url = `${href}&columns=${hash}`;
+            try {
+                navigator.clipboard.writeText(url);
+            } catch {}
             openInNewTab(url);
 
             metrics.countEvent({

packages/ui/tests/init-cluster-e2e.sh

@@ -1,9 +1,8 @@
 #!/bin/bash
+set -xe
 
 EXPIRATION_TIMEOUT=${EXPIRATION_TIMEOUT:-3600000}
 
-set -xe
-
 if ! which yt >/dev/null; then
     echo You have to install YT CLI manually, please 1>&2
     exit 1
@@ -14,6 +13,17 @@ if [ -z "${YT_PROXY}" ]; then
     exit 2
 fi
 
+function createAndMountDynamicTable {
+    path=$1
+    schema=$2
+    yt create -i --attributes "{dynamic=%true;schema=$schema}" table $path
+    yt mount-table $path
+}
+
+# userColumnPresets
+createAndMountDynamicTable "//tmp/userColumnPresets" "[{name=hash;sort_order=ascending;type=string};{name=columns_json;type=string}]"
+
+
 suffix=E=$(mktemp -u XXXXXX)
 # to lower case
 E2E_SUFFIX=$(mktemp -u XXXXXX | tr '[:upper:]' '[:lower:]')
@@ -132,8 +142,7 @@ createAccountForQuotaEditor e2e-overcommit
 yt set //sys/accounts/e2e-overcommit-${E2E_SUFFIX}/@allow_children_limit_overcommit %true
 
 DYN_TABLE=${E2E_DIR}/dynamic-table
-yt create --attributes "{dynamic=%true;schema=[{name=key;sort_order=ascending;type=string};{name=value;type=string};{name=empty;type=any}]}" table ${DYN_TABLE}
-yt mount-table ${DYN_TABLE}
+createAndMountDynamicTable "$DYN_TABLE" "[{name=key;sort_order=ascending;type=string};{name=value;type=string};{name=empty;type=any}]"
 (
     set +x
     for ((i = 0; i < 300; i++)); do

packages/ui/tests/playwright.config.ts

@@ -40,6 +40,8 @@ export default defineConfig({
 
         screenshot: 'only-on-failure',
         video: 'retain-on-failure',
+
+        permissions: ['clipboard-read', 'clipboard-write'],
     },
     expect: {
         toHaveScreenshot: {

packages/ui/tests/screenshots/pages/navigation/navigation.table.base.screen.ts

@@ -2,6 +2,7 @@ import {Page, expect, test} from '@playwright/test';
 import {E2E_DIR, makeClusterUrl} from '../../../utils';
 import {replaceInnerHtml} from '../../../utils/dom';
 import {TablePage} from './TablePage';
+import {waitForClipboardText} from '../../../utils/clipboard';
 
 function tablePage(page: Page) {
     return new TablePage({page});
@@ -90,3 +91,49 @@ test('Navigation: static-table - rowselector', async ({page}) => {
 
     await expect(page).toHaveScreenshot();
 });
+
+test('Navigation: table - userColumnPresets', async ({page}) => {
+    await page.goto(makeClusterUrl(`navigation?path=${E2E_DIR}/static-table`));
+
+    await tablePage(page).waitForTablContent('.navigation-table', 10);
+    await tablePage(page).replaceStaticTableMeta();
+
+    await test.step('select only the "key" column', async () => {
+        await page.getByTestId('table-columns-button').click();
+        await page.getByText('Remove all').click();
+        await page.click(
+            '.column-selector__list-item:nth-child(1) .column-selector__list-item-check',
+            {
+                force: true,
+            },
+        );
+        await page.mouse.move(0, 0);
+        await expect(page).toHaveScreenshot();
+        await page.click('button :text("Apply")');
+    });
+
+    const shareBtn = page.getByTestId('table-columns-share-button');
+
+    await test.step('share button should be visible', async () => {
+        await shareBtn.waitFor();
+
+        await expect(page).toHaveScreenshot();
+    });
+
+    await test.step('open url from clipboard', async () => {
+        await shareBtn.click();
+
+        await page.waitForTimeout(2000);
+
+        const url = await waitForClipboardText(page);
+
+        await page.goto(url!);
+
+        await tablePage(page).waitForTablContent('.navigation-table', 10);
+        await tablePage(page).replaceStaticTableMeta();
+
+        await page.getByText('key0').waitFor();
+
+        await expect(page).toHaveScreenshot();
+    });
+});

packages/ui/tests/utils/clipboard.ts

@@ -0,0 +1,29 @@
+import {Page} from '@playwright/test';
+
+let counter = -1;
+
+export async function waitForClipboardText(page: Page) {
+    const key = `__##__clipboard_value_${++counter}`;
+
+    const res = await page.waitForFunction((key) => {
+        const storage = window as unknown as Record<string, string>;
+
+        console.log({k: key, v: storage[key]});
+
+        if (storage[key]) {
+            return storage[key];
+        }
+
+        async function fileClipboard() {
+            if (storage[key]) {
+                return;
+            } else {
+                storage[key] = await navigator.clipboard.readText();
+            }
+        }
+
+        requestIdleCallback(() => fileClipboard());
+    }, key);
+
+    return await res.jsonValue();
+}