Additional auto-save updates

Author: julianguyen

app/helpers/application_helper.rb

@@ -139,8 +139,6 @@ def flatten_translations(hash, prefix = nil)
       if value.is_a?(Hash)
         result.merge!(flatten_translations(value, full_key))
       elsif !value.is_a?(Proc)
-        # Strip the Rails-style `%{key}` sigil so the frontend I18n helper
-        # can match interpolation tokens with its `{key}` regex.
         result[full_key] = value.to_s.gsub(/%\{/, '{')
       end
     end

client/app/components/FeedbackBanner/FeedbackBanner.scss

@@ -0,0 +1,54 @@
+@import "~styles/_global";
+
+.banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $size-10;
+  @include setPadding($size-16, $size-16, $size-16, $size-16);
+  @include setMargin($size-0, $size-0, $size-20, $size-0);
+  background-color: $cornflower;
+  border: 1px solid $blumine;
+  border-radius: $size-4;
+
+  @media screen and (max-width: $small) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.message {
+  flex: 1;
+  color: $blumine;
+  @include setFontSize($size-16);
+
+  @media screen and (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.actions {
+  display: flex;
+  gap: $size-10;
+  flex-shrink: 0;
+
+  @media screen and (max-width: $small) {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+.primaryButton {
+  @include button;
+  @include buttonS;
+  @include buttonHover;
+  background: $blumine !important;
+  color: $white !important;
+}
+
+.secondaryButton {
+  @include button;
+  @include buttonS;
+  @include buttonHover;
+  color: $blumine !important;
+}

client/app/components/FeedbackBanner/index.jsx

@@ -0,0 +1,35 @@
+// @flow
+import React from 'react';
+import type { Node } from 'react';
+import css from './FeedbackBanner.scss';
+
+export type Action = {
+  label: string,
+  onClick: Function,
+  primary?: boolean,
+};
+
+export type Props = {
+  message: string,
+  actions: Action[],
+};
+
+export const FeedbackBanner = ({ message, actions }: Props): Node => (
+  <div className={css.banner} role="status" aria-live="polite">
+    <span className={css.message}>{message}</span>
+    <div className={css.actions}>
+      {actions.map((action) => (
+        <button
+          key={action.label}
+          type="button"
+          className={action.primary ? css.primaryButton : css.secondaryButton}
+          onClick={action.onClick}
+        >
+          {action.label}
+        </button>
+      ))}
+    </div>
+  </div>
+);
+
+export default FeedbackBanner;

client/app/components/Form/FormAutosaveBanner.jsx

@@ -2,62 +2,52 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { FormAutosaveBanner } from 'components/Form/FormAutosaveBanner';
-
-const onRestore = jest.fn();
-const onDismiss = jest.fn();
-
-const renderBanner = (savedAt = Date.now()) => render(
-  <FormAutosaveBanner
-    savedAt={savedAt}
-    onRestore={onRestore}
-    onDismiss={onDismiss}
+import { FeedbackBanner } from 'components/FeedbackBanner';
+
+const onPrimary = jest.fn();
+const onSecondary = jest.fn();
+
+const renderBanner = (message = 'Test message') => render(
+  <FeedbackBanner
+    message={message}
+    actions={[
+      { label: 'Primary', onClick: onPrimary, primary: true },
+      { label: 'Secondary', onClick: onSecondary },
+    ]}
   />,
 );
 
-describe('FormAutosaveBanner', () => {
+describe('FeedbackBanner', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('renders the restore and dismiss buttons', () => {
-    renderBanner();
-    expect(screen.getByRole('button', { name: /restore draft/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /dismiss/i })).toBeInTheDocument();
-  });
-
-  it('shows "just now" for a timestamp within the last minute', () => {
-    renderBanner(Date.now());
-    expect(screen.getByRole('status')).toHaveTextContent('just now');
-  });
-
-  it('shows minutes when the draft is a few minutes old', () => {
-    const fiveMinutesAgo = Date.now() - 5 * 60 * 1000;
-    renderBanner(fiveMinutesAgo);
-    expect(screen.getByRole('status')).toHaveTextContent('5 minutes ago');
-  });
-
-  it('shows "1 minute ago" when the draft is exactly 1 minute old', () => {
-    const oneMinuteAgo = Date.now() - 60 * 1000;
-    renderBanner(oneMinuteAgo);
-    expect(screen.getByRole('status')).toHaveTextContent('1 minute ago');
-  });
-
-  it('shows "1 hour ago" when the draft is exactly 1 hour old', () => {
-    const oneHourAgo = Date.now() - 60 * 60 * 1000;
-    renderBanner(oneHourAgo);
-    expect(screen.getByRole('status')).toHaveTextContent('1 hour ago');
+  it('renders the message and both action buttons', () => {
+    renderBanner('You have an unsaved draft.');
+    expect(screen.getByRole('status')).toHaveTextContent('You have an unsaved draft.');
+    expect(screen.getByRole('button', { name: 'Primary' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Secondary' })).toBeInTheDocument();
   });
 
-  it('calls onRestore when the restore button is clicked', async () => {
+  it('calls the primary action callback when clicked', async () => {
     renderBanner();
-    await userEvent.click(screen.getByRole('button', { name: /restore draft/i }));
-    expect(onRestore).toHaveBeenCalledTimes(1);
+    await userEvent.click(screen.getByRole('button', { name: 'Primary' }));
+    expect(onPrimary).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onDismiss when the dismiss button is clicked', async () => {
+  it('calls the secondary action callback when clicked', async () => {
     renderBanner();
-    await userEvent.click(screen.getByRole('button', { name: /dismiss/i }));
-    expect(onDismiss).toHaveBeenCalledTimes(1);
+    await userEvent.click(screen.getByRole('button', { name: 'Secondary' }));
+    expect(onSecondary).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders with a single action', () => {
+    render(
+      <FeedbackBanner
+        message="Done."
+        actions={[{ label: 'OK', onClick: onPrimary, primary: true }]}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
   });
 });

client/app/components/Form/FormAutosaveBanner.scss

@@ -0,0 +1,85 @@
+// @flow
+import { getNewInputs } from 'components/Form/utils';
+
+describe('getNewInputs', () => {
+  describe('for a required text input', () => {
+    const input = {
+      id: 'text-id',
+      type: 'text',
+      name: 'some[field]',
+      required: true,
+    };
+
+    it('reports an error when the field is empty', () => {
+      const { errors } = getNewInputs({
+        inputs: [input],
+        errors: {},
+        refs: { 'text-id': { value: '' } },
+      });
+      expect(errors['text-id']).toBe(true);
+    });
+
+    it('reports no error when the field has a value', () => {
+      const { errors } = getNewInputs({
+        inputs: [input],
+        errors: {},
+        refs: { 'text-id': { value: 'hello' } },
+      });
+      expect(errors['text-id']).toBe(false);
+    });
+
+    it('clears a stale error when the field now has a value', () => {
+      const { errors } = getNewInputs({
+        inputs: [input],
+        errors: { 'text-id': true },
+        refs: { 'text-id': { value: 'hello' } },
+      });
+      expect(errors['text-id']).toBe(false);
+    });
+  });
+
+  describe('for a required textareaTemplate input', () => {
+    const input = {
+      id: 'textarea-template-id',
+      type: 'textareaTemplate',
+      name: 'moment[why]',
+      required: true,
+    };
+
+    it('reports an error when the field is empty', () => {
+      const { errors } = getNewInputs({
+        inputs: [input],
+        errors: {},
+        refs: { 'textarea-template-id': { value: '' } },
+      });
+      expect(errors['textarea-template-id']).toBe(true);
+    });
+
+    it('clears a stale error when the field now has a value', () => {
+      const { errors } = getNewInputs({
+        inputs: [input],
+        errors: { 'textarea-template-id': true },
+        refs: { 'textarea-template-id': { value: '<p>Hello</p>' } },
+      });
+      expect(errors['textarea-template-id']).toBe(false);
+    });
+  });
+
+  describe('for a non-validated type without a DOM ref', () => {
+    const input = {
+      id: 'quickcreate-id',
+      type: 'quickCreate',
+      name: 'some[field]',
+      required: true,
+    };
+
+    it('preserves an existing error set by component-level validation', () => {
+      const { errors } = getNewInputs({
+        inputs: [input],
+        errors: { 'quickcreate-id': true },
+        refs: {},
+      });
+      expect(errors['quickcreate-id']).toBe(true);
+    });
+  });
+});

client/app/components/Form/__tests__/FormAutosaveBanner.spec.jsx

@@ -126,8 +126,6 @@ export const Form = ({ action, inputs: inputsProps }: Props): Node => {
 
   const myRefs: Object = {};
   const formRef = useRef<HTMLFormElement | null>(null);
-  // Holds the latest collect-and-save function so the interval never captures
-  // stale references across renders.
   const saveLatestRef = useRef<Function | null>(null);
 
   const {