feat: support file browser in bring ui (#6247)

Resolves #6198 --------- Signed-off-by: monada-bot[bot] <[email protected]> Co-authored-by: Ainvoner <[email protected]> Co-authored-by: wingbot <[email protected]> Co-authored-by: monada-bot[bot] <[email protected]> Co-authored-by: Ainvoner <[email protected]>
winglang · Apr 17, 2024 · cb17e0f · cb17e0f
1 parent 854b244
commit cb17e0f
Show file tree

Hide file tree

Showing 26 changed files with 1,329 additions and 298 deletions.
diff --git a/apps/wing-console/console/app/demo/main.w b/apps/wing-console/console/app/demo/main.w
@@ -1,5 +1,7 @@
 bring cloud;
 bring ex;
+bring ui;
+
 // @see https://github.com/winglang/wing/issues/4237 it crashes the Console preview env.
 //let secret = new cloud.Secret(name: "my-secret");
 
@@ -8,6 +10,42 @@ let queue = new cloud.Queue();
 let api = new cloud.Api();
 let counter = new cloud.Counter(initial: 0);
 
+class myBucket {
+  b: cloud.Bucket;
+  new() {
+    this.b = new cloud.Bucket();
+    new ui.FileBrowser("File Browser",
+      {
+        put: inflight (fileName: str, fileContent:str) => {
+          this.b.put(fileName, fileContent);
+        },
+        delete: inflight (fileName: str) => {
+          this.b.delete(fileName);
+        },
+        get: inflight (fileName: str) => {
+          return this.b.get(fileName);
+        },
+        list: inflight () => {return this.b.list();},
+      }
+    );
+
+    new cloud.Service(
+      inflight () => {
+        this.b.put("hello.txt", "Hello, GET!");
+        return inflight () => {
+        };
+      },
+    );
+  }
+  pub inflight put(key: str, value: str) {
+    this.b.put(key, value);
+  }
+}
+
+let myB = new myBucket() as "MyUIComponentBucket";
+let putfucn = new cloud.Function(inflight () => {
+    myB.put("test", "Test");
+}) as "PutFileInCustomBucket";
 
 api.get("/test-get", inflight (req: cloud.ApiRequest): cloud.ApiResponse => {
   bucket.put("hello.txt", "Hello, GET!");
@@ -25,7 +63,8 @@ api.post("/test-post", inflight (req: cloud.ApiRequest): cloud.ApiResponse => {
 });
 
 let handler = inflight (message: str): str => {
-  bucket.put("hello.txt", "Hello, {message}!");
+   counter.inc();
+  bucket.put("hello{counter.peek()}.txt", "Hello, {message}!");
   log("Hello, {message}!");
   return message;
 };
@@ -123,7 +162,6 @@ test "Add fixtures" {
   counter.inc(100);
 }
 
-bring ui;
 
 class WidgetService {
   data: cloud.Bucket;

diff --git a/apps/wing-console/console/server/src/router/app.ts b/apps/wing-console/console/server/src/router/app.ts
@@ -1,6 +1,5 @@
 import { TRPCError } from "@trpc/server";
 import { observable } from "@trpc/server/observable";
-import type { HttpClient } from "@winglang/sdk/lib/ui/http-client.js";
 import uniqby from "lodash.uniqby";
 import { z } from "zod";
 
@@ -15,7 +14,6 @@ import type {
 import { buildConstructTreeNodeMap } from "../utils/constructTreeNodeMap.js";
 import type { FileLink } from "../utils/createRouter.js";
 import { createProcedure, createRouter } from "../utils/createRouter.js";
-import { isTermsAccepted, getLicense } from "../utils/terms-and-conditions.js";
 import type { IFunctionClient, Simulator } from "../wingsdk.js";
 
 const isTest = /(\/test$|\/test:([^/\\])+$)/;
@@ -470,63 +468,10 @@ export const createAppRouter = () => {
         return ui as Array<{
           kind: string;
           label: string;
-          handler: string;
+          handler: string | Record<string, string>;
         }>;
       }),
-    "app.getResourceUiField": createProcedure
-      .input(
-        z.object({
-          resourcePath: z.string(),
-        }),
-      )
-      .query(async ({ input, ctx }) => {
-        const simulator = await ctx.simulator();
-        const client = simulator.getResource(
-          input.resourcePath,
-        ) as IFunctionClient;
-        return {
-          value: await client.invoke(""),
-        };
-      }),
-    "app.getResourceUiHttpClient": createProcedure
-      .input(
-        z.object({
-          getUrlResourcePath: z.string(),
-          getApiSpecResourcePath: z.string(),
-        }),
-      )
-      .query(async ({ input, ctx }) => {
-        const simulator = await ctx.simulator();
-        const getUrlClient = simulator.getResource(
-          input.getUrlResourcePath,
-        ) as IFunctionClient;
-
-        const url = await getUrlClient.invoke("");
-
-        const getApiSpecClient = simulator.getResource(
-          input.getApiSpecResourcePath,
-        ) as IFunctionClient;
-        const openApiSpec = await getApiSpecClient.invoke("");
-
-        return {
-          url: url,
-          openApiSpec: JSON.parse(openApiSpec ?? "{}"),
-        };
-      }),
 
-    "app.invokeResourceUiButton": createProcedure
-      .input(
-        z.object({
-          resourcePath: z.string(),
-        }),
-      )
-      .mutation(async ({ input, ctx }) => {
-        const simulator = await ctx.simulator();
-        const client = simulator.getResource(
-          input.resourcePath,
-        ) as IFunctionClient;
-        await client.invoke("");
-      }),
     "app.analytics": createProcedure.query(async ({ ctx }) => {
       const requireSignIn = (await ctx.requireSignIn?.()) ?? false;
       if (requireSignIn) {

diff --git a/apps/wing-console/console/server/src/router/bucket.ts b/apps/wing-console/console/server/src/router/bucket.ts
@@ -1,5 +1,3 @@
-import fs from "node:fs";
-
 import { z } from "zod";
 
 import { createProcedure, createRouter } from "../utils/createRouter.js";

diff --git a/apps/wing-console/console/server/src/router/file-browser.ts b/apps/wing-console/console/server/src/router/file-browser.ts
@@ -0,0 +1,96 @@
+import { z } from "zod";
+
+import { createProcedure, createRouter } from "../utils/createRouter.js";
+import type { IFunctionClient } from "../wingsdk.js";
+
+export const createFileBrowserRouter = () => {
+  return createRouter({
+    "fileBrowser.get": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+          fileName: z.string(),
+        }),
+      )
+      .query(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const client = simulator.getResource(
+          input.resourcePath,
+        ) as IFunctionClient;
+        return await client.invoke(
+          JSON.stringify({ fileName: input.fileName }),
+        );
+      }),
+
+    "fileBrowser.list": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+        }),
+      )
+      .query(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const client = simulator.getResource(input.resourcePath);
+        return (await client.invoke()) as string[];
+      }),
+
+    "fileBrowser.put": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+          fileName: z.string(),
+          fileContent: z.string(),
+        }),
+      )
+      .mutation(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const client = simulator.getResource(
+          input.resourcePath,
+        ) as IFunctionClient;
+        return await client.invoke(
+          JSON.stringify({
+            fileName: input.fileName,
+            fileContent: input.fileContent,
+          }),
+        );
+      }),
+
+    "fileBrowser.delete": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+          fileName: z.string(),
+        }),
+      )
+      .mutation(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const client = simulator.getResource(
+          input.resourcePath,
+        ) as IFunctionClient;
+        return await client.invoke(
+          JSON.stringify({
+            fileName: input.fileName,
+          }),
+        );
+      }),
+
+    "fileBrowser.download": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+          fileName: z.string(),
+        }),
+      )
+      .mutation(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const client = simulator.getResource(
+          input.resourcePath,
+        ) as IFunctionClient;
+        return await client.invoke(
+          JSON.stringify({
+            fileName: input.fileName,
+          }),
+        );
+      }),
+  });
+};
diff --git a/apps/wing-console/console/server/src/router/http-client.ts b/apps/wing-console/console/server/src/router/http-client.ts
@@ -0,0 +1,44 @@
+import { z } from "zod";
+
+import { createProcedure, createRouter } from "../utils/createRouter.js";
+import type { IFunctionClient } from "../wingsdk.js";
+
+export const createHttpClientRouter = () => {
+  return createRouter({
+    "httpClient.getUrl": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+        }),
+      )
+      .query(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const getUrlClient = simulator.getResource(
+          input.resourcePath,
+        ) as IFunctionClient;
+
+        const url = await getUrlClient.invoke("");
+        return {
+          url,
+        };
+      }),
+
+    "httpClient.getOpenApiSpec": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+        }),
+      )
+      .query(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const getApiSpecClient = simulator.getResource(
+          input.resourcePath,
+        ) as IFunctionClient;
+
+        const openApiSpec = await getApiSpecClient.invoke("");
+        return {
+          openApiSpec: JSON.parse(openApiSpec ?? "{}"),
+        };
+      }),
+  });
+};
diff --git a/apps/wing-console/console/server/src/router/index.ts b/apps/wing-console/console/server/src/router/index.ts
@@ -6,12 +6,16 @@ import { createBucketRouter } from "./bucket.js";
 import { createConfigRouter } from "./config.js";
 import { createCounterRouter } from "./counter.js";
 import { createEndpointRouter } from "./endpoint.js";
