chore: Tidy up test plugin changes

packages/dev-server/test-plugins/experimental-ui/components/CustomDetailComponent.tsx

@@ -1,18 +1,30 @@
-import { Card, useDetailComponentData } from '@vendure/admin-ui/react';
-import React from 'react';
+import { Card, useDetailComponentData, useInjector } from '@vendure/admin-ui/react';
+import React, { useEffect, useState } from 'react';
 
-export function CustomDetailComponent(props: any) {
+import { CmsDataService } from '../providers/cms-data.service';
+
+export function ProductInfo() {
+    // The "entity" will vary depending on which detail page this component
+    // is embedded in. In this case, it will be a "product" entity.
     const { entity, detailForm } = useDetailComponentData();
-    const updateName = () => {
-        detailForm.get('name')?.setValue('New name');
-        detailForm.markAsDirty();
-    };
+    const cmsDataService = useInjector(CmsDataService);
+    const [extraInfo, setExtraInfo] = useState<any>();
+
+    useEffect(() => {
+        if (!(entity as any)?.id) {
+            return;
+        }
+        const subscription = cmsDataService.getDataFor((entity as any).id).subscribe(data => {
+            setExtraInfo(data);
+        });
+        return () => subscription.unsubscribe();
+    }, [(entity as any)?.id]);
+
     return (
-        <Card title={'Custom Detail Component'}>
-            <button className="button" onClick={updateName}>
-                Update name
-            </button>
-            <pre>{JSON.stringify(entity, null, 2)}</pre>
-        </Card>
+        <div className="mb-4">
+            <Card title="CMS Info">
+                <pre>{JSON.stringify(extraInfo, null, 2)}</pre>
+            </Card>
+        </div>
     );
 }

packages/dev-server/test-plugins/experimental-ui/components/Greeter.tsx

@@ -1,8 +1,12 @@
+import { userIcon } from '@cds/core/icon';
 import { NotificationService } from '@vendure/admin-ui/core';
-import { Card, useInjector, usePageMetadata } from '@vendure/admin-ui/react';
-import React, { useState, useEffect } from 'react';
+import { Card, registerCdsIcon, useInjector, usePageMetadata, useRouteParams } from '@vendure/admin-ui/react';
+import React, { useEffect, useState } from 'react';
+
+registerCdsIcon(userIcon);
 
 export function Greeter(props: { name: string }) {
+    const { params, queryParams } = useRouteParams();
     const notificationService = useInjector(NotificationService);
     const { setTitle, setBreadcrumb } = usePageMetadata();
     const [titleValue, setTitleValue] = useState('');
@@ -20,6 +24,10 @@ export function Greeter(props: { name: string }) {
         notificationService.success('You clicked me!');
     }
 
+    console.log(
+        `Greeter.tsx: params: ${JSON.stringify(params)}, queryParams: ${JSON.stringify(queryParams)}`,
+    );
+
     return (
         <div className="page-block">
             <Card title={`Hello ${props.name}`}>
@@ -27,6 +35,8 @@ export function Greeter(props: { name: string }) {
                     Click me
                 </button>
 
+                <cds-icon shape="user" flip={'vertical'} badge={'warning'} solid size={'xxl'}></cds-icon>
+
                 <div className="form-grid">
                     <div>
                         <input value={titleValue} onInput={e => setTitleValue((e.target as any).value)} />

packages/dev-server/test-plugins/experimental-ui/components/ReactNumberInput.tsx

@@ -7,7 +7,7 @@ export function ReactNumberInput({ readonly }: ReactFormInputOptions) {
     const notificationService = useInjector(NotificationService);
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const val = +(e.target as any).value;
+        const val = +e.target.value;
         if (val === 0) {
             notificationService.error('Cannot be zero');
         } else {

packages/dev-server/test-plugins/experimental-ui/providers.ts

@@ -1,10 +1,13 @@
 import { registerDataTableComponent } from '@vendure/admin-ui/core';
-import { registerReactDataTableComponent } from '@vendure/admin-ui/react';
+import { registerReactCustomDetailComponent, registerReactDataTableComponent } from '@vendure/admin-ui/react';
 
+import { ProductInfo } from './components/CustomDetailComponent';
 import { SlugWithLinkComponent } from './components/slug-with-link.component';
 import { SlugWithLink } from './components/SlugWithLink';
+import { CmsDataService } from './providers/cms-data.service';
 
 export default [
+    CmsDataService,
     registerDataTableComponent({
         component: SlugWithLinkComponent,
         tableId: 'product-list',
@@ -18,4 +21,8 @@ export default [
             foo: 'bar',
         },
     }),
+    registerReactCustomDetailComponent({
+        locationId: 'product-detail',
+        component: ProductInfo,
+    }),
 ];

packages/dev-server/test-plugins/experimental-ui/routes.ts

@@ -6,7 +6,7 @@ import { ProductList } from './components/ProductList';
 export default [
     registerReactRouteComponent({
         component: Greeter,
-        path: 'greet',
+        path: ':name',
         title: 'Greeter Page',
         breadcrumb: 'Greeter',
         props: {