Merge pull request #357 from kenlefeb/sc-4216-link-schedule-names

[AI] fix(schedules): show schedule names in the phone Link schedule dialog [sc-4216]

Author: kenlefeb

packages/desktop-client/src/components/schedules/ScheduleLink.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { TestProviders } from '#mocks';
+
+import { ScheduleLink } from './ScheduleLink';
+
+const state = vi.hoisted(() => ({ isNarrowWidth: true }));
+
+vi.mock('@actual-app/components/hooks/useResponsive', () => ({
+  useResponsive: () => ({
+    isNarrowWidth: state.isNarrowWidth,
+    isWideWidth: !state.isNarrowWidth,
+  }),
+}));
+
+vi.mock('#components/common/Modal', () => ({
+  Modal: ({ children }: { children: (a: { state: unknown }) => never }) =>
+    children({ state: { close: vi.fn() } }),
+  ModalHeader: () => null,
+  ModalCloseButton: () => null,
+}));
+
+vi.mock('#components/common/Search', async () => {
+  const { forwardRef } = await import('react');
+  return {
+    Search: forwardRef<HTMLInputElement, { width: number | string }>(
+      ({ width }, ref) => (
+        <input ref={ref} data-testid="search" data-width={String(width)} />
+      ),
+    ),
+  };
+});
+
+vi.mock('#hooks/useSchedules', () => ({
+  useSchedules: () => ({
+    schedules: [],
+    statuses: new Map(),
+    isLoading: false,
+  }),
+}));
+
+vi.mock('./SchedulesTable', () => ({
+  ROW_HEIGHT: 43,
+  NARROW_ROW_HEIGHT: 76,
+  SchedulesTable: () => null,
+}));
+
+function renderLink() {
+  render(
+    <TestProviders>
+      <ScheduleLink
+        transactionIds={['t1']}
+        getTransaction={vi.fn()}
+        accountName=""
+      />
+    </TestProviders>,
+  );
+}
+
+describe('ScheduleLink header', () => {
+  it('makes the search full width and stacks the header on a phone', () => {
+    state.isNarrowWidth = true;
+    renderLink();
+    const search = screen.getByTestId('search');
+    expect(search).toHaveAttribute('data-width', '100%');
+    expect(search.parentElement).toHaveStyle({
+      flexDirection: 'column',
+    });
+  });
+
+  it('keeps the 300px search in a row on desktop', () => {
+    state.isNarrowWidth = false;
+    renderLink();
+    const search = screen.getByTestId('search');
+    expect(search).toHaveAttribute('data-width', '300');
+    expect(search.parentElement).toHaveStyle({
+      flexDirection: 'row',
+    });
+  });
+});

packages/desktop-client/src/components/schedules/ScheduleLink.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
+import { useResponsive } from '@actual-app/components/hooks/useResponsive';
 import { SvgAdd } from '@actual-app/components/icons/v0';
 import { InitialFocus } from '@actual-app/components/initial-focus';
 import { Text } from '@actual-app/components/text';
@@ -17,7 +18,11 @@ import { pushModal } from '#modals/modalsSlice';
 import type { Modal as ModalType } from '#modals/modalsSlice';
 import { useDispatch } from '#redux';
 
-import { ROW_HEIGHT, SchedulesTable } from './SchedulesTable';
+import {
+  NARROW_ROW_HEIGHT,
+  ROW_HEIGHT,
+  SchedulesTable,
+} from './SchedulesTable';
 
 type ScheduleLinkProps = Extract<
   ModalType,
