From bcbf1bb0f6a86d5b8da235b3ef92c92a5d3d6d8b Mon Sep 17 00:00:00 2001
From: shubhamchasing <shubhamchasing@gmail.com>
Date: Thu, 3 Oct 2024 23:09:42 +0530
Subject: [PATCH 01/10] fix: resolve a11y warnings for
 label-has-associated-control rule (#4126)

---
 .../add-contributors-header.tsx               |  3 +-
 components/atoms/Search/search.tsx            |  4 +-
 components/atoms/Select/single-select.tsx     |  3 +
 .../UserSettingsPage/user-settings-page.tsx   | 79 +++++++++++++++++--
 components/shared/AppSidebar/AppSidebar.tsx   |  3 +-
 components/shared/DayRangePicker.tsx          |  3 +-
 components/shared/LimitPicker.tsx             |  3 +-
 7 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/components/AddContributorsHeader/add-contributors-header.tsx b/components/AddContributorsHeader/add-contributors-header.tsx
index 14e07f35e1..7623851a84 100644
--- a/components/AddContributorsHeader/add-contributors-header.tsx
+++ b/components/AddContributorsHeader/add-contributors-header.tsx
@@ -81,9 +81,10 @@ const AddContributorsHeader = ({
         </div>
       </div>
       <div className="flex flex-col w-full gap-2 md:flex-row">
-        <label className="flex w-full flex-col gap-4">
+        <label htmlFor="search-contributors" className="flex w-full flex-col gap-4">
           <span className="sr-only">Search for contributors to add to your list</span>
           <Search
+            id="search-contributors"
             placeholder={`Search for contributors to add to your list`}
             className="!w-full text-sm py-1.5"
             name={"contributors"}
diff --git a/components/atoms/Search/search.tsx b/components/atoms/Search/search.tsx
index b9d4fe922b..738d2b063c 100644
--- a/components/atoms/Search/search.tsx
+++ b/components/atoms/Search/search.tsx
@@ -24,6 +24,7 @@ interface SearchProps {
   onSelect?: (value: string) => void;
   isLoading?: boolean;
   isDisabled?: boolean;
+  id?: string;
 }
 
 const suggestionsStyle = {
@@ -45,6 +46,7 @@ const Search = ({
   isLoading,
   onSelect,
   isDisabled,
+  id,
 }: SearchProps): JSX.Element => {
   const [cursor, setCursor] = useState(-1);
   const [search, setSearch] = useState(value);
@@ -123,7 +125,7 @@ const Search = ({
         name={name}
         value={search}
         type="search"
-        id={name}
+        id={id}
         onChange={handleChange}
         onKeyUp={(e) => {
           if (e.code === "Enter") {
diff --git a/components/atoms/Select/single-select.tsx b/components/atoms/Select/single-select.tsx
index 1672ccdfe5..aae0ea3353 100644
--- a/components/atoms/Select/single-select.tsx
+++ b/components/atoms/Select/single-select.tsx
@@ -15,6 +15,7 @@ interface SingleSelectProps {
   position?: "popper" | "item-aligned";
   isSearchable?: boolean;
   insetLabel?: string;
+  id?: string;
 }
 
 const SingleSelect = ({
@@ -26,6 +27,7 @@ const SingleSelect = ({
   inputPlaceholder,
   isSearchable = false,
   insetLabel,
+  id,
 }: SingleSelectProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState("");
@@ -58,6 +60,7 @@ const SingleSelect = ({
       }}
     >
       <DropdownMenuTrigger
+        id={id}
         data-inset-label={insetLabel}
         className={clsx(
           "flex w-full justify-between md:w-fit text-sm px-3 py-1.5 !border !border-slate-200 rounded-md bg-white data-[state=open]:border-orange-500 min-w-max",
diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
index b348c99bb2..519dcb03dc 100644
--- a/components/organisms/UserSettingsPage/user-settings-page.tsx
+++ b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -336,11 +336,12 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
               </span>
             </div>
 
-            <div className="flex flex-col gap-2">
-              <label className="flex flex-col w-full gap-2">
+            <div id="upgrade" className="flex flex-col gap-2">
+              <label htmlFor="timezone-select" className="flex flex-col w-full gap-2">
                 Time zone
                 <Select onValueChange={(value) => setTimezone(value)} value={timezone}>
                   <SelectTrigger
+                    id="timezone-select"
                     selectIcon={
                       <div className="relative pr-4">
                         <RiArrowUpSLine size={16} className="absolute -top-3" />
@@ -397,9 +398,9 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
               Update Interests
             </Button>
           </div>
-          <div className="flex flex-col gap-6">
+          <fieldset className="flex flex-col gap-6">
             <div className="flex flex-col gap-3">
-              <label className="text-2xl font-normal">Email Preferences</label>
+              <legend className="text-2xl font-normal">Email Preferences</legend>
               <Checkbox
                 onCheckedChange={() => setEmailPreference((prev) => ({ ...prev, display_email: !prev.display_email }))}
                 checked={emailPreference.display_email}
@@ -432,8 +433,9 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
             >
               Update Preferences
             </Button>
-          </div>
+          </fieldset>
           {userInfo && (
+<<<<<<< HEAD
             <form
               name="delete-account"
               action="/api/delete-account"
@@ -466,6 +468,73 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
                 }}
               />
             </form>
+=======
+            <>
+              <div>
+                {!coupon ? (
+                  <div className="flex flex-col order-first gap-6 md:order-last">
+                    <div className="flex flex-col gap-3">
+                      <label htmlFor="verify-account-button" className="text-2xl font-normal">
+                        Developer Pack
+                      </label>
+                      <div className="w-full sm:max-w-80">
+                        <Text>Verify your developer pack eligibilty to get an upgrade!</Text>
+                      </div>
+                    </div>
+                    <DeveloperPackForm
+                      id="verify-account-button"
+                      providerToken={providerToken}
+                      refreshUser={() => {
+                        mutate();
+                        setCoupon("verified");
+                      }}
+                    />
+                  </div>
+                ) : null}
+              </div>
+              <form
+                name="delete-account"
+                action="/api/delete-account"
+                method="POST"
+                className="flex flex-col order-first gap-6 md:order-last p-6 rounded-2xl bg-light-slate-4"
+                ref={deleteFormRef}
+                onSubmit={(e) => {
+                  setIsModalOpen(true);
+                  e.preventDefault();
+                }}
+              >
+                <div className="flex flex-col gap-3">
+                  <label htmlFor="delete-account-button" className="text-2xl font-normal">
+                    Delete Account
+                  </label>
+                  <div className="w-full md:w-96">
+                    <Text>
+                      Please note that account deletion is irreversible. Proceed only if you are certain about this
+                      action.
+                    </Text>
+                  </div>
+                </div>
+                <Button
+                  id="delete-account-button"
+                  type="submit"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  variant="destructive"
+                  className="w-max"
+                >
+                  Delete Account
+                </Button>
+                <DeleteAccountModal
+                  open={isModalOpen}
+                  setOpen={setIsModalOpen}
+                  onDelete={() => {
+                    setIsModalOpen(false);
+                    deleteFormRef.current?.submit();
+                  }}
+                />
+              </form>
+            </>
+>>>>>>> 027aeffd (fix: resolve a11y warnings for label-has-associated-control rule (#4126))
           )}
         </div>
       </div>
diff --git a/components/shared/AppSidebar/AppSidebar.tsx b/components/shared/AppSidebar/AppSidebar.tsx
index 3eff37d9db..a8b56f9a0c 100644
--- a/components/shared/AppSidebar/AppSidebar.tsx
+++ b/components/shared/AppSidebar/AppSidebar.tsx
@@ -105,9 +105,10 @@ export const AppSideBar = ({ workspaceId, hideSidebar, sidebarCollapsed }: AppSi
         <>
           <nav aria-label="sidebar navigation" className="grid gap-4 mt-4 pr-4 pl-2">
             <div className="flex gap-2">
-              <label className="workspace-drop-down flex flex-col w-full gap-2 ml-2">
+              <label htmlFor="workspace-dropdown" className="workspace-drop-down flex flex-col w-full gap-2 ml-2">
                 <span className="sr-only">Workspace</span>
                 <SingleSelect
+                  id="workspace-dropdown"
                   isSearchable={!!user}
                   options={[
                     {
diff --git a/components/shared/DayRangePicker.tsx b/components/shared/DayRangePicker.tsx
index dda69ab374..ac8cbc9a25 100644
--- a/components/shared/DayRangePicker.tsx
+++ b/components/shared/DayRangePicker.tsx
@@ -40,9 +40,10 @@ export const DayRangePicker = ({ onDayRangeChanged }: DayRangePickerProps) => {
   };
 
   return (
-    <label className="w-fit font-semibold">
+    <label htmlFor="day-range-select" className="w-fit font-semibold">
       <span className="sr-only">Range:</span>
       <SingleSelect
+        id="day-range-select"
         insetLabel="Range:"
         onValueChange={onDefaultDayRangeChanged}
         value={`${dayRange}`}
diff --git a/components/shared/LimitPicker.tsx b/components/shared/LimitPicker.tsx
index 350c18c7a5..2172c8b6c6 100644
--- a/components/shared/LimitPicker.tsx
+++ b/components/shared/LimitPicker.tsx
@@ -25,9 +25,10 @@ export const LimitPicker = ({ onLimitChanged }: LimitPickerProps) => {
   };
 
   return (
-    <label className="w-max font-semibold">
+    <label htmlFor="entries-per-page-select" className="w-max font-semibold">
       <span className="sr-only">Limit:</span>
       <SingleSelect
+        id="entries-per-page-select"
         insetLabel="Showing:"
         onValueChange={onDefaultLimitChanged}
         value={`${limit}`}

From 3f479cfbe4a3cc884da6f2a1df06ab18694be800 Mon Sep 17 00:00:00 2001
From: shubhamchasing <shubhamchasing@gmail.com>
Date: Thu, 10 Oct 2024 01:32:52 +0530
Subject: [PATCH 02/10] chore: remove unused add-contributors-header.tsx file

---
 .../add-contributors-header.tsx               | 102 ------------------
 1 file changed, 102 deletions(-)
 delete mode 100644 components/AddContributorsHeader/add-contributors-header.tsx

diff --git a/components/AddContributorsHeader/add-contributors-header.tsx b/components/AddContributorsHeader/add-contributors-header.tsx
deleted file mode 100644
index 7623851a84..0000000000
--- a/components/AddContributorsHeader/add-contributors-header.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { FaPlus } from "react-icons/fa";
-
-import clsx from "clsx";
-
-import { useEffect, useState } from "react";
-
-import Link from "next/link";
-import { MdOutlineArrowBackIos } from "react-icons/md";
-import Button from "components/shared/Button/button";
-import Search from "components/atoms/Search/search";
-import useDebounceTerm from "lib/hooks/useDebounceTerm";
-
-interface AddContributorsHeaderProps {
-  selectedContributorsIds: number[];
-  list: DbUserList;
-  workspaceId?: string;
-  onAddToList?: () => void;
-  loading?: boolean;
-  onSearch: (searchTerm: string | undefined) => void;
-  searchSuggestions?: string[];
-  onSearchSelect?: (username: string) => void;
-}
-
-const AddContributorsHeader = ({
-  selectedContributorsIds,
-  list,
-  workspaceId,
-  onAddToList,
-  loading,
-  onSearch,
-  searchSuggestions,
-  onSearchSelect,
-}: AddContributorsHeaderProps): JSX.Element => {
-  const [contributorSearch, setContributorSearch] = useState("");
-  const debouncedSearchTerm = useDebounceTerm(contributorSearch, 300);
-
-  useEffect(() => {
-    onSearch(debouncedSearchTerm);
-  }, [debouncedSearchTerm]);
-
-  return (
-    <div className="relative flex flex-col justify-between w-full gap-6 py-2">
-      <div className="flex flex-col justify-between items-center w-full md:flex-row">
-        <h1 className="self-start text-2xl flex items-center">
-          <Link
-            className="inline-block p-3 mr-2 border rounded-lg cursor-pointer bg-light-slate-1"
-            href={
-              workspaceId ? `/workspaces/${workspaceId}/contributor-insights/${list.id}/edit` : `/lists/${list.id}/edit`
-            }
-          >
-            <MdOutlineArrowBackIos title="Go To Insight Page" className="text-lg text-light-slate-10" />
-          </Link>
-          {list.name}
-        </h1>
-        <div className="flex justify-between gap-4 header-info max-sm:mt-4 w-full md:w-fit ">
-          <div className="flex items-center gap-2">
-            <span
-              className={clsx(
-                "w-max min-w-[1.4rem] h-6  p-3 text-sm items-center flex place-content-center rounded-full",
-                selectedContributorsIds.length > 0 ? "bg-sauced-orange text-white" : "bg-light-slate-5 text-slate-400"
-              )}
-            >
-              {selectedContributorsIds.length}
-            </span>
-            <p className="text-light-slate-9">
-              <span className="sr-only md:not-sr-only">Contributors</span> Selected
-            </p>
-          </div>
-          <Button
-            loading={loading}
-            disabled={selectedContributorsIds.length === 0 || loading ? true : false}
-            className={clsx(
-              "bg-sauced-orange !text-white max-md:self-end",
-              selectedContributorsIds.length === 0 && "!bg-slate-300 !text-slate-100"
-            )}
-            variant="text"
-            onClick={onAddToList}
-          >
-            Add to List <FaPlus className="ml-2 text-lg" />
-          </Button>
-        </div>
-      </div>
-      <div className="flex flex-col w-full gap-2 md:flex-row">
-        <label htmlFor="search-contributors" className="flex w-full flex-col gap-4">
-          <span className="sr-only">Search for contributors to add to your list</span>
-          <Search
-            id="search-contributors"
-            placeholder={`Search for contributors to add to your list`}
-            className="!w-full text-sm py-1.5"
-            name={"contributors"}
-            onChange={(value) => setContributorSearch(value)}
-            suggestions={searchSuggestions}
-            onSearch={onSearch}
-            onSelect={onSearchSelect}
-          />
-        </label>
-      </div>
-    </div>
-  );
-};
-
-export default AddContributorsHeader;

From f65b10c5e073d79454e8fe300b13db7d6f167982 Mon Sep 17 00:00:00 2001
From: shubhamchasing <shubhamchasing@gmail.com>
Date: Sun, 13 Oct 2024 07:09:42 +0530
Subject: [PATCH 03/10] fix: add sr-only label to Search component

---
 components/Workspaces/SearchReposTable.tsx             |  8 +++++++-
 components/Workspaces/SearchedContributorsTable.tsx    |  8 +++++++-
 .../SearchByContributorsStep.tsx                       |  1 +
 .../Workspaces/TrackedRepoWizard/SearchByReposStep.tsx |  1 +
 .../Workspaces/TrackedRepoWizard/SearchOrgStep.tsx     |  1 +
 .../workspace-members-config.tsx                       |  1 +
 components/atoms/Search/search.tsx                     | 10 +++++-----
 .../contributor-highlight-card.tsx                     |  1 +
 .../molecules/HighlightInput/highlight-input-form.tsx  |  1 +
 .../HubContributorsHeader/hub-contributors-header.tsx  |  1 +
 components/molecules/TableHeader/table-header.tsx      |  1 +
 .../TeamMembersConfig/team-members-config.tsx          |  1 +
 components/organisms/InsightPage/InsightPage.tsx       |  1 +
 .../contributor-insights/[listId]/highlights.tsx       |  1 +
 14 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/components/Workspaces/SearchReposTable.tsx b/components/Workspaces/SearchReposTable.tsx
index 340359745b..6615e51b54 100644
--- a/components/Workspaces/SearchReposTable.tsx
+++ b/components/Workspaces/SearchReposTable.tsx
@@ -62,7 +62,13 @@ export const SearchedReposTable = ({
                   event.preventDefault;
                 }}
               >
-                <Search placeholder="Filter repositories" className="w-full" name="query" onChange={onFilter} />
+                <Search
+                  placeholder="Filter repositories"
+                  labelText="Filter repositories from the list"
+                  className="w-full"
+                  name="query"
+                  onChange={onFilter}
+                />
               </form>
             </TableHead>
           </TableRow>
diff --git a/components/Workspaces/SearchedContributorsTable.tsx b/components/Workspaces/SearchedContributorsTable.tsx
index 7c4383a9e5..ff66e78ad0 100644
--- a/components/Workspaces/SearchedContributorsTable.tsx
+++ b/components/Workspaces/SearchedContributorsTable.tsx
@@ -43,7 +43,13 @@ export const SearchedContributorsTable = ({
                   event.preventDefault;
                 }}
               >
-                <Search placeholder="Filter contributors" className="w-full" name="query" onChange={onFilter} />
+                <Search
+                  placeholder="Filter contributors"
+                  labelText="Filter contributors from the list"
+                  className="w-full"
+                  name="query"
+                  onChange={onFilter}
+                />
               </form>
             </TableHead>
           </TableRow>
diff --git a/components/Workspaces/TrackedContributorsWizard/SearchByContributorsStep.tsx b/components/Workspaces/TrackedContributorsWizard/SearchByContributorsStep.tsx
index c0cc614b40..193624ef04 100644
--- a/components/Workspaces/TrackedContributorsWizard/SearchByContributorsStep.tsx
+++ b/components/Workspaces/TrackedContributorsWizard/SearchByContributorsStep.tsx
@@ -81,6 +81,7 @@ export const SearchByContributorsStep = ({
       >
         <Search
           placeholder="Search contributors"
+          labelText="Search contributors"
           className="w-full"
           isLoading={searchIsLoading}
           name="query"
diff --git a/components/Workspaces/TrackedRepoWizard/SearchByReposStep.tsx b/components/Workspaces/TrackedRepoWizard/SearchByReposStep.tsx
index a7c5cf9689..c45d9f4e9f 100644
--- a/components/Workspaces/TrackedRepoWizard/SearchByReposStep.tsx
+++ b/components/Workspaces/TrackedRepoWizard/SearchByReposStep.tsx
@@ -66,6 +66,7 @@ export const SearchByReposStep = ({
       >
         <Search
           placeholder="Search repositories"
+          labelText="Search repositories"
           className="w-full"
           isLoading={searchIsLoading}
           name="query"
diff --git a/components/Workspaces/TrackedRepoWizard/SearchOrgStep.tsx b/components/Workspaces/TrackedRepoWizard/SearchOrgStep.tsx
index 1880e1977d..98ce5c3323 100644
--- a/components/Workspaces/TrackedRepoWizard/SearchOrgStep.tsx
+++ b/components/Workspaces/TrackedRepoWizard/SearchOrgStep.tsx
@@ -27,6 +27,7 @@ export const SearchOrgStep = ({ onSelectOrg, onSearch, orgs }: SearchOrgStepProp
       >
         <Search
           placeholder="Search your organizations"
+          labelText="Search your organizations"
           className="w-full"
           name="query"
           onChange={(event) => {
diff --git a/components/Workspaces/WorkspaceMembersConfig/workspace-members-config.tsx b/components/Workspaces/WorkspaceMembersConfig/workspace-members-config.tsx
index 207a6ef864..65f2c92863 100644
--- a/components/Workspaces/WorkspaceMembersConfig/workspace-members-config.tsx
+++ b/components/Workspaces/WorkspaceMembersConfig/workspace-members-config.tsx
@@ -62,6 +62,7 @@ const WorkspaceMembersConfig = ({
             value={username}
             onChange={(value) => handleChange(value)}
             placeholder="Enter username"
+            labelText="Enter full username"
             name="search"
             className="flex-1 text-base"
           />
diff --git a/components/atoms/Search/search.tsx b/components/atoms/Search/search.tsx
index 738d2b063c..8444ab62a0 100644
--- a/components/atoms/Search/search.tsx
+++ b/components/atoms/Search/search.tsx
@@ -24,7 +24,7 @@ interface SearchProps {
   onSelect?: (value: string) => void;
   isLoading?: boolean;
   isDisabled?: boolean;
-  id?: string;
+  labelText: string;
 }
 
 const suggestionsStyle = {
@@ -46,7 +46,7 @@ const Search = ({
   isLoading,
   onSelect,
   isDisabled,
-  id,
+  labelText,
 }: SearchProps): JSX.Element => {
   const [cursor, setCursor] = useState(-1);
   const [search, setSearch] = useState(value);
@@ -113,11 +113,12 @@ const Search = ({
   // using min-w-[15rem] to take into account the width of the X icon when it gets rendered
   // to avoid the search input from expanding when someone starts typing.
   return (
-    <div
+    <label
       className={`${
         className && className
       } flex bg-white py-1 px-3 shadow-input border transition focus-within:ring focus-within:border-orange-500 focus-within:ring-orange-100 rounded-lg ring-light-slate-6 items-center relative min-w-[15rem]`}
     >
+      <span className="sr-only">{labelText}</span>
       <FaSearch className="text-light-slate-9" fontSize={16} onClick={handleOnSearch} />
       <input
         className="w-full pl-2 placeholder:text-sm focus:outline-none placeholder:text-slate-400 disabled:cursor-not-allowed"
@@ -125,7 +126,6 @@ const Search = ({
         name={name}
         value={search}
         type="search"
-        id={id}
         onChange={handleChange}
         onKeyUp={(e) => {
           if (e.code === "Enter") {
@@ -178,7 +178,7 @@ const Search = ({
           )}
         </>
       )}
-    </div>
+    </label>
   );
 };
 export default Search;
diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
index bc62c3797a..a1aa47fa63 100644
--- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
+++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -794,6 +794,7 @@ const ContributorHighlightCard = ({
                       <Search
                         isLoading={tagRepoSearchLoading}
                         placeholder="Repository Full Name (ex: open-sauced/open-sauced)"
+                        labelText="Search repository by full name (ex: open-sauced/open-sauced)"
                         className="!w-full text-md text-gra"
                         name={"query"}
                         suggestions={repoTagSuggestions}
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
index 5e075b9170..8381b81573 100644
--- a/components/molecules/HighlightInput/highlight-input-form.tsx
+++ b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -815,6 +815,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
           <Search
             isLoading={tagRepoSearchLoading}
             placeholder="Repository Full Name (ex: open-sauced/open-sauced)"
+            labelText="Search repository by full name (ex: open-sauced/open-sauced)"
             className="text-sm font-normal !w-full px-2"
             name={"query"}
             suggestions={repoTagSuggestions}
diff --git a/components/molecules/HubContributorsHeader/hub-contributors-header.tsx b/components/molecules/HubContributorsHeader/hub-contributors-header.tsx
index ea80979c06..d652dc042a 100644
--- a/components/molecules/HubContributorsHeader/hub-contributors-header.tsx
+++ b/components/molecules/HubContributorsHeader/hub-contributors-header.tsx
@@ -91,6 +91,7 @@ const HubContributorsHeader = ({
         <div className="flex w-full">
           <Search
             placeholder={`Search for contributors to add to your list`}
+            labelText="Search for contributors to add to your list"
             className="!w-full text-sm py-1.5"
             name={"contributors"}
             onChange={(value) => setContributorSearch(value)}
diff --git a/components/molecules/TableHeader/table-header.tsx b/components/molecules/TableHeader/table-header.tsx
index f440cd7b2e..e0b59a92bc 100644
--- a/components/molecules/TableHeader/table-header.tsx
+++ b/components/molecules/TableHeader/table-header.tsx
@@ -88,6 +88,7 @@ const TableHeader = ({ title, metaInfo, entity, onSearch, layout, onLayoutToggle
         {onSearch ? (
           <Search
             placeholder={`Search ${title}`}
+            labelText={`Search ${title}`}
             className="max-w-full text-sm py-1.5"
             name={"query"}
             onSearch={onSearch}
diff --git a/components/molecules/TeamMembersConfig/team-members-config.tsx b/components/molecules/TeamMembersConfig/team-members-config.tsx
index 88bd98a44a..93686a15d6 100644
--- a/components/molecules/TeamMembersConfig/team-members-config.tsx
+++ b/components/molecules/TeamMembersConfig/team-members-config.tsx
@@ -68,6 +68,7 @@ const TeamMembersConfig = ({
           value={email}
           onChange={(value) => handleChange(value)}
           placeholder="Enter email address"
+          labelText="Enter email address"
           name="search"
           className="flex-1 text-base"
         />
diff --git a/components/organisms/InsightPage/InsightPage.tsx b/components/organisms/InsightPage/InsightPage.tsx
index 5d9ab874d4..6cdebab0e5 100644
--- a/components/organisms/InsightPage/InsightPage.tsx
+++ b/components/organisms/InsightPage/InsightPage.tsx
@@ -581,6 +581,7 @@ const InsightPage = ({ edit, insight, pageRepos, workspaceId }: InsightPageProps
           <Search
             isLoading={createLoading}
             placeholder="Repository URL or Full Name (ex: open-sauced/open-sauced)"
+            labelText="Repository URL or Full Name (ex: open-sauced/open-sauced)"
             className="!w-full text-md text-gra"
             name={"query"}
             value={repoSearchTerm}
diff --git a/pages/workspaces/[workspaceId]/contributor-insights/[listId]/highlights.tsx b/pages/workspaces/[workspaceId]/contributor-insights/[listId]/highlights.tsx
index fe8c60eed7..e5b35c5181 100644
--- a/pages/workspaces/[workspaceId]/contributor-insights/[listId]/highlights.tsx
+++ b/pages/workspaces/[workspaceId]/contributor-insights/[listId]/highlights.tsx
@@ -177,6 +177,7 @@ const Highlights = ({ list, workspaceId, numberOfContributors, isOwner, highligh
                 }}
                 isDisabled={data.length === 0 && !contributor}
                 placeholder="Search contributors"
+                labelText="Search contributors"
                 className="!w-full"
                 name="helo"
               />

From d47a3860cfec1216bebf9e9c777126a1e48a1db2 Mon Sep 17 00:00:00 2001
From: shubhamchasing <shubhamchasing@gmail.com>
Date: Wed, 16 Oct 2024 16:56:17 +0530
Subject: [PATCH 04/10] fix: replace <label> with <h2>

---
 .../UserSettingsPage/user-settings-page.tsx    | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
index 519dcb03dc..cbca480107 100644
--- a/components/organisms/UserSettingsPage/user-settings-page.tsx
+++ b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -474,15 +474,12 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
                 {!coupon ? (
                   <div className="flex flex-col order-first gap-6 md:order-last">
                     <div className="flex flex-col gap-3">
-                      <label htmlFor="verify-account-button" className="text-2xl font-normal">
-                        Developer Pack
-                      </label>
+                      <h2 className="text-2xl font-normal tracking-normal">Developer Pack</h2>
                       <div className="w-full sm:max-w-80">
                         <Text>Verify your developer pack eligibilty to get an upgrade!</Text>
                       </div>
                     </div>
                     <DeveloperPackForm
-                      id="verify-account-button"
                       providerToken={providerToken}
                       refreshUser={() => {
                         mutate();
@@ -504,9 +501,7 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
                 }}
               >
                 <div className="flex flex-col gap-3">
-                  <label htmlFor="delete-account-button" className="text-2xl font-normal">
-                    Delete Account
-                  </label>
+                  <h2 className="text-2xl font-normal tracking-normal">Delete Account</h2>
                   <div className="w-full md:w-96">
                     <Text>
                       Please note that account deletion is irreversible. Proceed only if you are certain about this
@@ -514,14 +509,7 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
                     </Text>
                   </div>
                 </div>
-                <Button
-                  id="delete-account-button"
-                  type="submit"
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  variant="destructive"
-                  className="w-max"
-                >
+                <Button type="submit" rel="noopener noreferrer" target="_blank" variant="destructive" className="w-max">
                   Delete Account
                 </Button>
                 <DeleteAccountModal

From f938dc34fa06b82f04381eede26f22b7f2cf0dfa Mon Sep 17 00:00:00 2001
From: shubhamchasing <shubhamchasing@gmail.com>
Date: Mon, 28 Oct 2024 23:44:23 +0530
Subject: [PATCH 05/10] fix: add sr-only label to SingleSelect component and
 make necessary changes

---
 components/Contributors/AddToContributorInsightDrawer.tsx | 2 ++
 components/Contributors/AddToContributorInsightModal.tsx  | 2 ++
 components/Repositories/AddToWorkspaceDrawer.tsx          | 1 +
 components/Repositories/AddToWorkspaceModal.tsx           | 1 +
 components/atoms/Select/single-select.tsx                 | 6 +++---
 components/shared/AppSidebar/AppSidebar.tsx               | 7 +++----
 components/shared/DayRangePicker.tsx                      | 7 +++----
 components/shared/LimitPicker.tsx                         | 7 +++----
 8 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/components/Contributors/AddToContributorInsightDrawer.tsx b/components/Contributors/AddToContributorInsightDrawer.tsx
index 1acb2ccf9d..b10b76cc90 100644
--- a/components/Contributors/AddToContributorInsightDrawer.tsx
+++ b/components/Contributors/AddToContributorInsightDrawer.tsx
@@ -135,6 +135,7 @@ export default function AddToContributorInsightDrawer({
                 })),
               ]}
               value={selectedInsight ?? "new"}
+              labelText="Select a workspace"
               placeholder="Select a workspace"
               onValueChange={(value) => {
                 setSelectedInsight(value);
@@ -154,6 +155,7 @@ export default function AddToContributorInsightDrawer({
                   })),
                 ]}
                 value={workspaceId}
+                labelText="Select a workspace"
                 placeholder="Select a workspace"
                 onValueChange={(value) => {
                   setWorkspaceId(value);
diff --git a/components/Contributors/AddToContributorInsightModal.tsx b/components/Contributors/AddToContributorInsightModal.tsx
index a5dc7d82e2..7848cfe6ae 100644
--- a/components/Contributors/AddToContributorInsightModal.tsx
+++ b/components/Contributors/AddToContributorInsightModal.tsx
@@ -136,6 +136,7 @@ export default function AddToContributorInsightModal({
                       })),
                     ]}
                     value={selectedInsight ?? "new"}
+                    labelText="Select a workspace"
                     placeholder="Select a workspace"
                     onValueChange={(value) => {
                       setSelectedInsight(value);
@@ -155,6 +156,7 @@ export default function AddToContributorInsightModal({
                         })),
                       ]}
                       value={workspaceId}
+                      labelText="Select a workspace"
                       placeholder="Select a workspace"
                       onValueChange={(value) => {
                         setWorkspaceId(value);
diff --git a/components/Repositories/AddToWorkspaceDrawer.tsx b/components/Repositories/AddToWorkspaceDrawer.tsx
index 0f212d6fd4..930d6eb496 100644
--- a/components/Repositories/AddToWorkspaceDrawer.tsx
+++ b/components/Repositories/AddToWorkspaceDrawer.tsx
@@ -137,6 +137,7 @@ export default function AddToWorkspaceDrawer({ repository, type = "repo" }: AddT
               ]}
               position="popper"
               value={workspaceId ?? "new"}
+              labelText="Select a workspace"
               placeholder="Select a workspace"
               onValueChange={(value) => {
                 setWorkspaceId(value);
diff --git a/components/Repositories/AddToWorkspaceModal.tsx b/components/Repositories/AddToWorkspaceModal.tsx
index 7c7c2fe794..b880e4f9e2 100644
--- a/components/Repositories/AddToWorkspaceModal.tsx
+++ b/components/Repositories/AddToWorkspaceModal.tsx
@@ -131,6 +131,7 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal,
                           })),
                         ]}
                         value={workspaceId ?? "new"}
+                        labelText="Select a workspace"
                         placeholder="Select a workspace"
                         onValueChange={(value) => {
                           setWorkspaceId(value);
diff --git a/components/atoms/Select/single-select.tsx b/components/atoms/Select/single-select.tsx
index aae0ea3353..75e81afb47 100644
--- a/components/atoms/Select/single-select.tsx
+++ b/components/atoms/Select/single-select.tsx
@@ -15,7 +15,7 @@ interface SingleSelectProps {
   position?: "popper" | "item-aligned";
   isSearchable?: boolean;
   insetLabel?: string;
-  id?: string;
+  labelText: string;
 }
 
 const SingleSelect = ({
@@ -27,7 +27,7 @@ const SingleSelect = ({
   inputPlaceholder,
   isSearchable = false,
   insetLabel,
-  id,
+  labelText,
 }: SingleSelectProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState("");
@@ -60,13 +60,13 @@ const SingleSelect = ({
       }}
     >
       <DropdownMenuTrigger
-        id={id}
         data-inset-label={insetLabel}
         className={clsx(
           "flex w-full justify-between md:w-fit text-sm px-3 py-1.5 !border !border-slate-200 rounded-md bg-white data-[state=open]:border-orange-500 min-w-max",
           insetLabel && `before:content-[attr(data-inset-label)] before:mr-1 before:font-normal before:text-slate-500`
         )}
       >
+        <span className="sr-only">{labelText}</span>
         <Tooltip content={current?.label ?? placeholder}>
           <div className="flex items-center w-44 ">
             <p className="flex-grow text-start truncate">{current?.label ?? placeholder}</p>
diff --git a/components/shared/AppSidebar/AppSidebar.tsx b/components/shared/AppSidebar/AppSidebar.tsx
index a8b56f9a0c..b039ca9f23 100644
--- a/components/shared/AppSidebar/AppSidebar.tsx
+++ b/components/shared/AppSidebar/AppSidebar.tsx
@@ -105,10 +105,9 @@ export const AppSideBar = ({ workspaceId, hideSidebar, sidebarCollapsed }: AppSi
         <>
           <nav aria-label="sidebar navigation" className="grid gap-4 mt-4 pr-4 pl-2">
             <div className="flex gap-2">
-              <label htmlFor="workspace-dropdown" className="workspace-drop-down flex flex-col w-full gap-2 ml-2">
-                <span className="sr-only">Workspace</span>
+              <div className="workspace-drop-down flex flex-col w-full gap-2 ml-2">
                 <SingleSelect
-                  id="workspace-dropdown"
+                  labelText="Select a workspace"
                   isSearchable={!!user}
                   options={[
                     {
@@ -147,7 +146,7 @@ export const AppSideBar = ({ workspaceId, hideSidebar, sidebarCollapsed }: AppSi
                     router.push(`/workspaces/${value}`);
                   }}
                 />
-              </label>
+              </div>
               <button onClick={hideSidebar} className="hover:bg-slate-50 p-2 rounded-md">
                 <LuArrowLeftToLine className="w-4 h-4 text-gray-500" />
               </button>
diff --git a/components/shared/DayRangePicker.tsx b/components/shared/DayRangePicker.tsx
index ac8cbc9a25..3d2b1ad18a 100644
--- a/components/shared/DayRangePicker.tsx
+++ b/components/shared/DayRangePicker.tsx
@@ -40,15 +40,14 @@ export const DayRangePicker = ({ onDayRangeChanged }: DayRangePickerProps) => {
   };
 
   return (
-    <label htmlFor="day-range-select" className="w-fit font-semibold">
-      <span className="sr-only">Range:</span>
+    <div className="w-fit font-semibold">
       <SingleSelect
-        id="day-range-select"
+        labelText="Day range select"
         insetLabel="Range:"
         onValueChange={onDefaultDayRangeChanged}
         value={`${dayRange}`}
         options={dayRanges}
       />
-    </label>
+    </div>
   );
 };
diff --git a/components/shared/LimitPicker.tsx b/components/shared/LimitPicker.tsx
index 2172c8b6c6..10f1b92e84 100644
--- a/components/shared/LimitPicker.tsx
+++ b/components/shared/LimitPicker.tsx
@@ -25,15 +25,14 @@ export const LimitPicker = ({ onLimitChanged }: LimitPickerProps) => {
   };
 
   return (
-    <label htmlFor="entries-per-page-select" className="w-max font-semibold">
-      <span className="sr-only">Limit:</span>
+    <div className="w-max font-semibold">
       <SingleSelect
-        id="entries-per-page-select"
+        labelText="Entries per page select"
         insetLabel="Showing:"
         onValueChange={onDefaultLimitChanged}
         value={`${limit}`}
         options={limitOptions}
       />
-    </label>
+    </div>
   );
 };

From d2c9fcbcb8fe7ea577b865f0a96b2c5b8bddfe50 Mon Sep 17 00:00:00 2001
From: shubhamchasing <shubhamchasing@gmail.com>
Date: Wed, 30 Oct 2024 19:15:53 +0530
Subject: [PATCH 06/10] fix: add missing labelText prop

---
 components/atoms/Select/single.select.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/atoms/Select/single.select.stories.tsx b/components/atoms/Select/single.select.stories.tsx
index e6a2072862..c32ef320de 100644
--- a/components/atoms/Select/single.select.stories.tsx
+++ b/components/atoms/Select/single.select.stories.tsx
@@ -38,6 +38,7 @@ const baseProps: ComponentProps<typeof SingleSelect> = {
     // eslint-disable-next-line no-console
     console.log(value);
   },
+  labelText: "Accessible label",
 };
 
 export const Default: Story = {

From 2c86e3e6cbf46d96be32a1a3099ba1d8fe38502c Mon Sep 17 00:00:00 2001
From: shubhamchasing <shubhamchasing@gmail.com>
Date: Wed, 30 Oct 2024 20:12:06 +0530
Subject: [PATCH 07/10] chore: remove unused InsightPage.tsx file

---
 .../organisms/InsightPage/InsightPage.tsx     | 724 ------------------
 1 file changed, 724 deletions(-)
 delete mode 100644 components/organisms/InsightPage/InsightPage.tsx

diff --git a/components/organisms/InsightPage/InsightPage.tsx b/components/organisms/InsightPage/InsightPage.tsx
deleted file mode 100644
index 6cdebab0e5..0000000000
--- a/components/organisms/InsightPage/InsightPage.tsx
+++ /dev/null
@@ -1,724 +0,0 @@
-import { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
-
-import { useDebounce } from "rooks";
-import Button from "components/shared/Button/button";
-import TextInput from "components/atoms/TextInput/text-input";
-import Text from "components/atoms/Typography/text";
-import Title from "components/atoms/Typography/title";
-import RepositoriesCart from "components/organisms/RepositoriesCart/repositories-cart";
-import RepositoryCartItem from "components/molecules/ReposoitoryCartItem/repository-cart-item";
-import RepoNotIndexed from "components/organisms/Repositories/repository-not-indexed";
-import useRepositories from "lib/hooks/api/useRepositories";
-
-import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
-import { generateRepoParts, getAvatarByUsername } from "lib/utils/github";
-import Error from "components/atoms/Error/Error";
-import Search from "components/atoms/Search/search";
-import { useToast } from "lib/hooks/useToast";
-import { useFetchInsightRecommendedRepositories } from "lib/hooks/useFetchOrgRecommendations";
-import { RepoCardProfileProps } from "components/molecules/RepoCardProfile/repo-card-profile";
-import SingleSelect from "components/atoms/Select/single-select";
-import { fetchApiData } from "helpers/fetchApiData";
-import { useGetUserWorkspaces } from "lib/hooks/api/useGetUserWorkspaces";
-import SuggestedRepositoriesList from "../SuggestedRepoList/suggested-repo-list";
-
-// lazy import DeleteInsightPageModal and TeamMembersConfig component to optimize bundle size they don't load on initial render
-const DeleteInsightPageModal = dynamic(() => import("./DeleteInsightPageModal"));
-const TransferInsightModal = dynamic(() => import("components/Workspaces/TransferInsightModal"));
-
-const enum RepoLookupError {
-  Initial = 0,
-  NotIndexed = 1,
-  Invalid = 3,
-  Error = 4,
-}
-
-const enum OrgLookupError {
-  Initial = 0,
-  Invalid = 1,
-  Error = 2,
-}
-
-interface InsightPageProps {
-  edit?: boolean;
-  insight?: DbUserInsight;
-  pageRepos?: DbRepo[];
-  workspaceId?: string;
-}
-const staticSuggestedRepos: RepoCardProfileProps[] = [
-  {
-    avatar: "https://avatars.githubusercontent.com/u/57568598?s=200&v=4",
-    prCount: 8,
-    repoName: "app",
-    issueCount: 87,
-    orgName: "open-sauced",
-  },
-  {
-    avatar: "https://avatars.githubusercontent.com/u/59704711?s=200&v=4",
-    prCount: 26,
-    repoName: "cli",
-    issueCount: 398,
-    orgName: "cli",
-  },
-  {
-    avatar: "https://avatars.githubusercontent.com/u/42048915?s=200&v=4",
-    prCount: 100,
-    repoName: "deno",
-    issueCount: 1200,
-    orgName: "denoland",
-  },
-];
-
-const InsightPage = ({ edit, insight, pageRepos, workspaceId }: InsightPageProps) => {
-  const { sessionToken, providerToken, user } = useSupabaseAuth();
-
-  const { toast } = useToast();
-  const router = useRouter();
-  const pageHref = router.asPath;
-  const [reposIds, setReposIds] = useState<number[]>([]);
-  const { data: repoListData } = useRepositories(reposIds);
-
-  useEffect(() => {
-    const searchParams = new URLSearchParams(pageHref.substring(pageHref.indexOf("?")));
-    if (router.query.selectedRepos) {
-      setRepos(JSON.parse(router.query.selectedRepos as string) || []);
-    } else if (searchParams.has("selectedReposIDs")) {
-      setReposIds(JSON.parse(searchParams.get("selectedReposIDs") as string) || []);
-      setRepos(repoListData);
-    }
-  }, [repoListData, router.query.selectedRepos, pageHref]);
-
-  const { data: recommendedRepos, isLoading } = useFetchInsightRecommendedRepositories();
-
-  // Loading States
-  const [deleteLoading, setDeleteLoading] = useState(false);
-  const [createLoading, setCreateLoading] = useState(false);
-  const [addRepoLoading, setAddRepoLoading] = useState({ repoName: "", isAddedFromCart: false, isLoading: false });
-
-  const [name, setName] = useState(insight?.name || "");
-  const [organization, setOrganization] = useState("");
-  const [isNameValid, setIsNameValid] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const [repos, setRepos] = useState<DbRepo[]>([]);
-  const [repoHistory, setRepoHistory] = useState<DbRepo[]>([]);
-  const [addRepoError, setAddRepoError] = useState<RepoLookupError>(RepoLookupError.Initial);
-  const [syncOrganizationError, setSyncOrganizationError] = useState<OrgLookupError>(OrgLookupError.Initial);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [repoSearchTerm, setRepoSearchTerm] = useState<string>("");
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-
-  const { data: workspacesData, isLoading: workspacesLoading } = useGetUserWorkspaces();
-  const [options, setOptions] = useState<{ label: string; value: string }[]>([]);
-  const [selectedWorkspace, setSelectedWorkspace] = useState<string>(workspaceId!);
-  const [isTransferModalOpen, setIsTransferModalOpen] = useState(false);
-
-  useEffect(() => {
-    if (workspaceId && !workspacesLoading) {
-      const filteredWorkspaces = workspacesData?.data?.filter((workspace) =>
-        workspace.members.find(
-          (member) => member.user_id === Number(user?.user_metadata.sub) && ["owner", "editor"].includes(member.role)
-        )
-      );
-
-      setOptions(
-        Array.from(filteredWorkspaces!, (workspace) => {
-          return { label: workspace.name, value: workspace.id };
-        })
-      );
-    }
-  }, [workspacesData]);
-
-  const recommendedReposWithoutSelected =
-    recommendedRepos && recommendedRepos.length > 0
-      ? recommendedRepos
-          .filter((repo) => !repos.find((selectedRepo) => selectedRepo.id === repo.id))
-          .map((repo) => {
-            const [orgName, repoName] = repo.full_name.split("/");
-            const totalPrs = (repo.open_prs_count || 0) + (repo.closed_prs_count || 0) + (repo.merged_prs_count || 0);
-            const avatar = getAvatarByUsername(orgName, 60);
-            const totalIssues = repo.issues || 0;
-
-            return {
-              orgName,
-              repoName,
-              totalPrs,
-              avatar,
-              totalIssues,
-            };
-          })
-          .slice(0, 3)
-      : staticSuggestedRepos;
-
-  useEffect(() => {
-    if (pageRepos) {
-      setRepos(pageRepos);
-    }
-  }, [pageRepos, insight?.is_public]);
-
-  const reposRemoved = repoHistory.map((repo) => {
-    const [repoOwner, repoName] = repo.full_name.split("/");
-    const totalPrs =
-      (repo.open_prs_count || 0) +
-      (repo.closed_prs_count || 0) +
-      (repo.merged_prs_count || 0) +
-      (repo.draft_prs_count || 0);
-
-    return {
-      orgName: repoOwner,
-      repoName: repoName,
-      totalPrs,
-      avatar: getAvatarByUsername(repoOwner, 60),
-      handleRemoveItem: () => {},
-    };
-  });
-
-  const validateName = (name: string) => {
-    if (!name || name.trim().length <= 3) return false;
-
-    return true;
-  };
-
-  const handleOnNameChange = (value: string) => {
-    setName(value);
-    setIsNameValid(validateName(value));
-  };
-
-  const handleOnOrganizationChange = (value: string) => {
-    setOrganization(value);
-  };
-
-  const disableCreateButton = () => {
-    if ((insight?.name && validateName(name)) || (repos.length && validateName(name))) return false;
-    if (submitted) return true;
-    if (!isNameValid) return true;
-
-    return false;
-  };
-
-  const handleCreateInsightPage = async () => {
-    setSubmitted(true);
-    setCreateLoading(true);
-
-    if (!sessionToken || !user) {
-      toast({ description: "You must be logged in to create a page", variant: "danger" });
-      return;
-    }
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/${workspaceId ? `workspaces/${workspaceId}` : user}/insights`,
-      {
-        method: "POST",
-        headers: {
-          "Content-type": "application/json",
-          Authorization: `Bearer ${sessionToken}`,
-        },
-        body: JSON.stringify({
-          name,
-          repos: repos.map((repo) => ({ id: repo.id, fullName: repo.full_name })),
-          is_public: true,
-        }),
-      }
-    );
-    setCreateLoading(false);
-    if (response.ok) {
-      const { insight_id } = await response.json();
-      toast({ description: "Page created successfully", variant: "success" });
-      router.push(`/workspaces/${workspaceId}/repository-insights/${insight_id}/dashboard`);
-    }
-
-    setSubmitted(false);
-  };
-
-  const handleUpdateInsightPage = async () => {
-    setSubmitted(true);
-    setCreateLoading(true);
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/workspaces/${workspaceId}/insights/${insight?.id}`,
-      {
-        method: "PATCH",
-        headers: {
-          "Content-type": "application/json",
-          Authorization: `Bearer ${sessionToken}`,
-        },
-        body: JSON.stringify({
-          name,
-          repos: repos.map((repo) => ({ id: repo.id, fullName: repo.full_name })),
-          // eslint-disable-next-line
-          is_public: true,
-        }),
-      }
-    );
-    setCreateLoading(false);
-    if (response && response.ok) {
-      toast({ description: "Page updated successfully", variant: "success" });
-      router.push(`/workspaces/${workspaceId}/repository-insights/${insight?.id}/dashboard`);
-    } else {
-      toast({ description: "An error occurred!", variant: "danger" });
-    }
-
-    setSubmitted(false);
-  };
-
-  const addSuggestedRepo = (repoToAdd: string) => {
-    const hasRepo = repos.find((repo) => `${repo.full_name}` === repoToAdd);
-
-    if (hasRepo) {
-      return;
-    }
-
-    const actualRepo = recommendedRepos?.find((repo) => repo.full_name === repoToAdd);
-
-    if (!actualRepo) {
-      loadAndAddRepo(repoToAdd);
-      return;
-    }
-
-    setRepos((repos) => {
-      return [...repos, actualRepo as unknown as DbRepo];
-    });
-  };
-
-  const loadAndAddRepo = async (repoToAdd: string, isAddedFromCart = false) => {
-    setAddRepoError(RepoLookupError.Initial);
-
-    const hasRepo = repos.find((repo) => `${repo.full_name}` === repoToAdd);
-
-    if (hasRepo) {
-      return;
-    }
-
-    const { apiPaths, isValidUrl } = generateRepoParts(repoToAdd);
-
-    if (!isValidUrl) {
-      setAddRepoError(RepoLookupError.Invalid);
-      return;
-    }
-
-    const { repoFullName } = apiPaths;
-
-    setAddRepoLoading({ repoName: repoToAdd, isAddedFromCart, isLoading: true });
-    try {
-      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/repos/${repoFullName}`);
-      setAddRepoLoading({ repoName: repoToAdd, isAddedFromCart, isLoading: false });
-
-      if (response.ok) {
-        const addedRepo = (await response.json()) as DbRepo;
-
-        setRepos((repos) => {
-          return [...repos, addedRepo];
-        });
-        setAddRepoError(RepoLookupError.Initial);
-        setRepoSearchTerm("");
-      } else {
-        const publicRepoResponse = await fetch(`https://api.github.com/repos/${repoFullName}`);
-
-        if (publicRepoResponse.ok) {
-          const publicRepo = await publicRepoResponse.json();
-
-          // create a stub repo to send to API
-          const addedRepo = {
-            id: publicRepo.id,
-            full_name: publicRepo.full_name,
-          } as DbRepo;
-
-          setRepos((repos) => {
-            return [...repos, addedRepo];
-          });
-          setAddRepoError(RepoLookupError.Initial);
-          setRepoSearchTerm("");
-        } else {
-          setAddRepoError(RepoLookupError.Invalid);
-        }
-      }
-    } catch {
-      setAddRepoLoading({ repoName: repoToAdd, isAddedFromCart, isLoading: false });
-      setAddRepoError(RepoLookupError.Error);
-    }
-  };
-
-  const handleAddRepository = async () => {
-    await loadAndAddRepo(repoSearchTerm);
-  };
-
-  const handleReAddRepository = async (repoAdded: string) => {
-    const existInSuggestions = recommendedRepos.find((repo) => `${repo.full_name}` === repoAdded);
-
-    if (existInSuggestions) {
-      setRepoHistory((historyRepos) => {
-        return historyRepos.filter((repo) => `${repo.full_name}` !== repoAdded);
-      });
-
-      addSuggestedRepo(repoAdded);
-      return;
-    }
-
-    try {
-      await loadAndAddRepo(repoAdded, true);
-
-      setRepoHistory((historyRepos) => {
-        return historyRepos.filter((repo) => `${repo.full_name}` !== repoAdded);
-      });
-    } catch (e) {}
-  };
-
-  const handleRemoveRepository = (id: string) => {
-    setRepos((addedRepos) => {
-      return addedRepos.filter((repo) => repo.id !== id);
-    });
-
-    const repoRemoved = repos.find((repo) => repo.id === id);
-
-    const repoAlreadyInHistory = repoHistory.find((repo) => repo.id === id);
-    if (repoAlreadyInHistory) {
-      return;
-    }
-
-    setRepoHistory((historyRepos) => {
-      return [...historyRepos, repoRemoved as DbRepo];
-    });
-  };
-
-  const getRepoLookupError = (code: RepoLookupError) => {
-    if (code === RepoLookupError.Error) {
-      return <Error errorMessage="There was error retrieving this repository." />;
-    }
-
-    if (code === RepoLookupError.Invalid) {
-      return <Error errorMessage="This repository entered is invalid." />;
-    }
-
-    if (code === RepoLookupError.NotIndexed) {
-      return <RepoNotIndexed />;
-    }
-
-    return null;
-  };
-
-  const getOrganizationLookupError = (code: OrgLookupError) => {
-    if (code === OrgLookupError.Error) {
-      return <Error errorMessage="There was error retrieving this organization's public repositories." />;
-    }
-
-    if (code === OrgLookupError.Invalid) {
-      return <Error errorMessage="This organization entered is invalid." />;
-    }
-
-    return <></>;
-  };
-
-  const handleDeleteInsightPage = async () => {
-    setSubmitted(true);
-    setDeleteLoading(true);
-    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insight?.id}`, {
-      method: "DELETE",
-      headers: {
-        "Content-type": "application/json",
-        Authorization: `Bearer ${sessionToken}`,
-      },
-    });
-
-    setDeleteLoading(false);
-    if (response.ok) {
-      toast({ description: "Page deleted successfully!", variant: "success" });
-      setIsModalOpen(false);
-      router.push(`/workspaces/${workspaceId}/repository-insights`);
-    }
-
-    setSubmitted(false);
-  };
-
-  const handleOnModalClose = () => {
-    setIsModalOpen(false);
-  };
-
-  const updateSuggestionsDebounced = useDebounce(async () => {
-    setCreateLoading(true);
-
-    const req = await fetch(
-      `https://api.github.com/search/repositories?q=${encodeURIComponent(
-        `${repoSearchTerm} in:name in:repo:owner/name sort:updated`
-      )}`,
-      {
-        ...(providerToken
-          ? {
-              headers: {
-                Authorization: `Bearer ${providerToken}`,
-              },
-            }
-          : {}),
-      }
-    );
-
-    setCreateLoading(false);
-    if (req.ok) {
-      const res = await req.json();
-      const suggestions = res.items.map((item: any) => item.full_name);
-      setSuggestions(suggestions);
-    }
-  }, 250);
-
-  const handleAddOrganizationRepositories = async () => {
-    setSyncOrganizationError(OrgLookupError.Initial);
-
-    const orgReposResponse = await fetch(
-      `https://api.github.com/orgs/${organization}/repos?type=public&sort=pushed&direction=desc`,
-      {
-        headers: providerToken
-          ? {
-              Authorization: `Bearer ${providerToken}`,
-            }
-          : {},
-      }
-    );
-
-    if (orgReposResponse.ok) {
-      const orgReposData = await orgReposResponse.json();
-
-      // create a stub repo to send to API
-      const orgRepos = orgReposData
-        .filter(
-          (orgRepo: { id: number; full_name: string }) => !repos.find((repo) => orgRepo.full_name === repo.full_name)
-        )
-        .slice(0, 10)
-        .map((orgRepo: { id: number; full_name: string }) => ({
-          id: orgRepo.id,
-          full_name: orgRepo.full_name,
-        })) as DbRepo[];
-
-      setRepos((repos) => {
-        return [...repos, ...orgRepos];
-      });
-
-      setSyncOrganizationError(OrgLookupError.Initial);
-      setOrganization("");
-    } else {
-      if (orgReposResponse.status === 404) {
-        setSyncOrganizationError(OrgLookupError.Invalid);
-      } else {
-        setSyncOrganizationError(OrgLookupError.Error);
-      }
-    }
-  };
-
-  const transferWorkspace = async () => {
-    const selectedOption = options.find((opt) => opt.value === selectedWorkspace);
-    const response = await fetchApiData({
-      method: "POST",
-      path: `workspaces/${workspaceId!}/insights/${selectedWorkspace}`,
-      body: {
-        id: insight?.id,
-      },
-      bearerToken: sessionToken!,
-      pathValidator: () => true,
-    });
-    if (response.error) {
-      toast({ description: "An error has occurred. Try again.", variant: "success" });
-      return;
-    }
-
-    toast({ description: `Moved insight to ${selectedOption?.label}`, variant: "success" });
-    router.push(`/workspaces/${selectedWorkspace}/repository-insights/${insight?.id}/dashboard`);
-  };
-
-  useEffect(() => {
-    setSuggestions([]);
-    if (!repoSearchTerm) return;
-    updateSuggestionsDebounced();
-  }, [repoSearchTerm]);
-
-  return (
-    <section className="flex flex-col justify-center w-full py-4 xl:flex-row xl:gap-20 xl:pl-28 ">
-      <div className="flex flex-col gap-8">
-        <div className="pb-6 border-b border-light-slate-8">
-          <Title className="!text-2xl !leading-none mb-4" level={1}>
-            {edit ? "Update" : "Create New"} {workspaceId ? "Repository Insight" : "Insight Page"}
-          </Title>
-          <Text className="my-8">
-            An insight page is a dashboard containing selected repositories that you and your team can get insights
-            from.
-          </Text>
-        </div>
-
-        <div className="pb-8 border-b border-light-slate-8">
-          <Title className="!text-1xl !leading-none mb-4" level={4}>
-            Page Name
-          </Title>
-
-          <TextInput placeholder="Page Name (ex: My Team)" value={name} handleChange={handleOnNameChange} />
-        </div>
-
-        <div className="flex flex-col gap-4 border-light-slate-8">
-          <Title className="!text-1xl !leading-none " level={4}>
-            Sync GitHub Organization
-          </Title>
-
-          <div className="w-full flex gap-3 md:items-center flex-col md:flex-row">
-            <TextInput
-              placeholder="Organization Name (ex: open-sauced)"
-              value={organization}
-              handleChange={handleOnOrganizationChange}
-            />
-          </div>
-          <div>
-            <Button
-              disabled={organization.trim().length < 3}
-              onClick={handleAddOrganizationRepositories}
-              variant="outline"
-              className="shrink-0 w-max"
-            >
-              Sync Organization
-            </Button>
-          </div>
-
-          <div>{getOrganizationLookupError(syncOrganizationError)}</div>
-        </div>
-
-        <div className="flex flex-col gap-4 border-light-slate-8">
-          <Title className="!text-1xl !leading-none " level={4}>
-            Add Repository
-          </Title>
-          <Search
-            isLoading={createLoading}
-            placeholder="Repository URL or Full Name (ex: open-sauced/open-sauced)"
-            labelText="Repository URL or Full Name (ex: open-sauced/open-sauced)"
-            className="!w-full text-md text-gra"
-            name={"query"}
-            value={repoSearchTerm}
-            suggestions={suggestions}
-            onChange={(value) => setRepoSearchTerm(value)}
-            onSearch={(search) => setRepoSearchTerm(search as string)}
-          />
-
-          <div className="w-full flex gap-3 md:items-center flex-col md:flex-row">
-            <Button
-              disabled={addRepoLoading.repoName === repoSearchTerm && addRepoLoading.isLoading}
-              loading={addRepoLoading.repoName === repoSearchTerm && addRepoLoading.isLoading}
-              onClick={handleAddRepository}
-              variant="outline"
-              className="shrink-0 w-max"
-            >
-              Add Repository
-            </Button>
-          </div>
-
-          <div className="py-4">
-            <SuggestedRepositoriesList
-              reposData={recommendedReposWithoutSelected}
-              loadingData={addRepoLoading}
-              isLoading={isLoading}
-              onAddRepo={(repo) => {
-                addSuggestedRepo(repo);
-              }}
-            />
-          </div>
-        </div>
-
-        <div>{getRepoLookupError(addRepoError)}</div>
-
-        {edit && (
-          <div className="flex flex-col gap-8 py-8 px-4">
-            <Title className="!text-xl !leading-none !text-red-700 font-semibold" level={4}>
-              Danger Zone
-            </Title>
-
-            <div className="flex flex-col p-6 rounded-2xl bg-light-slate-4">
-              {workspaceId && (
-                <section className="flex flex-col gap-4">
-                  <div className="flex flex-col gap-2">
-                    <Title level={4}>Transfer to other Workspace</Title>
-                    <Text>Move this insight to another workspace where you are an owner or editor.</Text>
-                  </div>
-                  <SingleSelect
-                    isSearchable
-                    placeholder={options.find((opt) => opt.value === workspaceId)?.label}
-                    options={options}
-                    onValueChange={(value: string) => {
-                      setSelectedWorkspace(value);
-                    }}
-                  />
-                  <Button
-                    onClick={() => setIsTransferModalOpen(true)}
-                    disabled={selectedWorkspace === workspaceId}
-                    variant="primary"
-                    className="w-fit"
-                  >
-                    Transfer
-                  </Button>
-                </section>
-              )}
-              <Title className="!text-1xl !leading-none pt-6" level={4}>
-                Delete Page
-              </Title>
-              <Text className="my-4">Once you delete a page, you&#39;re past the point of no return.</Text>
-
-              <div>
-                <Button onClick={() => setIsModalOpen(true)} variant="destructive">
-                  Delete page
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="top-0 py-4 mt-5 lg:sticky md:mt-0 lg:py-0">
-        <RepositoriesCart
-          loading={createLoading}
-          edit={edit}
-          hasItems={repos.length > 0}
-          handleCreatePage={handleCreateInsightPage}
-          handleUpdatePage={handleUpdateInsightPage}
-          handleAddToCart={handleReAddRepository}
-          history={reposRemoved.filter(
-            (repo) => !repos.find((r) => r.full_name === `${repo.orgName}/${repo.repoName}`)
-          )}
-          createPageButtonDisabled={disableCreateButton()}
-        >
-          {repos.map((repo) => {
-            const [repoOwner, repoName] = repo.full_name.split("/");
-            const totalPrs =
-              (repo.open_prs_count || 0) +
-              (repo.closed_prs_count || 0) +
-              (repo.merged_prs_count || 0) +
-              (repo.draft_prs_count || 0);
-
-            return (
-              <RepositoryCartItem
-                key={`repo_${repo.id}`}
-                avatar={getAvatarByUsername(repoOwner, 60)}
-                handleRemoveItem={() => handleRemoveRepository(repo.id)}
-                orgName={repoOwner}
-                repoName={repoName}
-                totalPrs={totalPrs}
-              />
-            );
-          })}
-        </RepositoriesCart>
-      </div>
-
-      {workspaceId && (
-        <TransferInsightModal
-          isOpen={isTransferModalOpen}
-          onClose={() => setIsTransferModalOpen(false)}
-          handleTransfer={transferWorkspace}
-          insightName={insight?.name || ""}
-          currentWorkspaceName={options.find((opt) => opt.value === workspaceId)?.label || ""}
-          destinationWorkspaceName={options.find((opt) => opt.value === selectedWorkspace)?.label || ""}
-        />
-      )}
-
-      <DeleteInsightPageModal
-        isLoading={deleteLoading}
-        open={isModalOpen}
-        setOpen={setIsModalOpen}
-        submitted={submitted}
-        pageName={name}
-        onConfirm={handleDeleteInsightPage}
-        onClose={handleOnModalClose}
-      />
-    </section>
-  );
-};
-
-export default InsightPage;

From 642d5a8c3a6d83a26cf1d0eaac10f89bb2f23cb0 Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Thu, 31 Oct 2024 15:48:25 -0400
Subject: [PATCH 08/10] fixed a merge conflict

---
 .../UserSettingsPage/user-settings-page.tsx   | 56 -------------------
 1 file changed, 56 deletions(-)

diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
index cbca480107..b988d99aa4 100644
--- a/components/organisms/UserSettingsPage/user-settings-page.tsx
+++ b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -435,7 +435,6 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
             </Button>
           </fieldset>
           {userInfo && (
-<<<<<<< HEAD
             <form
               name="delete-account"
               action="/api/delete-account"
@@ -468,61 +467,6 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
                 }}
               />
             </form>
-=======
-            <>
-              <div>
-                {!coupon ? (
-                  <div className="flex flex-col order-first gap-6 md:order-last">
-                    <div className="flex flex-col gap-3">
-                      <h2 className="text-2xl font-normal tracking-normal">Developer Pack</h2>
-                      <div className="w-full sm:max-w-80">
-                        <Text>Verify your developer pack eligibilty to get an upgrade!</Text>
-                      </div>
-                    </div>
-                    <DeveloperPackForm
-                      providerToken={providerToken}
-                      refreshUser={() => {
-                        mutate();
-                        setCoupon("verified");
-                      }}
-                    />
-                  </div>
-                ) : null}
-              </div>
-              <form
-                name="delete-account"
-                action="/api/delete-account"
-                method="POST"
-                className="flex flex-col order-first gap-6 md:order-last p-6 rounded-2xl bg-light-slate-4"
-                ref={deleteFormRef}
-                onSubmit={(e) => {
-                  setIsModalOpen(true);
-                  e.preventDefault();
-                }}
-              >
-                <div className="flex flex-col gap-3">
-                  <h2 className="text-2xl font-normal tracking-normal">Delete Account</h2>
-                  <div className="w-full md:w-96">
-                    <Text>
-                      Please note that account deletion is irreversible. Proceed only if you are certain about this
-                      action.
-                    </Text>
-                  </div>
-                </div>
-                <Button type="submit" rel="noopener noreferrer" target="_blank" variant="destructive" className="w-max">
-                  Delete Account
-                </Button>
-                <DeleteAccountModal
-                  open={isModalOpen}
-                  setOpen={setIsModalOpen}
-                  onDelete={() => {
-                    setIsModalOpen(false);
-                    deleteFormRef.current?.submit();
-                  }}
-                />
-              </form>
-            </>
->>>>>>> 027aeffd (fix: resolve a11y warnings for label-has-associated-control rule (#4126))
           )}
         </div>
       </div>

From c4f0ae00b234ab7c388f651786ac23f587bd311e Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Thu, 31 Oct 2024 15:50:35 -0400
Subject: [PATCH 09/10] fix: replaced orphan label with an h2

---
 components/organisms/UserSettingsPage/user-settings-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
index b988d99aa4..b7e211aeff 100644
--- a/components/organisms/UserSettingsPage/user-settings-page.tsx
+++ b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -447,7 +447,7 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
               }}
             >
               <div className="flex flex-col gap-3">
-                <label className="text-2xl font-normal">Delete Account</label>
+                <h2 className="text-2xl font-normal">Delete Account</h2>
                 <div className="w-full md:w-96">
                   <Text>
                     Please note that account deletion is irreversible. Proceed only if you are certain about this

From c511e7f9bf03ee3315dcb64eaa2ece2da20e22bb Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Thu, 31 Oct 2024 16:03:26 -0400
Subject: [PATCH 10/10] fix: sorted out single select label

---
 components/atoms/Select/single-select.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/atoms/Select/single-select.tsx b/components/atoms/Select/single-select.tsx
index 75e81afb47..f78c473c8f 100644
--- a/components/atoms/Select/single-select.tsx
+++ b/components/atoms/Select/single-select.tsx
@@ -67,8 +67,8 @@ const SingleSelect = ({
         )}
       >
         <span className="sr-only">{labelText}</span>
-        <Tooltip content={current?.label ?? placeholder}>
-          <div className="flex items-center w-44 ">
+        <Tooltip content={current?.label ?? placeholder} aria-hidden="true">
+          <div className="flex items-center w-44" aria-hidden="true">
             <p className="flex-grow text-start truncate">{current?.label ?? placeholder}</p>
           </div>
         </Tooltip>