From c3a0cea170fe676067812268a14bd8c2efd18655 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 30 Jan 2025 16:35:25 -0300 Subject: [PATCH 01/11] feat: add ENABLE_WIDGET flag to conditionally render embed option in PublishDropdown --- .../core/flowToolbarComponent/components/deploy-dropdown.tsx | 5 +++-- src/frontend/src/customization/feature-flags.ts | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx index 668ae309796e..1771a6b67769 100644 --- a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx +++ b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx @@ -7,6 +7,7 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; +import { ENABLE_WIDGET } from "@/customization/feature-flags"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import useFlowStore from "@/stores/flowStore"; @@ -77,7 +78,7 @@ export default function PublishDropdown() { API access - + {ENABLE_WIDGET &&
Embed into site
- + }
Date: Thu, 30 Jan 2025 17:01:10 -0300 Subject: [PATCH 02/11] feat: add EmbedModal component for copying embed code --- .../src/modals/EmbedModal/embed-modal.tsx | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/frontend/src/modals/EmbedModal/embed-modal.tsx diff --git a/src/frontend/src/modals/EmbedModal/embed-modal.tsx b/src/frontend/src/modals/EmbedModal/embed-modal.tsx new file mode 100644 index 000000000000..14f81a3758a0 --- /dev/null +++ b/src/frontend/src/modals/EmbedModal/embed-modal.tsx @@ -0,0 +1,69 @@ +import { useState } from "react"; +import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; +import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; +import BaseModal from "../baseModal"; +import IconComponent from "../../components/common/genericIconComponent"; +import { Button } from "../../components/ui/button"; + +interface EmbedModalProps { + open: boolean; + setOpen: (open: boolean) => void; + embedCode: string; +} + +export default function EmbedModal({ open, setOpen, embedCode }: EmbedModalProps) { + const [isCopied, setIsCopied] = useState(false); + + const copyToClipboard = () => { + if (!navigator.clipboard || !navigator.clipboard.writeText) { + return; + } + + navigator.clipboard.writeText(embedCode).then(() => { + setIsCopied(true); + + setTimeout(() => { + setIsCopied(false); + }, 2000); + }); + }; + + return ( + + + Embed into site + + +
+
+ +
+ + {embedCode} + +
+ + + ); +} From 6f94895cd13140ea0b8fb249cff6172ea15828e7 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 30 Jan 2025 17:01:16 -0300 Subject: [PATCH 03/11] feat: integrate EmbedModal in PublishDropdown for embed code sharing --- .../components/deploy-dropdown.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx index 1771a6b67769..f025801b8635 100644 --- a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx +++ b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx @@ -8,12 +8,13 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { ENABLE_WIDGET } from "@/customization/feature-flags"; +import EmbedModal from "@/modals/EmbedModal/embed-modal"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import useFlowStore from "@/stores/flowStore"; - +import { useState } from "react"; export default function PublishDropdown() { const domain = window.location.origin; - const flowName = useFlowsManagerStore((state) => state.currentFlow?.name); + const [openEmbedModal, setOpenEmbedModal] = useState(false); const flowId = useFlowsManagerStore((state) => state.currentFlow?.id); const hasIO = useFlowStore((state) => state.hasIO); @@ -23,6 +24,7 @@ export default function PublishDropdown() { "opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100"; return ( + <> API access
- {ENABLE_WIDGET && + {ENABLE_WIDGET && setOpenEmbedModal(true)} className="deploy-dropdown-item group">
+ + ); } From 5267396d109b4e50c03454cc5a7216fc66683bf1 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 31 Jan 2025 14:32:17 -0300 Subject: [PATCH 04/11] feat: enhance EmbedModal integration in PublishDropdown with dynamic embed code generation --- .../flowToolbarComponent/components/deploy-dropdown.tsx | 6 +++++- src/frontend/src/modals/EmbedModal/embed-modal.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx index f025801b8635..389eba8c5197 100644 --- a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx +++ b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx @@ -8,15 +8,19 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { ENABLE_WIDGET } from "@/customization/feature-flags"; +import getWidgetCode from "@/modals/apiModal/utils/get-widget-code"; import EmbedModal from "@/modals/EmbedModal/embed-modal"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import useFlowStore from "@/stores/flowStore"; +import useAuthStore from "@/stores/authStore"; import { useState } from "react"; export default function PublishDropdown() { const domain = window.location.origin; const [openEmbedModal, setOpenEmbedModal] = useState(false); const flowId = useFlowsManagerStore((state) => state.currentFlow?.id); + const flowName = useFlowsManagerStore((state) => state.currentFlow?.name); const hasIO = useFlowStore((state) => state.hasIO); + const isAuth = useAuthStore((state) => !!state.autoLogin); // using js const instead of applies.css because of group tag const groupStyle = "text-muted-foreground group-hover:text-foreground"; @@ -105,7 +109,7 @@ export default function PublishDropdown() { - + ); } diff --git a/src/frontend/src/modals/EmbedModal/embed-modal.tsx b/src/frontend/src/modals/EmbedModal/embed-modal.tsx index 14f81a3758a0..6fb4f6ab395a 100644 --- a/src/frontend/src/modals/EmbedModal/embed-modal.tsx +++ b/src/frontend/src/modals/EmbedModal/embed-modal.tsx @@ -58,7 +58,7 @@ export default function EmbedModal({ open, setOpen, embedCode }: EmbedModalProps {embedCode} From 3fb077c5ffb5c2c783c8a741b5ae80ec6eab8d89 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 3 Feb 2025 20:27:43 -0300 Subject: [PATCH 05/11] feat: add optional copy property to GetCodeType for enhanced tweak management --- src/frontend/src/types/tweaks/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/types/tweaks/index.ts b/src/frontend/src/types/tweaks/index.ts index 3ac7d58f5e44..bd6c66ac9571 100644 --- a/src/frontend/src/types/tweaks/index.ts +++ b/src/frontend/src/types/tweaks/index.ts @@ -14,4 +14,5 @@ export type GetCodeType = { tweaksBuildedObject: {}; endpointName?: string | null; activeTweaks: boolean; + copy?: boolean; }; From 0deabe5eab744ae77c3f2a16292754622ed8901f Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 3 Feb 2025 20:27:47 -0300 Subject: [PATCH 06/11] feat: make description property optional in modalHeaderType for improved flexibility --- src/frontend/src/types/components/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 365b135b30fb..337cfa741a4e 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -574,7 +574,7 @@ export type iconsType = { export type modalHeaderType = { children: ReactNode; - description: string | JSX.Element | null; + description?: string | JSX.Element | null; }; export type codeAreaModalPropsType = { From 73029286efee2e036cc3cc006377ca0b916d4329 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 3 Feb 2025 20:27:55 -0300 Subject: [PATCH 07/11] feat: update background color in code styles for improved visibility --- src/frontend/src/style/classes.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css index 46f46be2eb3e..11180270400b 100644 --- a/src/frontend/src/style/classes.css +++ b/src/frontend/src/style/classes.css @@ -249,13 +249,13 @@ pre code { display: inline-block; width: 100%; /* Background color */ - background-color: hsl(var(--code-background)) !important; + background-color: hsl(var(--muted)) !important; color: hsl(var(--code-foreground)) !important; } pre { /* Background color */ - background-color: hsl(var(--code-background)) !important; + background-color: hsl(var(--muted)) !important; } .prose li::marker { From cf59cd426dc1cc84aeb6f089741351727c1547ce Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 3 Feb 2025 20:28:09 -0300 Subject: [PATCH 08/11] feat: add support for 'retangular' size in switchCaseModalSize helper --- .../src/modals/baseModal/helpers/switch-case-size.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts index 23196ce8f00c..824ca40afe13 100644 --- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts +++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts @@ -72,6 +72,11 @@ export const switchCaseModalSize = (size: string) => { height = "h-[95vh]"; break; + case "retangular": + minWidth = "!min-w-[900px]"; + height = "min-h-[232px]"; + break; + default: minWidth = "min-w-[80vw]"; height = "h-[90vh]"; From a15ad1cba9d88a8c6098664bb15ed9828e315681 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 3 Feb 2025 20:28:15 -0300 Subject: [PATCH 09/11] feat: make description property optional in Header component and add 'retangular' size option in BaseModalProps --- src/frontend/src/modals/baseModal/index.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index dfe86a68144f..34ca825a2589 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -73,16 +73,18 @@ const Trigger: React.FC = ({ const Header: React.FC<{ children: ReactNode; - description: string | JSX.Element | null; + description?: string | JSX.Element | null; }> = ({ children, description }: modalHeaderType): JSX.Element => { return ( {children} - - {description} - + {description && ( + + {description} + + )} ); }; @@ -159,6 +161,7 @@ interface BaseModalProps { setOpen?: (open: boolean) => void; size?: | "x-small" + | "retangular" | "smaller" | "small" | "medium" From d500beb451cbc726aaab7df151395a57fc9d5af2 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 3 Feb 2025 20:28:30 -0300 Subject: [PATCH 10/11] feat: add optional copy parameter to getWidgetCode for customizable script output --- .../modals/apiModal/utils/get-widget-code.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx b/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx index 674c139d30da..1a81afe6c3d7 100644 --- a/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx +++ b/src/frontend/src/modals/apiModal/utils/get-widget-code.tsx @@ -9,9 +9,20 @@ export default function getWidgetCode({ flowId, flowName, isAuth, + copy = false, }: GetCodeType): string { - return ` + const source = copy? ``: +`` + + + + return `${source} `; -} + }> +`; +} \ No newline at end of file From 1fe78b63b9670cb85d967625824b32dfead5e640 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 3 Feb 2025 20:28:43 -0300 Subject: [PATCH 11/11] feat: refactor EmbedModal props for improved clarity and consistency --- .../components/deploy-dropdown.tsx | 2 +- .../src/modals/EmbedModal/embed-modal.tsx | 47 ++++++++++++------- 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx index 48ce86b94fa5..90f6e33d0106 100644 --- a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx +++ b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx @@ -124,7 +124,7 @@ export default function PublishDropdown() { - + ); } diff --git a/src/frontend/src/modals/EmbedModal/embed-modal.tsx b/src/frontend/src/modals/EmbedModal/embed-modal.tsx index 6fb4f6ab395a..c8a6594a34ee 100644 --- a/src/frontend/src/modals/EmbedModal/embed-modal.tsx +++ b/src/frontend/src/modals/EmbedModal/embed-modal.tsx @@ -1,25 +1,34 @@ import { useState } from "react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; -import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; +import { oneDark,oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism"; import BaseModal from "../baseModal"; import IconComponent from "../../components/common/genericIconComponent"; import { Button } from "../../components/ui/button"; +import getWidgetCode from "../apiModal/utils/get-widget-code"; +import { useDarkStore } from "@/stores/darkStore"; interface EmbedModalProps { open: boolean; setOpen: (open: boolean) => void; - embedCode: string; + flowId: string; + flowName: string; + isAuth: boolean; + tweaksBuildedObject: {}; + activeTweaks: boolean; } -export default function EmbedModal({ open, setOpen, embedCode }: EmbedModalProps) { +export default function EmbedModal({ open, setOpen, flowId, flowName, isAuth, tweaksBuildedObject, activeTweaks }: EmbedModalProps) { + const isDark = useDarkStore((state) => state.dark); const [isCopied, setIsCopied] = useState(false); - + const widgetProps = { flowId: flowId, flowName: flowName, isAuth: isAuth, tweaksBuildedObject: tweaksBuildedObject, activeTweaks: activeTweaks } + const embedCode = getWidgetCode({...widgetProps, copy: false }) + const copyCode = getWidgetCode({...widgetProps, copy: true }); const copyToClipboard = () => { if (!navigator.clipboard || !navigator.clipboard.writeText) { return; } - navigator.clipboard.writeText(embedCode).then(() => { + navigator.clipboard.writeText(copyCode).then(() => { setIsCopied(true); setTimeout(() => { @@ -29,36 +38,40 @@ export default function EmbedModal({ open, setOpen, embedCode }: EmbedModalProps }; return ( - - - Embed into site + + +
+ + Embed into site +
- -
-
- -
{embedCode}