chore: release 1.73.0 (#2010)

CHANGELOG.md

@@ -5,6 +5,54 @@
 
 > All notable changes to this project will be documented in this file
 
+## [1.73.0-beta.5](https://github.com/open-sauced/insights/compare/v1.73.0-beta.4...v1.73.0-beta.5) (2023-10-26)
+
+
+### 🐛 Bug Fixes
+
+* show contributors name and company in table ([#2012](https://github.com/open-sauced/insights/issues/2012)) ([79776a3](https://github.com/open-sauced/insights/commit/79776a3194366ade24bcc36f56e4f15d3623e185))
+
+## [1.73.0-beta.4](https://github.com/open-sauced/insights/compare/v1.73.0-beta.3...v1.73.0-beta.4) (2023-10-26)
+
+
+### 🐛 Bug Fixes
+
+* add logic to force the user to tag at least one repository to a highlight ([#2007](https://github.com/open-sauced/insights/issues/2007)) ([665fbf2](https://github.com/open-sauced/insights/commit/665fbf21cdac82aad6af17689a9eb23300f4f340))
+
+## [1.73.0-beta.3](https://github.com/open-sauced/insights/compare/v1.73.0-beta.2...v1.73.0-beta.3) (2023-10-26)
+
+
+### 🐛 Bug Fixes
+
+* now the error message in highlight form will alert assistive tech ([#2008](https://github.com/open-sauced/insights/issues/2008)) ([a0d4b3b](https://github.com/open-sauced/insights/commit/a0d4b3b0d0e25182c8a6229513dca39f056a12a4))
+
+## [1.73.0-beta.2](https://github.com/open-sauced/insights/compare/v1.73.0-beta.1...v1.73.0-beta.2) (2023-10-25)
+
+
+### 🐛 Bug Fixes
+
+* background color in text-input ([#1998](https://github.com/open-sauced/insights/issues/1998)) ([1913462](https://github.com/open-sauced/insights/commit/1913462f16e4bc893742f51024ea496ca1e45fd7))
+* more menu overlap issue on safari ([#1999](https://github.com/open-sauced/insights/issues/1999)) ([66df010](https://github.com/open-sauced/insights/commit/66df010eaf1abf8afed252eec351213737d33899))
+
+## [1.73.0-beta.1](https://github.com/open-sauced/insights/compare/v1.72.1-beta.1...v1.73.0-beta.1) (2023-10-25)
+
+
+### 🍕 Features
+
+*  implement improved UX for non-connected users profile ([#1992](https://github.com/open-sauced/insights/issues/1992)) ([f11160c](https://github.com/open-sauced/insights/commit/f11160c68a218dd92eba35d94dbb2af3dd4a9631))
+
+
+### 🧑‍💻 Code Refactoring
+
+* Improve UX on Create New List page - `/hub/lists/new` ([#1987](https://github.com/open-sauced/insights/issues/1987)) ([c0fcf7a](https://github.com/open-sauced/insights/commit/c0fcf7ac57d680ee0c2ad6a8145983dde2275355))
+
+### [1.72.1-beta.1](https://github.com/open-sauced/insights/compare/v1.72.0...v1.72.1-beta.1) (2023-10-25)
+
+
+### 🐛 Bug Fixes
+
+* set border radius for modals in small screens ([#2004](https://github.com/open-sauced/insights/issues/2004)) ([738c714](https://github.com/open-sauced/insights/commit/738c714d6d988170c8ed86ebe9fdc2d4b4763694))
+
 ## [1.72.0](https://github.com/open-sauced/insights/compare/v1.71.1...v1.72.0) (2023-10-24)
 
 

components/atoms/Avatar/avatar-hover-card.tsx

@@ -19,8 +19,8 @@ const AvatarHoverCard = ({ contributor, repositories, size = "large" }: AvatarPr
 
   switch (size) {
     case "small":
-      width = 35;
-      height = 35;
+      width = 45;
+      height = 45;
       break;
     default:
       break;

components/atoms/Select/multi-select.tsx

@@ -42,7 +42,7 @@ const MultiSelect = ({
 
   return (
     <Popover open={open} onOpenChange={(value) => setOpen(value)}>
-      <div className="">
+      <div>
         <PopoverTrigger
           asChild
           className={clsx("p-1.5 border rounded-md bg-white data-[state=open]:border-orange-500  min-w-max", className)}

components/atoms/TextInput/text-input.tsx

@@ -62,7 +62,8 @@ const TextInput = ({
             placeholder={placeholder || ""}
             className={clsx(
               "w-full focus:outline-none placeholder:font-normal placeholder-slate-400",
-              disabled && "bg-light-slate-3 cursor-not-allowed text-light-slate-9"
+              disabled && "bg-light-slate-3 cursor-not-allowed text-light-slate-9",
+              "bg-inherit"
             )}
             disabled={disabled}
             value={value}

components/molecules/ContributorListTableRow/contributor-list-table-row.tsx

@@ -11,7 +11,6 @@ import useContributorPullRequests from "lib/hooks/api/useContributorPullRequests
 import useRepoList from "lib/hooks/useRepoList";
 import { useFetchUser } from "lib/hooks/useFetchUser";
 import Checkbox from "components/atoms/Checkbox/checkbox";
-import AvatarHoverCard from "components/atoms/Avatar/avatar-hover-card";
 import { getActivity } from "../RepoRow/repo-row";
 import DevProfile from "../DevProfile/dev-profile";
 
@@ -156,7 +155,13 @@ const ContributorListTableRow = ({
         )}
 
         {/* Column: Contributors */}
-        <AvatarHoverCard contributor={contributor.username} repositories={[]} size="small" />
+        <div className={clsx("flex-1 lg:min-w-[12.5rem] overflow-hidden")}>
+          <DevProfile
+            company={user?.company || getLastContributedRepo(data)}
+            username={login}
+            hasBorder={!contributor.author_login}
+          />
+        </div>
         {/* Column: Act */}
         <div className={clsx("flex-1 flex lg:max-w-[6.25rem] w-fit justify-center")}>
           {contributor.author_login ? getActivity(totalPrs, false) : "-"}

components/molecules/ContributorProfileHeader/contributor-profile-header.tsx

@@ -31,6 +31,7 @@ import { OptionKeys } from "components/atoms/Select/multi-select";
 import { addListContributor, useFetchAllLists } from "lib/hooks/useList";
 import { useFetchUser } from "lib/hooks/useFetchUser";
 import { cardPageUrl } from "lib/utils/urls";
+import { copyToClipboard } from "lib/utils/copy-to-clipboard";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../Dialog/dialog";
 
 const MultiSelect = dynamic(() => import("components/atoms/Select/multi-select"), { ssr: false });
@@ -65,6 +66,7 @@ const ContributorProfileHeader = ({
 }: ContributorProfileHeaderProps) => {
   const router = useRouter();
   const currentPath = router.asPath;
+
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const { requestConnection } = useUserConnections();
@@ -182,7 +184,7 @@ const ContributorProfileHeader = ({
             </div>
           </Link>
         </div>
-        {isConnected && (
+        {isConnected ? (
           <div className="flex flex-col items-center gap-3 translate-y-24 md:translate-y-0 md:flex-row">
             <div className="flex flex-wrap items-center justify-center gap-2 mb-10 md:gap-6">
               {user ? (
@@ -313,6 +315,25 @@ const ContributorProfileHeader = ({
               </DropdownMenu>
             </div>
           </div>
+        ) : (
+          <div className="flex flex-wrap items-center justify-center max-md:translate-y-14">
+            {!isOwner && (
+              <Button
+                onClick={() => {
+                  copyToClipboard(`${new URL(currentPath, location.origin)}`).then(() => {
+                    toast({
+                      title: "Copied to clipboard",
+                      description: "Share this link with your friend to invite them to OpenSauced!",
+                      variant: "success",
+                    });
+                  });
+                }}
+                variant="primary"
+              >
+                Invite to opensauced
+              </Button>
+            )}
+          </div>
         )}
       </div>
 
@@ -434,7 +455,7 @@ const AddToListDropdown = ({ username }: { username: string }) => {
           </Link>
         </div>
       }
-      className="w-10 md:px-4 max-sm:text-sm"
+      className="md:px-4 max-sm:text-sm"
       placeholder="Add to list"
       options={listOptions}
       selected={selectedList}

components/molecules/DevProfile/dev-profile.tsx

@@ -5,6 +5,7 @@ import Avatar from "components/atoms/Avatar/avatar";
 
 import { getAvatarByUsername } from "lib/utils/github";
 import { truncateString } from "lib/utils/truncate-string";
+import AvatarHoverCard from "components/atoms/Avatar/avatar-hover-card";
 
 interface DevProfileProps {
   username: string;
@@ -26,13 +27,7 @@ const DevProfile = ({ username, company, hasBorder }: DevProfileProps) => {
       </div>
       {/* Desktop */}
       <div className="hidden rounded-full md:flex">
-        <Avatar
-          className={hasBorder ? "ring-2 ring-orange-500" : ""}
-          size={45}
-          isCircle
-          hasBorder={hasBorder}
-          avatarURL={getAvatarByUsername(username)}
-        />
+        <AvatarHoverCard contributor={username} repositories={[]} size="small" />
       </div>
       <div>
         <h1 className="text-light-slate-12">

components/molecules/Dialog/dialog.tsx

@@ -54,7 +54,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={clsx(
         className,
-        "fixed z-50 grid w-full pb-3 gap-4 rounded-b-lg bg-light-slate-2 lg:p-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 md:w-max sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0"
+        "fixed z-50 grid w-full pb-3 gap-4 bg-light-slate-2 lg:p-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 md:w-max rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0"
       )}
       {...props}
     >

components/molecules/HighlightInput/highlight-input-form.tsx

@@ -432,6 +432,12 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
 
       const taggedRepoFullNames = taggedRepoList.map((repo) => `${repo.repoOwner}/${repo.repoName}`);
 
+      // Check if the user has tagged at least one repo and ask them to tag at least one if they haven't
+      if (taggedRepoList.length < 1) {
+        setError("Please add at least one repository associated with your blog post");
+        return;
+      }
+
       if (res.isError) {
         setLoading(false);
 
@@ -526,11 +532,13 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
           </DialogHeader>
           <DialogCloseButton onClick={() => setIsDivFocused(false)} />
           <form onSubmit={handlePostHighlight} className="flex flex-col gap-4 font-normal">
-            {errorMsg && (
-              <p className="inline-flex items-center gap-2 px-2 py-1 text-red-500 bg-red-100 border border-red-500 rounded-md w-full text-sm">
-                <MdError size={20} /> {errorMsg}
-              </p>
-            )}
+            <p role="alert">
+              {errorMsg && (
+                <span className="inline-flex items-center gap-2 px-2 py-1 text-red-500 bg-red-100 border border-red-500 rounded-md w-full text-sm">
+                  <MdError size={20} /> {errorMsg}
+                </span>
+              )}
+            </p>
             <div className="flex flex-col gap-2 p-2 overflow-hidden text-sm bg-white border rounded-lg">
               <TypeWriterTextArea
                 className={`resize-y min-h-[80px] max-h-99 font-normal placeholder:text-slate-400 text-light-slate-12 placeholder:font-normal placeholder:text-sm transition focus:outline-none rounded-lg ${

components/molecules/InfoCard/info-card.tsx

@@ -10,7 +10,7 @@ export interface FavoriteRepoCardProps {
 const InfoCard = ({ icon, title, description, handleClick }: FavoriteRepoCardProps): JSX.Element => {
   return (
     <div className="p-3 bg-white border-2 rounded-xl cursor-pointer" onClick={handleClick}>
-      <div className="flex items-center gap-2.5 h-10">
+      <div className="flex items-center gap-2.5">
         {/* Avatar */}
         {icon === "github" && <FiGithub size={24} className="text-orange-200" />}
         {icon === "globe" && <FiGlobe size={24} className="text-orange-200" />}

components/molecules/InsightPageCard/insight-page-card.tsx

@@ -10,6 +10,8 @@ import { getRelativeDays } from "lib/utils/date-utils";
 import getRepoInsights from "lib/utils/get-repo-insights";
 
 import useRepositories from "lib/hooks/api/useRepositories";
+import { copyToClipboard } from "lib/utils/copy-to-clipboard";
+
 import CardRepoList from "../CardRepoList/card-repo-list";
 import PieChart, { PieData } from "../PieChart/pie-chart";
 import StackedAvatar from "../StackedAvatar/stacked-avatar";
@@ -52,16 +54,6 @@ const InsightPageCard = ({ insight, user }: InsightPageCardProps): JSX.Element =
     },
   ];
 
-  // Function to handle copy to clipboard
-  const handleCopyToClipboard = async (content: any) => {
-    const url = new URL(content, window.location.origin).toString();
-    try {
-      await navigator.clipboard.writeText(url);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   const averagePrOpened = repoData.length > 0 ? Math.round(((open || 0) / total) * 100) : 0;
 
   return (
@@ -116,7 +108,11 @@ const InsightPageCard = ({ insight, user }: InsightPageCardProps): JSX.Element =
       {/* Card footer */}
       <div className="flex mt-4 justify-between">
         <Button
-          onClick={() => handleCopyToClipboard(`/pages/${user?.user_metadata.user_name}/${insight.id}/dashboard`)}
+          onClick={() =>
+            copyToClipboard(
+              `${new URL(`/pages/${user?.user_metadata.user_name}/${insight.id}/dashboard`, location.origin)}`
+            )
+          }
           className="w-48"
           variant="outline"
         >