Merge pull request #2040 from Infisical/feat/mark-projects-as-favourite

feat: allow org members to mark projects as favorites
2026-10-15 19:16:22 +00:00 · 2024-07-01 22:38:36 +08:00
parent 178ddf1fb9 06a4e68ac1
commit b8f65fc91a
9 changed files with 439 additions and 84 deletions
@@ -7,6 +7,7 @@ import {
 import { apiRequest } from "@app/config/request";

 import { workspaceKeys } from "../workspace/queries";
+import { userKeys } from "./queries";
 import { AddUserToWsDTOE2EE, AddUserToWsDTONonE2EE } from "./types";

 export const useAddUserToWsE2EE = () => {
@@ -88,3 +89,26 @@ export const useVerifyEmailVerificationCode = () => {
    }
  });
 };
+
+export const useUpdateUserProjectFavorites = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      orgId,
+      projectFavorites
+    }: {
+      orgId: string;
+      projectFavorites: string[];
+    }) => {
+      await apiRequest.put("/api/v1/user/me/project-favorites", {
+        orgId,
+        projectFavorites
+      });
+
+      return {};
+    },
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(userKeys.userProjectFavorites(orgId));
+    }
+  });
+};
@@ -22,11 +22,13 @@ export const userKeys = {
  getUser: ["user"] as const,
  getPrivateKey: ["user"] as const,
  userAction: ["user-action"] as const,
+  userProjectFavorites: (orgId: string) => [{ orgId }, "user-project-favorites"] as const,
  getOrgUsers: (orgId: string) => [{ orgId }, "user"],
  myIp: ["ip"] as const,
  myAPIKeys: ["api-keys"] as const,
  myAPIKeysV2: ["api-keys-v2"] as const,
  mySessions: ["sessions"] as const,
+
  myOrganizationProjects: (orgId: string) => [{ orgId }, "organization-projects"] as const
 };

@@ -74,6 +76,14 @@ export const fetchUserAction = async (action: string) => {
  return data.userAction || "";
 };

