implemented CMS entry copy features

platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx

@@ -13,6 +13,8 @@ import {
   renderMaybeLocalizedInput,
 } from "@/wab/client/components/cms/CmsInputs";
 import { isCmsTextLike } from "@/wab/client/components/cms/utils";
+import Button from "@/wab/client/components/widgets/Button";
+import { Modal } from "@/wab/client/components/widgets/Modal";
 import { useApi, useAppCtx } from "@/wab/client/contexts/AppContexts";
 import {
   DefaultCmsEntryDetailsProps,
@@ -33,7 +35,15 @@ import { spawn } from "@/wab/shared/common";
 import { DEVFLAGS } from "@/wab/shared/devflags";
 import { substituteUrlParams } from "@/wab/shared/utils/url-utils";
 import { HTMLElementRefOf } from "@plasmicapp/react-web";
-import { Drawer, Form, Menu, message, notification, Tooltip } from "antd";
+import {
+  Drawer,
+  Form,
+  Input,
+  Menu,
+  message,
+  notification,
+  Tooltip,
+} from "antd";
 import { useForm } from "antd/lib/form/Form";
 import { isEqual, isNil, mapValues, pickBy } from "lodash";
 import * as React from "react";
@@ -175,6 +185,10 @@ function CmsEntryDetailsForm_(
   const [hasUnpublishedChanges, setHasUnpublishedChanges] = React.useState(
     !!row?.draftData
   );
+  // Hyuna
+  const [showCopyModal, setShowCopyModal] = React.useState(false);
+  const [inputCopyIdentifier, setInputCopyIdentifier] = React.useState("");
+
   const [revision, setRevision] = React.useState(row.revision);
   const [inConflict, setInConflict] = React.useState(false);
   const mutateRow_ = useMutateRow();
@@ -572,16 +586,30 @@ function CmsEntryDetailsForm_(
                             content: "Reverted.",
                           });
                         }}
-                        disabled={isSaving || isPublishing}
+                        disabled={isSaving}
                       >
                         <Tooltip title="Reverts draft data to previously-published data">
                           <span>Revert to published entry</span>
                         </Tooltip>
                       </Menu.Item>
                     )}
-                    <Menu.Divider />
                   </>
                 )}
+                <Menu.Item
+                  key="copy"
+                  onClick={() => {
+                    if (row.identifier) {
+                      setInputCopyIdentifier(`Copy of ${row.identifier}`);
+                    } else {
+                      setInputCopyIdentifier("");
+                    }
+                    setShowCopyModal(true);
+                  }}
+                  disabled={isSaving || isPublishing}
+                >
+                  <span>Copy entry</span>
+                </Menu.Item>
+                <Menu.Divider />
                 <Menu.Item
                   key="delete"
                   onClick={async () => {
@@ -632,6 +660,71 @@ function CmsEntryDetailsForm_(
           }}
         />
       </Form>
+      {showCopyModal && (
+        <Modal
+          title="Duplicate CMS entry"
+          footer={null}
+          open={true}
+          onCancel={() => setShowCopyModal(false)}
+        >
+          <Form.Item name="copyIdentifier">
+            <span>
+              {`Duplicate the CMS entry with identifier "${inputCopyIdentifier}"?`}
+              <br />
+              {`This will create an unpublished copy of the entry and all its data.`}
+            </span>
+            <Input
+              defaultValue={inputCopyIdentifier}
+              onChange={(e) => setInputCopyIdentifier(e.target.value)}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button
+              type="primary"
+              onClick={async (e) => {
+                e.currentTarget.disabled = true;
+                await message.loading({
+                  key: "copy-message",
+                  content: `Duplicating CMS entry "${
+                    row.identifier ? row.identifier : "Untitled"
+                  }"...`,
+                });
+                const copiedRow = await api.copyCmsRow(row.id, {
+                  identifier: inputCopyIdentifier,
+                });
+                if (copiedRow) {
+                  await message.success({
+                    key: "copy-message",
+                    content: (
+                      <>
+                        {`A duplicate of CMS entry
+                          "${
+                            copiedRow.identifier
+                              ? copiedRow.identifier
+                              : "Untitled"
+                          }"
+                          has been created.`}
+                        <br />
+                        {`You are now viewing the duplicated entry.`}
+                      </>
+                    ),
+                  });
+                  history.push(
+                    UU.cmsEntry.fill({
+                      databaseId: database.id,
+                      tableId: table.id,
+                      rowId: copiedRow.id,
+                    })
+                  );
+                }
+              }}
+            >
+              Copy
+            </Button>
+            <Button onClick={() => setShowCopyModal(false)}>Cancel</Button>
+          </Form.Item>
+        </Modal>
+      )}
     </>
   );
 }

