From 4fed56a115c2a71388a25a6bd2615df72e646454 Mon Sep 17 00:00:00 2001
From: Victor Fernandes <victor.fernandes@rows.com>
Date: Thu, 8 Feb 2024 15:00:49 +0000
Subject: [PATCH] feat: async features (#42)

* Add skeleton

* fix e2e flakiness

* gfix e2e flakiness
---
 .github/workflows/pull-request.yml  |  6 +--
 e2e/scrappers.test.ts               | 20 ++++++++--
 jest-puppeteer.config.cjs           |  4 +-
 src/App.tsx                         |  9 ++++-
 src/components/loading-skeleton.tsx | 62 +++++++++++++++++++++++++++++
 src/components/preview.tsx          |  7 ++--
 src/index.css                       | 14 +++++++
 src/utils/scrappers/custom.ts       |  4 ++
 src/utils/scrappers/html-tables.ts  |  5 ++-
 9 files changed, 112 insertions(+), 19 deletions(-)
 create mode 100644 src/components/loading-skeleton.tsx

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 085bb55e..4b83afe3 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -4,10 +4,6 @@ on:
   pull_request:
     types: [opened, reopened, synchronize, ready_for_review]
 
-# Environment variables available to all jobs and steps in this workflow
-env:
-  CHROME_VERSION: 121.0.6167.85
-
 jobs:
   audit:
     name: Audit dependencies
@@ -45,7 +41,7 @@ jobs:
 
   test:
     name: E2E Tests
-    runs-on: ubuntu-4-core-runner
+    runs-on: rows-fe-default
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
diff --git a/e2e/scrappers.test.ts b/e2e/scrappers.test.ts
index 423ff644..07660585 100644
--- a/e2e/scrappers.test.ts
+++ b/e2e/scrappers.test.ts
@@ -57,16 +57,28 @@ describe('RowsX - scrappers tests', () => {
 
     await appPage.bringToFront();
     await appPage.goto(spec.url, { waitUntil: 'domcontentloaded' });
+
+    const client = await appPage.target().createCDPSession();
+    await client.send('Browser.setPermission', {
+      origin: new URL(spec.url),
+      permission: {
+        name: 'clipboard-write',
+        allowWithoutSanitization: true,
+      },
+      setting: 'granted',
+    });
+
+    await appPage.evaluate(() => navigator.clipboard.writeText(''));
     await extensionPage.goto(extensionUrl, { waitUntil: 'domcontentloaded' });
-    await appPage.waitForTimeout(500);
+    await appPage.waitForTimeout(200);
     await extensionPage.bringToFront();
     const button = await extensionPage.waitForSelector('.copy-btn');
     await button.click();
+    await extensionPage.waitForTimeout(180);
     await appPage.bringToFront();
 
-    const context = await browser.defaultBrowserContext();
-    await context.overridePermissions(spec.url, ['clipboard-read']);
-    const clipboard = await appPage.evaluate(() => navigator.clipboard.readText());
+    const clipboard = await appPage.evaluate(async () => await navigator.clipboard.readText());
+
 
     // close pages
     await appPage.close();
diff --git a/jest-puppeteer.config.cjs b/jest-puppeteer.config.cjs
index 6faee164..2108e4ef 100644
--- a/jest-puppeteer.config.cjs
+++ b/jest-puppeteer.config.cjs
@@ -1,12 +1,10 @@
 module.exports = {
   launch: {
     dumpio: false,
-    headless:  'new',
+    headless: 'new',
     args: [
       '--disable-extensions-except=./dist',
       '--load-extension=./dist',
-      '--disable-gpu',
-      '--no-sandbox',
     ],
   },
 };
diff --git a/src/App.tsx b/src/App.tsx
index db6add66..11486d2a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,13 +3,16 @@ import './index.css';
 import NoResults from './components/no-results';
 import Header from './components/header';
 import Preview from './components/preview';
+import LoadingSkeleton from './components/loading-skeleton';
 
 const App = () => {
+  const [loading, setLoading] = useState(true);
   const [results, setResults] = useState([]);
 
   useEffect(() => {
     chrome.runtime.sendMessage({ action: 'rows-x:scrap' }, (response) => {
       setResults(response);
+      setLoading(false);
     });
   }, []);
 
@@ -17,7 +20,11 @@ const App = () => {
     <>
       <Header />
       <div className="container">
-        {results.length > 0 ? <Preview results={results} /> : <NoResults />}
+        {loading ? (
+          <LoadingSkeleton />
+        ) : (
+          <>{results.length > 0 ? <Preview results={results} /> : <NoResults />}</>
+        )}
       </div>
     </>
   );
diff --git a/src/components/loading-skeleton.tsx b/src/components/loading-skeleton.tsx
new file mode 100644
index 00000000..6876aa55
--- /dev/null
+++ b/src/components/loading-skeleton.tsx
@@ -0,0 +1,62 @@
+function randomNumber(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const LoadingSkeleton = () => {
+  return (
+    <div className="skeleton-results">
+      <div className="table-preview" style={{ opacity: 0.5 }}>
+        <div className="table-header">
+          <caption
+            className="title skeleton"
+            style={{ background: 'var(--light-grey)', width: 150, height: 14 }}
+          />
+          <div className="pill skeleton" style={{ height: 20, width: 60 }}></div>
+        </div>
+        <div className="table-body">
+          <div className="table-container">
+            <table>
+              {new Array(5).fill(0).map((_, index) => (
+                <tr key={index}>
+                  <td>
+                    <div
+                      className="skeleton"
+                      style={{
+                        background: 'var(--light-grey)',
+                        width: randomNumber(30, 80),
+                        height: 14,
+                      }}
+                    />
+                  </td>
+                  <td>
+                    <div
+                      className="skeleton"
+                      style={{
+                        background: 'var(--light-grey)',
+                        width: randomNumber(30, 80),
+                        height: 14,
+                      }}
+                    />
+                  </td>
+                  <td>
+                    <div
+                      className="skeleton"
+                      style={{
+                        background: 'var(--light-grey)',
+                        width: randomNumber(30, 80),
+                        height: 14,
+                      }}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </table>
+            <div className="shade" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSkeleton;
diff --git a/src/components/preview.tsx b/src/components/preview.tsx
index 889a130c..8bfe4dc6 100644
--- a/src/components/preview.tsx
+++ b/src/components/preview.tsx
@@ -43,10 +43,9 @@ const Preview: FunctionComponent<Props> = ({ results = [] }) => {
                 <Button
                   className="copy-btn"
                   type="secondary"
-                  onClick={() => {
-                    navigator.clipboard
-                      .writeText(array2tsv(result.table))
-                      .then(() => setTimeout(() => window.close(), 200));
+                  onClick={async () => {
+                    await navigator.clipboard.writeText(array2tsv(result.table));
+                    setTimeout(() => window.close(), 200);
                   }}
                 >
                   <img alt="copy" src="/icons/copy.svg" />
diff --git a/src/index.css b/src/index.css
index 3a88434d..4c0bc6b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,3 +66,17 @@ a:link {
   width: 22.5rem;
   max-height: 600px;
 }
+
+.skeleton {
+  border-radius: 4px;
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: var(--lighter-grey);
+  }
+  100% {
+    background-color: #c7c7c7;
+  }
+}
diff --git a/src/utils/scrappers/custom.ts b/src/utils/scrappers/custom.ts
index ae97cbad..2bd88526 100644
--- a/src/utils/scrappers/custom.ts
+++ b/src/utils/scrappers/custom.ts
@@ -91,6 +91,10 @@ export async function customScrapper(options: ScrapperOptions) {
     );
   });
 
+  if (tableElements.length <= 0) {
+    return [];
+  }
+
   return [
     {
       title: options.header,
diff --git a/src/utils/scrappers/html-tables.ts b/src/utils/scrappers/html-tables.ts
index 7a559f10..b23a430c 100644
--- a/src/utils/scrappers/html-tables.ts
+++ b/src/utils/scrappers/html-tables.ts
@@ -76,13 +76,13 @@ export async function scrapHTMLTables() {
       ) as DOM_Element;
 
       if (titleElement) {
-        title = titleElement?.innerText.replaceAll('\n', ' ').trim();
+        title = titleElement?.innerText?.replaceAll('\n', ' ')?.trim() ?? '';
       }
 
       scrapElement = scrapElement?.parentElement as DOM_Element;
     }
 
-    titles.push(title.replace('[edit]', ''));
+    titles.push(title);
 
     return Array.from(tableElement!.querySelectorAll(rowSelector)).map((tr) => {
       if (!tr) {
@@ -108,6 +108,7 @@ export async function scrapHTMLTables() {
     });
   });
 
+  // Maps the table to the correct structure and after that remove the empty tables
   return tables
     .map((table, index: number) => ({
       title: titles[index],