gr-group': Replace gr-select with md-checkbox
It's true or false, so can be better served by a checkbox.
Also provide a consistent UI across different browsers and OS.
Screenshots: https://imgur.com/a/X8RFg6C
Release-Notes: gr-group': Replace gr-select with md-checkbox
Change-Id: I261761704f941faca778632de94eaa8197aedcfe
diff --git a/polygerrit-ui/app/elements/admin/gr-group/gr-group.ts b/polygerrit-ui/app/elements/admin/gr-group/gr-group.ts
index dfa170b..aa4f114 100644
--- a/polygerrit-ui/app/elements/admin/gr-group/gr-group.ts
+++ b/polygerrit-ui/app/elements/admin/gr-group/gr-group.ts
@@ -6,7 +6,6 @@
import '../../shared/gr-autocomplete/gr-autocomplete';
import '../../shared/gr-button/gr-button';
import '../../shared/gr-copy-clipboard/gr-copy-clipboard';
-import '../../shared/gr-select/gr-select';
import {AutocompleteQuery} from '../../shared/gr-autocomplete/gr-autocomplete';
import {AutocompleteSuggestion} from '../../../utils/autocomplete-util';
import {GroupId, GroupInfo, GroupName} from '../../../types/common';
@@ -14,8 +13,7 @@
import {resolve} from '../../../models/dependency';
import {getAppContext} from '../../../services/app-context';
import {ErrorCallback} from '../../../api/rest';
-import {convertToString} from '../../../utils/string-util';
-import {BindValueChangeEvent, ValueChangedEvent} from '../../../types/events';
+import {ValueChangedEvent} from '../../../types/events';
import {fontStyles} from '../../../styles/gr-font-styles';
import {grFormStyles} from '../../../styles/gr-form-styles';
import {sharedStyles} from '../../../styles/shared-styles';
@@ -32,20 +30,12 @@
import {subscribe} from '../../lit/subscription-controller';
import {when} from 'lit/directives/when.js';
import {AdminChildView, createAdminUrl} from '../../../models/views/admin';
+import '@material/web/checkbox/checkbox';
+import {MdCheckbox} from '@material/web/checkbox/checkbox';
+import {materialStyles} from '../../../styles/gr-material-styles';
const INTERNAL_GROUP_REGEX = /^[\da-f]{40}$/;
-const OPTIONS = {
- submitFalse: {
- value: false,
- label: 'False',
- },
- submitTrue: {
- value: true,
- label: 'True',
- },
-};
-
export interface GroupNameChangedDetail {
name: GroupName;
external: boolean;
@@ -79,8 +69,6 @@
@state() private originalOptionsVisibleToAll?: boolean;
- @state() private submitTypes = Object.values(OPTIONS);
-
// private but used in test
@state() isAdmin = false;
@@ -134,6 +122,7 @@
formStyles,
sharedStyles,
subpageStyles,
+ materialStyles,
css`
h3.edited:after {
color: var(--deemphasized-text-color);
@@ -306,21 +295,12 @@
Make group visible to all registered users
</span>
<span class="value">
- <gr-select
+ <md-checkbox
id="visibleToAll"
- .bindValue=${convertToString(
- Boolean(this.groupConfig?.options?.visible_to_all)
- )}
- @bind-value-changed=${this.handleOptionsBindValueChanged}
- >
- <select ?disabled=${this.computeGroupDisabled()}>
- ${this.submitTypes.map(
- item => html`
- <option value=${item.value}>${item.label}</option>
- `
- )}
- </select>
- </gr-select>
+ ?checked=${Boolean(this.groupConfig?.options?.visible_to_all)}
+ ?disabled=${this.computeGroupDisabled()}
+ @change=${this.handleOptionsChange}
+ ></md-checkbox>
</span>
</section>
<span class="value">
@@ -560,13 +540,9 @@
this.requestUpdate();
}
- private handleOptionsBindValueChanged(e: BindValueChangeEvent) {
+ private handleOptionsChange(e: Event) {
if (!this.groupConfig || this.loading) return;
-
- // Because the value for e.detail.value is a string
- // we convert the value to a boolean.
- const value = e.detail.value === 'true' ? true : false;
- this.groupConfig.options!.visible_to_all = value;
+ this.groupConfig.options!.visible_to_all = (e.target as MdCheckbox).checked;
this.requestUpdate();
}
}
diff --git a/polygerrit-ui/app/elements/admin/gr-group/gr-group_test.ts b/polygerrit-ui/app/elements/admin/gr-group/gr-group_test.ts
index 622a18c..30e75b7 100644
--- a/polygerrit-ui/app/elements/admin/gr-group/gr-group_test.ts
+++ b/polygerrit-ui/app/elements/admin/gr-group/gr-group_test.ts
@@ -19,8 +19,8 @@
import {GrAutocomplete} from '../../shared/gr-autocomplete/gr-autocomplete';
import {GrButton} from '../../shared/gr-button/gr-button';
import {GrCopyClipboard} from '../../shared/gr-copy-clipboard/gr-copy-clipboard';
-import {GrSelect} from '../../shared/gr-select/gr-select';
import {assert, fixture, html} from '@open-wc/testing';
+import {MdCheckbox} from '@material/web/checkbox/checkbox';
suite('gr-group tests', () => {
let element: GrGroup;
@@ -125,12 +125,7 @@
Make group visible to all registered users
</span>
<span class="value">
- <gr-select id="visibleToAll">
- <select disabled="">
- <option value="false">False</option>
- <option value="true">True</option>
- </select>
- </gr-select>
+ <md-checkbox disabled="" id="visibleToAll"> </md-checkbox>
</span>
</section>
<span class="value">
@@ -180,11 +175,8 @@
element.groupId = '1' as GroupId;
await element.loadGroup();
assert.isTrue(element.groupIsInternal);
- // The value returned is a boolean in a string
- // thus we have to check with the string.
- assert.equal(
- queryAndAssert<GrSelect>(element, '#visibleToAll').bindValue,
- 'false'
+ assert.isFalse(
+ queryAndAssert<MdCheckbox>(element, '#visibleToAll').checked
);
});
@@ -199,11 +191,8 @@
element.groupId = '1' as GroupId;
await element.loadGroup();
assert.isFalse(element.groupIsInternal);
- // The value returned is a boolean in a string
- // thus we have to check with the string.
- assert.equal(
- queryAndAssert<GrSelect>(element, '#visibleToAll').bindValue,
- 'false'
+ assert.isFalse(
+ queryAndAssert<MdCheckbox>(element, '#visibleToAll').checked
);
});
