From 7bfd0e33a7d037b769bd27c0f2a697c33c0a96d7 Mon Sep 17 00:00:00 2001 From: Stephanie Yu Date: Tue, 26 Nov 2024 23:51:09 -0500 Subject: [PATCH 1/9] [widgets] Support serving a basic widget manifest in vite serve mode --- .../foundry.config.json | 11 + packages/monorepo.cspell/cspell.config.js | 2 + packages/widget.vite-plugin/README.md | 17 + packages/widget.vite-plugin/client/app.tsx | 105 +++++ packages/widget.vite-plugin/client/main.css | 20 + packages/widget.vite-plugin/client/main.tsx | 28 ++ packages/widget.vite-plugin/index.html | 14 + packages/widget.vite-plugin/package.json | 13 +- packages/widget.vite-plugin/src/constants.ts | 17 + packages/widget.vite-plugin/src/plugin.ts | 300 ++++++++++++- packages/widget.vite-plugin/src/test.html | 11 + .../widget.vite-plugin/tsconfig.client.json | 12 + packages/widget.vite-plugin/vite.config.ts | 33 ++ pnpm-lock.yaml | 405 +++++++++++++++++- 14 files changed, 963 insertions(+), 25 deletions(-) create mode 100644 packages/e2e.sandbox.todowidget/foundry.config.json create mode 100644 packages/widget.vite-plugin/client/app.tsx create mode 100644 packages/widget.vite-plugin/client/main.css create mode 100644 packages/widget.vite-plugin/client/main.tsx create mode 100644 packages/widget.vite-plugin/index.html create mode 100644 packages/widget.vite-plugin/src/constants.ts create mode 100644 packages/widget.vite-plugin/src/test.html create mode 100644 packages/widget.vite-plugin/tsconfig.client.json create mode 100644 packages/widget.vite-plugin/vite.config.ts diff --git a/packages/e2e.sandbox.todowidget/foundry.config.json b/packages/e2e.sandbox.todowidget/foundry.config.json new file mode 100644 index 000000000..c4304f2a6 --- /dev/null +++ b/packages/e2e.sandbox.todowidget/foundry.config.json @@ -0,0 +1,11 @@ +{ + "foundryUrl": "https://fake.palantirfoundry.com/", + "widget": { + "rid": "ri.viewregistry..view.fake", + "directory": "./dist", + "autoVersion": { + "type": "git-describe", + "tagPrefix": "" + } + } + } \ No newline at end of file diff --git a/packages/monorepo.cspell/cspell.config.js b/packages/monorepo.cspell/cspell.config.js index e9f9e6860..c45e76ab7 100644 --- a/packages/monorepo.cspell/cspell.config.js +++ b/packages/monorepo.cspell/cspell.config.js @@ -147,6 +147,8 @@ const cspell = { ignoreWords: [ // it's an NPM package "escodegen", + "blueprintjs", + "picocolors", // used in a RID template literal string "viewregistry", ], diff --git a/packages/widget.vite-plugin/README.md b/packages/widget.vite-plugin/README.md index 0f325b303..3b22956e1 100644 --- a/packages/widget.vite-plugin/README.md +++ b/packages/widget.vite-plugin/README.md @@ -163,3 +163,20 @@ This vite plugin will then discover both entrypoints and output a combined `.pal } } ``` + +## Developer mode + +The vite plugin also automatically configures developer mode so that you can preview the changes you make locally live on your Foundry environment. For developer mode to work, make sure you follow the following steps: + +1. Have a `FOUNDRY_TOKEN` variable that has a token from your Foundry environment stored in it +1. Have a `foundry.config.json` in the root of your project (where you run vite from), with at minimum the following contents: + + ```json + { + "foundryUrl": "https://{YOUR_STACK_URL}", + "widget": { + "rid": "{YOUR_WIDGET_COLLECTION_RID}" + // Rest of config + } + } + ``` diff --git a/packages/widget.vite-plugin/client/app.tsx b/packages/widget.vite-plugin/client/app.tsx new file mode 100644 index 000000000..d8a049123 --- /dev/null +++ b/packages/widget.vite-plugin/client/app.tsx @@ -0,0 +1,105 @@ +/* + * Copyright 2024 Palantir Technologies, Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { NonIdealState, Spinner, SpinnerSize } from "@blueprintjs/core"; +import React, { useEffect } from "react"; + +export const App: React.FC = () => { + const [entrypointPaths, setEntrypointPaths] = React.useState([]); + const [loading, setLoading] = React.useState< + | { state: "success" } + | { state: "failed"; error: string } + | { state: "loading" } + | { state: "not-started" } + >({ state: "not-started" }); + useEffect(() => { + fetch("./entrypoints") + .then((res) => res.json()) + .then(({ entrypoints }: { entrypoints: string[] }) => { + setEntrypointPaths(entrypoints); + let poll = window.setInterval(() => { + fetch("./manifest") + .then((res) => res.json()) + .then(({ manifest }) => { + let clearInterval = true; + for (const entrypoint of entrypoints) { + if ( + manifest[entrypoint] == null + || manifest[entrypoint].length === 0 + ) { + clearInterval = false; + } + } + if (clearInterval) { + window.clearInterval(poll); + setLoading({ state: "loading" }); + fetch("./finish", { + body: JSON.stringify({ entrypoint: entrypoints[0] }), + method: "POST", + }).then((res) => { + if (res.status !== 200) { + setLoading({ state: "failed", error: res.statusText }); + } else { + setLoading({ state: "success" }); + setTimeout(() => { + res + .json() + .then( + ( + { redirectUrl }, + ) => (window.location.href = redirectUrl), + ); + }, 500); + } + }); + } + }); + }, 100); + }); + }, []); + return ( +
+ {(loading.state === "loading" || loading.state === "not-started") && ( + } + /> + )} + {loading.state === "success" && ( + + {" "} + Redirecting you… +
+ } + /> + )} + {loading.state === "failed" && ( + + )} + {entrypointPaths.map((entrypointPath) => ( +