platform/wab/src/wab/server/AppServer.ts

@@ -61,6 +61,7 @@ import {
 import {
   cloneDatabase,
   cmsFileUpload,
+  copyRow,
   createDatabase,
   createRows,
   createTable,
@@ -826,6 +827,8 @@ export function addCmsEditorRoutes(app: express.Application) {
   app.get("/api/v1/cmse/rows/:rowId/revisions", withNext(listRowRevisions));
   app.put("/api/v1/cmse/rows/:rowId", withNext(updateRow));
   app.delete("/api/v1/cmse/rows/:rowId", withNext(deleteRow));
+  // Hyuna
+  app.post("/api/v1/cmse/rows/:rowId/copy", withNext(copyRow));
   app.get("/api/v1/cmse/row-revisions/:revId", withNext(getRowRevision));
 
   app.post(

platform/wab/src/wab/server/db/DbMgr.ts

@@ -274,6 +274,7 @@ import {
   UpdateResult,
 } from "typeorm";
 import * as uuid from "uuid";
+// Hyuna
 
 import { getLowestCommonAncestor } from "@/wab/shared/site-diffs/commit-graph";
 
@@ -7342,6 +7343,26 @@ export class DbMgr implements MigrationDbMgr {
     await this.entMgr.save(row);
   }
 
+  // Hyuna
+  async copyCmsRow(
+    tableId: CmsTableId,
+    rowId: CmsRowId,
+    opts: {
+      identifier?: string;
+      data?: Dict<Dict<unknown>>;
+      draftData?: Dict<Dict<unknown>> | null;
+    }
+  ) {
+    await this.checkCmsRowPerms(rowId, "content");
+    const row = await this.getCmsRowById(rowId);
+    opts = {
+      identifier: opts.identifier !== "" ? opts.identifier : undefined,
+      draftData: row.draftData || row.data,
+    };
+    const copiedRow = await this.createCmsRow(tableId, opts);
+    return await this.entMgr.save(copiedRow);
+  }
+
   // TODO We are always querying just the default locale.
   async queryCmsRows(
     tableId: CmsTableId,

platform/wab/src/wab/server/routes/cmse.ts

@@ -269,6 +269,27 @@ export async function deleteRow(req: Request, res: Response) {
   res.json({});
 }
 
+// Hyuna
+export async function copyRow(req: Request, res: Response) {
+  const mgr = userDbMgr(req);
+  const row = await mgr.getCmsRowById(req.params.rowId as CmsRowId);
+  userAnalytics(req).track({
+    event: "Copy cms row",
+    properties: {
+      rowId: row.id as CmsRowId,
+      tableId: row.tableId,
+      tableName: row.table?.name,
+      databaseId: row.table?.databaseId,
+    },
+  });
+  const copiedRow = await mgr.copyCmsRow(
+    row.tableId as CmsTableId,
+    req.params.rowId as CmsRowId,
+    req.body
+  );
+  res.json(copiedRow);
+}
+
 export async function updateRow(req: Request, res: Response) {
   const mgr = userDbMgr(req);
   const row = await mgr.updateCmsRow(req.params.rowId as CmsRowId, req.body);

platform/wab/src/wab/shared/SharedApi.ts

@@ -1724,6 +1724,15 @@ export abstract class SharedApi {
     return (await this.put(`/cmse/rows/${rowId}`, opts)) as ApiCmseRow;
   }
 
+  async copyCmsRow(
+    rowId: CmsRowId,
+    opts: {
+      identifier: string;
+    }
+  ) {
+    return (await this.post(`/cmse/rows/${rowId}/copy`, opts)) as ApiCmseRow;
+  }
+
   async deleteCmsRow(rowId: CmsRowId) {
     return await this.delete(`/cmse/rows/${rowId}`);
   }