From 268906fe490db206e3c55c1d19ce88f5749385ae Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 11 Sep 2023 16:05:25 -0300
Subject: [PATCH] Minor bug fixes to clean console

---
 src/frontend/src/modals/ApiModal/index.tsx    |  4 +--
 .../src/modals/ConfirmationModal/index.tsx    |  3 ++-
 src/frontend/src/modals/baseModal/index.tsx   |  2 +-
 src/frontend/src/pages/AdminPage/index.tsx    | 26 ++++++++++++-------
 .../extraSidebarComponent/index.tsx           | 26 ++++++++++++-------
 .../src/pages/ProfileSettingsPage/index.tsx   |  6 ++---
 src/frontend/src/types/components/index.ts    |  1 +
 7 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index ea9f58a02..a16fb9f3e 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -33,11 +33,9 @@ const ApiModal = forwardRef(
     {
       flow,
       children,
-      disable,
     }: {
       flow: FlowType;
       children: ReactNode;
-      disable: boolean;
     },
     ref
   ) => {
@@ -202,7 +200,7 @@ const ApiModal = forwardRef(
 
     return (
       <BaseModal open={open} setOpen={setOpen}>
-        <BaseModal.Trigger disable={disable}>{children}</BaseModal.Trigger>
+        <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
         <BaseModal.Header description={EXPORT_CODE_DIALOG}>
           <span className="pr-2">Code</span>
           <IconComponent
diff --git a/src/frontend/src/modals/ConfirmationModal/index.tsx b/src/frontend/src/modals/ConfirmationModal/index.tsx
index 1e615d799..08a1298ae 100644
--- a/src/frontend/src/modals/ConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/ConfirmationModal/index.tsx
@@ -6,6 +6,7 @@ import BaseModal from "../baseModal";
 
 export default function ConfirmationModal({
   title,
+  asChild,
   titleHeader,
   modalContent,
   modalContentTitle,
@@ -22,7 +23,7 @@ export default function ConfirmationModal({
   const [open, setOpen] = useState(false);
   return (
     <BaseModal size="x-small" open={open} setOpen={setOpen}>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger asChild={asChild}>{children}</BaseModal.Trigger>
       <BaseModal.Header description={titleHeader}>
         <span className="pr-2">{title}</span>
         <Icon
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index af2a99dee..69de5e166 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -26,7 +26,7 @@ const Content: React.FC<ContentProps> = ({ children }) => {
 const Trigger: React.FC<TriggerProps> = ({ children, asChild, disable }) => {
   return (
     <DialogTrigger
-      className={"w-full " + (disable ? "button-disable" : "")}
+      className={asChild ? "" : "w-full"}
       hidden={children ? false : true}
       asChild={asChild}
     >
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index 2a4dd9bac..4d29a9e1e 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -301,8 +301,9 @@ export default function AdminPage() {
                               </span>
                             </ShadTooltip>
                           </TableCell>
-                          <TableCell className="relative left-5 truncate py-2 text-align-last-left">
+                          <TableCell className="relative left-1 truncate py-2 text-align-last-left">
                             <ConfirmationModal
+                              asChild
                               title="Edit"
                               titleHeader={`${user.username}`}
                               modalContentTitle="Attention!"
@@ -320,14 +321,17 @@ export default function AdminPage() {
                                 );
                               }}
                             >
-                              <Checkbox
-                                id="is_active"
-                                checked={user.is_active}
-                              />
+                              <div className="flex w-fit">
+                                <Checkbox
+                                  id="is_active"
+                                  checked={user.is_active}
+                                />
+                              </div>
                             </ConfirmationModal>
                           </TableCell>
-                          <TableCell className="relative left-5 truncate py-2 text-align-last-left">
+                          <TableCell className="relative left-1 truncate py-2 text-align-last-left">
                             <ConfirmationModal
+                              asChild
                               title="Edit"
                               titleHeader={`${user.username}`}
                               modalContentTitle="Attention!"
@@ -345,10 +349,12 @@ export default function AdminPage() {
                                 );
                               }}
                             >
-                              <Checkbox
-                                id="is_superuser"
-                                checked={user.is_superuser}
-                              />
+                              <div className="flex w-fit">
+                                <Checkbox
+                                  id="is_superuser"
+                                  checked={user.is_superuser}
+                                />
+                              </div>
                             </ConfirmationModal>
                           </TableCell>
                           <TableCell className="truncate py-2 ">
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 8ea74390a..c692fe59b 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -99,16 +99,22 @@ export default function ExtraSidebar(): JSX.Element {
         <ShadTooltip content={"Code"} side="top">
           <div className="side-bar-button">
             {flow && flow.data && (
-              <ApiModal flow={flow} disable={!isBuilt}>
-                <div className={classNames("extra-side-bar-buttons")}>
-                  <IconComponent
-                    name="Code2"
-                    className={
-                      "side-bar-button-size" +
-                      (isBuilt ? " " : " extra-side-bar-save-disable")
-                    }
-                  />
-                </div>
+              <ApiModal flow={flow}>
+                <button className={!isBuilt ? "button-disable" : ""}>
+                  <div
+                    className={classNames(
+                      "extra-side-bar-buttons"
+                    )}
+                  >
+                    <IconComponent
+                      name="Code2"
+                      className={
+                        "side-bar-button-size" +
+                        (isBuilt ? " " : " extra-side-bar-save-disable")
+                      }
+                    />
+                  </div>
+                </button>
               </ApiModal>
             )}
           </div>
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
index fc12d2fb3..091a7dc32 100644
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@@ -48,6 +48,8 @@ export default function ProfileSettingsPage(): JSX.Element {
 
         setUserData(newUserData);
       }
+      handleInput({ target: { name: "password", value: "" } });
+      handleInput({ target: { name: "cnfPassword", value: "" } });
       setSuccessData({ title: "Changes saved successfully!" });
     } catch (error) {
       setErrorData({ title: "Error saving changes", list: [(error as any).response.data.detail] });
@@ -90,8 +92,6 @@ export default function ProfileSettingsPage(): JSX.Element {
                   <Form.Label className="data-[invalid]:label-invalid">
                     Password{" "}
                   </Form.Label>
-
-                  <Form.Control asChild>
                     <InputComponent
                       onChange={(value) => {
                         handleInput({ target: { name: "password", value } });
@@ -102,8 +102,6 @@ export default function ProfileSettingsPage(): JSX.Element {
                       placeholder="Password"
                       className="w-full"
                     />
-                  </Form.Control>
-
                   <Form.Message match="valueMissing" className="field-invalid">
                     Please enter your password
                   </Form.Message>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 51db60dbd..9b1db2ad2 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -233,6 +233,7 @@ export type PaginatorComponentType = {
 export type ConfirmationModalType = {
   title: string;
   titleHeader: string;
+  asChild?: boolean;
   modalContent: string;
   modalContentTitle: string;
   cancelText: string;