diff --git a/package.json b/package.json index 7081875..cbdda01 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,9 @@ "prepare": "husky", "start": "wp-scripts start", "test:e2e": "wp-scripts test-playwright", + "test:e2e:debug": "wp-scripts test-playwright --ui", "test:js": "wp-scripts test-unit-js", + "test:js:update": "wp-scripts test-unit-js --updateSnapshot", "test:performance": "wp-scripts test-playwright --config tests/performance/playwright.config.ts", "test:performance:merge-reports": "playwright merge-reports --reporter tests/performance/config/performance-reporter.ts ./blob-report", "test:performance:results": "node tests/performance/cli/results.js", @@ -29,6 +31,7 @@ }, "dependencies": { "@testing-library/user-event": "^14.5.2", + "@types/react-highlight": "^0.12.8", "@wordpress/api-fetch": "^6.48.0", "@wordpress/components": "^27.1.0", "@wordpress/data": "^9.23.0", @@ -39,7 +42,9 @@ "dotenv": "^16.4.5", "react": "18.2.0", "react-dom": "18.2.0", - "react-syntax-highlighter": "^15.5.0", + "react-highlight": "^0.15.0", + "react-highlight-syntax": "^1.2.1", + "react-syntax-highlighter": "^15.4.3", "react-test-renderer": "^18.2.0", "ts-loader": "^9.5.1", "typescript": "^5.4.2" @@ -50,7 +55,7 @@ "@testing-library/react": "14.2.2", "@types/jest": "^29.5.12", "@types/node": "^20.12.5", - "@types/react-syntax-highlighter": "^15.5.11", + "@types/react-syntax-highlighter": "15.5.6", "@types/wordpress__components": "^23.0.11", "@wordpress/e2e-test-utils-playwright": "^0.22.0", "@wordpress/env": "^9.7.0", diff --git a/playwright.config.ts b/playwright.config.ts index cd5dc73..f501d47 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -17,7 +17,7 @@ export default defineConfig({ use: { baseURL: process.env.WP_BASE_URL, trace: 'on-first-retry', - permissions: ['clipboard-read'], + permissions: ['clipboard-write', 'clipboard-read'], }, projects: [ diff --git a/src/components/snippets/JsSnippet.tsx b/src/components/snippets/JsSnippet.tsx index bcf88fe..e36e5f8 100644 --- a/src/components/snippets/JsSnippet.tsx +++ b/src/components/snippets/JsSnippet.tsx @@ -1,7 +1,6 @@ import Snippet from './Snippet'; import { useMemo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import Clipboard from '../common/Clipboard'; const JsSnippet = ({ flag }: { flag: string }) => { const jsSnippet = useMemo(() => { @@ -18,8 +17,7 @@ domReady(function () { return (
-
-
- import
-
-
- domReady
-
-
+
+
+
+
+
- from
-
-
+
+ import
+
+ domReady
+
+ from
+
-
-
- '@wordpress/dom-ready'
-
-
+
+ '@wordpress/dom-ready'
+
;
-
-
-
- domReady(
-
-
- function
-
-
- (
-
-
- )
-
-
+domReady(
+
+
+ function
+
+ (
+
+ )
+
{
-
-
-
-
-
-
- if
-
-
+
+
+ if
+
(
-
-
-
-
-
-
- typeof
-
-
+
+
+ typeof
+
-
-
- window
-
-
+
+ window
+
?.codebFeatureFlags !==
-
-
- 'undefined'
-
-
+
+ 'undefined'
+
&&
-
-
-
-
-
-
- window
-
-
+
+
+ window
+
.codebFeatureFlags.isEnabled(
-
-
- 'testFlag1'
-
-
+
+ 'testFlag1'
+
)
-
-
- ) {
-
-
-
-
-
- // js code goes here...
-
-
+ ) {
+
+
+ // js code goes here...
+
-
-
- }
+ }
});
-
-
+
+
+
`;
@@ -163,149 +141,127 @@ exports[`JsSnippet component should update the JavaScript snippet when the flag
-
-
- import
-
-
- domReady
-
-
+
+
+
+
+
- from
-
-
+
+ import
+
+ domReady
+
+ from
+
-
-
- '@wordpress/dom-ready'
-
-
+
+ '@wordpress/dom-ready'
+
;
-
-
-
- domReady(
-
-
- function
-
-
- (
-
-
- )
-
-
+domReady(
+
+
+ function
+
+ (
+
+ )
+
{
-
-
-
-
-
-
- if
-
-
+
+
+ if
+
(
-
-
-
-
-
-
- typeof
-
-
+
+
+ typeof
+
-
-
- window
-
-
+
+ window
+
?.codebFeatureFlags !==
-
-
- 'undefined'
-
-
+
+ 'undefined'
+
&&
-
-
-
-
-
-
- window
-
-
+
+
+ window
+
.codebFeatureFlags.isEnabled(
-
-
- 'testFlag2'
-
-
+
+ 'testFlag2'
+
)
-
-
- ) {
-
-
-
-
-
- // js code goes here...
-
-
+ ) {
+
+
+ // js code goes here...
+
-
-
- }
+ }
});
-
-
+
+
+
`;
diff --git a/src/components/snippets/__tests__/__snapshots__/PhpSnippet.test.js.snap b/src/components/snippets/__tests__/__snapshots__/PhpSnippet.test.js.snap
index f1b4eca..286a36a 100644
--- a/src/components/snippets/__tests__/__snapshots__/PhpSnippet.test.js.snap
+++ b/src/components/snippets/__tests__/__snapshots__/PhpSnippet.test.js.snap
@@ -8,97 +8,95 @@ exports[`PhpSnippet component matches snapshot 1`] = `
-
-
- use
-
-
-
-
-
+
+
+
+
+
- CodeB
-
-
+
+ use
+
+
+
+ CodeB
+
\\
-
-
- FeatureFlags
-
-
+
+ FeatureFlags
+
\\
-
-
- Flag
-
-
+
+ Flag
+
;
-
-
-
- if
-
-
+
+ if
+
( class_exists(
-
-
- '\\CodeB\\FeatureFlags\\Flag'
-
-
+
+ '\\CodeB\\FeatureFlags\\Flag'
+
) && Flag::is_enabled(
-
-
- 'testFlag'
-
-
+
+ 'testFlag'
+
) ) {
-
-
-
-
-
-
- // php code goes here...
-
-
+
+
+ // php code goes here...
+
-
-
- }
-
-
+}
+
+
+
`;
diff --git a/src/components/snippets/__tests__/__snapshots__/TsSupport.test.js.snap b/src/components/snippets/__tests__/__snapshots__/TsSupport.test.js.snap
index f4ae727..9fd309b 100644
--- a/src/components/snippets/__tests__/__snapshots__/TsSupport.test.js.snap
+++ b/src/components/snippets/__tests__/__snapshots__/TsSupport.test.js.snap
@@ -23,164 +23,137 @@ exports[`Typescript snippet component renders without any error 1`] = `
directory ) and add the following declaration.
-
-
-
-
- declare
-
-
-
-
-
+
+
+
+
+
- namespace
-
-
+
+ declare
+
+
+
+ namespace
+
codebFeatureFlags {
-
-
-
-
-
-
- export
-
-
+
+
+ export
+
-
-
- interface
-
-
+
+ interface
+
FeatureFlagProps {
-
-
-
-
-
-
- isEnabled
-
-
+
+
+ isEnabled
+
:
-
-
- (
-
-
- flag:
-
-
- string
-
-
- ) =>
-
-
+
+ (
+
+ flag:
+
+ string
+
+
+ ) =>
+
-
-
- boolean
-
-
+
+ boolean
+
;
-
-
- }
+ }
}
-
-
- declare
-
-
+
+ declare
+
-
-
- global
-
-
+
+ global
+
{
-
-
-
-
-
-
- interface
-
-
+
+
+ interface
+
Window {
-
-
-
-
-
-
- codebFeatureFlags
-
-
+
+
+ codebFeatureFlags
+
: codebFeatureFlags.FeatureFlagProps;
-
-
- }
+ }
}
-
-
- export
-
-
+
+ export
+
{};
-
-
-
+
+
+
`;
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index bb0e59c..3ac7b39 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -18,9 +18,15 @@
.components-snackbar__icon {
top: auto;
left: 18px;
+ position: absolute;
}
}
+.components-snackbar .components-snackbar__content-with-icon {
+ padding-left: 24px;
+ position: static !important;
+}
+
.feature-flag-loader {
.components-spinner {
diff --git a/tests/e2e/feature-flags.spec.ts b/tests/e2e/feature-flags.spec.ts
index 7d56cfe..b55e702 100644
--- a/tests/e2e/feature-flags.spec.ts
+++ b/tests/e2e/feature-flags.spec.ts
@@ -97,14 +97,16 @@ test.describe('Feature flags', () => {
).toBeVisible();
// Check PHP Snippet clipboard details
- await page.getByLabel('Copy to clipboard').first().click();
+ await page.getByRole('button').nth(1).click();
+
+ // await page.getByLabel('Copy to clipboard').first().click();
const phpClipboardText = await page.evaluate(
'navigator.clipboard.readText()'
);
expect(phpClipboardText).toContain(`Flag::is_enabled( '${flagName}' )`);
// Check JS Snippet clipboard details
- await page.getByLabel('Copy to clipboard').nth(1).click();
+ await page.getByRole('button').nth(2).click();
const jsClipboardText: string = await page.evaluate(
'navigator.clipboard.readText()'
);
diff --git a/tests/e2e/screenshots/delete-flag-modal.png b/tests/e2e/screenshots/delete-flag-modal.png
new file mode 100644
index 0000000..05c1004
Binary files /dev/null and b/tests/e2e/screenshots/delete-flag-modal.png differ
diff --git a/tests/e2e/screenshots/flag-disabled.png b/tests/e2e/screenshots/flag-disabled.png
new file mode 100644
index 0000000..6dcf4cc
Binary files /dev/null and b/tests/e2e/screenshots/flag-disabled.png differ
diff --git a/tests/e2e/screenshots/no-flags.png b/tests/e2e/screenshots/no-flags.png
new file mode 100644
index 0000000..98fb0f1
Binary files /dev/null and b/tests/e2e/screenshots/no-flags.png differ
diff --git a/tests/e2e/screenshots/sdk-modal.png b/tests/e2e/screenshots/sdk-modal.png
new file mode 100644
index 0000000..aed20fa
Binary files /dev/null and b/tests/e2e/screenshots/sdk-modal.png differ
diff --git a/tests/e2e/screenshots/some-flags.png b/tests/e2e/screenshots/some-flags.png
new file mode 100644
index 0000000..6f53c60
Binary files /dev/null and b/tests/e2e/screenshots/some-flags.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts b/tests/e2e/visual-comparison.spec.ts
index c962640..2b2853c 100644
--- a/tests/e2e/visual-comparison.spec.ts
+++ b/tests/e2e/visual-comparison.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+import { test } from '@wordpress/e2e-test-utils-playwright';
import {
AddNewFlagAndFill,
CloseSdkModal,
@@ -23,7 +23,9 @@ test.describe('Visual tests', () => {
});
test('Feature flags screen without flags', async ({ page }) => {
- await expect(page).toHaveScreenshot('no-flags.png');
+ await page
+ .locator('#codeb_feature_flags_settings_screen')
+ .screenshot({ path: 'tests/e2e/screenshots/no-flags.png' });
});
test('Feature flags screen with some flags', async ({ page }) => {
@@ -33,13 +35,18 @@ test.describe('Visual tests', () => {
await AddNewFlagAndFill(page, 'healthCheck');
await SaveFlags(page);
- await expect(page).toHaveScreenshot('some-flags.png');
+
+ await page
+ .locator('#codeb_feature_flags_settings_screen')
+ .screenshot({ path: 'tests/e2e/screenshots/some-flags.png' });
});
test('Toggle feature flag', async ({ page }) => {
await AddNewFlagAndFill(page, 'auth0');
await DisableFlag(page, true);
- await expect(page).toHaveScreenshot('flag-disabled.png');
+ await page
+ .locator('#codeb_feature_flags_settings_screen')
+ .screenshot({ path: 'tests/e2e/screenshots/flag-disabled.png' });
});
test('Delete flag modal', async ({ page }) => {
@@ -51,7 +58,11 @@ test.describe('Visual tests', () => {
.getByLabel('Delete Flag')
.click();
- await expect(page).toHaveScreenshot('delete-flag-modal.png');
+ await page
+ .locator('#codeb_feature_flags_settings_screen')
+ .screenshot({
+ path: 'tests/e2e/screenshots/delete-flag-modal.png',
+ });
await page.getByRole('button', { name: 'Yes' }).click();
});
@@ -60,7 +71,9 @@ test.describe('Visual tests', () => {
await AddNewFlagAndFill(page, 'drag-drop');
await OpenSdkModal(page);
- await expect(page).toHaveScreenshot('sdk-modal.png');
+ await page
+ .locator('#codeb_feature_flags_settings_screen')
+ .screenshot({ path: 'tests/e2e/screenshots/sdk-modal.png' });
await CloseSdkModal(page);
});
diff --git a/yarn.lock b/yarn.lock
index d47af1d..bf2e460 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1058,13 +1058,20 @@
resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.24.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
dependencies:
regenerator-runtime "^0.14.0"
+"@babel/runtime@^7.3.1":
+ version "7.25.6"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+ integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/template@^7.22.15", "@babel/template@^7.24.0", "@babel/template@^7.3.3":
version "7.24.0"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
@@ -2265,10 +2272,17 @@
dependencies:
"@types/react" "*"
-"@types/react-syntax-highlighter@^15.5.11":
- version "15.5.11"
- resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.11.tgz#e050745b22eff81fc13cb0c763dd0d063413bbf1"
- integrity sha512-ZqIJl+Pg8kD+47kxUjvrlElrraSUrYa4h0dauY/U/FTUuprSCqvUj+9PNQNQzVc6AJgIWUUxn87/gqsMHNbRjw==
+"@types/react-highlight@^0.12.8":
+ version "0.12.8"
+ resolved "https://registry.yarnpkg.com/@types/react-highlight/-/react-highlight-0.12.8.tgz#46476e6ae60f21a60f5b1fd1954944c63f4b23d9"
+ integrity sha512-V7O7zwXUw8WSPd//YUO8sz489J/EeobJljASGhP0rClrvq+1Y1qWEpToGu+Pp7YuChxhAXSgkLkrOYpZX5A62g==
+ dependencies:
+ "@types/react" "*"
+
+"@types/react-syntax-highlighter@15.5.6":
+ version "15.5.6"
+ resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.6.tgz#77c95e6b74d2be23208fcdcf187b93b47025f1b1"
+ integrity sha512-i7wFuLbIAFlabTeD2I1cLjEOrG/xdMa/rpx2zwzAoGHuXJDhSqp9BSfDlMHSh9JSuNfxHk9eEmMX6D55GiyjGg==
dependencies:
"@types/react" "*"
@@ -2367,9 +2381,9 @@
source-map "^0.6.1"
"@types/unist@^2":
- version "2.0.10"
- resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.10.tgz#04ffa7f406ab628f7f7e97ca23e290cd8ab15efc"
- integrity sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==
+ version "2.0.11"
+ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.11.tgz#11af57b127e32487774841f7a4e54eab166d03c4"
+ integrity sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==
"@types/webpack-sources@*":
version "3.2.3"
@@ -2743,7 +2757,7 @@
"@wordpress/dom-ready" "^3.53.0"
"@wordpress/i18n" "^4.53.0"
-"@wordpress/api-fetch@^6.48.0", "@wordpress/api-fetch@^6.51.0", "@wordpress/api-fetch@^6.52.0":
+"@wordpress/api-fetch@^6.48.0", "@wordpress/api-fetch@^6.51.0":
version "6.52.0"
resolved "https://registry.yarnpkg.com/@wordpress/api-fetch/-/api-fetch-6.52.0.tgz#eb79b4ab7ad7df5297a554e0839449e9217a32c8"
integrity sha512-zLgpRT6iKdfQupF7hGYbixjqgkeU2taclEHbbQqP6ClLfG709I3kX6Ft+2wh6FaG8MhdVZkl0/E0DTROJ5lbyA==
@@ -2934,21 +2948,6 @@
mime "^3.0.0"
web-vitals "^3.5.0"
-"@wordpress/e2e-test-utils-playwright@^0.23.0":
- version "0.23.0"
- resolved "https://registry.yarnpkg.com/@wordpress/e2e-test-utils-playwright/-/e2e-test-utils-playwright-0.23.0.tgz#246c3c8d79a4a0cf2e639f4aa73154cbde247742"
- integrity sha512-IrLvLho82nWG0tPYNODHtMYRjehMVR2w+wwM3NoEOjHxhAfDCBU0+/7e63z/obAOWDLKe1jeCXXQ6sRyr1cOMw==
- dependencies:
- "@wordpress/api-fetch" "^6.52.0"
- "@wordpress/keycodes" "^3.55.0"
- "@wordpress/url" "^3.56.0"
- change-case "^4.1.2"
- form-data "^4.0.0"
- get-port "^5.1.1"
- lighthouse "^10.4.0"
- mime "^3.0.0"
- web-vitals "^3.5.0"
-
"@wordpress/element@^5.0.0", "@wordpress/element@^5.30.0":
version "5.30.0"
resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-5.30.0.tgz#8ea18fe92419d7db279c2629c367bb7825578ef6"
@@ -3088,7 +3087,7 @@
"@wordpress/jest-console" "^7.25.0"
babel-jest "^29.6.2"
-"@wordpress/keycodes@^3.53.0", "@wordpress/keycodes@^3.54.0", "@wordpress/keycodes@^3.55.0":
+"@wordpress/keycodes@^3.53.0", "@wordpress/keycodes@^3.54.0":
version "3.55.0"
resolved "https://registry.yarnpkg.com/@wordpress/keycodes/-/keycodes-3.55.0.tgz#a964da7a4089be33492fcb4df2442468c2f05c9d"
integrity sha512-93Z479aesGmCo2BZ4UX8gVGabVfj128hCaod1cknZBkOymYxOCc6bobiEQ3ncZ1m6HTxAt5ikjeDXoWuCrPKsQ==
@@ -6391,7 +6390,7 @@ highlight-words-core@^1.2.2:
resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
-highlight.js@^10.4.1, highlight.js@~10.7.0:
+highlight.js@^10.4.1, highlight.js@^10.5.0, highlight.js@~10.7.0:
version "10.7.3"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
@@ -9458,6 +9457,18 @@ react-dom@18.2.0, react-dom@^18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"
+react-highlight-syntax@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/react-highlight-syntax/-/react-highlight-syntax-1.2.1.tgz#ce95af5247cf3526463dd9e3d1d59de077ea2e71"
+ integrity sha512-iX8icq0fdRZFf4vqBWIBtgiNJOGZ1rpsngbjlrBPzub2AhBU9ei5nUn98GONvHWiH4k/mi/pV/wRDySRhr60zA==
+
+react-highlight@^0.15.0:
+ version "0.15.0"
+ resolved "https://registry.yarnpkg.com/react-highlight/-/react-highlight-0.15.0.tgz#66749d01969853327d499959558f9468330cd9d8"
+ integrity sha512-5uV/b/N4Z421GSVVe05fz+OfTsJtFzx/fJBdafZyw4LS70XjIZwgEx3Lrkfc01W/RzZ2Dtfb0DApoaJFAIKBtA==
+ dependencies:
+ highlight.js "^10.5.0"
+
"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -9486,7 +9497,7 @@ react-shallow-renderer@^16.15.0:
object-assign "^4.1.1"
react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
-react-syntax-highlighter@^15.5.0:
+react-syntax-highlighter@^15.4.3:
version "15.5.0"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==