Merge branch 'main' into fix/registry-name-field-validation

Author: Philip-Carneiro

.claude/rules/third-party-theming.md

@@ -0,0 +1,88 @@
+---
+description: Theming external libraries (Perses, etc.) with PatternFly tokens in ODH Dashboard
+globs: "packages/observability/**,packages/*/src/**/*theme*,packages/*/src/**/*Theme*"
+alwaysApply: false
+---
+
+# Third-Party Library Theming — ODH Dashboard
+
+Reference implementation: `packages/observability/src/perses/theme.ts`
+
+For the MLflow federated UI theming approach (Emotion token translation + SCSS shell overrides), see the [MLflow fork](https://github.com/opendatahub-io/mlflow/tree/master/mlflow/server/js/src/common/styles/patternfly) — that pattern lives in the fork, not here.
+
+---
+
+## Invariant 1 — ECharts/canvas: use `.value`, not CSS vars
+
+Canvas-based renderers cannot resolve CSS custom properties at paint time. Passing a `var(--pf-t--...)` string to an ECharts option or canvas `fillStyle` silently produces the wrong color.
+
+```ts
+import { t_color_white, t_color_gray_95 } from '@patternfly/react-tokens';
+
+// Correct — resolved hex value
+const textColor = isDark ? t_color_white.value : t_color_gray_95.value;
+
+// These overrides are passed to generateChartsTheme(), not as top-level MUI theme properties
+const chartsTheme = generateChartsTheme(muiTheme, {
+  echartsTheme: {
+    color: palette,               // hex array, never CSS var strings
+    tooltip: {
+      // CSS vars ARE fine for non-canvas properties (e.g. tooltip is DOM-rendered)
+      backgroundColor: 'var(--pf-t--global--background--color--inverse--default)',
+    },
+  },
+  thresholds: {
+    defaultColor: textColor,      // .value, not .var
+  },
+});
+```
+
+Use `@patternfly/react-tokens` `.value` anywhere the value is consumed by a canvas renderer. Use `var(--pf-t--*)` strings everywhere else.
+
+---
+
+## Invariant 2 — Dark mode source: `useThemeContext()` only
+
+Never infer dark mode from `prefers-color-scheme`, a local prop, or any source other than the dashboard theme context.
+
+```ts
+import { useThemeContext } from '@odh-dashboard/internal/app/ThemeContext';
+
+const { theme: contextTheme } = useThemeContext();
+const theme: PatternFlyTheme = contextTheme === 'dark' ? 'dark' : 'light';
+```
+
+The full theme object must recompute when context changes:
+
+```ts
+return React.useMemo(() => {
+  const muiTheme = getTheme(theme, { ...mapPatternFlyThemeToMUI(theme) });
+  // ... build chartsTheme ...
+  return { muiTheme, chartsTheme };
+}, [theme]);
+```
+
+---
+
+## Invariant 3 — `ThemeProvider` at the library boundary, not the app root
+
+Placing an MUI `ThemeProvider` at the app root leaks MUI styles into PF-only components. Scope it as close to the library's render boundary as possible.
+
+```tsx
+// Correct — scoped to the Perses render boundary
+// packages/observability/src/perses/PersesWrapper.tsx
+const { muiTheme, chartsTheme } = usePatternFlyTheme();
+return (
+  <ThemeProvider theme={muiTheme}>
+    <ChartsProvider chartsTheme={chartsTheme}>
+      {children}
+    </ChartsProvider>
+  </ThemeProvider>
+);
+
+// Wrong — app root wrapping bleeds MUI styles into unrelated PF components
+// frontend/src/app/App.tsx
+return <ThemeProvider theme={muiTheme}><App /></ThemeProvider>;
+```
+
+One wrapper component per external library. Never scatter `ThemeProvider` across individual pages.

.github/workflows/cypress-e2e-test.yml

@@ -858,9 +858,9 @@ jobs:
           find ${{ github.workspace }}/packages/cypress/screenshots -type d -empty -delete 2>/dev/null || true
           find ${{ github.workspace }}/packages/cypress/videos -type d -empty -delete 2>/dev/null || true
 
-          # Fix read-only envtest binaries from previous BFF runs (setup-envtest downloads
-          # k8s binaries with read-only permissions, which blocks actions/checkout cleanup)
-          find ${{ github.workspace }}/packages/*/bff/bin -type f ! -perm -u+w -exec chmod u+w {} + 2>/dev/null || true
+          # Fix read-only envtest binaries and directories from previous BFF runs
+          # (setup-envtest downloads k8s binaries with 0555 permissions, which blocks actions/checkout cleanup)
+          chmod -R u+w ${{ github.workspace }}/packages/*/bff/bin ${{ github.workspace }}/packages/*/upstream/bff/bin 2>/dev/null || true
 
           echo "✅ Cleanup complete (non-critical, continued on any errors)"
 
@@ -1418,8 +1418,8 @@ jobs:
             echo "✅ Cleaned up $BFF_KILLED_COUNT BFF process(es) for run_id: ${{ github.run_id }}"
           fi
 
-          # Fix read-only envtest binaries so next checkout can clean the workspace
-          find ${{ github.workspace }}/packages/*/bff/bin -type f ! -perm -u+w -exec chmod u+w {} + 2>/dev/null || true
+          # Fix read-only envtest binaries and directories so next checkout can clean the workspace
+          chmod -R u+w ${{ github.workspace }}/packages/*/bff/bin ${{ github.workspace }}/packages/*/upstream/bff/bin 2>/dev/null || true
 
       - name: Stop Cypress Servers
         run: |

AGENTS.md

@@ -95,6 +95,7 @@ Rules live in `.claude/rules/`. Read the relevant rule file before starting the
 | **React**                   | `react.md`                    | When writing React components, hooks, or pages                                 |
 | **Security**                | `security.md`                 | When working on auth, secrets, input validation, or K8s API interactions        |
 | **Testing Standards**       | `testing-standards.md`        | When working across multiple test types or choosing a testing strategy          |
+| **Third-Party Theming**     | `third-party-theming.md`      | When theming external libraries (Perses, MLflow, etc.) or mapping PF tokens into non-PF component systems |
 | **Unit Tests**              | `unit-tests.md`               | When creating or modifying Jest unit tests for utilities, hooks, or components |
 
 ## Agent Skills

backend/src/utils/notebookUtils.ts

@@ -137,6 +137,18 @@ const getImageTag = (image: ImageInfo, imageTagName: string): ImageTag => {
   };
 };
 
