Improve item details, default restore path

Author: davisagli

packages/cmsui/components/RecycleBin/RecycleBin.test.tsx

@@ -169,12 +169,37 @@ describe('RecycleBin components', () => {
 
     expect(screen.getByText('Deleted page')).toBeInTheDocument();
     expect(screen.getAllByText('/Plone/deleted-page')[0]).toBeInTheDocument();
+    expect(
+      screen.queryByText('cmsui.recyclebin.details.originalId'),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('cmsui.recyclebin.details.parentPath'),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('cmsui.recyclebin.details.containedItems'),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByText('cmsui.recyclebin.children.title (1)'),
+    ).toBeInTheDocument();
     expect(screen.getByText('admin')).toBeInTheDocument();
   });
 
+  it('prefills the restore target path with the original parent path', () => {
+    const { container } = renderWithRouter(
+      <RecycleBinItemDetails item={recycleBinItem} />,
+    );
+
+    expect(
+      container.querySelector<HTMLInputElement>('input[name="target_path"]')
+        ?.value,
+    ).toBe('/Plone');
+  });
+
   it('requires a target path for child restore inputs', () => {
     renderWithRouter(<RecycleBinItemDetails item={recycleBinItem} />);
 
-    expect(screen.getByLabelText('Target path for Child page')).toBeRequired();
+    const targetPath = screen.getByLabelText('Target path for Child page');
+    expect(targetPath).toBeRequired();
+    expect(targetPath).toHaveValue('');
   });
 });

packages/cmsui/components/RecycleBin/RecycleBinChildrenTable.tsx

@@ -5,8 +5,10 @@ import type { RecycleBinChildItem } from '@plone/types';
 
 export function RecycleBinChildrenTable({
   childrenItems,
+  itemsTotal,
 }: {
   childrenItems: RecycleBinChildItem[];
+  itemsTotal: number;
 }) {
   const { t } = useTranslation();
 
@@ -15,7 +17,7 @@ export function RecycleBinChildrenTable({
   return (
     <section className="mt-8">
       <h2 className="mb-3 text-xl font-semibold">
-        {t('cmsui.recyclebin.children.title')}
+        {t('cmsui.recyclebin.children.title')} ({itemsTotal})
       </h2>
       <div className="overflow-x-auto border border-quanta-smoke">
         <table className="w-full min-w-[760px] border-collapse text-left text-sm">

packages/cmsui/components/RecycleBin/RecycleBinItemDetails.tsx

@@ -34,18 +34,6 @@ export function RecycleBinItemDetails({
           md:grid-cols-2
         `}
       >
-        <div>
-          <dt className="text-sm text-quanta-iron">
-            {t('cmsui.recyclebin.details.originalId')}
-          </dt>
-          <dd>{item.id}</dd>
-        </div>
-        <div>
-          <dt className="text-sm text-quanta-iron">
-            {t('cmsui.recyclebin.details.workflowState')}
-          </dt>
-          <dd>{item.review_state}</dd>
-        </div>
         <div>
           <dt className="text-sm text-quanta-iron">
             {t('cmsui.recyclebin.details.path')}
@@ -54,9 +42,9 @@ export function RecycleBinItemDetails({
         </div>
         <div>
           <dt className="text-sm text-quanta-iron">
-            {t('cmsui.recyclebin.details.parentPath')}
+            {t('cmsui.recyclebin.details.workflowState')}
           </dt>
-          <dd>{item.parent_path}</dd>
+          <dd>{item.review_state}</dd>
         </div>
         <div>
           <dt className="text-sm text-quanta-iron">
@@ -70,15 +58,15 @@ export function RecycleBinItemDetails({
           </dt>
           <dd>{item.deleted_by}</dd>
         </div>
-        <div>
-          <dt className="text-sm text-quanta-iron">
-            {t('cmsui.recyclebin.details.containedItems')}
-          </dt>
-          <dd>{item.items_total}</dd>
-        </div>
       </dl>
-      <RecycleBinRestorePanel actionMessage={actionMessage} />
-      <RecycleBinChildrenTable childrenItems={item.items} />
+      <RecycleBinRestorePanel
+        actionMessage={actionMessage}
+        defaultTargetPath={item.parent_path}
+      />
+      <RecycleBinChildrenTable
+        childrenItems={item.items}
+        itemsTotal={item.items_total}
+      />
     </section>
   );
 }

packages/cmsui/components/RecycleBin/RecycleBinRestorePanel.tsx

@@ -4,8 +4,10 @@ import { Button } from '@plone/components/quanta';
 
 export function RecycleBinRestorePanel({
   actionMessage,
+  defaultTargetPath,
 }: {
   actionMessage?: string;
+  defaultTargetPath: string;
 }) {
   const { t } = useTranslation();
 
@@ -24,6 +26,7 @@ export function RecycleBinRestorePanel({
           {t('cmsui.recyclebin.restorePanel.targetPath')}
           <input
             name="target_path"
+            defaultValue={defaultTargetPath}
             className="rounded border border-quanta-silver px-3 py-2"
           />
         </label>