Update UI for new service modify behaviour (#348)

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

Author: nikrooz

apps/web-ui/app/root.tsx

@@ -23,15 +23,6 @@ import {
   HealthCheckNotification,
   HealthIndicator,
 } from '@restate/features/health';
-import {
-  DeleteDeployment,
-  DeploymentDetails,
-  ServicePlayground,
-  ServiceDetails,
-  SERVICE_PLAYGROUND_QUERY_PARAM,
-  SERVICE_QUERY_PARAM,
-  DEPLOYMENT_QUERY_PARAM,
-} from '@restate/features/overview-route';
 import { Spinner } from '@restate/ui/loading';
 import {
   InvocationActions,
@@ -46,6 +37,17 @@ import {
 import { EditState } from '@restate/features/edit-state';
 import { FeatureFlags } from '@restate/util/feature-flag';
 import { QueryClient } from '@tanstack/react-query';
+import {
+  DEPLOYMENT_QUERY_PARAM,
+  DeleteDeployment,
+} from '@restate/features/deployment';
+import {
+  SERVICE_PLAYGROUND_QUERY_PARAM,
+  SERVICE_QUERY_PARAM,
+  ServicePlayground,
+} from '@restate/features/service';
+import { DeploymentDetails } from '@restate/features/deployment-details';
+import { EditService, ServiceDetails } from '@restate/features/service-details';
 
 export const links: LinksFunction = () => [
   // TODO: move to the its own lib
@@ -242,6 +244,7 @@ export default function App() {
             <ServicePlayground />
             <InvocationPanel />
             <StatePanel />
+            <EditService />
             <InvocationActions />
             <Support />
           </EditState>

libs/data-access/admin-api/src/lib/api/type.ts

@@ -104,3 +104,12 @@ export function getEndpoint(deployment?: Deployment) {
     return deployment.arn;
   }
 }
+export function getProtocolType(deployment?: Deployment) {
+  if (!deployment) {
+    return undefined;
+  }
+  if (isHttpDeployment(deployment)) {
+    return deployment.protocol_type;
+  }
+  return 'RequestResponse';
+}

libs/features/deployment-details/.babelrc

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

libs/features/deployment-details/README.md

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

libs/features/deployment-details/eslint.config.cjs

@@ -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/deployment-details/project.json

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

libs/features/deployment-details/src/index.ts

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

libs/features/overview-route/src/lib/Details/Deployment.tsx renamed to libs/features/deployment-details/src/lib/DeploymentDetails.tsx

@@ -5,10 +5,6 @@ import {
   ComplementaryFooter,
   useParamValue,
 } from '@restate/ui/layout';
-import {
-  DELETE_DEPLOYMENT_QUERY_PARAM,
-  DEPLOYMENT_QUERY_PARAM,
-} from '../constants';
 import { useSearchParams } from 'react-router';
 import { Section, SectionContent, SectionTitle } from '@restate/ui/section';
 import { Icon, IconName } from '@restate/ui/icons';
@@ -17,18 +13,23 @@ import {
   getEndpoint,
   isHttpDeployment,
   isLambdaDeployment,
+  getProtocolType,
 } from '@restate/data-access/admin-api';
 import { InlineTooltip, TruncateWithTooltip } from '@restate/ui/tooltip';
-import { MiniService } from '../MiniService';
 import {
   ProtocolTypeExplainer,
   ServiceCompatibility,
 } from '@restate/features/explainers';
 import { ErrorBanner } from '@restate/ui/error';
 import { Copy } from '@restate/ui/copy';
 import { Badge } from '@restate/ui/badge';
-import { SDK } from './SDK';
 import { useDeploymentDetails } from '@restate/data-access/admin-api-hooks';
+import { MiniService } from '@restate/features/service';
+import {
+  DEPLOYMENT_QUERY_PARAM,
+  DELETE_DEPLOYMENT_QUERY_PARAM,
+  SDK,
+} from '@restate/features/deployment';
 
 export function DeploymentDetails() {
   return (
@@ -270,13 +271,3 @@ function Header({ name, value }: { name: string; value: string }) {
     </div>
   );
 }
-
-function getProtocolType(deployment?: Deployment) {
-  if (!deployment) {
-    return undefined;
-  }
-  if (isHttpDeployment(deployment)) {
-    return deployment.protocol_type;
-  }
-  return 'RequestResponse';
-}

libs/features/deployment-details/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/deployment-details/tsconfig.lib.json

@@ -0,0 +1,35 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "../../../@types/global-env.d.ts"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "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"]
+}