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

🐛 fix(ApiModal/index.tsx): fix indentation and spacing issues for better code readability

Browse source 
✨ feat(ApiModal/index.tsx): improve UI by adjusting the layout and styling of the modal components
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-03 16:21:20 -03:00
commit 8e6c537d76
1 changed files with 36 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -104,10 +104,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
useEffect(() => { useEffect(() => {
if (closeEdit !== "") { if (closeEdit !== "") {
tweak.current = getTweak; tweak.current = getTweak;
if (tweak.current.length > 0) { if(tweak.current.length > 0){
setActiveTab("3"); setActiveTab("3");
openAccordions(); openAccordions();
} else { }
else{
startTweaks(); startTweaks();
} }
} else { } else {
@ -249,31 +250,34 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
function openAccordions() { function openAccordions() {
let accordionsToOpen = []; let accordionsToOpen = [];
tweak.current.forEach((el) => { tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => { Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) { if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key); accordionsToOpen.push(key);
setOpenAccordion(accordionsToOpen); setOpenAccordion(accordionsToOpen);
} }
});
}); });
});
} }
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
<DialogContent className="h-[580px] sm:max-w-[700px] lg:max-w-[850px]"> <DialogContent className="lg:max-w-[850px] sm:max-w-[700px] h-[580px]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Code</span> <span className="pr-2">Code</span>
<Code2 strokeWidth={1.5} className="h-6 w-6 text-primary pl-1 " aria-hidden="true" /> <Code2
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle> </DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription> <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader> </DialogHeader>
<Tabs <Tabs
value={activeTab} value={activeTab}
className="h-full w-full overflow-hidden rounded-md border bg-muted text-center" className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
onValueChange={(value) => { onValueChange={(value) => {
setActiveTab(value); setActiveTab(value);
if (value === "3") { if (value === "3") {
@ -289,21 +293,23 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</TabsTrigger> </TabsTrigger>
))} ))}
</TabsList> </TabsList>
<div className="float-right"> {Number(activeTab) < 3 && (
<button <div className="float-right">
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-ring hover:text-foreground" <button
onClick={copyToClipboard} className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
> onClick={copyToClipboard}
{isCopied ? <Check size={18} /> : <Clipboard size={15} />} >
{isCopied ? "Copied!" : "Copy code"} {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
</button> {isCopied ? "Copied!" : "Copy code"}
</div> </button>
</div>
)}
</div> </div>
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsContent <TabsContent
value={index.toString()} value={index.toString()}
className="-mt-1 h-full w-full overflow-hidden px-4 pb-4" className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
key={index} // Remember to add a unique key prop key={index} // Remember to add a unique key prop
> >
{index < 3 ? ( {index < 3 ? (
@ -316,10 +322,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</SyntaxHighlighter> </SyntaxHighlighter>
) : index === 3 ? ( ) : index === 3 ? (
<> <>
<div className="mt-2 flex h-[400px] w-full"> <div className="flex w-full h-[400px] mt-2">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg border-[1px] border-gray-200 bg-muted", "w-full rounded-lg bg-muted border-[1px] border-gray-200",
1 == 1 1 == 1
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden"
@ -332,14 +338,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
trigger={t["data"]["id"]} trigger={t["data"]["id"]}
open={openAccordion} open={openAccordion}
> >
<div className="flex h-fit flex-col gap-5"> <div className="flex flex-col gap-5 h-fit">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="h-10 border-gray-200 text-xs font-medium text-gray-500"> <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
<TableRow className="dark:border-b-muted"> <TableRow className="dark:border-b-muted">
<TableHead className="h-7 text-center"> <TableHead className="h-7 text-center">
PARAM PARAM
</TableHead> </TableHead>
<TableHead className="h-7 p-0 text-center"> <TableHead className="p-0 h-7 text-center">
VALUE VALUE
</TableHead> </TableHead>
</TableRow> </TableRow>
@ -373,11 +379,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
key={i} key={i}
className="h-10 dark:border-b-muted" className="h-10 dark:border-b-muted"
> >
<TableCell className="p-0 text-center text-sm text-gray-900"> <TableCell className="p-0 text-center text-gray-900 text-sm">
{n} {n}
</TableCell> </TableCell>
<TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300"> <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
<div className="m-auto w-[250px]"> <div className="w-[250px] m-auto">
{t.data.node.template[n] {t.data.node.template[n]
.type === "str" && .type === "str" &&
!t.data.node.template[n] !t.data.node.template[n]