From ebc787bc51057d244f71d7dde3acd9878beb3d55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Trys=C5=82a?=
 <zamotany@users.noreply.github.com>
Date: Fri, 1 Oct 2021 20:45:09 +0200
Subject: [PATCH] feat: allow to trigger compilation from dashboard (#103)

---
 packages/dashboard/src/components/Button.tsx  | 36 +++++++++++--
 .../src/pages/Dash/CompilationTrigger.tsx     | 52 +++++++++++++++++++
 packages/dashboard/src/pages/Dash/Dash.tsx    |  4 +-
 3 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 packages/dashboard/src/pages/Dash/CompilationTrigger.tsx

diff --git a/packages/dashboard/src/components/Button.tsx b/packages/dashboard/src/components/Button.tsx
index 1dbf3773e..7c3fa04d3 100644
--- a/packages/dashboard/src/components/Button.tsx
+++ b/packages/dashboard/src/components/Button.tsx
@@ -3,20 +3,48 @@ import cx from 'classnames';
 
 interface Props {
   onClick?: () => void;
+  disabled?: boolean;
+  progress?: boolean;
   children: React.ReactNode;
   className?: string;
 }
 
-export function Button({ children, onClick, className }: Props) {
+export function Button({
+  children,
+  onClick,
+  className,
+  disabled,
+  progress,
+}: Props) {
   return (
     <button
+      disabled={disabled}
       className={cx(
-        'px-2 py-1 flex flex-row items-center rounded-sm hover:bg-gray-600 text-gray-300 hover:text-gray-200 border-2 border-gray-600 transition ease-in duration-100',
+        'px-2 py-1 rounded-sm border-2 transition ease-in duration-100 relative',
+        disabled
+          ? 'cursor-not-allowed text-gray-500 border-gray-700'
+          : 'text-gray-300 border-gray-600 hover:text-gray-200 hover:bg-gray-600',
         className
       )}
-      onClick={onClick}
+      onClick={React.useCallback(() => {
+        !disabled && onClick?.();
+      }, [disabled, onClick])}
     >
-      {children}
+      <div
+        className={cx('flex flex-row items-center', progress && 'invisible')}
+      >
+        {children}
+      </div>
+      <div
+        className={cx(
+          'absolute top-0 bottom-0 left-0 right-0 flex flex-row items-center justify-center',
+          !progress && 'hidden'
+        )}
+      >
+        <span className="material-icons animate-spin text-gray-300">
+          autorenew
+        </span>
+      </div>
     </button>
   );
 }
diff --git a/packages/dashboard/src/pages/Dash/CompilationTrigger.tsx b/packages/dashboard/src/pages/Dash/CompilationTrigger.tsx
new file mode 100644
index 000000000..4725a3f8e
--- /dev/null
+++ b/packages/dashboard/src/pages/Dash/CompilationTrigger.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Button } from '../../components/Button';
+import { DEV_SERVER_HTTP_URL } from '../../constants';
+
+export function CompilationTrigger() {
+  const [platform, setPlatform] = React.useState<string>('');
+  const [loading, setLoading] = React.useState(false);
+
+  const trigger = React.useCallback(async () => {
+    setLoading(true);
+    try {
+      await fetch(`${DEV_SERVER_HTTP_URL}/index.bundle?platform=${platform}`);
+      setPlatform('');
+    } finally {
+      setLoading(false);
+    }
+  }, [platform]);
+
+  return (
+    <div className="flex flex-col items-start px-6 py-2">
+      <h2 className="text-gray-300 font-medium text-2xl uppercase mb-2">
+        TRIGGER COMPILATION
+      </h2>
+      <div className="bg-dark-200 p-6 rounded border-2 border-dark-100 text-gray-300 flex flex-col">
+        <div className="text-gray-400 text-sm">
+          Use to trigger a new compilation for provided platform without.
+        </div>
+        <div className="mt-3 flex flex-row">
+          <input
+            className={cx(
+              'mr-2 bg-transparent border-2 rounded-sm border-gray-600 px-4 py-2 text-gray-200 focus:outline-none focus:border-gray-400',
+              loading && 'cursor-not-allowed text-gray-500'
+            )}
+            placeholder="Platform name..."
+            value={platform}
+            onChange={React.useCallback(
+              (event: React.ChangeEvent<HTMLInputElement>) => {
+                setPlatform(event.target.value);
+              },
+              []
+            )}
+            disabled={loading}
+          />
+          <Button onClick={trigger} disabled={!platform} progress={loading}>
+            Send<span className="ml-1 material-icons">input</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/dashboard/src/pages/Dash/Dash.tsx b/packages/dashboard/src/pages/Dash/Dash.tsx
index ff0de9ace..477e45f08 100644
--- a/packages/dashboard/src/pages/Dash/Dash.tsx
+++ b/packages/dashboard/src/pages/Dash/Dash.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Admonition } from '../../components/Admonition';
 import { PageLayout } from '../../components/PageLayout';
 import { useDevServer } from '../../hooks/useDevServer';
+import { CompilationTrigger } from './CompilationTrigger';
 import { PlatformCompilation } from './PlatformCompilation';
 import { PlatformDash } from './PlatformDash';
 
@@ -11,7 +12,8 @@ export function Dash() {
 
   return (
     <PageLayout title="Dash">
-      <div className="flex flex-row flex-wrap">
+      <CompilationTrigger />
+      <div className="mt-8 flex flex-row flex-wrap">
         {!platforms.length ? (
           <Admonition type="info" className="mt-2">
             There are no compilations yet. Start Re.Pack development server and