From 2e6fed9845fd84dfdb36ed7f2784f0809c25a91c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Tue, 18 Feb 2025 19:32:49 -0600 Subject: [PATCH] Refactor Issue discussion section We now use the Discussion component like everywhere else. --- src/views/repo/Issue.svelte | 96 +++++++----------------------------- tests/e2e/repo/issue.spec.ts | 6 +-- 2 files changed, 20 insertions(+), 82 deletions(-) diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte index 0707f8bb4..92bacc922 100644 --- a/src/views/repo/Issue.svelte +++ b/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_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()} - - {/snippet} -
- -
(hideDiscussion = !hideDiscussion)}> - Discussion -
-
- {#each threads as thread} - delegate.did), - )} - {editComment} - createReply={createComment} - reactOnComment={partial(reactOnComment, config.publicKey)} /> -
- {/each} - -
- (topLevelReplyOpen = false) - : undefined} - placeholder="Leave a comment" - submit={createComment} /> -
-
-
+
diff --git a/tests/e2e/repo/issue.spec.ts b/tests/e2e/repo/issue.spec.ts index b7d36a8fb..fa4c587d9 100644 --- a/tests/e2e/repo/issue.spec.ts +++ b/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");