chore(new-component-model): new component list page

Author: djanaki

src/components/ComponentList/ComponentList.tsx

@@ -8,13 +8,11 @@ import {
   TextVariants,
   Title,
 } from '@patternfly/react-core';
-import { capitalize } from 'lodash-es';
 import { FilterContext } from '~/components/Filter/generic/FilterContext';
 import { BaseTextFilterToolbar } from '~/components/Filter/toolbars/BaseTextFIlterToolbar';
 import { FeatureFlagIndicator } from '~/feature-flags/FeatureFlagIndicator';
 import { useAllComponents } from '~/hooks/useComponents';
 import { getErrorState } from '~/shared/utils/error-utils';
-import { pipelineRunStatus } from '~/utils/pipeline-utils';
 import emptyStateImgUrl from '../../assets/Components.svg';
 import pipelineImg from '../../assets/Pipeline.svg';
 import { PipelineRunLabel } from '../../consts/pipelinerun';
@@ -41,7 +39,7 @@ const ComponentList: React.FC = () => {
     status: unparsedFilters.status ? (unparsedFilters.status as string[]) : [],
   });
 
-  const { name: nameFilter, status: statusFilter } = filters;
+  const { name: nameFilter } = filters;
 
   const [allComponents, allComponentsLoaded, allComponentsError] = useAllComponents(namespace);
 
