From 435d86067cf2e36b1fcbed0e83d57190d714fdbf Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 19 Dec 2024 15:35:11 -0300
Subject: [PATCH] refactor: improve conditional rendering on panel buttons 
 (#5365)

add render condition on modal buttons
---
 src/frontend/src/modals/IOModal/newModal.tsx | 456 ++++++++++---------
 src/frontend/src/modals/apiModal/index.tsx   |  22 +-
 src/frontend/src/modals/shareModal/index.tsx |  65 +--
 3 files changed, 279 insertions(+), 264 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/newModal.tsx b/src/frontend/src/modals/IOModal/newModal.tsx
index 10802df65..e5ceabe39 100644
--- a/src/frontend/src/modals/IOModal/newModal.tsx
+++ b/src/frontend/src/modals/IOModal/newModal.tsx
@@ -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>
   );
diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx
index c6feedd00..842e5a7d5 100644
--- a/src/frontend/src/modals/apiModal/index.tsx
+++ b/src/frontend/src/modals/apiModal/index.tsx
@@ -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>
   );
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index a7eb6e1d5..49b5f4764 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -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