feat: open url in browser

Author: slon2015

desktop-app/src/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from "electron";
+import { app, BrowserWindow, ipcMain, shell } from "electron";
 import { wrapMainService } from "./messaging/wrapMainService";
 import { DappMarketplaceService } from "./services/marketplace/service";
 import { DumpDeployerService } from "./services/dump-deployer/service";
@@ -33,6 +33,16 @@ const createWindow = () => {
     "dump-deployer"
   );
   wrapMainService(docker, "docker");
+  ipcMain.handle(
+    "open-url-in-browser",
+    (_, url: string | Record<string, string>) => {
+      if (typeof url === "string") {
+        shell.openExternal(url);
+      } else if (typeof url === "object") {
+        shell.openExternal(url[process.platform] || url.default);
+      }
+    }
+  );
 
   if (isDev) {
     mainWindow.loadURL("http://localhost:3001/index.html");

desktop-app/src/preload.ts

@@ -1,7 +1,7 @@
 // See the Electron documentation for details on how to use preload scripts:
 // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
 
-import { contextBridge } from "electron";
+import { contextBridge, ipcRenderer } from "electron";
 import { registerRendererService } from "./messaging/registerRendererService";
 
 const localhostService = {
@@ -25,6 +25,9 @@ const localhostService = {
     channelName: "docker",
     methodNames: ["isDockerAvailable"],
   }),
+  openUrlInBrowser(url: string) {
+    ipcRenderer.invoke("open-url-in-browser", url);
+  },
 };
 
 contextBridge.exposeInMainWorld("localhostService", localhostService);

ui/src/_dev/index.ts

@@ -6,6 +6,7 @@ const service = {
   marketplace,
   docker: new DevDockerService(),
   deployer: new DeploymentsService(),
+  openUrlInBrowser(url: string | Record<string, string>) {},
 };
 
 export default service;

ui/src/features/docker/ui/DockerCheck.tsx

@@ -3,6 +3,7 @@ import { Spin, Button, Typography } from "antd";
 import { useAppDispatch, useAppSelector } from "shared/model/hooks";
 import { selectDockerAvailability } from "../model/slice";
 import { checkDockerAvailability } from "../api/check";
+import service from "localhostService";
 
 export const DockerCheck: React.FC<PropsWithChildren> = ({ children }) => {
   const dispatch = useAppDispatch();
@@ -37,8 +38,24 @@ export const DockerCheck: React.FC<PropsWithChildren> = ({ children }) => {
           <Typography.Title level={3} className="text-3xl font-bold mb-6">
             Ooops! We can't connect the docker
           </Typography.Title>
-          <div className="flex justify-center items-center w-full h-full">
+          <div className="flex justify-center items-center w-full h-full flex-col">
             <Button onClick={checkAgainClickHandler}>Try again</Button>
+            <Button
+              type="link"
+              onClick={() =>
+                service.openUrlInBrowser({
+                  win32:
+                    "https://docs.docker.com/desktop/install/windows-install/",
+                  darwin:
+                    "https://docs.docker.com/desktop/install/mac-install/",
+                  default:
+                    "https://docs.docker.com/desktop/install/windows-install/",
+                })
+              }
+              className="mt-3"
+            >
+              Or install it
+            </Button>
           </div>
         </div>
       </div>