Minor bug fixes to clean console

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

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

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}
     >

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() {
                                 );
                               }}
                             >
+                              <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() {
                                 );
                               }}
                             >
+                              <div className="flex w-fit">
                                 <Checkbox
                                   id="is_superuser"
                                   checked={user.is_superuser}
                                 />
+                              </div>
                             </ConfirmationModal>
                           </TableCell>
                           <TableCell className="truncate py-2 ">

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -99,8 +99,13 @@ export default function ExtraSidebar(): JSX.Element {
         <ShadTooltip content={"Code"} side="top">
           <div className="side-bar-button">
             {flow && flow.data && (
-              <ApiModal flow={flow} disable={!isBuilt}>
+              <ApiModal flow={flow}>
-                <div className={classNames("extra-side-bar-buttons")}>
+                <button className={!isBuilt ? "button-disable" : ""}>
+                  <div
+                    className={classNames(
+                      "extra-side-bar-buttons"
+                    )}
+                  >
                     <IconComponent
                       name="Code2"
                       className={
@@ -109,6 +114,7 @@ export default function ExtraSidebar(): JSX.Element {
                       }
                     />
                   </div>
+                </button>
               </ApiModal>
             )}
           </div>

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>

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;