refactor(value-editor): migrate to TypeScript and split by concern

frontend/common/utils/__tests__/copyToClipboard.test.ts

@@ -0,0 +1,47 @@
+import { copyToClipboard } from 'common/utils/copyToClipboard'
+
+const writeText = jest.fn()
+const toast = jest.fn()
+
+beforeEach(() => {
+  writeText.mockReset().mockResolvedValue(undefined)
+  toast.mockReset()
+  ;(global as any).toast = toast
+  Object.defineProperty(global, 'navigator', {
+    configurable: true,
+    value: { clipboard: { writeText } },
+    writable: true,
+  })
+})
+
+describe('copyToClipboard', () => {
+  it('writes the value and toasts the default success message', async () => {
+    await copyToClipboard('DEFAULT_VALUE')
+
+    expect(writeText).toHaveBeenCalledWith('DEFAULT_VALUE')
+    expect(toast).toHaveBeenCalledWith('Copied to clipboard')
+  })
+
+  it('toasts a caller-supplied success message instead', async () => {
+    await copyToClipboard('prompt', 'Cleanup prompt copied to clipboard')
+
+    expect(toast).toHaveBeenCalledWith('Cleanup prompt copied to clipboard')
+  })
+
+  it('toasts the failure and rethrows when the write is rejected', async () => {
+    const error = new Error('denied')
+    writeText.mockRejectedValue(error)
+
+    await expect(copyToClipboard('value')).rejects.toThrow(error)
+    expect(toast).toHaveBeenCalledWith('Failed to copy to clipboard')
+  })
+
+  it('toasts a caller-supplied failure message instead', async () => {
+    writeText.mockRejectedValue(new Error('denied'))
+
+    await expect(
+      copyToClipboard('value', undefined, 'Could not copy the value'),
+    ).rejects.toThrow()
+    expect(toast).toHaveBeenCalledWith('Could not copy the value')
+  })
+})

frontend/common/utils/copyToClipboard.ts

@@ -0,0 +1,21 @@
+/**
+ * Write `value` to the clipboard and toast the outcome.
+ *
+ * Rethrows after toasting so callers that need to react to a failure can,
+ * but the toast means most callers do not have to.
+ */
+export const copyToClipboard = async (
+  value: string,
+  successMessage?: string,
+  errorMessage?: string,
+) => {
+  try {
+    await navigator.clipboard.writeText(value)
+    toast(successMessage ?? 'Copied to clipboard')
+  } catch (error) {
+    toast(errorMessage ?? 'Failed to copy to clipboard')
+    throw error
+  }
+}
+
+export default copyToClipboard

frontend/common/utils/utils.tsx

@@ -71,6 +71,7 @@ export const planNames = {
   startup: 'Startup',
 }
 import BaseUtils from './base/_utils'
