feat: display workspace logos in sidebar navigation (#41377)

salevine · web-flow · commit be741e696513 · 2025-12-09T08:34:39.000-05:00
- Modified Workspace.java to return null for logoUrl when no logo exists - Updated workspace reducer to sync logo changes to search results - Enhanced WorkspaceMenuItem to display uploaded logos with fallback to default icon - Added proper error handling and styling for workspace logo display ## Description > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #`41376` ## Automation /ok-to-test tags="@tag.Workspace" ### 🔍 Cypress test results  > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/20007050511> > Commit: 3dc1661 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=20007050511&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Workspace` > Spec: > <hr>Sun, 07 Dec 2025 16:47:49 UTC  ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No  ## Summary by CodeRabbit * **New Features** * Workspace menu items and left navigation now show workspace logos when available, with a compact row layout, improved hover/selected styling, and graceful image fallback. * Search results items use the same logo-aware row for consistent navigation and click behavior. * **Bug Fixes** * Missing or failed workspace logos no longer trigger unnecessary asset requests and fall back to text/icon display. * Search results stay synchronized when workspace details are updated. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
diff --git a/app/client/src/ce/pages/Applications/index.tsx b/app/client/src/ce/pages/Applications/index.tsx
@@ -60,6 +60,7 @@ import {
   MenuItem as ListItem,
   Text,
   TextType,
+  FontWeight,
 } from "@appsmith/ads-old";
 import { loadingUserWorkspaces } from "pages/Applications/ApplicationLoaders";
 import PageWrapper from "pages/common/PageWrapper";
@@ -395,6 +396,59 @@ export const textIconStyles = (props: { color: string; hover: string }) => {
   `;
 };
 
+const WorkspaceItemRow = styled.a<{ disabled?: boolean; selected?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  padding: 0px var(--ads-spaces-6);
+  background-color: ${(props) =>
+    props.selected ? "var(--ads-v2-color-bg-muted)" : "transparent"};
+  .${Classes.TEXT} {
+    color: var(--ads-v2-color-fg);
+  }
+  .${Classes.ICON} {
+    svg {
+      path {
+        fill: var(--ads-v2-color-fg);
+      }
+    }
+  }
+  height: 38px;
+
+  ${(props) =>
+    !props.disabled
+      ? `
+    &:hover {
+      text-decoration: none;
+      cursor: pointer;
+      background-color: var(--ads-v2-color-bg-subtle);
+      border-radius: var(--ads-v2-border-radius);
+    }`
+      : `
+    &:hover {
+      text-decoration: none;
+      cursor: default;
+    }
+    `}
+`;
+
+const WorkspaceIconContainer = styled.span`
+  display: flex;
+  align-items: center;
+
+  .${Classes.ICON} {
+    margin-right: var(--ads-spaces-5);
+  }
+`;
+
+const WorkspaceLogoImage = styled.img`
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+  margin-right: var(--ads-spaces-5);
+`;
+
 export function WorkspaceMenuItem({
   isFetchingWorkspaces,
   selected,
@@ -403,6 +457,7 @@ export function WorkspaceMenuItem({
 }: any) {
   const history = useHistory();
   const location = useLocation();
+  const [imageError, setImageError] = React.useState(false);
 
   const handleWorkspaceClick = () => {
     const workspaceId = workspace?.id;
@@ -414,8 +469,50 @@ export function WorkspaceMenuItem({
     }
   };
 
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
   if (!workspace.id) return null;
 
+  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 when there's a logo, otherwise use ListItem
+  if (hasLogo && !isFetchingWorkspaces) {
+    const showTooltip = workspace?.name && workspace.name.length > 22;
+    const itemContent = (
+      <WorkspaceItemRow
+        className={selected ? "selected-workspace" : ""}
+        onClick={handleWorkspaceClick}
+        selected={selected}
+      >
+        <WorkspaceIconContainer>
+          <WorkspaceLogoImage
+            alt={`${workspace.name} logo`}
+            onError={handleImageError}
+            src={workspace.logoUrl}
+          />
+          <Text type={TextType.H5} weight={FontWeight.NORMAL}>
+            {displayText}
+          </Text>
+        </WorkspaceIconContainer>
+      </WorkspaceItemRow>
+    );
+
+    return showTooltip ? (
+      <Tooltip content={workspace?.name} placement="bottomLeft">
+        {itemContent}
+      </Tooltip>
+    ) : (
+      itemContent
+    );
+  }
+
   return (
     <ListItem
       className={selected ? "selected-workspace" : ""}
diff --git a/app/client/src/ce/reducers/uiReducers/workspaceReducer.ts b/app/client/src/ce/reducers/uiReducers/workspaceReducer.ts
@@ -108,6 +108,21 @@ export const handlers = {
 
     draftState.loadingStates.isSavingWorkspaceInfo = false;
     draftState.list = [...workspaces];
+
+    // Also update searchEntities if they exist to keep search results in sync
+    if (draftState.searchEntities?.workspaces) {
+      const searchWorkspaceIndex =
+        draftState.searchEntities.workspaces.findIndex(
+          (workspace: Workspace) => workspace.id === action.payload.id,
+        );
+
+      if (searchWorkspaceIndex !== -1) {
+        draftState.searchEntities.workspaces[searchWorkspaceIndex] = {
+          ...draftState.searchEntities.workspaces[searchWorkspaceIndex],
+          ...action.payload,
+        };
+      }
+    }
   },
   [ReduxActionErrorTypes.SAVE_WORKSPACE_ERROR]: (
     draftState: WorkspaceReduxState,
diff --git a/app/client/src/pages/common/SearchBar/WorkspaceSearchItems.tsx b/app/client/src/pages/common/SearchBar/WorkspaceSearchItems.tsx
@@ -1,6 +1,6 @@
 import type { Workspace } from "ee/constants/workspaceConstants";
 import { Icon, Text } from "@appsmith/ads";
-import React from "react";
+import React, { useState } from "react";
 import { useHistory } from "react-router";
 import styled from "styled-components";
 
@@ -15,14 +15,68 @@ export const SearchListItem = styled.div`
   }
 `;
 
+const WorkspaceLogoImage = styled.img`
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  object-fit: contain;
+  margin-right: 8px;
+`;
+
 interface Props {
   workspacesList: Workspace[] | undefined;
   setIsDropdownOpen: (isOpen: boolean) => void;
 }
 
+interface WorkspaceItemProps {
+  workspace: Workspace;
+  setIsDropdownOpen: (isOpen: boolean) => void;
+}
+
+const WorkspaceItem = ({
+  setIsDropdownOpen,
+  workspace,
+}: WorkspaceItemProps) => {
+  const history = useHistory();
+  const [imageError, setImageError] = useState(false);
+  const hasLogo = workspace.logoUrl && !imageError;
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  return (
+    <SearchListItem
+      data-testid={workspace.name}
+      onClick={() => {
+        setIsDropdownOpen(false);
+        history.push(`/applications?workspaceId=${workspace?.id}`);
+      }}
+    >
+      {hasLogo ? (
+        <WorkspaceLogoImage
+          alt={`${workspace.name} logo`}
+          onError={handleImageError}
+          src={workspace.logoUrl}
+        />
+      ) : (
+        <Icon
+          className="!mr-2"
+          color="var(--ads-v2-color-fg)"
+          name="group-2-line"
+          size="md"
+        />
+      )}
+      <Text className="truncate" kind="body-m">
+        {workspace.name}
+      </Text>
+    </SearchListItem>
+  );
+};
+
 const WorkspaceSearchItems = (props: Props) => {
   const { setIsDropdownOpen, workspacesList } = props;
-  const history = useHistory();
 
   if (!workspacesList || workspacesList?.length === 0) return null;
 
@@ -32,24 +86,11 @@ const WorkspaceSearchItems = (props: Props) => {
         Workspaces
       </Text>
       {workspacesList.map((workspace: Workspace) => (
-        <SearchListItem
-          data-testid={workspace.name}
+        <WorkspaceItem
           key={workspace.id}
-          onClick={() => {
-            setIsDropdownOpen(false);
-            history.push(`/applications?workspaceId=${workspace?.id}`);
-          }}
-        >
-          <Icon
-            className="!mr-2"
-            color="var(--ads-v2-color-fg)"
-            name="group-2-line"
-            size="md"
-          />
-          <Text className="truncate" kind="body-m">
-            {workspace.name}
-          </Text>
-        </SearchListItem>
+          setIsDropdownOpen={setIsDropdownOpen}
+          workspace={workspace}
+        />
       ))}
     </div>
   );
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Workspace.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Workspace.java
@@ -71,6 +71,11 @@ public static String toSlug(String text) {
 
     @JsonView(Views.Public.class)
     public String getLogoUrl() {
+        // If there's no logo, return null instead of constructing a URL like "/api/v1/assets/null"
+        // This prevents the frontend from making pointless requests to load a non-existent image
+        if (logoAssetId == null || logoAssetId.isEmpty()) {
+            return null;
+        }
         return Url.ASSET_URL + "/" + logoAssetId;
     }
 