+import { createFileBrowserRouter } from "./file-browser.js";
 import { createFunctionRouter } from "./function.js";
+import { createHttpClientRouter } from "./http-client.js";
 import { createQueueRouter } from "./queue.js";
 import { createRedisRouter } from "./redis.js";
 import { createTableRouter } from "./table.js";
 import { createTestRouter } from "./test.js";
 import { createTopicRouter } from "./topic.js";
+import { createUiButtonRouter } from "./ui-button.js";
+import { createUiFieldRouter } from "./ui-field.js";
 import { createUpdaterRouter } from "./updater.js";
 import { createWebsiteRouter } from "./website.js";
 
@@ -33,6 +37,10 @@ export const mergeAllRouters = () => {
     createWebsiteRouter(),
     createConfigRouter(),
     createEndpointRouter(),
+    createUiButtonRouter(),
+    createUiFieldRouter(),
+    createHttpClientRouter(),
+    createFileBrowserRouter(),
   );
 
   return { router };

diff --git a/apps/wing-console/console/server/src/router/ui-button.ts b/apps/wing-console/console/server/src/router/ui-button.ts
@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+import { createProcedure, createRouter } from "../utils/createRouter.js";
+import type { IFunctionClient } from "../wingsdk.js";
+
+export const createUiButtonRouter = () => {
+  return createRouter({
+    "uiButton.invoke": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+        }),
+      )
+      .mutation(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const client = simulator.getResource(
+          input.resourcePath,
+        ) as IFunctionClient;
+        await client.invoke("");
+      }),
+  });
+};
diff --git a/apps/wing-console/console/server/src/router/ui-field.ts b/apps/wing-console/console/server/src/router/ui-field.ts
@@ -0,0 +1,24 @@
+import { z } from "zod";
+
+import { createProcedure, createRouter } from "../utils/createRouter.js";
+import type { IFunctionClient } from "../wingsdk.js";
+
+export const createUiFieldRouter = () => {
+  return createRouter({
+    "uiField.get": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+        }),
+      )
+      .query(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const client = simulator.getResource(
+          input.resourcePath,
+        ) as IFunctionClient;
+        return {
+          value: await client.invoke(""),
+        };
+      }),
+  });
+};