33194: Update Swagger UI to 3.51.1 version and configure security definitions

app/code/Magento/Swagger/Test/Mftf/ActionGroup/StorefrontApplyAdminTokenOnSwaggerPageActionGroup.xml

@@ -15,8 +15,13 @@
             <argument name="token" type="string" defaultValue=""/>
         </arguments>
 
-        <clearField selector="{{SwaggerHeaderSection.apiKeyInput}}" stepKey="clearApiTokenField"/>
-        <fillField selector="{{SwaggerHeaderSection.apiKeyInput}}" userInput="{{token}}" stepKey="fillApiTokenInput"/>
-        <click selector="{{SwaggerHeaderSection.applyButton}}" stepKey="clickApplyButton" />
+        <click selector="{{SwaggerAuthorizeSection.authorizeButtonUnlocked}}" stepKey="clickAuthorizeButton"/>
+        <waitForElementVisible selector="{{SwaggerAuthorizeSection.apiKeyInput}}" stepKey="waitModalPopUp"/>
+        <clearField selector="{{SwaggerAuthorizeSection.apiKeyInput}}" stepKey="clearApiTokenField"/>
+        <fillField selector="{{SwaggerAuthorizeSection.apiKeyInput}}" userInput="{{token}}" stepKey="fillApiTokenInput"/>
+        <comment userInput="Comment is added to preserve the step key for backward compatibility" stepKey="clickApplyButton"/>
+        <click selector="{{SwaggerAuthorizeSection.authorizeModalButton}}" stepKey="clickModalAuthorizeButton"/>
+        <waitForPageLoad stepKey="waitForPageReloaded"/>
+        <click selector="{{SwaggerAuthorizeSection.closeModalButton}}" stepKey="clickModalCloseButton"/>
     </actionGroup>
 </actionGroups>

app/code/Magento/Swagger/Test/Mftf/ActionGroup/StorefrontSwaggerLogoutActionGroup.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="StorefrontSwaggerLogoutActionGroup">
+        <annotations>
+            <description>Logout Admin Token on Swagger Page</description>
+        </annotations>
+
+        <click selector="{{SwaggerAuthorizeSection.authorizeButtonLocked}}" stepKey="clickAuthorizeButton"/>
+        <click selector="{{SwaggerAuthorizeSection.logoutModalButton}}" stepKey="clickModalLogoutButton"/>
+        <waitForPageLoad stepKey="waitForPageReloaded"/>
+        <click selector="{{SwaggerAuthorizeSection.closeModalButton}}" stepKey="clickModalCloseButton" />
+        <seeElementInDOM selector="{{SwaggerAuthorizeSection.authorizeButtonUnlocked}}" stepKey="assertIsLoggedOut"/>
+    </actionGroup>
+</actionGroups>

app/code/Magento/Swagger/Test/Mftf/Page/SwaggerPage.xml

@@ -8,6 +8,7 @@
 
 <pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/PageObject.xsd">
     <page name="StorefrontSwaggerPage" url="/swagger" area="storefront" module="Swagger">
+        <section name="SwaggerAuthorizeSection"/>
         <section name="SwaggerHeaderSection"/>
         <section name="SwaggerApiListSection"/>
     </page>

app/code/Magento/Swagger/Test/Mftf/Section/SwaggerAuthorizeSection.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
+    <section name="SwaggerAuthorizeSection">
+        <element name="authorizeButtonUnlocked" type="button" selector=".btn.authorize.unlocked"/>
+        <element name="authorizeButtonLocked" type="button" selector=".btn.authorize.locked"/>
+        <element name="authorizeModalButton" type="button" selector=".btn.auth.authorize"/>
+        <element name="logoutModalButton" type="button" selector=".btn.modal-btn.auth"/>
+        <element name="closeModalButton" type="button" selector=".btn.modal-btn.auth.btn-done"/>
+        <element name="apiKeyInput" type="input" selector=".auth-container .wrapper input"/>
+    </section>
+</sections>

app/code/Magento/Swagger/Test/Mftf/Test/StorefrontMagentoApiSwaggerActionsExistTest.xml

