NNS1-3094: Add sign-in banner to projects table page (#5190)

# Motivation

To match the design and be consistent with other pages we want to add a
sign-in banner to the staking page.

# Changes

Add page banner with sign-in button to staking page. (copied from
[here](https://github.com/dfinity/nns-dapp/blob/52e4794a97c66de64013294aed35a445307258c6/frontend/src/lib/pages/SignInNeurons.svelte#L13-L18))

# Tests

1. Added unit test.
2. Manually at
https://qsgjb-riaaa-aaaaa-aaaga-cai.dskloet-ingress.devenv.dfinity.network/staking/

# Todos

- [ ] Add entry to changelog (if necessary).
not necessary

frontend/src/lib/routes/Staking.svelte

@@ -1,8 +1,34 @@
 <script lang="ts">
+  import SignIn from "$lib/components/common/SignIn.svelte";
   import ProjectsTable from "$lib/components/staking/ProjectsTable.svelte";
-  import { Island } from "@dfinity/gix-components";
+  import { authSignedInStore } from "$lib/derived/auth.derived";
+  import { i18n } from "$lib/stores/i18n";
+  import { IconNeuronsPage, PageBanner } from "@dfinity/gix-components";
 </script>
 
-<Island>
+<main data-tid="staking-component">
+  {#if !$authSignedInStore}
+    <PageBanner testId="staking-page-banner">
+      <IconNeuronsPage slot="image" />
+      <svelte:fragment slot="title">{$i18n.auth_neurons.title}</svelte:fragment>
+      <p class="description" slot="description">{$i18n.neurons.text}</p>
+      <SignIn slot="actions" />
+    </PageBanner>
+  {/if}
+
   <ProjectsTable />
-</Island>
+</main>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/media";
+
+  main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-2x);
+
+    @include media.min-width(large) {
+      width: var(--island-width);
+    }
+  }
+</style>

frontend/src/tests/lib/routes/Staking.spec.ts

@@ -0,0 +1,30 @@
+import Staking from "$lib/routes/Staking.svelte";
+import { resetIdentity, setNoIdentity } from "$tests/mocks/auth.store.mock";
+import { StakingPo } from "$tests/page-objects/Staking.page-object";
+import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
+import { render } from "@testing-library/svelte";
+
+describe("Staking", () => {
+  beforeEach(() => {
+    resetIdentity();
+  });
+
+  const renderComponent = () => {
+    const { container } = render(Staking);
+    return StakingPo.under(new JestPageObjectElement(container));
+  };
+
+  it("should render the page banner and login button when not signed in", async () => {
+    setNoIdentity();
+    const po = renderComponent();
+    expect(await po.getPageBannerPo().isPresent()).toBe(true);
+    expect(await po.getSignInPo().isPresent()).toBe(true);
+  });
+
+  it("should not render the page banner and login button when signed in", async () => {
+    resetIdentity();
+    const po = renderComponent();
+    expect(await po.getPageBannerPo().isPresent()).toBe(false);
+    expect(await po.getSignInPo().isPresent()).toBe(false);
+  });
+});

frontend/src/tests/page-objects/PageBanner.page-object.ts

@@ -2,8 +2,6 @@ import { BasePageObject } from "$tests/page-objects/base.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
 
 export class PageBannerPo extends BasePageObject {
-  private static readonly TID = "participate-button-component";
-
   static under({
     element,
     testId,

frontend/src/tests/page-objects/Staking.page-object.ts

@@ -0,0 +1,28 @@
+import { PageBannerPo } from "$tests/page-objects/PageBanner.page-object";
+import { ProjectsTablePo } from "$tests/page-objects/ProjectsTable.page-object";
+import { SignInPo } from "$tests/page-objects/SignIn.page-object";
+import { BasePageObject } from "$tests/page-objects/base.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class StakingPo extends BasePageObject {
+  private static readonly TID = "staking-component";
+
+  static under(element: PageObjectElement): StakingPo {
+    return new StakingPo(element.byTestId(StakingPo.TID));
+  }
+
+  getPageBannerPo(): PageBannerPo {
+    return PageBannerPo.under({
+      element: this.root,
+      testId: "staking-page-banner",
+    });
+  }
+
+  getSignInPo(): SignInPo {
+    return SignInPo.under(this.root);
+  }
+
+  getProjectsTablePo(): ProjectsTablePo {
+    return ProjectsTablePo.under(this.root);
+  }
+}