chore: release 2.56.0 (#3953)

CHANGELOG.md

@@ -5,6 +5,41 @@
 
 > All notable changes to this project will be documented in this file
 
+## [2.56.0-beta.4](https://github.com/open-sauced/app/compare/v2.56.0-beta.3...v2.56.0-beta.4) (2024-08-14)
+
+
+### 🐛 Bug Fixes
+
+* now the Dev Card share buttons appear on all screen sizes ([#3941](https://github.com/open-sauced/app/issues/3941)) ([5fce569](https://github.com/open-sauced/app/commit/5fce5699245ea395e30b540ce6b265879c84f698))
+
+## [2.56.0-beta.3](https://github.com/open-sauced/app/compare/v2.56.0-beta.2...v2.56.0-beta.3) (2024-08-14)
+
+
+### 🐛 Bug Fixes
+
+* remove duplicate `DayRange` select ([#3939](https://github.com/open-sauced/app/issues/3939)) ([126d44f](https://github.com/open-sauced/app/commit/126d44f3957035856dc687590f4232e88193e681))
+
+## [2.56.0-beta.2](https://github.com/open-sauced/app/compare/v2.56.0-beta.1...v2.56.0-beta.2) (2024-08-14)
+
+
+### 🐛 Bug Fixes
+
+* fixed contributor insight contributor grid not loading paged data ([#3945](https://github.com/open-sauced/app/issues/3945)) ([1f645ed](https://github.com/open-sauced/app/commit/1f645ed44433d04acce1619d7a907ceda1384605))
+
+## [2.56.0-beta.1](https://github.com/open-sauced/app/compare/v2.55.3-beta.1...v2.56.0-beta.1) (2024-08-13)
+
+
+### 🍕 Features
+
+* now workspace can be generated from repo page via SBOM ([#3938](https://github.com/open-sauced/app/issues/3938)) ([e2bd019](https://github.com/open-sauced/app/commit/e2bd019134e86a700d7f18b20b755541e57a32cf))
+
+## [2.55.3-beta.1](https://github.com/open-sauced/app/compare/v2.55.2...v2.55.3-beta.1) (2024-08-13)
+
+
+### 🐛 Bug Fixes
+
+* validate user exists for `/user/<username>/card` page ([#3933](https://github.com/open-sauced/app/issues/3933)) ([9976453](https://github.com/open-sauced/app/commit/99764535b0690788f86ae951b33a520b5a1bbeb1))
+
 ## [2.55.2](https://github.com/open-sauced/app/compare/v2.55.1...v2.55.2) (2024-08-13)
 
 

components/Repositories/AddToWorkspaceDrawer.tsx

@@ -12,7 +12,12 @@ import { fetchApiData } from "helpers/fetchApiData";
 import SingleSelect from "components/atoms/Select/single-select";
 import Text from "components/atoms/Typography/text";
 
-export default function AddToWorkspaceDrawer({ repository }: { repository: string }) {
+interface AddToWorkspaceDrawerProps {
+  repository: string;
+  type?: "repo" | "sbom";
+}
+
+export default function AddToWorkspaceDrawer({ repository, type = "repo" }: AddToWorkspaceDrawerProps) {
   const router = useRouter();
   const posthog = usePostHog();
   const { toast } = useToast();
@@ -51,15 +56,38 @@ export default function AddToWorkspaceDrawer({ repository }: { repository: strin
       toast({ description: `Added repository successfully`, variant: "success" });
     }
   };
+
+  const params = new URLSearchParams();
+
+  if (type === "sbom") {
+    params.set("sbom", "true");
+    params.set("repo", repository);
+  } else {
+    params.set("repos", JSON.stringify([repository]));
+  }
+
+  const url = `/workspaces/new?${params}`;
+  const redirectTo = new URL(url, window.location.origin).toString();
+  const title = type === "repo" ? "Add repository to Workspace" : "Add repository SBOM to Workspace";
+
   return (
     <Drawer
-      title="Add repository to Workspace"
+      title={title}
       description="Create a new workspace or add to an existing one."
       showCloseButton
       trigger={
-        <Button variant="primary" className="shrink-0 items-center gap-3 w-fit">
+        <Button
+          variant={type === "repo" ? "primary" : "dark"}
+          className="shrink-0 items-center gap-3 w-full"
+          onClick={(event) => {
+            if (user && type === "sbom") {
+              event.preventDefault();
+              router.push(url);
+            }
+          }}
+        >
           <MdWorkspaces />
-          Add to Workspace
+          {type === "repo" ? "Add to Workspace" : "Workspace from SBOM"}
         </Button>
       }
     >
@@ -76,15 +104,17 @@ export default function AddToWorkspaceDrawer({ repository }: { repository: strin
             lists are now part of your personal workspace.
           </Text>
           <p className="font-medium text-light-orange-10">
-            Create a new workspace with this repository and explore open source like never before!
+            {type === "sbom"
+              ? "Create a new workspace with this repository's SBOM and explore open source like never before!"
+              : "Create a new workspace with this repository and explore open source like never before!"}
           </p>
           <Button
             variant="primary"
             className="w-fit gap-2 self-center"
             onClick={() => {
               signIn({
                 provider: "github",
-                options: { redirectTo: `${host}/workspaces/new?repos=${JSON.stringify([repository])}` },
+                options: { redirectTo },
               });
             }}
           >

components/Repositories/AddToWorkspaceModal.tsx

@@ -16,15 +16,17 @@ type AddToWorkspaceModalProps = {
   repository: string;
   isOpen: boolean;
   onCloseModal: () => void;
+  sbomUrl?: string;
 };
 
-export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal }: AddToWorkspaceModalProps) {
+export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal, sbomUrl }: AddToWorkspaceModalProps) {
   const { toast } = useToast();
   const router = useRouter();
   const posthog = usePostHog();
   const { signIn, user, sessionToken } = useSupabaseAuth();
   const [workspaceId, setWorkspaceId] = useState("new");
   const { data: workspaces, isLoading: workspacesLoading, mutate } = useWorkspaces({ load: !!user, limit: 100 });
+  const title = sbomUrl ? "Add repository SBOM to Workspace" : "Add repository to Workspace";
 
   const [host, setHost] = useState("");
   useEffect(() => {
@@ -61,7 +63,12 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal }
 
   return (
     <Dialog open={isOpen}>
-      <DialogContent autoStyle={false} onEscapeKeyDown={onCloseModal} onInteractOutside={onCloseModal}>
+      <DialogContent
+        aria-label={title}
+        autoStyle={false}
+        onEscapeKeyDown={onCloseModal}
+        onInteractOutside={onCloseModal}
+      >
         <Card heading={<h1 className="text-xl font-semibold">Add to workspace</h1>}>
           <div className="flex flex-col gap-4 w-[32rem] h-full px-8 py-4">
             {!user ? (
@@ -77,15 +84,19 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal }
                   insights and lists are now part of your personal workspace.
                 </Text>
                 <p className="font-medium text-light-orange-10">
-                  Create a new workspace with this repository and explore open source like never before!
+                  {sbomUrl
+                    ? "Create a new workspace with this repository's SBOM and explore open source like never before!"
+                    : "Create a new workspace with this repository and explore open source like never before!"}
                 </p>
                 <Button
                   variant="primary"
                   className="w-fit gap-2 self-center"
                   onClick={() => {
                     signIn({
                       provider: "github",
-                      options: { redirectTo: `${host}/workspaces/new?repos=${JSON.stringify([repository])}` },
+                      options: {
+                        redirectTo: sbomUrl ? sbomUrl : `${host}/workspaces/new?repos=${JSON.stringify([repository])}`,
+                      },
                     });
                   }}
                 >
@@ -95,28 +106,32 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal }
               </div>
             ) : (
               <>
-                <p>Create a new workspace or add to an existing one.</p>
-                {workspacesLoading ? (
-                  <p>Loading...</p>
-                ) : (
-                  <SingleSelect
-                    options={[
-                      { label: "Create new workspace...", value: "new" },
-                      ...workspaces.map(({ id, name }) => ({
-                        label: name,
-                        value: id,
-                      })),
-                    ]}
-                    value={workspaceId ?? "new"}
-                    placeholder="Select a workspace"
-                    onValueChange={(value) => {
-                      setWorkspaceId(value);
-                    }}
-                  />
+                {sbomUrl ? null : (
+                  <>
+                    <p>Create a new workspace or add to an existing one.</p>
+                    {workspacesLoading ? (
+                      <p>Loading...</p>
+                    ) : (
+                      <SingleSelect
+                        options={[
+                          { label: "Create new workspace...", value: "new" },
+                          ...workspaces.map(({ id, name }) => ({
+                            label: name,
+                            value: id,
+                          })),
+                        ]}
+                        value={workspaceId ?? "new"}
+                        placeholder="Select a workspace"
+                        onValueChange={(value) => {
+                          setWorkspaceId(value);
+                        }}
+                      />
+                    )}
+                    <Button onClick={addRepositoryToWorkspace} variant="primary" className="w-fit self-end">
+                      Confirm
+                    </Button>
+                  </>
                 )}
-                <Button onClick={addRepositoryToWorkspace} variant="primary" className="w-fit self-end">
-                  Confirm
-                </Button>
               </>
             )}
           </div>

components/Workspaces/TrackedReposTable.tsx

@@ -2,6 +2,7 @@ import { BiBarChartAlt2 } from "react-icons/bi";
 import { FaPlus } from "react-icons/fa6";
 import { FaTrashAlt } from "react-icons/fa";
 import { ComponentProps } from "react";
+import { MdWorkspaces } from "react-icons/md";
 import Button from "components/shared/Button/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "components/shared/Table";
 import { Avatar } from "components/atoms/Avatar/avatar-hover-card";
@@ -13,6 +14,7 @@ interface TrackedReposTableProps {
   onAddRepos: () => void;
   onRemoveTrackedRepo: ComponentProps<"button">["onClick"];
   isLoading?: boolean;
+  loadingMessage?: string;
   disabled?: boolean;
 }
 
@@ -53,10 +55,11 @@ export const TrackedReposTable = ({
   onAddRepos,
   onRemoveTrackedRepo,
   isLoading = false,
+  loadingMessage,
   disabled = false,
 }: TrackedReposTableProps) => {
   return (
-    <div className="grid gap-4">
+    <div className="grid gap-4" aria-busy={isLoading} aria-live="polite">
       <div className="flex justify-between flex-wrap gap-2">
         <div>
           <h2 className="flex gap-1 font-medium mb-2 text-md">Repositories Tracked</h2>
@@ -80,7 +83,7 @@ export const TrackedReposTable = ({
         </Table>
         <ClientOnly>
           {repositories.size > 0 || isLoading ? (
-            <div className="overflow-y-scroll h-60">
+            <div className="relative overflow-y-scroll h-60">
               <Table>
                 <TableHeader className="sr-only">
                   <TableRow className=" bg-light-slate-3">
@@ -116,6 +119,14 @@ export const TrackedReposTable = ({
                   )}
                 </TableBody>
               </Table>
+              {isLoading && loadingMessage ? (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="flex gap-2 items-center z-1 text-lg border border-light-slate-7 rounded-lg bg-light-slate-3 p-4">
+                    <MdWorkspaces />
+                    {loadingMessage}
+                  </div>
+                </div>
+              ) : null}
             </div>
           ) : (
             <EmptyState onAddRepos={onAddRepos} disabled={disabled} />

components/organisms/DevCardCarousel/dev-card-carousel.tsx

@@ -85,49 +85,47 @@ export default function DevCardCarousel(props: DevCardCarouselProps) {
   }, [cardOrder, api]);
 
   return (
-    <div className="flex flex-col gap-6">
-      <div className="grid place-content-center">
-        {springProps.map(({ x, y, scale, zIndex, coverOpacity }, index) => {
-          const cardProps = props.cards[index];
-          const cardOrderIndex = cardOrder.indexOf(index);
-          const className = cntl`
-            DevCardCarousel-card
-            rounded-3xl
-            left-0
-            top-0
-            w-full
-            h-full
-            relative
-            cursor-pointer
-          `;
-          return (
+    <div className="grid place-content-center mb-8">
+      {springProps.map(({ x, y, scale, zIndex, coverOpacity }, index) => {
+        const cardProps = props.cards[index];
+        const cardOrderIndex = cardOrder.indexOf(index);
+        const className = cntl`
+          DevCardCarousel-card
+          rounded-3xl
+          left-0
+          top-0
+          w-full
+          h-full
+          relative
+          cursor-pointer
+        `;
+        return (
+          <animated.div
+            {...bind(index)}
+            key={cardProps.login}
+            className={className}
+            role="button"
+            title={cardProps.login}
+            style={{
+              gridArea: "1 / 1",
+              zIndex: zIndex,
+              transform: to([x, y, scale], transform),
+              transformOrigin: "left center",
+            }}
+          >
+            <DevCard key="card" isInteractive={index === cardOrder[0]} user={cardProps} isFlipped={false} />
             <animated.div
-              {...bind(index)}
-              key={cardProps.login}
-              className={className}
-              role="button"
-              title={cardProps.login}
-              style={{
-                gridArea: "1 / 1",
-                zIndex: zIndex,
-                transform: to([x, y, scale], transform),
-                transformOrigin: "left center",
+              key="cover"
+              className="DevCardCarousel-darken absolute left-0 right-0 top-0 bottom-0 bg-black rounded-3xl z-10"
+              title={`Select @${cardProps.login}`}
+              style={{ opacity: coverOpacity, pointerEvents: index === cardOrder[0] ? "none" : "auto" }}
+              onClick={() => {
+                handleClick(cardOrderIndex);
               }}
-            >
-              <DevCard key="card" isInteractive={index === cardOrder[0]} user={cardProps} isFlipped={false} />
-              <animated.div
-                key="cover"
-                className="DevCardCarousel-darken absolute left-0 right-0 top-0 bottom-0 bg-black rounded-3xl z-10"
-                title={`Select @${cardProps.login}`}
-                style={{ opacity: coverOpacity, pointerEvents: index === cardOrder[0] ? "none" : "auto" }}
-                onClick={() => {
-                  handleClick(cardOrderIndex);
-                }}
-              ></animated.div>
-            </animated.div>
-          );
-        })}
-      </div>
+            ></animated.div>
+          </animated.div>
+        );
+      })}
     </div>
   );
 }