katello 4.18.1 → 4.19.0.rc2

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

@@ -0,0 +1,335 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, act } from 'react-testing-lib-wrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../../test-utils/nockWrapper';
+import SyncedContainerImagesPage from '../SyncedContainerImagesPage';
+import syncedImagesData from './syncedContainerImages.fixtures.json';
+
+const syncedImagesUrl = '/katello/api/v2/docker_tags';
+const autocompleteUrl = '/docker_tags/auto_complete_search';
+const autocompleteQuery = {
+  organization_id: '1',
+  search: '',
+};
+
+const buildDockerTag = id => ({
+  id,
+  name: `tag-${id}`,
+  manifest: {
+    id: 100 + id,
+    digest: `sha256:digest${id}digest${id}digest${id}digest${id}digest${id}digest${id}digest${id}`,
+    manifest_type: 'image',
+    is_bootable: false,
+    is_flatpak: false,
+  },
+});
+
+const createSyncedImages = (amount) => {
+  const response = {
+    total: amount,
+    subtotal: amount,
+    page: 1,
+    per_page: 20,
+    error: null,
+    search: null,
+    sort: {
+      by: 'name',
+      order: 'asc',
+    },
+    results: [],
+  };
+
+  [...Array(amount).keys()].forEach((_, i) => response.results.push(buildDockerTag(i + 1)));
+
+  return response;
+};
+
+let latestTag;
+let v10Tag;
+let flatpakTag;
+let childManifest1;
+let childManifest2;
+
+beforeEach(() => {
+  const { results } = syncedImagesData;
+  [latestTag, v10Tag, flatpakTag] = results;
+  if (latestTag.manifest?.manifests) {
+    [childManifest1, childManifest2] = latestTag.manifest.manifests;
+  }
+});
+
+test('SyncedContainerImagesPage renders correctly', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, syncedImagesData);
+
+  const { queryByText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  expect(queryByText(latestTag.name)).toBeNull();
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(latestTag.name)).toBeVisible();
+    expect(queryByText(v10Tag.name)).toBeVisible();
+    expect(queryByText(flatpakTag.name)).toBeVisible();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+  act(done);
+});
+
+test('Can expand manifest list and show child manifests', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, syncedImagesData);
+
+  const {
+    queryByText, queryAllByRole,
+  } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  expect(queryByText(latestTag.name)).toBeNull();
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(latestTag.name)).toBeVisible();
+
+    // Find and click the expand button for the manifest list
+    const expandButtons = queryAllByRole('button');
+    const expandButton = expandButtons.find(btn =>
+      btn.getAttribute('aria-labelledby')?.includes(`synced-containers-expander-${latestTag.id}`));
+
+    if (expandButton) {
+      expandButton.click();
+    }
+  });
+
+  await patientlyWaitFor(() => {
+    // Check that child manifest digests appear
+    expect(queryByText(childManifest1.digest)).toBeVisible();
+    expect(queryByText(childManifest2.digest)).toBeVisible();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+  act(done);
+});
+
+test('Displays correct manifest types', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, syncedImagesData);
+
+  const { queryByText, queryAllByText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  await patientlyWaitFor(() => {
+    // Check that manifest types are displayed correctly
+    expect(queryByText('List')).toBeVisible(); // Capitalized 'list'
+    expect(queryAllByText('Bootable').length).toBeGreaterThan(0); // For bootable images
+    expect(queryByText('Flatpak')).toBeVisible(); // For flatpak images
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+  act(done);
+});
+
+test('Displays manifest digests correctly', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, syncedImagesData);
+
+  const { queryByText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(latestTag.manifest.digest)).toBeVisible();
+    expect(queryByText(v10Tag.manifest.digest)).toBeVisible();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+  act(done);
+});
+
+test('Child manifests remain hidden when not expanded', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, syncedImagesData);
+
+  const { queryByText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(latestTag.name)).toBeVisible();
+    // Child manifests should not be visible initially
+    expect(queryByText(childManifest1.digest)?.closest('td')).not.toBeVisible();
+    expect(queryByText(childManifest2.digest)?.closest('td')).not.toBeVisible();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+  act(done);
+});
+
+test('Can handle no container images being present', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const noResults = {
+    total: 0,
+    subtotal: 0,
+    page: 1,
+    per_page: 20,
+    results: [],
+  };
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, noResults);
+
+  const { queryByText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  expect(queryByText(latestTag.name)).toBeNull();
+  await patientlyWaitFor(() => expect(queryByText('No Results')).toBeInTheDocument());
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+});
+
+test('Displays loading state while fetching data', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, syncedImagesData);
+
+  const { queryByText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  // Check for loading state
+  expect(queryByText('Loading...')).toBeInTheDocument();
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(latestTag.name)).toBeVisible();
+    expect(queryByText('Loading...')).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+  act(done);
+});
+
+test('Can handle pagination', async (done) => {
+  const largeSyncedData = createSyncedImages(100);
+  const { results } = largeSyncedData;
+  const firstPage = { ...largeSyncedData, results: results.slice(0, 20) };
+  const secondPage = { ...largeSyncedData, page: 2, results: results.slice(20, 40) };
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+
+  // Match first page API request
+  const firstPageScope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, firstPage);
+
+  // Match second page API request
+  const secondPageScope = nockInstance
+    .get(syncedImagesUrl)
+    .query(actualQueryObject => (parseInt(actualQueryObject.page, 10) === 2))
+    .reply(200, secondPage);
+
+  const { queryByText, getAllByLabelText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  // Wait for first paginated page to load
+  await patientlyWaitFor(() => {
+    expect(queryByText(results[0].name)).toBeInTheDocument();
+    expect(queryByText(results[19].name)).toBeInTheDocument();
+    expect(queryByText(results[21].name)).not.toBeInTheDocument();
+  });
+
+  // Navigate to second page
+  const [top, bottom] = getAllByLabelText('Go to next page');
+  expect(top).toBeInTheDocument();
+  expect(bottom).toBeInTheDocument();
+  bottom.click();
+
+  // Wait for second paginated page to load
+  await patientlyWaitFor(() => {
+    expect(queryByText(results[20].name)).toBeInTheDocument();
+    expect(queryByText(results[39].name)).toBeInTheDocument();
+    expect(queryByText(results[41].name)).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(firstPageScope);
+  assertNockRequest(secondPageScope, done);
+  act(done);
+});
+
+test('Handles tags with manifest_schema1', async (done) => {
+  const dataWithSchema1 = {
+    ...syncedImagesData,
+    results: [
+      {
+        id: 10,
+        name: 'schema1-tag',
+        manifest_schema1: {
+          id: 110,
+          digest: 'sha256:schema1digestschema1digestschema1digestschema1digestschema1digest',
+          manifest_type: 'image',
+          is_bootable: false,
+          is_flatpak: false,
+        },
+      },
+    ],
+  };
+
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, dataWithSchema1);
+
+  const { queryByText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  await patientlyWaitFor(() => {
+    expect(queryByText('schema1-tag')).toBeVisible();
+    expect(queryByText('sha256:schema1digestschema1digestschema1digestschema1digestschema1digest')).toBeVisible();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+  act(done);
+});
+
+test('Shows N/A for missing manifest data', async (done) => {
+  const dataWithMissingManifest = {
+    ...syncedImagesData,
+    results: [
+      {
+        id: 11,
+        name: 'no-manifest-tag',
+      },
+    ],
+  };
+
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(syncedImagesUrl)
+    .query(true)
+    .reply(200, dataWithMissingManifest);
+
+  const { queryByText, queryAllByText } = renderWithRedux(<SyncedContainerImagesPage />);
+
+  await patientlyWaitFor(() => {
+    expect(queryByText('no-manifest-tag')).toBeVisible();
+    expect(queryAllByText('N/A').length).toBeGreaterThan(0);
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+  act(done);
+});

data/webpack/scenes/ContainerImages/Synced/__tests__/syncedContainerImages.fixtures.json

@@ -0,0 +1,105 @@
+{
+  "total": 3,
+  "subtotal": 3,
+  "page": 1,
+  "per_page": 20,
+  "error": null,
+  "search": null,
+  "sort": {
+    "by": "name",
+    "order": "asc"
+  },
+  "results": [
+    {
+      "id": 1,
+      "name": "latest",
+      "product": {
+        "id": 1,
+        "name": "Red Hat Enterprise Linux"
+      },
+      "repositories": [
+        {
+          "id": 10,
+          "name": "RHEL Base Images",
+          "full_path": "Library/RHEL Base Images",
+          "library_instance": true,
+          "product_id": 1,
+          "product_name": "Red Hat Enterprise Linux"
+        }
+      ],
+      "manifest": {
+        "id": 101,
+        "digest": "sha256:abcd1234567890abcd1234567890abcd1234567890abcd1234567890abcd1234",
+        "manifest_type": "list",
+        "is_bootable": false,
+        "is_flatpak": false,
+        "manifests": [
+          {
+            "id": 102,
+            "digest": "sha256:1111aaaa2222bbbb3333cccc4444dddd5555eeee6666ffff7777gggg8888hhhh",
+            "manifest_type": "image",
+            "is_bootable": false,
+            "is_flatpak": false
+          },
+          {
+            "id": 103,
+            "digest": "sha256:2222bbbb3333cccc4444dddd5555eeee6666ffff7777gggg8888hhhh9999iiii",
+            "manifest_type": "image",
+            "is_bootable": true,
+            "is_flatpak": false
+          }
+        ]
+      }
+    },
+    {
+      "id": 2,
+      "name": "v1.0",
+      "product": {
+        "id": 2,
+        "name": "Container Tools"
+      },
+      "repositories": [
+        {
+          "id": 20,
+          "name": "Container Images",
+          "full_path": "Library/Container Images",
+          "library_instance": true,
+          "product_id": 2,
+          "product_name": "Container Tools"
+        }
+      ],
+      "manifest": {
+        "id": 104,
+        "digest": "sha256:efgh5678901234efgh5678901234efgh5678901234efgh5678901234efgh5678",
+        "manifest_type": "image",
+        "is_bootable": true,
+        "is_flatpak": false
+      }
+    },
+    {
+      "id": 3,
+      "name": "flatpak-app",
+      "product": {
+        "id": 3,
+        "name": "Flatpak Applications"
+      },
+      "repositories": [
+        {
+          "id": 30,
+          "name": "Flatpak Repository",
+          "full_path": "Library/Flatpak Repository",
+          "library_instance": true,
+          "product_id": 3,
+          "product_name": "Flatpak Applications"
+        }
+      ],
+      "manifest_schema2": {
+        "id": 105,
+        "digest": "sha256:ijkl9012345678ijkl9012345678ijkl9012345678ijkl9012345678ijkl9012",
+        "manifest_type": "image",
+        "is_bootable": false,
+        "is_flatpak": true
+      }
+    }
+  ]
+}

data/webpack/scenes/ContainerImages/TableEmptyState.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tbody, Tr, Td } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import EmptyPage from 'foremanReact/routes/common/EmptyPage';
+import { STATUS } from './containerImagesHelpers';
+
+const TableEmptyState = ({
+  status, results, errorMessage, colSpan,
+}) => {
+  if (results.length > 0 && !errorMessage) {
+    return null;
+  }
+
+  return (
+    <Tbody>
+      {status === STATUS.PENDING && results.length === 0 && (
+        <Tr ouiaId="table-loading">
+          <Td colSpan={colSpan}>
+            <EmptyPage
+              message={{
+                type: 'loading',
+                text: __('Loading...'),
+              }}
+            />
+          </Td>
+        </Tr>
+      )}
+      {status !== STATUS.PENDING &&
+        results.length === 0 &&
+        !errorMessage && (
+          <Tr ouiaId="table-empty">
+            <Td colSpan={colSpan}>
+              <EmptyPage
+                message={{
+                  type: 'empty',
+                }}
+              />
+            </Td>
+          </Tr>
+      )}
+      {errorMessage && (
+        <Tr ouiaId="table-error">
+          <Td colSpan={colSpan}>
+            <EmptyPage message={{ type: 'error', text: errorMessage }} />
+          </Td>
+        </Tr>
+      )}
+    </Tbody>
+  );
+};
+
+TableEmptyState.propTypes = {
+  status: PropTypes.string,
+  results: PropTypes.arrayOf(PropTypes.shape({})),
+  errorMessage: PropTypes.string,
+  colSpan: PropTypes.number,
+};
+
+TableEmptyState.defaultProps = {
+  status: STATUS.PENDING,
+  results: [],
+  errorMessage: null,
+  colSpan: 100,
+};
+
+export default TableEmptyState;

data/webpack/scenes/ContainerImages/containerImagesHelpers.js

@@ -0,0 +1,48 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+import { capitalize } from '../../utils/helpers';
+
+export const STATUS = {
+  PENDING: 'PENDING',
+  RESOLVED: 'RESOLVED',
+  ERROR: 'ERROR',
+};
+
+export const getManifest = (data) => {
+  if (!data) return null;
+  return data.manifest || data.manifest_schema2 || data.manifest_schema1;
+};
+
+export const formatManifestType = (manifest) => {
+  if (!manifest || !manifest.manifest_type) return 'N/A';
+
+  if (manifest.manifest_type === 'image') {
+    if (manifest.is_bootable) {
+      return __('Bootable');
+    }
+    if (manifest.is_flatpak) {
+      return __('Flatpak');
+    }
+  }
+
+  return capitalize(manifest.manifest_type);
+};
+
+export const getShortDigest = (digest) => {
+  if (!digest) return 'N/A';
+  const parts = digest.split(':');
+  if (parts.length === 2) {
+    return `${parts[0]}:${parts[1].substring(0, 12)}`;
+  }
+  return digest.substring(0, 19);
+};
+
+export const hasLabelsOrAnnotations = (manifest) => {
+  if (!manifest) return false;
+  return (Object.keys(manifest.labels || {}).length > 0) ||
+         (Object.keys(manifest.annotations || {}).length > 0);
+};
+
+export const anyChildHasLabelsOrAnnotations = (manifest) => {
+  if (!manifest?.manifests) return false;
+  return manifest.manifests.some(child => hasLabelsOrAnnotations(child));
+};

data/webpack/scenes/ContainerImages/index.js

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

data/webpack/scenes/ContentViews/Create/CreateContentViewForm.js

@@ -27,6 +27,8 @@ import {
 } from './ContentViewCreateSelectors';
 import { LabelDependencies, LabelAutoPublish } from './ContentViewFormComponents';
 import ContentViewIcon from '../components/ContentViewIcon';
+import getEnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPathActions';
+import EnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPaths';
 import './CreateContentViewForm.scss';
 
 export const contentViewDescriptions = {
@@ -47,7 +49,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
   const [dependencies, setDependencies] = useState(false);
   const [redirect, setRedirect] = useState(false);
   const [saving, setSaving] = useState(false);
-
+  const [selectedEnvs, setSelectedEnvs] = useState([]);
   const [labelValidated, setLabelValidated] = useState('default');
   const handleLabelChange = (newLabel, _event) => {
     setLabel(newLabel);
@@ -74,9 +76,10 @@ const CreateContentViewForm = ({ setModalOpen }) => {
     }
   }, [response, status, error, saving]);
 
+  const checkedEnvIds = selectedEnvs?.map(env => env.id) ?? [];
   const onSave = () => {
     setSaving(true);
-    dispatch(createContentView({
+    let params = {
       name,
       label,
       description,
@@ -84,9 +87,22 @@ const CreateContentViewForm = ({ setModalOpen }) => {
       rolling,
       solve_dependencies: (dependencies && !(rolling || composite)),
       auto_publish: (autoPublish && composite),
-    }));
+    };
+    if (rolling) {
+      params = { ...params, environment_ids: checkedEnvIds };
+    }
+    dispatch(createContentView(params));
   };
 
+  useEffect(
+    () => {
+      if (rolling) {
+        dispatch(getEnvironmentPaths());
+      }
+    },
+    [rolling, dispatch],
+  );
+
   useEffect(() => {
     setLabel(name.replace(/[^A-Za-z0-9_-]/g, '_'));
   }, [name]);
@@ -230,6 +246,16 @@ const CreateContentViewForm = ({ setModalOpen }) => {
           />
         </FormGroup>
       )}
+      {rolling && (
+        <FormGroup isInline fieldId="lifecycleEnvironments" label={__('Lifecycle Environments')}>
+          <EnvironmentPaths
+            headerText=""
+            publishing={false}
+            userCheckedItems={selectedEnvs}
+            setUserCheckedItems={setSelectedEnvs}
+          />
+        </FormGroup>
+      )}
       <ActionGroup>
         <Button
           ouiaId="create-content-view-form-submit"

data/webpack/scenes/ContentViews/Create/__tests__/contentViewCreateResult.fixtures.json

@@ -8,6 +8,7 @@
   "latest_version": null,
   "auto_publish": false,
   "solve_dependencies": false,
+  "environment_ids": [],
   "import_only": false,
   "repository_ids": [],
   "id": 34,