[OPIK-1237] Add new experiment Config env update (#1597)

* [OPIK-1237] fix duplicated os import

* [OPIK-1237] remove env import section, put inside code directly instead

* [OPIK-1237] revert config updates

* [OPIK-1237] revert putConfig

---------

Co-authored-by: Yaroslav Boiko <[email protected]>

Author: awkoy

apps/opik-frontend/src/components/pages-shared/onboarding/ConfigureEnvCode/ConfigureEnvCode.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import usePluginsStore from "@/store/PluginsStore";
+import CreateExperimentCodeCore, {
+  CreateExperimentCodeCoreProps,
+} from "./CreateExperimentCodeCore";
+
+export type CreateExperimentCodeProps = Omit<
+  CreateExperimentCodeCoreProps,
+  "apiKey"
+>;
+const CreateExperimentCode: React.FC<CreateExperimentCodeProps> = (props) => {
+  const CreateExperimentCode = usePluginsStore(
+    (state) => state.CreateExperimentCode,
+  );
+
+  if (CreateExperimentCode) {
+    return <CreateExperimentCode {...props} />;
+  }
+
+  return <CreateExperimentCodeCore {...props} />;
+};
+
+export default CreateExperimentCode;

apps/opik-frontend/src/components/pages-shared/onboarding/ConfigureEnvCode/ConfigureEnvCodeCore.tsx

@@ -0,0 +1,31 @@
+import CodeHighlighter from "@/components/shared/CodeHighlighter/CodeHighlighter";
+import { putConfigInCode } from "@/lib/formatCodeSnippets";
+import useAppStore from "@/store/AppStore";
+
+export type CreateExperimentCodeCoreProps = {
+  apiKey?: string;
+  code: string;
+};
+const CreateExperimentCodeCore: React.FC<CreateExperimentCodeCoreProps> = ({
+  apiKey,
+  code,
+}) => {
+  const workspaceName = useAppStore((state) => state.activeWorkspaceName);
+  const { code: codeWithConfig } = putConfigInCode({
+    code,
+    workspaceName,
+    apiKey,
+    shouldMaskApiKey: true,
+  });
+  const { code: codeWithConfigToCopy } = putConfigInCode({
+    code,
+    workspaceName,
+    apiKey,
+  });
+
+  return (
+    <CodeHighlighter data={codeWithConfig} copyData={codeWithConfigToCopy} />
+  );
+};
+
+export default CreateExperimentCodeCore;

apps/opik-frontend/src/components/pages-shared/onboarding/CreateExperimentCode/CreateExperimentCode.tsx

@@ -10,7 +10,7 @@ import SideDialog from "@/components/shared/SideDialog/SideDialog";
 import { SheetTitle } from "@/components/ui/sheet";
 import ApiKeyCard from "@/components/pages-shared/onboarding/ApiKeyCard/ApiKeyCard";
 import GoogleColabCard from "@/components/pages-shared/onboarding/GoogleColabCard/GoogleColabCard";
-import ConfigureEnvCode from "@/components/pages-shared/onboarding/ConfigureEnvCode/ConfigureEnvCode";
+import CreateExperimentCode from "@/components/pages-shared/onboarding/CreateExperimentCode/CreateExperimentCode";
 
 export enum EVALUATOR_MODEL {
   equals = "equals",
@@ -197,8 +197,12 @@ const AddExperimentDialog: React.FunctionComponent<
 
   const section3 =
     "" +
-    `from opik import Opik
+    `import os
+from opik import Opik
 from opik.evaluation import evaluate
+
+# INJECT_OPIK_CONFIGURATION
+
 ${importString}
 client = Opik()
 dataset = client.get_dataset(name="${
@@ -334,13 +338,9 @@ eval_results = evaluate(
             </div>
             <CodeHighlighter data={section1} />
             <div className="comet-body-s mt-4 text-foreground-secondary">
-              3. Configure your API key
-            </div>
-            <ConfigureEnvCode />
-            <div className="comet-body-s mt-4 text-foreground-secondary">
-              4. Create an Experiment
+              3. Create an Experiment
             </div>
-            <CodeHighlighter data={section3} />
+            <CreateExperimentCode code={section3} />
           </div>
 
           <div className="flex w-[250px] shrink-0 flex-col gap-6 self-start">

apps/opik-frontend/src/components/pages-shared/onboarding/CreateExperimentCode/CreateExperimentCodeCore.tsx

@@ -4,8 +4,6 @@ import { BASE_API_URL } from "@/api/api";
 export const OPIK_API_KEY_TEMPLATE = "# INJECT_OPIK_CONFIGURATION";
 export const OPIK_HIGHLIGHT_LINE_TEMPLATE = " # HIGHLIGHTED_LINE";
 
-export const IMPORT_OS_TEMPLATE = "import os";
-
 export const buildApiKeyConfig = (
   apiKey: string,
   masked = false,
@@ -24,7 +22,7 @@ export const buildWorkspaceNameConfig = (
   }`;
 
 export const buildOpikUrlOverrideConfig = (withHighlight = false) =>
-  `${IMPORT_OS_TEMPLATE} \n os.environ["OPIK_URL_OVERRIDE"] = "${new URL(
+  `os.environ["OPIK_URL_OVERRIDE"] = "${new URL(
     BASE_API_URL,
     window.location.origin,
   ).toString()}${withHighlight ? OPIK_HIGHLIGHT_LINE_TEMPLATE : ""}"`;
@@ -55,7 +53,7 @@ export const getConfigCode = (
     withHighlight,
   );
 
-  return `${IMPORT_OS_TEMPLATE} \n${apiKeyConfig} \n${workspaceConfig}`;
+  return `${apiKeyConfig} \n${workspaceConfig}`;
 };
 
 export const putConfigInCode = ({

apps/opik-frontend/src/components/pages/ExperimentsShared/AddExperimentDialog.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import useUser from "./useUser";
+import CreateExperimentCodeCore, {
+  CreateExperimentCodeCoreProps,
+} from "@/components/pages-shared/onboarding/CreateExperimentCode/CreateExperimentCodeCore";
+
+const CreateExperimentCode: React.FC<CreateExperimentCodeCoreProps> = (
+  props,
+) => {
+  const { data: user } = useUser();
+
+  if (!user) return;
+
+  return <CreateExperimentCodeCore {...props} apiKey={user.apiKeys[0]} />;
+};
+
+export default CreateExperimentCode;

apps/opik-frontend/src/lib/formatCodeSnippets.ts

@@ -6,6 +6,7 @@ import { GoogleColabCardCoreProps } from "@/components/pages-shared/onboarding/G
 import { FrameworkIntegrationsProps } from "@/components/pages-shared/onboarding/FrameworkIntegrations/FrameworkIntegrations";
 import { CommentsViewerCoreProps } from "@/components/pages-shared/traces/TraceDetailsPanel/CommentsViewer/CommentsViewerCore";
 import { ExperimentCommentsViewerCoreProps } from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/ExperimentCommentsViewerCore";
+import { CreateExperimentCodeCoreProps } from "@/components/pages-shared/onboarding/CreateExperimentCode/CreateExperimentCodeCore";
 
 type PluginStore = {
   Logo: React.ComponentType<{ expanded: boolean }> | null;
@@ -15,7 +16,7 @@ type PluginStore = {
   FrameworkIntegrations: React.ComponentType<FrameworkIntegrationsProps> | null;
   GoogleColabCard: React.ComponentType<GoogleColabCardCoreProps> | null;
   ApiKeyCard: React.ComponentType | null;
-  ConfigureEnvCode: React.ComponentType | null;
+  CreateExperimentCode: React.ComponentType<CreateExperimentCodeCoreProps> | null;
   EvaluationExamples: React.ComponentType | null;
   CommentsViewer: React.ComponentType<CommentsViewerCoreProps> | null;
   ExperimentCommentsViewer: React.ComponentType<ExperimentCommentsViewerCoreProps> | null;
@@ -31,7 +32,7 @@ const PLUGIN_NAMES = [
   "FrameworkIntegrations",
   "GoogleColabCard",
   "ApiKeyCard",
-  "ConfigureEnvCode",
+  "CreateExperimentCode",
   "CommentsViewer",
   "WorkspacePreloader",
   "EvaluationExamples",
@@ -47,7 +48,7 @@ const usePluginsStore = create<PluginStore>((set) => ({
   GoogleColabCard: null,
   ApiKeyCard: null,
   WorkspacePreloader: null,
-  ConfigureEnvCode: null,
+  CreateExperimentCode: null,
   CommentsViewer: null,
   EvaluationExamples: null,
   ExperimentCommentsViewer: null,