2e6fed9 Refactor Issue discussion section — radicle-desktop

Radicle desktop app

Refactor Issue discussion section

Rūdolfs Ošiņš committed 1 year ago

commit 2e6fed9845fd84dfdb36ed7f2784f0809c25a91c
parent 16c72d5b2fd6ba2babd745c59e7d86d436eeea24

2 files changed +20 -82

modified src/views/repo/Issue.svelte

@@ -4,13 +4,12 @@

   import type { Config } from "@bindings/config/Config";
   import type { Embed } from "@bindings/cob/thread/Embed";
   import type { Issue } from "@bindings/cob/issue/Issue";
   import type { IssueStatus } from "./router";
   import type { Operation } from "@bindings/cob/Operation";
   import type { RepoInfo } from "@bindings/repo/RepoInfo";
   import type { Thread } from "@bindings/cob/thread/Thread";
   import type { IssueStatus } from "./router";
   import partial from "lodash/partial";
   import { tick } from "svelte";
   import * as roles from "@app/lib/roles";
   import { invoke } from "@app/lib/invoke";

@@ -19,7 +18,6 @@

     issueStatusBackgroundColor,
     issueStatusColor,
     publicKeyFromDid,
     scrollIntoView,
   } from "@app/lib/utils";
   import { announce } from "@app/components/AnnounceSwitch.svelte";

@@ -27,7 +25,6 @@

   import AssigneeInput from "@app/components/AssigneeInput.svelte";
   import Border from "@app/components/Border.svelte";
   import CommentComponent from "@app/components/Comment.svelte";
   import CommentToggleInput from "@app/components/CommentToggleInput.svelte";
   import CopyableId from "@app/components/CopyableId.svelte";
   import Icon from "@app/components/Icon.svelte";
   import InlineTitle from "@app/components/InlineTitle.svelte";

@@ -38,9 +35,9 @@

   import LabelInput from "@app/components/LabelInput.svelte";
   import Sidebar from "@app/components/Sidebar.svelte";
   import TextInput from "@app/components/TextInput.svelte";
   import ThreadComponent from "@app/components/Thread.svelte";
   import Layout from "./Layout.svelte";
   import Discussion from "@app/components/Discussion.svelte";
   interface Props {
     repo: RepoInfo;

@@ -66,13 +63,10 @@

   let issues = $state(initialIssues);
   let status = $state(initialStatus);
   let topLevelReplyOpen = $state(false);
   let editingTitle = $state(false);
   let updatedTitle = $state("");
   let labelSaveInProgress: boolean = $state(false);
   let assigneesSaveInProgress: boolean = $state(false);
   let focusReply: boolean = $state(false);
   let hideDiscussion = $state(false);
   let hideTimeline = $state(false);
   $effect(() => {

@@ -84,11 +78,8 @@

     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     issue.id;
     topLevelReplyOpen = false;
     editingTitle = false;
     updatedTitle = issue.title;
     focusReply = false;
     hideDiscussion = false;
     hideTimeline = false;
   });

@@ -146,20 +137,6 @@

     }
   }
   async function toggleReply() {
     topLevelReplyOpen = !topLevelReplyOpen;
     if (!topLevelReplyOpen) {
       return;
     }
     await tick();
     scrollIntoView(`reply-${issue.id}`, {
       behavior: "smooth",
       block: "center",
     });
     focusReply = true;
   }
   async function reload() {
     [issue, activity, threads] = await Promise.all([
       invoke<Issue>("issue_by_id", {

@@ -176,15 +153,18 @@

       }),
     ]);
     topLevelReplyOpen = false;
     editingTitle = false;
   }
   async function createComment(body: string, embeds: Embed[]) {
   async function createComment(
     body: string,
     embeds: Embed[],
     replyTo?: string,
   ) {
     try {
       await invoke("create_issue_comment", {
         rid: repo.rid,
         new: { id: issue.id, body, embeds },
         new: { id: issue.id, body, embeds, replyTo },
         opts: { announce: $nodeRunning && $announce },
       });
       // Update second column issue comment count without reloading the whole

@@ -338,12 +318,6 @@

   .content {
     padding: 1rem 1rem 1rem 0;
   }
   .connector {
     width: 2px;
     height: 1rem;
     margin-left: 1.25rem;
     background-color: var(--color-background-float);
   }
   .title-icons {
     display: flex;
     gap: 1rem;

@@ -525,54 +499,18 @@

           config.publicKey,
           issue.body.id,
         )}>
         {#snippet actions()}
           <Icon name="reply" onclick={toggleReply} />
         {/snippet}
       </CommentComponent>
     </div>
     <div style:margin-bottom="1rem">
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <div
         role="button"
         tabindex="0"
         class="txt-semibold global-flex"
         style:margin-bottom="1rem"
         style:cursor="pointer"
         onclick={() => (hideDiscussion = !hideDiscussion)}>
         <Icon
           name={hideDiscussion ? "chevron-right" : "chevron-down"} />Discussion
       </div>
       <div class:hide={hideDiscussion}>
         {#each threads as thread}
           <ThreadComponent
             {thread}
             rid={repo.rid}
             canEditComment={partial(
               roles.isDelegateOrAuthor,
               config.publicKey,
               repo.delegates.map(delegate => delegate.did),
             )}
             {editComment}
             createReply={createComment}
             reactOnComment={partial(reactOnComment, config.publicKey)} />
           <div class="connector"></div>
         {/each}
         <div id={`reply-${issue.id}`}>
           <CommentToggleInput
             disallowEmptyBody
             rid={repo.rid}
             focus={focusReply}
             onexpand={toggleReply}
             onclose={topLevelReplyOpen
               ? () => (topLevelReplyOpen = false)
               : undefined}
             placeholder="Leave a comment"
             submit={createComment} />
         </div>
       </div>
     </div>
     <Discussion
       cobId={issue.id}
       commentThreads={threads}
       {config}
       {createComment}
       {editComment}
       {reactOnComment}
       repoDelegates={repo.delegates}
       rid={repo.rid} />
     <div>
       <!-- svelte-ignore a11y_click_events_have_key_events -->

modified tests/e2e/repo/issue.spec.ts

@@ -56,7 +56,7 @@ test("creation of top level comments", async ({ page }) => {

       .last(),
   ).toBeVisible();
   await page.getByRole("button", { name: "Leave a comment" }).click();
   await page.getByRole("button", { name: "icon-comment Comment" }).click();
   await page
     .getByPlaceholder("Leave a comment")
     .fill("A top level comment by playwright");

@@ -67,7 +67,7 @@ test("creation of top level comments", async ({ page }) => {

   await page.getByLabel("icon-reply").first().click();
   await page
     .getByPlaceholder("Leave a comment")
     .getByPlaceholder("Reply to comment")
     .fill(
       "A top level comment by playwright created by replying to the issue body",
     );

@@ -78,7 +78,7 @@ test("creation of top level comments", async ({ page }) => {

     ),
   ).toBeVisible();
   await page.getByLabel("icon-reply").nth(1).click();
   await page.getByLabel("icon-reply").click();
   await page
     .getByPlaceholder("Reply to comment")
     .fill("A reply comment by playwright replying to the first comment");