Add tooltip (#78)

Signed-off-by: Nik Nasr <[email protected]>

apps/web-ui-e2e/src/example.spec.ts

@@ -5,5 +5,7 @@ test('has title', async ({ page }) => {
   await page.goto('/');
   await listDeployment;
   // Expect h3 to contain a substring.
-  expect(await page.locator('h3').innerText()).toContain('No deployment');
+  expect((await page.locator('h3').innerText()).replace(/\n/g, '')).toContain(
+    'No service deployments'
+  );
 });

libs/features/explainers/.babelrc

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

libs/features/explainers/README.md

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

libs/features/explainers/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/explainers/project.json

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

libs/features/explainers/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/ServiceDeployment';
+export * from './lib/Service';

libs/features/explainers/src/lib/Service.tsx

@@ -0,0 +1,21 @@
+import { InlineTooltip } from '@restate/ui/tooltip';
+import { PropsWithChildren } from 'react';
+
+export function ServiceExplainer({ children }: PropsWithChildren<unknown>) {
+  return (
+    <InlineTooltip
+      title="Service"
+      description={
+        <p>
+          Contain the handlers which process incoming requests. Services run
+          like regular RPC services (e.g. a NodeJS app in a Docker container).
+          Services can be written in any language for which there is an SDK
+          available.
+        </p>
+      }
+      learnMoreHref="https://docs.restate.dev/concepts/services#services-1"
+    >
+      {children}
+    </InlineTooltip>
+  );
+}

libs/features/explainers/src/lib/ServiceDeployment.tsx

@@ -0,0 +1,22 @@
+import { InlineTooltip } from '@restate/ui/tooltip';
+import { PropsWithChildren } from 'react';
+
+export function ServiceDeploymentExplainer({
+  children,
+}: PropsWithChildren<unknown>) {
+  return (
+    <InlineTooltip
+      title="Service Deployment"
+      description={
+        <p>
+          Restate services are deployed as Service deployments. A service
+          deployment can be a Lambda function, a Kubernetes pod, a Knative
+          Service, or any other process reachable at a specific URL.
+        </p>
+      }
+      learnMoreHref="https://docs.restate.dev/deploy/overview#restate-services"
+    >
+      {children}
+    </InlineTooltip>
+  );
+}

libs/features/explainers/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/explainers/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/explainers/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/explainers/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/explainers',
+  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/explainers',
+      provider: 'v8',
+    },
+  },
+});

libs/features/overview-route/src/lib/RestateServer.tsx

