feat: use backward compatible UI from v6 on v5 (#2912)

* feat: upgrade ui theme plugin v4

* chore: fix e2e

* fix: format

* chore: update theme ui

.pnp.js

@@ -85,7 +85,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@verdaccio/readme", "npm:10.2.0"],
             ["@verdaccio/streams", "npm:10.1.0"],
             ["@verdaccio/types", "npm:10.2.2"],
-            ["@verdaccio/ui-theme", "npm:3.4.1"],
+            ["@verdaccio/ui-theme", "npm:6.0.0-6-next.14"],
             ["JSONStream", "npm:1.3.5"],
             ["all-contributors-cli", "npm:6.20.0"],
             ["async", "npm:3.2.2"],
@@ -5579,10 +5579,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
         }]
       ]],
       ["@verdaccio/ui-theme", [
-        ["npm:3.4.1", {
-          "packageLocation": "./.yarn/cache/@verdaccio-ui-theme-npm-3.4.1-ff9f347e40-9873985e77.zip/node_modules/@verdaccio/ui-theme/",
+        ["npm:6.0.0-6-next.14", {
+          "packageLocation": "./.yarn/cache/@verdaccio-ui-theme-npm-6.0.0-6-next.14-bb07b4ae3e-a6072d1835.zip/node_modules/@verdaccio/ui-theme/",
           "packageDependencies": [
-            ["@verdaccio/ui-theme", "npm:3.4.1"]
+            ["@verdaccio/ui-theme", "npm:6.0.0-6-next.14"]
           ],
           "linkType": "HARD",
         }]
@@ -7778,14 +7778,14 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
       ]],
       ["core-js", [
         ["npm:2.6.9", {
-          "packageLocation": "./.yarn/cache/core-js-npm-2.6.9-f821bf686c-00c30207eb.zip/node_modules/core-js/",
+          "packageLocation": "./.yarn/unplugged/core-js-npm-2.6.9-f821bf686c/node_modules/core-js/",
           "packageDependencies": [
             ["core-js", "npm:2.6.9"]
           ],
           "linkType": "HARD",
         }],
         ["npm:3.20.2", {
-          "packageLocation": "./.yarn/cache/core-js-npm-3.20.2-656ea79cc8-642927e21a.zip/node_modules/core-js/",
+          "packageLocation": "./.yarn/unplugged/core-js-npm-3.20.2-656ea79cc8/node_modules/core-js/",
           "packageDependencies": [
             ["core-js", "npm:3.20.2"]
           ],
@@ -14901,7 +14901,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
       ]],
       ["puppeteer", [
         ["npm:5.5.0", {
-          "packageLocation": "./.yarn/cache/puppeteer-npm-5.5.0-bba75ba998-08ba8a7da5.zip/node_modules/puppeteer/",
+          "packageLocation": "./.yarn/unplugged/puppeteer-npm-5.5.0-bba75ba998/node_modules/puppeteer/",
           "packageDependencies": [
             ["puppeteer", "npm:5.5.0"],
             ["debug", "virtual:65523936f66795efc0bd6f7ca9a755f1be9f9bb998dc7cd39f5d823ea185c793a03b3f329f921a146569ee8bdffdd22dd15c2e08d286539b118e1cbbab91f8cf#npm:4.1.1"],
@@ -17661,7 +17661,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["@verdaccio/readme", "npm:10.2.0"],
             ["@verdaccio/streams", "npm:10.1.0"],
             ["@verdaccio/types", "npm:10.2.2"],
-            ["@verdaccio/ui-theme", "npm:3.4.1"],
+            ["@verdaccio/ui-theme", "npm:6.0.0-6-next.14"],
             ["JSONStream", "npm:1.3.5"],
             ["all-contributors-cli", "npm:6.20.0"],
             ["async", "npm:3.2.2"],

package.json

@@ -22,7 +22,7 @@
     "@verdaccio/local-storage": "10.1.0",
     "@verdaccio/readme": "10.2.0",
     "@verdaccio/streams": "10.1.0",
-    "@verdaccio/ui-theme": "3.4.1",
+    "@verdaccio/ui-theme": "6.0.0-6-next.14",
     "JSONStream": "1.3.5",
     "async": "3.2.2",
     "body-parser": "1.19.1",

test/e2e/e2e.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const protectedPackageMetadata = require('./partials/pkg-protected');
 const scopedPackageMetadata = require('./partials/pkg-scoped');
 
@@ -25,12 +26,10 @@ describe('/ (Verdaccio Page)', () => {
   };
 
   const logIn = async function () {
-    await clickElement('button[data-testid="header--button-login"]');
-    // we fill the sign in form
-    const signInDialog = await page.$('#login--dialog');
-    const userInput = await signInDialog.$('#login--dialog-username');
+    await clickElement('div[data-testid="dialogContentLogin"]');
+    const userInput = await page.$('#login--dialog-username');
     expect(userInput).not.toBeNull();
-    const passInput = await signInDialog.$('#login--dialog-password');
+    const passInput = await page.$('#login--dialog-password');
     expect(passInput).not.toBeNull();
     await userInput.type('test', { delay: 100 });
     await passInput.type('test', { delay: 100 });
@@ -40,13 +39,12 @@ describe('/ (Verdaccio Page)', () => {
     expect(loginButton).toBeDefined();
     await loginButton.focus();
     await loginButton.click({ delay: 100 });
-    await page.waitFor(500);
+    await page.waitForTimeout(500);
   };
 
   beforeAll(async () => {
     page = await global.__BROWSER__.newPage();
     await page.goto('http://0.0.0.0:55558');
-    // eslint-disable-next-line no-console
     page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
   });
 
@@ -56,7 +54,7 @@ describe('/ (Verdaccio Page)', () => {
 
   test('should display title', async () => {
     const text = await page.title();
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
 
     expect(text).toContain('verdaccio-server-e2e');
   });
@@ -88,51 +86,43 @@ describe('/ (Verdaccio Page)', () => {
   test('should click on sign in button', async () => {
     const signInButton = await page.$('button[data-testid="header--button-login"]');
     await signInButton.click();
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     const signInDialog = await page.$('#login--dialog');
     expect(signInDialog).not.toBeNull();
     const closeButton = await page.$('button[data-testid="close-login-dialog-button"]');
     await closeButton.click();
-    await page.waitFor(500);
+    await page.waitForTimeout(500);
   });
   //
 
   test('should log in an user', async () => {
     // we open the dialog
     await logIn();
+    // verify if logged in
+    const accountButton = await page.$('#header--button-account');
+    expect(accountButton).toBeDefined();
     // check whether user is logged
-    const buttonLogout = await page.$('#header--button-logout');
+    const buttonLogout = await page.$('#logOutDialogIcon');
     expect(buttonLogout).toBeDefined();
   });
 
   test('should logout an user', async () => {
+    // await wa
+    await page.waitForTimeout(10000);
     // we assume the user is logged already
     await clickElement('#header--button-account', { delay: 500 });
-    await page.waitFor(1000);
-    await clickElement('#header--button-logout > span', { delay: 500 });
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
+    await clickElement('#logOutDialogIcon > span', { delay: 500 });
+    await page.waitForTimeout(1000);
     await evaluateSignIn();
   });
   //
 
-  test('should check registry info dialog', async () => {
-    const registryInfoButton = await page.$('#header--button-registryInfo');
-    registryInfoButton.click();
-    await page.waitFor(500);
-
-    const registryInfoDialog = await page.$('#registryInfo--dialog-container');
-    expect(registryInfoDialog).not.toBeNull();
-
-    const closeButton = await page.$('#registryInfo--dialog-close');
-    await closeButton.click();
-  });
-  //
-
   test('should publish a package', async () => {
     await global.__SERVER__.putPackage(scopedPackageMetadata.name, scopedPackageMetadata);
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     await page.reload();
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     const packagesList = await getPackages();
     expect(packagesList).toHaveLength(1);
   });
@@ -143,7 +133,7 @@ describe('/ (Verdaccio Page)', () => {
     // console.log("-->packagesList:", packagesList);
     const firstPackage = packagesList[0];
     await firstPackage.click({ delay: 200 });
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     const readmeText = await page.evaluate(() => document.querySelector('.markdown-body').textContent);
 
     expect(readmeText).toMatch('test');
@@ -159,7 +149,7 @@ describe('/ (Verdaccio Page)', () => {
     const dependenciesTab = await page.$$('#dependencies-tab');
     expect(dependenciesTab).toHaveLength(1);
     await dependenciesTab[0].click({ delay: 200 });
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     const tags = await page.$$('.dep-tag');
     const tag = tags[0];
     const label = await page.evaluate((el) => el.innerText, tag);
@@ -170,7 +160,7 @@ describe('/ (Verdaccio Page)', () => {
     const versionsTab = await page.$$('#versions-tab');
     expect(versionsTab).toHaveLength(1);
     await versionsTab[0].click({ delay: 200 });
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
     const versionItems = await page.$$('.version-item');
     expect(versionItems).toHaveLength(2);
   });
@@ -179,30 +169,30 @@ describe('/ (Verdaccio Page)', () => {
     const upLinksTab = await page.$$('#uplinks-tab');
     expect(upLinksTab).toHaveLength(1);
     await upLinksTab[0].click({ delay: 200 });
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
   });
 
   test('should display readme tab', async () => {
     const readmeTab = await page.$$('#readme-tab');
     expect(readmeTab).toHaveLength(1);
     await readmeTab[0].click({ delay: 200 });
-    await page.waitFor(1000);
+    await page.waitForTimeout(1000);
   });
 
   test('should publish a protected package', async () => {
     await page.goto('http://0.0.0.0:55552');
-    await page.waitFor(500);
+    await page.waitForTimeout(500);
     await global.__SERVER_PROTECTED__.putPackage(protectedPackageMetadata.name, protectedPackageMetadata);
-    await page.waitFor(500);
+    await page.waitForTimeout(500);
     await page.reload();
-    await page.waitFor(500);
+    await page.waitForTimeout(500);
     const text = await page.evaluate(() => document.querySelector('#help-card__title').textContent);
     expect(text).toMatch('No Package Published Yet');
   });
 
   test('should go to 404 page', async () => {
     await page.goto('http://0.0.0.0:55552/-/web/detail/@verdaccio/not-found');
-    await page.waitFor(500);
+    await page.waitForTimeout(500);
     const text = await page.evaluate(() => document.querySelector('.not-found-text').textContent);
     expect(text).toMatch("Sorry, we couldn't find it...");
   });