katello 4.18.0 → 4.19.0.rc1

data/webpack/scenes/ContainerImages/Synced/Details/__tests__/manifestList.fixtures.json

@@ -0,0 +1,58 @@
+{
+  "id": 1,
+  "name": "latest",
+  "repositories": [
+    {
+      "id": 8,
+      "name": "multi-arch-container",
+      "full_path": "Default_Organization/Library/multi-arch-container",
+      "library_instance": true
+    }
+  ],
+  "product": {
+    "id": 3,
+    "name": "Container Images"
+  },
+  "manifest": {
+    "id": 101,
+    "digest": "sha256:abcd1234567890abcd1234567890abcd1234567890abcd1234567890abcd1234",
+    "schema_version": 2,
+    "manifest_type": "list",
+    "labels": {},
+    "annotations": {},
+    "is_bootable": false,
+    "is_flatpak": false,
+    "created_at": "2024-08-20T10:00:00.000Z",
+    "updated_at": "2024-08-20T10:00:00.000Z",
+    "manifests": [
+      {
+        "id": 102,
+        "digest": "sha256:1111aaaa2222bbbb3333cccc4444dddd5555eeee6666ffff7777gggg8888hhhh",
+        "manifest_type": "image",
+        "architecture": "amd64",
+        "labels": {
+          "arch": "amd64"
+        },
+        "annotations": {},
+        "is_bootable": false,
+        "is_flatpak": false,
+        "created_at": "2024-08-20T09:00:00.000Z",
+        "updated_at": "2024-08-20T09:00:00.000Z"
+      },
+      {
+        "id": 103,
+        "digest": "sha256:2222bbbb3333cccc4444dddd5555eeee6666ffff7777gggg8888hhhh9999iiii",
+        "manifest_type": "image",
+        "architecture": "arm64",
+        "labels": {
+          "arch": "arm64"
+        },
+        "annotations": {},
+        "is_bootable": true,
+        "is_flatpak": false,
+        "created_at": "2024-08-20T09:30:00.000Z",
+        "updated_at": "2024-08-20T09:30:00.000Z"
+      }
+    ]
+  }
+}

data/webpack/scenes/ContainerImages/Synced/Details/index.js

@@ -0,0 +1,4 @@
+import { withRouter } from 'react-router-dom';
+import ManifestDetails from './ManifestDetails';
+
+export default withRouter(ManifestDetails);

data/webpack/scenes/ContainerImages/Synced/SyncedContainerImagesPage.js

