feat: refresh explore page to only loading repositories (#4019)

components/molecules/AuthContentWrapper/auth-content-wrapper.stories.tsx

@@ -1,7 +1,6 @@
 import { ComponentStory } from "@storybook/react";
 import AuthContentWrapper from "components/molecules/AuthContentWrapper/auth-content-wrapper";
 
-import Dashboard from "components/organisms/Dashboard/dashboard";
 import Repositories from "components/organisms/Repositories/repositories";
 import ReportsHistory from "components/molecules/ReportsHistory/reports-history";
 
@@ -13,14 +12,6 @@ const storyConfig = {
 
 export default storyConfig;
 
-const AuthContentWrapperTemplateWithDashboard: ComponentStory<typeof AuthContentWrapper> = (args) => (
-  <AuthContentWrapper {...args}>
-    <Dashboard />
-  </AuthContentWrapper>
-);
-
-export const WithDashboard = AuthContentWrapperTemplateWithDashboard.bind({});
-
 const AuthContentWrapperTemplateWithRepositories: ComponentStory<typeof AuthContentWrapper> = (args) => (
   <AuthContentWrapper {...args}>
     <Repositories />

components/molecules/FilterHeader/filter-header.tsx

@@ -3,7 +3,6 @@ import { useRouter } from "next/router";
 import Text from "components/atoms/Typography/text";
 import Title from "components/atoms/Typography/title";
 import ContextThumbnail from "components/atoms/ContextThumbnail/context-thumbnail";
-import SuperativeSelector from "components/molecules/SuperlativeSelector/superlative-selector";
 
 import useFilterOptions from "lib/hooks/useFilterOptions";
 import { captureAnalytics } from "lib/utils/analytics";
@@ -58,13 +57,6 @@ const HeaderFilter = () => {
             icon="topic"
             handleFilterClick={topicRouting}
           />
-          <SuperativeSelector
-            filterOptions={filterOptions}
-            filterValues={filterValues}
-            handleFilterClick={filterBtnRouting}
-            handleCancelClick={cancelFilterRouting}
-            selected={Array.isArray(selectedFilter) ? selectedFilter.join("/") : selectedFilter}
-          />
         </div>
       </div>
     </>

components/molecules/NivoScatterChart/nivo-scatter-chart.tsx

@@ -8,9 +8,10 @@ import humanizeNumber from "lib/utils/humanizeNumber";
 import ToggleOption from "components/atoms/ToggleOption/toggle-option";
 import Title from "components/atoms/Typography/title";
 import ToggleGroup from "components/atoms/ToggleGroup/toggle-group";
-import { PrStatusFilter } from "components/organisms/Dashboard/dashboard";
 import AvatarHoverCard from "components/atoms/Avatar/avatar-hover-card";
 
+export type PrStatusFilter = "open" | "closed" | "all";
+
 export interface ScatterChartDataItems {
   x: string | number;
   y: string | number;

components/molecules/TableHeader/table-header.tsx

@@ -30,9 +30,7 @@ const TableHeader = ({ title, metaInfo, entity, onSearch, layout, onLayoutToggle
 
   const updateSuggestionsDebounced = useDebounce(async () => {
     const req = await fetch(
-      `https://api.github.com/search/repositories?q=${encodeURIComponent(
-        `${searchTerm} topic:${router.query.pageId} in:name`
-      )}`,
+      `https://api.github.com/search/repositories?q=${encodeURIComponent(`${searchTerm} in:name`)}`,
       {
         ...(providerToken
           ? {

components/organisms/ToolsDisplay/tools-display.tsx

@@ -3,8 +3,8 @@ import { captureAnalytics } from "lib/utils/analytics";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
 import { useFetchUser } from "lib/hooks/useFetchUser";
 import Contributors from "../Contributors/contributors";
-import Dashboard from "../Dashboard/dashboard";
 import Activity from "../Activity/activity";
+import Repositories from "../Repositories/repositories";
 
 interface ToolProps {
   tool?: string;
@@ -25,7 +25,7 @@ const Tool = ({ tool, repositories }: ToolProps): JSX.Element => {
 
   switch (tool) {
     case "Dashboard":
-      return <Dashboard repositories={repositories} />;
+      return <Repositories repositories={repositories} personalWorkspaceId={userInfo?.personal_workspace_id} />;
     case "Contributors":
       return <Contributors repositories={repositories} personalWorkspaceId={userInfo?.personal_workspace_id} />;
 

components/organisms/TopNav/top-nav.tsx

@@ -69,7 +69,7 @@ const Nav = ({ className }: { className?: string }) => {
             className={`tracking-tight font-medium text-slate-700 text-sm hover:text-orange-500 transition-all ${getActiveStyle(
               explorePageUrlPattern.test(router.asPath)
             )}`}
-            href={`/explore/topic/${userInterest}/dashboard/filter/recent`}
+            href={`/explore/topic/${userInterest}`}
           >
             Explore
           </Link>

e2e/explore-page.spec.ts

@@ -1,47 +1,6 @@
-import { test, expect, Page } from "@playwright/test";
-
-type TabId = "Dashboard" | "Contributors" | "Activity";
-const TabSelectorNames: Record<TabId, string | RegExp> = {
-  Dashboard: "Dashboard",
-  // The contributors tab has a count which is unknown at the time the test runs as it's a dynamic value.
-  Contributors: /Contributors\s+\d+/,
-  Activity: "Activity",
-};
-
-async function checkExploreTabs(page: Page, selectedTabId: TabId) {
-  await expect(page.getByRole("link", { name: TabSelectorNames["Dashboard"], exact: true })).toBeVisible();
-  await expect(page.getByRole("link", { name: TabSelectorNames["Contributors"] })).toBeVisible();
-  await expect(page.getByRole("link", { name: TabSelectorNames["Activity"], exact: true })).toBeVisible();
-
-  await expect(
-    page.getByRole("tab", { name: TabSelectorNames[selectedTabId], exact: true, selected: true })
-  ).toBeVisible();
-}
+import { test, expect } from "@playwright/test";
 
 test("Loads explore dashboard page", async ({ page }) => {
   await page.goto("/explore/topic/javascript");
-  await checkExploreTabs(page, "Dashboard");
-  await expect(page.getByRole("complementary", { name: "pull request highlights", exact: true })).toBeVisible();
-});
-
-test("Loads explore contributors page", async ({ page }) => {
-  await page.goto("/explore/topic/javascript/contributors");
-  await checkExploreTabs(page, "Contributors");
-
-  // simple smoke test until we have actual tables.
-  await expect(page.getByRole("button", { name: "7d" })).toBeVisible();
-  await expect(page.getByRole("button", { name: "30d" })).toBeVisible();
-  await expect(page.getByRole("button", { name: "3m" })).toBeVisible();
-
-  await expect(page.getByRole("radio", { name: "Contributor list view" })).toBeVisible();
-  await expect(page.getByRole("radio", { name: "Contributor list view" })).toBeChecked();
-  await expect(page.getByRole("radio", { name: "Contributor grid view" })).toBeVisible();
-});
-
-test("Loads explore activity page", async ({ page }) => {
-  await page.goto("/explore/topic/javascript/activity");
-  await checkExploreTabs(page, "Activity");
-
-  // a smoke test to ensure the scatterplot is on the page
-  await expect(page.getByRole("heading", { name: "Contributor Distribution", exact: true })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Connect with GitHub", exact: true })).toBeVisible();
 });

layouts/filter.tsx

@@ -2,31 +2,19 @@ import React from "react";
 
 import Footer from "components/organisms/Footer/footer";
 import Header from "components/organisms/Header/header";
-import Nav from "components/organisms/ToolList/nav";
 import FilterHeader from "components/molecules/FilterHeader/filter-header";
 
-import useNav from "lib/hooks/useNav";
 import { WorkspaceLayout } from "components/Workspaces/WorkspaceLayout";
 import useSession from "lib/hooks/useSession";
 
 const FilterLayout = ({ children }: { children: React.ReactNode }) => {
   const { session } = useSession(true);
-  const { toolList, selectedTool, filterName, selectedFilter, userOrg } = useNav();
 
   return (
     <WorkspaceLayout workspaceId={session ? session.personal_workspace_id : "new"}>
       <Header>
         <FilterHeader />
       </Header>
-      <div className="px-4 lg:px-16">
-        <Nav
-          toolList={toolList}
-          selectedTool={selectedTool && selectedTool.toString()}
-          filterName={filterName}
-          selectedFilter={selectedFilter}
-          username={userOrg}
-        />
-      </div>
       <div className="flex w-full flex-1 flex-col items-center  py-8 bg-light-slate-2">
         <div className="container mx-auto px-2 md:px-16">{children}</div>
       </div>

pages/workspaces/[workspaceId]/repository-insights/[insightId]/dashboard.tsx

@@ -6,11 +6,11 @@ import dynamic from "next/dynamic";
 import SEO from "layouts/SEO/SEO";
 import { WorkspaceLayout } from "components/Workspaces/WorkspaceLayout";
 import HubPageLayout from "layouts/hub-page";
-import Dashboard from "components/organisms/Dashboard/dashboard";
 import { fetchApiData } from "helpers/fetchApiData";
 import { useIsWorkspaceUpgraded } from "lib/hooks/api/useIsWorkspaceUpgraded";
 import WorkspaceBanner from "components/Workspaces/WorkspaceBanner";
 import useSession from "lib/hooks/useSession";
+import Repositories from "components/organisms/Repositories/repositories";
 
 const InsightUpgradeModal = dynamic(() => import("components/Workspaces/InsightUpgradeModal"));
 
@@ -66,7 +66,7 @@ const HubPage = ({ insight, isOwner, ogImage, workspaceId, owners }: InsightPage
       >
         <div className="px-4 py-8 lg:px-16 lg:py-12">
           <HubPageLayout page="dashboard" owners={owners} overLimit={showBanner}>
-            <Dashboard
+            <Repositories
               repositories={repositories}
               personalWorkspaceId={isOwner ? undefined : (session as DbUser)?.personal_workspace_id}
             />