Update navbars / add banner on v1 dashboard

client/src/components/navbar/AnnounceV2Banner.tsx

@@ -0,0 +1,47 @@
+import cx from "classnames";
+import { Link, useLocation } from "react-router-dom-v5-compat";
+
+import LearnAboutV2Button from "../../features/projectsV2/shared/LearnAboutV2Button";
+import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
+import AnnounceV2 from "./Graphics/AnnounceV2.svg";
+
+export default function AnnounceV2Banner() {
+  const location = useLocation();
+  if (
+    location.pathname !== ABSOLUTE_ROUTES.v1.root &&
+    location.pathname !== `${ABSOLUTE_ROUTES.v1.root}/`
+  )
+    return;
+  return (
+    <div
+      data-cy="announce-v2-banner"
+      className={cx(
+        "bg-white",
+        "d-flex",
+        "align-items-center",
+        "justify-content-center",
+        "mb-3",
+        "p-3"
+      )}
+    >
+      <div className={cx("me-4", "d-none", "d-xxl-block")}>
+        <img src={AnnounceV2} alt="announcement for v2" />
+      </div>
+      <div className={cx("fs-5", "fw-medium", "me-3")}>
+        Connecting data, code, compute, and{" "}
+        <b>
+          <i>people</i>
+        </b>
+        .
+      </div>
+      <div className="me-3">
+        <Link to={ABSOLUTE_ROUTES.root} className={cx("btn", "btn-primary")}>
+          Explore Renku 2.0
+        </Link>
+      </div>
+      <div>
+        <LearnAboutV2Button />
+      </div>
+    </div>
+  );
+}

client/src/components/navbar/LoggedInNavBar.tsx

@@ -20,8 +20,17 @@ import cx from "classnames";
 import { useCallback, useContext, useState } from "react";
 import { List, Search } from "react-bootstrap-icons";
 import { Link } from "react-router-dom";
-import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
+import {
+  Badge,
+  Collapse,
+  Nav,
+  NavItem,
+  Navbar,
+  NavbarToggler,
+} from "reactstrap";
+import AnnounceV2Banner from "./AnnounceV2Banner";
 import StatusBanner from "../../features/platform/components/StatusBanner";
+import LearnAboutV2Button from "../../features/projectsV2/shared/LearnAboutV2Button";
 import { NavBarWarnings } from "../../landing/NavBarWarnings";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
 import AppContext from "../../utils/context/appContext";
