From 416d5119ae2930b71f3381a4e49408564e6e5863 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 22 May 2024 13:14:28 -0400 Subject: [PATCH] Linting --- bin/versionPlugin.js | 229 ++++----- package-lock.json | 141 +++++- package.json | 1 + .../src/components/CopyQueryButton/index.js | 2 +- .../MergeFragmentsButton.jsx | 2 +- .../PrettifyButton/PrettifyButton.jsx | 11 +- .../ShareDocumentButton.jsx | 7 +- .../ToggleAuthenticationButton.jsx | 5 +- plugins/third-party-plugin/src/index.js | 17 +- src/access-functions.js | 3 - src/components/ActivityBar.jsx | 27 +- src/components/ActivityBarPlugins.jsx | 28 +- src/components/ActivityBarUtilities.jsx | 28 +- src/components/ActivityPanel.jsx | 27 +- src/components/DocumentSessions.jsx | 183 ++++---- src/components/EditorDrawer.jsx | 3 +- src/components/EditorToolbar.jsx | 6 +- src/components/GraphiQL.jsx | 442 +++++++++--------- src/components/SettingsDialog.jsx | 66 +-- src/components/ShortKeysDialog.jsx | 88 ++-- .../toggle-auth-button.js | 12 +- src/stores/index.js | 4 +- tests/e2e/config/global-setup.js | 4 +- tests/e2e/specs/activity-bar-plugins.spec.js | 220 +++++---- tests/e2e/specs/drawer.spec.js | 13 +- .../e2e/specs/editor-toolbar-buttons.spec.js | 325 +++++++------ tests/e2e/specs/environment.spec.js | 32 +- tests/e2e/specs/query-composer.spec.js | 143 +++--- tests/e2e/utils.js | 90 ++-- 29 files changed, 1217 insertions(+), 942 deletions(-) diff --git a/bin/versionPlugin.js b/bin/versionPlugin.js index fe1de91..cdb8816 100644 --- a/bin/versionPlugin.js +++ b/bin/versionPlugin.js @@ -6,10 +6,10 @@ * Ported over from FaustJS * @link https://github.com/wpengine/faustjs/blob/canary/scripts/versionPlugin.js */ -const fs = require("fs/promises"); -const path = require("node:path"); +const fs = require( 'fs/promises' ); +const path = require( 'node:path' ); -const readFile = (filename) => fs.readFile(filename, { encoding: "utf8" }); +const readFile = ( filename ) => fs.readFile( filename, { encoding: 'utf8' } ); const writeFile = fs.writeFile; /** @@ -17,56 +17,60 @@ const writeFile = fs.writeFile; * including version bumps and readme.txt changelog updates. */ async function versionPlugin() { - const pluginPath = path.join(__dirname, "../"); - const pluginFile = path.join(pluginPath, "wpgraphql-ide.php"); - const readmeTxt = path.join(pluginPath, "readme.txt"); - const changelog = path.join(pluginPath, "CHANGELOG.md"); - - const version = await getNewVersion(pluginPath); - - if (version) { - await bumpPluginHeader(pluginFile, version); - await bumpStableTag(readmeTxt, version); - await bumpVersionConstant(pluginFile, version); - await generateReadmeChangelog(readmeTxt, changelog); - } + const pluginPath = path.join( __dirname, '../' ); + const pluginFile = path.join( pluginPath, 'wpgraphql-ide.php' ); + const readmeTxt = path.join( pluginPath, 'readme.txt' ); + const changelog = path.join( pluginPath, 'CHANGELOG.md' ); + + const version = await getNewVersion( pluginPath ); + + if ( version ) { + await bumpPluginHeader( pluginFile, version ); + await bumpStableTag( readmeTxt, version ); + await bumpVersionConstant( pluginFile, version ); + await generateReadmeChangelog( readmeTxt, changelog ); + } } /** * Updates the version number found in the header comment of a given * WordPress plugin's main PHP file. * - * @param {String} pluginFile Full path to a file containing a WordPress + * @param {string} pluginFile Full path to a file containing a WordPress * plugin header comment. - * @param {String} version The new version number. + * @param {string} version The new version number. */ -async function bumpPluginHeader(pluginFile, version) { - return bumpVersion(pluginFile, /^\s*\*\s*Version:\s*([0-9.]+)$/gm, version); +async function bumpPluginHeader( pluginFile, version ) { + return bumpVersion( + pluginFile, + /^\s*\*\s*Version:\s*([0-9.]+)$/gm, + version + ); } /** * Updates the stable tag found in a given WordPress plugin's readme.txt file. * - * @param {String} readmeTxt Full path to a file containing a WordPress - * readme.txt file. - * @param {String} version The new version number. + * @param {string} readmeTxt Full path to a file containing a WordPress + * readme.txt file. + * @param {string} version The new version number. */ -async function bumpStableTag(readmeTxt, version) { - return bumpVersion(readmeTxt, /^Stable tag:\s*([0-9.]+)$/gm, version); +async function bumpStableTag( readmeTxt, version ) { + return bumpVersion( readmeTxt, /^Stable tag:\s*([0-9.]+)$/gm, version ); } /** * Updates the version constant found in the WPGraphQLContentBlocks.php file. * - * @param {String} pluginFile Full path to a file containing PHP constants. - * @param {String} version The new version number. + * @param {string} pluginFile Full path to a file containing PHP constants. + * @param {string} version The new version number. */ -async function bumpVersionConstant(pluginFile, version) { - return bumpVersion( - pluginFile, - /^\s*define\(\s*'WPGRAPHQL_IDE_VERSION',\s*'([0-9.]+)'\s*\);/, - version - ); +async function bumpVersionConstant( pluginFile, version ) { + return bumpVersion( + pluginFile, + /^\s*define\(\s*'WPGRAPHQL_IDE_VERSION',\s*'([0-9.]+)'\s*\);/, + version + ); } /** @@ -81,107 +85,110 @@ async function bumpVersionConstant(pluginFile, version) { * number portion of the line. For example, in the line " * Version: 1.0.0" * capturing group 1 of the regex must resolve to "1.0.0". * - * @param {String} file Full path to the file to update. + * @param {string} file Full path to the file to update. * @param {RegExp} regex A valid regular expression as noted above. - * @param {String} version The new version number. + * @param {string} version The new version number. */ -async function bumpVersion(file, regex, version) { - try { - let data = await readFile(file); - const matches = regex.exec(data); +async function bumpVersion( file, regex, version ) { + try { + let data = await readFile( file ); + const matches = regex.exec( data ); - if (!matches) { - throw new Error(`Version string does not exist in ${file}`); - } + if ( ! matches ) { + throw new Error( `Version string does not exist in ${ file }` ); + } - // Replace the version number in the captured line. - let versionString = matches[0].replace(matches[1], version); + // Replace the version number in the captured line. + const versionString = matches[ 0 ].replace( matches[ 1 ], version ); - // Replace the captured line with the new version string. - data = data.replace(matches[0], versionString); + // Replace the captured line with the new version string. + data = data.replace( matches[ 0 ], versionString ); - return writeFile(file, data); - } catch (e) { - console.warn(e); - } + return writeFile( file, data ); + } catch ( e ) { + console.warn( e ); + } } /** * Get the current version number from a plugin's package.json file. * - * @param {String} pluginPath Full path to the directory containing the plugin's + * @param {string} pluginPath Full path to the directory containing the plugin's * package.json file. - * @returns The version number string found in the plugin's package.json. + * @return The version number string found in the plugin's package.json. */ -async function getNewVersion(pluginPath) { - const packageJsonFile = path.join(pluginPath, "package.json"); +async function getNewVersion( pluginPath ) { + const packageJsonFile = path.join( pluginPath, 'package.json' ); - try { - let packageJson = await readFile(packageJsonFile); + try { + const packageJson = await readFile( packageJsonFile ); - return JSON.parse(packageJson)?.version; - } catch (e) { - if (e instanceof SyntaxError) { - e.message = `${e.message} in ${packageJsonFile}.\n`; - } + return JSON.parse( packageJson )?.version; + } catch ( e ) { + if ( e instanceof SyntaxError ) { + e.message = `${ e.message } in ${ packageJsonFile }.\n`; + } - console.warn(e); - } + console.warn( e ); + } } /** * Updates the plugin's readme.txt changelog with the latest 3 releases * found in the plugin's CHANGELOG.md file. * - * @param {String} readmeTxtFile Full path to the plugin's readme.txt file. - * @param {String} changelog Full path to the plugin's CHANGELOG.md file. + * @param {string} readmeTxtFile Full path to the plugin's readme.txt file. + * @param {string} changelog Full path to the plugin's CHANGELOG.md file. */ -async function generateReadmeChangelog(readmeTxtFile, changelog) { - let output = ""; - - try { - let readmeTxt = await readFile(readmeTxtFile); - let changelogContent = await readFile(changelog); - - // Remove the "# Changelog" header if it exists in CHANGELOG.md - changelogContent = changelogContent.replace("# Changelog", ""); - - // Split the contents by new line - const changelogLines = changelogContent.split(/\r?\n/); - const processedLines = []; - let versionCount = 0; - - // Process all lines in current version - changelogLines.every((line) => { - // Version numbers in CHANGELOG.md are h2 - if (line.startsWith("## ")) { - if (versionCount == 3) { - return false; // Stop processing after 3 versions - } - // Format version number for WordPress - line = line.replace("## ", "= ") + " ="; - versionCount++; - } - - processedLines.push(line); - - return true; // Continue processing - }); - - changelogContent = processedLines.join("\n"); - - const changelogStart = readmeTxt.indexOf("== Changelog =="); - const readmeTxtBeforeChangelog = readmeTxt.substring(0, changelogStart + "== Changelog ==".length); - - // Combine the original part of readme.txt up to the changelog section with the new changelog content - output = readmeTxtBeforeChangelog + changelogContent; - output += - "\n[View the full changelog](https://github.com/wp-graphql/wpgraphql-ide/blob/main/CHANGELOG.md)"; - - return writeFile(readmeTxtFile, output); - } catch (e) { - console.warn(e); - } +async function generateReadmeChangelog( readmeTxtFile, changelog ) { + let output = ''; + + try { + const readmeTxt = await readFile( readmeTxtFile ); + let changelogContent = await readFile( changelog ); + + // Remove the "# Changelog" header if it exists in CHANGELOG.md + changelogContent = changelogContent.replace( '# Changelog', '' ); + + // Split the contents by new line + const changelogLines = changelogContent.split( /\r?\n/ ); + const processedLines = []; + let versionCount = 0; + + // Process all lines in current version + changelogLines.every( ( line ) => { + // Version numbers in CHANGELOG.md are h2 + if ( line.startsWith( '## ' ) ) { + if ( versionCount == 3 ) { + return false; // Stop processing after 3 versions + } + // Format version number for WordPress + line = line.replace( '## ', '= ' ) + ' ='; + versionCount++; + } + + processedLines.push( line ); + + return true; // Continue processing + } ); + + changelogContent = processedLines.join( '\n' ); + + const changelogStart = readmeTxt.indexOf( '== Changelog ==' ); + const readmeTxtBeforeChangelog = readmeTxt.substring( + 0, + changelogStart + '== Changelog =='.length + ); + + // Combine the original part of readme.txt up to the changelog section with the new changelog content + output = readmeTxtBeforeChangelog + changelogContent; + output += + '\n[View the full changelog](https://github.com/wp-graphql/wpgraphql-ide/blob/main/CHANGELOG.md)'; + + return writeFile( readmeTxtFile, output ); + } catch ( e ) { + console.warn( e ); + } } versionPlugin(); diff --git a/package-lock.json b/package-lock.json index c32d6e5..2a4a6c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@changesets/cli": "^2.27.1", "@graphiql/plugin-explorer": "^1.0.3", + "@graphiql/react": "^0.22.1", "@wordpress/components": "^27.0.0", "@wordpress/data": "^9.22.0", "@wordpress/element": "^5.23.0", @@ -2916,9 +2917,9 @@ "peer": true }, "node_modules/@codemirror/view": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.0.tgz", - "integrity": "sha512-nSSmzONpqsNzshPOxiKhK203R6BvABepugAe34QfQDbNDslyjkqBuKgrK5ZBvqNXpfxz5iLrlGTmEfhbQyH46A==", + "version": "6.26.3", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.3.tgz", + "integrity": "sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==", "peer": true, "dependencies": { "@codemirror/state": "^6.4.0", @@ -3309,9 +3310,9 @@ } }, "node_modules/@graphiql/react": { - "version": "0.20.3", - "resolved": "https://registry.npmjs.org/@graphiql/react/-/react-0.20.3.tgz", - "integrity": "sha512-LHEiWQPABflTyRJZBZB50WSlrWER4RtlWg9XV1+D4yZQ3+6GbLM7X1zYf4D/TQ6AJB/vLZQHEnbhS0LuKcNqfA==", + "version": "0.22.1", + "resolved": "https://registry.npmjs.org/@graphiql/react/-/react-0.22.1.tgz", + "integrity": "sha512-PBClhO2juCvVvmE5qD4PHivJLkhp0dqIX1zgId8Z83UCKpxO2M+bEspRL9aOQQaE4F4xqExCUk5B2AL+wc+agg==", "dependencies": { "@graphiql/toolkit": "^0.9.1", "@headlessui/react": "^1.7.15", @@ -3322,11 +3323,11 @@ "@types/codemirror": "^5.60.8", "clsx": "^1.2.1", "codemirror": "^5.65.3", - "codemirror-graphql": "^2.0.10", + "codemirror-graphql": "^2.0.11", "copy-to-clipboard": "^3.2.0", "framer-motion": "^6.5.1", "graphql-language-service": "^5.2.0", - "markdown-it": "^12.2.0", + "markdown-it": "^14.1.0", "set-value": "^4.1.0" }, "peerDependencies": { @@ -3350,6 +3351,11 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "optional": true }, + "node_modules/@graphiql/react/node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" + }, "node_modules/@graphiql/react/node_modules/clsx": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", @@ -3378,6 +3384,40 @@ "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@graphiql/react/node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "dependencies": { + "uc.micro": "^2.0.0" + } + }, + "node_modules/@graphiql/react/node_modules/markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, + "node_modules/@graphiql/react/node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==" + }, + "node_modules/@graphiql/react/node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==" + }, "node_modules/@graphiql/toolkit": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/@graphiql/toolkit/-/toolkit-0.9.1.tgz", @@ -9932,9 +9972,9 @@ "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==" }, "node_modules/codemirror-graphql": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/codemirror-graphql/-/codemirror-graphql-2.0.10.tgz", - "integrity": "sha512-rC9NxibCsSzWtCQjHLfwKCkyYdGv2BT/BCgyDoKPrc/e7aGiyLyeT0fB60d+0imwlvhX3lIHncl6JMz2YxQ/jg==", + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/codemirror-graphql/-/codemirror-graphql-2.0.11.tgz", + "integrity": "sha512-j1QDDXKVkpin2VsyS0ke2nAhKal6/N1UJtgnBGrPe3gj9ZSP6/K8Xytft94k0xW6giIU/JhZjvW0GwwERNzbFA==", "dependencies": { "@types/codemirror": "^0.0.90", "graphql-language-service": "5.2.0" @@ -11721,7 +11761,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "engines": { "node": ">=0.12" }, @@ -14208,6 +14247,76 @@ "react-dom": "^16.8.0 || ^17 || ^18" } }, + "node_modules/graphiql/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/graphiql/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, + "node_modules/graphiql/node_modules/@graphiql/react": { + "version": "0.20.4", + "resolved": "https://registry.npmjs.org/@graphiql/react/-/react-0.20.4.tgz", + "integrity": "sha512-LDgIlHa65pSngk8G2O0hvohNz4B41VUa7Yg6iPwifa1XreXxHIXjhV6FC1qi5oSjdCIRp4T8dkZnHA6iI5eElg==", + "dependencies": { + "@graphiql/toolkit": "^0.9.1", + "@headlessui/react": "^1.7.15", + "@radix-ui/react-dialog": "^1.0.4", + "@radix-ui/react-dropdown-menu": "^2.0.5", + "@radix-ui/react-tooltip": "^1.0.6", + "@radix-ui/react-visually-hidden": "^1.0.3", + "@types/codemirror": "^5.60.8", + "clsx": "^1.2.1", + "codemirror": "^5.65.3", + "codemirror-graphql": "^2.0.11", + "copy-to-clipboard": "^3.2.0", + "framer-motion": "^6.5.1", + "graphql-language-service": "^5.2.0", + "markdown-it": "^12.2.0", + "set-value": "^4.1.0" + }, + "peerDependencies": { + "graphql": "^15.5.0 || ^16.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, + "node_modules/graphiql/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/graphiql/node_modules/framer-motion": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz", + "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==", + "dependencies": { + "@motionone/dom": "10.12.0", + "framesync": "6.0.1", + "hey-listen": "^1.0.8", + "popmotion": "11.0.3", + "style-value-types": "5.0.0", + "tslib": "^2.1.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": ">=16.8 || ^17.0.0 || ^18.0.0", + "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/graphql": { "version": "16.8.1", "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz", @@ -21499,6 +21608,14 @@ "node": ">=6" } }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "engines": { + "node": ">=6" + } + }, "node_modules/puppeteer-core": { "version": "13.7.0", "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-13.7.0.tgz", diff --git a/package.json b/package.json index 8231570..68acdbc 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "dependencies": { "@changesets/cli": "^2.27.1", "@graphiql/plugin-explorer": "^1.0.3", + "@graphiql/react": "^0.22.1", "@wordpress/components": "^27.0.0", "@wordpress/data": "^9.22.0", "@wordpress/element": "^5.23.0", diff --git a/plugins/third-party-plugin/src/components/CopyQueryButton/index.js b/plugins/third-party-plugin/src/components/CopyQueryButton/index.js index f043fd2..aae58da 100644 --- a/plugins/third-party-plugin/src/components/CopyQueryButton/index.js +++ b/plugins/third-party-plugin/src/components/CopyQueryButton/index.js @@ -1,3 +1,3 @@ import { CopyQueryButton } from './CopyQueryButton'; -export default CopyQueryButton; \ No newline at end of file +export default CopyQueryButton; diff --git a/plugins/third-party-plugin/src/components/MergeFragmentsButton/MergeFragmentsButton.jsx b/plugins/third-party-plugin/src/components/MergeFragmentsButton/MergeFragmentsButton.jsx index 8385903..0c21d5c 100644 --- a/plugins/third-party-plugin/src/components/MergeFragmentsButton/MergeFragmentsButton.jsx +++ b/plugins/third-party-plugin/src/components/MergeFragmentsButton/MergeFragmentsButton.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { useMergeQuery, MergeIcon } from '@graphiql/react'; -export const MergeFragmentsButton = ({ ToolbarButton }) => { +export const MergeFragmentsButton = ( { ToolbarButton } ) => { const merge = useMergeQuery(); return ( diff --git a/plugins/third-party-plugin/src/components/PrettifyButton/PrettifyButton.jsx b/plugins/third-party-plugin/src/components/PrettifyButton/PrettifyButton.jsx index df66081..25c4f17 100644 --- a/plugins/third-party-plugin/src/components/PrettifyButton/PrettifyButton.jsx +++ b/plugins/third-party-plugin/src/components/PrettifyButton/PrettifyButton.jsx @@ -1,17 +1,16 @@ import React from 'react'; -import { - PrettifyIcon, -} from '@graphiql/react'; +import { PrettifyIcon } from '@graphiql/react'; import { useDispatch, useSelect } from '@wordpress/data'; - -export const PrettifyButton = ({ ToolbarButton }) => { +export const PrettifyButton = ( { ToolbarButton } ) => { // const prettify = usePrettifyEditors(); const { GraphQL } = window.WPGraphQLIDE; const { print, parse } = GraphQL; - const query = useSelect( ( select ) => select( 'wpgraphql-ide/app' ).getQuery() ); + const query = useSelect( ( select ) => + select( 'wpgraphql-ide/app' ).getQuery() + ); const { prettifyQuery } = useDispatch( 'wpgraphql-ide/app' ); return ( diff --git a/plugins/third-party-plugin/src/components/ShareDocumentButton/ShareDocumentButton.jsx b/plugins/third-party-plugin/src/components/ShareDocumentButton/ShareDocumentButton.jsx index 70eb111..448ae01 100644 --- a/plugins/third-party-plugin/src/components/ShareDocumentButton/ShareDocumentButton.jsx +++ b/plugins/third-party-plugin/src/components/ShareDocumentButton/ShareDocumentButton.jsx @@ -13,10 +13,11 @@ import { useCopyToClipboard } from '../../../../../src/hooks/useCopyToClipboard' * `useCopyToClipboard` hook to copy this URL to the clipboard and provide user feedback * via WordPress admin notices. * - * @param {Object} props Component properties. + * @param {Object} props Component properties. + * @param props.ToolbarButton * @return {React.Element} A ToolbarButton element for the share document functionality. */ -export const ShareDocumentButton = ({ ToolbarButton }) => { +export const ShareDocumentButton = ( { ToolbarButton } ) => { const { queryEditor } = useEditorContext(); const [ copyToClipboard ] = useCopyToClipboard(); const { dedicatedIdeBaseUrl } = window.WPGRAPHQL_IDE_DATA; @@ -49,5 +50,3 @@ export const ShareDocumentButton = ({ ToolbarButton }) => { ); }; - - diff --git a/plugins/third-party-plugin/src/components/ToggleAuthenticationButton/ToggleAuthenticationButton.jsx b/plugins/third-party-plugin/src/components/ToggleAuthenticationButton/ToggleAuthenticationButton.jsx index 45fcd6a..bdc1ff3 100644 --- a/plugins/third-party-plugin/src/components/ToggleAuthenticationButton/ToggleAuthenticationButton.jsx +++ b/plugins/third-party-plugin/src/components/ToggleAuthenticationButton/ToggleAuthenticationButton.jsx @@ -10,9 +10,12 @@ import styles from './ToggleAuthenticationButton.module.css'; * @param {Object} props Component props. * @param {boolean} props.isAuthenticated Indicates if the current state is authenticated. * @param {Function} props.toggleAuthentication Function to toggle the authentication state. + * @param props.ToolbarButton */ export const ToggleAuthenticationButton = ( { ToolbarButton } ) => { - const isAuthenticated = useSelect( ( select ) =>select( 'wpgraphql-ide/app' ).isAuthenticated()); + const isAuthenticated = useSelect( ( select ) => + select( 'wpgraphql-ide/app' ).isAuthenticated() + ); const { toggleAuthentication } = useDispatch( 'wpgraphql-ide/app' ); const avatarUrl = window.WPGRAPHQL_IDE_DATA?.context?.avatarUrl; const title = isAuthenticated diff --git a/plugins/third-party-plugin/src/index.js b/plugins/third-party-plugin/src/index.js index 727f649..5366c04 100644 --- a/plugins/third-party-plugin/src/index.js +++ b/plugins/third-party-plugin/src/index.js @@ -1,16 +1,13 @@ /* global WPGRAPHQL_IDE_DATA */ -import { select, dispatch, useSelect, useDispatch } from "@wordpress/data"; +import { select, dispatch, useSelect, useDispatch } from '@wordpress/data'; import { MergeIcon } from '@graphiql/react'; -import styles from "./components/ToggleAuthenticationButton/ToggleAuthenticationButton.module.css"; -import clsx from "clsx"; -import { PrettifyIcon } from "@graphiql/react"; +import styles from './components/ToggleAuthenticationButton/ToggleAuthenticationButton.module.css'; +import clsx from 'clsx'; +import { PrettifyIcon } from '@graphiql/react'; import React from 'react'; -import { useCopyToClipboard } from "../../../src/hooks/useCopyToClipboard"; -import LZString from "lz-string"; +import { useCopyToClipboard } from '../../../src/hooks/useCopyToClipboard'; +import LZString from 'lz-string'; import { Icon, external } from '@wordpress/icons'; import { CopyIcon } from '@graphiql/react'; - -window.addEventListener( 'WPGraphQLIDEReady', () => { - -} ); +window.addEventListener( 'WPGraphQLIDEReady', () => {} ); diff --git a/src/access-functions.js b/src/access-functions.js index 88f7dd9..b513e6b 100644 --- a/src/access-functions.js +++ b/src/access-functions.js @@ -33,6 +33,3 @@ export function registerDocumentEditorToolbarButton( ); } } - - - diff --git a/src/components/ActivityBar.jsx b/src/components/ActivityBar.jsx index 729d874..698690d 100644 --- a/src/components/ActivityBar.jsx +++ b/src/components/ActivityBar.jsx @@ -1,16 +1,25 @@ import React from 'react'; -import {ActivityBarUtilities} from "./ActivityBarUtilities"; -import {ActivityBarPlugins} from "./ActivityBarPlugins"; +import { ActivityBarUtilities } from './ActivityBarUtilities'; +import { ActivityBarPlugins } from './ActivityBarPlugins'; -export const ActivityBar = ({ pluginContext, handlePluginClick, schemaContext, handleRefetchSchema, handleShowDialog }) => { +export const ActivityBar = ( { + pluginContext, + handlePluginClick, + schemaContext, + handleRefetchSchema, + handleShowDialog, +} ) => { return (
- +
- ) -} + ); +}; diff --git a/src/components/ActivityBarPlugins.jsx b/src/components/ActivityBarPlugins.jsx index bdd45f2..e8f93ec 100644 --- a/src/components/ActivityBarPlugins.jsx +++ b/src/components/ActivityBarPlugins.jsx @@ -1,27 +1,29 @@ -import {Tooltip, UnStyledButton} from "@graphiql/react"; -import React from "react"; +import { Tooltip, UnStyledButton } from '@graphiql/react'; +import React from 'react'; -export const ActivityBarPlugins = ({ pluginContext, handlePluginClick}) => { +export const ActivityBarPlugins = ( { pluginContext, handlePluginClick } ) => { return (
- {pluginContext?.plugins.map((plugin, index) => { + { pluginContext?.plugins.map( ( plugin, index ) => { const isVisible = plugin === pluginContext.visiblePlugin; - const label = `${isVisible ? 'Hide' : 'Show'} ${plugin.title}`; + const label = `${ isVisible ? 'Hide' : 'Show' } ${ + plugin.title + }`; const Icon = plugin.icon; return ( - + ); - })} + } ) }
- ) -} + ); +}; diff --git a/src/components/ActivityBarUtilities.jsx b/src/components/ActivityBarUtilities.jsx index 5a81cf9..a2132d4 100644 --- a/src/components/ActivityBarUtilities.jsx +++ b/src/components/ActivityBarUtilities.jsx @@ -3,22 +3,28 @@ import { ReloadIcon, SettingsIcon, Tooltip, - UnStyledButton -} from "@graphiql/react"; -import React from "react"; + UnStyledButton, +} from '@graphiql/react'; +import React from 'react'; -export const ActivityBarUtilities = ({ schemaContext, handleRefetchSchema, handleShowDialog }) => { +export const ActivityBarUtilities = ( { + schemaContext, + handleRefetchSchema, + handleShowDialog, +} ) => { return (
@@ -27,7 +33,7 @@ export const ActivityBarUtilities = ({ schemaContext, handleRefetchSchema, handl
- ) -} + ); +}; diff --git a/src/components/ActivityPanel.jsx b/src/components/ActivityPanel.jsx index b42c382..edf257c 100644 --- a/src/components/ActivityPanel.jsx +++ b/src/components/ActivityPanel.jsx @@ -1,29 +1,34 @@ -import React from "react"; +import React from 'react'; -const ActivityPanel = ({ firstRef, dragBarRef, PluginContent, pluginContext}) => { +const ActivityPanel = ( { + firstRef, + dragBarRef, + PluginContent, + pluginContext, +} ) => { return ( <>
- {PluginContent ? : null} + { PluginContent ? : null }
- {pluginContext?.visiblePlugin && ( + { pluginContext?.visiblePlugin && (
- )} + ) } - ) -} + ); +}; export default ActivityPanel; diff --git a/src/components/DocumentSessions.jsx b/src/components/DocumentSessions.jsx index 66b6726..3dc15ea 100644 --- a/src/components/DocumentSessions.jsx +++ b/src/components/DocumentSessions.jsx @@ -1,18 +1,21 @@ import { ChevronDownIcon, ChevronUpIcon, - ExecuteButton, HeaderEditor, - QueryEditor, ResponseEditor, Spinner, + ExecuteButton, + HeaderEditor, + QueryEditor, + ResponseEditor, + Spinner, Tab, Tabs, Tooltip, - UnStyledButton, VariableEditor -} from "@graphiql/react"; -import {EditorToolbar} from "./EditorToolbar"; -import React from "react"; - -export const DocumentSessions = (props) => { + UnStyledButton, + VariableEditor, +} from '@graphiql/react'; +import { EditorToolbar } from './EditorToolbar'; +import React from 'react'; +export const DocumentSessions = ( props ) => { const { secondRef, // pluginResize.secondRef disableTabs, @@ -35,80 +38,90 @@ export const DocumentSessions = (props) => { onEditVariables, onEditHeaders, editorResize, - responseTooltip + responseTooltip, } = props; return ( -
+
- {disableTabs ? null : ( + { disableTabs ? null : ( - {editorContext.tabs.length > 1 && ( + { editorContext.tabs.length > 1 && ( <> - {editorContext.tabs.map((tab, index) => ( + { editorContext.tabs.map( ( tab, index ) => ( { + id={ `graphiql-session-tab-${ index }` } + onClick={ () => { executionContext.stop(); - editorContext.changeTab(index); - }} + editorContext.changeTab( + index + ); + } } > - {tab.title} + { tab.title } { - if (editorContext.activeTabIndex === index) { + onClick={ () => { + if ( + editorContext.activeTabIndex === + index + ) { executionContext.stop(); } - editorContext.closeTab(index); - }} + editorContext.closeTab( index ); + } } /> - ))} - {addTab} + ) ) } + { addTab } - )} + ) } - )} + ) }
- {editorContext.tabs.length === 1 && addTab} - {logo} + { editorContext.tabs.length === 1 && addTab } + { logo }
-
+
-
+
{
-
+
Variables - {isHeadersEditorEnabled && ( + { isHeadersEditorEnabled && ( Headers - )} + ) } - {editorToolsResize.hiddenElement === 'second' ? ( + { editorToolsResize.hiddenElement === + 'second' ? (
-
+
{ } > - {isHeadersEditorEnabled && ( + { isHeadersEditorEnabled && ( - )} + ) }
@@ -218,20 +241,20 @@ export const DocumentSessions = (props) => {
-
+
- {executionContext.isFetching ? : null} + { executionContext.isFetching ? : null }
- ) -} + ); +}; diff --git a/src/components/EditorDrawer.jsx b/src/components/EditorDrawer.jsx index 844cae6..464ddc6 100644 --- a/src/components/EditorDrawer.jsx +++ b/src/components/EditorDrawer.jsx @@ -19,7 +19,8 @@ export function EditorDrawer( { children, buttonLabel } ) { onOpenChange={ setDrawerOpen } > - { buttonLabel } + + { buttonLabel } { children } diff --git a/src/components/EditorToolbar.jsx b/src/components/EditorToolbar.jsx index 1ea0e11..0771157 100644 --- a/src/components/EditorToolbar.jsx +++ b/src/components/EditorToolbar.jsx @@ -18,17 +18,17 @@ export const EditorToolbar = () => { return null; } - const baseClassName = `graphiql-${buttonName}-button`; + const baseClassName = `graphiql-${ buttonName }-button`; // Merge the base className with any classNames provided in props. - const mergedClassName = clsx(baseClassName, props?.className); + const mergedClassName = clsx( baseClassName, props?.className ); // If a component is provided, use it, otherwise use the default ToolbarButton const Component = props.component || ToolbarButton; return ( ); diff --git a/src/components/GraphiQL.jsx b/src/components/GraphiQL.jsx index d885c96..36c95f3 100644 --- a/src/components/GraphiQL.jsx +++ b/src/components/GraphiQL.jsx @@ -5,10 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, { - useCallback, - useState, -} from 'react'; +import React, { useCallback, useState } from 'react'; import { GraphiQLProvider, @@ -23,11 +20,11 @@ import { useStorageContext, useTheme, } from '@graphiql/react'; -import {ActivityBar} from "./ActivityBar"; -import {ShortKeysDialog} from "./ShortKeysDialog"; -import {SettingsDialog} from "./SettingsDialog"; -import ActivityPanel from "./ActivityPanel"; -import {DocumentSessions} from "./DocumentSessions"; +import { ActivityBar } from './ActivityBar'; +import { ShortKeysDialog } from './ShortKeysDialog'; +import { SettingsDialog } from './SettingsDialog'; +import ActivityPanel from './ActivityPanel'; +import { DocumentSessions } from './DocumentSessions'; /** * The top-level React component for GraphiQL, intended to encompass the entire @@ -36,75 +33,75 @@ import {DocumentSessions} from "./DocumentSessions"; * @see https://github.com/graphql/graphiql#usage */ -export function GraphiQL({ - dangerouslyAssumeSchemaIsValid, - defaultQuery, - defaultTabs, - externalFragments, - fetcher, - getDefaultFieldNames, - headers, - inputValueDeprecation, - introspectionQueryName, - maxHistoryLength, - onEditOperationName, - onSchemaChange, - onTabChange, - onTogglePluginVisibility, - operationName, - plugins, - query, - response, - schema, - schemaDescription, - shouldPersistHeaders, - storage, - validationRules, - variables, - visiblePlugin, - defaultHeaders, - ...props - }) { +export function GraphiQL( { + dangerouslyAssumeSchemaIsValid, + defaultQuery, + defaultTabs, + externalFragments, + fetcher, + getDefaultFieldNames, + headers, + inputValueDeprecation, + introspectionQueryName, + maxHistoryLength, + onEditOperationName, + onSchemaChange, + onTabChange, + onTogglePluginVisibility, + operationName, + plugins, + query, + response, + schema, + schemaDescription, + shouldPersistHeaders, + storage, + validationRules, + variables, + visiblePlugin, + defaultHeaders, + ...props +} ) { // Ensure props are correct - if (typeof fetcher !== 'function') { + if ( typeof fetcher !== 'function' ) { throw new TypeError( - 'The `GraphiQL` component requires a `fetcher` function to be passed as prop.', + 'The `GraphiQL` component requires a `fetcher` function to be passed as prop.' ); } return ( ); @@ -113,11 +110,11 @@ export function GraphiQL({ // Export main windows/panes to be used separately if desired. GraphiQL.Logo = GraphiQLLogo; -export function GraphiQLInterface(props) { +export function GraphiQLInterface( props ) { const isHeadersEditorEnabled = props.isHeadersEditorEnabled ?? true; - const editorContext = useEditorContext({ nonNull: true }); - const executionContext = useExecutionContext({ nonNull: true }); - const schemaContext = useSchemaContext({ nonNull: true }); + const editorContext = useEditorContext( { nonNull: true } ); + const executionContext = useExecutionContext( { nonNull: true } ); + const schemaContext = useSchemaContext( { nonNull: true } ); const storageContext = useStorageContext(); const pluginContext = usePluginContext(); @@ -125,26 +122,26 @@ export function GraphiQLInterface(props) { const PluginContent = pluginContext?.visiblePlugin?.content; - const pluginResize = useDragResize({ + const pluginResize = useDragResize( { defaultSizeRelation: 1 / 3, direction: 'horizontal', initiallyHidden: pluginContext?.visiblePlugin ? undefined : 'first', - onHiddenElementChange(resizableElement) { - if (resizableElement === 'first') { - pluginContext?.setVisiblePlugin(null); + onHiddenElementChange( resizableElement ) { + if ( resizableElement === 'first' ) { + pluginContext?.setVisiblePlugin( null ); } }, sizeThresholdSecond: 200, storageKey: 'docExplorerFlex', - }); - const editorResize = useDragResize({ + } ); + const editorResize = useDragResize( { direction: 'horizontal', storageKey: 'editorFlex', - }); - const editorToolsResize = useDragResize({ + } ); + const editorToolsResize = useDragResize( { defaultSizeRelation: 3, direction: 'vertical', - initiallyHidden: (() => { + initiallyHidden: ( () => { if ( props.defaultEditorToolsVisibility === 'variables' || props.defaultEditorToolsVisibility === 'headers' @@ -152,141 +149,140 @@ export function GraphiQLInterface(props) { return; } - if (typeof props.defaultEditorToolsVisibility === 'boolean') { - return props.defaultEditorToolsVisibility ? undefined : 'second'; + if ( typeof props.defaultEditorToolsVisibility === 'boolean' ) { + return props.defaultEditorToolsVisibility + ? undefined + : 'second'; } - return editorContext.initialVariables || editorContext.initialHeaders + return editorContext.initialVariables || + editorContext.initialHeaders ? undefined : 'second'; - })(), + } )(), sizeThresholdSecond: 60, storageKey: 'secondaryEditorFlex', - }); - - const [activeSecondaryEditor, setActiveSecondaryEditor] = useState(() => { - if ( - props.defaultEditorToolsVisibility === 'variables' || - props.defaultEditorToolsVisibility === 'headers' - ) { - return props.defaultEditorToolsVisibility; + } ); + + const [ activeSecondaryEditor, setActiveSecondaryEditor ] = useState( + () => { + if ( + props.defaultEditorToolsVisibility === 'variables' || + props.defaultEditorToolsVisibility === 'headers' + ) { + return props.defaultEditorToolsVisibility; + } + return ! editorContext.initialVariables && + editorContext.initialHeaders && + isHeadersEditorEnabled + ? 'headers' + : 'variables'; } - return !editorContext.initialVariables && - editorContext.initialHeaders && - isHeadersEditorEnabled - ? 'headers' - : 'variables'; - }); - const [showDialog, setShowDialog] = useState(null); - const [clearStorageStatus, setClearStorageStatus] = useState(null); - - const children = React.Children.toArray(props.children); - - const logo = children.find(child => - isChildComponentType(child, GraphiQL.Logo), + ); + const [ showDialog, setShowDialog ] = useState( null ); + const [ clearStorageStatus, setClearStorageStatus ] = useState( null ); + + const children = React.Children.toArray( props.children ); + + const logo = children.find( ( child ) => + isChildComponentType( child, GraphiQL.Logo ) ) || ; - const onClickReference = useCallback(() => { - if (pluginResize.hiddenElement === 'first') { - pluginResize.setHiddenElement(null); + const onClickReference = useCallback( () => { + if ( pluginResize.hiddenElement === 'first' ) { + pluginResize.setHiddenElement( null ); } - }, [pluginResize]); + }, [ pluginResize ] ); - const handleClearData = useCallback(() => { + const handleClearData = useCallback( () => { try { storageContext?.clear(); - setClearStorageStatus('success'); + setClearStorageStatus( 'success' ); } catch { - setClearStorageStatus('error'); + setClearStorageStatus( 'error' ); } - }, [storageContext]); - - const handlePersistHeaders = - useCallback( - event => { - editorContext.setShouldPersistHeaders( - event.currentTarget.dataset.value === 'true', - ); - }, - [editorContext], - ); + }, [ storageContext ] ); + + const handlePersistHeaders = useCallback( + ( event ) => { + editorContext.setShouldPersistHeaders( + event.currentTarget.dataset.value === 'true' + ); + }, + [ editorContext ] + ); const handleChangeTheme = useCallback( - event => { - const selectedTheme = event.currentTarget.dataset.theme || undefined; - setTheme(selectedTheme || null); + ( event ) => { + const selectedTheme = + event.currentTarget.dataset.theme || undefined; + setTheme( selectedTheme || null ); }, - [setTheme], + [ setTheme ] ); const handleAddTab = editorContext.addTab; const handleRefetchSchema = schemaContext.introspect; const handleReorder = editorContext.moveTab; - const handleShowDialog = useCallback( - event => { - setShowDialog( - event.currentTarget.dataset.value, - ); - }, - [], - ); + const handleShowDialog = useCallback( ( event ) => { + setShowDialog( event.currentTarget.dataset.value ); + }, [] ); const handlePluginClick = useCallback( - e => { + ( e ) => { const context = pluginContext; - const pluginIndex = Number(e.currentTarget.dataset.index); - const plugin = context.plugins.find((_, index) => pluginIndex === index); + const pluginIndex = Number( e.currentTarget.dataset.index ); + const plugin = context.plugins.find( + ( _, index ) => pluginIndex === index + ); const isVisible = plugin === context.visiblePlugin; - if (isVisible) { - context.setVisiblePlugin(null); - pluginResize.setHiddenElement('first'); + if ( isVisible ) { + context.setVisiblePlugin( null ); + pluginResize.setHiddenElement( 'first' ); } else { - context.setVisiblePlugin(plugin); - pluginResize.setHiddenElement(null); + context.setVisiblePlugin( plugin ); + pluginResize.setHiddenElement( null ); } }, - [pluginContext, pluginResize], + [ pluginContext, pluginResize ] ); const handleToolsTabClick = useCallback( - event => { - if (editorToolsResize.hiddenElement === 'second') { - editorToolsResize.setHiddenElement(null); + ( event ) => { + if ( editorToolsResize.hiddenElement === 'second' ) { + editorToolsResize.setHiddenElement( null ); } - setActiveSecondaryEditor( - event.currentTarget.dataset.name - ); + setActiveSecondaryEditor( event.currentTarget.dataset.name ); }, - [editorToolsResize], + [ editorToolsResize ] ); - const toggleEditorTools = - useCallback(() => { - editorToolsResize.setHiddenElement( - editorToolsResize.hiddenElement === 'second' ? null : 'second', - ); - }, [editorToolsResize]); + const toggleEditorTools = useCallback( () => { + editorToolsResize.setHiddenElement( + editorToolsResize.hiddenElement === 'second' ? null : 'second' + ); + }, [ editorToolsResize ] ); - const handleOpenShortKeysDialog = useCallback((isOpen) => { - if (!isOpen) { - setShowDialog(null); + const handleOpenShortKeysDialog = useCallback( ( isOpen ) => { + if ( ! isOpen ) { + setShowDialog( null ); } - }, []); + }, [] ); - const handleOpenSettingsDialog = useCallback((isOpen) => { - if (!isOpen) { - setShowDialog(null); - setClearStorageStatus(null); + const handleOpenSettingsDialog = useCallback( ( isOpen ) => { + if ( ! isOpen ) { + setShowDialog( null ); + setClearStorageStatus( null ); } - }, []); + }, [] ); const addTab = (