@@ -0,0 +1,359 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Table, Thead, Th, Tbody, Tr, Td } from '@patternfly/react-table';
+import { Button } from '@patternfly/react-core';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
+import {
+  useSetParamsAndApiAndSearch,
+  useTableIndexAPIResponse,
+} from 'foremanReact/components/PF4/TableIndexPage/Table/TableIndexHooks';
+import {
+  useUrlParams,
+  useSet,
+} from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import {
+  getColumnHelpers,
+} from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
+import {
+  useTableSort,
+} from 'foremanReact/components/PF4/Helpers/useTableSort';
+import Pagination from 'foremanReact/components/Pagination';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { orgId } from '../../../services/api';
+import {
+  formatManifestType,
+  getManifest,
+  hasLabelsOrAnnotations,
+  anyChildHasLabelsOrAnnotations,
+  STATUS,
+} from '../containerImagesHelpers';
+import LabelsAnnotationsModal from '../LabelsAnnotationsModal';
+import TableEmptyState from '../TableEmptyState';
+import './SyncedContainerImagesPage.scss';
+
+const SYNCED_CONTAINER_IMAGES_KEY = 'SYNCED_CONTAINER_IMAGES';
+const SYNCED_CONTAINER_IMAGES_API_PATH = '/katello/api/v2/docker_tags';
+
+const SyncedContainerImagesPage = () => {
+  const [showLabelsModal, setShowLabelsModal] = useState(false);
+  const [selectedManifest, setSelectedManifest] = useState(null);
+
+  const getManifestType = (tag) => {
+    const manifest = getManifest(tag);
+    return formatManifestType(manifest);
+  };
+
+  const getDigest = (tag) => {
+    const manifest = getManifest(tag);
+    if (!manifest || !manifest.digest) return 'N/A';
+    return (
+      <Link to={`/labs/container_images/${tag.id}`}>
+        {manifest.digest}
+      </Link>
+    );
+  };
+
+  const getProductLink = (tag) => {
+    if (!tag.product) return 'N/A';
+
+    const productId = tag.product.id;
+    const productName = tag.product.name;
+
+    return (
+      <a href={`/products/${productId}`} target="_blank" rel="noopener noreferrer">
+        {productName}
+      </a>
+    );
+  };
+
+  const openLabelsModal = (manifest) => {
+    setSelectedManifest(manifest);
+    setShowLabelsModal(true);
+  };
+
+  const expandedTags = useSet([]);
+  const tagIsExpanded = tagId => expandedTags.has(tagId);
+
+  const columns = {
+    name: {
+      title: __('Tag'),
+      isSorted: true,
+    },
+    digest: {
+      title: __('Manifest digest'),
+      wrapper: tag => getDigest(tag),
+    },
+    type: {
+      title: __('Type'),
+      wrapper: tag => getManifestType(tag),
+    },
+    product: {
+      title: __('Product'),
+      wrapper: tag => getProductLink(tag),
+    },
+    labels: {
+      title: __('Labels | Annotations'),
+      wrapper: (tag) => {
+        const manifest = getManifest(tag);
+        if (hasLabelsOrAnnotations(manifest)) {
+          return (
+            <Button
+              variant="link"
+              isInline
+              onClick={() => openLabelsModal(manifest)}
+              ouiaId="view-labels-annotations-button"
+              aria-label={__('View labels and annotations')}
+            >
+              {__('View here')}
+            </Button>
+          );
+        }
+        if (anyChildHasLabelsOrAnnotations(manifest)) {
+          const isExpanded = tagIsExpanded(tag.id);
+          return (
+            <Button
+              variant="link"
+              isInline
+              onClick={() => expandedTags.onToggle(!isExpanded, tag.id)}
+              ouiaId="see-child-manifests-button"
+            >
+              {__('See child manifests')}
+            </Button>
+          );
+        }
+        return <span>{__('N/A')}</span>;
+      },
+      width: 15,
+    },
+  };
+
+  const {
+    searchParam: currentSearchQuery = '',
+    page: urlPage,
+    per_page: urlPerPage,
+  } = useUrlParams();
+
+  // Persistent params that must always be included
+  const persistentParams = {
+    grouped: true,
+    organization_id: orgId(),
+  };
+
+  const defaultParams = {
+    search: currentSearchQuery,
+    page: urlPage ? Number(urlPage) : 1,
+    per_page: urlPerPage ? Number(urlPerPage) : 20,
+    ...persistentParams,
+  };
+  const apiOptions = {
+    key: SYNCED_CONTAINER_IMAGES_KEY,
+  };
+
+  const originalResponse = useTableIndexAPIResponse({
+    apiUrl: SYNCED_CONTAINER_IMAGES_API_PATH,
+    apiOptions,
+    defaultParams,
+  });
+
+  // Wrap setAPIOptions to ensure persistent params are always included
+  // This is necessary because TableIndexPage may call setAPIOptions directly
+  // for operations like search, and those calls need to preserve persistent params
+  const wrappedSetAPIOptions = (options) => {
+    const mergedOptions = {
+      ...options,
+      params: {
+        ...persistentParams,
+        ...options.params,
+      },
+    };
+    originalResponse.setAPIOptions(mergedOptions);
+  };
+
+  const response = {
+    ...originalResponse,
+    setAPIOptions: wrappedSetAPIOptions,
+  };
+
+  const columnsToSortParams = {};
+  Object.keys(columns).forEach((key) => {
+    if (columns[key].isSorted) {
+      columnsToSortParams[columns[key].title] = key;
+    }
+  });
+
+  const { setParamsAndAPI, params } = useSetParamsAndApiAndSearch({
+    defaultParams,
+    apiOptions,
+    setAPIOptions: wrappedSetAPIOptions,
+  });
+
+  const onSort = (_event, index, direction) => {
+    setParamsAndAPI({
+      ...params,
+      page: urlPage ? Number(urlPage) : params.page,
+      per_page: urlPerPage ? Number(urlPerPage) : params.per_page,
+      search: currentSearchQuery,
+      order: `${Object.keys(columns)[index]} ${direction}`,
+    });
+  };
+
+  const { pfSortParams } = useTableSort({
+    allColumns: Object.keys(columns).map(k => columns[k].title),
+    columnsToSortParams,
+    onSort,
+  });
+
+  const {
+    response: {
+      results = [],
+      subtotal,
+      message: errorMessage,
+    },
+    status = STATUS.PENDING,
+  } = response;
+
+  const [columnNamesKeys, keysToColumnNames] = getColumnHelpers(columns);
+  const onPagination = (newPagination) => {
+    setParamsAndAPI({
+      ...params,
+      search: currentSearchQuery,
+      ...newPagination,
+    });
+  };
+
+  return (
+    <TableIndexPage
+      apiUrl={SYNCED_CONTAINER_IMAGES_API_PATH}
+      apiOptions={apiOptions}
+      replacementResponse={response}
+      creatable={false}
+      isDeleteable={false}
+      customSearchProps={{
+        autocomplete: {
+          url: `${SYNCED_CONTAINER_IMAGES_API_PATH}/auto_complete_search`,
+          apiParams: { organization_id: orgId() },
+        },
+        controller: 'katello_docker_tags',
+        bookmarks: {
+          url: '/api/bookmarks',
+          canCreate: true,
+        },
+      }}
+      ouiaId="synced-container-images-table-index"
+    >
+      <>
+        <Table variant="compact" ouiaId="synced-container-images-table">
+          <Thead>
+            <Tr ouiaId="table-header">
+              <Th />
+              {columnNamesKeys.map(k => (
+                <Th
+                  key={k}
+                  width={columns[k].width}
+                  sort={
+                    Object.values(columnsToSortParams).includes(k) &&
+                    pfSortParams(keysToColumnNames[k])
+                  }
+                >
+                  {keysToColumnNames[k]}
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <TableEmptyState
+            status={status}
+            results={results}
+            errorMessage={errorMessage}
+          />
+          {results?.map((tag, rowIndex) => {
+            const { id, manifest } = tag;
+            const isExpanded = tagIsExpanded(id);
+            const hasChildManifests = manifest?.manifest_type === 'list' && manifest?.manifests?.length > 0;
+            return (
+              <Tbody key={`synced-container-images-body-${id}`} isExpanded={isExpanded}>
+                <Tr key={id} ouiaId={`table-row-${rowIndex}`}>
+                  <Td
+                    expand={hasChildManifests && {
+                      rowIndex,
+                      isExpanded,
+                      onToggle: (_event, _rInx, isOpen) =>
+                        expandedTags.onToggle(isOpen, id),
+                      expandId: `synced-containers-expander-${id}`,
+                    }}
+                  />
+                  {columnNamesKeys.map(k => (
+                    <Td
+                      key={`${id}-${keysToColumnNames[k]}`}
+                      dataLabel={keysToColumnNames[k]}
+                    >
+                      {columns[k].wrapper ? columns[k].wrapper(tag) : tag[k]}
+                    </Td>
+                  ))}
+                </Tr>
+                {hasChildManifests && manifest.manifests.map((childManifest, childIndex) => {
+                  const isLastChild = childIndex === manifest.manifests.length - 1;
+                  return (
+                    <Tr
+                      key={childManifest.id || childIndex}
+                      isExpanded={isExpanded}
+                      ouiaId={`table-row-expandable-${rowIndex}-${childIndex}`}
+                      className={`child-manifest-row ${isLastChild ? 'last-child' : ''}`}
+                    >
+                      <Td className="empty-cell" />
+                      <Td className="empty-cell" />
+                      <Td dataLabel={__('Manifest digest')}>
+                        {childManifest.digest ? (
+                          <Link to={`/labs/container_images/${tag.id}?manifest=${childManifest.id}`}>
+                            {childManifest.digest}
+                          </Link>
+                        ) : 'N/A'}
+                      </Td>
+                      <Td dataLabel={__('Type')}>
+                        {formatManifestType(childManifest)}
+                      </Td>
+                      <Td dataLabel={__('Product')} className="empty-cell" />
+                      <Td dataLabel={__('Labels | Annotations')}>
+                        {hasLabelsOrAnnotations(childManifest) ? (
+                          <Button
+                            variant="link"
+                            isInline
+                            onClick={() => openLabelsModal(childManifest)}
+                            ouiaId="view-child-labels-annotations-button"
+                            aria-label={__('View labels and annotations')}
+                          >
+                            {__('View here')}
+                          </Button>
+                        ) : (
+                          <span>N/A</span>
+                        )}
+                      </Td>
+                    </Tr>
+                  );
+                })}
+              </Tbody>
+            );
+          })}
+        </Table>
+        {results.length > 0 && !errorMessage &&
+          <Pagination
+            key="table-bottom-pagination"
+            page={params.page}
+            perPage={params.per_page}
+            itemCount={subtotal}
+            onChange={onPagination}
+            updateParamsByUrl
+          />
+        }
+        <LabelsAnnotationsModal
+          show={showLabelsModal}
+          setIsOpen={setShowLabelsModal}
+          digest={selectedManifest?.digest || ''}
+          labels={selectedManifest?.labels || {}}
+          annotations={selectedManifest?.annotations || {}}
+        />
+      </>
+    </TableIndexPage>
+  );
+};
+
+export default SyncedContainerImagesPage;

data/webpack/scenes/ContainerImages/Synced/SyncedContainerImagesPage.scss

@@ -0,0 +1,21 @@
+table.pf-v5-c-table {
+  tr.child-manifest-row {
+    background-color: inherit;
+    border: none;
+
+    td {
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+      border: none;
+      background-color: inherit;
+    }
+
+    &.last-child td {
+      border-bottom: 1px solid var(--pf-v5-global--BorderColor--100);
+    }
+
+    td.empty-cell {
+      padding: 0;
+    }
+  }
+}

data/webpack/scenes/ContainerImages/Synced/__tests__/LabelsAnnotationsModal.test.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import LabelsAnnotationsModal from '../../LabelsAnnotationsModal';
+
+describe('LabelsAnnotationsModal', () => {
+  const mockSetIsOpen = jest.fn();
+  const defaultProps = {
+    show: true,
+    setIsOpen: mockSetIsOpen,
+    digest: 'sha256:abcd1234',
+    labels: {},
+    annotations: {},
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders and closes modal correctly', () => {
+    const { rerender } = render(<LabelsAnnotationsModal {...defaultProps} />);
+
+    expect(screen.getByText('Labels and annotations')).toBeInTheDocument();
+    expect(screen.getByText('sha256:abcd1234')).toBeInTheDocument();
+
+    // Close modal
+    const closeButton = screen.getByText('Close');
+    fireEvent.click(closeButton);
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false);
+
+    // Modal hidden when show is false
+    rerender(<LabelsAnnotationsModal {...defaultProps} show={false} />);
+    expect(screen.queryByText('Labels and annotations')).not.toBeInTheDocument();
+  });
+
+  it('displays labels and annotations with pagination', () => {
+    // Test with small number of items
+    const labels = { app: 'myapp', env: 'prod' };
+    const annotations = { version: '1.0.0' };
+    const { rerender } = render(<LabelsAnnotationsModal
+      {...defaultProps}
+      labels={labels}
+      annotations={annotations}
+    />);
+
+    expect(screen.getByText('app=myapp')).toBeInTheDocument();
+    expect(screen.getByText('env=prod')).toBeInTheDocument();
+    expect(screen.getByText('version=1.0.0')).toBeInTheDocument();
+    expect(screen.getByText('3 labels and annotations')).toBeInTheDocument();
+
+    // Test with more than 10 items to trigger pagination
+    const manyLabels = {};
+    for (let i = 1; i <= 15; i += 1) {
+      manyLabels[`label${i}`] = `value${i}`;
+    }
+    rerender(<LabelsAnnotationsModal {...defaultProps} labels={manyLabels} />);
+
+    // Initially shows first 10 items
+    expect(screen.getByText('label1=value1')).toBeInTheDocument();
+    expect(screen.getByText('label10=value10')).toBeInTheDocument();
+    expect(screen.queryByText('label11=value11')).not.toBeInTheDocument();
+    expect(screen.getByText('Show 5 more')).toBeInTheDocument();
+
+    // Click to show all
+    fireEvent.click(screen.getByText('Show 5 more'));
+    expect(screen.getByText('label15=value15')).toBeInTheDocument();
+    expect(screen.queryByText('Show 5 more')).not.toBeInTheDocument();
+  });
+});