diff --git a/client-src/elements/chromedash-form-field.ts b/client-src/elements/chromedash-form-field.ts index 2a435caf..3ff3fe15 100644 --- a/client-src/elements/chromedash-form-field.ts +++ b/client-src/elements/chromedash-form-field.ts @@ -38,6 +38,8 @@ export class ChromedashFormField extends LitElement { shouldFadeIn = false; @property({type: Boolean}) forEnterprise = false; + @property({type: String}) + disabledReason = ''; @property({type: Number}) stageId; @property({type: Number}) @@ -324,6 +326,8 @@ export class ChromedashFormField extends LitElement { size="small" autocomplete="off" .value=${fieldValue} + help-text="${this.disabledReason}" + ?disabled=${this.disabled || this.disabledReason || fieldDisabled} ?required=${this.fieldProps.required} @sl-change="${this.handleFieldUpdated}" > diff --git a/client-src/elements/chromedash-guide-editall-page.ts b/client-src/elements/chromedash-guide-editall-page.ts index 27cf4d05..dba227a7 100644 --- a/client-src/elements/chromedash-guide-editall-page.ts +++ b/client-src/elements/chromedash-guide-editall-page.ts @@ -3,6 +3,7 @@ import {ref} from 'lit/directives/ref.js'; import {repeat} from 'lit/directives/repeat.js'; import { formatFeatureChanges, + getDisabledHelpText, getStageValue, showToastMessage, flattenSections, @@ -287,6 +288,7 @@ export class ChromedashGuideEditallPage extends LitElement { index=${index} stageId=${ifDefined(stageId)} value=${value} + disabledReason="${getDisabledHelpText(field, feStage)}" .fieldValues=${this.fieldValues} .feature=${formattedFeature} ?forEnterprise=${formattedFeature.is_enterprise_feature} diff --git a/client-src/elements/chromedash-guide-metadata-page.ts b/client-src/elements/chromedash-guide-metadata-page.ts index 73fee7a6..1de369da 100644 --- a/client-src/elements/chromedash-guide-metadata-page.ts +++ b/client-src/elements/chromedash-guide-metadata-page.ts @@ -2,6 +2,7 @@ import {LitElement, css, html, nothing} from 'lit'; import {ref} from 'lit/directives/ref.js'; import { formatFeatureChanges, + getDisabledHelpText, showToastMessage, setupScrollToHash, FieldInfo, @@ -175,11 +176,13 @@ export class ChromedashGuideMetadataPage extends LitElement { // Add the field to this component's stage before creating the field component. const index = this.fieldValues.length; this.fieldValues.push({name: featureJSONKey, touched: false, value}); + return html` diff --git a/client-src/elements/chromedash-ot-extension-page.ts b/client-src/elements/chromedash-ot-extension-page.ts index e833f22c..dde93d8d 100644 --- a/client-src/elements/chromedash-ot-extension-page.ts +++ b/client-src/elements/chromedash-ot-extension-page.ts @@ -14,6 +14,7 @@ import { FieldInfo, extensionMilestoneIsValid, formatFeatureChanges, + getDisabledHelpText, setupScrollToHash, showToastMessage, } from './utils.js'; @@ -327,6 +328,7 @@ export class ChromedashOTExtensionPage extends LitElement { diff --git a/client-src/elements/utils.ts b/client-src/elements/utils.ts index 3050d14f..46436ef0 100644 --- a/client-src/elements/utils.ts +++ b/client-src/elements/utils.ts @@ -8,6 +8,7 @@ import { ENTERPRISE_FEATURE_CATEGORIES_DISPLAYNAME, ENTERPRISE_IMPACT_DISPLAYNAME, OT_MILESTONE_END_FIELDS, + OT_SETUP_STATUS_OPTIONS, PLATFORMS_DISPLAYNAME, ROLLOUT_IMPACT_DISPLAYNAME, STAGE_FIELD_NAME_MAPPING, @@ -445,6 +446,26 @@ export function getNewLocation(params, location) { return url; } +// Get any help text for a specific field based on the condition of if it should be disabled. +export function getDisabledHelpText(field, feStage?) { + // OT milestone fields should not be editable when the automated + // OT creation process is in progress or in a failed state. + if ( + field === 'ot_milestone_desktop_start' || + field === 'ot_milestone_desktop_end' + ) { + if ( + feStage?.ot_setup_status === + OT_SETUP_STATUS_OPTIONS.OT_READY_FOR_CREATION || + feStage?.ot_setup_status === OT_SETUP_STATUS_OPTIONS.OT_CREATION_FAILED || + feStage?.ot_setup_status === OT_SETUP_STATUS_OPTIONS.OT_ACTIVATION_FAILED + ) { + return 'Origin trial milestone cannot be edited while a creation request is in progress'; + } + } + return ''; +} + /** * Update window.location with new query params. * @param {string} key is the key of the query param. diff --git a/client-src/elements/utils_test.ts b/client-src/elements/utils_test.ts index 5e589dc3..9847d142 100644 --- a/client-src/elements/utils_test.ts +++ b/client-src/elements/utils_test.ts @@ -1,6 +1,12 @@ import {html} from 'lit'; -import {autolink, clamp, formatFeatureChanges} from './utils'; +import { + autolink, + clamp, + formatFeatureChanges, + getDisabledHelpText, +} from './utils'; import {assert} from '@open-wc/testing'; +import {OT_SETUP_STATUS_OPTIONS} from './form-field-enums'; const compareAutolinkResult = (result, expected) => { assert.equal(result.length, expected.length); @@ -285,4 +291,25 @@ go/this-is-a-test assert.deepEqual(formatFeatureChanges(testFieldValues, featureId), expected); }); }); + + describe('getDisabledHelpText', () => { + it('returns disabled help text for OT milestones while automated creation in progress', () => { + const otStartResult = getDisabledHelpText('ot_milestone_desktop_start', + {ot_setup_status: OT_SETUP_STATUS_OPTIONS.OT_READY_FOR_CREATION}) + assert.notEqual(otStartResult, ''); + const otEndResult = getDisabledHelpText('ot_milestone_desktop_end', + {ot_setup_status: OT_SETUP_STATUS_OPTIONS.OT_READY_FOR_CREATION}) + assert.notEqual(otEndResult, ''); + }); + it('returns no disabled help text for OT milestone fields when automated creation not in progress', () => { + const otStartResult = getDisabledHelpText('ot_milestone_desktop_start', {}) + assert.equal(otStartResult, ''); + const otEndResult = getDisabledHelpText('ot_milestone_desktop_start', {}) + assert.equal(otEndResult, ''); + }); + it('returns an empty string for fields with no conditional disabling', () => { + const result = getDisabledHelpText('name', {}); + assert.equal(result, ''); + }); + }); });