+export const fetchUserProjectFavorites = async (orgId: string) => {
+  const { data } = await apiRequest.get<{ projectFavorites: string[] }>(
+    `/api/v1/user/me/project-favorites?orgId=${orgId}`
+  );
+
+  return data.projectFavorites;
+};
+
 export const useRenameUser = () => {
  const queryClient = useQueryClient();

@@ -122,6 +132,12 @@ export const fetchOrgUsers = async (orgId: string) => {
  return data.users;
 };

+export const useGetUserProjectFavorites = (orgId: string) =>
+  useQuery({
+    queryKey: userKeys.userProjectFavorites(orgId),
+    queryFn: () => fetchUserProjectFavorites(orgId)
+  });
+
 export const useGetOrgUsers = (orgId: string) =>
  useQuery({
    queryKey: userKeys.getOrgUsers(orgId),
@@ -12,6 +12,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faStar } from "@fortawesome/free-regular-svg-icons";
 import {
  faAngleDown,
  faArrowLeft,
@@ -23,7 +24,8 @@ import {
  faInfo,
  faMobile,
  faPlus,
-  faQuestion
+  faQuestion,
+  faStar as faSolidStar
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -72,6 +74,9 @@ import {
  useRegisterUserAction,
  useSelectOrganization
 } from "@app/hooks/api";
+import { Workspace } from "@app/hooks/api/types";
+import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
+import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { navigateUserToOrg } from "@app/views/Login/Login.utils";
 import { CreateOrgModal } from "@app/views/Org/components";

@@ -122,6 +127,20 @@ export const AppLayout = ({ children }: LayoutProps) => {
  const { workspaces, currentWorkspace } = useWorkspace();
  const { orgs, currentOrg } = useOrganization();

+  const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg?.id!);
+  const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
+
+  const workspacesWithFaveProp = useMemo(
+    () =>
+      workspaces
+        .map((w): Workspace & { isFavorite: boolean } => ({
+          ...w,
+          isFavorite: Boolean(projectFavorites?.includes(w.id))
+        }))
+        .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite)),
+    [workspaces, projectFavorites]
+  );
+
  const { user } = useUser();
  const { subscription } = useSubscription();
  const workspaceId = currentWorkspace?.id || "";
@@ -271,6 +290,38 @@ export const AppLayout = ({ children }: LayoutProps) => {
    }
  };

+  const addProjectToFavorites = async (projectId: string) => {
+    try {
+      if (currentOrg?.id) {
+        await updateUserProjectFavorites({
+          orgId: currentOrg?.id,
+          projectFavorites: [...(projectFavorites || []), projectId]
+        });
+      }
+    } catch (err) {
+      createNotification({
+        text: "Failed to add project to favorites.",
+        type: "error"
+      });
+    }
+  };
+
+  const removeProjectFromFavorites = async (projectId: string) => {
+    try {
+      if (currentOrg?.id) {
+        await updateUserProjectFavorites({
+          orgId: currentOrg?.id,
+          projectFavorites: [...(projectFavorites || []).filter((entry) => entry !== projectId)]
+        });
+      }
+    } catch (err) {
+      createNotification({
+        text: "Failed to remove project from favorites.",
+        type: "error"
+      });
+    }
+  };
+
  return (
    <>
      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
@@ -451,19 +502,47 @@ export const AppLayout = ({ children }: LayoutProps) => {
                        dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50 max-h-96 border-gray-700"
                      >
                        <div className="no-scrollbar::-webkit-scrollbar h-full no-scrollbar">
-                          {workspaces
+                          {workspacesWithFaveProp
                            .filter((ws) => ws.orgId === currentOrg?.id)
-                            .map(({ id, name }) => (
-                              <SelectItem
-                                key={`ws-layout-list-${id}`}
-                                value={id}
+                            .map(({ id, name, isFavorite }) => (
+                              <div
                                className={twMerge(
-                                  currentWorkspace?.id === id && "bg-mineshaft-600",
-                                  "truncate"
+                                  "mb-1 grid grid-cols-7 rounded-md hover:bg-mineshaft-500",
+                                  id === currentWorkspace?.id && "bg-mineshaft-500"
                                )}
+                                key={id}
                              >
-                                {name}
-                              </SelectItem>
+                                <div className="col-span-6">
+                                  <SelectItem
+                                    key={`ws-layout-list-${id}`}
+                                    value={id}
+                                    className="transition-none data-[highlighted]:bg-mineshaft-500"
+                                  >
+                                    {name}
+                                  </SelectItem>
+                                </div>
+                                <div className="col-span-1 flex items-center">
+                                  {isFavorite ? (
+                                    <FontAwesomeIcon
+                                      icon={faSolidStar}
+                                      className="text-sm text-mineshaft-300 hover:text-mineshaft-400"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        removeProjectFromFavorites(id);
+                                      }}
+                                    />
+                                  ) : (
+                                    <FontAwesomeIcon
+                                      icon={faStar}
+                                      className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        addProjectToFavorites(id);
+                                      }}
+                                    />
+                                  )}
+                                </div>
+                              </div>
                            ))}
                        </div>
                        <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" />
@@ -1,6 +1,6 @@
 // REFACTOR(akhilmhdh): This file needs to be split into multiple components too complex

-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
@@ -8,7 +8,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faSlack } from "@fortawesome/free-brands-svg-icons";
-import { faFolderOpen } from "@fortawesome/free-regular-svg-icons";
+import { faFolderOpen, faStar } from "@fortawesome/free-regular-svg-icons";
 import {
  faArrowRight,
  faArrowUpRightFromSquare,
@@ -24,6 +24,7 @@ import {
  faNetworkWired,
  faPlug,
  faPlus,
+  faStar as faSolidStar,
  faUserPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -62,6 +63,9 @@ import {
 } from "@app/hooks/api";
 // import { fetchUserWsKey } from "@app/hooks/api/keys/queries";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { Workspace } from "@app/hooks/api/types";
+import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
+import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { usePopUp } from "@app/hooks/usePopUp";

 const features = [
@@ -485,7 +489,11 @@ const OrganizationPage = withPermission(
    const { currentOrg } = useOrganization();
    const routerOrgId = String(router.query.id);
    const orgWorkspaces = workspaces?.filter((workspace) => workspace.orgId === routerOrgId) || [];
+    const { data: projectFavorites, isLoading: isProjectFavoritesLoading } =
+      useGetUserProjectFavorites(currentOrg?.id!);
+    const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();

+    const isProjectViewLoading = isWorkspaceLoading || isProjectFavoritesLoading;
    const addUsersToProject = useAddUserToWsNonE2EE();

    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -570,56 +578,187 @@ const OrganizationPage = withPermission(
      ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())
    );

-    const projectsGridView = (
-      <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-        {isWorkspaceLoading &&
-          Array.apply(0, Array(3)).map((_x, i) => (
-            <div
-              key={`workspace-cards-loading-${i + 1}`}
-              className="min-w-72 flex h-40 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
-            >
-              <div className="mt-0 text-lg text-mineshaft-100">
-                <Skeleton className="w-3/4 bg-mineshaft-600" />
-              </div>
-              <div className="mt-0 pb-6 text-sm text-mineshaft-300">
-                <Skeleton className="w-1/2 bg-mineshaft-600" />
-              </div>
-              <div className="flex justify-end">
-                <Skeleton className="w-1/2 bg-mineshaft-600" />
-              </div>
-            </div>
-          ))}
-        {filteredWorkspaces.map((workspace) => (
-          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-          <div
-            onClick={() => {
-              router.push(`/project/${workspace.id}/secrets/overview`);
-              localStorage.setItem("projectData.id", workspace.id);
-            }}
-            key={workspace.id}
-            className="min-w-72 group flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
-          >
-            <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
-            <div className="mt-0 pb-6 text-sm text-mineshaft-300">
-              {workspace.environments?.length || 0} environments
-            </div>
-            <button type="button">
-              <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 transition-all group-hover:border-primary-500/80 group-hover:bg-primary-800/20 group-hover:text-mineshaft-200">
-                Explore{" "}
-                <FontAwesomeIcon
-                  icon={faArrowRight}
-                  className="pl-1.5 pr-0.5 duration-200 group-hover:pl-2 group-hover:pr-0"
-                />
-              </div>
-            </button>
+    const { workspacesWithFaveProp, favoriteWorkspaces, nonFavoriteWorkspaces } = useMemo(() => {
+      const workspacesWithFav = filteredWorkspaces
+        .map((w): Workspace & { isFavorite: boolean } => ({
+          ...w,
+          isFavorite: Boolean(projectFavorites?.includes(w.id))
+        }))
+        .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite));
+
+      const favWorkspaces = workspacesWithFav.filter((w) => w.isFavorite);
+      const nonFavWorkspaces = workspacesWithFav.filter((w) => !w.isFavorite);
+
+      return {
+        workspacesWithFaveProp: workspacesWithFav,
+        favoriteWorkspaces: favWorkspaces,
+        nonFavoriteWorkspaces: nonFavWorkspaces
+      };
+    }, [filteredWorkspaces, projectFavorites]);
+
+    const addProjectToFavorites = async (projectId: string) => {
+      try {
+        if (currentOrg?.id) {
+          await updateUserProjectFavorites({
+            orgId: currentOrg?.id,
+            projectFavorites: [...(projectFavorites || []), projectId]
+          });
+        }
+      } catch (err) {
+        createNotification({
+          text: "Failed to add project to favorites.",
+          type: "error"
+        });
+      }
+    };
+
+    const removeProjectFromFavorites = async (projectId: string) => {
+      try {
+        if (currentOrg?.id) {
+          await updateUserProjectFavorites({
+            orgId: currentOrg?.id,
+            projectFavorites: [...(projectFavorites || []).filter((entry) => entry !== projectId)]
+          });
+        }
+      } catch (err) {
+        createNotification({
+          text: "Failed to remove project from favorites.",
+          type: "error"
+        });
+      }
+    };
+
+    const renderProjectGridItem = (workspace: Workspace, isFavorite: boolean) => (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+      <div
+        onClick={() => {
+          router.push(`/project/${workspace.id}/secrets/overview`);
+          localStorage.setItem("projectData.id", workspace.id);
+        }}
+        key={workspace.id}
+        className="min-w-72 flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+      >
+        <div className="flex flex-row justify-between">
+          <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
+          {isFavorite ? (
+            <FontAwesomeIcon
+              icon={faSolidStar}
+              className="text-sm text-mineshaft-300 hover:text-mineshaft-400"
+              onClick={(e) => {
+                e.stopPropagation();
+                removeProjectFromFavorites(workspace.id);
+              }}
+            />
+          ) : (
+            <FontAwesomeIcon
+              icon={faStar}
+              className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
+              onClick={(e) => {
+                e.stopPropagation();
+                addProjectToFavorites(workspace.id);
+              }}
+            />
+          )}
+        </div>
+        <div className="mt-0 pb-6 text-sm text-mineshaft-300">
+          {workspace.environments?.length || 0} environments
+        </div>
+        <button type="button">
+          <div className="group ml-auto w-max cursor-pointer rounded-full border border-mineshaft-600 bg-mineshaft-900 py-2 px-4 text-sm text-mineshaft-300 transition-all hover:border-primary-500/80 hover:bg-primary-800/20 hover:text-mineshaft-200">
+            Explore{" "}
+            <FontAwesomeIcon
+              icon={faArrowRight}
+              className="pl-1.5 pr-0.5 duration-200 hover:pl-2 hover:pr-0"
+            />
          </div>
-        ))}
+        </button>
      </div>
    );

+    const renderProjectListItem = (workspace: Workspace, isFavorite: boolean, index: number) => (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+      <div
+        onClick={() => {
+          router.push(`/project/${workspace.id}/secrets/overview`);
+          localStorage.setItem("projectData.id", workspace.id);
+        }}
+        key={workspace.id}
+        className={`min-w-72 group grid h-14 cursor-pointer grid-cols-6 border-t border-l border-r border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
+          index === 0 && "rounded-t-md"
+        } ${index === filteredWorkspaces.length - 1 && "rounded-b-md border-b"}`}
+      >
+        <div className="flex items-center sm:col-span-3 lg:col-span-4">
+          <FontAwesomeIcon icon={faFileShield} className="text-sm text-primary/70" />
+          <div className="ml-5 truncate text-sm text-mineshaft-100">{workspace.name}</div>
+        </div>
+        <div className="flex items-center justify-end sm:col-span-3 lg:col-span-2">
+          <div className="text-center text-sm text-mineshaft-300">
+            {workspace.environments?.length || 0} environments
+          </div>
+          {isFavorite ? (
+            <FontAwesomeIcon
+              icon={faSolidStar}
+              className="ml-6 text-sm text-mineshaft-300 hover:text-mineshaft-400"
+              onClick={(e) => {
+                e.stopPropagation();
+                removeProjectFromFavorites(workspace.id);
+              }}
+            />
+          ) : (
+            <FontAwesomeIcon
+              icon={faStar}
+              className="ml-6 text-sm text-mineshaft-400 hover:text-mineshaft-300"
+              onClick={(e) => {
+                e.stopPropagation();
+                addProjectToFavorites(workspace.id);
+              }}
+            />
+          )}
+        </div>
+      </div>
+    );
+
+    const projectsGridView = (
+      <>
+        {favoriteWorkspaces.length > 0 && (
+          <>
+            <p className="mt-6 text-xl font-semibold text-white">Favorites</p>
+            <div
+              className={`b grid w-full grid-cols-1 gap-4 ${
+                nonFavoriteWorkspaces.length > 0 && "border-b border-mineshaft-600"
+              } py-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4`}
+            >
+              {favoriteWorkspaces.map((workspace) => renderProjectGridItem(workspace, true))}
+            </div>
+          </>
+        )}
+        <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          {isProjectViewLoading &&
+            Array.apply(0, Array(3)).map((_x, i) => (
+              <div
+                key={`workspace-cards-loading-${i + 1}`}
+                className="min-w-72 flex h-40 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+              >
+                <div className="mt-0 text-lg text-mineshaft-100">
+                  <Skeleton className="w-3/4 bg-mineshaft-600" />
+                </div>
+                <div className="mt-0 pb-6 text-sm text-mineshaft-300">
+                  <Skeleton className="w-1/2 bg-mineshaft-600" />
+                </div>
+                <div className="flex justify-end">
+                  <Skeleton className="w-1/2 bg-mineshaft-600" />
+                </div>
+              </div>
+            ))}
+          {!isProjectViewLoading &&
+            nonFavoriteWorkspaces.map((workspace) => renderProjectGridItem(workspace, false))}
+        </div>
+      </>
+    );
+
    const projectsListView = (
      <div className="mt-4 w-full rounded-md">
-        {isWorkspaceLoading &&
+        {isProjectViewLoading &&
          Array.apply(0, Array(3)).map((_x, i) => (
            <div
              key={`workspace-cards-loading-${i + 1}`}
@@ -630,29 +769,10 @@ const OrganizationPage = withPermission(
              <Skeleton className="w-full bg-mineshaft-600" />
            </div>
          ))}
-        {filteredWorkspaces.map((workspace, ind) => (
-          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-          <div
-            onClick={() => {
-              router.push(`/project/${workspace.id}/secrets/overview`);
-              localStorage.setItem("projectData.id", workspace.id);
-            }}
-            key={workspace.id}
-            className={`min-w-72 group grid h-14 cursor-pointer grid-cols-6 border-t border-l border-r border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
-              ind === 0 && "rounded-t-md"
-            } ${ind === filteredWorkspaces.length - 1 && "rounded-b-md border-b"}`}
-          >
-            <div className="flex items-center sm:col-span-3 lg:col-span-4">
-              <FontAwesomeIcon icon={faFileShield} className="text-sm text-primary/70" />
-              <div className="ml-5 truncate text-sm text-mineshaft-100">{workspace.name}</div>
-            </div>
-            <div className="flex items-center justify-end sm:col-span-3 lg:col-span-2">
-              <div className="text-center text-sm text-mineshaft-300">
-                {workspace.environments?.length || 0} environments
-              </div>
-            </div>
-          </div>
-        ))}
+        {!isProjectViewLoading &&
+          workspacesWithFaveProp.map((workspace, ind) =>
+            renderProjectListItem(workspace, workspace.isFavorite, ind)
+          )}
      </div>
    );