Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Show a confirmation dialog when stopping project seeding
Rūdolfs Ošiņš committed 2 years ago
commit 2d57aaafd8137367b25c178dc9d38b5ac0e15c24
parent 2daa8e83a9855b0e51595f0274218469ce7e32cf
3 files changed +21 -35
modified src/components/Popover.svelte
@@ -62,7 +62,7 @@
      style:top={popoverPositionTop}

      style:padding={popoverPadding}

      style:border-radius={popoverBorderRadius}>
- 
      <slot name="popover" />
+ 
      <slot name="popover" {toggle} />

    </div>

  {/if}

</div>
modified src/views/projects/Header/SeedButton.svelte
@@ -3,9 +3,7 @@
  import { httpdStore, api } from "@app/lib/httpd";



  import Button from "@app/components/Button.svelte";
- 
  import Command from "@app/components/Command.svelte";

  import ErrorModal from "@app/modals/ErrorModal.svelte";
- 
  import ExternalLink from "@app/components/ExternalLink.svelte";

  import IconSmall from "@app/components/IconSmall.svelte";

  import Popover from "@app/components/Popover.svelte";
@@ -53,6 +51,7 @@
  }



  $: canEditSeeding =
+ 
    !editSeedingInProgress &&

    $httpdStore.state === "authenticated" &&

    $httpdStore.node.state === "running";

</script>
@@ -64,13 +63,6 @@
    font-weight: var(--font-weight-regular);

    margin-bottom: 0.75rem;

  }
- 
  code {
- 
    font-family: var(--font-family-monospace);
- 
    font-size: var(--font-size-small);
- 
    background-color: var(--color-fill-ghost);
- 
    border-radius: var(--border-radius-tiny);
- 
    padding: 0.125rem 0.25rem;
- 
  }

  .title-counter {

    display: flex;

    gap: 0.5rem;
@@ -95,11 +87,11 @@


<Popover popoverPositionTop="2.5rem" popoverPositionRight="0">

  <Button
- 
    disabled={editSeedingInProgress}
+ 
    disabled={!canEditSeeding}

    slot="toggle"

    let:toggle

    on:click={async () => {
- 
      if (canEditSeeding) {
+ 
      if (!seeding && canEditSeeding) {

        await editSeeding();

      } else {

        toggle();
@@ -112,36 +104,29 @@
      <span

        class="counter"

        class:seeding
- 
        class:disabled={editSeedingInProgress}
+ 
        class:disabled={!canEditSeeding}

        style:font-weight="var(--font-weight-regular)">

        {seedCount}

      </span>

    </span>

  </Button>
- 
  <div slot="popover" style:width={seeding ? "19.5rem" : "30.5rem"}>
+ 
  <div slot="popover" let:toggle style:width={seeding ? "19.5rem" : "30.5rem"}>
+ 
    <div class="seed-label txt-bold">Stop seeding</div>

    <div class="seed-label">
- 
      Use the <ExternalLink href="https://radicle.xyz/#try">
- 
        Radicle CLI
- 
      </ExternalLink>
- 
      to {seeding ? "stop seeding" : "seed"} this project.
- 
      {#if !seeding}
- 
        <br />
- 
        <br />
- 
        The
- 
        <code>seed</code>
- 
        command serves a dual purpose:
- 
        <ul style:padding="0 1rem" style:margin-top="0.5rem">
- 
          <li>
- 
            Keeps your local Radicle node in sync with updates from this
- 
            project.
- 
          </li>
- 
          <li>
- 
            Propagates them across the Radicle network to other peers like you.
- 
          </li>
- 
        </ul>
- 
      {/if}
+ 
      Are you sure you want to stop seeding this project? If you don't seed a
+ 
      project it won't appear in the local projects section anymore and any
+ 
      changes you make to it won't propagate to the network.

    </div>
- 
    <Command command={`rad seed ${projectId} ${seeding ? "--delete" : ""}`} />
+ 
    <Button
+ 
      styleWidth="100%"
+ 
      disabled={editSeedingInProgress}
+ 
      on:click={async () => {
+ 
        await editSeeding();
+ 
        toggle();
+ 
      }}>
+ 
      <IconSmall name="network" />
+ 
      Stop seeding
+ 
    </Button>

  </div>

</Popover>
modified tests/e2e/node.spec.ts
@@ -46,6 +46,7 @@ test("seeding projects", async ({ page, authenticatedPeer }) => {


  await page.goto(authenticatedPeer.ridUrl(rid));

  await page.getByRole("button", { name: "Seeding" }).click();
+ 
  await page.getByRole("button", { name: "Stop seeding" }).click();

  await expect(page.getByRole("button", { name: "Seed 1" })).toBeVisible();



  await page.getByRole("button", { name: "Seed 1" }).click();