feat: switch #100DaysOfOSS banner with Workspaces banner on feed page (…

…#3216)

components/molecules/AnnouncementCard/announcement-card.tsx

@@ -1,13 +1,15 @@
 import * as AspectRatio from "@radix-ui/react-aspect-ratio";
+import Link from "next/link";
 import React from "react";
 
 interface AnnouncementCardProps {
   title: string;
   description: string;
   bannerSrc: string;
   url: string;
+  cta?: string;
 }
-const AnnouncementCard = ({ title, description, bannerSrc, url }: AnnouncementCardProps) => {
+const AnnouncementCard = ({ title, description, bannerSrc, url, cta = "Learn more" }: AnnouncementCardProps) => {
   const announcementId = `announcement-${Date.now()}`;
 
   return (
@@ -27,13 +29,12 @@ const AnnouncementCard = ({ title, description, bannerSrc, url }: AnnouncementCa
           {title}
         </h1>
         <p className="text-sm font-normal text-light-slate-11 pb-2">{description}</p>
-        <a
+        <Link
           href={url}
-          target="_blank"
           className="flex justify-center py-1.5 border rounded-lg border-light-orange-7 text-light-orange-10 hover:border-light-orange-9 hover:border-2 hover:text-light-orange-10"
         >
-          Learn more
-        </a>
+          {cta}
+        </Link>
       </div>
     </aside>
   );

e2e/homepage.spec.ts

@@ -12,5 +12,7 @@ test("Loads home page (logged out user)", async ({ page }) => {
   await expect(page.getByRole("complementary", { name: "Repositories", exact: true })).toBeVisible();
   await expect(page.getByRole("complementary", { name: "Featured Highlights", exact: true })).toBeVisible();
   await expect(page.getByRole("complementary", { name: "Subscribe to our newsletter", exact: true })).toBeVisible();
-  await expect(page.getByRole("complementary", { name: "#100DaysOfOSS 🚀", exact: true })).toBeVisible();
+  await expect(
+    page.getByRole("complementary", { name: "Track your project with Workspaces!", exact: true })
+  ).toBeVisible();
 });

pages/feed/index.tsx

@@ -199,14 +199,13 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
               />
             )}
             <AnnouncementCard
-              title="#100DaysOfOSS 🚀"
+              title="Track your project with Workspaces!"
               description={
-                "Join us for 100 days of supporting, sharing knowledge, and exploring the open source ecosystem together."
+                "Set up your Workspace to get you and your team access to information about pull requests, issues, and contributors for all your repositories."
               }
-              bannerSrc={
-                "https://user-images.githubusercontent.com/5713670/254358937-8e9aa76d-4ed3-4616-a58a-2283796b10e1.png"
-              }
-              url={"https://dev.to/opensauced/100daysofoss-growing-skills-and-real-world-experience-3o5k"}
+              bannerSrc={"/try-workspaces.png"}
+              url={"/workspaces/new?welcome=true"}
+              cta={"Try it"}
             />
           </div>
         </div>

pages/workspaces/new.tsx

@@ -13,6 +13,8 @@ import { createWorkspace } from "lib/utils/workspace-utils";
 import { WORKSPACE_UPDATED_EVENT } from "components/shared/AppSidebar/AppSidebar";
 import AuthContentWrapper from "components/molecules/AuthContentWrapper/auth-content-wrapper";
 
+const WorkspaceWelcomeModal = dynamic(() => import("components/Workspaces/WorkspaceWelcomeModal"));
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const supabase = createPagesServerClient(context);
   const {
@@ -33,9 +35,11 @@ const NewWorkspace = () => {
   const nameQuery = router.query.name as string;
   const descriptionQuery = router.query.description as string;
   const reposQuery = router.query.repos as string;
+  const welcome = router.query.welcome as string;
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [isSaving, setIsSaving] = useState(false);
+  const [isWelcomeModalOpen, setIsWelcomeModalOpen] = useState(false);
 
   const [trackedReposModalOpen, setTrackedReposModalOpen] = useState(false);
   const [trackedRepos, setTrackedRepos] = useState<Map<string, boolean>>(new Map());
@@ -59,6 +63,12 @@ const NewWorkspace = () => {
     }
   }, [router.query]);
 
+  useEffect(() => {
+    if (welcome) {
+      setIsWelcomeModalOpen(true);
+    }
+  }, [welcome]);
+
   const onCreateWorkspace: ComponentProps<"form">["onSubmit"] = async (event) => {
     event.preventDefault();
     setIsSaving(true);
@@ -190,6 +200,7 @@ const NewWorkspace = () => {
           setTrackedReposModalOpen(false);
         }}
       />
+      <WorkspaceWelcomeModal isOpen={isWelcomeModalOpen} onClose={() => setIsWelcomeModalOpen(false)} />
     </WorkspaceLayout>
   );
 };