[OPIK-117] [Open-source] Use new Opik logo for open-source platform (#…

…284)

apps/opik-frontend/src/components/layout/EmptyLayout/EmptyLayout.tsx

@@ -1,23 +1,27 @@
+import React from "react";
 import useAppStore from "@/store/AppStore";
 import usePluginsStore from "@/store/PluginsStore";
 import { Link, Outlet } from "@tanstack/react-router";
-import imageLogoUrl from "/images/logo_and_text.png";
+import Logo from "@/components/layout/Logo/Logo";
 
-const PageLayout = () => {
+const EmptyLayout = () => {
   const UserMenu = usePluginsStore((state) => state.UserMenu);
+  const LogoComponent = usePluginsStore((state) => state.Logo);
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
 
+  const logo = LogoComponent ? (
+    <LogoComponent expanded={false} />
+  ) : (
+    <Logo expanded={false} />
+  );
+
   return (
     <section className="relative flex h-screen min-h-0 w-screen min-w-0 flex-col overflow-hidden">
       <main>
         <nav className="comet-header-height flex w-full items-center justify-between gap-6 border-b pl-4 pr-6">
           <div className="flex-1">
             <Link to="/$workspaceName/projects" params={{ workspaceName }}>
-              <img
-                className="h-8 w-[26px] object-cover object-left"
-                src={imageLogoUrl}
-                alt="comet logo"
-              />
+              {logo}
             </Link>
           </div>
 
@@ -32,4 +36,4 @@ const PageLayout = () => {
   );
 };
 
-export default PageLayout;
+export default EmptyLayout;

apps/opik-frontend/src/components/layout/Logo/Logo.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import imageLogoUrl from "/images/opik-logo.png";
+
+type LogoProps = {
+  expanded: boolean;
+};
+
+const Logo: React.FunctionComponent<LogoProps> = ({ expanded }) => {
+  return (
+    <img
+      className={cn("h-8 object-cover object-left -ml-[3px] mr-[3px]", {
+        "w-[32px]": !expanded,
+      })}
+      src={imageLogoUrl}
+      alt="opik logo"
+    />
+  );
+};
+
+export default Logo;

apps/opik-frontend/src/components/layout/SideBar/SideBar.tsx

@@ -16,10 +16,11 @@ import useDatasetsList from "@/api/datasets/useDatasetsList";
 import useExperimentsList from "@/api/datasets/useExperimentsList";
 import useFeedbackDefinitionsList from "@/api/feedback-definitions/useFeedbackDefinitionsList";
 import { OnChangeFn } from "@/types/shared";
-import imageLogoUrl from "/images/logo_and_text.png";
 import { Button } from "@/components/ui/button";
 import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
 import { cn } from "@/lib/utils";
+import Logo from "@/components/layout/Logo/Logo";
+import usePluginsStore from "@/store/PluginsStore";
 
 const ITEMS = [
   {
@@ -61,6 +62,7 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({
 }) => {
   const matchRoute = useMatchRoute();
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
+  const LogoComponent = usePluginsStore((state) => state.Logo);
 
   const isHomePath = matchRoute({
     to: HOME_PATH,
@@ -133,6 +135,12 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({
     }
   };
 
+  const logo = LogoComponent ? (
+    <LogoComponent expanded={expanded} />
+  ) : (
+    <Logo expanded={expanded} />
+  );
+
   const renderItems = () => {
     return ITEMS.map((item) => {
       const hasCount = item.count && isNumber(countDataMap[item.count]);
@@ -182,13 +190,7 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({
           params={{ workspaceName }}
           onClick={logoClickHandler}
         >
-          <img
-            className={cn("h-8 object-cover object-left", {
-              "w-[26px]": !expanded,
-            })}
-            src={imageLogoUrl}
-            alt="comet logo"
-          />
+          {logo}
         </Link>
         {expanded && (
           <Button

apps/opik-frontend/src/plugins/comet/Logo.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import imageLogoUrl from "/images/comet-logo.png";
+
+type LogoProps = {
+  expanded: boolean;
+};
+
+const Logo: React.FunctionComponent<LogoProps> = ({ expanded }) => {
+  return (
+    <img
+      className={cn("h-8 object-cover object-left", {
+        "w-[26px]": !expanded,
+      })}
+      src={imageLogoUrl}
+      alt="comet logo"
+    />
+  );
+};
+
+export default Logo;

apps/opik-frontend/src/plugins/comet/WorkspacePreloader.tsx

@@ -1,19 +1,19 @@
 import React from "react";
-
-import Loader from "@/components/shared/Loader/Loader";
-import { DEFAULT_WORKSPACE_NAME } from "@/constants/user";
-import useAppStore from "@/store/AppStore";
+import { MoveLeft } from "lucide-react";
 import {
   Link,
   Navigate,
   useMatchRoute,
   useParams,
 } from "@tanstack/react-router";
-import { MoveLeft } from "lucide-react";
+
+import Loader from "@/components/shared/Loader/Loader";
+import { DEFAULT_WORKSPACE_NAME } from "@/constants/user";
+import useAppStore from "@/store/AppStore";
 import useUser from "./useUser";
 import { buildUrl } from "./utils";
-import imageLogoUrl from "/images/logo_and_text.png";
-import useSegment from "@/plugins/comet/analytics/useSegment";
+import useSegment from "./analytics/useSegment";
+import Logo from "./Logo";
 
 type WorkspacePreloaderProps = {
   children: React.ReactNode;
@@ -77,11 +77,7 @@ const WorkspacePreloader: React.FunctionComponent<WorkspacePreloaderProps> = ({
               className="absolute left-[18px] z-10 block"
               params={{ workspaceName: defaultWorkspace.teamName }}
             >
-              <img
-                className="h-8 object-cover object-left"
-                src={imageLogoUrl}
-                alt="comet logo"
-              />
+              <Logo expanded />
             </Link>
           </nav>
 

apps/opik-frontend/src/store/PluginsStore.ts

@@ -4,24 +4,27 @@ import { create } from "zustand";
 import WorkspacePreloader from "@/components/shared/WorkspacePreloader/WorkspacePreloader";
 
 type PluginStore = {
-  GetStartedPage: React.ComponentType | null;
+  Logo: React.ComponentType<{ expanded: boolean }> | null;
   UserMenu: React.ComponentType | null;
+  GetStartedPage: React.ComponentType | null;
   WorkspacePreloader: React.ComponentType<{ children: React.ReactNode }> | null;
   init: unknown;
   setupPlugins: (folderName: string) => Promise<void>;
 };
 
 const VALID_PLUGIN_FOLDER_NAMES = ["comet"];
 const PLUGIN_NAMES = [
-  "GetStartedPage",
+  "Logo",
   "UserMenu",
+  "GetStartedPage",
   "WorkspacePreloader",
   "init",
 ];
 
 const usePluginsStore = create<PluginStore>((set) => ({
-  GetStartedPage: null,
+  Logo: null,
   UserMenu: null,
+  GetStartedPage: null,
   WorkspacePreloader: null,
   init: null,
   setupPlugins: async (folderName: string) => {