chore: improve github repo search workflow

Author: svedova

src/pages/apps/new/_components/RepoList.tsx

@@ -5,14 +5,15 @@ import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/lab/LoadingButton";
 import SearchIcon from "@mui/icons-material/Search";
+import Typography from "@mui/material/Typography";
 import ArrowRightIcon from "@mui/icons-material/ArrowForwardIos";
 import { useSelectedTeam } from "~/layouts/TopMenu/Teams/actions";
 import { AuthContext } from "~/pages/auth/Auth.context";
-import Typography from "@mui/material/Typography";
 import githubLogo from "~/assets/logos/github-logo.svg";
 import bitbucketLogo from "~/assets/logos/bitbucket-logo.svg";
 import gitlabLogo from "~/assets/logos/gitlab-logo.svg";
 import { insertRepo } from "./actions";
+import { CircularProgress } from "@mui/material";
 
 const logos: Record<Provider, string> = {
   github: githubLogo,
@@ -23,23 +24,23 @@ const logos: Record<Provider, string> = {
 export interface Props {
   repositories: Repo[];
   provider: Provider;
-  loading: boolean;
+  isLoadingList: boolean;
   isLoadingMore: boolean;
-  error?: string;
   hasNextPage: boolean;
   onNextPage: () => void;
+  onSearch?: (term: string) => void;
 }
 
 let filterTimer: NodeJS.Timeout;
 
 export default function RepoList({
   repositories,
   provider,
-  loading,
+  isLoadingList,
   isLoadingMore,
-  error,
   hasNextPage,
   onNextPage,
+  onSearch,
 }: Props) {
   const [filter, setFilter] = useState<string>("");
   const [loadingInsert, setLoadingInsert] = useState("");
@@ -69,33 +70,37 @@ export default function RepoList({
 
   return (
     <>
-      {((repos.length > 0 && !loading) || filter) && (
-        <TextField
-          fullWidth
-          label="Filter repos"
-          variant="filled"
-          placeholder="Filter repos by name"
-          sx={{ mb: 2 }}
-          onChange={e => {
-            setFilter(e.target.value);
-            clearTimeout(filterTimer);
-            filterTimer = setTimeout(() => {
+      <TextField
+        fullWidth
+        label={onSearch ? "Search repositories" : "Filter repositories"}
+        variant="filled"
+        placeholder="Search repositories by name"
+        sx={{ mb: 2 }}
+        autoFocus
+        onChange={e => {
+          clearTimeout(filterTimer);
+          filterTimer = setTimeout(() => {
+            if (onSearch) {
+              onSearch(e.target.value);
+            } else {
               setFilter(e.target.value);
-            }, 250);
-          }}
-          InputLabelProps={{
-            sx: {
-              pl: 1,
-            },
-          }}
-          InputProps={{
+            }
+          }, 250);
+        }}
+        slotProps={{
+          inputLabel: { sx: { pl: 1 } },
+          input: {
             sx: {
               pl: 0.75,
             },
-            endAdornment: <SearchIcon sx={{ width: 24 }} />,
-          }}
-        />
-      )}
+            endAdornment: isLoadingList ? (
+              <CircularProgress size="1rem" />
+            ) : (
+              <SearchIcon sx={{ width: "1rem" }} />
+            ),
+          },
+        }}
+      />
 
       {repos.map(r => (
         <Box

src/pages/apps/new/bitbucket/NewBitbucketApp.tsx

@@ -16,7 +16,7 @@ export default function NewBitbucketApp() {
 
   return (
     <Box maxWidth="md" sx={{ width: "100%", margin: "0 auto" }}>
-      <Card sx={{ width: "100%", mb: 4 }}>
+      <Card sx={{ width: "100%", mb: 4 }} error={error}>
         <CardHeader>
           <Typography>
             <Link
@@ -34,8 +34,7 @@ export default function NewBitbucketApp() {
         <RepoList
           repositories={repos}
           provider="bitbucket"
-          error={error}
-          loading={loading}
+          isLoadingList={loading}
           isLoadingMore={isLoadingMore}
           hasNextPage={hasNextPage}
           onNextPage={() => setPage(page + 1)}

src/pages/apps/new/github/ConnectMoreRepos.spec.tsx

@@ -0,0 +1,51 @@
+import type { RenderResult } from "@testing-library/react";
+import { describe, expect, it, vi, beforeEach, Mock } from "vitest";
+import { fireEvent, render } from "@testing-library/react";
+import ConnectMoreRepos from "./ConnectMoreRepos";
+
+describe("~/pages/apps/new/github/ConnectMoreRepos.tsx", () => {
+  let wrapper: RenderResult;
+  let setRefreshToken: Mock;
+  let setInstallationId: Mock;
+
+  const createWrapper = () => {
+    wrapper = render(
+      <ConnectMoreRepos
+        setInstallationId={setInstallationId}
+        setRefreshToken={setRefreshToken}
+        openPopupURL="my-url"
+      />
+    );
+  };
+
+  beforeEach(() => {
+    setRefreshToken = vi.fn();
+    setInstallationId = vi.fn();
+
+    Object.defineProperty(window, "location", {
+      value: {
+        reload: vi.fn(),
+      },
+    });
+
+    Object.defineProperty(window, "open", {
+      value: vi.fn(),
+    });
+
+    createWrapper();
+  });
+
+  it("should render the button", async () => {
+    expect(wrapper.getByText("Connect more repositories")).toBeTruthy();
+  });
+
+  it("clicking connect more should open a popup so that the user can configure permissions", () => {
+    const button = wrapper.getByText("Connect more repositories");
+    fireEvent.click(button);
+    expect(window.open).toHaveBeenCalledWith(
+      "my-url",
+      "Add repository",
+      "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1000,height=600,left=100,top=100"
+    );
+  });
+});

src/pages/apps/new/github/ConnectMoreRepos.tsx

@@ -0,0 +1,46 @@
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import openPopup from "~/utils/helpers/popup";
+
+interface Props {
+  setInstallationId: (id?: string) => void;
+  setRefreshToken: (token: number) => void;
+  openPopupURL: string;
+}
+
+export default function ConnectMoreRepos({
+  setInstallationId,
+  setRefreshToken,
+  openPopupURL,
+}: Props) {
+  return (
+    <Button
+      color="secondary"
+      variant="contained"
+      onClick={() => {
+        openPopup({
+          url: openPopupURL,
+          title: "Add repository",
+          width: 1000,
+          onClose: () => {
+            setInstallationId(undefined);
+            setRefreshToken(Date.now());
+          },
+        });
+      }}
+    >
+      <Box
+        component="span"
+        sx={{ display: { xs: "none", md: "inline-block" } }}
+      >
+        Connect more repositories
+      </Box>
+      <Box
+        component="span"
+        sx={{ display: { xs: "inline-block", md: "none" } }}
+      >
+        More repos
+      </Box>
+    </Button>
+  );
+}