@@ -12,15 +12,14 @@ export function RestateServer({
           viewBox="0 0 120 120"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
-          className="w-full h-full group-hover: drop-shadow-xl shadow-zinc-800/5 backdrop-blur-xl backdrop-saturate-200"
+          className="w-full h-full drop-shadow-xl shadow-zinc-800/5 backdrop-blur-xl backdrop-saturate-200"
         >
           <path
             fillRule="evenodd"
             clipRule="evenodd"
             d="M60 0C10.59 0 0 10.59 0 60C0 109.41 10.59 120 60 120C109.41 120 120 109.41 120 60C120 10.59 109.41 0 60 0ZM43.6831 47.9347C43.238 48.6013 43 49.3889 43 50.195V73.0429C43 73.8188 43.86 74.2711 44.4811 73.8219L46.7463 72.1839C47.3731 71.7306 47.7455 70.9963 47.7455 70.2134V53.2027C47.7455 52.7307 48.2679 52.4546 48.6468 52.7265L58.6944 59.9365C59.0214 60.1711 59.0169 60.6664 58.6857 60.895L55.473 63.1117C54.3788 63.8667 54.1068 65.3898 54.8699 66.489C55.6175 67.5658 57.0775 67.8278 58.1415 67.076L63.0318 63.6206C64.0796 62.8803 64.7046 61.6639 64.7046 60.3651C64.7046 59.0915 64.1035 57.8956 63.0892 57.1509L48.6051 46.5165C47.0324 45.5379 44.9824 45.9886 43.946 47.5408L43.6831 47.9347ZM58.7713 47.0291C58.019 48.1128 58.2649 49.6116 59.3223 50.3872L72.1304 59.7826C72.4408 60.0103 72.4485 60.4781 72.1458 60.7163L61.4445 69.1358C60.4247 69.9382 60.2184 71.422 60.9793 72.4811C61.7666 73.5769 63.2846 73.799 64.3429 72.9733L76.3875 63.5753C77.404 62.7822 78 61.5524 78 60.2483C78 58.8988 77.362 57.6318 76.2859 56.8444L62.0949 46.4613C61.0244 45.6781 59.5324 45.9329 58.7713 47.0291Z"
             fill="white"
             fillOpacity="0.9"
-            id="test"
           />
         </svg>
       </Button>

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

@@ -5,6 +5,10 @@ import { tv } from 'tailwind-variants';
 import { TriggerRegisterDeploymentDialog } from './RegisterDeployment/Dialog';
 import { ServiceDetails } from './Details.tsx/Service';
 import { DeploymentDetails } from './Details.tsx/Deployment';
+import {
+  ServiceDeploymentExplainer,
+  ServiceExplainer,
+} from '@restate/features/explainers';
 
 const deploymentsStyles = tv({
   base: 'w-full md:row-start-1 md:col-start-1 grid gap-8 gap-x-20 gap2-x-[calc(8rem+150px)]',
@@ -49,8 +53,12 @@ function OneDeploymentPlaceholder() {
   return (
     <div className="flex p-4 flex-col gap-2 items-center relative w-full text-center rounded-xl border bg-gray-200/50 shadow-[inset_0_1px_0px_0px_rgba(0,0,0,0.03)]">
       <p className="text-sm text-gray-500 max-w-md">
-        Point Restate to your deployed services so Restate can discover and
-        register your services and handlers
+        Point Restate to your{' '}
+        <ServiceDeploymentExplainer>
+          service deployments
+        </ServiceDeploymentExplainer>{' '}
+        so Restate can discover and register your{' '}
+        <ServiceExplainer>services</ServiceExplainer> and handlers
       </p>
       <div className="mt-4">
         <TriggerRegisterDeploymentDialog />
@@ -62,10 +70,15 @@ function OneDeploymentPlaceholder() {
 function NoDeploymentPlaceholder() {
   return (
     <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">No deployments</h3>
+      <h3 className="text-sm font-semibold text-gray-600">
+        No{' '}
+        <ServiceDeploymentExplainer>
+          service deployments
+        </ServiceDeploymentExplainer>
+      </h3>
       <p className="text-sm text-gray-500 px-4 max-w-md">
         Point Restate to your deployed services so Restate can discover and
-        register your services and handlers
+        register your <ServiceExplainer>services</ServiceExplainer> and handlers
       </p>
       <div className="mt-4">
         <TriggerRegisterDeploymentDialog />

libs/ui/icons/src/lib/Icons.tsx

@@ -25,6 +25,7 @@ import {
   X,
   Box,
   SquareFunction,
+  Info,
 } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { tv } from 'tailwind-variants';
@@ -74,6 +75,7 @@ export const enum IconName {
   Lambda = 'Lambda',
   Box = 'Box',
   Function = 'SquareFunction',
+  Info = 'Info',
 }
 export interface IconsProps {
   name: IconName;
@@ -117,6 +119,7 @@ const ICONS: Record<IconName, LucideIcon> = {
   [IconName.Lambda]: Lambda,
   [IconName.Box]: Box,
   [IconName.Function]: SquareFunction,
+  [IconName.Info]: Info,
 };
 
 const styles = tv({

libs/ui/tooltip/.babelrc

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

libs/ui/tooltip/README.md

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

libs/ui/tooltip/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/ui/tooltip/project.json

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

libs/ui/tooltip/src/index.ts

@@ -0,0 +1,4 @@
+export { TooltipContent } from './lib/TooltipContent';
+export * from './lib/Tooltip';
+export * from './lib/TooltipTrigger';
+export * from './lib/InlineTooltip';