GraphiQLMenuPage::enqueueAssets() - Code Metrics - Inspection of "Merge pull request #403 from leoloso:setup-menu-pa..." - GraphQLAPI/graphql-api-for-wp - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( aac044...cc3c72 )

by Leonardo

created 2021-02-14 10:31 UTC

GraphiQLMenuPage::enqueueAssets() B

↳ Parent: GraphiQLMenuPage

Complexity

Conditions	4
Paths	5

Size

Total Lines	99
Code Lines	65

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	4
eloc	65
nc	5
nop	0
dl	0
loc	99
rs	8.7636
c	0
b	0
f	0

How to fix Long Method

<?php

declare(strict_types=1);

namespace GraphQLAPI\GraphQLAPI\ConditionalOnEnvironment\Admin\Services\MenuPages;

use GraphQLAPI\GraphQLAPI\General\EndpointHelpers;
use GraphQLAPI\GraphQLAPI\Facades\ModuleRegistryFacade;
use GraphQLAPI\GraphQLAPI\ConditionalOnEnvironment\Admin\Services\MenuPages\AbstractMenuPage;
use GraphQLAPI\GraphQLAPI\Facades\UserSettingsManagerFacade;
use PoP\ComponentModel\Facades\Instances\InstanceManagerFacade;
use GraphQLAPI\GraphQLAPI\ConditionalOnEnvironment\Admin\Services\Clients\AdminGraphiQLWithExplorerClient;
use GraphQLAPI\GraphQLAPI\ConditionalOnEnvironment\Admin\Services\MenuPages\EnqueueReactMenuPageTrait;
use GraphQLAPI\GraphQLAPI\ModuleResolvers\ClientFunctionalityModuleResolver;

/**
 * GraphiQL page
 */
class GraphiQLMenuPage extends AbstractMenuPage
{
    use EnqueueReactMenuPageTrait;
    use GraphQLAPIMenuPageTrait;

    protected function useGraphiQLExplorer(): bool
    {
        $moduleRegistry = ModuleRegistryFacade::getInstance();
        $userSettingsManager = UserSettingsManagerFacade::getInstance();
        return
            $moduleRegistry->isModuleEnabled(ClientFunctionalityModuleResolver::GRAPHIQL_EXPLORER)
            && $userSettingsManager->getSetting(
                ClientFunctionalityModuleResolver::GRAPHIQL_EXPLORER,
                ClientFunctionalityModuleResolver::OPTION_USE_IN_ADMIN_CLIENT
            );
    }

    protected function getGraphiQLWithExplorerClientHTML(): string
    {
        $instanceManager = InstanceManagerFacade::getInstance();
        /**
         * @var AdminGraphiQLWithExplorerClient
         */
        $client = $instanceManager->getInstance(AdminGraphiQLWithExplorerClient::class);
        return $client->getClientHTML();
    }

    public function print(): void
    {
        if (!$this->useGraphiQLExplorer()) {
            ?>
            <div id="graphiql" class="graphiql-client">
                <p>
                    <?php echo __('Loading...', 'graphql-api') ?>
                    <!--span class="spinner is-active" style="float: none;"></span-->
                </p>
            </div>
            <?php
        } else {
            $htmlContent = $this->getGraphiQLWithExplorerClientHTML();
            // Extract the HTML inside <body>
            $matches = [];
            preg_match('/<body([^>]+)?>(.*?)<\/body>/s', $htmlContent, $matches);
            $bodyHTMLContent = $matches[2];
            // Remove all JS/CSS assets, since they are enqueued
            $bodyHTMLContent = preg_replace(
                [
                    '/<link[^>]*>(.*)<\/link>"/s',
                    '/<script[^>]*>(.*)<\/script>/s',
                ],
                '',
                $bodyHTMLContent
            );
            echo $bodyHTMLContent;
        }
    }

    /**
     * Override, because this is the default page, so it is invoked
     * with the menu slug wp-admin/admin.php?page=graphql_api,
     * and not the menu page slug wp-admin/admin.php?page=graphql_api_graphiql
     *
     * @return string
     */
    public function getScreenID(): string
    {
        return $this->getMenuName();
    }

    public function getMenuPageSlug(): string
    {
        return 'graphiql';
    }

