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 { ConfirmationModalType } from "../../types/components";
import { ConfirmationModalType, ContentProps } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils";
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,
asChild,
titleHeader,
modalContent,
modalContentTitle,
cancelText,
confirmationText,
@ -26,10 +40,16 @@ export default function ConfirmationModal({
useEffect(() => {
if (onClose) onClose!(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 (
<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}>
<span className="pr-2">{title}</span>
<Icon
@ -45,7 +65,7 @@ export default function ConfirmationModal({
<br></br>
</>
)}
<span>{modalContent}</span>
{ContentChild}
</BaseModal.Content>
<BaseModal.Footer>
@ -71,3 +91,7 @@ export default function ConfirmationModal({
</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"
titleHeader={`${user.username}`}
modalContentTitle="Attention!"
modalContent="Are you completely confident about the changes you are making to this user?"
cancelText="Cancel"
confirmationText="Confirm"
icon={"UserCog2"}
@ -325,12 +324,20 @@ export default function AdminPage() {
);
}}
>
<div className="flex w-fit">
<Checkbox
id="is_active"
checked={user.is_active}
/>
</div>
<ConfirmationModal.Content>
<span>
Are you completely confident about the changes
you are making to this user?
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<div className="flex w-fit">
<Checkbox
id="is_active"
checked={user.is_active}
/>
</div>
</ConfirmationModal.Trigger>
</ConfirmationModal>
</TableCell>
<TableCell className="relative left-1 truncate py-2 text-align-last-left">
@ -339,7 +346,6 @@ export default function AdminPage() {
title="Edit"
titleHeader={`${user.username}`}
modalContentTitle="Attention!"
modalContent="Are you completely confident about the changes you are making to this user?"
cancelText="Cancel"
confirmationText="Confirm"
icon={"UserCog2"}
@ -353,12 +359,20 @@ export default function AdminPage() {
);
}}
>
<div className="flex w-fit">
<Checkbox
id="is_superuser"
checked={user.is_superuser}
/>
</div>
<ConfirmationModal.Content>
<span>
Are you completely confident about the changes
you are making to this user?
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<div className="flex w-fit">
<Checkbox
id="is_superuser"
checked={user.is_superuser}
/>
</div>
</ConfirmationModal.Trigger>
</ConfirmationModal>
</TableCell>
<TableCell className="truncate py-2 ">
@ -401,7 +415,6 @@ export default function AdminPage() {
title="Delete"
titleHeader="Delete User"
modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this user? This action cannot be undone."
cancelText="Cancel"
confirmationText="Delete"
icon={"UserMinus2"}
@ -411,12 +424,20 @@ export default function AdminPage() {
handleDeleteUser(user);
}}
>
<ShadTooltip content="Delete" side="top">
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
<ConfirmationModal.Content>
<span>
Are you sure you want to delete this user?
This action cannot be undone.
</span>
</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>
</div>
</TableCell>

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

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

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

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

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

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

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

@ -246,8 +246,15 @@ export type LoadingComponentProps = {
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 TriggerProps = {
children: ReactNode;
};
export interface languageMap {
[key: string]: string | undefined;
@ -278,11 +285,13 @@ export type ConfirmationModalType = {
title: string;
titleHeader: string;
asChild?: boolean;
modalContent: string;
modalContentTitle: string;
cancelText: string;
confirmationText: string;
children: ReactElement;
children: [
React.ReactElement<ContentProps>,
React.ReactElement<TriggerProps>
];
icon: string;
data?: any;
index: number;