Copy jobs dark theme (#2308)

* added a dark theme toggle button on Copyjobs next to refresh button and covered full feature

* Fix formatting in Utils.test.ts

* updated infor icon , error icon and text on jobs details page

* rebased from master

* updated the conflicts

* updated the conflicts

* fixed the test suit

* fixed review comments

* test fix

---------

Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
sakshigupta12feb
2026-01-08 13:27:57 +05:30
committed by GitHub
parent 4ac8cd8fe4
commit e27cff0553
37 changed files with 392 additions and 213 deletions

View File

@@ -50,7 +50,7 @@ describe("CommandBar Utils", () => {
describe("getCommandBarButtons", () => {
it("should return an array of command button props", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
expect(buttons).toBeDefined();
expect(Array.isArray(buttons)).toBe(true);
@@ -58,7 +58,7 @@ describe("CommandBar Utils", () => {
});
it("should include create copy job button", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
const createButton = buttons[0];
expect(createButton).toBeDefined();
@@ -70,7 +70,7 @@ describe("CommandBar Utils", () => {
});
it("should include refresh button", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
const refreshButton = buttons[1];
expect(refreshButton).toBeDefined();
@@ -80,11 +80,11 @@ describe("CommandBar Utils", () => {
});
it("should include feedback button when platform is Portal", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
expect(buttons.length).toBe(3);
expect(buttons.length).toBe(4);
const feedbackButton = buttons[2];
const feedbackButton = buttons[3];
expect(feedbackButton).toBeDefined();
expect(feedbackButton.ariaLabel).toBe("Provide feedback on copy jobs");
expect(feedbackButton.tooltipText).toBe("Feedback");
@@ -105,13 +105,13 @@ describe("CommandBar Utils", () => {
}));
const { getCommandBarButtons: getCommandBarButtonsEmulator } = await import("./Utils");
const buttons = getCommandBarButtonsEmulator(mockExplorer);
const buttons = getCommandBarButtonsEmulator(mockExplorer, false);
expect(buttons.length).toBe(2);
expect(buttons.length).toBe(3);
});
it("should call openCreateCopyJobPanel when create button is clicked", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
const createButton = buttons[0];
createButton.onCommandClick({} as React.SyntheticEvent);
@@ -121,7 +121,7 @@ describe("CommandBar Utils", () => {
});
it("should call refreshJobList when refresh button is clicked", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
const refreshButton = buttons[1];
refreshButton.onCommandClick({} as React.SyntheticEvent);
@@ -130,8 +130,8 @@ describe("CommandBar Utils", () => {
});
it("should call openContainerCopyFeedbackBlade when feedback button is clicked", () => {
const buttons = getCommandBarButtons(mockExplorer);
const feedbackButton = buttons[2];
const buttons = getCommandBarButtons(mockExplorer, false);
const feedbackButton = buttons[3];
feedbackButton.onCommandClick({} as React.SyntheticEvent);
@@ -139,7 +139,7 @@ describe("CommandBar Utils", () => {
});
it("should return buttons with correct icon sources", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
expect(buttons[0].iconSrc).toBeDefined();
expect(buttons[0].iconAlt).toBe("Create Copy Job");
@@ -148,7 +148,10 @@ describe("CommandBar Utils", () => {
expect(buttons[1].iconAlt).toBe("Refresh");
expect(buttons[2].iconSrc).toBeDefined();
expect(buttons[2].iconAlt).toBe("Feedback");
expect(buttons[2].iconAlt).toBe("Dark Theme");
expect(buttons[3].iconSrc).toBeDefined();
expect(buttons[3].iconAlt).toBe("Feedback");
});
it("should handle null MonitorCopyJobsRefState ref gracefully", () => {
@@ -157,14 +160,14 @@ describe("CommandBar Utils", () => {
return selector(state);
});
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
const refreshButton = buttons[1];
expect(() => refreshButton.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
});
it("should set hasPopup to false for all buttons", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons.forEach((button) => {
expect(button.hasPopup).toBe(false);
@@ -172,7 +175,7 @@ describe("CommandBar Utils", () => {
});
it("should set commandButtonLabel to undefined for all buttons", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons.forEach((button) => {
expect(button.commandButtonLabel).toBeUndefined();
@@ -180,7 +183,7 @@ describe("CommandBar Utils", () => {
});
it("should respect disabled state when provided", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons.forEach((button) => {
expect(button.disabled).toBe(false);
@@ -188,7 +191,7 @@ describe("CommandBar Utils", () => {
});
it("should return CommandButtonComponentProps with all required properties", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons.forEach((button: CommandButtonComponentProps) => {
expect(button).toHaveProperty("iconSrc");
@@ -202,18 +205,19 @@ describe("CommandBar Utils", () => {
});
});
it("should maintain button order: create, refresh, feedback", () => {
const buttons = getCommandBarButtons(mockExplorer);
it("should maintain button order: create, refresh, themeToggle, feedback", () => {
const buttons = getCommandBarButtons(mockExplorer, false);
expect(buttons[0].tooltipText).toBe("Create Copy Job");
expect(buttons[1].tooltipText).toBe("Refresh");
expect(buttons[2].tooltipText).toBe("Feedback");
expect(buttons[2].tooltipText).toBe("Dark Theme");
expect(buttons[3].tooltipText).toBe("Feedback");
});
});
describe("Button click handlers", () => {
it("should execute click handlers without errors", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons.forEach((button) => {
expect(() => button.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
@@ -221,7 +225,7 @@ describe("CommandBar Utils", () => {
});
it("should call correct action for each button", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons[0].onCommandClick({} as React.SyntheticEvent);
expect(Actions.openCreateCopyJobPanel).toHaveBeenCalledWith(mockExplorer);
@@ -229,14 +233,14 @@ describe("CommandBar Utils", () => {
buttons[1].onCommandClick({} as React.SyntheticEvent);
expect(mockRefreshJobList).toHaveBeenCalled();
buttons[2].onCommandClick({} as React.SyntheticEvent);
buttons[3].onCommandClick({} as React.SyntheticEvent);
expect(mockOpenContainerCopyFeedbackBlade).toHaveBeenCalled();
});
});
describe("Accessibility", () => {
it("should have aria labels for all buttons", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons.forEach((button) => {
expect(button.ariaLabel).toBeDefined();
@@ -246,7 +250,7 @@ describe("CommandBar Utils", () => {
});
it("should have tooltip text for all buttons", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons.forEach((button) => {
expect(button.tooltipText).toBeDefined();
@@ -256,7 +260,7 @@ describe("CommandBar Utils", () => {
});
it("should have icon alt text for all buttons", () => {
const buttons = getCommandBarButtons(mockExplorer);
const buttons = getCommandBarButtons(mockExplorer, false);
buttons.forEach((button) => {
expect(button.iconAlt).toBeDefined();