    /**
     * Enqueue the required assets and initialize the localized scripts
     *
     * @return void
     */
    protected function enqueueAssets(): void
    {
        parent::enqueueAssets();

        $useGraphiQLExplorer = $this->useGraphiQLExplorer();

        // CSS
        \wp_enqueue_style(
            'graphql-api-graphiql-client',
            \GRAPHQL_API_URL . 'assets/css/graphiql-client.css',
            array(),
            \GRAPHQL_API_VERSION
        );

        // Common settings to both clients
        $scriptSettings = array(
            'nonce' => \wp_create_nonce('wp_rest'),
            'response' => $this->getResponse(),
        );

        if (!$useGraphiQLExplorer) {
            \wp_enqueue_style(
                'graphql-api-graphiql',
                \GRAPHQL_API_URL . 'assets/css/vendors/graphiql.min.css',
                array(),
                \GRAPHQL_API_VERSION
            );

            // JS: execute them all in the footer
            $this->enqueueReactAssets(true);

            \wp_enqueue_script(
                'graphql-api-graphiql',
                \GRAPHQL_API_URL . 'assets/js/vendors/graphiql.min.js',
                array('graphql-api-react-dom'),
                \GRAPHQL_API_VERSION,
                true
            );
            \wp_enqueue_script(
                'graphql-api-graphiql-client',
                \GRAPHQL_API_URL . 'assets/js/graphiql-client.js',
                array('graphql-api-graphiql'),
                \GRAPHQL_API_VERSION,
                true
            );

            // Load data into the script
            \wp_localize_script(
                'graphql-api-graphiql-client',
                'graphQLByPoPGraphiQLSettings',
                array_merge(
                    [
                        'defaultQuery' => $this->getDefaultQuery(),
                        'endpoint' => EndpointHelpers::getAdminGraphQLEndpoint(),
                    ],
                    $scriptSettings
                )
            );
        } else {
            // Print the HTML from the Client
            $htmlContent = $this->getGraphiQLWithExplorerClientHTML();
            // Extract the JS/CSS assets, from either the <head> or the <head>
            $matches = [];
            preg_match_all('/<link[^>]+href="([^">]+)"/s', $htmlContent, $matches);
            $cssFileURLs = $matches[1];
            foreach ($cssFileURLs as $index => $cssFileURL) {
                \wp_enqueue_style(
                    'graphql-api-graphiql-with-explorer-' . $index,
                    $cssFileURL,
                    array(),
                    \GRAPHQL_API_VERSION
                );
            }
            preg_match_all('/<script[^>]+src="([^">]+)"/s', $htmlContent, $matches);
            $jsFileURLs = $matches[1];
            foreach ($jsFileURLs as $index => $jsFileURL) {
                \wp_enqueue_script(
                    'graphql-api-graphiql-with-explorer-' . $index,
                    $jsFileURL,
                    array(),
                    \GRAPHQL_API_VERSION,
                    true
                );
            }

            // Override styles for the admin, so load last
            \wp_enqueue_style(
                'graphql-api-graphiql-with-explorer-client',
                \GRAPHQL_API_URL . 'assets/css/graphiql-with-explorer-client.css',
                array(),
                \GRAPHQL_API_VERSION
            );

            // Load data into the script. Because no script is enqueued since it is
            // in the body, then localize it to React
            \wp_localize_script(
                'graphql-api-graphiql-with-explorer-0',
                'graphiQLWithExplorerClientForWP',
                $scriptSettings
            );
        }
    }

    protected function getResponse(): string
    {
        return '';
        // return \__('Click the "Execute Query" button, or press Ctrl+Enter (Command+Enter in Mac)', 'graphql-api');
    }

    protected function getDefaultQuery(): string
    {
        return <<<EOT
            # Welcome to GraphiQL
            #
            # GraphiQL is an in-browser tool for writing, validating, and
            # testing GraphQL queries.
            #
            # Type queries into this side of the screen, and you will see intelligent
            # typeaheads aware of the current GraphQL type schema and live syntax and
            # validation errors highlighted within the text.
            #
            # GraphQL queries typically start with a "{" character. Lines that starts
            # with a # are ignored.
            #
            # An example GraphQL query might look like:
            #
            #   {
            #     field(arg: "value") {
            #       subField
            #     }
            #   }
            #
            # Run the query (at any moment):
            #
            #   Ctrl-Enter (or press the play button above)
            #

            query {
              posts(limit:3) {
                id
                title
                date(format:"d/m/Y")
                url
                author {
                  id
                  name
                  url
                }
                tags {
                  name
                }
                featuredImage {
                  src
                }
              }
            }

            EOT;
    }
}


