jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(ConfirmationModal): remove modalContent prop and replace it with Content and Trigger components to improve flexibility and reusability

Browse source 
feat(ConfirmationModal): add support for displaying tooltip content and positioning in the Trigger component
fix(AdminPage): remove duplicate modalContent prop in ConfirmationModal components
fix(ApiKeysPage): remove duplicate modalContent prop in ConfirmationModal components
fix(ExtraSidebar): remove duplicate modalContent prop in ConfirmationModal component
fix(NodeToolbarComponent): remove duplicate modalContent prop in ConfirmationModal component
fix(types/components): add TriggerProps type to define props for the Trigger component in ConfirmationModal
This commit is contained in:
anovazzi1 2023-10-26 23:24:10 -03:00
commit b73ca7c36a
6 changed files with 106 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/frontend/src/modals/ConfirmationModal/index.tsx
View file

@ -1,14 +1,28 @@
import { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import ShadTooltip from "../../components/ShadTooltipComponent";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { ConfirmationModalType } from "../../types/components"; import { ConfirmationModalType, ContentProps } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils"; import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
export default function ConfirmationModal({ const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="h-full w-full">{children}</div>;
};
const Trigger: React.FC<ContentProps> = ({
children,
tolltipContent,
side,
}) => {
return (
<ShadTooltip side={side} content={tolltipContent}>
<div className="h-full w-full">{children}</div>
</ShadTooltip>
);
};
function ConfirmationModal({
title, title,
asChild, asChild,
titleHeader, titleHeader,
modalContent,
modalContentTitle, modalContentTitle,
cancelText, cancelText,
confirmationText, confirmationText,
@ -26,10 +40,16 @@ export default function ConfirmationModal({
useEffect(() => { useEffect(() => {
if (onClose) onClose!(modalOpen); if (onClose) onClose!(modalOpen);
}, [modalOpen]); }, [modalOpen]);
const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger
);
const ContentChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Content
);
return ( return (
<BaseModal size="x-small" open={modalOpen} setOpen={setModalOpen}> <BaseModal size="x-small" open={modalOpen} setOpen={setModalOpen}>
<BaseModal.Trigger asChild={asChild}>{children}</BaseModal.Trigger> <BaseModal.Trigger asChild={asChild}>{triggerChild}</BaseModal.Trigger>
<BaseModal.Header description={titleHeader}> <BaseModal.Header description={titleHeader}>
<span className="pr-2">{title}</span> <span className="pr-2">{title}</span>
<Icon <Icon
@ -45,7 +65,7 @@ export default function ConfirmationModal({
<br></br> <br></br>
</> </>
)} )}
<span>{modalContent}</span> {ContentChild}
</BaseModal.Content> </BaseModal.Content>
<BaseModal.Footer> <BaseModal.Footer>
@ -71,3 +91,7 @@ export default function ConfirmationModal({
</BaseModal> </BaseModal>
); );
} }
ConfirmationModal.Content = Content;
ConfirmationModal.Trigger = Trigger;
export default ConfirmationModal;

63
src/frontend/src/pages/AdminPage/index.tsx
View file

@ -311,7 +311,6 @@ export default function AdminPage() {
title="Edit" title="Edit"
titleHeader={`${user.username}`} titleHeader={`${user.username}`}
modalContentTitle="Attention!" modalContentTitle="Attention!"
modalContent="Are you completely confident about the changes you are making to this user?"
cancelText="Cancel" cancelText="Cancel"
confirmationText="Confirm" confirmationText="Confirm"
icon={"UserCog2"} icon={"UserCog2"}
@ -325,12 +324,20 @@ export default function AdminPage() {
); );
}} }}
> >
<div className="flex w-fit"> <ConfirmationModal.Content>
<Checkbox <span>
id="is_active" Are you completely confident about the changes
checked={user.is_active} you are making to this user?
/> </span>
</div> </ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<div className="flex w-fit">
<Checkbox
id="is_active"
checked={user.is_active}
/>
</div>
</ConfirmationModal.Trigger>
</ConfirmationModal> </ConfirmationModal>
</TableCell> </TableCell>
<TableCell className="relative left-1 truncate py-2 text-align-last-left"> <TableCell className="relative left-1 truncate py-2 text-align-last-left">
@ -339,7 +346,6 @@ export default function AdminPage() {
title="Edit" title="Edit"
titleHeader={`${user.username}`} titleHeader={`${user.username}`}
modalContentTitle="Attention!" modalContentTitle="Attention!"
modalContent="Are you completely confident about the changes you are making to this user?"
cancelText="Cancel" cancelText="Cancel"
confirmationText="Confirm" confirmationText="Confirm"
icon={"UserCog2"} icon={"UserCog2"}
@ -353,12 +359,20 @@ export default function AdminPage() {
); );
}} }}
> >
<div className="flex w-fit"> <ConfirmationModal.Content>
<Checkbox <span>
id="is_superuser" Are you completely confident about the changes
checked={user.is_superuser} you are making to this user?
/> </span>
</div> </ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<div className="flex w-fit">
<Checkbox
id="is_superuser"
checked={user.is_superuser}
/>
</div>
</ConfirmationModal.Trigger>
</ConfirmationModal> </ConfirmationModal>
</TableCell> </TableCell>
<TableCell className="truncate py-2 "> <TableCell className="truncate py-2 ">
@ -401,7 +415,6 @@ export default function AdminPage() {
title="Delete" title="Delete"
titleHeader="Delete User" titleHeader="Delete User"
modalContentTitle="Attention!" modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this user? This action cannot be undone."
cancelText="Cancel" cancelText="Cancel"
confirmationText="Delete" confirmationText="Delete"
icon={"UserMinus2"} icon={"UserMinus2"}
@ -411,12 +424,20 @@ export default function AdminPage() {
handleDeleteUser(user); handleDeleteUser(user);
}} }}
> >
<ShadTooltip content="Delete" side="top"> <ConfirmationModal.Content>
<IconComponent <span>
name="Trash2" Are you sure you want to delete this user?
className="ml-2 h-4 w-4 cursor-pointer" This action cannot be undone.
/> </span>
</ShadTooltip> </ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<ShadTooltip content="Delete" side="top">
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</ConfirmationModal.Trigger>
</ConfirmationModal> </ConfirmationModal>
</div> </div>
</TableCell> </TableCell>