@@ -31,6 +36,8 @@ export function ScheduleLink({
   onScheduleLinked,
 }: ScheduleLinkProps) {
   const { t } = useTranslation();
+  const { isNarrowWidth } = useResponsive();
+  const rowHeight = isNarrowWidth ? NARROW_ROW_HEIGHT : ROW_HEIGHT;
 
   const dispatch = useDispatch();
   const [filter, setFilter] = useState(accountName || '');
@@ -86,10 +93,10 @@ export function ScheduleLink({
           />
           <View
             style={{
-              flexDirection: 'row',
-              gap: 4,
+              flexDirection: isNarrowWidth ? 'column' : 'row',
+              gap: isNarrowWidth ? 8 : 4,
               marginBottom: 20,
-              alignItems: 'center',
+              alignItems: isNarrowWidth ? 'stretch' : 'center',
             }}
           >
             <Text>
@@ -106,7 +113,7 @@ export function ScheduleLink({
                     searchInput.current = r;
                   }}
                   isInModal
-                  width={300}
+                  width={isNarrowWidth ? '100%' : 300}
                   placeholder={t('Filter schedules…')}
                   value={filter}
                   onChange={setFilter}
@@ -116,7 +123,10 @@ export function ScheduleLink({
             {ids.length === 1 && (
               <Button
                 variant="primary"
-                style={{ marginLeft: 15, padding: '4px 10px' }}
+                style={{
+                  marginLeft: isNarrowWidth ? 0 : 15,
+                  padding: '4px 10px',
+                }}
                 onPress={() => {
                   state.close();
                   void onCreate();
@@ -131,7 +141,7 @@ export function ScheduleLink({
           <View
             style={{
               flex: `1 1 ${
-                (ROW_HEIGHT - 1) * (Math.max(schedules.length, 1) + 1)
+                (rowHeight - 1) * (Math.max(schedules.length, 1) + 1)
               }px`,
               marginTop: 15,
               maxHeight: '50vh',

packages/desktop-client/src/components/schedules/SchedulesTable.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { TestProviders } from '#mocks';
+
+import { SchedulesTable } from './SchedulesTable';
+
+const state = vi.hoisted(() => ({ isNarrowWidth: true }));
+
+vi.mock('@actual-app/components/hooks/useResponsive', () => ({
+  useResponsive: () => ({
+    isNarrowWidth: state.isNarrowWidth,
+    isWideWidth: !state.isNarrowWidth,
+  }),
+}));
+
+vi.mock('#hooks/useScheduleDateLookup', () => ({
+  useScheduleDateLookup: () => ({ schedules: [], isLoading: false }),
+}));
+
+vi.mock('#hooks/usePayees', () => ({
+  usePayees: () => ({ data: [{ id: 'p1', name: 'Acme Corp' }] }),
+}));
+
+vi.mock('#hooks/usePayee', () => ({
+  usePayee: () => ({ data: { id: 'p1', name: 'Acme Corp' } }),
+}));
+
+vi.mock('#hooks/useAccounts', () => ({
+  useAccounts: () => ({ data: [{ id: 'a1', name: 'Joint Checking' }] }),
+}));
+
+vi.mock('#hooks/useAccount', () => ({
+  useAccount: () => ({ id: 'a1', name: 'Joint Checking' }),
+}));
+
+const schedules = [
+  {
+    id: 's1',
+    name: 'Payroll deposit',
+    _payee: 'p1',
+    _account: 'a1',
+    _amount: 187711,
+    _amountOp: 'is',
+    _date: '2026-11-13',
+    next_date: '2026-11-13',
+    completed: false,
+  },
+] as never;
+
+function renderTable() {
+  render(
+    <TestProviders>
+      <SchedulesTable
+        schedules={schedules}
+        statuses={new Map([['s1', 'due']])}
+        filter=""
+        allowCompleted={false}
+        minimal
+        onSelect={vi.fn()}
+        style={{}}
+      />
+    </TestProviders>,
+  );
+}
+
+describe('SchedulesTable in the minimal (link) dialog', () => {
+  it('stacks the name, payee and account on a phone-width screen', () => {
+    state.isNarrowWidth = true;
+    renderTable();
+    expect(screen.getByText('Payroll deposit')).toBeInTheDocument();
+    expect(screen.getByText(/Acme Corp/)).toBeInTheDocument();
+    expect(screen.getByText(/Joint Checking/)).toBeInTheDocument();
+    // The wide column headers are replaced by the stacked row
+    expect(screen.queryByText('Payee')).not.toBeInTheDocument();
+  });
+
+  it('keeps the column layout on desktop', () => {
+    state.isNarrowWidth = false;
+    renderTable();
+    expect(screen.getByText('Payee')).toBeInTheDocument();
+    expect(screen.getByText('Account')).toBeInTheDocument();
+  });
+});