From f292c3dfe8e796f16f7304418d9cd2f3fba4d84a Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Tue, 25 Mar 2025 14:44:46 +0530 Subject: [PATCH 1/3] updates Cypress tests to target the correct content selector in CustomWidgetDefaultComponent_spec.ts --- .../Widgets/Custom/CustomWidgetDefaultComponent_spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Custom/CustomWidgetDefaultComponent_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Custom/CustomWidgetDefaultComponent_spec.ts index 7716e7dbfa06..68ac8634db53 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Custom/CustomWidgetDefaultComponent_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Custom/CustomWidgetDefaultComponent_spec.ts @@ -37,7 +37,7 @@ describe( it("should check that custom widget default component loaded and working properly", () => { getIframeBody().find(".tip-container").should("exist"); getIframeBody() - .find(".tip-container p") + .find(".tip-container .content") .should( "have.text", "Pass data to this widget in the default model field", @@ -46,7 +46,7 @@ describe( getIframeBody().find("button.primary").trigger("click"); getIframeBody() - .find(".tip-container p") + .find(".tip-container .content") .should( "have.text", "Access data in the javascript file using the appsmith.model variable", @@ -62,7 +62,7 @@ describe( getIframeBody().find(".tip-container").should("exist"); getIframeBody() - .find(".tip-container p") + .find(".tip-container .content") .should( "have.text", "Pass data to this widget in the default model field", @@ -71,7 +71,7 @@ describe( getIframeBody().find("button.primary").trigger("click"); getIframeBody() - .find(".tip-container p") + .find(".tip-container .content") .should( "have.text", "Access data in the javascript file using the appsmith.model variable", From f2eb1f5b8c5390ec22e1f1d64aee1543ac618726 Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Tue, 25 Mar 2025 15:38:04 +0530 Subject: [PATCH 2/3] updates customWidget.json to enhance widget structure and styling --- app/client/cypress/fixtures/customWidget.json | 251 +++++++++--------- 1 file changed, 119 insertions(+), 132 deletions(-) diff --git a/app/client/cypress/fixtures/customWidget.json b/app/client/cypress/fixtures/customWidget.json index 92e408fd4250..d44b2b62fc6d 100644 --- a/app/client/cypress/fixtures/customWidget.json +++ b/app/client/cypress/fixtures/customWidget.json @@ -1,5 +1,5 @@ { - "dsl": { + "dsl": { "widgetName": "MainContainer", "backgroundColor": "none", "rightColumn": 4896, @@ -20,137 +20,124 @@ "dynamicBindingPathList": [], "leftColumn": 0, "children": [ - { - "mobileBottomRow": 33, - "widgetName": "Custom1", - "srcDoc": { - "html": "\n
\n", - "css": ".app {\n\theight: calc(var(--appsmith-ui-height) * 1px);\n\twidth: calc(var(--appsmith-ui-width) * 1px);\n\tjustify-content: center;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tbox-shadow: var(--appsmith-theme-boxShadow);\n}\n\n.tip-container {\n margin-bottom: 20px;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n\tfont-size: 16px;\n\tfont-weight: 700;\n}\n\n.tip-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n\n.tip-header div {\n\tcolor: #999;\n}\n\n.button-container {\n\ttext-align: right;\t\n}\n\n.button-container button {\n margin: 0 10px;\n}\n\n.button-container button.primary {\n\tbackground: var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n\tcolor: var(--appsmith-theme-primaryColor) !important;\n\tborder-color: var(--appsmith-theme-primaryColor) !important;\n}", - "js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';\nimport { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm';\nimport Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n const [key, setKey] = React.useState(0);\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length;\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n React.useEffect(() => {\n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n return /*#__PURE__*/React.createElement(Card, {\n className: \"app\",\n key: key\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-container\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-header\"\n }, /*#__PURE__*/React.createElement(\"h2\", null, \"Custom Widget\"), /*#__PURE__*/React.createElement(\"div\", null, currentIndex + 1, \" / \", appsmith.model.tips.length, \" \")), /*#__PURE__*/React.createElement(Markdown, null, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement(\"div\", {\n className: \"button-container\"\n }, /*#__PURE__*/React.createElement(Button, {\n className: \"primary\",\n onClick: handleNext,\n type: \"primary\"\n }, \"Next Tip\"), /*#__PURE__*/React.createElement(Button, {\n className: \"reset\",\n onClick: handleReset\n }, \"Reset\")));\n}\nappsmith.onReady(() => {\n reactDom.render( /*#__PURE__*/React.createElement(App, null), document.getElementById(\"root\"));\n});" - }, - "isCanvas": false, - "displayName": "Custom", - "iconSVG": "/static/media/icon.867bcc8399fa3f897d425d72690b86e4.svg", - "searchTags": [ - "external" - ], - "topRow": 3, - "bottomRow": 33, - "parentRowSpace": 10, - "type": "CUSTOM_WIDGET", - "hideCard": false, - "mobileRightColumn": 41, - "parentColumnSpace": 19.296875, - "dynamicTriggerPathList": [ - { - "key": "onResetClick" - } - ], - "dynamicBindingPathList": [ - { - "key": "theme" - } - ], - "leftColumn": 21, - "defaultModel": "{\n \"tips\": [\n \"Pass data to this widget in the default model field\",\n \"Access data in the javascript file using the appsmith.model variable\",\n \"Create events in the widget and trigger them in the javascript file using appsmith.triggerEvent('eventName')\",\n \"Access data in CSS as var(--appsmith-model-{property-name})\"\n ]\n}", - "theme": "{{appsmith.theme}}", - "onResetClick": "{{showAlert('Successfully reset from ' + oldIndex, '');}}", - "events": [ - "onResetClick" - ], - "key": "nuzm5titx7", - "isDeprecated": false, - "rightColumn": 41, - "isSearchWildcard": true, - "widgetId": "giszumqrjp", - "isVisible": true, - "version": 1, - "uncompiledSrcDoc": { - "html": "\n
\n", - "css": ".app {\n\theight: calc(var(--appsmith-ui-height) * 1px);\n\twidth: calc(var(--appsmith-ui-width) * 1px);\n\tjustify-content: center;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tbox-shadow: var(--appsmith-theme-boxShadow);\n}\n\n.tip-container {\n margin-bottom: 20px;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n\tfont-size: 16px;\n\tfont-weight: 700;\n}\n\n.tip-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n\n.tip-header div {\n\tcolor: #999;\n}\n\n.button-container {\n\ttext-align: right;\t\n}\n\n.button-container button {\n margin: 0 10px;\n}\n\n.button-container button.primary {\n\tbackground: var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n\tcolor: var(--appsmith-theme-primaryColor) !important;\n\tborder-color: var(--appsmith-theme-primaryColor) !important;\n}", - "js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'\nimport { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'\nimport Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';\n\nfunction App() {\n\tconst [currentIndex, setCurrentIndex] = React.useState(0);\n\t\n\tconst [key, setKey] = React.useState(0);\n\n\tconst handleNext = () => {\n\t\tconst index = (currentIndex + 1) % appsmith.model.tips.length\n\t\tsetCurrentIndex(index);\n\t\tappsmith.updateModel({\n\t\t\tcurrentIndex: index\n\t\t});\n\t};\n\n\tconst handleReset = () => {\n\t\tsetCurrentIndex(0);\n\t\tappsmith.updateModel({\n\t\t\tcurrentIndex: 0\n\t\t});\n\t\tappsmith.triggerEvent(\"onResetClick\", {\n\t\t\toldIndex: currentIndex\n\t\t});\n\t};\n\t\n\tReact.useEffect(() => {\t\t\n\t\tappsmith.onModelChange((model, prevModel) => {\n\t\t\tif (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n\t\t\t\tsetKey(Math.random());\n\t\t\t}\n\t\t});\n\t}, []);\n\t\n\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Custom Widget

\n\t\t\t\t\t
{currentIndex + 1} / {appsmith.model.tips.length}\t\t
\n\t\t\t\t
\n\t\t\t\t{appsmith.model.tips[currentIndex]}\n\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\n);\n}\n\nappsmith.onReady(() => {\n\treactDom.render(, document.getElementById(\"root\"));\n});" - }, - "parentId": "0", - "tags": [ - "Display" - ], - "renderMode": "CANVAS", - "isLoading": false, - "mobileTopRow": 3, - "mobileLeftColumn": 21, - "dynamicPropertyPathList": [ - { - "key": "onResetClick" - } - ] + { + "mobileBottomRow": 33, + "widgetName": "Custom1", + "srcDoc": { + "html": "\n
\n", + "css": ".app {\n height: calc(var(--appsmith-ui-height) * 1px);\n width: calc(var(--appsmith-ui-width) * 1px);\n justify-content: center;\n border-radius: var(--appsmith-theme-borderRadius);\n box-shadow: var(--appsmith-theme-boxShadow);\n padding: 29px 25px;\n box-sizing: border-box;\n font-family: system-ui;\n background: #fff;\n}\n\n.tip-container {\n margin-bottom: 20px;\n font-size: 14px;\n line-height: 1.571429;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n font-size: 16px;\n font-weight: 700;\n}\n\n.tip-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 9px;\n}\n\n.tip-header div {\n color: #999;\n}\n\n.content {\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 14px;\n line-height: 1.571429;\n}\n\n.button-container {\n text-align: right;\n padding-top: 4px;\n}\n\n.button-container button {\n margin: 0 10px;\n cursor: pointer;\n border-radius: var(--appsmith-theme-borderRadius);\n padding: 6px 16px;\n background: none;\n height: auto;\n transition: all 0.3s ease;\n}\n\n.button-container button.primary {\n background: var(--appsmith-theme-primaryColor) !important;\n color: #fff;\n border: 1px solid var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n border: 1px solid #999;\n color: #999;\n outline: none;\n box-shadow: none;\n}\n\n.button-container button.reset:hover:not(:disabled) {\n color: var(--appsmith-theme-primaryColor);\n border-color: var(--appsmith-theme-primaryColor);\n}\n\n.button-container button.reset:disabled {\n cursor: default;\n}", + "js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n const [key, setKey] = React.useState(0);\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length;\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n React.useEffect(() => {\n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"app\",\n key: key\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-container\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-header\"\n }, /*#__PURE__*/React.createElement(\"h2\", null, \"Custom Widget\"), /*#__PURE__*/React.createElement(\"div\", null, currentIndex + 1, \" / \", appsmith.model.tips.length, \" \")), /*#__PURE__*/React.createElement(\"div\", null, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement(\"div\", {\n className: \"button-container\"\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"primary\",\n onClick: handleNext,\n type: \"primary\"\n }, \"Next Tip\"), /*#__PURE__*/React.createElement(\"button\", {\n className: \"reset\",\n onClick: handleReset\n }, \"Reset\")));\n}\nappsmith.onReady(() => {\n reactDom.render(/*#__PURE__*/React.createElement(App, null), document.getElementById(\"root\"));\n});" }, - { - "isVisible": true, - "type": "TEXT_WIDGET", - "text": "{{Custom1.model.currentIndex}}", - "fontSize": "1rem", - "fontStyle": "BOLD", - "textAlign": "LEFT", - "textColor": "#231F20", - "widgetName": "Text1", - "shouldTruncate": false, - "overflow": "NONE", - "version": 1, - "animateLoading": true, - "responsiveBehavior": "fill", - "minWidth": 450, - "minDynamicHeight": 4, - "maxDynamicHeight": 9000, - "dynamicHeight": "AUTO_HEIGHT", - "searchTags": [ - "typography", - "paragraph", - "label" - ], - "tags": [ - "Suggested", - "Content" - ], - "hideCard": false, - "isDeprecated": false, - "displayName": "Text", - "key": "my0l36gkcf", - "iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg", - "widgetId": "144bnot1xa", - "renderMode": "CANVAS", - "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}", - "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", - "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", - "isLoading": false, - "parentColumnSpace": 19.296875, - "parentRowSpace": 10, - "leftColumn": 23, - "rightColumn": 40, - "topRow": 36, - "bottomRow": 40, - "mobileLeftColumn": 23, - "mobileRightColumn": 39, - "mobileTopRow": 38, - "mobileBottomRow": 42, - "parentId": "0", - "dynamicBindingPathList": [ - { - "key": "truncateButtonColor" - }, - { - "key": "fontFamily" - }, - { - "key": "borderRadius" - }, - { - "key": "text" - } - ], - "dynamicTriggerPathList": [], - "originalTopRow": 38, - "originalBottomRow": 42 - } + "isCanvas": false, + "displayName": "Custom", + "iconSVG": "/static/media/icon.867bcc8399fa3f897d425d72690b86e4.svg", + "searchTags": ["external"], + "topRow": 3, + "bottomRow": 33, + "parentRowSpace": 10, + "type": "CUSTOM_WIDGET", + "hideCard": false, + "mobileRightColumn": 41, + "parentColumnSpace": 19.296875, + "dynamicTriggerPathList": [ + { + "key": "onResetClick" + } + ], + "dynamicBindingPathList": [ + { + "key": "theme" + } + ], + "leftColumn": 21, + "defaultModel": "{\n \"tips\": [\n \"Pass data to this widget in the default model field\",\n \"Access data in the javascript file using the appsmith.model variable\",\n \"Create events in the widget and trigger them in the javascript file using appsmith.triggerEvent('eventName')\",\n \"Access data in CSS as var(--appsmith-model-{property-name})\"\n ]\n}", + "theme": "{{appsmith.theme}}", + "onResetClick": "{{showAlert('Successfully reset from ' + oldIndex, '');}}", + "events": ["onResetClick"], + "key": "nuzm5titx7", + "isDeprecated": false, + "rightColumn": 41, + "isSearchWildcard": true, + "widgetId": "giszumqrjp", + "isVisible": true, + "version": 1, + "uncompiledSrcDoc": { + "html": "\n
\n", + "css": ".app {\n\theight: calc(var(--appsmith-ui-height) * 1px);\n\twidth: calc(var(--appsmith-ui-width) * 1px);\n\tjustify-content: center;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tbox-shadow: var(--appsmith-theme-boxShadow);\n\tpadding: 29px 25px;\n\tbox-sizing: border-box;\n\tfont-family: system-ui;\n\tbackground: #fff;\n}\n\n.tip-container {\n\tmargin-bottom: 20px;\n\tfont-size: 14px;\n\tline-height: 1.571429;\n}\n\n.tip-container h2 {\n\tmargin-bottom: 20px;\n\tfont-size: 16px;\n\tfont-weight: 700;\n}\n\n.tip-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n\tmargin-bottom: 9px;\n}\n\n.tip-header div {\n\tcolor: #999;\n}\n\n.content {\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n\tfont-size: 14px;\n\tline-height: 1.571429;\n}\n\n.button-container {\n\ttext-align: right;\n\tpadding-top: 4px;\n}\n\n.button-container button {\n\tmargin: 0 10px;\n\tcursor: pointer;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tpadding: 6px 16px;\n\tbackground: none;\n\theight: auto;\n\ttransition: all 0.3s ease;\n}\n\n.button-container button.primary {\n\tbackground: var(--appsmith-theme-primaryColor) !important;\n\tcolor: #fff;\n\tborder: 1px solid var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n\tborder: 1px solid #999;\n\tcolor: #999;\n\toutline: none;\n\tbox-shadow: none;\n}\n\n.button-container button.reset:hover:not(:disabled) {\n\tcolor: var(--appsmith-theme-primaryColor);\n\tborder-color: var(--appsmith-theme-primaryColor);\n}\n\n.button-container button.reset:disabled {\n\tcursor: default;\n}", + "js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n \n const [key, setKey] = React.useState(0);\n\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n \n React.useEffect(() => { \n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n \n\n return (\n
\n
\n
\n

Custom Widget

\n
{currentIndex + 1} / {appsmith.model.tips.length}
\n
\n
{appsmith.model.tips[currentIndex]}
\n
\n
\n \n \n
\n
\n);\n}\n\nappsmith.onReady(() => {\n reactDom.render(, document.getElementById(\"root\"));\n});" + }, + "parentId": "0", + "tags": ["Display"], + "renderMode": "CANVAS", + "isLoading": false, + "mobileTopRow": 3, + "mobileLeftColumn": 21, + "dynamicPropertyPathList": [ + { + "key": "onResetClick" + } + ] + }, + { + "isVisible": true, + "type": "TEXT_WIDGET", + "text": "{{Custom1.model.currentIndex}}", + "fontSize": "1rem", + "fontStyle": "BOLD", + "textAlign": "LEFT", + "textColor": "#231F20", + "widgetName": "Text1", + "shouldTruncate": false, + "overflow": "NONE", + "version": 1, + "animateLoading": true, + "responsiveBehavior": "fill", + "minWidth": 450, + "minDynamicHeight": 4, + "maxDynamicHeight": 9000, + "dynamicHeight": "AUTO_HEIGHT", + "searchTags": ["typography", "paragraph", "label"], + "tags": ["Suggested", "Content"], + "hideCard": false, + "isDeprecated": false, + "displayName": "Text", + "key": "my0l36gkcf", + "iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg", + "widgetId": "144bnot1xa", + "renderMode": "CANVAS", + "truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}", + "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "isLoading": false, + "parentColumnSpace": 19.296875, + "parentRowSpace": 10, + "leftColumn": 23, + "rightColumn": 40, + "topRow": 36, + "bottomRow": 40, + "mobileLeftColumn": 23, + "mobileRightColumn": 39, + "mobileTopRow": 38, + "mobileBottomRow": 42, + "parentId": "0", + "dynamicBindingPathList": [ + { + "key": "truncateButtonColor" + }, + { + "key": "fontFamily" + }, + { + "key": "borderRadius" + }, + { + "key": "text" + } + ], + "dynamicTriggerPathList": [], + "originalTopRow": 38, + "originalBottomRow": 42 + } ] + } } -} \ No newline at end of file From c043c29f610f3f8f5520759ef71a49f772cfdc68 Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Fri, 28 Mar 2025 13:54:55 +0530 Subject: [PATCH 3/3] updates customWidget.json and related templates to use esm imports for React and ReactDOM --- app/client/cypress/fixtures/customWidget.json | 4 ++-- .../CodeTemplates/Templates/anvilTemplates/react.ts | 6 +++--- .../Editor/Header/CodeTemplates/Templates/react.ts | 6 +++--- .../src/widgets/CustomWidget/widget/defaultApp.ts | 12 ++++++------ 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/app/client/cypress/fixtures/customWidget.json b/app/client/cypress/fixtures/customWidget.json index d44b2b62fc6d..1d2331f871fe 100644 --- a/app/client/cypress/fixtures/customWidget.json +++ b/app/client/cypress/fixtures/customWidget.json @@ -26,7 +26,7 @@ "srcDoc": { "html": "\n
\n", "css": ".app {\n height: calc(var(--appsmith-ui-height) * 1px);\n width: calc(var(--appsmith-ui-width) * 1px);\n justify-content: center;\n border-radius: var(--appsmith-theme-borderRadius);\n box-shadow: var(--appsmith-theme-boxShadow);\n padding: 29px 25px;\n box-sizing: border-box;\n font-family: system-ui;\n background: #fff;\n}\n\n.tip-container {\n margin-bottom: 20px;\n font-size: 14px;\n line-height: 1.571429;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n font-size: 16px;\n font-weight: 700;\n}\n\n.tip-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 9px;\n}\n\n.tip-header div {\n color: #999;\n}\n\n.content {\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 14px;\n line-height: 1.571429;\n}\n\n.button-container {\n text-align: right;\n padding-top: 4px;\n}\n\n.button-container button {\n margin: 0 10px;\n cursor: pointer;\n border-radius: var(--appsmith-theme-borderRadius);\n padding: 6px 16px;\n background: none;\n height: auto;\n transition: all 0.3s ease;\n}\n\n.button-container button.primary {\n background: var(--appsmith-theme-primaryColor) !important;\n color: #fff;\n border: 1px solid var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n border: 1px solid #999;\n color: #999;\n outline: none;\n box-shadow: none;\n}\n\n.button-container button.reset:hover:not(:disabled) {\n color: var(--appsmith-theme-primaryColor);\n border-color: var(--appsmith-theme-primaryColor);\n}\n\n.button-container button.reset:disabled {\n cursor: default;\n}", - "js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n const [key, setKey] = React.useState(0);\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length;\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n React.useEffect(() => {\n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"app\",\n key: key\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-container\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-header\"\n }, /*#__PURE__*/React.createElement(\"h2\", null, \"Custom Widget\"), /*#__PURE__*/React.createElement(\"div\", null, currentIndex + 1, \" / \", appsmith.model.tips.length, \" \")), /*#__PURE__*/React.createElement(\"div\", null, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement(\"div\", {\n className: \"button-container\"\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"primary\",\n onClick: handleNext,\n type: \"primary\"\n }, \"Next Tip\"), /*#__PURE__*/React.createElement(\"button\", {\n className: \"reset\",\n onClick: handleReset\n }, \"Reset\")));\n}\nappsmith.onReady(() => {\n reactDom.render(/*#__PURE__*/React.createElement(App, null), document.getElementById(\"root\"));\n});" + "js": "import * as React from 'https://esm.sh/react@18';import * as reactDom from 'https://esm.sh/react-dom@18';\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n const [key, setKey] = React.useState(0);\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length;\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n React.useEffect(() => {\n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"app\",\n key: key\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-container\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-header\"\n }, /*#__PURE__*/React.createElement(\"h2\", null, \"Custom Widget\"), /*#__PURE__*/React.createElement(\"div\", null, currentIndex + 1, \" / \", appsmith.model.tips.length, \" \")), /*#__PURE__*/React.createElement(\"div\", null, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement(\"div\", {\n className: \"button-container\"\n }, /*#__PURE__*/React.createElement(\"button\", {\n className: \"primary\",\n onClick: handleNext,\n type: \"primary\"\n }, \"Next Tip\"), /*#__PURE__*/React.createElement(\"button\", {\n className: \"reset\",\n onClick: handleReset\n }, \"Reset\")));\n}\nappsmith.onReady(() => {\n reactDom.render(/*#__PURE__*/React.createElement(App, null), document.getElementById(\"root\"));\n});" }, "isCanvas": false, "displayName": "Custom", @@ -64,7 +64,7 @@ "uncompiledSrcDoc": { "html": "\n
\n", "css": ".app {\n\theight: calc(var(--appsmith-ui-height) * 1px);\n\twidth: calc(var(--appsmith-ui-width) * 1px);\n\tjustify-content: center;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tbox-shadow: var(--appsmith-theme-boxShadow);\n\tpadding: 29px 25px;\n\tbox-sizing: border-box;\n\tfont-family: system-ui;\n\tbackground: #fff;\n}\n\n.tip-container {\n\tmargin-bottom: 20px;\n\tfont-size: 14px;\n\tline-height: 1.571429;\n}\n\n.tip-container h2 {\n\tmargin-bottom: 20px;\n\tfont-size: 16px;\n\tfont-weight: 700;\n}\n\n.tip-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n\tmargin-bottom: 9px;\n}\n\n.tip-header div {\n\tcolor: #999;\n}\n\n.content {\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n\tfont-size: 14px;\n\tline-height: 1.571429;\n}\n\n.button-container {\n\ttext-align: right;\n\tpadding-top: 4px;\n}\n\n.button-container button {\n\tmargin: 0 10px;\n\tcursor: pointer;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tpadding: 6px 16px;\n\tbackground: none;\n\theight: auto;\n\ttransition: all 0.3s ease;\n}\n\n.button-container button.primary {\n\tbackground: var(--appsmith-theme-primaryColor) !important;\n\tcolor: #fff;\n\tborder: 1px solid var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n\tborder: 1px solid #999;\n\tcolor: #999;\n\toutline: none;\n\tbox-shadow: none;\n}\n\n.button-container button.reset:hover:not(:disabled) {\n\tcolor: var(--appsmith-theme-primaryColor);\n\tborder-color: var(--appsmith-theme-primaryColor);\n}\n\n.button-container button.reset:disabled {\n\tcursor: default;\n}", - "js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n \n const [key, setKey] = React.useState(0);\n\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n \n React.useEffect(() => { \n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n \n\n return (\n
\n
\n
\n

Custom Widget

\n
{currentIndex + 1} / {appsmith.model.tips.length}
\n
\n
{appsmith.model.tips[currentIndex]}
\n
\n
\n \n \n
\n
\n);\n}\n\nappsmith.onReady(() => {\n reactDom.render(, document.getElementById(\"root\"));\n});" + "js": "import * as React from 'https://esm.sh/react@18';import * as reactDom from 'https://esm.sh/react-dom@18';\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n \n const [key, setKey] = React.useState(0);\n\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n \n React.useEffect(() => { \n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n \n\n return (\n
\n
\n
\n

Custom Widget

\n
{currentIndex + 1} / {appsmith.model.tips.length}
\n
\n
{appsmith.model.tips[currentIndex]}
\n
\n
\n \n \n
\n
\n);\n}\n\nappsmith.onReady(() => {\n reactDom.render(, document.getElementById(\"root\"));\n});" }, "parentId": "0", "tags": ["Display"], diff --git a/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts b/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts index 7cb2e9daf649..866223c0a2fa 100644 --- a/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts +++ b/app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts @@ -88,8 +88,8 @@ export default { .button-container button.reset:disabled { cursor: default; }`, - js: `import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm' -import reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm' + js: `import React from "https://esm.sh/react@18.2.0"; +import ReactDOM from "https://esm.sh/react-dom@18.2.0"; const Button = ({ children, className, ...props }) => (