@@ -57,8 +66,17 @@ export default function LoggedInNavBar() {
             to={ABSOLUTE_ROUTES.v1.root}
             className="navbar-brand me-2 pb-0 pt-0"
           >
-            <img src={RENKU_LOGO} alt="Renku" height="50" className="d-block" />
+            <img
+              src={RENKU_LOGO}
+              alt="Renku Legacy"
+              height="50"
+              className="d-block"
+            />
           </Link>
+          <Badge color="warning" className="mx-2">
+            Legacy
+          </Badge>
+          <LearnAboutV2Button outline />
           <NavbarToggler onClick={onToggle} className="border-0">
             <List className="bi text-rk-white" />
           </NavbarToggler>
@@ -115,6 +133,7 @@ export default function LoggedInNavBar() {
           </Collapse>
         </Navbar>
       </header>
+      <AnnounceV2Banner />
       <StatusBanner params={params} />
       <NavBarWarnings model={model} uiShortSha={uiShortSha} />
     </>

client/src/components/navbar/NavBarItems.tsx

@@ -352,7 +352,7 @@ export function RenkuToolbarItemUser({
             </Link>
             <DropdownItem divider />
             <Link to={ABSOLUTE_ROUTES.v1.root} className="dropdown-item">
-              Back to <span className="fw-bold">Renku 1.0</span>
+              Go to <span className="fw-bold">Renku Legacy</span>
             </Link>
           </>
         )}
@@ -361,7 +361,7 @@ export function RenkuToolbarItemUser({
           <>
             <DropdownItem divider />
             <Link to={ABSOLUTE_ROUTES.root} className="dropdown-item">
-              <span className="fw-bold">Renku 2.0</span> Early access
+              Go to <span className="fw-bold">Renku 2.0</span>
             </Link>
           </>
         )}

client/src/features/projectsV2/shared/BackToV1Button.tsx → client/src/features/projectsV2/shared/LearnAboutV2Button.tsx

@@ -17,28 +17,32 @@
  */
 
 import cx from "classnames";
-import { BoxArrowInLeft } from "react-bootstrap-icons";
-import { Link } from "react-router-dom-v5-compat";
+import { ExternalLink } from "../../../components/ExternalLinks";
 
-interface BackToV1ButtonProps {
-  outline?: boolean;
+interface LearnAboutV2ButtonProps {
+  children?: React.ReactNode;
   color?: string;
+  outline?: boolean;
 }
-export default function BackToV1Button({
-  outline = false,
+export default function LearnAboutV2Button({
+  children = "Learn more",
   color = "light",
-}: BackToV1ButtonProps) {
+  outline = false,
+}: LearnAboutV2ButtonProps) {
   return (
-    <Link
+    <ExternalLink
       className={cx(
-        "btn",
-        "btn-sm",
-        outline ? `btn-outline-${color}` : `btn-${color}`,
-        "text-decoration-none"
+        outline && [
+          "btn",
+          "btn-sm",
+          `btn-outline-${color}`,
+          "text-decoration-none",
+        ]
       )}
-      to="/v1"
+      role={outline ? "button" : "link"}
+      url="https://blog.renkulab.io/early-access/"
     >
-      <BoxArrowInLeft className="bi" /> Back to <b>Renku 1.0</b>
-    </Link>
+      {children}
+    </ExternalLink>
   );
 }

client/src/features/projectsV2/shared/WipBadge.tsx

@@ -29,7 +29,7 @@ interface WipBadeProps {
 
 export default function WipBadge({
   className,
-  children = "2 .0 Early access",
+  children = "Work in progress",
   tooltip = "The platform is stable, but some core features are still being developed and will be added soon.",
 }: WipBadeProps) {
   const ref = useRef<HTMLDivElement>(null);

client/src/features/rootV2/NavbarV2.tsx

@@ -46,8 +46,6 @@ import useLocationHash from "../../utils/customHooks/useLocationHash.hook";
 import { GROUP_CREATION_HASH } from "../groupsV2/new/createGroup.constants";
 import StatusBanner from "../platform/components/StatusBanner";
 import { PROJECT_CREATION_HASH } from "../projectsV2/new/createProjectV2.constants";
-import BackToV1Button from "../projectsV2/shared/BackToV1Button";
-import WipBadge from "../projectsV2/shared/WipBadge";
 
 const RENKU_ALPHA_LOGO = "/static/public/img/logo.svg";
 
@@ -160,12 +158,8 @@ export default function NavbarV2() {
               data-cy="link-home"
               to={ABSOLUTE_ROUTES.v2.root}
             >
-              <img src={RENKU_ALPHA_LOGO} alt="Renku v2 (beta)" height="50" />
+              <img src={RENKU_ALPHA_LOGO} alt="Renku" height="50" />
             </RenkuNavLinkV2>
-            <WipBadge>
-              <span className="fw-bold">2.0</span> Early access
-            </WipBadge>
-            <BackToV1Button outline={true} />
           </div>
           <div className="ms-auto">
             <NavbarToggler onClick={onToggle} className={cx("border-0", "p-2")}>

client/src/features/secrets/Secrets.tsx

@@ -24,7 +24,6 @@ import { Loader } from "../../components/Loader";
 import LoginAlert from "../../components/loginAlert/LoginAlert";
 import { User } from "../../model/renkuModels.types";
 import useLegacySelector from "../../utils/customHooks/useLegacySelector.hook";
-import WipBadge from "../projectsV2/shared/WipBadge";
 
 import GeneralSecretNew from "./GeneralSecretNew";
 import SecretsList from "./SecretsList";
@@ -87,10 +86,7 @@ export default function Secrets() {
       <Row>
         <Col>
           <div className={cx("d-flex", "mb-2")}>
-            <h2 className={cx("mb-0", "me-2")}>User Secrets</h2>
-            <div className="my-auto">
-              <WipBadge tooltip="This feature is under development and certain pieces may not work correctly." />
-            </div>
+            <h2 className="mb-0">User Secrets</h2>
           </div>
           <div>
             {!user.logged ? (

tests/cypress/e2e/dashboard.spec.ts

@@ -546,3 +546,49 @@ describe("Dashboard pins", () => {
       );
   });
 });
+
+describe("announce v2 banner", () => {
+  beforeEach(() => {
+    fixtures.config().versions().userTest().userPreferences();
+  });
+
+  it("v2 banner should be visible on the v1 dashboard", () => {
+    fixtures
+      .projects()
+      .entitySearch({ fixture: "kgSearch/emptySearch.json", total: 0 })
+      .getLastVisitedProjects({
+        fixture: "projects/empty-last-visited-projects.json",
+      })
+      .noActiveProjects()
+      .sessionServersEmpty();
+
+    cy.visit("/v1");
+    cy.wait("@getUser");
+    cy.wait("@getDataServiceUser");
+    cy.wait("@getEntities");
+    cy.wait("@getLastVisitedProjects");
+    cy.wait("@getNoActiveProjects");
+
+    cy.getDataCy("announce-v2-banner").should("be.visible");
+
+    // TODO -- go to search, banner should not be visible there
+  });
+
+  it("v2 banner should not be visible outside the v1 dashboard", () => {
+    fixtures
+      .projects()
+      .entitySearch({ fixture: "kgSearch/emptySearch.json", total: 0 })
+      .getLastVisitedProjects({
+        fixture: "projects/empty-last-visited-projects.json",
+      })
+      .noActiveProjects()
+      .sessionServersEmpty();
+
+    cy.visit("/v1/search");
+    cy.wait("@getUser");
+    cy.wait("@getDataServiceUser");
+    cy.wait("@getEntities");
+
+    cy.getDataCy("announce-v2-banner").should("not.exist");
+  });
+});

tests/cypress/e2e/navV2.spec.ts

@@ -18,7 +18,7 @@
 
 import fixtures from "../support/renkulab-fixtures";
 
-describe("View v2 landing page", () => {
+describe("View v2 nav bar", () => {
   beforeEach(() => {
     fixtures.config().versions().userTest();
     cy.visit("/");
@@ -45,3 +45,14 @@ describe("View v2 landing page", () => {
     cy.contains("Create a new project").should("be.visible");
   });
 });
+
+describe("View v1 nav bar", () => {
+  beforeEach(() => {
+    fixtures.config().versions().userTest();
+    cy.visit("/v1");
+  });
+
+  it("check for legacy information", () => {
+    cy.get(".badge.bg-warning").contains("Legacy").should("be.visible");
+  });
+});

tests/cypress/e2e/newSession.spec.ts

@@ -311,8 +311,8 @@ describe("launch sessions, outdated projects", () => {
       .contains("Update the project to start a session.")
       .should("be.visible");
     cy.get("a.btn")
-      .should("have.attr", "href", "/projects/e2e/local-test-project/settings")
       .contains("Settings")
+      .should("have.attr", "href", "/projects/e2e/local-test-project/settings")
       .should("be.visible");
   });
 
@@ -332,8 +332,8 @@ describe("launch sessions, outdated projects", () => {
       .contains("Changes are necessary to start a session.")
       .should("be.visible");
     cy.get("a.btn")
-      .should("have.attr", "href", "/projects/e2e/local-test-project/settings")
       .contains("Settings")
+      .should("have.attr", "href", "/projects/e2e/local-test-project/settings")
       .should("be.visible");
   });