15
src/frontend/src/pages/ApiKeysPage/index.tsx
View file

@ -224,7 +224,6 @@ export default function ApiKeysPage() {
title="Delete" title="Delete"
titleHeader="Delete User" titleHeader="Delete User"
modalContentTitle="Attention!" modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this key? This action cannot be undone."
cancelText="Cancel" cancelText="Cancel"
confirmationText="Delete" confirmationText="Delete"
icon={"UserMinus2"} icon={"UserMinus2"}
@ -234,15 +233,19 @@ export default function ApiKeysPage() {
handleDeleteKey(keys); handleDeleteKey(keys);
}} }}
> >
<ShadTooltip <ConfirmationModal.Content>
content="Delete" <span>
side="top" Are you sure you want to delete
> this key? This action cannot be
undone.
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<IconComponent <IconComponent
name="Trash2" name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer" className="ml-2 h-4 w-4 cursor-pointer"
/> />
</ShadTooltip> </ConfirmationModal.Trigger>
</ConfirmationModal> </ConfirmationModal>
</div> </div>
</TableCell> </TableCell>

8
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -173,7 +173,6 @@ export default function ExtraSidebar(): JSX.Element {
<ConfirmationModal <ConfirmationModal
index={0} index={0}
modalContentTitle="Are you sure you want to share this flow?" modalContentTitle="Are you sure you want to share this flow?"
modalContent="This flow will be available for everyone to use."
title="Share Flow" title="Share Flow"
confirmationText="Share" confirmationText="Share"
icon="Share2" icon="Share2"
@ -183,11 +182,14 @@ export default function ExtraSidebar(): JSX.Element {
titleHeader="" titleHeader=""
cancelText="Cancel" cancelText="Cancel"
> >
<ShadTooltip content="Share" side="top"> <ConfirmationModal.Content>
<span>This flow will be available for everyone to use.</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger tolltipContent="Share" side="top">
<div className={classNames("extra-side-bar-buttons")}> <div className={classNames("extra-side-bar-buttons")}>
<IconComponent name="Share2" className="side-bar-button-size" /> <IconComponent name="Share2" className="side-bar-button-size" />
</div> </div>
</ShadTooltip> </ConfirmationModal.Trigger>
</ConfirmationModal> </ConfirmationModal>
), ),
[] []

10
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -280,7 +280,6 @@ export default function NodeToolbarComponent({
key={data.id} key={data.id}
index={0} index={0}
modalContentTitle="Are you sure you want to share this component?" modalContentTitle="Are you sure you want to share this component?"
modalContent="This component will be available for everyone to use."
title="Share Component" title="Share Component"
confirmationText="Share" confirmationText="Share"
icon="Share2" icon="Share2"
@ -294,7 +293,14 @@ export default function NodeToolbarComponent({
setShowconfirmShare(modal); setShowconfirmShare(modal);
}} }}
> >
<div></div> <ConfirmationModal.Content>
<span>
This component will be available for everyone to use.
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<div></div>
</ConfirmationModal.Trigger>
</ConfirmationModal> </ConfirmationModal>
)} )}
</span> </span>

15
src/frontend/src/types/components/index.ts
View file

@ -246,8 +246,15 @@ export type LoadingComponentProps = {
remSize: number; remSize: number;
}; };
export type ContentProps = { children: ReactNode }; export type ContentProps = {
children: ReactNode;
tolltipContent?: ReactNode;
side?: "top" | "right" | "bottom" | "left";
};
export type HeaderProps = { children: ReactNode; description: string }; export type HeaderProps = { children: ReactNode; description: string };
export type TriggerProps = {
children: ReactNode;
};
export interface languageMap { export interface languageMap {
[key: string]: string | undefined; [key: string]: string | undefined;
@ -278,11 +285,13 @@ export type ConfirmationModalType = {
title: string; title: string;
titleHeader: string; titleHeader: string;
asChild?: boolean; asChild?: boolean;
modalContent: string;
modalContentTitle: string; modalContentTitle: string;
cancelText: string; cancelText: string;
confirmationText: string; confirmationText: string;
children: ReactElement; children: [
React.ReactElement<ContentProps>,
React.ReactElement<TriggerProps>
];
icon: string; icon: string;
data?: any; data?: any;
index: number; index: number;