feat: add favorite applications (V2)

app/client/src/actions/applicationActions.ts

@@ -0,0 +1,41 @@
+import {
+  ReduxActionErrorTypes,
+  ReduxActionTypes,
+} from "ee/constants/ReduxActionConstants";
+import type { ApplicationPayload } from "entities/Application";
+
+export const toggleFavoriteApplication = (applicationId: string) => ({
+  type: ReduxActionTypes.TOGGLE_FAVORITE_APPLICATION_INIT,
+  payload: { applicationId },
+});
+
+export const toggleFavoriteApplicationSuccess = (
+  applicationId: string,
+  isFavorited: boolean,
+) => ({
+  type: ReduxActionTypes.TOGGLE_FAVORITE_APPLICATION_SUCCESS,
+  payload: { applicationId, isFavorited },
+});
+
+export const fetchFavoriteApplications = () => ({
+  type: ReduxActionTypes.FETCH_FAVORITE_APPLICATIONS_INIT,
+});
+
+export const fetchFavoriteApplicationsSuccess = (
+  applications: ApplicationPayload[],
+) => ({
+  type: ReduxActionTypes.FETCH_FAVORITE_APPLICATIONS_SUCCESS,
+  payload: applications,
+});
+
+export const fetchFavoriteApplicationsError = () => ({
+  type: ReduxActionErrorTypes.FETCH_FAVORITE_APPLICATIONS_ERROR,
+});
+
+export const toggleFavoriteApplicationError = (
+  applicationId: string,
+  error: unknown,
+) => ({
+  type: ReduxActionErrorTypes.TOGGLE_FAVORITE_APPLICATION_ERROR,
+  payload: { applicationId, error, show: false },
+});

app/client/src/ce/api/ApplicationApi.tsx

@@ -564,6 +564,16 @@ export class ApplicationApi extends Api {
       `${ApplicationApi.baseURL}/${applicationId}/static-url/suggest-app-slug`,
     );
   }
