From e17149d7e52f1e14b96cb1667c392098c186a30a Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 20 Feb 2024 15:27:15 -0500
Subject: [PATCH] Decouples ProjectDialog from application state

- Creates container component for connecting with application state
- Creates presentational component with corresponding storybook
---
 src/common/dialog/ProjectDialog.svelte        | 194 ++++++++----------
 .../dialog/ProjectDialogContainer.svelte      |  83 ++++++++
 .../stories/ProjectDialog.stories.svelte      |  63 ++++++
 src/pages/app/MainContainer.svelte            |   4 +-
 4 files changed, 234 insertions(+), 110 deletions(-)
 create mode 100644 src/common/dialog/ProjectDialogContainer.svelte
 create mode 100644 src/common/dialog/stories/ProjectDialog.stories.svelte

diff --git a/src/common/dialog/ProjectDialog.svelte b/src/common/dialog/ProjectDialog.svelte
index fcd6c8aad..2cc243d60 100644
--- a/src/common/dialog/ProjectDialog.svelte
+++ b/src/common/dialog/ProjectDialog.svelte
@@ -1,136 +1,99 @@
-<script>
-  import { _ } from "svelte-i18n";
-
-  import Button from "@/common/Button.svelte";
-  import Loader from "@/common/Loader.svelte";
+<script lang="ts" context="module">
+  export interface FormData {
+    name: string;
+    description: string;
+    private: boolean;
+  }
+</script>
 
-  import { layout, showCollaborators, embedProject } from "@/manager/layout.js";
+<script lang="ts">
   import { onMount } from "svelte";
-  import { writable } from "svelte/store";
-  import emitter from "@/emit.js";
-  import { textAreaResize } from "@/util/textareaResize.js";
-  import { wrapLoadSeparate } from "@/util/wrapLoad.js";
-  import { lastUpdated } from "../../projects/Browser.svelte";
-  import {
-    createNewProject,
-    editProject,
-    removeProject,
-  } from "@/manager/projects";
-  import { showConfirm } from "@/manager/confirmDialog.js";
-
+  import { _ } from "svelte-i18n";
+  import Button from "../../common/Button.svelte";
+  import Loader from "../../common/Loader.svelte";
   import {
     PROJECT_TITLE_CHAR_LIMIT,
     PROJECT_DESCRIPTION_CHAR_LIMIT,
   } from "../../config/config.js";
-
-  const emit = emitter({
-    dismiss() {},
-  });
-
-  let name = layout.projectEdit == null ? "" : layout.projectEdit.title;
-  let description =
-    layout.projectEdit == null ? "" : layout.projectEdit.description;
-  let isPrivate =
-    layout.projectEdit == null ? false : layout.projectEdit.private;
-  let loading = writable(false);
-
-  $: editing = $layout.projectEdit != null;
+  import { textAreaResize } from "../../util/textareaResize.js";
+  import equal from "fast-deep-equal";
+
+  export let loading: boolean;
+  export let editing: boolean;
+  export let initialData: FormData;
+  export let onSave: (data: FormData, isValid: boolean) => void;
+  export let onDelete;
+  export let onCancel;
+  export let showCollaborators;
+  export let embedProject;
+
+  // Copy the data out of initialData for change comparisons
+  let {
+    name,
+    description,
+    private: isPrivate,
+  } = Object.assign({}, initialData);
 
   $: normalizedName = name.trim();
   $: changed =
-    !editing ||
-    $layout.projectEdit.title != name ||
-    $layout.projectEdit.description != description;
+    !editing || !equal({ name, description, private: isPrivate }, initialData);
   $: valid = changed && normalizedName.length > 0;
 
-  async function createOrUpdate() {
-    if (!valid) return;
-
-    if (editing) {
-      await wrapLoadSeparate(loading, layout, async () => {
-        await editProject(
-          layout.projectEdit,
-          normalizedName,
-          description,
-          isPrivate,
-        );
-      });
-    } else {
-      await wrapLoadSeparate(loading, layout, async () => {
-        await createNewProject(normalizedName, description, isPrivate);
-      });
-    }
-    $lastUpdated = new Date();
-    emit.dismiss();
-  }
-
-  async function remove() {
-    showConfirm(
-      "dialogProjectDialog.confirmDelete",
-      "dialogProjectDialog.deleteProject",
-      "dialog.delete",
-      async () => {
-        await wrapLoadSeparate(loading, layout, async () => {
-          await removeProject(layout.projectEdit);
-        });
-        emit.dismiss();
-      },
-      { project: layout.projectEdit.title },
-    );
-  }
-
   let input;
   onMount(() => input.focus());
 </script>
 
 <div>