@@ -75,16 +73,9 @@ const ComponentList: React.FC = () => {
   const filteredComponents = React.useMemo(
     () =>
       componentsWithLatestBuild.filter((component) => {
-        const compStatus = statusFilter?.length
-          ? pipelineRunStatus(component.latestBuildPipelineRun)
-          : 'unknown';
-
-        return (
-          (!nameFilter || component.metadata.name.indexOf(nameFilter) !== -1) &&
-          (!statusFilter?.length || statusFilter.includes(capitalize(compStatus)))
-        );
+        return !nameFilter || component.metadata.name.indexOf(nameFilter) !== -1;
       }),
-    [componentsWithLatestBuild, statusFilter, nameFilter],
+    [componentsWithLatestBuild, nameFilter],
   );
 
   const NoDataEmptyMessage = () => (

src/components/ComponentList/__tests__/ComponentList.spec.tsx

@@ -24,9 +24,9 @@ jest.mock('~/shared/providers/Namespace/useNamespaceInfo', () => ({
 jest.mock('../ComponentListRow', () => ({
   __esModule: true,
   default: ({ obj }: { obj: ComponentKind }) => (
-    <tr data-test="component-list-item">
-      <td>{obj.metadata.name}</td>
-    </tr>
+    <>
+      <td data-test="component-list-item">{obj.metadata.name}</td>
+    </>
   ),
 }));
 
@@ -141,4 +141,36 @@ describe('ComponentList', () => {
     renderComponentList();
     expect(useLatestPushBuildPipelinesMock).toHaveBeenCalledWith('test-ns', '', ['c1']);
   });
+
+  it('filters components by name when name filter is applied via context', async () => {
+    const components = [createMockComponent('nodejs-app'), createMockComponent('go-service')];
+    useAllComponentsMock.mockReturnValue([components, true, undefined]);
+    useLatestPushBuildPipelinesMock.mockReturnValue([[], true]);
+    const setFiltersMock = jest.fn();
+    const onClearFiltersMock = jest.fn();
+    const { FilterContext: FilterContextObj } = await import(
+      '~/components/Filter/generic/FilterContext'
+    );
+    renderWithQueryClient(
+      <FilterContextObj.Provider
+        value={{
+          filters: { name: 'nodejs', status: [] },
+          setFilters: setFiltersMock,
+          onClearFilters: onClearFiltersMock,
+        }}
+      >
+        <ComponentList />
+      </FilterContextObj.Provider>,
+    );
+    expect(screen.getByText('nodejs-app')).toBeInTheDocument();
+    expect(screen.queryByText('go-service')).not.toBeInTheDocument();
+  });
+
+  it('passes customData with pipelineRunsLoaded to Table', () => {
+    const components = [createMockComponent('one')];
+    useAllComponentsMock.mockReturnValue([components, true, undefined]);
+    useLatestPushBuildPipelinesMock.mockReturnValue([[], false]);
+    renderComponentList();
+    expect(screen.getByText('one')).toBeInTheDocument();
+  });
 });

src/components/ComponentList/__tests__/ComponentListHeader.spec.tsx

@@ -0,0 +1,34 @@
+import ComponentsListHeader, { componentsTableColumnClasses } from '../ComponentListHeader';
+
+describe('ComponentListHeader', () => {
+  it('returns column definitions with expected titles', () => {
+    const headers = ComponentsListHeader();
+    expect(headers).toHaveLength(5);
+    expect(headers.map((h) => h.title)).toEqual([
+      'Name',
+      'Git Repository',
+      'Image Registry',
+      'Component Versions',
+      ' ',
+    ]);
+  });
+
+  it('applies componentsTableColumnClasses to each column', () => {
+    const headers = ComponentsListHeader();
+    expect(headers[0].props.className).toBe(componentsTableColumnClasses.component);
+    expect(headers[1].props.className).toBe(componentsTableColumnClasses.gitRepository);
+    expect(headers[2].props.className).toBe(componentsTableColumnClasses.imageRegistry);
+    expect(headers[3].props.className).toBe(componentsTableColumnClasses.componentVersions);
+    expect(headers[4].props.className).toBe(componentsTableColumnClasses.kebab);
+  });
+
+  it('exports componentsTableColumnClasses with expected keys', () => {
+    expect(componentsTableColumnClasses).toEqual({
+      component: 'pf-m-width-30 wrap-column',
+      gitRepository: 'pf-m-width-35 wrap-column',
+      imageRegistry: 'pf-m-width-40 wrap-column',
+      componentVersions: 'pf-m-width-20',
+      kebab: 'pf-m-width-20 component-list-view__actions',
+    });
+  });
+});

src/components/ComponentList/__tests__/ComponentListRow.spec.tsx

@@ -0,0 +1,128 @@
+import { screen } from '@testing-library/react';
+import { COMPONENT_DETAILS_V2_PATH } from '~/routes/paths';
+import type { ComponentKind } from '~/types';
+import { renderWithQueryClientAndRouter } from '~/unit-test-utils/rendering-utils';
+import ComponentsListRow from '../ComponentListRow';
+
+jest.mock('~/shared/providers/Namespace/useNamespaceInfo', () => ({
+  useNamespace: jest.fn(),
+}));
+
+jest.mock('~/components/Components/component-actions', () => ({
+  useComponentActions: () => [],
+}));
+
+const useNamespaceMock = jest.requireMock('~/shared/providers/Namespace/useNamespaceInfo')
+  .useNamespace as jest.Mock;
+
+const createMockComponent = (overrides: Partial<ComponentKind> = {}): ComponentKind =>
+  ({
+    apiVersion: 'appstudio.redhat.com/v1alpha1',
+    kind: 'Component',
+    metadata: { name: 'test-component', namespace: 'test-ns', uid: 'uid-1' },
+    spec: {
+      application: 'test-app',
+      componentName: 'test-component',
+      source: { git: { url: 'https://github.com/org/repo', revision: 'main' } },
+    },
+    ...overrides,
+  }) as ComponentKind;
+
+const renderRow = (component: ComponentKind) => {
+  const obj = { ...component };
+  return renderWithQueryClientAndRouter(
+    <table>
+      <tbody>
+        <tr>
+          <ComponentsListRow obj={obj} />
+        </tr>
+      </tbody>
+    </table>,
+  );
+};
+
+describe('ComponentListRow', () => {
+  beforeEach(() => {
+    useNamespaceMock.mockReturnValue('test-ns');
+  });
+
+  it('renders component name as link', () => {
+    renderRow(createMockComponent());
+    expect(screen.getByRole('link', { name: 'test-component' })).toBeInTheDocument();
+  });
+
+  it('links to component details page with correct path', () => {
+    renderRow(
+      createMockComponent({ metadata: { name: 'my-comp', namespace: 'test-ns', uid: '1' } }),
+    );
+    useNamespaceMock.mockReturnValue('test-ns');
+    const expectedPath = COMPONENT_DETAILS_V2_PATH.createPath({
+      workspaceName: 'test-ns',
+      componentName: 'my-comp',
+    });
+    expect(screen.getByRole('link', { name: 'my-comp' })).toHaveAttribute('href', expectedPath);
+  });
+
+  it('renders component versions count', () => {
+    renderRow(
+      createMockComponent({
+        spec: {
+          application: 'test-app',
+          componentName: 'test-component',
+          source: {
+            git: { url: 'https://github.com/org/repo', revision: 'main' },
+            versions: [
+              { name: 'v1', revision: 'main' },
+              { name: 'v2', revision: 'branch' },
+            ],
+          },
+        },
+      } as ComponentKind),
+    );
+    expect(screen.getByTestId('component-versions-count')).toHaveTextContent('2');
+  });
+
+  it('renders versions count 0 when source.versions is undefined', () => {
+    renderRow(createMockComponent());
+    expect(screen.getByTestId('component-versions-count')).toHaveTextContent('0');
+  });
+
+  it('renders GitRepoLink when spec.source.git is present', () => {
+    renderRow(
+      createMockComponent({
+        spec: {
+          application: 'test-app',
+          componentName: 'test-component',
+          source: {
+            git: {
+              url: 'https://github.com/org/repo',
+              revision: 'main',
+              context: './src',
+            },
+          },
+        },
+      } as ComponentKind),
+    );
+    const link = screen.getByRole('link', { name: /org\/repo/i });
+    expect(link).toBeInTheDocument();
+  });
+
+  it('does not render GitRepoLink when spec.source.git is absent', () => {
+    renderRow(
+      createMockComponent({
+        spec: {
+          application: 'test-app',
+          componentName: 'test-component',
+          source: {},
+        },
+      } as ComponentKind),
+    );
+    expect(screen.getAllByRole('link')).toHaveLength(1);
+    expect(screen.getByRole('link', { name: 'test-component' })).toBeInTheDocument();
+  });
+
+  it('renders row with data-test component-list-item', () => {
+    renderRow(createMockComponent());
+    expect(screen.getByTestId('component-list-item')).toBeInTheDocument();
+  });
+});