From 7dce7f08613848119e465b3819a21bf4734d42c5 Mon Sep 17 00:00:00 2001
From: Yash <yashh.real@gmail.com>
Date: Wed, 4 Feb 2026 15:36:18 +0530
Subject: [PATCH] Display default base image

Signed-off-by: Yash <yashh.real@gmail.com>
---
 labextension/src/widgets/LeftPanel.tsx        |  1 +
 .../cell-metadata/CellMetadataEditor.tsx      | 30 ++++++++++++++-----
 .../cell-metadata/InlineCellMetadata.tsx      |  2 ++
 .../widgets/cell-metadata/InlineMetadata.tsx  | 17 +++++++----
 4 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/labextension/src/widgets/LeftPanel.tsx b/labextension/src/widgets/LeftPanel.tsx
index b09655d5..b51bbb10 100644
--- a/labextension/src/widgets/LeftPanel.tsx
+++ b/labextension/src/widgets/LeftPanel.tsx
@@ -568,6 +568,7 @@ export class KubeflowKaleLeftPanel extends React.Component<IProps, IState> {
                 <InlineCellsMetadata
                   onMetadataEnable={this.onMetadataEnable}
                   notebook={activeNotebook}
+                  pipelineBaseImage={this.state.metadata.base_image}
                 />
               )}
             </div>
diff --git a/labextension/src/widgets/cell-metadata/CellMetadataEditor.tsx b/labextension/src/widgets/cell-metadata/CellMetadataEditor.tsx
index 9c4ad5c2..881f1458 100644
--- a/labextension/src/widgets/cell-metadata/CellMetadataEditor.tsx
+++ b/labextension/src/widgets/cell-metadata/CellMetadataEditor.tsx
@@ -63,6 +63,8 @@ export const RESERVED_CELL_NAMES_CHIP_COLOR: { [id: string]: string } = {
   functions: 'a32626',
 };
 
+export const DEFAULT_BASE_IMAGE = 'python:3.12';
+
 const STEP_NAME_ERROR_MSG = `Step name must consist of lower case alphanumeric
  characters or '_', and can not start with a digit.`;
 
@@ -74,6 +76,7 @@ export interface IProps {
   limits?: { [id: string]: string };
   // Base image for this step
   baseImage?: string;
+  pipelineBaseImage?: string;
 }
 
 // this stores the name of a block and its color (form the name hash)
@@ -459,14 +462,27 @@ export class CellMetadataEditor extends React.Component<IProps, IState> {
               )}
 
               {cellType === 'step' ? (
-                <Input
-                  label={'Base Image'}
-                  updateValue={this.updateBaseImage}
-                  value={this.props.baseImage || ''}
-                  placeholder="e.g., python:3.11"
+                <Button
                   variant="outlined"
-                  style={{ width: '25%' }}
-                />
+                  size="small"
+                  disabled
+                  style={{
+                    textTransform: 'none',
+                    minWidth: '150px',
+                    backgroundColor: '#f5f5f5',
+                    borderColor: '#1976d2',
+                    color: '#333',
+                    opacity: 1,
+                    marginRight: '8px',
+                  }}
+                  title="Base Image for this step"
+                >
+                  Base Image: 🐳{' '}
+                  {this.props.baseImage ||
+                    this.props.pipelineBaseImage ||
+                    DEFAULT_BASE_IMAGE}
+                  {!this.props.baseImage ? ' (default)' : ''}
+                </Button>
               ) : (
                 ''
               )}
diff --git a/labextension/src/widgets/cell-metadata/InlineCellMetadata.tsx b/labextension/src/widgets/cell-metadata/InlineCellMetadata.tsx
index fa77c165..84f6f415 100644
--- a/labextension/src/widgets/cell-metadata/InlineCellMetadata.tsx
+++ b/labextension/src/widgets/cell-metadata/InlineCellMetadata.tsx
@@ -38,6 +38,7 @@ import { createPortal } from 'react-dom';
 interface IProps {
   notebook: NotebookPanel;
   onMetadataEnable: (isEnabled: boolean) => void;
+  pipelineBaseImage?: string;
 }
 
 type Editors = { [index: string]: EditorProps };
@@ -280,6 +281,7 @@ export class InlineCellsMetadata extends React.Component<IProps, IState> {
           baseImage={tags.baseImage}
           previousBlockName={previousBlockName}
           cellIndex={index}
+          pipelineBaseImage={this.props.pipelineBaseImage}
         />,
         metadataParent,
       );
diff --git a/labextension/src/widgets/cell-metadata/InlineMetadata.tsx b/labextension/src/widgets/cell-metadata/InlineMetadata.tsx
index cff9451b..a8fb1f3e 100644
--- a/labextension/src/widgets/cell-metadata/InlineMetadata.tsx
+++ b/labextension/src/widgets/cell-metadata/InlineMetadata.tsx
@@ -18,6 +18,7 @@ import ColorUtils from '../../lib/ColorUtils';
 import {
   RESERVED_CELL_NAMES,
   RESERVED_CELL_NAMES_HELP_TEXT,
+  DEFAULT_BASE_IMAGE,
 } from './CellMetadataEditor';
 import EditIcon from '@mui/icons-material/Edit';
 import { CellMetadataContext } from '../../lib/CellMetadataContext';
@@ -30,6 +31,7 @@ interface IProps {
   baseImage?: string;
   cellElement: any;
   cellIndex: number;
+  pipelineBaseImage?: string;
 }
 
 interface IState {
@@ -228,12 +230,17 @@ export class InlineMetadata extends React.Component<IProps, IState> {
   }
 
   createBaseImageText() {
-    return this.props.baseImage ? (
+    const effectiveImage =
+      this.props.baseImage ||
+      this.props.pipelineBaseImage ||
+      DEFAULT_BASE_IMAGE;
+    const isDefault = !this.props.baseImage;
+
+    return (
       <p style={{ fontStyle: 'italic', marginLeft: '10px' }}>
-        Base Image: {this.props.baseImage}
+        Base Image: {effectiveImage}
+        {isDefault ? ' (default)' : ''}
       </p>
-    ) : (
-      ''
     );
   }
 
@@ -275,8 +282,8 @@ export class InlineMetadata extends React.Component<IProps, IState> {
         ) : null}
         {this.state.dependencies}
 
-        {this.createBaseImageText()}
         {this.createLimitsText()}
+        {this.createBaseImageText()}
       </>
     );