From 5fd4da922a40e4b9201a2fe8bdced9bf6717f2db Mon Sep 17 00:00:00 2001 From: Yaroslav Boiko Date: Wed, 22 Jan 2025 13:55:05 +0100 Subject: [PATCH 1/3] [OPIK-759] implement side dialog component and log a trace dialog --- apps/opik-frontend/package-lock.json | 2 +- apps/opik-frontend/package.json | 2 +- .../FrameworkIntegrations.tsx | 79 ++-------- .../FrameworkIntegrationsContent.tsx | 87 +++++++++++ .../pages/GetStartedPage/GetStarted.tsx | 17 +-- .../pages/HomePage/GetStartedSection.tsx | 39 +++-- .../pages/QuickstartPage/Quickstart.tsx | 17 +-- .../shared/SideDialog/SideDialog.tsx | 24 +++ .../opik-frontend/src/components/ui/sheet.tsx | 143 ++++++++++++++++++ .../plugins/comet/FrameworkIntegrations.tsx | 20 +++ apps/opik-frontend/src/store/PluginsStore.ts | 6 + 11 files changed, 330 insertions(+), 106 deletions(-) create mode 100644 apps/opik-frontend/src/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrationsContent.tsx create mode 100644 apps/opik-frontend/src/components/shared/SideDialog/SideDialog.tsx create mode 100644 apps/opik-frontend/src/components/ui/sheet.tsx create mode 100644 apps/opik-frontend/src/plugins/comet/FrameworkIntegrations.tsx diff --git a/apps/opik-frontend/package-lock.json b/apps/opik-frontend/package-lock.json index 162d6a5016..bf186b6f44 100644 --- a/apps/opik-frontend/package-lock.json +++ b/apps/opik-frontend/package-lock.json @@ -17,7 +17,7 @@ "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-checkbox": "^1.1.1", - "@radix-ui/react-dialog": "1.1.0", + "@radix-ui/react-dialog": "^1.1.0", "@radix-ui/react-dropdown-menu": "2.1.1", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "1.1.1", diff --git a/apps/opik-frontend/package.json b/apps/opik-frontend/package.json index 20636407fb..863de674b2 100644 --- a/apps/opik-frontend/package.json +++ b/apps/opik-frontend/package.json @@ -34,7 +34,7 @@ "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-checkbox": "^1.1.1", - "@radix-ui/react-dialog": "1.1.0", + "@radix-ui/react-dialog": "^1.1.0", "@radix-ui/react-dropdown-menu": "2.1.1", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "1.1.1", diff --git a/apps/opik-frontend/src/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrations.tsx b/apps/opik-frontend/src/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrations.tsx index 78fa873acd..34f6b3c63d 100644 --- a/apps/opik-frontend/src/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrations.tsx +++ b/apps/opik-frontend/src/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrations.tsx @@ -1,69 +1,22 @@ -import React, { useState } from "react"; -import { FrameworkIntegration } from "./types"; -import { Button } from "@/components/ui/button"; -import { buildDocsUrl } from "@/lib/utils"; -import { SquareArrowOutUpRight } from "lucide-react"; -import ApiKeyCard from "../ApiKeyCard/ApiKeyCard"; -import GoogleColabCard from "../GoogleColabCard/GoogleColabCard"; -import IntegrationTemplate from "./IntegrationTemplate"; +import usePluginsStore from "@/store/PluginsStore"; +import FrameworkIntegrationsContent, { + FrameworkIntegrationsContentProps, +} from "./FrameworkIntegrationsContent"; -type FrameworkIntegrationsProps = { - integrationList: FrameworkIntegration[]; - apiKey?: string; - showColabLinks?: boolean; -}; -const FrameworkIntegrations: React.FC = ({ - integrationList, - apiKey, - showColabLinks, -}) => { - const [integrationIndex, setIntegrationIndex] = useState(0); - const integration = integrationList[integrationIndex]; +export type FrameworkIntegrationsProps = Omit< + FrameworkIntegrationsContentProps, + "apiKey" | "showColabLinks" +>; +const FrameworkIntegrations: React.FC = (props) => { + const FrameworkIntegrations = usePluginsStore( + (state) => state.FrameworkIntegrations, + ); - return ( -
-
-

Select framework

-
    - {integrationList.map((item, index) => ( -
  • setIntegrationIndex(index)} - data-status={index === integrationIndex ? "active" : "inactive"} - > - {item.label} -
    {item.label}
    -
    • - ))} -
- -
-
-
- -
+ if (FrameworkIntegrations) { + return ; + } -
- {apiKey && } - {showColabLinks ? : null} -
-
-
- ); + return ; }; export default FrameworkIntegrations; diff --git a/apps/opik-frontend/src/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrationsContent.tsx b/apps/opik-frontend/src/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrationsContent.tsx new file mode 100644 index 0000000000..8773e28caa --- /dev/null +++ b/apps/opik-frontend/src/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrationsContent.tsx @@ -0,0 +1,87 @@ +import React, { useState } from "react"; +import { FrameworkIntegration } from "./types"; +import { Button } from "@/components/ui/button"; +import { buildDocsUrl } from "@/lib/utils"; +import { SquareArrowOutUpRight } from "lucide-react"; +import ApiKeyCard from "../ApiKeyCard/ApiKeyCard"; +import GoogleColabCard from "../GoogleColabCard/GoogleColabCard"; +import IntegrationTemplate from "./IntegrationTemplate"; +import { QUICKSTART_INTEGRATIONS } from "./quickstart-integrations"; +import { cn } from "@/lib/utils"; + +export type FrameworkIntegrationsContentProps = { + integrationList?: FrameworkIntegration[]; + apiKey?: string; + showColabLinks?: boolean; + stickyOffset?: number; +}; +const FrameworkIntegrationsContent: React.FC< + FrameworkIntegrationsContentProps +> = ({ + integrationList = QUICKSTART_INTEGRATIONS, + apiKey, + showColabLinks, + stickyOffset = 0, +}) => { + const [integrationIndex, setIntegrationIndex] = useState(0); + const integration = integrationList[integrationIndex]; + + const stickyOffsetStyle = `top-${stickyOffset}`; + + return ( +
+
+

Select framework

+
    + {integrationList.map((item, index) => ( +
  • setIntegrationIndex(index)} + data-status={index === integrationIndex ? "active" : "inactive"} + > + {item.label} +
    {item.label}
    +
    • + ))} +
+ +
+
+
+ +
+ +
+ {apiKey && } + {showColabLinks ? : null} +
+
+
+ ); +}; + +export default FrameworkIntegrationsContent; diff --git a/apps/opik-frontend/src/components/pages/GetStartedPage/GetStarted.tsx b/apps/opik-frontend/src/components/pages/GetStartedPage/GetStarted.tsx index 74d05706f1..71d6c8998a 100644 --- a/apps/opik-frontend/src/components/pages/GetStartedPage/GetStarted.tsx +++ b/apps/opik-frontend/src/components/pages/GetStartedPage/GetStarted.tsx @@ -2,18 +2,9 @@ import React from "react"; import { Button } from "@/components/ui/button"; import { Link } from "@tanstack/react-router"; import useAppStore from "@/store/AppStore"; -import { QUICKSTART_INTEGRATIONS } from "@/components/pages-shared/onboarding/FrameworkIntegrations/quickstart-integrations"; import FrameworkIntegrations from "@/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrations"; -type GetStartedProps = { - apiKey?: string; - showColabLinks?: boolean; -}; - -const GetStarted: React.FunctionComponent = ({ - apiKey, - showColabLinks = true, -}) => { +const GetStarted = () => { const workspaceName = useAppStore((state) => state.activeWorkspaceName); return ( @@ -28,11 +19,7 @@ const GetStarted: React.FunctionComponent = ({ your code, or explore our ready-to-run examples on the right - + + Close + + +
{children}
+ + +)); +SheetContent.displayName = SheetPrimitive.Content.displayName; + +const SheetHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +SheetHeader.displayName = "SheetHeader"; + +const SheetFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +SheetFooter.displayName = "SheetFooter"; + +const SheetTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SheetTitle.displayName = SheetPrimitive.Title.displayName; + +const SheetDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SheetDescription.displayName = SheetPrimitive.Description.displayName; + +export { + Sheet, + SheetPortal, + SheetOverlay, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +}; diff --git a/apps/opik-frontend/src/plugins/comet/FrameworkIntegrations.tsx b/apps/opik-frontend/src/plugins/comet/FrameworkIntegrations.tsx new file mode 100644 index 0000000000..e4296f7852 --- /dev/null +++ b/apps/opik-frontend/src/plugins/comet/FrameworkIntegrations.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import useUser from "./useUser"; +import FrameworkIntegrationsContent from "@/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrationsContent"; +import { FrameworkIntegrationsProps } from "@/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrations"; + +const FrameworkIntegrations: React.FC = (props) => { + const { data: user } = useUser(); + + if (!user) return; + + return ( + + ); +}; + +export default FrameworkIntegrations; diff --git a/apps/opik-frontend/src/store/PluginsStore.ts b/apps/opik-frontend/src/store/PluginsStore.ts index 47c77fe14c..500ed08a7b 100644 --- a/apps/opik-frontend/src/store/PluginsStore.ts +++ b/apps/opik-frontend/src/store/PluginsStore.ts @@ -2,6 +2,7 @@ import React from "react"; import { create } from "zustand"; import WorkspacePreloader from "@/components/shared/WorkspacePreloader/WorkspacePreloader"; +import { FrameworkIntegration } from "@/components/pages-shared/onboarding/FrameworkIntegrations/types"; type PluginStore = { Logo: React.ComponentType<{ expanded: boolean }> | null; @@ -9,6 +10,9 @@ type PluginStore = { QuickstartPage: React.ComponentType | null; GetStartedPage: React.ComponentType | null; WorkspacePreloader: React.ComponentType<{ children: React.ReactNode }> | null; + FrameworkIntegrations: React.ComponentType<{ + integrationList?: FrameworkIntegration[]; + }> | null; init: unknown; setupPlugins: (folderName: string) => Promise; }; @@ -19,6 +23,7 @@ const PLUGIN_NAMES = [ "UserMenu", "QuickstartPage", "GetStartedPage", + "FrameworkIntegrations", "WorkspacePreloader", "init", ]; @@ -28,6 +33,7 @@ const usePluginsStore = create((set) => ({ UserMenu: null, QuickstartPage: null, GetStartedPage: null, + FrameworkIntegrations: null, WorkspacePreloader: null, init: null, setupPlugins: async (folderName: string) => { From 43bfc9f3d8da0b4b632b7d7e7db34f6b239ccfe3 Mon Sep 17 00:00:00 2001 From: Yaroslav Boiko Date: Wed, 22 Jan 2025 15:43:40 +0100 Subject: [PATCH 2/3] [OPIK-759] fix linter --- apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx | 7 +------ apps/opik-frontend/src/plugins/comet/QuickstartPage.tsx | 7 +------ 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx b/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx index 171df4131e..d0f0f37525 100644 --- a/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx +++ b/apps/opik-frontend/src/plugins/comet/GetStartedPage.tsx @@ -6,12 +6,7 @@ const GetStartedPage = () => { if (!user) return; - return ( - - ); + return ; }; export default GetStartedPage; diff --git a/apps/opik-frontend/src/plugins/comet/QuickstartPage.tsx b/apps/opik-frontend/src/plugins/comet/QuickstartPage.tsx index c51d2ccc12..9182763fbc 100644 --- a/apps/opik-frontend/src/plugins/comet/QuickstartPage.tsx +++ b/apps/opik-frontend/src/plugins/comet/QuickstartPage.tsx @@ -6,12 +6,7 @@ const QuickstartPage = () => { if (!user) return; - return ( - - ); + return ; }; export default QuickstartPage; From 339d099faf8d66796ceac9c00fa66fb679291346 Mon Sep 17 00:00:00 2001 From: Yaroslav Boiko Date: Thu, 23 Jan 2025 12:15:45 +0100 Subject: [PATCH 3/3] [OPIK-759] align overlay background color --- apps/opik-frontend/src/components/ui/sheet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/opik-frontend/src/components/ui/sheet.tsx b/apps/opik-frontend/src/components/ui/sheet.tsx index a08db1e2db..e498f1488a 100644 --- a/apps/opik-frontend/src/components/ui/sheet.tsx +++ b/apps/opik-frontend/src/components/ui/sheet.tsx @@ -20,7 +20,7 @@ const SheetOverlay = React.forwardRef< >(({ className, ...props }, ref) => (