Merge pull request #151 from wp-graphql/feature/issue-150-handle-ide-…

…settings

feat: Handle settings for IDE link in wpadminbar

.changeset/rotten-lies-allow.md

@@ -0,0 +1,8 @@
+---
+"wpgraphql-ide": minor
+---
+
+- Added new settings section to WPGraphQL, IDE Settings
+- Added new setting, Admin Bar Link Behavior
+
+![WPGraphQL IDE Settings tab showing the admin bar link behavior and Show legacy editor settings](https://github.com/wp-graphql/wpgraphql-ide/assets/6676674/59236b4c-0019-40a8-ae9b-a1228997f30c)

.github/workflows/e2e-tests.yml

@@ -31,12 +31,6 @@ jobs:
             - name: Build Assets
               run: npm run build
 
-            - name: Start WordPress Environment
-              run: npm run wp-env -- start
-
-            - name: Run E2E tests
+            - name: Start WordPress & Run E2E tests
               run: npm run test:e2e
 
-            - name: Stop WordPress Environment
-              if: always()
-              run: npm run wp-env -- stop

ACTIONS_AND_FILTERS.md

@@ -11,8 +11,6 @@
 - `wpgraphqlide_capability_required`
 - `wpgraphqlide_context`
 - `wpgraphqlide_external_fragments` ([graphiql_external_fragments](https://www.wpgraphql.com/docs/customizing-wpgraphiql#graphiql_external_fragments))
-- `wpgraphqlide_drawer_button_label`
-- `wpgraphqlide_drawer_button_loading_label`
 
 ## JavaScript Actions
 

package.json

@@ -11,6 +11,8 @@
 		"build": "wp-scripts build && npm run build:zip",
 		"build:zip": "wp-scripts plugin-zip",
 		"start": "wp-scripts start",
+		"pretest:e2e": "npm run wp-env start",
+		"pretest:e2e:ui": "npm run wp-env start",
 		"test:e2e": "wp-scripts test-playwright --config tests/e2e/playwright.config.js",
 		"test:e2e:ui": "wp-scripts test-playwright --config tests/e2e/playwright.config.js --ui",
 		"test:unit": "jest --config tests/unit/jest.config.js",

src/regions/app/components/EditorDrawer.jsx

@@ -19,7 +19,7 @@ export function EditorDrawer( { children, buttonLabel } ) {
 				onOpenChange={ setDrawerOpen }
 			>
 				<VaulDrawer.Trigger className="EditorDrawerButton">
-					{ buttonLabel }
+					<span className="ab-icon"></span>{ buttonLabel }
 				</VaulDrawer.Trigger>
 				<VaulDrawer.Portal>
 					<VaulDrawer.Content>{ children }</VaulDrawer.Content>

styles/wpgraphql-ide.css

@@ -121,11 +121,6 @@ body:not(.graphql_page_graphql-ide) {
   color: hsla(var(--color-neutral),1);
 }
 
-/* Visually subdue the WPGraphQL Core wpadminbar link while this plugin is active */
-#wp-admin-bar-graphiql-ide {
-  opacity: 0.5;
-}
-
 /* Align WPGraphQL logo with existing buttons */
 .wpgraphql-logo-link {
   display: flex;

tests/e2e/config/global-setup.js

@@ -26,8 +26,12 @@ async function globalSetup( config ) {
 		storageStatePath,
 	} );
 
-	// Authenticate and save the storageState to disk.
-	await requestUtils.setupRest();
+	try {
+        await requestUtils.setupRest();
+	} catch (error) {
+		console.error( '🚧 Consider checking WordPress for PHP errors.' );
+		throw error;
+	}
 
 	// Reset the test environment before running the tests.
 	await Promise.all( [

tests/e2e/specs/editor-toolbar-buttons.spec.js

@@ -111,7 +111,7 @@ describe('Toolbar Buttons', () => {
 		});
 	});
 
-	describe('Prettify button', () => {
+	describe.skip('Prettify button', () => {
 
 		beforeEach(async ({ page }) => {
 			await typeQuery(page, 'query{viewer{name}   }'); // poorly formatted query
@@ -150,7 +150,7 @@ describe('Toolbar Buttons', () => {
 		});
 	});
 
-	describe('Copy button', () => {
+	describe.skip('Copy button', () => {
 
 		beforeEach(async ({ page }) => {
 			await typeQuery(page, '{ posts { nodes { id } } }' ); // poorly formatted query