From 5844add1acaa90fd9a72deb65a010eb4e9ce7e8f Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Thu, 10 Sep 2026 13:46:46 +0300 Subject: [PATCH 1/2] feat: add optional ID column to snippets table and implement visibility toggle --- .../ManageMenu/SnippetsTable/TableColumns.tsx | 6 ++++ .../WithFilteredSnippetsContext.tsx | 2 +- .../Manage/Manage_Menu_Screen_Options.php | 16 +++++++++ tests/e2e/code-snippets-list.spec.ts | 34 +++++++++++++++++++ .../Manage_Menu_Screen_Options_Test.php | 11 ++++++ 5 files changed, 68 insertions(+), 1 deletion(-) diff --git a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx index f3329e56c..059ad9741 100644 --- a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx +++ b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx @@ -180,6 +180,12 @@ const baseTableColumns: ListTableColumn[] = [ title: {__('Activate', 'code-snippets')}, render: snippet => }, + { + id: 'id', + title: __('ID', 'code-snippets'), + sortedValue: snippet => snippet.id, + render: snippet => snippet.id + }, { id: 'name', title: __('Name', 'code-snippets'), diff --git a/src/js/components/ManageMenu/SnippetsTable/WithFilteredSnippetsContext.tsx b/src/js/components/ManageMenu/SnippetsTable/WithFilteredSnippetsContext.tsx index 8e28764a8..0401933c5 100644 --- a/src/js/components/ManageMenu/SnippetsTable/WithFilteredSnippetsContext.tsx +++ b/src/js/components/ManageMenu/SnippetsTable/WithFilteredSnippetsContext.tsx @@ -71,7 +71,7 @@ export const WithFilteredSnippetsContext: React.FC = ({ child if (sanitizedSearchQueryText) { return searchLineNumber !== undefined ? snippet.code.split('\n')[searchLineNumber]?.includes(sanitizedSearchQueryText) - : searchFields.some(field => + : String(snippet.id) === sanitizedSearchQueryText || searchFields.some(field => ('tags' === field ? snippet.tags.join(' ') : snippet[field]) .toLowerCase().includes(sanitizedSearchQueryText)) } diff --git a/src/php/Admin/Menus/Manage/Manage_Menu_Screen_Options.php b/src/php/Admin/Menus/Manage/Manage_Menu_Screen_Options.php index 790262a04..95ab7721a 100644 --- a/src/php/Admin/Menus/Manage/Manage_Menu_Screen_Options.php +++ b/src/php/Admin/Menus/Manage/Manage_Menu_Screen_Options.php @@ -34,6 +34,7 @@ public function load() { if ( $screen && ! $this->is_cloud_community_view() ) { add_filter( "manage_{$screen->id}_columns", [ $this, 'get_columns' ] ); + add_filter( 'default_hidden_columns', [ $this, 'get_default_hidden_columns' ], 10, 2 ); add_filter( 'screen_settings', [ $this, 'render' ] ); } @@ -60,6 +61,7 @@ public function get_columns( array $columns = [] ): array { [ '_title' => __( 'Columns', 'code-snippets' ), 'activate' => __( 'Active', 'code-snippets' ), + 'id' => __( 'ID', 'code-snippets' ), 'name' => __( 'Name', 'code-snippets' ), 'type' => __( 'Type', 'code-snippets' ), 'desc' => __( 'Description', 'code-snippets' ), @@ -70,6 +72,20 @@ public function get_columns( array $columns = [] ): array { ); } + /** + * Hide the optional ID column until a user enables it. + * + * @param string[] $hidden_columns Column identifiers hidden by default. + * @param \WP_Screen $screen Current admin screen. + * + * @return string[] + */ + public function get_default_hidden_columns( array $hidden_columns, \WP_Screen $screen ): array { + return get_current_screen() === $screen + ? array_merge( $hidden_columns, [ 'id' ] ) + : $hidden_columns; + } + /** * Get the columns hidden for the current user. * diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts index 78fa6d408..573843731 100644 --- a/tests/e2e/code-snippets-list.spec.ts +++ b/tests/e2e/code-snippets-list.spec.ts @@ -488,6 +488,40 @@ test.describe('Manage table Screen Options', () => { await expect(page.locator('.wp-list-table th.column-desc').first()).not.toHaveClass(/\bhidden\b/) }) + test('ID column visibility persists when enabled and supports ID search', async ({ page }) => { + const snippetRow = snippetRowByName(page, snippetName) + const editUrl = await snippetRow.locator('.snippet-name').getAttribute('href') + const snippetId = new URL(editUrl ?? '', page.url()).searchParams.get('id') + + if (!snippetId) { + throw new Error('Created snippet does not have an edit URL with an ID') + } + + await openScreenOptions(page) + + const idToggle = page.locator('#adv-settings input.hide-column-tog[value="id"]') + await expect(idToggle).toBeVisible() + await idToggle.uncheck() + await expect(page.locator('.wp-list-table th.column-id').first()).toHaveClass(/\bhidden\b/) + + await idToggle.check() + await page.locator('#screen-options-apply').click() + await page.waitForLoadState('networkidle') + + await helper.navigateToSnippetsAdmin() + await openScreenOptions(page) + await expect(idToggle).toBeChecked() + await expect(page.locator('.wp-list-table th.column-id').first()).not.toHaveClass(/\bhidden\b/) + await expect(snippetRowByName(page, snippetName).locator('.column-id')).toHaveText(snippetId) + + await page.getByRole('searchbox', { name: 'Search Snippets:' }).fill(snippetId) + await expect(snippetRowByName(page, snippetName)).toBeVisible() + + await idToggle.uncheck() + await page.locator('#screen-options-apply').click() + await page.waitForLoadState('networkidle') + }) + test('Truncation toggle applies and removes the truncation class in real time', async ({ page }) => { await openScreenOptions(page) diff --git a/tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php b/tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php index 044e6e708..7629492d9 100644 --- a/tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php +++ b/tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php @@ -46,6 +46,17 @@ public function test_get_columns_adds_snippet_columns(): void { $this->assertSame( 'Modified', $columns['date'] ); } + /** + * The optional ID column stays hidden until a user enables it. + * + * @return void + */ + public function test_default_hidden_columns_include_id(): void { + $options = new Manage_Menu_Screen_Options(); + + $this->assertSame( [ 'id' ], $options->get_default_hidden_columns( [], get_current_screen() ) ); + } + /** * The manage screen renders a truncation toggle. * From cd32ae933cb1f51a66dd6472cf8f35585e3786a1 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Thu, 10 Sep 2026 14:55:27 +0300 Subject: [PATCH 2/2] test: enhance screen options tests for default hidden columns --- tests/e2e/code-snippets-list.spec.ts | 14 ++++++++++++++ .../Manage/Manage_Menu_Screen_Options_Test.php | 5 ++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts index 573843731..e8b4b1204 100644 --- a/tests/e2e/code-snippets-list.spec.ts +++ b/tests/e2e/code-snippets-list.spec.ts @@ -443,10 +443,12 @@ test.describe('Code Snippets List Page Actions', () => { test.describe('Manage table Screen Options', () => { let helper: SnippetsTestHelper let snippetName: string + let unrelatedSnippetName: string | undefined test.beforeEach(async ({ page }) => { helper = new SnippetsTestHelper(page) snippetName = SnippetsTestHelper.makeUniqueSnippetName('E2E Screen Options') + unrelatedSnippetName = undefined await SnippetsTestHelper.cleanupSnippetsByPrefix(DEFAULT_E2E_SNIPPET_BASE_NAME) await helper.createAndActivateSnippet({ name: snippetName, @@ -457,6 +459,9 @@ test.describe('Manage table Screen Options', () => { test.afterEach(async () => { await helper.cleanupSnippet(snippetName) + if (unrelatedSnippetName) { + await helper.cleanupSnippet(unrelatedSnippetName) + } }) const openScreenOptions = async (page: Page) => { @@ -497,6 +502,13 @@ test.describe('Manage table Screen Options', () => { throw new Error('Created snippet does not have an edit URL with an ID') } + unrelatedSnippetName = SnippetsTestHelper.makeUniqueSnippetName('E2E ID Search') + const unrelatedSnippetId = await SnippetsTestHelper.createSnippetViaCli({ + name: unrelatedSnippetName, + active: false + }) + expect(unrelatedSnippetId).not.toBe(Number(snippetId)) + await openScreenOptions(page) const idToggle = page.locator('#adv-settings input.hide-column-tog[value="id"]') @@ -513,9 +525,11 @@ test.describe('Manage table Screen Options', () => { await expect(idToggle).toBeChecked() await expect(page.locator('.wp-list-table th.column-id').first()).not.toHaveClass(/\bhidden\b/) await expect(snippetRowByName(page, snippetName).locator('.column-id')).toHaveText(snippetId) + await expect(snippetRowByName(page, unrelatedSnippetName)).toBeVisible() await page.getByRole('searchbox', { name: 'Search Snippets:' }).fill(snippetId) await expect(snippetRowByName(page, snippetName)).toBeVisible() + await expect(snippetRowByName(page, unrelatedSnippetName)).toBeHidden() await idToggle.uncheck() await page.locator('#screen-options-apply').click() diff --git a/tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php b/tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php index 7629492d9..919e63ebf 100644 --- a/tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php +++ b/tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php @@ -53,8 +53,11 @@ public function test_get_columns_adds_snippet_columns(): void { */ public function test_default_hidden_columns_include_id(): void { $options = new Manage_Menu_Screen_Options(); + $screen = get_current_screen(); - $this->assertSame( [ 'id' ], $options->get_default_hidden_columns( [], get_current_screen() ) ); + $this->assertSame( [ 'id' ], $options->get_default_hidden_columns( [], $screen ) ); + $this->assertSame( [ 'type', 'id' ], $options->get_default_hidden_columns( [ 'type' ], $screen ) ); + $this->assertSame( [ 'type' ], $options->get_default_hidden_columns( [ 'type' ], \WP_Screen::get( 'dashboard' ) ) ); } /**