Skip to content

Commit 4effb48

Browse files
[Fix] issue with selecting Environment URL after enabling Power Platform API (#636)
* Initial plan * Fix: Replace window.confirm() with inline overlay for PP API consent to prevent Electron modal focus loss Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com>
1 parent 1dde4f2 commit 4effb48

5 files changed

Lines changed: 124 additions & 10 deletions

File tree

src/renderer/modals/addConnection/controller.ts

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -255,9 +255,26 @@ export function getAddConnectionModalControllerScript(channels: AddConnectionMod
255255
};
256256
257257
const confirmPowerPlatformApiConsent = () => {
258-
return window.confirm(
259-
"Power Platform API access requires admin-approved privileges and a properly configured Client ID.\\n\\nIf required privileges are missing, tools may not work as expected.\\n\\nSelect OK to Agree and continue.\\nSelect Cancel to keep this option disabled.",
260-
);
258+
return new Promise((resolve) => {
259+
const overlay = document.getElementById("pp-api-consent-overlay");
260+
const okBtn = document.getElementById("pp-api-consent-ok");
261+
const cancelBtn = document.getElementById("pp-api-consent-cancel");
262+
if (!overlay || !okBtn || !cancelBtn) {
263+
resolve(false);
264+
return;
265+
}
266+
overlay.classList.add("visible");
267+
const cleanup = (result) => {
268+
overlay.classList.remove("visible");
269+
okBtn.removeEventListener("click", onOk);
270+
cancelBtn.removeEventListener("click", onCancel);
271+
resolve(result);
272+
};
273+
const onOk = () => cleanup(true);
274+
const onCancel = () => cleanup(false);
275+
okBtn.addEventListener("click", onOk);
276+
cancelBtn.addEventListener("click", onCancel);
277+
});
261278
};
262279
263280
const loadBrowserProfiles = async () => {
@@ -416,9 +433,9 @@ export function getAddConnectionModalControllerScript(channels: AddConnectionMod
416433
authTypeSelect?.addEventListener("change", updateAuthVisibility);
417434
updateAuthVisibility();
418435
419-
ppApiCheckbox?.addEventListener("change", () => {
436+
ppApiCheckbox?.addEventListener("change", async () => {
420437
if (ppApiCheckbox instanceof HTMLInputElement && ppApiCheckbox.checked) {
421-
const agreed = confirmPowerPlatformApiConsent();
438+
const agreed = await confirmPowerPlatformApiConsent();
422439
if (!agreed) {
423440
ppApiCheckbox.checked = false;
424441
}

src/renderer/modals/addConnection/view.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,22 @@ export function getAddConnectionModalView(isDarkTheme: boolean): ModalViewTempla
164164
<p id="connection-configure-note" class="helper-text connection-modal-footer-note" style="display: none; margin: 0;"></p>
165165
</div>
166166
167+
<div id="pp-api-consent-overlay" class="inline-confirm-overlay" role="dialog" aria-modal="true" aria-labelledby="pp-api-consent-title">
168+
<div class="inline-confirm-dialog">
169+
<p class="inline-confirm-title" id="pp-api-consent-title">Enable Power Platform API</p>
170+
<p class="inline-confirm-message">Power Platform API access requires admin-approved privileges and a properly configured Client ID.
171+
172+
If required privileges are missing, tools may not work as expected.
173+
174+
Select OK to Agree and continue.
175+
Select Cancel to keep this option disabled.</p>
176+
<div class="inline-confirm-actions">
177+
<button id="pp-api-consent-cancel" class="fluent-button fluent-button-secondary">Cancel</button>
178+
<button id="pp-api-consent-ok" class="fluent-button fluent-button-primary">OK</button>
179+
</div>
180+
</div>
181+
</div>
182+
167183
</div>`;
168184

169185
return { styles, body };

src/renderer/modals/editConnection/controller.ts

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -263,9 +263,26 @@ export function getEditConnectionModalControllerScript(channels: EditConnectionM
263263
};
264264
265265
const confirmPowerPlatformApiConsent = () => {
266-
return window.confirm(
267-
"Power Platform API access requires admin-approved privileges and a properly configured Client ID.\\n\\nIf required privileges are missing, tools may not work as expected.\\n\\nSelect OK to Agree and continue.\\nSelect Cancel to keep this option disabled.",
268-
);
266+
return new Promise((resolve) => {
267+
const overlay = document.getElementById("pp-api-consent-overlay");
268+
const okBtn = document.getElementById("pp-api-consent-ok");
269+
const cancelBtn = document.getElementById("pp-api-consent-cancel");
270+
if (!overlay || !okBtn || !cancelBtn) {
271+
resolve(false);
272+
return;
273+
}
274+
overlay.classList.add("visible");
275+
const cleanup = (result) => {
276+
overlay.classList.remove("visible");
277+
okBtn.removeEventListener("click", onOk);
278+
cancelBtn.removeEventListener("click", onCancel);
279+
resolve(result);
280+
};
281+
const onOk = () => cleanup(true);
282+
const onCancel = () => cleanup(false);
283+
okBtn.addEventListener("click", onOk);
284+
cancelBtn.addEventListener("click", onCancel);
285+
});
269286
};
270287
271288
const loadBrowserProfiles = async () => {
@@ -561,9 +578,9 @@ export function getEditConnectionModalControllerScript(channels: EditConnectionM
561578
authTypeSelect?.addEventListener("change", updateAuthVisibility);
562579
updateAuthVisibility();
563580
564-
ppApiCheckbox?.addEventListener("change", () => {
581+
ppApiCheckbox?.addEventListener("change", async () => {
565582
if (ppApiCheckbox instanceof HTMLInputElement && ppApiCheckbox.checked) {
566-
const agreed = confirmPowerPlatformApiConsent();
583+
const agreed = await confirmPowerPlatformApiConsent();
567584
if (!agreed) {
568585
ppApiCheckbox.checked = false;
569586
}

src/renderer/modals/editConnection/view.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,22 @@ export function getEditConnectionModalView(isDarkTheme: boolean): ModalViewTempl
164164
<p id="connection-configure-note" class="helper-text connection-modal-footer-note" style="display: none; margin: 0;"></p>
165165
</div>
166166
167+
<div id="pp-api-consent-overlay" class="inline-confirm-overlay" role="dialog" aria-modal="true" aria-labelledby="pp-api-consent-title">
168+
<div class="inline-confirm-dialog">
169+
<p class="inline-confirm-title" id="pp-api-consent-title">Enable Power Platform API</p>
170+
<p class="inline-confirm-message">Power Platform API access requires admin-approved privileges and a properly configured Client ID.
171+
172+
If required privileges are missing, tools may not work as expected.
173+
174+
Select OK to Agree and continue.
175+
Select Cancel to keep this option disabled.</p>
176+
<div class="inline-confirm-actions">
177+
<button id="pp-api-consent-cancel" class="fluent-button fluent-button-secondary">Cancel</button>
178+
<button id="pp-api-consent-ok" class="fluent-button fluent-button-primary">OK</button>
179+
</div>
180+
</div>
181+
</div>
182+
167183
</div>`;
168184

169185
return { styles, body };

src/renderer/modals/sharedStyles.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -783,5 +783,53 @@ export function getModalStyles(isDarkTheme: boolean): string {
783783
cursor: pointer;
784784
user-select: none;
785785
}
786+
787+
.inline-confirm-overlay {
788+
display: none;
789+
position: fixed;
790+
inset: 0;
791+
z-index: 1000;
792+
background: ${isDarkTheme ? "rgba(0, 0, 0, 0.65)" : "rgba(0, 0, 0, 0.45)"};
793+
align-items: center;
794+
justify-content: center;
795+
}
796+
797+
.inline-confirm-overlay.visible {
798+
display: flex;
799+
}
800+
801+
.inline-confirm-dialog {
802+
background: ${isDarkTheme ? "#2a2a2e" : "#ffffff"};
803+
border: 1px solid ${isDarkTheme ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)"};
804+
border-radius: 12px;
805+
padding: 24px;
806+
max-width: 420px;
807+
width: 90%;
808+
box-shadow: 0 16px 48px rgba(0, 0, 0, ${isDarkTheme ? "0.6" : "0.2"});
809+
display: flex;
810+
flex-direction: column;
811+
gap: 16px;
812+
}
813+
814+
.inline-confirm-title {
815+
font-size: 16px;
816+
font-weight: 600;
817+
margin: 0;
818+
color: ${isDarkTheme ? "#f3f3f3" : "#1f1f1f"};
819+
}
820+
821+
.inline-confirm-message {
822+
font-size: 13px;
823+
line-height: 1.6;
824+
color: ${isDarkTheme ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.75)"};
825+
margin: 0;
826+
white-space: pre-wrap;
827+
}
828+
829+
.inline-confirm-actions {
830+
display: flex;
831+
gap: 8px;
832+
justify-content: flex-end;
833+
}
786834
</style>`;
787835
}

0 commit comments

Comments
 (0)