Invocations placeholder page (#76)

apps/web-ui/app/root.tsx

@@ -175,7 +175,6 @@ export default function App() {
               <Nav ariaCurrentValue="page">
                 <NavItem href={'/overview'}>Overview</NavItem>
                 <NavItem href={'/invocations'}>Invocations</NavItem>
-                <NavItem href={'/workflows'}>Workflows</NavItem>
               </Nav>
             </LayoutOutlet>
           </div>

apps/web-ui/app/routes/invocations.tsx

@@ -0,0 +1,3 @@
+import { invocations } from '@restate/features/invocations-route';
+
+export default invocations.Component;

libs/features/invocations-route/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/features/invocations-route/README.md

@@ -0,0 +1,7 @@
+# invocations-route
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test invocations-route` to execute the unit tests via [Vitest](https://vitest.dev/).

libs/features/invocations-route/eslint.config.js

@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/features/invocations-route/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "invocations-route",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/features/invocations-route/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project invocations-route --web",
+  "targets": {}
+}

libs/features/invocations-route/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/invocations.route';

libs/features/invocations-route/src/lib/invocations.route.tsx

@@ -0,0 +1,40 @@
+import { Code, Snippet } from '@restate/ui/code';
+import { Link } from '@restate/ui/link';
+
+function Component() {
+  return (
+    <div className="justify-center flex md:sticky md:top-[11rem] flex-col items-center w-fit md:h-[calc(100vh-150px-6rem)] py-8 flex-auto w-full justify-center rounded-xl border bg-gray-200/50 shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]">
+      <div className="flex flex-col gap-2 items-center relative w-full text-center mt-6">
+        <h3 className="text-sm font-semibold text-gray-600">Coming soon!</h3>
+        <p className="text-sm text-gray-500 px-4 max-w-md">
+          The Invocations page is currently under development and will be
+          available soon. In the meantime, you can use our{' '}
+          <Link
+            href="https://docs.restate.dev/develop/local_dev/#running-restate-server--cli-locally"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            CLI
+          </Link>{' '}
+          to manage invocations. Below are a few examples of how you can use CLI
+          commands to perform tasks:
+        </p>
+        <Code className="bg-black/80 py-4 pr-8 pl-4 text-code mt-4">
+          <Snippet language="bash">#List the invocations</Snippet>
+          <Snippet className="[filter:invert(1)] -mt-2" language="bash">
+            restate invocations list
+          </Snippet>
+          <Snippet className="" language="bash">
+            #Cancel an invocation
+          </Snippet>
+          <Snippet
+            className="[filter:invert(1)] -mt-2"
+            language="bash"
+          >{`restate invocation cancel <INVOCATION_ID>`}</Snippet>
+        </Code>
+      </div>
+    </div>
+  );
+}
+
+export const invocations = { Component };

libs/features/invocations-route/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

libs/features/invocations-route/tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

libs/features/invocations-route/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/features/invocations-route/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/features/invocations-route',
+  plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../../coverage/libs/features/invocations-route',
+      provider: 'v8',
+    },
+  },
+});

tsconfig.base.json

@@ -27,6 +27,9 @@
       "@restate/data-access/admin-api/spec": [
         "libs/data-access/admin-api/src/api.ts"
       ],
+      "@restate/features/invocations-route": [
+        "libs/features/invocations-route/src/index.ts"
+      ],
       "@restate/features/overview-route": [
         "libs/features/overview-route/src/index.ts"
       ],