refactor: improve conditional rendering on panel buttons (#5365)
add render condition on modal buttons
This commit is contained in:
Cristhian Zanforlin Lousa
committed by
GitHub
GitHub
parent
81da524375
commit
435d86067c
@@ -259,249 +259,253 @@ export default function IOModal({
|
||||
<BaseModal.Trigger>{children}</BaseModal.Trigger>
|
||||
{/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
|
||||
<BaseModal.Content overflowHidden className="h-full">
|
||||
<div className="flex-max-width h-full">
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full flex-shrink-0 flex-col justify-start transition-all duration-300",
|
||||
sidebarOpen
|
||||
? "absolute z-50 lg:relative lg:w-1/5 lg:max-w-[280px]"
|
||||
: "w-0",
|
||||
)}
|
||||
>
|
||||
<div className="flex h-full flex-col overflow-y-auto border-r border-border bg-muted p-4 text-center custom-scroll dark:bg-canvas">
|
||||
<div className="flex items-center gap-2 pb-8">
|
||||
<ShadTooltip
|
||||
styleClasses="z-50"
|
||||
side="right"
|
||||
content="Hide sidebar"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="flex h-8 w-8 items-center justify-center !p-0"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
>
|
||||
<IconComponent
|
||||
name={sidebarOpen ? "PanelLeftClose" : "PanelLeftOpen"}
|
||||
className="h-[18px] w-[18px] text-ring"
|
||||
/>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
{sidebarOpen && <div className="font-semibold">Playground</div>}
|
||||
</div>
|
||||
{sidebarOpen && (
|
||||
<div className="flex flex-col pl-3">
|
||||
<div className="flex flex-col gap-2 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<IconComponent
|
||||
name="MessagesSquare"
|
||||
className="h-[18px] w-[18px] text-ring"
|
||||
/>
|
||||
<div className="text-[13px] font-normal">Chat</div>
|
||||
</div>
|
||||
<ShadTooltip styleClasses="z-50" content="New Chat">
|
||||
<div>
|
||||
<Button
|
||||
data-testid="new-chat"
|
||||
variant="ghost"
|
||||
className="flex h-8 w-8 items-center justify-center !p-0 hover:bg-secondary-hover"
|
||||
onClick={(_) => {
|
||||
setvisibleSession(undefined);
|
||||
setSelectedViewField(undefined);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
name="Plus"
|
||||
className="h-[18px] w-[18px] text-ring"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{sessions.map((session, index) => (
|
||||
<SessionSelector
|
||||
setSelectedView={setSelectedViewField}
|
||||
selectedView={selectedViewField}
|
||||
key={index}
|
||||
session={session}
|
||||
deleteSession={(session) => {
|
||||
handleDeleteSession(session);
|
||||
if (selectedViewField?.id === session) {
|
||||
setSelectedViewField(undefined);
|
||||
}
|
||||
}}
|
||||
updateVisibleSession={(session) => {
|
||||
setvisibleSession(session);
|
||||
}}
|
||||
toggleVisibility={() => {
|
||||
setvisibleSession(session);
|
||||
}}
|
||||
isVisible={visibleSession === session}
|
||||
inspectSession={(session) => {
|
||||
setSelectedViewField({
|
||||
id: session,
|
||||
type: "Session",
|
||||
});
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full min-w-96 flex-grow bg-background">
|
||||
{selectedViewField && (
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col items-start gap-4 p-4",
|
||||
!selectedViewField ? "hidden" : "",
|
||||
)}
|
||||
>
|
||||
<div className="font-xl flex items-center justify-center gap-3 font-semibold">
|
||||
{haveChat && (
|
||||
<button onClick={() => setSelectedViewField(undefined)}>
|
||||
<IconComponent
|
||||
name={"ArrowLeft"}
|
||||
className="h-6 w-6"
|
||||
></IconComponent>
|
||||
</button>
|
||||
)}
|
||||
{
|
||||
nodes.find((node) => node.id === selectedViewField.id)?.data
|
||||
.node.display_name
|
||||
}
|
||||
</div>
|
||||
<div className="h-full w-full">
|
||||
{inputs.some(
|
||||
(input) => input.id === selectedViewField.id,
|
||||
) && (
|
||||
<IOFieldView
|
||||
type={InputOutput.INPUT}
|
||||
left={false}
|
||||
fieldType={selectedViewField.type!}
|
||||
fieldId={selectedViewField.id!}
|
||||
/>
|
||||
)}
|
||||
{outputs.some(
|
||||
(output) => output.id === selectedViewField.id,
|
||||
) && (
|
||||
<IOFieldView
|
||||
type={InputOutput.OUTPUT}
|
||||
left={false}
|
||||
fieldType={selectedViewField.type!}
|
||||
fieldId={selectedViewField.id!}
|
||||
/>
|
||||
)}
|
||||
{sessions.some(
|
||||
(session) => session === selectedViewField.id,
|
||||
) && (
|
||||
<SessionView
|
||||
session={selectedViewField.id}
|
||||
id={currentFlowId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{open && (
|
||||
<div className="flex-max-width h-full">
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col justify-between p-4",
|
||||
selectedViewField ? "hidden" : "",
|
||||
"flex h-full flex-shrink-0 flex-col justify-start transition-all duration-300",
|
||||
sidebarOpen
|
||||
? "absolute z-50 lg:relative lg:w-1/5 lg:max-w-[280px]"
|
||||
: "w-0",
|
||||
)}
|
||||
>
|
||||
<div className="mb-4 h-[5%] text-[16px] font-semibold">
|
||||
{visibleSession && sessions.length > 0 && sidebarOpen && (
|
||||
<div className="hidden lg:block">
|
||||
{visibleSession === currentFlowId
|
||||
? "Default Session"
|
||||
: `${visibleSession}`}
|
||||
</div>
|
||||
)}
|
||||
<div className={cn(sidebarOpen ? "lg:hidden" : "")}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-full flex-col overflow-y-auto border-r border-border bg-muted p-4 text-center custom-scroll dark:bg-canvas">
|
||||
<div className="flex items-center gap-2 pb-8">
|
||||
<ShadTooltip
|
||||
styleClasses="z-50"
|
||||
side="right"
|
||||
content="Hide sidebar"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="h-8 w-8"
|
||||
className="flex h-8 w-8 items-center justify-center !p-0"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
>
|
||||
<IconComponent
|
||||
name={"PanelLeftOpen"}
|
||||
name={sidebarOpen ? "PanelLeftClose" : "PanelLeftOpen"}
|
||||
className="h-[18px] w-[18px] text-ring"
|
||||
/>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
{sidebarOpen && (
|
||||
<div className="font-semibold">Playground</div>
|
||||
)}
|
||||
</div>
|
||||
{sidebarOpen && (
|
||||
<div className="flex flex-col pl-3">
|
||||
<div className="flex flex-col gap-2 pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<IconComponent
|
||||
name="MessagesSquare"
|
||||
className="h-[18px] w-[18px] text-ring"
|
||||
/>
|
||||
<div className="text-[13px] font-normal">Chat</div>
|
||||
</div>
|
||||
<ShadTooltip styleClasses="z-50" content="New Chat">
|
||||
<div>
|
||||
<Button
|
||||
data-testid="new-chat"
|
||||
variant="ghost"
|
||||
className="flex h-8 w-8 items-center justify-center !p-0 hover:bg-secondary-hover"
|
||||
onClick={(_) => {
|
||||
setvisibleSession(undefined);
|
||||
setSelectedViewField(undefined);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
name="Plus"
|
||||
className="h-[18px] w-[18px] text-ring"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{sessions.map((session, index) => (
|
||||
<SessionSelector
|
||||
setSelectedView={setSelectedViewField}
|
||||
selectedView={selectedViewField}
|
||||
key={index}
|
||||
session={session}
|
||||
deleteSession={(session) => {
|
||||
handleDeleteSession(session);
|
||||
if (selectedViewField?.id === session) {
|
||||
setSelectedViewField(undefined);
|
||||
}
|
||||
}}
|
||||
updateVisibleSession={(session) => {
|
||||
setvisibleSession(session);
|
||||
}}
|
||||
toggleVisibility={() => {
|
||||
setvisibleSession(session);
|
||||
}}
|
||||
isVisible={visibleSession === session}
|
||||
inspectSession={(session) => {
|
||||
setSelectedViewField({
|
||||
id: session,
|
||||
type: "Session",
|
||||
});
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full min-w-96 flex-grow bg-background">
|
||||
{selectedViewField && (
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col items-start gap-4 p-4",
|
||||
!selectedViewField ? "hidden" : "",
|
||||
)}
|
||||
>
|
||||
<div className="font-xl flex items-center justify-center gap-3 font-semibold">
|
||||
{haveChat && (
|
||||
<button onClick={() => setSelectedViewField(undefined)}>
|
||||
<IconComponent
|
||||
name={"ArrowLeft"}
|
||||
className="h-6 w-6"
|
||||
></IconComponent>
|
||||
</button>
|
||||
)}
|
||||
{
|
||||
nodes.find((node) => node.id === selectedViewField.id)
|
||||
?.data.node.display_name
|
||||
}
|
||||
</div>
|
||||
<div className="h-full w-full">
|
||||
{inputs.some(
|
||||
(input) => input.id === selectedViewField.id,
|
||||
) && (
|
||||
<IOFieldView
|
||||
type={InputOutput.INPUT}
|
||||
left={false}
|
||||
fieldType={selectedViewField.type!}
|
||||
fieldId={selectedViewField.id!}
|
||||
/>
|
||||
)}
|
||||
{outputs.some(
|
||||
(output) => output.id === selectedViewField.id,
|
||||
) && (
|
||||
<IOFieldView
|
||||
type={InputOutput.OUTPUT}
|
||||
left={false}
|
||||
fieldType={selectedViewField.type!}
|
||||
fieldId={selectedViewField.id!}
|
||||
/>
|
||||
)}
|
||||
{sessions.some(
|
||||
(session) => session === selectedViewField.id,
|
||||
) && (
|
||||
<SessionView
|
||||
session={selectedViewField.id}
|
||||
id={currentFlowId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
sidebarOpen ? "pointer-events-none opacity-0" : "",
|
||||
"absolute flex h-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
isPlayground ? "right-2 top-4" : "right-12 top-2",
|
||||
)}
|
||||
>
|
||||
<ShadTooltip
|
||||
side="bottom"
|
||||
styleClasses="z-50"
|
||||
content="New Chat"
|
||||
>
|
||||
<Button
|
||||
className="mr-2 h-[32px] w-[32px] hover:bg-secondary-hover"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(_) => {
|
||||
setvisibleSession(undefined);
|
||||
setSelectedViewField(undefined);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
name="Plus"
|
||||
className="!h-[18px] !w-[18px] text-ring"
|
||||
/>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
{!isPlayground && <Separator orientation="vertical" />}
|
||||
</div>
|
||||
</div>
|
||||
{haveChat ? (
|
||||
<div
|
||||
className={cn(
|
||||
visibleSession ? "h-[95%]" : "h-full",
|
||||
sidebarOpen
|
||||
? "pointer-events-none blur-sm lg:pointer-events-auto lg:blur-0"
|
||||
: "",
|
||||
)}
|
||||
>
|
||||
{messagesFetched && (
|
||||
<ChatView
|
||||
focusChat={sessionId}
|
||||
sendMessage={sendMessage}
|
||||
chatValue={chatValue}
|
||||
setChatValue={setChatValue}
|
||||
lockChat={lockChat}
|
||||
setLockChat={setLockChat}
|
||||
visibleSession={visibleSession}
|
||||
closeChat={
|
||||
!canvasOpen
|
||||
? undefined
|
||||
: () => {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="flex h-full w-full items-center justify-center font-thin text-muted-foreground">
|
||||
Select an IO component to view
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col justify-between p-4",
|
||||
selectedViewField ? "hidden" : "",
|
||||
)}
|
||||
>
|
||||
<div className="mb-4 h-[5%] text-[16px] font-semibold">
|
||||
{visibleSession && sessions.length > 0 && sidebarOpen && (
|
||||
<div className="hidden lg:block">
|
||||
{visibleSession === currentFlowId
|
||||
? "Default Session"
|
||||
: `${visibleSession}`}
|
||||
</div>
|
||||
)}
|
||||
<div className={cn(sidebarOpen ? "lg:hidden" : "")}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<IconComponent
|
||||
name={"PanelLeftOpen"}
|
||||
className="h-[18px] w-[18px] text-ring"
|
||||
/>
|
||||
</Button>
|
||||
<div className="font-semibold">Playground</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
sidebarOpen ? "pointer-events-none opacity-0" : "",
|
||||
"absolute flex h-8 items-center justify-center rounded-sm ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
||||
isPlayground ? "right-2 top-4" : "right-12 top-2",
|
||||
)}
|
||||
>
|
||||
<ShadTooltip
|
||||
side="bottom"
|
||||
styleClasses="z-50"
|
||||
content="New Chat"
|
||||
>
|
||||
<Button
|
||||
className="mr-2 h-[32px] w-[32px] hover:bg-secondary-hover"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(_) => {
|
||||
setvisibleSession(undefined);
|
||||
setSelectedViewField(undefined);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
name="Plus"
|
||||
className="!h-[18px] !w-[18px] text-ring"
|
||||
/>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
{!isPlayground && <Separator orientation="vertical" />}
|
||||
</div>
|
||||
</div>
|
||||
{haveChat ? (
|
||||
<div
|
||||
className={cn(
|
||||
visibleSession ? "h-[95%]" : "h-full",
|
||||
sidebarOpen
|
||||
? "pointer-events-none blur-sm lg:pointer-events-auto lg:blur-0"
|
||||
: "",
|
||||
)}
|
||||
>
|
||||
{messagesFetched && (
|
||||
<ChatView
|
||||
focusChat={sessionId}
|
||||
sendMessage={sendMessage}
|
||||
chatValue={chatValue}
|
||||
setChatValue={setChatValue}
|
||||
lockChat={lockChat}
|
||||
setLockChat={setLockChat}
|
||||
visibleSession={visibleSession}
|
||||
closeChat={
|
||||
!canvasOpen
|
||||
? undefined
|
||||
: () => {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="flex h-full w-full items-center justify-center font-thin text-muted-foreground">
|
||||
Select an IO component to view
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</BaseModal.Content>
|
||||
</BaseModal>
|
||||
);
|
||||
|
||||
@@ -54,15 +54,19 @@ export default function ApiModal({
|
||||
/>
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content overflowHidden>
|
||||
<CustomAPIGenerator isOpen={open} />
|
||||
<CodeTabsComponent
|
||||
open={open}
|
||||
tabs={tabs!}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
activeTweaks={activeTweaks}
|
||||
setActiveTweaks={setActiveTweaks}
|
||||
/>
|
||||
{open && (
|
||||
<>
|
||||
<CustomAPIGenerator isOpen={open} />
|
||||
<CodeTabsComponent
|
||||
open={open}
|
||||
tabs={tabs!}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
activeTweaks={activeTweaks}
|
||||
setActiveTweaks={setActiveTweaks}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</BaseModal.Content>
|
||||
</BaseModal>
|
||||
);
|
||||
|
||||
@@ -221,35 +221,42 @@ export default function ShareModal({
|
||||
/>
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content>
|
||||
<div className="w-full rounded-lg border border-border p-4">
|
||||
<EditFlowSettings name={name} description={description} />
|
||||
</div>
|
||||
<div className="mt-3 flex h-8 w-full">
|
||||
<TagsSelector
|
||||
tags={tags ?? []}
|
||||
loadingTags={false}
|
||||
disabled={false}
|
||||
selectedTags={selectedTags}
|
||||
setSelectedTags={setSelectedTags}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2 mt-5 flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="public"
|
||||
checked={sharePublic}
|
||||
onCheckedChange={(event: boolean) => {
|
||||
setSharePublic(event);
|
||||
}}
|
||||
data-testid="public-checkbox"
|
||||
/>
|
||||
<label htmlFor="public" className="export-modal-save-api text-sm">
|
||||
Set {nameComponent} status to public
|
||||
</label>
|
||||
</div>
|
||||
<span className="text-xs text-destructive">
|
||||
<b>Attention:</b> API keys in specified fields are automatically
|
||||
removed upon sharing.
|
||||
</span>
|
||||
{open && (
|
||||
<>
|
||||
<div className="w-full rounded-lg border border-border p-4">
|
||||
<EditFlowSettings name={name} description={description} />
|
||||
</div>
|
||||
<div className="mt-3 flex h-8 w-full">
|
||||
<TagsSelector
|
||||
tags={tags ?? []}
|
||||
loadingTags={false}
|
||||
disabled={false}
|
||||
selectedTags={selectedTags}
|
||||
setSelectedTags={setSelectedTags}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2 mt-5 flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="public"
|
||||
checked={sharePublic}
|
||||
onCheckedChange={(event: boolean) => {
|
||||
setSharePublic(event);
|
||||
}}
|
||||
data-testid="public-checkbox"
|
||||
/>
|
||||
<label
|
||||
htmlFor="public"
|
||||
className="export-modal-save-api text-sm"
|
||||
>
|
||||
Set {nameComponent} status to public
|
||||
</label>
|
||||
</div>
|
||||
<span className="text-xs text-destructive">
|
||||
<b>Attention:</b> API keys in specified fields are automatically
|
||||
removed upon sharing.
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</BaseModal.Content>
|
||||
|
||||
<BaseModal.Footer
|
||||
|
||||
Reference in New Issue
Block a user