@@ -0,0 +1,33 @@
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
+    <test name="StorefrontMagentoApiSwaggerActionsExistTest">
+        <annotations>
+            <features value="Swagger"/>
+            <stories value="Swagger via the Storefront"/>
+            <title value="Authorize and logout on Swagger page"/>
+            <description value="Authorize and logout on Swagger page use API Key"/>
+            <severity value="CRITICAL"/>
+        </annotations>
+        <before>
+            <getOTP stepKey="getOtpCode"/>
+            <createData entity="adminApiToken" stepKey="createAdminToken">
+                <field key="otp">{$getOtpCode}</field>
+            </createData>
+        </before>
+        <after></after>
+        <actionGroup ref="StorefrontGoToSwaggerPageActionGroup" stepKey="goToSwaggerPage"/>
+        <actionGroup ref="StorefrontApplyAdminTokenOnSwaggerPageActionGroup" stepKey="applyAdminToken">
+            <argument name="token" value="$createAdminToken.return$"/>
+        </actionGroup>
+        <seeElement selector="{{SwaggerApiListSection.swaggerActionTitle('storeStoreRepositoryV1')}}" stepKey="assertTitleOfFirstAction"/>
+        <seeElement selector="{{SwaggerApiListSection.swaggerActionTitle('quoteCartRepositoryV1')}}" stepKey="assertTitleOfSecondAction"/>
+        <seeElement selector="{{SwaggerApiListSection.swaggerActionTitle('catalogProductRepositoryV1')}}" stepKey="assertTitleOfThirdAction"/>
+        <actionGroup ref="StorefrontSwaggerLogoutActionGroup" stepKey="swaggerLogout"/>
+    </test>
+</tests>

app/code/Magento/Swagger/view/frontend/layout/swagger_index_index.xml

@@ -12,9 +12,6 @@
         <!--<title>Swagger UI assets</title>-->
         <css src='Magento_Swagger::swagger-ui/css/style.css' media='screen' rel='stylesheet' type='text/css'/>
         <css src='Magento_Swagger::swagger-ui/css/swagger-ui.css' media='screen' rel='stylesheet' type='text/css'/>
-        <link src='Magento_Swagger::swagger-ui/js/lang/translator.js' type='text/javascript' defer="defer"/>
-        <link src='Magento_Swagger::swagger-ui/js/lang/ru.js' type='text/javascript' defer="defer"/>
-        <link src='Magento_Swagger::swagger-ui/js/lang/en.js' type='text/javascript' defer="defer"/>
         <link src='Magento_Swagger::swagger-ui/js/swagger-ui-bundle.min.js' type='text/javascript' defer="defer"/>
         <link src='Magento_Swagger::swagger-ui/js/swagger-ui-standalone-preset.min.js' type='text/javascript' defer="defer"/>
         <link src='Magento_Swagger::swagger-ui/js/magento-swagger.js' type='text/javascript' defer="defer"/>

app/code/Magento/Swagger/view/frontend/templates/swagger-ui/index.phtml

@@ -3,7 +3,7 @@
  * swagger-ui - Swagger UI is a dependency-free collection of HTML, JavaScript, and CSS
  * assets that dynamically generate beautiful documentation from a Swagger-compliant API
  *
- * @version v2.1.1
+ * @version v3.51.1
  * @link http://swagger.io
  * @license Apache-2.0
  *
@@ -14,6 +14,7 @@
 
 /**
  * @var \Magento\Swagger\Block\Index $block
+ * @var \Magento\Framework\Escaper $escaper
  */
 
 $schemaUrl = $block->getSchemaUrl();
@@ -53,16 +54,4 @@ $schemaUrl = $block->getSchemaUrl();
     </defs>
 </svg>
 
-<div id='header'>
-    <div class="swagger-ui-wrap">
-        <a id="logo" href="http://swagger.io">swagger</a>
-        <form id='api_selector'>
-            <input id="input_baseUrl" type="hidden" value="<?= $block->escapeUrl($schemaUrl) ?>"/>
-            <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
-            <div class='input'><a id="explore" href="#" data-sw-translate>apply</a></div>
-        </form>
-    </div>
-</div>
-
-<div id="message-bar" class="swagger-ui-wrap" data-sw-translate>&nbsp;</div>
-<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
+<div id="swagger-ui" data-base-url="<?= $escaper->escapeUrl($schemaUrl) ?>"></div>

app/code/Magento/Swagger/view/frontend/web/swagger-ui/css/style.css

@@ -1,3 +1,13 @@
+html {
+    box-sizing: border-box;
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+}
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
 body {
   margin:0;
   background: #fafafa;