fix: WPGraphQL Settings page fails to load when "graphiql_enabled" setting is "off"

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;
 		}
 

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;
 		}
 

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();
+
+    });
+
+});