Merge pull request 'ui/modal: refactor mounting and controlled state' (#4807) from render-2 into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4807

pkgs/clan-app/ui/src/components/Modal/Modal.module.css

@@ -35,3 +35,11 @@
 .header_divider {
   @apply bg-def-3 h-[6px] border-def-2 border-t-[1px];
 }
+
+.backdrop {
+  @apply absolute left-0 top-0 z-50 size-full bg-white/90;
+}
+
+.contentWrapper {
+  @apply absolute left-0 top-0 z-50 flex size-full items-center justify-center;
+}

pkgs/clan-app/ui/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, JSX, Show } from "solid-js";
+import { Component, JSX, Show } from "solid-js";
 import { Dialog as KDialog } from "@kobalte/core/dialog";
 import styles from "./Modal.module.css";
 import { Typography } from "../Typography/Typography";
@@ -19,14 +19,16 @@ export interface ModalProps {
   class?: string;
   metaHeader?: Component;
   disablePadding?: boolean;
+  open: boolean;
 }
 
 export const Modal = (props: ModalProps) => {
-  const [open, setOpen] = createSignal(true);
-
   return (
-    <KDialog id={props.id} open={open()} modal={true}>
+    <Show when={props.open}>
+      <KDialog id={props.id} open={props.open} modal={true}>
         <KDialog.Portal mount={props.mount}>
+          <div class={styles.backdrop} />
+          <div class={styles.contentWrapper}>
             <KDialog.Content class={cx(styles.modal_content, props.class)}>
               <div class={styles.modal_header}>
                 <Typography
@@ -39,7 +41,6 @@ export const Modal = (props: ModalProps) => {
                 </Typography>
                 <KDialog.CloseButton
                   onClick={() => {
-                setOpen(false);
                     props.onClose();
                   }}
                 >
@@ -56,16 +57,20 @@ export const Modal = (props: ModalProps) => {
                   </>
                 )}
               </Show>
-          <div class={styles.modal_body} data-no-padding={props.disablePadding}>
+              <div
+                class={styles.modal_body}
+                data-no-padding={props.disablePadding}
+              >
                 {props.children({
                   close: () => {
-                setOpen(false);
                     props.onClose();
                   },
                 })}
               </div>
             </KDialog.Content>
+          </div>
         </KDialog.Portal>
       </KDialog>
+    </Show>
   );
 };

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -61,6 +61,7 @@ const MockCreateMachine = (props: MockProps) => {
   return (
     <div ref={(el) => (container = el)} class="create-backdrop">
       <Modal
+        open={true}
         mount={container!}
         onClose={() => {
           reset(form);

pkgs/clan-app/ui/src/routes/Layout.tsx

@@ -1,8 +1,7 @@
 import { Component, createEffect, on } from "solid-js";
 import { RouteSectionProps, useNavigate } from "@solidjs/router";
-import { activeClanURI, setActiveClanURI } from "@/src/stores/clan";
+import { activeClanURI } from "@/src/stores/clan";
 import { navigateToClan } from "@/src/hooks/clan";
-import { Button } from "../components/Button/Button";
 
 export const Layout: Component<RouteSectionProps> = (props) => {
   const navigate = useNavigate();

pkgs/clan-app/ui/src/routes/Machine/Machine.tsx

@@ -69,17 +69,14 @@ export const Machine = (props: RouteSectionProps) => {
       >
         Install me!
       </Button>
+      {/* Unmount the whole component to destroy the store and form values */}
       <Show when={showInstall()}>
-        <div
-          class="absolute left-0 top-0 z-50 flex size-full items-center justify-center bg-white/90"
-          ref={(el) => (container = el)}
-        >
         <InstallModal
+          open={showInstall()}
           machineName={useMachineName()}
           mount={container!}
           onClose={() => setShowModal(false)}
         />
-        </div>
       </Show>
       {sidebarPane(useMachineName())}
     </Show>

pkgs/clan-app/ui/src/workflows/Install/install.tsx

@@ -32,6 +32,7 @@ export interface InstallModalProps {
   initialStep?: InstallSteps[number]["id"];
   mount?: Node;
   onClose?: () => void;
+  open: boolean;
 }
 
 const steps = [
@@ -85,12 +86,12 @@ export const InstallModal = (props: InstallModalProps) => {
     <StepperProvider stepper={stepper}>
       <Modal
         class="h-[30rem] w-screen max-w-3xl"
-        mount={props.mount}
         title="Install machine"
         onClose={() => {
           console.log("Install modal closed");
           props.onClose?.();
         }}
+        open={props.open}
         // @ts-expect-error some steps might not have
         metaHeader={stepper.currentStep()?.title ? <MetaHeader /> : undefined}
         // @ts-expect-error some steps might not have