-  <Loader active={$loading}>
-    <div class="mcontent">
-      <h1>
+  <Loader active={loading}>
+    <div class="mcontent vstack">
+      <h1 class="dialogTitle">
         {#if editing}
           {$_("dialogProjectDialog.editProject")}
         {:else}
           {$_("dialogProjectDialog.createProject")}
         {/if}
       </h1>
-      <div class="inputpadded">
-        <input
-          maxlength={PROJECT_TITLE_CHAR_LIMIT}
-          placeholder={$_("dialogProjectDialog.title")}
-          bind:value={name}
-          bind:this={input}
-        />
-        <p>
+      <div class="inputpadded flex">
+        <label class="name">
+          <input
+            maxlength={PROJECT_TITLE_CHAR_LIMIT}
+            placeholder={$_("dialogProjectDialog.title")}
+            bind:value={name}
+            bind:this={input}
+          /></label
+        >
+        <label class="checkbox">
+          <input type="checkbox" bind:checked={isPrivate} />
+          Private
+        </label>
+        <label class="description">
           <textarea
             maxlength={PROJECT_DESCRIPTION_CHAR_LIMIT}
             placeholder={$_("dialogProjectDialog.projectDesc")}
             bind:value={description}
             use:textAreaResize
           />
-        </p>
-        <label class="checkbox">
-          <input type="checkbox" bind:checked={isPrivate} />
-          Private
         </label>
-        {#if editing}
-          <p>
-            <Button nondescript={true} on:click={showCollaborators}>
-              {$_("dialogProjectDialog.manageCollabs")}
-            </Button><br />
-            <Button nondescript={true} on:click={embedProject}>
-              {$_("dialogProjectDialog.share")}
-            </Button>
-          </p>
-        {/if}
       </div>
-      <div class="buttonpadded">
+      {#if editing}
+        <div class="flex">
+          <Button nondescript={true} on:click={showCollaborators}>
+            {$_("dialogProjectDialog.manageCollabs")}
+          </Button>
+          <Button nondescript={true} on:click={embedProject}>
+            {$_("dialogProjectDialog.share")}
+          </Button>
+        </div>
+      {/if}
+      <div class="flex buttonpadded">
         <Button
           disabledReason={valid
             ? null
             : changed
               ? $_("dialogProjectDialog.enterTitle")
               : $_("dialogProjectDialog.changeTitle")}
-          on:click={() => createOrUpdate()}
+          on:click={() =>
+            onSave({ name, description, private: isPrivate }, valid)}
         >
           {#if editing}
             {$_("dialog.update")}
@@ -139,11 +102,11 @@
           {/if}
         </Button>
         {#if editing}
-          <Button danger={true} on:click={() => remove()}>
+          <Button danger={true} on:click={() => onDelete()}>
             {$_("dialog.delete")}
           </Button>
         {/if}
-        <Button secondary={true} on:click={emit.dismiss}>
+        <Button secondary={true} on:click={() => onCancel()}>
           {$_("dialog.cancel")}
         </Button>
       </div>
@@ -152,22 +115,37 @@
 </div>
 
 <style lang="scss">
-  input {
-    outline: none;
-    width: 100%;
-    padding: 4px 7px;
+  .dialogTitle {
+    margin: 0;
   }
 
-  textarea {
-    padding: 5px 7px;
+  .name {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
   }
 
-  p {
-    margin-bottom: 0;
+  .description {
+    flex: 1 1 auto;
+    width: 100%;
   }
 
   .checkbox {
+    flex: 0 1 auto;
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+  }
+
+  .flex {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 0.75rem;
+  }
+
+  .vstack {
     display: flex;
-    gap: 0.5rem;
+    flex-direction: column;
+    gap: 1rem;
   }
 </style>
diff --git a/src/common/dialog/ProjectDialogContainer.svelte b/src/common/dialog/ProjectDialogContainer.svelte
new file mode 100644
index 000000000..7ebb8bd5e
--- /dev/null
+++ b/src/common/dialog/ProjectDialogContainer.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { writable } from "svelte/store";
+  import emitter from "../../emit.js";
+  import { wrapLoadSeparate } from "../../util/wrapLoad.js";
+  import { lastUpdated } from "../../projects/Browser.svelte";
+  import {
+    createNewProject,
+    editProject,
+    removeProject,
+  } from "../../manager/projects";
+  import {
+    layout,
+    showCollaborators,
+    embedProject,
+  } from "../../manager/layout.js";
+  import { showConfirm } from "../../manager/confirmDialog.js";
+  import ProjectDialog, { type FormData } from "./ProjectDialog.svelte";
+
+  const emit = emitter({
+    dismiss() {},
+  });
+
+  let loading = writable(false);
+
+  async function upsertProject(data: FormData, isValid: boolean) {
+    if (!isValid) return;
+
+    if (editing) {
+      await wrapLoadSeparate(loading, layout, async () => {
+        await editProject(
+          layout.projectEdit,
+          data.name,
+          data.description,
+          data.private,
+        );
+      });
+    } else {
+      await wrapLoadSeparate(loading, layout, async () => {
+        await createNewProject(data.name, data.description, data.private);
+      });
+    }
+    $lastUpdated = new Date();
+    emit.dismiss();
+  }
+
+  async function deleteProject() {
+    showConfirm(
+      "dialogProjectDialog.confirmDelete",
+      "dialogProjectDialog.deleteProject",
+      "dialog.delete",
+      async () => {
+        await wrapLoadSeparate(loading, layout, async () => {
+          await removeProject(layout.projectEdit);
+        });
+        emit.dismiss();
+      },
+      { project: layout.projectEdit.title },
+    );
+  }
+
+  function cancel() {
+    emit.dismiss();
+  }
+
+  $: editing = $layout.projectEdit != null;
+
+  $: initialData = {
+    name: $layout.projectEdit?.title ?? "",
+    description: $layout.projectEdit?.description ?? "",
+    private: $layout.projectEdit?.private ?? false,
+  };
+</script>
+
+<ProjectDialog
+  loading={$loading}
+  {editing}
+  {initialData}
+  {showCollaborators}
+  {embedProject}
+  onSave={upsertProject}
+  onDelete={deleteProject}
+  onCancel={cancel}
+/>
diff --git a/src/common/dialog/stories/ProjectDialog.stories.svelte b/src/common/dialog/stories/ProjectDialog.stories.svelte
new file mode 100644
index 000000000..b2155570a
--- /dev/null
+++ b/src/common/dialog/stories/ProjectDialog.stories.svelte
@@ -0,0 +1,63 @@
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import ProjectDialog from "../ProjectDialog.svelte";
+  import { project } from "../../../api/fixtures/projects.fixtures";
+  import { action } from "@storybook/addon-actions";
+
+  const args = {
+    loading: false,
+    editing: false,
+    initialData: { name: "", description: "", private: false },
+    showCollaborators: action("Show Collaborators"),
+    embedProject: action("Embed Project"),
+  };
+
+  export const meta = {
+    title: "Dialogs / Project",
+    component: ProjectDialog,
+    parameters: {
+      layout: "centered",
+      chromatic: { delay: 1000 },
+    },
+    argTypes: {
+      loading: {
+        control: {
+          type: "boolean",
+        },
+      },
+      editing: {
+        control: {
+          type: "boolean",
+        },
+      },
+      onSave: {
+        action: "Save",
+      },
+      onDelete: {
+        action: "Delete",
+      },
+      onCancel: {
+        action: "Cancel",
+      },
+    },
+  };
+</script>
+
+<Template let:args>
+  <ProjectDialog {...args} />
+</Template>
+
+<Story name="Create Project" {args} />
+<Story
+  name="Edit Project"
+  args={{
+    ...args,
+    editing: true,
+    initialData: {
+      name: project.title,
+      description: project.description,
+      private: project.private,
+    },
+  }}
+/>
+<Story name="Loading" args={{ ...args, loading: true }} />
diff --git a/src/pages/app/MainContainer.svelte b/src/pages/app/MainContainer.svelte
index 6224ff99e..e72af4c60 100644
--- a/src/pages/app/MainContainer.svelte
+++ b/src/pages/app/MainContainer.svelte
@@ -12,7 +12,7 @@
   import DocumentInformationDialog from "@/common/dialog/DocumentInformationDialog.svelte";
   import MetaDialog from "@/common/dialog/MetaDialog.svelte";
   import OwnerDialog from "@/common/dialog/OwnerDialog.svelte";
-  import ProjectDialog from "@/common/dialog/ProjectDialog.svelte";
+  import ProjectDialogContainer from "../../common/dialog/ProjectDialogContainer.svelte";
   import ProjectAccessDialog from "@/common/dialog/ProjectAccessDialog.svelte";
   import ProjectEmbedDialog from "@/common/dialog/ProjectEmbedDialog.svelte";
   import ReprocessDialog from "@/common/dialog/ReprocessDialog.svelte";
@@ -82,7 +82,7 @@
 {:else if $layout.projectCollaboratorsOpen}
   <Modal component={CollaboratorDialog} on:close={hideCollaborators} />
 {:else if $layout.projectOpen}
-  <Modal component={ProjectDialog} on:close={hideProject} />
+  <Modal component={ProjectDialogContainer} on:close={hideProject} />
 {:else if $layout.reprocessOpen}
   <Modal component={ReprocessDialog} on:close={hideReprocess} />
 {:else if $layout.searchTipsOpen}