Simpler frontend

electron/loading/index.html

@@ -14,14 +14,14 @@
           <svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="black" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>
         </span>
       </div>
-      <div id="text" class="text">Loading...</div>
+      <!-- <div id="text" class="text">Loading...</div> -->
     </div>
   </body>
   <script>
     const { ipcRenderer } = require("electron");
-    ipcRenderer.on("response", (event, arg) => {
-      document.getElementById("text").innerText = arg;
-    });
+    // ipcRenderer.on("response", (event, arg) => {
+    //   document.getElementById("text").innerText = arg;
+    // });
     ipcRenderer.send("check", "Starting check...");
   </script>
 </html>

electron/loading/styles.css

@@ -21,6 +21,6 @@ main {
 
 img {
   margin: 0 auto;
-  width: 250px !important;
-  height: 250px !important;
+  width: 150px !important;
+  height: 150px !important;
 }

electron/main.js

@@ -5,18 +5,16 @@ const {
   BrowserWindow,
   Tray,
   Menu,
-  shell,
   Notification,
   ipcMain,
 } = require('electron');
-const { spawn, exec } = require('child_process');
+const { spawn } = require('child_process');
 const path = require('path');
 const fs = require('fs');
 const os = require('os');
 const next = require('next');
 const http = require('http');
 
-const { isDockerRunning } = require('./docker');
 const {
   setupDarwin,
   setupUbuntu,
@@ -34,8 +32,6 @@ if (!singleInstanceLock) app.quit();
 const platform = os.platform();
 const isDev = process.env.NODE_ENV === 'development';
 let appConfig = {
-  width: 600,
-  height: 800,
   ports: {
     dev: {
       operate: 8000,
@@ -109,8 +105,8 @@ const createTray = () => {
  */
 const createSplashWindow = () => {
   splashWindow = new BrowserWindow({
-    width: appConfig.width,
-    height: appConfig.height,
+    width: 420,
+    height: 420,
     resizable: false,
     show: true,
     title: 'Olas Operate',
@@ -131,16 +127,19 @@ const createSplashWindow = () => {
  */
 const createMainWindow = () => {
   mainWindow = new BrowserWindow({
-    width: appConfig.width,
-    height: appConfig.height,
-    resizable: false,
     title: 'Olas Operate',
-  });
-
-  // Ensure that external links are opened in native browser
-  mainWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url);
-    return { action: 'deny' };
+    resizable: false,
+    draggable: true,
+    frame: false,
+    transparent: true,
+    fullscreenable: false,
+    maximizable: false,
+    width: 420,
+    minHeight: 210,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
   });
 
   mainWindow.setMenuBarVisibility(false);
@@ -149,11 +148,12 @@ const createMainWindow = () => {
   } else {
     mainWindow.loadURL(`http://localhost:${appConfig.ports.prod.next}`);
   }
+
   mainWindow.webContents.on('did-fail-load', () => {
     mainWindow.webContents.reloadIgnoringCache();
   });
 
-  mainWindow.on('ready-to-show', () => {
+  mainWindow.webContents.on('ready-to-show', () => {
     mainWindow.show();
   });
 
@@ -169,8 +169,10 @@ const createMainWindow = () => {
 
 async function launchDaemon() {
   function appendLog(data) {
-    fs.appendFileSync(`${OperateDirectory}/logs.txt`, data.trim() + "\n", { "encoding": "utf-8" })
-    return data
+    fs.appendFileSync(`${OperateDirectory}/logs.txt`, data.trim() + '\n', {
+      encoding: 'utf-8',
+    });
+    return data;
   }
   const check = new Promise(function (resolve, reject) {
     operateDaemon = spawn(OperateCmd, [

frontend/.eslintrc.json

@@ -17,9 +17,16 @@
     "prettier",
     "react",
     "react-hooks",
-    "unused-imports"
+    "unused-imports",
+    "simple-import-sort",
+    "import"
   ],
   "rules": {
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
     "unused-imports/no-unused-imports": "error",
     "no-console": "warn",
     "no-unused-vars": "warn",

frontend/client/types.ts

@@ -36,6 +36,7 @@ export type ServiceTemplate = {
   image: string;
   description: string;
   configuration: ConfigurationTemplate;
+  deploy?: boolean;
 };
 
 export type ConfigurationTemplate = {

frontend/common-util/index.ts

@@ -0,0 +1,2 @@
+export * from './copyToClipboard';
+export * from './isDev';

frontend/common-util/isDev.ts

@@ -0,0 +1 @@
+export const isDev = process.env.NODE_ENV === 'development';

frontend/components/Layout/Header.tsx

@@ -0,0 +1,19 @@
+import { Flex } from 'antd';
+import { PropsWithChildren } from 'react';
+
+export const Header = ({ children }: PropsWithChildren) => {
+  return (
+    <Flex
+      style={{
+        borderBottom: '1px lightgrey solid',
+        padding: '10px 20px',
+        minHeight: 40,
+        maxHeight: 40,
+        alignItems: 'center',
+        gap: 10,
+      }}
+    >
+      {children}
+    </Flex>
+  );
+};

frontend/components/Layout/Wrapper.tsx

@@ -0,0 +1,16 @@
+import { Flex } from 'antd';
+import { PropsWithChildren } from 'react';
+
+export const Wrapper = ({
+  children,
+  vertical,
+}: PropsWithChildren & { vertical?: boolean }) => {
+  return (
+    <Flex
+      style={{ padding: 20, alignItems: 'center', gap: 10 }}
+      vertical={vertical}
+    >
+      {children}
+    </Flex>
+  );
+};

frontend/components/Layout/index.ts

@@ -0,0 +1,2 @@
+export * from './Header';
+export * from './Wrapper';

frontend/components/Login.tsx

@@ -0,0 +1,13 @@
+import { Button, Typography } from 'antd';
+
+import { Wrapper } from './Layout/Wrapper';
+
+export const Login = () => {
+  return (
+    <Wrapper>
+      <Typography.Title>Login</Typography.Title>
+      <input type="text" placeholder="Enter your password" />
+      <Button>Login</Button>
+    </Wrapper>
+  );
+};