+
+  static async toggleFavoriteApplication(
+    applicationId: string,
+  ): Promise<AxiosPromise<ApiResponse>> {
+    return Api.put(`v1/users/applications/${applicationId}/favorite`);
+  }
+
+  static async getFavoriteApplications(): Promise<AxiosPromise<ApiResponse>> {
+    return Api.get("v1/users/favoriteApplications");
+  }
 }
 
 export default ApplicationApi;

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -679,6 +679,10 @@ const ApplicationActionTypes = {
   FORK_APPLICATION_INIT: "FORK_APPLICATION_INIT",
   FORK_APPLICATION_SUCCESS: "FORK_APPLICATION_SUCCESS",
   RESET_CURRENT_APPLICATION: "RESET_CURRENT_APPLICATION",
+  TOGGLE_FAVORITE_APPLICATION_INIT: "TOGGLE_FAVORITE_APPLICATION_INIT",
+  TOGGLE_FAVORITE_APPLICATION_SUCCESS: "TOGGLE_FAVORITE_APPLICATION_SUCCESS",
+  FETCH_FAVORITE_APPLICATIONS_INIT: "FETCH_FAVORITE_APPLICATIONS_INIT",
+  FETCH_FAVORITE_APPLICATIONS_SUCCESS: "FETCH_FAVORITE_APPLICATIONS_SUCCESS",
 };
 
 const ApplicationActionErrorTypes = {
@@ -692,6 +696,8 @@ const ApplicationActionErrorTypes = {
   FETCH_APP_SLUG_SUGGESTION_ERROR: "FETCH_APP_SLUG_SUGGESTION_ERROR",
   ENABLE_STATIC_URL_ERROR: "ENABLE_STATIC_URL_ERROR",
   DISABLE_STATIC_URL_ERROR: "DISABLE_STATIC_URL_ERROR",
+  TOGGLE_FAVORITE_APPLICATION_ERROR: "TOGGLE_FAVORITE_APPLICATION_ERROR",
+  FETCH_FAVORITE_APPLICATIONS_ERROR: "FETCH_FAVORITE_APPLICATIONS_ERROR",
 };
 
 const IDEDebuggerActionTypes = {

app/client/src/ce/constants/workspaceConstants.ts

@@ -1,3 +1,12 @@
+export const FAVORITES_KEY = "__favorites__";
+
+export const DEFAULT_FAVORITES_WORKSPACE = {
+  id: FAVORITES_KEY,
+  name: "Favorites",
+  isVirtual: true,
+  userPermissions: [] as string[],
+};
+
 export interface WorkspaceRole {
   id: string;
   name: string;
@@ -13,6 +22,7 @@ export interface Workspace {
   logoUrl?: string;
   uploadProgress?: number;
   userPermissions?: string[];
+  isVirtual?: boolean;
 }
 
 export interface WorkspaceUserRoles {

app/client/src/ce/pages/Applications/index.tsx

@@ -35,10 +35,16 @@ import {
   getIsCreatingApplication,
   getIsDeletingApplication,
 } from "ee/selectors/applicationSelectors";
+import { getHasFavorites } from "ee/selectors/applicationSelectors";
+import {
+  DEFAULT_FAVORITES_WORKSPACE,
+  FAVORITES_KEY,
+} from "ee/constants/workspaceConstants";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { Position } from "@blueprintjs/core/lib/esm/common/position";
 import { leaveWorkspace } from "actions/userActions";
 import NoSearchImage from "assets/images/NoSearchResult.svg";
+import HeartIconRed from "assets/icons/ads/heart-fill-red.svg";
 import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
 import {
   thinScrollbar,
@@ -330,7 +336,6 @@ export function LeftPaneSection(props: {
       },
       dispatch,
     );
-    dispatch(fetchAllWorkspaces());
   };
 
   return (
@@ -475,13 +480,32 @@ export function WorkspaceMenuItem({
 
   if (!workspace.id) return null;
 
+  const isFavoritesWorkspace = workspace.id === FAVORITES_KEY;
   const hasLogo = workspace?.logoUrl && !imageError;
   const displayText = isFetchingWorkspaces
     ? workspace?.name
     : workspace?.name?.length > 22
       ? workspace.name.slice(0, 22).concat(" ...")
       : workspace?.name;
 
+  // Use custom component for favorites workspace with heart icon
+  if (isFavoritesWorkspace && !isFetchingWorkspaces) {
+    return (
+      <WorkspaceItemRow
+        className={selected ? "selected-workspace" : ""}
+        onClick={handleWorkspaceClick}
+        selected={selected}
+      >
+        <WorkspaceIconContainer>
+          <WorkspaceLogoImage alt="Favorites" src={HeartIconRed} />
+          <Text type={TextType.H5} weight={FontWeight.NORMAL}>
+            {displayText}
+          </Text>
+        </WorkspaceIconContainer>
+      </WorkspaceItemRow>
+    );
+  }
+
   // Use custom component when there's a logo, otherwise use ListItem
   if (hasLogo && !isFetchingWorkspaces) {
     const showTooltip = workspace?.name && workspace.name.length > 22;
@@ -1120,6 +1144,7 @@ export const ApplictionsMainPage = (props: any) => {
   const isFetchingOrganizations = useSelector(getIsFetchingMyOrganizations);
   const currentOrganizationId = useSelector(activeOrganizationId);
   const isCloudBillingEnabled = useIsCloudBillingEnabled();
+  const hasFavorites = useSelector(getHasFavorites);
 
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1135,6 +1160,14 @@ export const ApplictionsMainPage = (props: any) => {
     ) as any;
   }
 
+  // Inject virtual Favorites workspace at the top if user has favorites or URL is Favorites (e.g. after 404 redirect)
+  if (
+    (hasFavorites || workspaceIdFromQueryParams === FAVORITES_KEY) &&
+    !isFetchingWorkspaces
+  ) {
+    workspaces = [DEFAULT_FAVORITES_WORKSPACE, ...workspaces];
+  }
+
   const [activeWorkspaceId, setActiveWorkspaceId] = useState<
     string | undefined
   >(
@@ -1159,10 +1192,14 @@ export const ApplictionsMainPage = (props: any) => {
       fetchedWorkspaceId &&
       fetchedWorkspaceId !== activeWorkspaceId
     ) {
-      const activeWorkspace: Workspace = workspaces.find(
+      let activeWorkspace: Workspace | undefined = workspaces.find(
         (workspace: Workspace) => workspace.id === activeWorkspaceId,
       );
 
+      if (!activeWorkspace && activeWorkspaceId === FAVORITES_KEY) {
+        activeWorkspace = DEFAULT_FAVORITES_WORKSPACE;
+      }
+
       if (activeWorkspace) {
         dispatch({
           type: ReduxActionTypes.SET_CURRENT_WORKSPACE,

app/client/src/ce/reducers/uiReducers/applicationsReducer.tsx

@@ -35,6 +35,8 @@ export const initialState: ApplicationsReduxState = {
   creatingApplication: {},
   deletingApplication: false,
   forkingApplication: false,
+  favoriteApplicationIds: [],
+  isFetchingFavorites: false,
   importingApplication: false,
   importedApplication: null,
   isImportAppModalOpen: false,
@@ -881,6 +883,48 @@ export const handlers = {
       isPersistingAppSlug: false,
     };
   },
+  [ReduxActionTypes.TOGGLE_FAVORITE_APPLICATION_SUCCESS]: (
+    state: ApplicationsReduxState,
+    action: ReduxAction<{ applicationId: string; isFavorited: boolean }>,
+  ) => {
+    const { applicationId, isFavorited } = action.payload;
+    const matchedApp = state.applicationList.find(
+      (app) => (app.baseId || app.id) === applicationId,
+    );
+    const canonicalId = matchedApp ? matchedApp.id : applicationId;
+
+    return {
+      ...state,
+      favoriteApplicationIds: isFavorited
+        ? [...state.favoriteApplicationIds, canonicalId]
+        : state.favoriteApplicationIds.filter((id) => id !== canonicalId),
+      applicationList: state.applicationList.map((app) =>
+        (app.baseId || app.id) === applicationId
+          ? { ...app, isFavorited }
+          : app,
+      ),
+    };
+  },
+  [ReduxActionTypes.FETCH_FAVORITE_APPLICATIONS_INIT]: (
+    state: ApplicationsReduxState,
+  ) => ({
+    ...state,
+    isFetchingFavorites: true,
+  }),
+  [ReduxActionTypes.FETCH_FAVORITE_APPLICATIONS_SUCCESS]: (
+    state: ApplicationsReduxState,
+    action: ReduxAction<ApplicationPayload[]>,
+  ) => ({
+    ...state,
+    isFetchingFavorites: false,
+    favoriteApplicationIds: action.payload.map((app) => app.id),
+  }),
+  [ReduxActionErrorTypes.FETCH_FAVORITE_APPLICATIONS_ERROR]: (
+    state: ApplicationsReduxState,
+  ) => ({
+    ...state,
+    isFetchingFavorites: false,
+  }),
 };
 
 const applicationsReducer = createReducer(initialState, handlers);
@@ -898,6 +942,8 @@ export interface ApplicationsReduxState {
   createApplicationError?: string;
   deletingApplication: boolean;
   forkingApplication: boolean;
+  favoriteApplicationIds: string[];
+  isFetchingFavorites: boolean;
   currentApplication?: ApplicationPayload;
   importingApplication: boolean;
   importedApplication: unknown;

app/client/src/ce/reducers/uiReducers/selectedWorkspaceReducer.ts

@@ -10,6 +10,7 @@ import type {
   WorkspaceUser,
   WorkspaceUserRoles,
 } from "ee/constants/workspaceConstants";
+import { FAVORITES_KEY } from "ee/constants/workspaceConstants";
 import type { Package } from "ee/constants/PackageConstants";
 import type { UpdateApplicationRequest } from "ee/api/ApplicationApi";
 
@@ -20,6 +21,7 @@ export interface SelectedWorkspaceReduxState {
   packages: Package[];
   loadingStates: {
     isFetchingApplications: boolean;
+    isFetchingFavoriteApplications: boolean;
     isFetchingAllUsers: boolean;
     isFetchingCurrentWorkspace: boolean;
   };
@@ -35,6 +37,7 @@ export const initialState: SelectedWorkspaceReduxState = {
   packages: [],
   loadingStates: {
     isFetchingApplications: false,
+    isFetchingFavoriteApplications: false,
     isFetchingAllUsers: false,
     isFetchingCurrentWorkspace: false,
   },
@@ -59,6 +62,30 @@ export const handlers = {
   ) => {
     draftState.loadingStates.isFetchingApplications = false;
   },
+  // Handle favorites workspace - populate applications with favorite apps
+  [ReduxActionTypes.FETCH_FAVORITE_APPLICATIONS_INIT]: (
+    draftState: SelectedWorkspaceReduxState,
+  ) => {
+    draftState.loadingStates.isFetchingFavoriteApplications = true;
+  },
+  [ReduxActionTypes.FETCH_FAVORITE_APPLICATIONS_SUCCESS]: (
+    draftState: SelectedWorkspaceReduxState,
+    action: ReduxAction<ApplicationPayload[]>,
+  ) => {
+    draftState.loadingStates.isFetchingFavoriteApplications = false;
+
+    // Only replace applications when we're in the virtual favorites workspace.
+    // This prevents overwriting a real workspace's applications when favorites
+    // are fetched in the background.
+    if (draftState.workspace.id === FAVORITES_KEY) {
+      draftState.applications = action.payload;
+    }
+  },
+  [ReduxActionErrorTypes.FETCH_FAVORITE_APPLICATIONS_ERROR]: (
+    draftState: SelectedWorkspaceReduxState,
+  ) => {
+    draftState.loadingStates.isFetchingFavoriteApplications = false;
+  },
   [ReduxActionTypes.DELETE_APPLICATION_SUCCESS]: (
     draftState: SelectedWorkspaceReduxState,
     action: ReduxAction<ApplicationPayload>,
@@ -242,6 +269,25 @@ export const handlers = {
   ) => {
     draftState.loadingStates.isFetchingCurrentWorkspace = false;
   },
+  [ReduxActionTypes.TOGGLE_FAVORITE_APPLICATION_SUCCESS]: (
+    draftState: SelectedWorkspaceReduxState,
+    action: ReduxAction<{ applicationId: string; isFavorited: boolean }>,
+  ) => {
+    const { applicationId, isFavorited } = action.payload;
+    const isFavoritesWorkspace = draftState.workspace.id === FAVORITES_KEY;
+
+    if (isFavoritesWorkspace && !isFavorited) {
+      draftState.applications = draftState.applications.filter(
+        (app) => (app.baseId || app.id) !== applicationId,
+      );
+    } else {
+      draftState.applications = draftState.applications.map((app) =>
+        (app.baseId || app.id) === applicationId
+          ? { ...app, isFavorited }
+          : app,
+      );
+    }
+  },
 };
 
 const selectedWorkspaceReducer = createImmerReducer(initialState, handlers);