1			<?php
2
3			declare(strict_types=1);
4
5			namespace GraphQLAPI\GraphQLAPI\ConditionalOnEnvironment\Admin\Services\MenuPages;
6
7			use GraphQLAPI\GraphQLAPI\General\EndpointHelpers;
8			use GraphQLAPI\GraphQLAPI\Facades\ModuleRegistryFacade;
9			use GraphQLAPI\GraphQLAPI\ConditionalOnEnvironment\Admin\Services\MenuPages\AbstractMenuPage;
10			use GraphQLAPI\GraphQLAPI\Facades\UserSettingsManagerFacade;
11			use PoP\ComponentModel\Facades\Instances\InstanceManagerFacade;
12			use GraphQLAPI\GraphQLAPI\ConditionalOnEnvironment\Admin\Services\Clients\AdminGraphiQLWithExplorerClient;
13			use GraphQLAPI\GraphQLAPI\ConditionalOnEnvironment\Admin\Services\MenuPages\EnqueueReactMenuPageTrait;
14			use GraphQLAPI\GraphQLAPI\ModuleResolvers\ClientFunctionalityModuleResolver;
15
16			/**
17			* GraphiQL page
18			*/
19			class GraphiQLMenuPage extends AbstractMenuPage
20			{
21			use EnqueueReactMenuPageTrait;
22			use GraphQLAPIMenuPageTrait;
23
24			protected function useGraphiQLExplorer(): bool
25			{
26			$moduleRegistry = ModuleRegistryFacade::getInstance();
27			$userSettingsManager = UserSettingsManagerFacade::getInstance();
28			return
29			$moduleRegistry->isModuleEnabled(ClientFunctionalityModuleResolver::GRAPHIQL_EXPLORER)
30			&& $userSettingsManager->getSetting(
31			ClientFunctionalityModuleResolver::GRAPHIQL_EXPLORER,
32			ClientFunctionalityModuleResolver::OPTION_USE_IN_ADMIN_CLIENT
33			);
34			}
35
36			protected function getGraphiQLWithExplorerClientHTML(): string
37			{
38			$instanceManager = InstanceManagerFacade::getInstance();
39			/**
40			* @var AdminGraphiQLWithExplorerClient
41			*/
42			$client = $instanceManager->getInstance(AdminGraphiQLWithExplorerClient::class);
43			return $client->getClientHTML();
44			}
45
46			public function print(): void
47			{
48			if (!$this->useGraphiQLExplorer()) {
49			?>
50			<div id="graphiql" class="graphiql-client">
51			<p>
52			<?php echo __('Loading...', 'graphql-api') ?>
53			<!--span class="spinner is-active" style="float: none;"></span-->
54			</p>
55			</div>
56			<?php
57			} else {
58			$htmlContent = $this->getGraphiQLWithExplorerClientHTML();
59			// Extract the HTML inside <body>
60			$matches = [];
61			preg_match('/<body([^>]+)?>(.*?)<\/body>/s', $htmlContent, $matches);
62			$bodyHTMLContent = $matches[2];
63			// Remove all JS/CSS assets, since they are enqueued
64			$bodyHTMLContent = preg_replace(
65			[
66			'/<link[^>]>(.)<\/link>"/s',
67			'/<script[^>]>(.)<\/script>/s',
68			],
69			'',
70			$bodyHTMLContent
71			);
72			echo $bodyHTMLContent;
73			}
74			}
75
76			/**
77			* Override, because this is the default page, so it is invoked
78			* with the menu slug wp-admin/admin.php?page=graphql_api,
79			* and not the menu page slug wp-admin/admin.php?page=graphql_api_graphiql
80			*
81			* @return string
82			*/
83			public function getScreenID(): string
84			{
85			return $this->getMenuName();
86			}
87
88			public function getMenuPageSlug(): string
89			{
90			return 'graphiql';
91			}
92
93			/**
94			* Enqueue the required assets and initialize the localized scripts
95			*
96			* @return void
97			*/
98			protected function enqueueAssets(): void
99			{
100			parent::enqueueAssets();
101
102			$useGraphiQLExplorer = $this->useGraphiQLExplorer();
103
104			// CSS
105			\wp_enqueue_style(
106			'graphql-api-graphiql-client',
107			\GRAPHQL_API_URL . 'assets/css/graphiql-client.css',
108			array(),
109			\GRAPHQL_API_VERSION
110			);
111
112			// Common settings to both clients
113			$scriptSettings = array(
114			'nonce' => \wp_create_nonce('wp_rest'),
115			'response' => $this->getResponse(),
116			);
117
118			if (!$useGraphiQLExplorer) {
119			\wp_enqueue_style(
120			'graphql-api-graphiql',
121			\GRAPHQL_API_URL . 'assets/css/vendors/graphiql.min.css',
122			array(),
123			\GRAPHQL_API_VERSION
124			);
125
126			// JS: execute them all in the footer
127			$this->enqueueReactAssets(true);
128
129			\wp_enqueue_script(
130			'graphql-api-graphiql',
131			\GRAPHQL_API_URL . 'assets/js/vendors/graphiql.min.js',
132			array('graphql-api-react-dom'),
133			\GRAPHQL_API_VERSION,
134			true
135			);
136			\wp_enqueue_script(
137			'graphql-api-graphiql-client',
138			\GRAPHQL_API_URL . 'assets/js/graphiql-client.js',
139			array('graphql-api-graphiql'),
140			\GRAPHQL_API_VERSION,
141			true
142			);
143
144			// Load data into the script
145			\wp_localize_script(
146			'graphql-api-graphiql-client',
147			'graphQLByPoPGraphiQLSettings',
148			array_merge(
149			[
150			'defaultQuery' => $this->getDefaultQuery(),
151			'endpoint' => EndpointHelpers::getAdminGraphQLEndpoint(),
152			],
153			$scriptSettings
154			)
155			);
156			} else {
157			// Print the HTML from the Client
158			$htmlContent = $this->getGraphiQLWithExplorerClientHTML();
159			// Extract the JS/CSS assets, from either the <head> or the <head>
160			$matches = [];
161			preg_match_all('/<link[^>]+href="([^">]+)"/s', $htmlContent, $matches);
162			$cssFileURLs = $matches[1];
163			foreach ($cssFileURLs as $index => $cssFileURL) {
164			\wp_enqueue_style(
165			'graphql-api-graphiql-with-explorer-' . $index,
166			$cssFileURL,
167			array(),
168			\GRAPHQL_API_VERSION
169			);
170			}
171			preg_match_all('/<script[^>]+src="([^">]+)"/s', $htmlContent, $matches);
172			$jsFileURLs = $matches[1];
173			foreach ($jsFileURLs as $index => $jsFileURL) {
174			\wp_enqueue_script(
175			'graphql-api-graphiql-with-explorer-' . $index,
176			$jsFileURL,
177			array(),
178			\GRAPHQL_API_VERSION,
179			true
180			);
181			}
182
183			// Override styles for the admin, so load last
184			\wp_enqueue_style(
185			'graphql-api-graphiql-with-explorer-client',
186			\GRAPHQL_API_URL . 'assets/css/graphiql-with-explorer-client.css',
187			array(),
188			\GRAPHQL_API_VERSION
189			);
190
191			// Load data into the script. Because no script is enqueued since it is
192			// in the body, then localize it to React
193			\wp_localize_script(
194			'graphql-api-graphiql-with-explorer-0',
195			'graphiQLWithExplorerClientForWP',
196			$scriptSettings
197			);
198			}
199			}
200
201			protected function getResponse(): string
202			{
203			return '';
204			// return \__('Click the "Execute Query" button, or press Ctrl+Enter (Command+Enter in Mac)', 'graphql-api');
205			}
206
207			protected function getDefaultQuery(): string
208			{
209			return <<<EOT
210			# Welcome to GraphiQL
211			#
212			# GraphiQL is an in-browser tool for writing, validating, and
213			# testing GraphQL queries.
214			#
215			# Type queries into this side of the screen, and you will see intelligent
216			# typeaheads aware of the current GraphQL type schema and live syntax and
217			# validation errors highlighted within the text.
218			#
219			# GraphQL queries typically start with a "{" character. Lines that starts
220			# with a # are ignored.
221			#
222			# An example GraphQL query might look like:
223			#
224			# {
225			# field(arg: "value") {
226			# subField
227			# }
228			# }
229			#
230			# Run the query (at any moment):
231			#
232			# Ctrl-Enter (or press the play button above)
233			#
234
235			query {
236			posts(limit:3) {
237			id
238			title
239			date(format:"d/m/Y")
240			url
241			author {
242			id
243			name
244			url
245			}
246			tags {
247			name
248			}
249			featuredImage {
250			src
251			}
252			}
253			}
254
255			EOT;
256			}
257			}
258

GraphQLAPI / graphql-api-for-wp

GitHub Access Token became invalid

Push — master ( aac044...cc3c72 )

GraphiQLMenuPage::enqueueAssets() B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like