Disable changing OT milestones when OT creation process is in progress (client-side) (#4218)

* disable changing OT milestones while OT is created

* logic update

* remove textarea disabled addition

* change "helpText" to "disabledReason"

* remove unnecessary variable

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}"
         >

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}

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`
         <chromedash-form-field
           name=${field}
           index=${index}
           value=${value}
+          disabledReason="${getDisabledHelpText(field)}"
           .fieldValues=${this.fieldValues}
           .feature=${formattedFeature}
           ?forEnterprise=${formattedFeature.is_enterprise_feature}

client-src/elements/chromedash-guide-new-page.ts

@@ -9,7 +9,12 @@ import {
 import {ALL_FIELDS} from './form-field-specs';
 import {SHARED_STYLES} from '../css/shared-css.js';
 import {FORM_STYLES} from '../css/forms-css.js';
-import {setupScrollToHash, formatFeatureChanges, FieldInfo} from './utils';
+import {
+  setupScrollToHash,
+  formatFeatureChanges,
+  getDisabledHelpText,
+  FieldInfo,
+} from './utils';
 import {customElement, property, state} from 'lit/decorators.js';
 import {Feature} from '../js-src/cs-client';
 
@@ -171,11 +176,13 @@ export class ChromedashGuideNewPage extends LitElement {
         touched: false,
         value, // stageId
       });
+
       return html`
         <chromedash-form-field
           name=${field}
           index=${index}
           value=${value}
+          disabledReason="${getDisabledHelpText(field)}"
           .fieldValues=${this.fieldValues}
           ?forEnterprise=${this.isEnterpriseFeature}
           @form-field-update="${this.handleFormFieldUpdate}"

client-src/elements/chromedash-guide-stage-page.ts

@@ -1,6 +1,7 @@
 import {LitElement, TemplateResult, css, html, nothing} from 'lit';
 import {ref} from 'lit/directives/ref.js';
 import {
+  getDisabledHelpText,
   FieldInfo,
   formatFeatureChanges,
   getStageValue,
@@ -269,6 +270,7 @@ export class ChromedashGuideStagePage extends LitElement {
           name=${field}
           index=${index}
           value=${value}
+          disabledReason="${getDisabledHelpText(field, feStage)}"
           .fieldValues=${this.fieldValues}
           .feature=${formattedFeature}
           stageId=${feStage.id}

client-src/elements/chromedash-guide-verify-accuracy-page.ts

@@ -1,6 +1,7 @@
 import {LitElement, css, html, nothing} from 'lit';
 import {ref} from 'lit/directives/ref.js';
 import {
+  getDisabledHelpText,
   getStageValue,
   flattenSections,
   formatFeatureChanges,
@@ -209,6 +210,7 @@ export class ChromedashGuideVerifyAccuracyPage extends LitElement {
           name=${field}
           index=${index}
           value=${value}
+          disabledReason="${getDisabledHelpText(field, feStage)}"
           .fieldValues=${this.fieldValues}
           .feature=${formattedFeature}
           ?forEnterprise=${formattedFeature.is_enterprise_feature}

client-src/elements/chromedash-ot-creation-page.ts

@@ -11,6 +11,7 @@ import {ALL_FIELDS} from './form-field-specs.js';
 import {
   FieldInfo,
   formatFeatureChanges,
+  getDisabledHelpText,
   getStageValue,
   setupScrollToHash,
   showToastMessage,
@@ -394,9 +395,10 @@ export class ChromedashOTCreationPage extends LitElement {
           name=${fieldInfo.name}
           index=${i}
           value=${fieldInfo.value}
+          disabledReason="${getDisabledHelpText(fieldInfo.name, this.stage)}"
           .checkMessage=${fieldInfo.checkMessage}
           .fieldValues=${this.fieldValues}
-          .shouldFadeIn=${shouldFadeIn}
+          ?shouldFadeIn=${shouldFadeIn}
           @form-field-update="${this.handleFormFieldUpdate}"
         >
         </chromedash-form-field>

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 {
         <chromedash-form-field
           name=${featureJSONKey}
           index=${index}
+          disabledReason="${getDisabledHelpText(field, this.stage)}"
           .fieldValues=${this.fieldValues}
           @form-field-update="${this.handleFormFieldUpdate}"
         >

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.

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, '');
+    });
+  });
 });