Skip to content

Migration: replace mui theme colors with tailwind theme colors #26671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rohit0301 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Migration: replace mui theme colors with tailwind theme colors #26671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6b3bc5c
Migration: replace mui theme colors with tailwind theme colors
Rohit0301 Mar 21, 2026
ba1b2e9
fixed unit test
Rohit0301 Mar 21, 2026
1ca5123
Merge branch 'main' into untitled-ui-migration-2
Rohit0301 Mar 23, 2026
cb9e818
addressed gitar comment
Rohit0301 Mar 24, 2026
2127670
fixed unit test
Rohit0301 Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions ...in/resources/ui/src/components/Entity/EntityLineage/CanvasEdgeRenderer.component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useTheme } from '@mui/material';
import { fireEvent, render, waitFor } from '@testing-library/react';
import { Edge } from 'reactflow';
import { CanvasEdgeRenderer } from './CanvasEdgeRenderer.component';
Expand Down Expand Up @@ -83,19 +82,12 @@ jest.mock('../../../utils/EdgeMidpointUtils', () => ({
calculateEdgeMidpoints: jest.fn(() => []),
}));

const mockTheme = {
palette: {
primary: { main: '#1890ff' },
},
};

describe('CanvasEdgeRenderer', () => {
let reactFlowContainer: HTMLElement;
let pane: HTMLElement;

beforeEach(() => {
jest.clearAllMocks();
(useTheme as jest.Mock).mockReturnValue(mockTheme);
mockUseLineageStore.isEditMode = false;
mockGetEdgeAtPoint.mockReturnValue(null);
mockRedraw.mockClear();
Expand Down
3 changes: 0 additions & 3 deletions ...rc/main/resources/ui/src/components/Entity/EntityLineage/CanvasEdgeRenderer.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useTheme } from '@mui/material';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Edge, useReactFlow, useViewport } from 'reactflow';
import { useLineageProvider } from '../../../context/LineageProvider/LineageProvider';
Expand All @@ -37,7 +36,6 @@ export const CanvasEdgeRenderer: React.FC<CanvasEdgeRendererProps> = ({
onEdgeHover,
hoverEdge,
}) => {
const theme = useTheme();
const canvasRef = useRef<HTMLCanvasElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
Expand Down Expand Up @@ -103,7 +101,6 @@ export const CanvasEdgeRenderer: React.FC<CanvasEdgeRendererProps> = ({
canvasRef,
edges,
dqHighlightedEdges,
theme,
hoverEdge,
containerWidth: containerSize.width,
containerHeight: containerSize.height,
Expand Down
23 changes: 0 additions & 23 deletions openmetadata-ui/src/main/resources/ui/src/hooks/useCanvasEdgeRenderer.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Theme } from '@mui/material';
import { renderHook } from '@testing-library/react';
import { RefObject } from 'react';
import { Edge, Node } from 'reactflow';
Expand Down Expand Up @@ -104,17 +103,6 @@ const createMockCanvas = () => {
return { canvas, ctx };
};

const createMockTheme = (): Theme =>
({
palette: {
primary: { main: '#1890ff' },
allShades: {
indigo: { 600: '#3F51B5' },
error: { 600: '#F44336' },
},
},
} as unknown as Theme);

const createMockEdge = (overrides: Partial<Edge> = {}): Edge => ({
id: 'edge-1',
source: 'node-1',
Expand Down Expand Up @@ -168,7 +156,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand All @@ -184,7 +171,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand Down Expand Up @@ -216,7 +202,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [edge],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand All @@ -236,7 +221,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [edge],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand Down Expand Up @@ -264,7 +248,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [edge],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand Down Expand Up @@ -306,7 +289,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [edge],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand Down Expand Up @@ -344,7 +326,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [edge],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand Down Expand Up @@ -393,7 +374,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [edge],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand Down Expand Up @@ -448,7 +428,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [edge],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand All @@ -466,7 +445,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand Down Expand Up @@ -503,7 +481,6 @@ describe('useCanvasEdgeRenderer', () => {
canvasRef,
edges: [edge],
dqHighlightedEdges: new Set(),
theme: createMockTheme(),
containerWidth: 800,
containerHeight: 600,
})
Expand Down
6 changes: 0 additions & 6 deletions openmetadata-ui/src/main/resources/ui/src/hooks/useCanvasEdgeRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Theme } from '@mui/material';
import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
import { Edge, Position, useNodes, useReactFlow, useViewport } from 'reactflow';
import {
Expand All @@ -37,7 +36,6 @@ interface UseCanvasEdgeRendererProps {
edges: Edge[];
hoverEdge?: Edge | null;
dqHighlightedEdges: Set<string>;
theme: Theme;
containerWidth: number;
containerHeight: number;
}
Expand All @@ -57,7 +55,6 @@ export function useCanvasEdgeRenderer({
dqHighlightedEdges,
edges,
hoverEdge,
theme,
containerWidth,
containerHeight,
}: UseCanvasEdgeRendererProps) {
Expand Down Expand Up @@ -155,7 +152,6 @@ export function useCanvasEdgeRenderer({
tracedColumns,
dqHighlightedEdges,
selectedColumn,
theme,
edge.data?.isColumnLineage ?? false,
edge.sourceHandle,
edge.targetHandle,
Expand Down Expand Up @@ -198,7 +194,6 @@ export function useCanvasEdgeRenderer({
tracedColumns,
dqHighlightedEdges,
selectedColumn,
theme,
columnsInCurrentPages,
hoverEdge,
selectedEdge,
Expand Down Expand Up @@ -452,7 +447,6 @@ export function useCanvasEdgeRenderer({
selectedEdge,
selectedColumn,
dqHighlightedEdges,
theme,
]);

useEffect(() => {
Expand Down
Loading
Loading