+import { copyToClipboard } from './copyToClipboard'
 const Utils = Object.assign({}, BaseUtils, {
   appendImage: (src: string) => {
     const img = document.createElement('img')
@@ -148,19 +149,7 @@ const Utils = Object.assign({}, BaseUtils, {
     return res
   },
 
-  copyToClipboard: async (
-    value: string,
-    successMessage?: string,
-    errorMessage?: string,
-  ) => {
-    try {
-      await navigator.clipboard.writeText(value)
-      toast(successMessage ?? 'Copied to clipboard')
-    } catch (error) {
-      toast(errorMessage ?? 'Failed to copy to clipboard')
-      throw error
-    }
-  },
+  copyToClipboard,
 
   displayLimitAlert(type: string, percentage: number | undefined) {
     const envOrProject =

frontend/documentation/components/ValueEditor.stories.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import type { Meta, StoryObj } from 'storybook'
 
-import ValueEditor from 'components/ValueEditor'
-import FieldLabel from 'components/base/forms/FieldLabel'
 import Constants from 'common/constants'
+import ValueEditor, { ValueEditorProps } from 'components/ValueEditor'
+import ControlWeightChip from 'components/mv/ControlWeightChip'
 
 const meta: Meta = {
   parameters: { chromatic: { disableSnapshot: false } },
@@ -13,23 +13,27 @@ export default meta
 
 type Story = StoryObj
 
-const DEFAULT_TOOLTIP = Constants.strings.REMOTE_CONFIG_DESCRIPTION
+// The real props, so a story cannot drift from the component's contract.
+type InteractiveProps = Omit<ValueEditorProps, 'value' | 'onChange'> & {
+  initialValue?: string
+  width?: number
+}
 
 const Interactive = ({
   initialValue = '',
-  label,
-  tooltip = DEFAULT_TOOLTIP,
+  width = 640,
   ...props
-}: Record<string, any>) => {
+}: InteractiveProps) => {
   const [value, setValue] = useState(initialValue)
   return (
-    <div style={{ maxWidth: 640, paddingTop: 24 }}>
-      {label && <FieldLabel tooltip={tooltip}>{label}</FieldLabel>}
+    <div style={{ maxWidth: width, padding: 16 }}>
       <ValueEditor {...props} value={value} onChange={setValue} />
     </div>
   )
 }
 
+// Empty state. The "Enter a value..." text is not a real ::placeholder — it is
+// rendered into the contenteditable and styled by `code.txt.empty`.
 export const Default: Story = {
   render: () => <Interactive label='Value' />,
 }
@@ -53,23 +57,49 @@ export const Json: Story = {
   render: () => (
     <Interactive
       label='Value'
-      language='json'
       initialValue='{ "colour": "blue", "size": 12 }'
     />
   ),
 }
 
+// A value that arrives after mount, the way a loaded feature does. Detection
+// has to wait for it: a mount-only check left JSON rendering as .txt.
+const LateLoading = () => {
+  const [value, setValue] = useState<string>('')
+  useEffect(() => {
+    const timer = setTimeout(() => setValue('{ "colour": "blue" }'), 150)
+    return () => clearTimeout(timer)
+  }, [])
+  return (
+    <div style={{ maxWidth: 640, padding: 16 }}>
+      <ValueEditor label='Value' value={value} onChange={setValue} />
+    </div>
+  )
+}
+
+export const ValueArrivesAfterMount: Story = {
+  render: () => <LateLoading />,
+}
+
+// The danger tone, which no other story shows. The format has to be chosen
+// rather than pinned: a pinned editor has no format row to render the warning
+// against.
 export const InvalidJson: Story = {
-  render: () => (
-    <Interactive label='Value' language='json' initialValue='{ "colour": ' />
-  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const buttons = canvasElement.querySelectorAll('.select-language button')
+    const json = Array.from(buttons).find(
+      (button) => button.textContent?.trim() === '.json',
+    )
+    ;(json as HTMLButtonElement | undefined)?.click()
+  },
+  render: () => <Interactive label='Value' initialValue='{ "colour": ' />,
 }
 
 export const CodeMedium: Story = {
   render: () => (
     <Interactive
       label='Variation Value'
-      tooltip={Constants.strings.REMOTE_CONFIG_DESCRIPTION_VARIATION}
+      labelTooltip={Constants.strings.REMOTE_CONFIG_DESCRIPTION_VARIATION}
       className='code-medium'
       initialValue='variant-a'
     />
@@ -82,13 +112,43 @@ export const Disabled: Story = {
   ),
 }
 
-export const OnlyOneLang: Story = {
+// A pinned format hides the row, since there is nothing to switch to. This is
+// what the SAML IdP metadata field renders.
+export const XmlOnly: Story = {
   render: () => (
     <Interactive
-      label='IDP metadata XML'
-      onlyOneLang
+      label='IdP metadata XML'
       language='xml'
       initialValue={'<EntityDescriptor entityID="https://example.com" />'}
     />
   ),
 }
+
+// The multivariate control value carries a weight chip and a tooltip, so it is
+// the widest label this component gets. Label and format buttons share one flex
+// row, so they compress rather than overlap.
+const controlWeight = <ControlWeightChip percentage={100} />
+
+export const BadgeLabel: Story = {
+  render: () => (
+    <Interactive
+      label='Control Value'
+      labelAfter={controlWeight}
+      labelTooltip={Constants.strings.REMOTE_CONFIG_DESCRIPTION_VARIATION}
+      initialValue='DEFAULT_VALUE'
+    />
+  ),
+}
+
+// The same label at the narrowest width the drawer reaches.
+export const BadgeLabelNarrow: Story = {
+  render: () => (
+    <Interactive
+      label='Control Value'
+      labelAfter={controlWeight}
+      labelTooltip={Constants.strings.REMOTE_CONFIG_DESCRIPTION_VARIATION}
+      initialValue='DEFAULT_VALUE'
+      width={380}
+    />
+  ),
+}

frontend/e2e/helpers/e2e-helpers.playwright.ts

@@ -1,4 +1,7 @@
-import { Page, expect } from '@playwright/test';
+import { Locator, Page, expect } from '@playwright/test';
+
+// A CSS/data-test string, or a Locator built from role and accessible name.
+type SelectorOrLocator = string | Locator;
 import { LONG_TIMEOUT, SHORT_TIMEOUT, byId, log, logUsingLastSection, getFlagsmith } from './utils.playwright';
 
 // Re-export for backwards compatibility
@@ -18,23 +21,47 @@ export type Rule = {
 export class E2EHelpers {
   constructor(private page: Page) {}
 
+  // The value editors are selected by role and accessible name rather than a
+  // data-test. The label reads "Control Value" once the feature has variations,
+  // hence the alternation; the weight chip is a labelAfter sibling, so it stays
+  // out of the accessible name.
+  featureValueField(): Locator {
+    return this.page
+      .locator('#create-feature-modal')
+      .getByRole('textbox', { name: /^(Value|Control Value)$/ });
+  }
+
+  variationValueField(index: number): Locator {
+    return this.page.getByRole('textbox', { name: 'Variation Value' }).nth(index);
+  }
+
+  // The override's own label is "Value", or "Segment Control Value" once the
+  // feature has variations. Anchored, because getByRole matches the name as a
+  // substring and the row also holds read-only "Variation Value" editors.
+  segmentOverrideValueField(index: number): Locator {
+    return this.page
+      .locator(byId(`segment-override-${index}`))
+      .getByRole('textbox', { name: /^(Value|Segment Control Value)$/ });
+  }
+
   async isElementExists(selector: string): Promise<boolean> {
     return await this.page.locator(byId(selector)).count() > 0;
   }
 
-  async setText(selector: string, text: string) {
+  async setText(selector: SelectorOrLocator, text: string) {
     logUsingLastSection(`Set text ${selector} : ${text}`);
-    const element = this.page.locator(selector).first();
+    const element = typeof selector === 'string' ? this.page.locator(selector).first() : selector;
     await element.waitFor({ state: 'visible', timeout: LONG_TIMEOUT });
     await element.clear();
     if (text) {
       await element.fill(text);
     }
   }
 
-  async waitForElementVisible(selector: string, timeout: number = LONG_TIMEOUT) {
+  async waitForElementVisible(selector: SelectorOrLocator, timeout: number = LONG_TIMEOUT) {
     logUsingLastSection(`Waiting element visible ${selector}`);
-    await this.page.locator(selector).first().waitFor({
+    const element = typeof selector === 'string' ? this.page.locator(selector).first() : selector;
+    await element.waitFor({
       state: 'visible',
       timeout
     });
@@ -269,7 +296,7 @@ export class E2EHelpers {
     await featureRow.waitFor({ state: 'visible', timeout: LONG_TIMEOUT });
     await featureRow.dispatchEvent('click');
     await this.waitForElementVisible('#create-feature-modal');
-    await this.waitForElementVisible(byId('featureValue'));
+    await this.waitForElementVisible(this.featureValueField());
   }
 
   // Create a feature
@@ -296,7 +323,7 @@ export class E2EHelpers {
     await this.gotoFeatures();
     await this.click('#show-create-feature-btn');
     await this.setText(byId('featureID'), name);
-    await this.setText(byId('featureValue'), `${value}`);
+    await this.setText(this.featureValueField(), `${value}`);
     await this.setText(byId('featureDesc'), description);
     if (!defaultOff) {
       await this.click(byId('toggle-feature-button'));
@@ -305,7 +332,7 @@ export class E2EHelpers {
       const v = mvs[i];
       await this.click(byId('add-variation'));
       await this.page.waitForTimeout(200);
-      await this.setText(byId(`featureVariationValue${i}`), v.value);
+      await this.setText(this.variationValueField(i), v.value);
       await this.setText(byId(`featureVariationWeight${v.value}`), `${v.weight}`);
       await this.page.waitForTimeout(100);
     }
@@ -588,7 +615,7 @@ export class E2EHelpers {
       await this.click(byId('segment_overrides'));
     }
     await this.click(dropdownSelector);
-    await this.waitForElementVisible(byId(`segment-override-value-${index}`));
+    await this.waitForElementVisible(this.segmentOverrideValueField(index));
   }
 
   // Add segment override for boolean flags
@@ -611,7 +638,7 @@ export class E2EHelpers {
   // Add segment override for remote configs
   async addSegmentOverrideConfig(index: number, value: string | number | boolean, selectionIndex: number = 0) {
     await this.openSegmentOverride(index, selectionIndex);
-    await this.setText(byId(`segment-override-value-${index}`), `${value}`);
+    await this.setText(this.segmentOverrideValueField(index), `${value}`);
     await this.click(byId(`segment-override-toggle-${index}`));
   }
 
@@ -631,7 +658,7 @@ export class E2EHelpers {
     await featureRow.dispatchEvent('click');
     await this.waitForElementVisible(byId('update-feature-btn'));
     if (value !== '') {
-      await this.setText(byId('featureValue'), `${value}`);
+      await this.setText(this.featureValueField(), `${value}`);
     }
     if (mvs.length > 0) {
       await this.page.waitForTimeout(500);

frontend/e2e/tests/change-request-test.pw.ts

@@ -12,10 +12,10 @@ test.describe('Change Request Tests', () => {
     page,
   }, testInfo) => {
     const {
+      featureValueField,
       assertChangeRequestCount,
       approveChangeRequest,
-      assertInputValue,
-      closeModal,
+        closeModal,
       createChangeRequest,
       createEnvironment,
       createRemoteConfig,
@@ -73,7 +73,7 @@ test.describe('Change Request Tests', () => {
     log('Create change request by editing feature value')
     await gotoFeatures()
     await gotoFeature(featureName)
-    await setText(byId('featureValue'), 'updated_value')
+    await setText(featureValueField(), 'updated_value')
 
     await createChangeRequest(
       'Update feature value',
@@ -126,7 +126,7 @@ test.describe('Change Request Tests', () => {
     await page.reload({ waitUntil: 'domcontentloaded' })
     await waitForElementVisible('#show-create-feature-btn')
     await gotoFeature(featureName)
-    await expect(page.locator(byId('featureValue'))).toHaveValue('updated_value', { timeout: 15000 })
+    await expect(featureValueField()).toHaveText('updated_value', { timeout: 15000 })
     await closeModal()
 
     log('Verify value via API')