Move gr-overlay to dialog element for delete-project plugin
Change-Id: I2936af2ae7f663291e91d867898597946ee619fe
(cherry picked from commit 415f4d95237ee8c776f22199635139595b7a129f)
diff --git a/web/gr-delete-repo.ts b/web/gr-delete-repo.ts
index 55995fd..0bad785 100644
--- a/web/gr-delete-repo.ts
+++ b/web/gr-delete-repo.ts
@@ -20,15 +20,9 @@
ConfigInfo,
RepoName,
} from '@gerritcodereview/typescript-api/rest-api';
-import {css, html, LitElement} from 'lit';
+import {css, CSSResult, html, LitElement} from 'lit';
import {customElement, property, query, state} from 'lit/decorators.js';
-// TODO: This should be defined and exposed by @gerritcodereview/typescript-api
-type GrOverlay = Element & {
- open(): void;
- close(): void;
-};
-
declare global {
interface HTMLElementTagNameMap {
'gr-delete-repo': GrDeleteRepo;
@@ -40,8 +34,8 @@
@customElement('gr-delete-repo')
export class GrDeleteRepo extends LitElement {
- @query('#deleteRepoOverlay')
- deleteRepoOverlay?: GrOverlay;
+ @query('#deleteRepoModal')
+ deleteRepoModal?: HTMLDialogElement;
@query('#preserveGitRepoCheckBox')
preserveGitRepoCheckBox?: HTMLInputElement;
@@ -64,20 +58,26 @@
@state()
private error?: string;
- static override styles = css`
- :host {
- display: block;
- margin-bottom: var(--spacing-xxl);
- }
- /* TODO: Find a way to use shared styles in lit elements in plugins. */
- h3 {
- font: inherit;
- margin: 0;
- }
- .error {
- color: red;
- }
- `;
+ static override get styles() {
+ return [
+ window.Gerrit.styles.font as CSSResult,
+ window.Gerrit.styles.modal as CSSResult,
+ css`
+ :host {
+ display: block;
+ margin-bottom: var(--spacing-xxl);
+ }
+ /* TODO: Find a way to use shared styles in lit elements in plugins. */
+ h3 {
+ font: inherit;
+ margin: 0;
+ }
+ .error {
+ color: red;
+ }
+ `,
+ ];
+ }
get action(): ActionInfo | undefined {
return this.config.actions?.[this.actionId];
@@ -101,18 +101,18 @@
?disabled="${!this.action.enabled}"
@click="${() => {
this.error = undefined;
- this.deleteRepoOverlay?.open();
+ this.deleteRepoModal?.showModal();
}}"
>
${this.action.label}
</gr-button>
${this.renderError()}
- <gr-overlay id="deleteRepoOverlay" with-backdrop>
+ <dialog id="deleteRepoModal">
<gr-dialog
id="deleteRepoDialog"
confirm-label="Delete"
@confirm="${this.deleteRepo}"
- @cancel="${() => this.deleteRepoOverlay?.close()}"
+ @cancel="${() => this.deleteRepoModal?.close()}"
>
<div class="header" slot="header">
Are you really sure you want to delete the repo: "${this.repoName}"?
@@ -136,19 +136,19 @@
</div>
</div>
</gr-dialog>
- </gr-overlay>
+ </dialog>
`;
}
private deleteRepo() {
if (!this.action) {
this.error = 'delete action undefined';
- this.deleteRepoOverlay?.close();
+ this.deleteRepoModal?.close();
return;
}
if (!this.action.method) {
this.error = 'delete action does not have a HTTP method set';
- this.deleteRepoOverlay?.close();
+ this.deleteRepoModal?.close();
return;
}
this.error = undefined;
@@ -165,12 +165,12 @@
.send(this.action.method, endpoint, json)
.then(_ => {
this.plugin.restApi().invalidateReposCache();
- this.deleteRepoOverlay?.close();
+ this.deleteRepoModal?.close();
window.location.href = `${this.getBaseUrl()}/admin/repos`;
})
.catch(e => {
this.error = e;
- this.deleteRepoOverlay?.close();
+ this.deleteRepoModal?.close();
});
}