+const getMlflowAnnotation = (fastify: KubeFastifyInstance): Record<string, string> => {
+  const isMlflowFlagEnabled = getDashboardConfig().spec.dashboardConfig.mlflow;
+  if (!isMlflowFlagEnabled) {
+    return {};
+  }
+  const dscStatus = getClusterStatus(fastify);
+  if (dscStatus?.components?.mlflowoperator?.managementState === 'Managed') {
+    return { 'opendatahub.io/mlflow-instance': 'mlflow' };
+  }
+  return {};
+};
+
 export const assembleNotebook = async (
   fastify: KubeFastifyInstance,
   data: NotebookData,
@@ -226,6 +238,7 @@ export const assembleNotebook = async (
         'opendatahub.io/hardware-profile-name': selectedHardwareProfile?.metadata.name || '',
         'opendatahub.io/hardware-profile-namespace':
           selectedHardwareProfile?.metadata.namespace || '',
+        ...getMlflowAnnotation(fastify),
       },
       name: name,
       namespace: namespace,
@@ -399,6 +412,7 @@ export const createNotebook = async (
   }
 
   notebookAssembled.metadata.annotations['notebooks.opendatahub.io/inject-auth'] = 'true';
+
   const notebookContainers = notebookAssembled.spec.template.spec.containers;
 
   if (!notebookContainers[0]) {

frontend/src/__mocks__/mockLLMInferenceServiceConfigK8sResource.ts

@@ -10,6 +10,7 @@ type MockLLMInferenceServiceConfigType = {
   modelUri?: string;
   modelName?: string;
   templateName?: string;
+  disabled?: boolean;
 };
 
 export const mockLLMInferenceServiceConfigK8sResource = ({
@@ -22,6 +23,7 @@ export const mockLLMInferenceServiceConfigK8sResource = ({
   modelUri = 'hf://test/model',
   modelName = 'test-model',
   templateName,
+  disabled,
 }: MockLLMInferenceServiceConfigType): LLMInferenceServiceConfigKind => ({
   apiVersion: 'serving.kserve.io/v1alpha1',
   kind: 'LLMInferenceServiceConfig',
@@ -35,6 +37,7 @@ export const mockLLMInferenceServiceConfigK8sResource = ({
         ? { 'opendatahub.io/recommended-accelerators': recommendedAccelerators }
         : {}),
       ...(templateName ? { 'opendatahub.io/template-name': templateName } : {}),
+      ...(disabled ? { 'opendatahub.io/disabled': 'true' as const } : {}),
     },
     labels: {
       'opendatahub.io/config-type': configType,

frontend/src/api/k8s/__tests__/notebooks.spec.ts

@@ -34,6 +34,7 @@ import {
   updateNotebook,
   restartNotebook,
   patchNotebookImage,
+  getMlflowInstancePatch,
 } from '#~/api/k8s/notebooks';
 
 import {
@@ -406,6 +407,23 @@ describe('assembleNotebook', () => {
     expect(k8sCreateResourceMock).toHaveBeenCalledTimes(1);
     expect(renderResult).toStrictEqual(mockNotebookK8sResource({ uid: 'test' }));
   });
+
+  it('should include mlflow-instance annotation when mlflowEnabled is true', () => {
+    const notebookData = mockStartNotebookData({});
+    notebookData.mlflowEnabled = true;
+    const result = assembleNotebook(notebookData, 'test-user');
+    expect(result.metadata.annotations?.['opendatahub.io/mlflow-instance']).toBe('mlflow');
+  });
+
+  it.each([false, undefined])(
+    'should not include mlflow-instance annotation when mlflowEnabled is %s',
+    (mlflowEnabled) => {
+      const notebookData = mockStartNotebookData({});
+      notebookData.mlflowEnabled = mlflowEnabled;
+      const result = assembleNotebook(notebookData, 'test-user');
+      expect(result.metadata.annotations?.['opendatahub.io/mlflow-instance']).toBeUndefined();
+    },
+  );
 });
 
 describe('createNotebook', () => {
@@ -1429,3 +1447,55 @@ describe('updateNotebook', () => {
     expect(shmMount?.mountPath).toBe('/dev/shm');
   });
 });
+
+describe('getMlflowInstancePatch', () => {
+  it('should return an add patch when mlflow is enabled and annotation is absent', () => {
+    const notebook = mockNotebookK8sResource({});
+    const patches = getMlflowInstancePatch(notebook, true);
+    expect(patches).toEqual([
+      {
+        op: 'add',
+        path: '/metadata/annotations/opendatahub.io~1mlflow-instance',
+        value: 'mlflow',
+      },
+    ]);
+  });
+
+  it('should initialize annotations when absent before adding mlflow annotation', () => {
+    const notebook = mockNotebookK8sResource({});
+    notebook.metadata.annotations = undefined;
+    const patches = getMlflowInstancePatch(notebook, true);
+    expect(patches).toEqual([
+      {
+        op: 'add',
+        path: '/metadata/annotations',
+        value: {},
+      },
+      {
+        op: 'add',
+        path: '/metadata/annotations/opendatahub.io~1mlflow-instance',
+        value: 'mlflow',
+      },
+    ]);
+  });
+
+  it('should return empty patches when the annotation already exists', () => {
+    const notebook = mockNotebookK8sResource({
+      opts: {
+        metadata: {
+          annotations: {
+            'opendatahub.io/mlflow-instance': 'mlflow',
+          },
+        },
+      },
+    });
+    const patches = getMlflowInstancePatch(notebook, true);
+    expect(patches).toEqual([]);
+  });
+
+  it('should return empty patches when mlflow is not enabled', () => {
+    const notebook = mockNotebookK8sResource({});
+    const patches = getMlflowInstancePatch(notebook, false);
+    expect(patches).toEqual([]);
+  });
+});

frontend/src/api/k8s/notebooks.ts

@@ -48,6 +48,7 @@ export const assembleNotebook = (
     connections,
     hardwareProfileOptions,
     feastData,
+    mlflowEnabled,
   } = data;
   const {
     name: notebookName,
@@ -110,6 +111,7 @@ export const assembleNotebook = (
           image.imageVersion?.annotations?.['opendatahub.io/notebook-build-commit'] ?? '',
         'opendatahub.io/connections': connectionsAnnotation ?? '',
         ...(feastData?.annotations || {}),
+        ...(mlflowEnabled ? { 'opendatahub.io/mlflow-instance': 'mlflow' } : {}),
       },
       name: notebookId,
       namespace: projectName,
@@ -204,6 +206,26 @@ export const getStopPatch = (): Patch => ({
   value: getStopPatchDataString(),
 });
 
+export const getMlflowInstancePatch = (notebook: NotebookKind, mlflowEnabled: boolean): Patch[] => {
+  if (!mlflowEnabled || notebook.metadata.annotations?.['opendatahub.io/mlflow-instance']) {
+    return [];
+  }
+  const patches: Patch[] = [];
+  if (!notebook.metadata.annotations) {
+    patches.push({
+      op: 'add',
+      path: '/metadata/annotations',
+      value: {},
+    });
+  }
+  patches.push({
+    op: 'add',
+    path: '/metadata/annotations/opendatahub.io~1mlflow-instance',
+    value: 'mlflow',
+  });
+  return patches;
+};
+
 export const getNotebooks = (namespace: string): Promise<NotebookKind[]> =>
   k8sListResource<NotebookKind>({
     model: NotebookModel,

frontend/src/components/CharLimitHelperText.tsx

@@ -1,12 +1,27 @@
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
+import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 import React from 'react';
 
 interface CharLimitHelperTextProps {
   limit: number;
+  currentLength: number;
 }
 
-export const CharLimitHelperText: React.FC<CharLimitHelperTextProps> = ({ limit }) => (
-  <HelperText>
-    <HelperTextItem>{`Cannot exceed ${limit} characters`}</HelperTextItem>
-  </HelperText>
-);
+export const CharLimitHelperText: React.FC<CharLimitHelperTextProps> = ({
+  limit,
+  currentLength,
+}) => {
+  // Threshold of 10 is consistent with K8sNameDescriptionField (showNameWarning),
+  // which uses `maxLength - 10` to only warn when the user is close to the limit.
+  if (currentLength < limit - 10) {
+    return null;
+  }
+  return (
+    <FormHelperText>
+      <HelperText>
+        <HelperTextItem variant={currentLength >= limit ? 'error' : 'warning'}>
+          {`Cannot exceed ${limit} characters (${Math.max(0, limit - currentLength)} remaining)`}
+        </HelperTextItem>
+      </HelperText>
+    </FormHelperText>
+  );
+};

frontend/src/concepts/areas/const.ts

@@ -215,6 +215,7 @@ export const SupportedAreasStateMap: SupportedAreasState = {
   },
   [SupportedArea.MLFLOW]: {
     featureFlags: ['mlflow'],
+    requiredComponents: [DataScienceStackComponent.MLFLOW],
   },
   [SupportedArea.PROJECT_RBAC_SETTINGS]: {
     featureFlags: ['projectRBAC'],
@@ -241,4 +242,5 @@ export const DataScienceStackComponentMap: Record<string, string> = {
   [DataScienceStackComponent.TRUSTY_AI]: 'TrustyAI',
   [DataScienceStackComponent.WORKBENCHES]: 'Workbenches',
   [DataScienceStackComponent.TRAINER]: 'Trainer',
+  [DataScienceStackComponent.MLFLOW]: 'MLflow',
 };

frontend/src/concepts/areas/types.ts

@@ -117,6 +117,7 @@ export enum DataScienceStackComponent {
   WORKBENCHES = 'workbenches',
   LLAMA_STACK_OPERATOR = 'llamastackoperator',
   TRAINER = 'trainer',
+  MLFLOW = 'mlflowoperator',
 }
 
 /**