[1fanwang]

Read then delete this section

Release version rules

TL;DR

Launch-plan views can omit results when the virtualizer has no usable scroll element. Both views now render the launch-plan results they receive.

Type

• Bug Fix
• Feature
• Plugin

Are all requirements met?

• Code completed
• Smoke tested
• Unit tests added
• Code documentation added
• Any pending items have an associated Issue

Complete description

The card and table views render the supplied results directly with stable item keys. Loading and empty states are unchanged.

Testing Done

I rendered the actual card and table views in jsdom with their normal providers and child components. The probe supplies 64 launch plans, checks the rendered cards and rows, and checks the empty table.

Scenario	Command	Observed result
Populated card and table views, then an empty table	NODE_ENV=test node launch_plan_repro.cjs	Both populated views render all 64 plans; the empty table has no result rows.

With Node 16.19.0 and the checkout's installed dependencies, save the source below as launch_plan_repro.cjs in the repository root and run:

NODE_ENV=test node launch_plan_repro.cjs

{"component":"LaunchPlanCardView","supplied":64,"count":64,"firstLink":"/projects/demo/domains/development/launchPlans/lp-0","lastLink":"/projects/demo/domains/development/launchPlans/lp-63"}
{"component":"LaunchPlanTableView","supplied":64,"count":64,"firstLink":"/projects/demo/domains/development/launchPlans/lp-0","lastLink":"/projects/demo/domains/development/launchPlans/lp-63"}
{"component":"LaunchPlanTableView","supplied":0,"count":0,"firstLink":null,"lastLink":null}

React also emitted these row-markup warnings:

Warning: validateDOMNesting(...): <td> cannot appear as a child of <a>.
Warning: validateDOMNesting(...): <a> cannot appear as a child of <tbody>.

Reproducer source: launch_plan_repro.cjs

const assert = require('node:assert/strict');
const { createRequire } = require('node:module');

const load = createRequire(`${process.cwd()}/package.json`);
load('@babel/register')({
  babelrc: false,
  configFile: false,
  only: [/react-syntax-highlighter\/dist\/esm\//],
  presets: [[load.resolve('@babel/preset-env'), { targets: { node: 'current' } }]],
});
load('ts-node').register({
  transpileOnly: true,
  skipProject: true,
  compilerOptions: {
    module: 'CommonJS',
    moduleResolution: 'node',
    target: 'ES2020',
    jsx: 'react',
    esModuleInterop: true,
  },
});
const paths = load('tsconfig-paths');
const config = paths.loadConfig(process.cwd());
assert.equal(config.resultType, 'success');
paths.register({ baseUrl: config.absoluteBaseUrl, paths: config.paths });

const { JSDOM } = load('jsdom');
const dom = new JSDOM('<!doctype html><html><body></body></html>', {
  url: 'http://localhost/',
  pretendToBeVisual: true,
});
global.window = dom.window;
global.document = dom.window.document;
global.localStorage = dom.window.localStorage;
Object.defineProperty(global, 'navigator', { value: dom.window.navigator, configurable: true });
global.HTMLElement = dom.window.HTMLElement;
global.getComputedStyle = dom.window.getComputedStyle;
global.requestAnimationFrame = dom.window.requestAnimationFrame.bind(dom.window);
global.cancelAnimationFrame = dom.window.cancelAnimationFrame.bind(dom.window);

const React = load('react');
const { render } = load('@testing-library/react');
const { ThemeProvider } = load('@mui/material/styles');
const { QueryClient, QueryClientProvider } = load('react-query');
const { MemoryRouter } = load('react-router-dom');
load('react-intersection-observer').defaultFallbackInView(false);
const { muiTheme } = load('@clients/theme/Theme/muiTheme');
const LaunchPlanCardView =
  load('@clients/oss-console/components/LaunchPlan/LaunchPlanCardList/LaunchPlanCardView').default;
const { LaunchPlanTableView } =
  load('@clients/oss-console/components/LaunchPlan/LaunchPlanTable/LaunchPlanTableView');

const queryClient = new QueryClient();
const results = Array.from({ length: 64 }, (_, index) => ({
  key: `lp-${index}`,
  value: { id: { project: 'demo', domain: 'development', name: `lp-${index}` } },
}));
function show(Component, supplied, selector) {
  const { container, unmount } = render(
    React.createElement(
      QueryClientProvider,
      { client: queryClient },
      React.createElement(
        MemoryRouter,
        {},
        React.createElement(
          ThemeProvider,
          { theme: muiTheme },
          React.createElement(Component, { results: supplied, loading: false }),
        ),
      ),
    ),
  );
  const count = container.querySelectorAll(selector).length;
  const links = Array.from(container.querySelectorAll('a[href]'), (link) =>
    link.getAttribute('href'),
  );
  console.log(JSON.stringify({
    component: Component.name,
    supplied: supplied.length,
    count,
    firstLink: links[0] || null,
    lastLink: links[links.length - 1] || null,
  }));
  assert.equal(count, supplied.length);
  if (supplied.length) {
    assert(links.some((url) => url.includes('lp-63')));
  }
  unmount();
}
show(LaunchPlanCardView, results, '[data-testid="launch-plan-card"]');
show(LaunchPlanTableView, results, '[data-testid="launch-plan-table-row"]');
show(LaunchPlanTableView, [], '[data-testid="launch-plan-table-row"]');
queryClient.clear();
dom.window.close();

I did not run a browser scrolling test or a live-backend smoke test. ESLint and Prettier checks passed.

• Local code review completed

Tracking Issue

N/A

Follow-up issue

N/A

[1fanwang]

@kumare3 could you review when you have time?