From 8315c612199b722ab28a8258373423cc5847d7ea Mon Sep 17 00:00:00 2001 From: Chung Wu Date: Thu, 14 Dec 2023 20:46:24 +0000 Subject: [PATCH] Merge changes from topic "cms2" * changes: [cms] "preview" link for CMS entries, CMS publish webhooks [cms] plasmic sync CMS project to add preview button GitOrigin-RevId: f89484577223a0a9c4a3f78162f66ab4269eb6de --- platform/wab/plasmic.json | 11 +- platform/wab/plasmic.lock | 54 +-- .../client/components/cms/CmsEntriesList.tsx | 51 ++- .../client/components/cms/CmsEntryDetails.tsx | 37 +++ .../client/components/cms/CmsModelDetails.tsx | 312 ++++++++++++++++-- .../wab/client/components/live/PreviewCtx.tsx | 10 +- .../components/webhooks/WebhooksItem.tsx | 22 +- .../wab/client/components/widgets/Button.tsx | 8 +- .../plasmic_kit_cms/PlasmicCmsContentPage.tsx | 4 +- .../PlasmicCmsEntriesList.module.css | 10 +- .../plasmic_kit_cms/PlasmicCmsEntriesList.tsx | 20 +- .../PlasmicCmsEntryDetails.module.css | 28 +- .../PlasmicCmsEntryDetails.tsx | 57 ++-- .../plasmic_kit_cms/PlasmicCmsEntryItem.tsx | 4 +- .../PlasmicCmsLeftTabs.module.css | 3 - .../plasmic_kit_cms/PlasmicCmsLeftTabs.tsx | 4 +- .../PlasmicCmsModelContent.tsx | 4 +- .../PlasmicCmsModelDetails.module.css | 3 - .../PlasmicCmsModelDetails.tsx | 4 +- .../plasmic_kit_cms/PlasmicCmsModelItem.tsx | 4 +- .../PlasmicCmsModelsList.module.css | 2 - .../plasmic_kit_cms/PlasmicCmsModelsList.tsx | 4 +- .../plasmic_kit_cms/PlasmicCmsRoot.tsx | 4 +- .../plasmic_kit_cms/PlasmicCmsSchemaPage.tsx | 4 +- .../PlasmicCmsSettingsPage.module.css | 2 - .../PlasmicCmsSettingsPage.tsx | 4 +- .../PlasmicCmsTopBar.module.css | 1 - .../plasmic_kit_cms/PlasmicCmsTopBar.tsx | 4 +- platform/wab/src/wab/server/AppServer.ts | 5 + platform/wab/src/wab/server/db/DbMgr.ts | 7 +- .../wab/src/wab/server/entities/Entities.ts | 4 + .../1702499131799-AddCmsTableSettings.ts | 13 + platform/wab/src/wab/server/routes/cmse.ts | 18 + .../wab/src/wab/server/trigger-webhooks.ts | 24 +- platform/wab/src/wab/shared/ApiSchema.ts | 18 +- platform/wab/src/wab/shared/SharedApi.ts | 10 + .../wab/src/wab/shared/utils/url-utils.ts | 14 + 37 files changed, 605 insertions(+), 183 deletions(-) create mode 100644 platform/wab/src/wab/server/migrations/1702499131799-AddCmsTableSettings.ts create mode 100644 platform/wab/src/wab/shared/utils/url-utils.ts diff --git a/platform/wab/plasmic.json b/platform/wab/plasmic.json index c787d93cb05..8a1a8d9856e 100644 --- a/platform/wab/plasmic.json +++ b/platform/wab/plasmic.json @@ -576,7 +576,8 @@ "indirect": false, "globalContextsFilePath": "", "splitsProviderFilePath": "", - "customFunctions": [] + "customFunctions": [], + "jsBundleThemes": [] }, { "projectId": "ooL7EhXDmFQWnW9sxtchhE", @@ -8815,8 +8816,8 @@ "componentImportPath": "@plasmicapp/react-web/lib/data-sources" } ], - "jsBundleThemes": [], - "splitsProviderFilePath": "" + "splitsProviderFilePath": "", + "customFunctions": [] }, { "projectId": "gtUDvxG6cmBbSzqLikNzoP", @@ -11071,6 +11072,6 @@ "postSyncCommands": [ "git ls-files -m | xargs pre-commit run prettier --files" ], - "cliVersion": "0.1.322", - "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.322/dist/plasmic.schema.json" + "cliVersion": "0.1.325", + "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.325/dist/plasmic.schema.json" } diff --git a/platform/wab/plasmic.lock b/platform/wab/plasmic.lock index c67be846592..447eaf80c3b 100644 --- a/platform/wab/plasmic.lock +++ b/platform/wab/plasmic.lock @@ -7640,7 +7640,7 @@ }, { "projectId": "ieacQ3Z46z4gwo1FnaB5vY", - "version": "3.0.1", + "version": "4.0.0", "dependencies": { "tXkSR39sgCDWSitZxC5xFV": "75.3.1", "oT38tGyqov9SPWHpf3Y2Rf": "4.7.0", @@ -7657,112 +7657,112 @@ { "type": "renderModule", "assetId": "FxC1c7NZtR", - "checksum": "f82a417131ff56886c059db3923fa92e" + "checksum": "6a3131466a3d2a738d6827c93e27d832" }, { "type": "cssRules", "assetId": "FxC1c7NZtR", - "checksum": "f82a417131ff56886c059db3923fa92e" + "checksum": "6a3131466a3d2a738d6827c93e27d832" }, { "type": "renderModule", "assetId": "kX5_DA_mZR", - "checksum": "b3d490c6d240ab1ea271ff8625170eda" + "checksum": "ac8484e27b480dc7e29505b3a7fd4e46" }, { "type": "cssRules", "assetId": "kX5_DA_mZR", - "checksum": "b3d490c6d240ab1ea271ff8625170eda" + "checksum": "ac8484e27b480dc7e29505b3a7fd4e46" }, { "type": "renderModule", "assetId": "fC6EeUMrpE", - "checksum": "29cdae091f4d0ce21889ea8904e5c670" + "checksum": "acd8a719a39fef84320dc2d42caf7344" }, { "type": "cssRules", "assetId": "fC6EeUMrpE", - "checksum": "29cdae091f4d0ce21889ea8904e5c670" + "checksum": "acd8a719a39fef84320dc2d42caf7344" }, { "type": "renderModule", "assetId": "M3aa84scyXT", - "checksum": "faa7a80ca51a37a6fd24be75182d1dbe" + "checksum": "556615e52ff03402d806f84c2795d9cc" }, { "type": "cssRules", "assetId": "M3aa84scyXT", - "checksum": "faa7a80ca51a37a6fd24be75182d1dbe" + "checksum": "556615e52ff03402d806f84c2795d9cc" }, { "type": "renderModule", "assetId": "FpZFUfiTA6", - "checksum": "8a40f378f4698e5446cbf382dc502c05" + "checksum": "c2a25d5a0598e9cb1c93f76b7c102c06" }, { "type": "cssRules", "assetId": "FpZFUfiTA6", - "checksum": "8a40f378f4698e5446cbf382dc502c05" + "checksum": "c2a25d5a0598e9cb1c93f76b7c102c06" }, { "type": "renderModule", "assetId": "girCdMST6R", - "checksum": "de075d1a032621446be780abb94768f1" + "checksum": "d6db92b395dcd97a7d073914d28c0efd" }, { "type": "cssRules", "assetId": "girCdMST6R", - "checksum": "de075d1a032621446be780abb94768f1" + "checksum": "d6db92b395dcd97a7d073914d28c0efd" }, { "type": "renderModule", "assetId": "k2vc2stl18", - "checksum": "754bbd05aefcdae928962fbb45a139dd" + "checksum": "7691d46eef02acf7c29f3a9d83c35ed7" }, { "type": "cssRules", "assetId": "k2vc2stl18", - "checksum": "754bbd05aefcdae928962fbb45a139dd" + "checksum": "7691d46eef02acf7c29f3a9d83c35ed7" }, { "type": "renderModule", "assetId": "9vM3ZFGR4eV", - "checksum": "3a98421ad015ad6a815f797624bce7ea" + "checksum": "19868deece2805abbf23ba4920cc5b14" }, { "type": "cssRules", "assetId": "9vM3ZFGR4eV", - "checksum": "3a98421ad015ad6a815f797624bce7ea" + "checksum": "19868deece2805abbf23ba4920cc5b14" }, { "type": "renderModule", "assetId": "FiuFB1wXjp", - "checksum": "ede12d91012043471296a84f0b4297b0" + "checksum": "107becdf96040277d7c8ff46856fd563" }, { "type": "cssRules", "assetId": "FiuFB1wXjp", - "checksum": "ede12d91012043471296a84f0b4297b0" + "checksum": "107becdf96040277d7c8ff46856fd563" }, { "type": "renderModule", "assetId": "y1ZiXuS8BD", - "checksum": "985be79a466f1e94f0f149407067e353" + "checksum": "27a640d634db6b3100a87de84d3e4d31" }, { "type": "cssRules", "assetId": "y1ZiXuS8BD", - "checksum": "985be79a466f1e94f0f149407067e353" + "checksum": "27a640d634db6b3100a87de84d3e4d31" }, { "type": "renderModule", "assetId": "pLQf-lY112u", - "checksum": "cbbe117b5b2b54ff6b3e3fe9967bd5b7" + "checksum": "b7a6068e00ff68b3509746f187a08361" }, { "type": "cssRules", "assetId": "pLQf-lY112u", - "checksum": "cbbe117b5b2b54ff6b3e3fe9967bd5b7" + "checksum": "b7a6068e00ff68b3509746f187a08361" }, { "type": "icon", @@ -7782,22 +7782,22 @@ { "type": "renderModule", "assetId": "Tz8Unep1qu", - "checksum": "c840133efc8d0dc5fc704fcfb9231819" + "checksum": "e3b8f7edebe52e0947d45fe721b00a9d" }, { "type": "cssRules", "assetId": "Tz8Unep1qu", - "checksum": "c840133efc8d0dc5fc704fcfb9231819" + "checksum": "e3b8f7edebe52e0947d45fe721b00a9d" }, { "type": "renderModule", "assetId": "a5viGetjMi", - "checksum": "fac09e398b86da763c8977706c2c651d" + "checksum": "ffd47de83e11deb0292c44845f4371ea" }, { "type": "cssRules", "assetId": "a5viGetjMi", - "checksum": "fac09e398b86da763c8977706c2c651d" + "checksum": "ffd47de83e11deb0292c44845f4371ea" }, { "type": "icon", diff --git a/platform/wab/src/wab/client/components/cms/CmsEntriesList.tsx b/platform/wab/src/wab/client/components/cms/CmsEntriesList.tsx index 5c3710be9b7..7aceafa9989 100644 --- a/platform/wab/src/wab/client/components/cms/CmsEntriesList.tsx +++ b/platform/wab/src/wab/client/components/cms/CmsEntriesList.tsx @@ -1,23 +1,19 @@ // This is a skeleton starter React component generated by Plasmic. // This file is owned by you, feel free to edit as you see fit. -import { HTMLElementRefOf } from "@plasmicapp/react-web"; -import * as React from "react"; -import { useHistory, useRouteMatch } from "react-router"; -import { - ApiCmseRow, - CmsDatabaseId, - CmsTableId, -} from "../../../shared/ApiSchema"; -import { UU } from "../../cli-routes"; -import { useApi } from "../../contexts/AppContexts"; +import { UU } from "@/wab/client/cli-routes"; +import { Spinner } from "@/wab/client/components/widgets"; +import { useApi } from "@/wab/client/contexts/AppContexts"; import { DefaultCmsEntriesListProps, PlasmicCmsEntriesList, -} from "../../plasmic/plasmic_kit_cms/PlasmicCmsEntriesList"; -import { Spinner } from "../widgets"; +} from "@/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList"; +import { ApiCmseRow, CmsDatabaseId, CmsTableId } from "@/wab/shared/ApiSchema"; +import { HTMLElementRefOf } from "@plasmicapp/react-web"; +import fastStringify from "fast-stringify"; +import * as React from "react"; +import { useHistory, useRouteMatch } from "react-router"; import { useCmsTable, useMutateTableRows } from "./cms-contexts"; import CmsEntryItem from "./CmsEntryItem"; -import fastStringify from "fast-stringify"; export interface CmsEntriesListProps extends DefaultCmsEntriesListProps { rows?: ApiCmseRow[]; @@ -30,8 +26,10 @@ function CmsEntriesList_( const { rows, ...rest } = props; const api = useApi(); const history = useHistory(); - const match = - useRouteMatch<{ databaseId: CmsDatabaseId; tableId: CmsTableId }>(); + const match = useRouteMatch<{ + databaseId: CmsDatabaseId; + tableId: CmsTableId; + }>(); const { databaseId, tableId } = match.params; const table = useCmsTable(databaseId, tableId); const mutateTableRows = useMutateTableRows(); @@ -40,7 +38,7 @@ function CmsEntriesList_( if (!rows || !table) { return ; } - const filteredRows = rows?.filter((row) => + const filteredRows = rows?.filter((row) => fastStringify(Object.values(row)) .toLowerCase() .includes(query.toLowerCase()) @@ -51,18 +49,19 @@ function CmsEntriesList_( {...rest} root={{ ref }} modelName={table.name} - searchInput={{ - value: query, - onChange: (e) => setQuery(e.target.value), - }} + // searchInput={{ + // value: query, + // onChange: (e) => setQuery(e.target.value), + // }} children={ <> - {filteredRows ? - filteredRows.map((row) => ( - - )): rows.map((row) => ( - - ))} + {filteredRows + ? filteredRows.map((row) => ( + + )) + : rows.map((row) => ( + + ))} } addButton={{ diff --git a/platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx b/platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx index 19927ebd6a0..08abb61c549 100644 --- a/platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx +++ b/platform/wab/src/wab/client/components/cms/CmsEntryDetails.tsx @@ -16,6 +16,7 @@ import { CmsRowId, CmsTableId, } from "@/wab/shared/ApiSchema"; +import { substituteUrlParams } from "@/wab/shared/utils/url-utils"; import { HTMLElementRefOf } from "@plasmicapp/react-web"; import { Drawer, Form, Menu, message, notification, Tooltip } from "antd"; import { useForm } from "antd/lib/form/Form"; @@ -421,6 +422,24 @@ function CmsEntryDetailsForm_( } } + previewButton={ + table.settings?.previewUrl + ? { + props: { + href: substituteUrlParams( + table.settings.previewUrl, + (row.draftData?.[""] ?? row.data?.[""] ?? {}) as Record< + string, + string + > + ), + target: "_blank", + }, + } + : { + render: () => null, + } + } publishButton={{ render: (ps, Comp) => ( // Wrap in Form.Item so it can react to form error state @@ -449,6 +468,24 @@ function CmsEntryDetailsForm_( content: "Your changes have been published.", duration: 5, }); + const hooks = table.settings?.webhooks?.filter( + (hook) => hook.event === "publish" + ); + if (hooks && hooks.length > 0) { + const hooksResp = await api.triggerCmsTableWebhooks( + table.id, + "publish" + ); + const failed = hooksResp.responses.filter( + (r) => r.status !== 200 + ); + if (failed.length > 0) { + await message.warning({ + content: "Some publish hooks failed.", + duration: 5, + }); + } + } } }} disabled={ diff --git a/platform/wab/src/wab/client/components/cms/CmsModelDetails.tsx b/platform/wab/src/wab/client/components/cms/CmsModelDetails.tsx index a6aa9781c9b..f47609e15e6 100644 --- a/platform/wab/src/wab/client/components/cms/CmsModelDetails.tsx +++ b/platform/wab/src/wab/client/components/cms/CmsModelDetails.tsx @@ -1,33 +1,55 @@ -import { HTMLElementRefOf } from "@plasmicapp/react-web"; -import { Collapse, Dropdown, Form, InputNumber, Menu, message } from "antd"; -import { FormInstance, useForm } from "antd/lib/form/Form"; -import L, { isEqual, sortBy } from "lodash"; -import * as React from "react"; -import { Prompt, useHistory } from "react-router"; -import { useBeforeUnload } from "react-use"; -import { ensureType, jsonClone, tuple, uniqueName } from "../../../common"; +import { useRRouteMatch, UU } from "@/wab/client/cli-routes"; +import PlasmicWebhookHeader from "@/wab/client/components/webhooks/plasmic/plasmic_kit_continuous_deployment/PlasmicWebhookHeader"; +import PlasmicWebhooksItem from "@/wab/client/components/webhooks/plasmic/plasmic_kit_continuous_deployment/PlasmicWebhooksItem"; +import { Spinner } from "@/wab/client/components/widgets"; +import Button from "@/wab/client/components/widgets/Button"; +import { Icon } from "@/wab/client/components/widgets/Icon"; +import { Modal } from "@/wab/client/components/widgets/Modal"; +import Select from "@/wab/client/components/widgets/Select"; +import Textbox from "@/wab/client/components/widgets/Textbox"; +import { useApi } from "@/wab/client/contexts/AppContexts"; +import PlusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Plus"; +import Trash2Icon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Trash2"; +import { + DefaultCmsModelDetailsProps, + PlasmicCmsModelDetails, +} from "@/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsModelDetails"; +import { + ensureType, + jsonClone, + remove, + spawn, + tuple, + uniqueName, +} from "@/wab/common"; +import { extractParamsFromPagePath } from "@/wab/components"; import { ApiCmsDatabase, CmsDatabaseId, CmsFieldMeta, cmsFieldMetaDefaults, CmsTableId, + CmsTableSettings, CmsTypeMeta, CmsTypeName, cmsTypes, -} from "../../../shared/ApiSchema"; -import { useRRouteMatch, UU } from "../../cli-routes"; -import { useApi } from "../../contexts/AppContexts"; -import PlusIcon from "../../plasmic/plasmic_kit/PlasmicIcon__Plus"; -import Trash2Icon from "../../plasmic/plasmic_kit/PlasmicIcon__Trash2"; +} from "@/wab/shared/ApiSchema"; +import { httpMethods } from "@/wab/shared/HttpClientUtil"; +import { HTMLElementRefOf } from "@plasmicapp/react-web"; import { - DefaultCmsModelDetailsProps, - PlasmicCmsModelDetails, -} from "../../plasmic/plasmic_kit_cms/PlasmicCmsModelDetails"; -import Button from "../widgets/Button"; -import { Icon } from "../widgets/Icon"; -import Select from "../widgets/Select"; -import Textbox from "../widgets/Textbox"; + Collapse, + Dropdown, + Form, + Input, + InputNumber, + Menu, + message, +} from "antd"; +import { FormInstance, useForm } from "antd/lib/form/Form"; +import L, { isEqual, sortBy } from "lodash"; +import * as React from "react"; +import { Prompt, useHistory } from "react-router"; +import { useBeforeUnload } from "react-use"; import { useCmsDatabase, useCmsTable, useMutateTable } from "./cms-contexts"; import { ContentEntryFormContext, @@ -36,7 +58,7 @@ import { ValueSwitch, } from "./CmsInputs"; -export interface CmsModelDetailsProps extends DefaultCmsModelDetailsProps {} +export type CmsModelDetailsProps = DefaultCmsModelDetailsProps; function renderTypeSpecificSubform( database: ApiCmsDatabase, @@ -62,7 +84,6 @@ function renderTypeSpecificSubform( fieldPathSuffix: [], formItemProps: { label: "Default value" }, typeName: typeMeta.type, - })} {(typeName === "text" || typeName === "long-text") && ( @@ -308,6 +329,7 @@ function CmsModelDetails_( const match = useRRouteMatch(UU.cmsModelSchema)!; const history = useHistory(); const { databaseId, tableId } = match.params; + const [showSettingsModal, setShowSettingsModal] = React.useState(false); const database = useCmsDatabase(databaseId); @@ -417,6 +439,15 @@ function CmsModelDetails_( menuButton={{ menu: () => ( + { + setShowSettingsModal(true); + }} + > + Configure settings + + { @@ -467,6 +498,13 @@ function CmsModelDetails_( } /> + {showSettingsModal && ( + setShowSettingsModal(false)} + /> + )} ); } @@ -581,5 +619,235 @@ function ModelFields({ ); } +function ModelSettingsModal(props: { + databaseId: CmsDatabaseId; + tableId: CmsTableId; + onClose: () => void; +}) { + const { onClose, databaseId, tableId } = props; + const table = useCmsTable(databaseId, tableId); + const api = useApi(); + const [saving, setSaving] = React.useState(false); + const mutateTable = useMutateTable(); + return ( + + {!table ? ( + + ) : ( +
{ + console.log("FORM VALUES", values); + setSaving(true); + normalizeTableSettings(values); + await api.updateCmsTable(tableId, { + settings: values, + }); + await mutateTable(databaseId, tableId); + setSaving(false); + spawn(message.success("Model settings have been saved.")); + onClose(); + }} + disabled={saving} + > + + A url for previewing entries from this model. The url can + reference model fields within [brackets], and they + will be substituted with the values from the entry you are + looking at. For example,{" "} + https://preview.mysite.com/blogs/[slug] will have{" "} + [slug] filled in with the "slug" field on the model + entry. + + } + rules={[ + { type: "url" }, + { + validator: (_, value, callback) => { + const pathParams = extractParamsFromPagePath(value); + const invalidParams = pathParams.filter( + (p) => !table.schema.fields.find((f) => f.identifier === p) + ); + if (invalidParams.length > 0) { + callback( + `URL references fields that don't exist on this model: ${invalidParams.join( + ", " + )}` + ); + } else { + callback(); + } + }, + }, + ]} + > + + + + + {(fields, handles) => ( +
+ {fields.map((field) => ( + handles.remove(field.name)} + /> + ))} + +
+ )} + + + + + + +
+ )} + + ); +} + +function normalizeTableSettings(settings: CmsTableSettings) { + if (settings.previewUrl && settings.previewUrl.trim() === "") { + settings.previewUrl = undefined; + } + if (settings.webhooks) { + for (const hook of [...settings.webhooks]) { + if (!hook.method || !hook.url) { + remove(settings.webhooks, hook); + } + if (hook.headers) { + for (const header of [...hook.headers]) { + if (!header.key || !header.value) { + remove(hook.headers, header); + } + } + } + } + } + return settings; +} + +function WebhookForm(props: { + fieldPath: (string | number)[]; + onDelete: () => void; +}) { + const { fieldPath, onDelete } = props; + return ( + <> + null }} + method={{ + wrap: (x) => ( + + {x} + + ), + props: { + children: httpMethods.map((m) => ( + + {m} + + )), + }, + }} + url={{ + wrap: (x) => ( + + {x} + + ), + }} + payload={{ + wrap: (x) => ( + + {x} + + ), + }} + menuButton={{ + menu: () => ( + + onDelete()}>Delete webhook + + ), + }} + expanded={true} + headers={ + + {(fields, handles) => ( +
+ {fields.map((field, index) => ( + ( + + {x} + + ), + }} + valueInput={{ + wrap: (x) => ( + + {x} + + ), + }} + addButton={{ + render: () => null, + }} + deleteButton={{ + onClick: () => handles.remove(index), + tooltip: "Delete header", + }} + /> + ))} + +
+ )} + + } + /> + + + ); +} + const CmsModelDetails = React.forwardRef(CmsModelDetails_); export default CmsModelDetails; diff --git a/platform/wab/src/wab/client/components/live/PreviewCtx.tsx b/platform/wab/src/wab/client/components/live/PreviewCtx.tsx index 24ae14de084..a4a41c5f222 100644 --- a/platform/wab/src/wab/client/components/live/PreviewCtx.tsx +++ b/platform/wab/src/wab/client/components/live/PreviewCtx.tsx @@ -13,6 +13,7 @@ import { import { getFrameHeight } from "@/wab/shared/Arenas"; import { toVarName } from "@/wab/shared/codegen/util"; import { FramePinManager } from "@/wab/shared/PinManager"; +import { substituteUrlParams } from "@/wab/shared/utils/url-utils"; import { getReferencedVariantGroups, isGlobalVariant, @@ -567,14 +568,7 @@ function mkPreviewPath( ) { let path = component.pageMeta?.path || component.uuid; if (component.pageMeta) { - for (const [key, value] of Object.entries( - pageParams || component.pageMeta.params - )) { - if (value) { - // if value is empty string, keep the placeholder so the path is still valid - path = path.replace(`[${key}]`, encodeURIComponent(value)); - } - } + path = substituteUrlParams(path, pageParams || component.pageMeta.params); } return path; } diff --git a/platform/wab/src/wab/client/components/webhooks/WebhooksItem.tsx b/platform/wab/src/wab/client/components/webhooks/WebhooksItem.tsx index 75ca20434b6..452fe9c9562 100644 --- a/platform/wab/src/wab/client/components/webhooks/WebhooksItem.tsx +++ b/platform/wab/src/wab/client/components/webhooks/WebhooksItem.tsx @@ -1,11 +1,11 @@ +import Select from "@/wab/client/components/widgets/Select"; +import TrashIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Trash"; +import PresetsIcon from "@/wab/client/plasmic/plasmic_kit_design_system/PlasmicIcon__Presets"; +import { ApiProjectWebhook } from "@/wab/shared/ApiSchema"; +import { httpMethods } from "@/wab/shared/HttpClientUtil"; import { Menu } from "antd"; import { observer } from "mobx-react-lite"; import * as React from "react"; -import { ApiProjectWebhook } from "../../../shared/ApiSchema"; -import { httpMethods } from "../../../shared/HttpClientUtil"; -import TrashIcon from "../../plasmic/plasmic_kit/PlasmicIcon__Trash"; -import PresetsIcon from "../../plasmic/plasmic_kit_design_system/PlasmicIcon__Presets"; -import Select from "../widgets/Select"; import { DefaultWebhooksItemProps, PlasmicWebhooksItem, @@ -28,33 +28,33 @@ const WebhooksItem = observer(function WebhooksItem(props: WebhooksItemProps) { const [expanded, setExpanded] = React.useState(false); React.useEffect(() => { - if (webhook.headers.length || webhook.payload) { + if (webhook.headers?.length || webhook.payload) { setExpanded(true); } }, []); const onAddHeader = () => { const w = { ...webhook }; - w.headers = [{ key: "", value: "" }, ...webhook.headers]; + w.headers = [{ key: "", value: "" }, ...(webhook.headers ?? [])]; setWebhook(w); }; const onChangeHeader = (i: number, key: string, value: string) => { const w = { ...webhook }; if (i === -1) { - w.headers = [{ key, value }, ...webhook.headers]; + w.headers = [{ key, value }, ...(webhook.headers ?? [])]; } else { - w.headers = [...webhook.headers]; + w.headers = [...(webhook.headers ?? [])]; w.headers[i] = { key, value }; } setWebhook(w); }; const onRemoveHeader = (i: number) => { const w = { ...webhook }; - w.headers = [...webhook.headers]; + w.headers = [...(webhook.headers ?? [])]; w.headers.splice(i, 1); setWebhook(w); }; - const headers = webhook.headers.map(({ key, value }, i) => ( + const headers = (webhook.headers ?? []).map(({ key, value }, i) => ( (tooltip ? {x} : x), }} diff --git a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsContentPage.tsx b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsContentPage.tsx index e58bd0de8ff..d913596a040 100644 --- a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsContentPage.tsx +++ b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsContentPage.tsx @@ -71,6 +71,8 @@ export interface DefaultCmsContentPageProps { className?: string; } +const $$ = {}; + function PlasmicCmsContentPage__RenderFunc(props: { variants: PlasmicCmsContentPage__VariantsArgs; args: PlasmicCmsContentPage__ArgsType; @@ -215,7 +217,7 @@ function makeNodeComponent(nodeName: NodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicCmsContentPage__ArgProps, internalVariantPropNames: PlasmicCmsContentPage__VariantProps, }), diff --git a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList.module.css b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList.module.css index 8f4a5ee3ae4..a33a498f3fe 100644 --- a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList.module.css +++ b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList.module.css @@ -45,22 +45,14 @@ display: flex; position: relative; object-fit: cover; - width: 1em; height: 1em; } .svg__yCx0 { display: flex; position: relative; object-fit: cover; - width: 1em; height: 1em; } - -.searchInput:global(.__wab_instance):global(.__wab_instance) { - max-width: 100%; - position: relative; -} - .freeBox__zdChF { display: flex; position: relative; @@ -102,4 +94,4 @@ } .textisEmpty { display: block; -} \ No newline at end of file +} diff --git a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList.tsx b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList.tsx index b29774fca11..2de4b6ba210 100644 --- a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList.tsx +++ b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntriesList.tsx @@ -44,8 +44,6 @@ import sty from "./PlasmicCmsEntriesList.module.css"; // plasmic-import: k2vc2st import PlussvgIcon from "../q_4_icons/icons/PlasmicIcon__Plussvg"; // plasmic-import: sQKgd2GNr/icon import ChevronDownsvgIcon from "../q_4_icons/icons/PlasmicIcon__ChevronDownsvg"; // plasmic-import: xZrB9_0ir/icon -import SearchBox from '../../components/widgets/Searchbox'; -import Searchbox from "../../components/widgets/Searchbox"; createPlasmicElementProxy; @@ -74,7 +72,6 @@ export type PlasmicCmsEntriesList__OverridesType = { root?: p.Flex<"div">; addButton?: p.Flex; text?: p.Flex<"div">; - searchInput?:p.Flex }; export interface DefaultCmsEntriesListProps { @@ -84,6 +81,8 @@ export interface DefaultCmsEntriesListProps { className?: string; } +const $$ = {}; + function PlasmicCmsEntriesList__RenderFunc(props: { variants: PlasmicCmsEntriesList__VariantsArgs; args: PlasmicCmsEntriesList__ArgsType; @@ -158,14 +157,6 @@ function PlasmicCmsEntriesList__RenderFunc(props: { withBackgroundHover={true} /> -
- -
{(hasVariant($state, "isEmpty", "isEmpty") ? false : true) ? ( = @@ -226,7 +216,6 @@ type NodeDefaultElementType = { root: "div"; addButton: typeof IconButton; text: "div"; - searchInput: typeof Searchbox; }; type ReservedPropsType = "variants" | "args" | "overrides"; @@ -263,7 +252,7 @@ function makeNodeComponent(nodeName: NodeName) { () => deriveRenderOpts(props, { name: nodeName, - descendantNames: [...PlasmicDescendants[nodeName]], + descendantNames: PlasmicDescendants[nodeName], internalArgPropNames: PlasmicCmsEntriesList__ArgProps, internalVariantPropNames: PlasmicCmsEntriesList__VariantProps, }), @@ -291,7 +280,6 @@ export const PlasmicCmsEntriesList = Object.assign( // Helper components rendering sub-elements addButton: makeNodeComponent("addButton"), text: makeNodeComponent("text"), - searchInput: makeNodeComponent("searchInput"), // Metadata about props expected for PlasmicCmsEntriesList internalVariantProps: PlasmicCmsEntriesList__VariantProps, diff --git a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails.module.css b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails.module.css index f55e70cbe21..d7aa7e72db0 100644 --- a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails.module.css +++ b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails.module.css @@ -39,7 +39,6 @@ left: auto; top: auto; color: var(--token-UunsGa2Y3t3); - width: 1em; height: 1em; } .saveStatus { @@ -68,21 +67,40 @@ max-width: 100%; position: relative; } -.svg { +.svg__xNuI { display: flex; position: relative; object-fit: cover; width: 16px; height: 16px; } -.text { +.text__hLvhX { color: var(--token-fVn5vRhXJxQ); } .svg__gKon5 { display: flex; position: relative; object-fit: cover; - width: 1em; + height: 1em; +} +.previewButton:global(.__wab_instance) { + max-width: 100%; + position: relative; +} +.svg__r3VpA { + display: flex; + position: relative; + object-fit: cover; + width: 16px; + height: 16px; +} +.text___8Mqz6 { + color: var(--token-fVn5vRhXJxQ); +} +.svg__zW5U { + display: flex; + position: relative; + object-fit: cover; height: 1em; } .publishButton:global(.__wab_instance) { @@ -93,14 +111,12 @@ display: flex; position: relative; object-fit: cover; - width: 1em; height: 1em; } .svg___4Eybx { display: flex; position: relative; object-fit: cover; - width: 1em; height: 1em; } .menuButton:global(.__wab_instance):global(.__wab_instance) { diff --git a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails.tsx b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails.tsx index ff8f1f8b7bc..2f67f323a75 100644 --- a/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails.tsx +++ b/platform/wab/src/wab/client/plasmic/plasmic_kit_cms/PlasmicCmsEntryDetails.tsx @@ -46,6 +46,7 @@ import sty from "./PlasmicCmsEntryDetails.module.css"; // plasmic-import: 9vM3ZF import EditsvgIcon from "../q_4_icons/icons/PlasmicIcon__Editsvg"; // plasmic-import: _Qa2gdunG/icon import HistoryIcon from "../plasmic_kit/PlasmicIcon__History"; // plasmic-import: 6ZOswzsUR/icon import ChevronDownsvgIcon from "../q_4_icons/icons/PlasmicIcon__ChevronDownsvg"; // plasmic-import: xZrB9_0ir/icon +import SharesvgIcon from "../q_4_icons/icons/PlasmicIcon__Sharesvg"; // plasmic-import: vRB2dtcKk/icon import ArrowRightsvgIcon from "../q_4_icons/icons/PlasmicIcon__ArrowRightsvg"; // plasmic-import: 9Jv8jb253/icon createPlasmicElementProxy; @@ -72,8 +73,7 @@ export type PlasmicCmsEntryDetails__OverridesType = { saveStatus?: p.Flex<"div">; right?: p.Flex<"div">; historyButton?: p.Flex; - svg?: p.Flex<"svg">; - text?: p.Flex<"div">; + previewButton?: p.Flex; publishButton?: p.Flex; menuButton?: p.Flex; }; @@ -83,6 +83,8 @@ export interface DefaultCmsEntryDetailsProps { className?: string; } +const $$ = {}; + function PlasmicCmsEntryDetails__RenderFunc(props: { variants: PlasmicCmsEntryDetails__VariantsArgs; args: PlasmicCmsEntryDetails__ArgsType; @@ -171,9 +173,7 @@ function PlasmicCmsEntryDetails__RenderFunc(props: { size={"wide"} startIcon={ } @@ -181,17 +181,39 @@ function PlasmicCmsEntryDetails__RenderFunc(props: { withIcons={["startIcon"]} >
{"History"}
+