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..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) => { @@ -488,6 +493,49 @@ 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') + } + + 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"]') + 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 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() + 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..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 @@ -46,6 +46,20 @@ 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(); + $screen = 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' ) ) ); + } + /** * The manage screen renders a truncation toggle. *