Repository: wp-graphql/wp-graphql (language: php)

Issue:
Settings page fails to load when "Enable GraphiQL IDE" setting is turned "off"
### Description

When the "Enable GraphiQL IDE" setting is set to "off" the WPGraphQL Settings page fails to load.

### Steps to reproduce

1. Visit the GraphQL > Settings page in the WordPress Dashboard
2. Un-check the "Enable GraphiQL IDE" setting and save the settings
3. See the settings page fail to load (also not some console errors)

### Additional context

_No response_

### WPGraphQL Version

1.26.0

### WordPress Version

6.5.3

### PHP Version

8.2

### Additional environment details

_No response_

### Please confirm that you have searched existing issues in the repo.

- [X] Yes

### Please confirm that you have disabled ALL plugins except for WPGraphQL.

- [X] Yes
- [ ] My issue is with compatibility with a specific WordPress plugin, and I have listed all my installed plugins (and version info) above.


Discussion / hints:

Fix patch:
diff --git a/src/Admin/GraphiQL/GraphiQL.php b/src/Admin/GraphiQL/GraphiQL.php
index f733277fa..bf1744935 100644
--- a/src/Admin/GraphiQL/GraphiQL.php
+++ b/src/Admin/GraphiQL/GraphiQL.php
@@ -58,7 +58,16 @@ public function init() {
 	 * @return void
 	 */
 	public function register_admin_bar_menu( WP_Admin_Bar $admin_bar ) {
-		if ( ! current_user_can( 'manage_options' ) || 'off' === get_graphql_setting( 'show_graphiql_link_in_admin_bar' ) ) {
+
+		if ( 'off' === get_graphql_setting( 'graphiql_enabled' ) ) {
+			return;
+		}
+
+		if ( ! current_user_can( 'manage_options' ) ) {
+			return;
+		}
+
+		if ( 'off' === get_graphql_setting( 'show_graphiql_link_in_admin_bar' ) ) {
 			return;
 		}
 
diff --git a/src/Admin/Settings/SettingsRegistry.php b/src/Admin/Settings/SettingsRegistry.php
index 1201c0086..1e710b9b7 100644
--- a/src/Admin/Settings/SettingsRegistry.php
+++ b/src/Admin/Settings/SettingsRegistry.php
@@ -57,7 +57,9 @@ public function get_settings_fields() {
 	 * @return void
 	 */
 	public function admin_enqueue_scripts( string $hook_suffix ) {
-		if ( 'graphql_page_graphql-settings' !== $hook_suffix ) {
+
+		// if the page is not the GraphQL Settings page, bail
+		if ( 'graphql_page_graphql-settings' !== $hook_suffix && 'toplevel_page_graphql-settings' !== $hook_suffix ) {
 			return;
 		}
 


Test patch:
diff --git a/tests/e2e/specs/settings-page.spec.js b/tests/e2e/specs/settings-page.spec.js
new file mode 100644
index 000000000..8efa1c5b4
--- /dev/null
+++ b/tests/e2e/specs/settings-page.spec.js
@@ -0,0 +1,34 @@
+import { describe, test, expect, beforeEach } from '@playwright/test'
+import { loginToWordPressAdmin, visitAdminFacingPage, wpAdminUrl } from '../utils'
+
+const selectors = {
+    graphiqlEnabledCheckbox: '#wpuf-graphql_general_settings\\[graphiql_enabled\\]',
+}
+
+describe( 'Settings Page', () => {
+
+    beforeEach( async ({ page }) => {
+        await loginToWordPressAdmin( page );
+        await page.evaluate(() => localStorage.clear());
+    });
+
+    test( 'GraphiQL IDE can be disabled', async ({ page }) => {
+        await visitAdminFacingPage( page, wpAdminUrl + '/admin.php?page=graphql-settings' );
+        // await page.goto('http://localhost:8888/wp-login.php?redirect_to=http%3A%2F%2Flocalhost%3A8888%2Fwp-admin%2F&reauth=1');
+
+        await page.waitForTimeout( 500 );
+        await expect( page.locator(selectors.graphiqlEnabledCheckbox ) ).toBeChecked();
+        await page.locator(selectors.graphiqlEnabledCheckbox ).uncheck();
+        await page.getByRole('button', { name: 'Save Changes' }).click();
+        await page.waitForTimeout( 500 );
+        await expect(page.getByText('Settings saved.')).toBeVisible();
+        await expect( page.locator(selectors.graphiqlEnabledCheckbox ) ).not.toBeChecked();
+        await page.locator( selectors.graphiqlEnabledCheckbox ).check();
+        await page.getByRole('button', { name: 'Save Changes' }).click();
+        await page.waitForTimeout( 500 );
+        await expect(page.getByText('Settings saved.')).toBeVisible();
+        await expect( page.locator( selectors.graphiqlEnabledCheckbox ) ).toBeChecked();
+
+    });
+
+});