Convert files to typescript

The change converts the following files to typescript:

* elements/plugins/gr-settings-api/gr-settings-api.ts
* elements/shared/gr-change-status/gr-change-status.ts
* elements/admin/gr-repo-plugin-config/gr-repo-plugin-config.ts

Change-Id: I14aebafee44ab11066699164356e3177742db802
This commit is contained in:
Dmitrii Filippov
2020-08-14 13:28:34 +02:00
parent 96a5531107
commit 782f055353
7 changed files with 283 additions and 197 deletions

View File

@@ -166,6 +166,8 @@ export enum Side {
* https://gerrit-review.googlesource.com/Documentation/rest-api-projects.html#config-parameter-info
*/
export enum ConfigParameterInfoType {
// Should be kept in sync with
// gerrit/java/com/google/gerrit/extensions/api/projects/ProjectConfigEntryType.java.
STRING = 'STRING',
INT = 'INT',
LONG = 'LONG',

View File

@@ -25,6 +25,9 @@ import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mix
import {PolymerElement} from '@polymer/polymer/polymer-element';
import {htmlTemplate} from './gr-plugin-config-array-editor_html';
import {property, customElement} from '@polymer/decorators';
import {PolymerDeepPropertyChange} from '@polymer/polymer/interfaces';
import {PluginOption} from '../gr-repo-plugin-config/gr-repo-plugin-config';
import {ConfigArrayParameterInfo} from '../../../types/common';
declare global {
interface HTMLElementTagNameMap {
@@ -32,6 +35,14 @@ declare global {
}
}
type ArrayPluginOption = PluginOption<ConfigArrayParameterInfo>;
export interface PluginConfigOptionsChangedEventDetail {
_key: string;
info: ConfigArrayParameterInfo;
notifyPath: string;
}
@customElement('gr-plugin-config-array-editor')
class GrPluginConfigArrayEditor extends GestureEventListeners(
LegacyElementMixin(PolymerElement)
@@ -52,12 +63,14 @@ class GrPluginConfigArrayEditor extends GestureEventListeners(
// This property is never null, since this component in only about operations
// on pluginOption.
@property({type: Object})
pluginOption!: PluginOption;
pluginOption!: ArrayPluginOption;
@property({type: Boolean, computed: '_computeDisabled(pluginOption.*)'})
disabled?: boolean;
_computeDisabled(record: PluginOptionRecord) {
_computeDisabled(
record: PolymerDeepPropertyChange<ArrayPluginOption, ArrayPluginOption>
) {
return !(
record &&
record.base &&
@@ -100,9 +113,9 @@ class GrPluginConfigArrayEditor extends GestureEventListeners(
_dispatchChanged(values: string[]) {
const {_key, info} = this.pluginOption;
const detail = {
const detail: PluginConfigOptionsChangedEventDetail = {
_key,
info: Object.assign(info, {values}, {}),
info: {...info, values},
notifyPath: `${_key}.values`,
};
this.dispatchEvent(
@@ -114,15 +127,3 @@ class GrPluginConfigArrayEditor extends GestureEventListeners(
return disabled ? 'hide' : '';
}
}
interface PluginOption {
info: {
values: string[];
editable?: boolean;
};
_key: string;
}
interface PluginOptionRecord {
base: PluginOption;
}

View File

@@ -14,127 +14,157 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import '@polymer/iron-input/iron-input.js';
import '@polymer/paper-toggle-button/paper-toggle-button.js';
import '../../../styles/gr-form-styles.js';
import '../../../styles/gr-subpage-styles.js';
import '../../../styles/shared-styles.js';
import '../../shared/gr-icons/gr-icons.js';
import '../../shared/gr-select/gr-select.js';
import '../../shared/gr-tooltip-content/gr-tooltip-content.js';
import '../gr-plugin-config-array-editor/gr-plugin-config-array-editor.js';
import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {htmlTemplate} from './gr-repo-plugin-config_html.js';
// Should be kept in sync with
// gerrit/java/com/google/gerrit/extensions/api/projects/ProjectConfigEntryType.java.
const CONFIG_ENTRY_TYPE = {
ARRAY: 'ARRAY',
BOOLEAN: 'BOOLEAN',
INT: 'INT',
LIST: 'LIST',
LONG: 'LONG',
STRING: 'STRING',
};
import '@polymer/iron-input/iron-input';
import '@polymer/paper-toggle-button/paper-toggle-button';
import '../../../styles/gr-form-styles';
import '../../../styles/gr-subpage-styles';
import '../../../styles/shared-styles';
import '../../shared/gr-icons/gr-icons';
import '../../shared/gr-select/gr-select';
import '../../shared/gr-tooltip-content/gr-tooltip-content';
import '../gr-plugin-config-array-editor/gr-plugin-config-array-editor';
import {dom, EventApi} from '@polymer/polymer/lib/legacy/polymer.dom';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element';
import {htmlTemplate} from './gr-repo-plugin-config_html';
import {customElement, property} from '@polymer/decorators';
import {ConfigParameterInfoType} from '../../../constants/constants';
import {PolymerDeepPropertyChange} from '@polymer/polymer/interfaces';
import {
ConfigParameterInfo,
ConfigParameterInfoBase,
PluginParameterToConfigParameterInfoMap,
} from '../../../types/common';
import {PaperToggleButtonElement} from '@polymer/paper-toggle-button/paper-toggle-button';
import {IronInputElement} from '@polymer/iron-input/iron-input';
import {PluginConfigOptionsChangedEventDetail} from '../gr-plugin-config-array-editor/gr-plugin-config-array-editor';
const PLUGIN_CONFIG_CHANGED_EVENT_NAME = 'plugin-config-changed';
/**
* @extends PolymerElement
*/
class GrRepoPluginConfig extends GestureEventListeners(
LegacyElementMixin(
PolymerElement)) {
static get template() { return htmlTemplate; }
export interface PluginOption<
T extends ConfigParameterInfoBase = ConfigParameterInfo
> {
_key: string; // parameterName of PluginParameterToConfigParameterInfoMap
info: T;
}
export interface ConfigChangeInfo {
_key: string; // parameterName of PluginParameterToConfigParameterInfoMap
info: ConfigParameterInfo;
notifyPath: string;
}
export interface PluginData {
name: string; // parameterName of PluginParameterToConfigParameterInfoMap
config: PluginParameterToConfigParameterInfoMap;
}
export interface PluginConfigChangeDetail {
name: string; // parameterName of PluginParameterToConfigParameterInfoMap
config: PluginParameterToConfigParameterInfoMap;
notifyPath: string;
}
@customElement('gr-repo-plugin-config')
class GrRepoPluginConfig extends GestureEventListeners(
LegacyElementMixin(PolymerElement)
) {
static get template() {
return htmlTemplate;
}
static get is() { return 'gr-repo-plugin-config'; }
/**
* Fired when the plugin config changes.
*
* @event plugin-config-changed
*/
static get properties() {
return {
/** @type {?} */
pluginData: Object,
/** @type {Array} */
_pluginConfigOptions: {
type: Array,
computed: '_computePluginConfigOptions(pluginData.*)',
},
};
}
@property({type: Object})
pluginData?: PluginData;
_computePluginConfigOptions(dataRecord) {
@property({
type: Array,
computed: '_computePluginConfigOptions(pluginData.*)',
})
_pluginConfigOptions!: PluginOption[]; // _computePluginConfigOptions never returns null
_computePluginConfigOptions(
dataRecord: PolymerDeepPropertyChange<PluginData, PluginData>
): PluginOption[] {
if (!dataRecord || !dataRecord.base || !dataRecord.base.config) {
return [];
}
const {config} = dataRecord.base;
return Object.keys(config)
.map(_key => { return {_key, info: config[_key]}; });
const config = dataRecord.base.config;
return Object.keys(config).map(_key => {
return {_key, info: config[_key]};
});
}
_isArray(type) {
return type === CONFIG_ENTRY_TYPE.ARRAY;
_isArray(type: ConfigParameterInfoType) {
return type === ConfigParameterInfoType.ARRAY;
}
_isBoolean(type) {
return type === CONFIG_ENTRY_TYPE.BOOLEAN;
_isBoolean(type: ConfigParameterInfoType) {
return type === ConfigParameterInfoType.BOOLEAN;
}
_isList(type) {
return type === CONFIG_ENTRY_TYPE.LIST;
_isList(type: ConfigParameterInfoType) {
return type === ConfigParameterInfoType.LIST;
}
_isString(type) {
_isString(type: ConfigParameterInfoType) {
// Treat numbers like strings for simplicity.
return type === CONFIG_ENTRY_TYPE.STRING ||
type === CONFIG_ENTRY_TYPE.INT ||
type === CONFIG_ENTRY_TYPE.LONG;
return (
type === ConfigParameterInfoType.STRING ||
type === ConfigParameterInfoType.INT ||
type === ConfigParameterInfoType.LONG
);
}
_computeDisabled(editable) {
_computeDisabled(editable: string) {
return editable === 'false';
}
/**
* @param {string} value - fallback to 'false' if undefined
*/
_computeChecked(value = 'false') {
return JSON.parse(value);
}
_handleStringChange(e) {
const el = dom(e).localTarget;
const _key = el.getAttribute('data-option-key');
const configChangeInfo =
this._buildConfigChangeInfo(el.value, _key);
_handleStringChange(e: Event) {
const el = (dom(e) as EventApi).localTarget as IronInputElement;
// In the template, the data-option-key is assigned to each editor
const _key = el.getAttribute('data-option-key')!;
const configChangeInfo = this._buildConfigChangeInfo(el.value, _key);
this._handleChange(configChangeInfo);
}
_handleListChange(e) {
const el = dom(e).localTarget;
const _key = el.getAttribute('data-option-key');
const configChangeInfo =
this._buildConfigChangeInfo(el.value, _key);
_handleListChange(e: Event) {
const el = (dom(e) as EventApi).localTarget as HTMLOptionElement;
// In the template, the data-option-key is assigned to each editor
const _key = el.getAttribute('data-option-key')!;
const configChangeInfo = this._buildConfigChangeInfo(el.value, _key);
this._handleChange(configChangeInfo);
}
_handleBooleanChange(e) {
const el = dom(e).localTarget;
const _key = el.getAttribute('data-option-key');
const configChangeInfo =
this._buildConfigChangeInfo(JSON.stringify(el.checked), _key);
_handleBooleanChange(e: Event) {
const el = (dom(e) as EventApi).localTarget as PaperToggleButtonElement;
// In the template, the data-option-key is assigned to each editor
const _key = el.getAttribute('data-option-key')!;
const configChangeInfo = this._buildConfigChangeInfo(
JSON.stringify(el.checked),
_key
);
this._handleChange(configChangeInfo);
}
_buildConfigChangeInfo(value, _key) {
const info = this.pluginData.config[_key];
info.value = value;
_buildConfigChangeInfo(
value: string | null | undefined,
_key: string
): ConfigChangeInfo {
// If pluginData is not set, editors are not created and this method
// can't be called
const info = this.pluginData!.config[_key];
info.value = value !== null ? value : undefined;
return {
_key,
info,
@@ -142,30 +172,41 @@ class GrRepoPluginConfig extends GestureEventListeners(
};
}
_handleArrayChange({detail}) {
this._handleChange(detail);
_handleArrayChange(e: CustomEvent<PluginConfigOptionsChangedEventDetail>) {
this._handleChange(e.detail);
}
_handleChange({_key, info, notifyPath}) {
const {name, config} = this.pluginData;
_handleChange({_key, info, notifyPath}: ConfigChangeInfo) {
// If pluginData is not set, editors are not created and this method
// can't be called
const {name, config} = this.pluginData!;
/** @type {Object} */
const detail = {
const detail: PluginConfigChangeDetail = {
name,
config: Object.assign(config, {[_key]: info}, {}),
config: {...config, [_key]: info},
notifyPath: `${name}.${notifyPath}`,
};
this.dispatchEvent(new CustomEvent(PLUGIN_CONFIG_CHANGED_EVENT_NAME,
{detail, bubbles: true, composed: true}));
this.dispatchEvent(
new CustomEvent(PLUGIN_CONFIG_CHANGED_EVENT_NAME, {
detail,
bubbles: true,
composed: true,
})
);
}
/**
* Work around a issue on iOS when clicking turns into double tap
*/
_onTapPluginBoolean(e) {
_onTapPluginBoolean(e: Event) {
e.preventDefault();
}
}
customElements.define(GrRepoPluginConfig.is, GrRepoPluginConfig);
declare global {
interface HTMLElementTagNameMap {
'gr-repo-plugin-config': GrRepoPluginConfig;
}
}

View File

@@ -70,6 +70,10 @@ const SUBMIT_TYPES = {
*/
class GrRepo extends GestureEventListeners(
LegacyElementMixin(PolymerElement)) {
// Notes for future TS conversion:
// _repoConfig: ConfigInfo
// _pluginData: PluginData[], can't be null, PluginData from gr-repo-plugin-config.ts
static get template() { return htmlTemplate; }
static get is() { return 'gr-repo'; }

View File

@@ -14,51 +14,66 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import '../../settings/gr-settings-view/gr-settings-item.js';
import '../../settings/gr-settings-view/gr-settings-menu-item.js';
import '../../settings/gr-settings-view/gr-settings-item';
import '../../settings/gr-settings-view/gr-settings-menu-item';
/** @constructor */
export function GrSettingsApi(plugin) {
this._title = '(no title)';
// Generate default screen URL token, specific to plugin, and unique(ish).
this._token =
plugin.getPluginName() + Math.random().toString(36)
.substr(5);
this.plugin = plugin;
// TODO(TS): replace with Plugin once gr-public-js-api migrated
interface PluginApi {
getPluginName(): string;
hook(endpointName: string, option?: {replace?: boolean}): HookApi;
}
GrSettingsApi.prototype.title = function(title) {
this._title = title;
return this;
};
interface HookApi {
onAttached(callback: HookCallback): this;
}
GrSettingsApi.prototype.token = function(token) {
this._token = token;
return this;
};
type HookCallback = (el: Node) => void;
GrSettingsApi.prototype.module = function(moduleName) {
this._moduleName = moduleName;
return this;
};
export class GrSettingsApi {
private _token: string;
GrSettingsApi.prototype.build = function() {
if (!this._moduleName) {
throw new Error('Settings screen custom element not defined!');
private _title = '(no title)';
private _moduleName?: string;
constructor(readonly plugin: PluginApi) {
// Generate default screen URL token, specific to plugin, and unique(ish).
this._token = plugin.getPluginName() + Math.random().toString(36).substr(5);
}
const token = `x/${this.plugin.getPluginName()}/${this._token}`;
this.plugin.hook('settings-menu-item').onAttached(el => {
const menuItem = document.createElement('gr-settings-menu-item');
menuItem.title = this._title;
menuItem.href = `#${token}`;
el.appendChild(menuItem);
});
return this.plugin.hook('settings-screen').onAttached(el => {
const item = document.createElement('gr-settings-item');
item.title = this._title;
item.anchor = token;
item.appendChild(document.createElement(this._moduleName));
el.appendChild(item);
});
};
title(newTitle: string) {
this._title = newTitle;
return this;
}
token(newToken: string) {
this._token = newToken;
return this;
}
module(newModuleName: string) {
this._moduleName = newModuleName;
return this;
}
build() {
if (!this._moduleName) {
throw new Error('Settings screen custom element not defined!');
}
const token = `x/${this.plugin.getPluginName()}/${this._token}`;
this.plugin.hook('settings-menu-item').onAttached(el => {
const menuItem = document.createElement('gr-settings-menu-item');
menuItem.title = this._title;
menuItem.href = `#${token}`;
el.appendChild(menuItem);
});
const moduleName = this._moduleName;
return this.plugin.hook('settings-screen').onAttached(el => {
const item = document.createElement('gr-settings-item');
item.title = this._title;
item.anchor = token;
item.appendChild(document.createElement(moduleName));
el.appendChild(item);
});
}
}

View File

@@ -14,71 +14,67 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import '../gr-rest-api-interface/gr-rest-api-interface.js';
import '../gr-tooltip-content/gr-tooltip-content.js';
import '../../../styles/shared-styles.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {htmlTemplate} from './gr-change-status_html.js';
import '../gr-rest-api-interface/gr-rest-api-interface';
import '../gr-tooltip-content/gr-tooltip-content';
import '../../../styles/shared-styles';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element';
import {htmlTemplate} from './gr-change-status_html';
import {customElement, property} from '@polymer/decorators';
const ChangeStates = {
MERGED: 'Merged',
ABANDONED: 'Abandoned',
MERGE_CONFLICT: 'Merge Conflict',
WIP: 'WIP',
PRIVATE: 'Private',
};
enum ChangeStates {
MERGED = 'Merged',
ABANDONED = 'Abandoned',
MERGE_CONFLICT = 'Merge Conflict',
WIP = 'WIP',
PRIVATE = 'Private',
}
const WIP_TOOLTIP = 'This change isn\'t ready to be reviewed or submitted. ' +
'It will not appear on dashboards unless you are CC\'ed or assigned, ' +
'and email notifications will be silenced until the review is started.';
const WIP_TOOLTIP =
"This change isn't ready to be reviewed or submitted. " +
"It will not appear on dashboards unless you are CC'ed or assigned, " +
'and email notifications will be silenced until the review is started.';
const MERGE_CONFLICT_TOOLTIP = 'This change has merge conflicts. ' +
'Download the patch and run "git rebase master". ' +
'Upload a new patchset after resolving all merge conflicts.';
const MERGE_CONFLICT_TOOLTIP =
'This change has merge conflicts. ' +
'Download the patch and run "git rebase master". ' +
'Upload a new patchset after resolving all merge conflicts.';
const PRIVATE_TOOLTIP = 'This change is only visible to its owner and ' +
'current reviewers (or anyone with "View Private Changes" permission).';
const PRIVATE_TOOLTIP =
'This change is only visible to its owner and ' +
'current reviewers (or anyone with "View Private Changes" permission).';
/** @extends PolymerElement */
@customElement('gr-change-status')
class GrChangeStatus extends GestureEventListeners(
LegacyElementMixin(
PolymerElement)) {
static get template() { return htmlTemplate; }
static get is() { return 'gr-change-status'; }
static get properties() {
return {
flat: {
type: Boolean,
value: false,
reflectToAttribute: true,
},
status: {
type: String,
observer: '_updateChipDetails',
},
tooltipText: {
type: String,
value: '',
},
};
LegacyElementMixin(PolymerElement)
) {
static get template() {
return htmlTemplate;
}
_computeStatusString(status) {
@property({type: Boolean, reflectToAttribute: true})
flat = false;
@property({type: String, observer: '_updateChipDetails'})
status?: ChangeStates;
@property({type: String})
tooltipText = '';
_computeStatusString(status: ChangeStates) {
if (status === ChangeStates.WIP && !this.flat) {
return 'Work in Progress';
}
return status;
}
_toClassName(str) {
return str.toLowerCase().replace(/\s/g, '-');
_toClassName(str?: ChangeStates) {
return str ? str.toLowerCase().replace(/\s/g, '-') : '';
}
_updateChipDetails(status, previousStatus) {
_updateChipDetails(status?: ChangeStates, previousStatus?: ChangeStates) {
if (previousStatus) {
this.classList.remove(this._toClassName(previousStatus));
}
@@ -101,4 +97,8 @@ class GrChangeStatus extends GestureEventListeners(
}
}
customElements.define(GrChangeStatus.is, GrChangeStatus);
declare global {
interface HTMLElementTagNameMap {
'gr-change-status': GrChangeStatus;
}
}

View File

@@ -1210,7 +1210,7 @@ export interface CommentLinkInfo {
* The ConfigParameterInfo entity describes a project configurationparameter.
* https://gerrit-review.googlesource.com/Documentation/rest-api-projects.html#config-parameter-info
*/
export interface ConfigParameterInfo {
export interface ConfigParameterInfoBase {
display_name?: string;
description?: string;
warning?: string;
@@ -1224,6 +1224,21 @@ export interface ConfigParameterInfo {
inherited_value?: string;
}
export interface ConfigArrayParameterInfo extends ConfigParameterInfoBase {
type: ConfigParameterInfoType.ARRAY;
values: string[];
}
export interface ConfigListParameterInfo extends ConfigParameterInfoBase {
type: ConfigParameterInfoType.LIST;
permitted_values?: string[];
}
export type ConfigParameterInfo =
| ConfigParameterInfoBase
| ConfigArrayParameterInfo
| ConfigListParameterInfo;
export interface CommentLinks {
[name: string]: CommentLinkInfo;
}
@@ -1251,11 +1266,19 @@ export interface ConfigInfo {
match_author_to_committer_date?: InheritedBooleanInfo;
state?: ProjectState;
commentlinks: CommentLinks;
plugin_config?: ConfigParameterInfo;
plugin_config?: PluginNameToPluginParametersMap;
actions?: {[viewName: string]: ActionInfo};
reject_empty_commit?: InheritedBooleanInfo;
}
export type PluginParameterToConfigParameterInfoMap = {
[parameterName: string]: ConfigParameterInfo;
};
export type PluginNameToPluginParametersMap = {
[pluginName: string]: PluginParameterToConfigParameterInfoMap;
};
/**
* The ProjectAccessInfo entity contains information about the access rights for a project
* https://gerrit-review.googlesource.com/Documentation/rest-api-access.html#project-access-info