katello 4.18.0 → 4.19.0.rc1

data/webpack/components/extensions/Hosts/BulkActions/BulkChangeHostCollectionsModal/index.js

@@ -0,0 +1,71 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { MenuItem } from '@patternfly/react-core';
+import { BanIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { useForemanOrganization } from 'foremanReact/Root/Context/ForemanContext';
+import { ForemanActionsBarContext } from 'foremanReact/components/HostDetails/ActionsBar';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import BulkChangeHostCollectionsModal from './BulkChangeHostCollectionsModal';
+
+const DisabledMenuItemDescription = ({ disabledReason }) => (
+  <span className="disabled-menu-item-span">
+    <span className="disabled-menu-item-icon">
+      <BanIcon />
+    </span>
+    <p className="disabled-menu-item-p">
+      {disabledReason}
+    </p>
+  </span>
+);
+
+DisabledMenuItemDescription.propTypes = {
+  disabledReason: PropTypes.string.isRequired,
+};
+
+// This component renders only the MenuItem trigger (for the slot in the menu)
+export const BulkChangeHostCollectionsMenuItem = ({ selectedCount }) => {
+  const orgId = useForemanOrganization()?.id;
+  const { setModalOpen } = useForemanModal({ id: 'bulk-change-host-collections-modal' });
+
+  return (
+    <MenuItem
+      itemId="change-host-collections-dropdown-item"
+      key="change-host-collections-dropdown-item"
+      onClick={setModalOpen}
+      isDisabled={selectedCount === 0 || !orgId}
+      description={!orgId && <DisabledMenuItemDescription disabledReason={__('To manage host collections, a specific organization must be selected from the organization context.')} />}
+    >
+      {__('Host collections')}
+    </MenuItem>
+  );
+};
+
+BulkChangeHostCollectionsMenuItem.propTypes = {
+  selectedCount: PropTypes.number,
+};
+
+BulkChangeHostCollectionsMenuItem.defaultProps = {
+  selectedCount: 0,
+};
+
+// This component renders only the modal (for the _all-hosts-modals slot)
+const BulkChangeHostCollectionsModalScene = () => {
+  const orgId = useForemanOrganization()?.id;
+  const { selectedCount, fetchBulkParams } = useContext(ForemanActionsBarContext);
+  const { modalOpen, setModalClosed } = useForemanModal({ id: 'bulk-change-host-collections-modal' });
+
+  if (!orgId) return null;
+
+  return (
+    <BulkChangeHostCollectionsModal
+      key="bulk-change-host-collections-modal"
+      fetchBulkParams={fetchBulkParams}
+      selectedCount={selectedCount}
+      isOpen={modalOpen}
+      closeModal={setModalClosed}
+    />
+  );
+};
+
+export default BulkChangeHostCollectionsModalScene;

data/webpack/components/extensions/Hosts/BulkActions/BulkErrataWizard/BulkErrataWizard.js

@@ -51,7 +51,7 @@ export const useErrataHostsBulkSelect = ({ initialSelectedHosts, modalIsOpen })
   };
 };
 
-export const ERRATA_URL = `${katelloApi.getApiUrl('/errata')}?per_page=7&include_permissions=true`;
+export const ERRATA_URL = `${katelloApi.getApiUrl('/errata')}?per_page=7&include_permissions=true&errata_restrict_installable=true`;
 
 const BulkErrataWizard = () => {
   const { modalOpen, setModalClosed: closeModal } = useForemanModal({ id: 'bulk-errata-wizard' });

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/02_BulkPackagesTable.js

@@ -16,6 +16,7 @@ import { RowSelectTd } from 'foremanReact/components/HostsIndex/RowSelectTd';
 import { getPageStats } from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
 import { BulkPackagesWizardContext, getPackagesUrl } from './BulkPackagesWizard';
 import katelloApi from '../../../../../services/api';
+import PACKAGE_CONTENT_TYPE_NAMES from '../BulkActionsConstants';
 
 export const BulkPackagesUpgradeTable = props => <BulkPackagesTable {...props} tableType="upgrade" />;
 export const BulkPackagesInstallTable = props => <BulkPackagesTable {...props} tableType="install" />;
@@ -23,6 +24,7 @@ export const BulkPackagesRemoveTable = props => <BulkPackagesTable {...props} ta
 
 const BulkPackagesTable = ({
   tableType,
+  contentTypeName,
 }) => {
   const {
     setShouldValidateStep2,
@@ -42,12 +44,12 @@ const BulkPackagesTable = ({
     upgrade: __('Select packages to upgrade to the latest version. Packages may have different versions on different hosts.'),
   };
 
-  const origSearchProps = getControllerSearchProps('packages', 'searchBar-packages');
+  const origSearchProps = getControllerSearchProps(contentTypeName, 'searchBar-packages');
   const customSearchProps = {
     ...origSearchProps,
     autocomplete: {
       ...origSearchProps.autocomplete,
-      url: katelloApi.getApiUrl('/packages/auto_complete_search'),
+      url: katelloApi.getApiUrl(`/${contentTypeName}/auto_complete_search`),
     },
   };
 
@@ -93,7 +95,7 @@ const BulkPackagesTable = ({
     name: {
       title: __('Package'),
       wrapper: ({ name, id }) => (
-        <a target="_blank" href={tableType === 'remove' ? `/packages?search=${name}` : `/packages/${id}`} rel="noreferrer">{name}</a>
+        <a target="_blank" href={tableType === 'remove' ? `/${contentTypeName}?search=${name}` : `/${contentTypeName}/${id}`} rel="noreferrer">{name}</a>
       ),
       isSorted: true,
       weight: 50,
@@ -152,4 +154,9 @@ const BulkPackagesTable = ({
 
 BulkPackagesTable.propTypes = {
   tableType: PropTypes.string.isRequired,
+  contentTypeName: PropTypes.string,
+};
+
+BulkPackagesTable.defaultProps = {
+  contentTypeName: PACKAGE_CONTENT_TYPE_NAMES.REDHAT,
 };

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/BulkPackagesWizard.js

@@ -22,6 +22,7 @@ import { BulkPackagesReview, dropdownOptions } from './04_Review';
 import { BulkPackagesUpgradeTable, BulkPackagesInstallTable, BulkPackagesRemoveTable } from './02_BulkPackagesTable';
 import { BulkPackagesReviewFooter } from './04_ReviewFooter';
 import katelloApi, { foremanApi } from '../../../../../services/api';
+import PACKAGE_CONTENT_TYPE_NAMES from '../BulkActionsConstants';
 
 export const UPGRADE_ALL = 'upgradeAll';
 export const UPGRADE = 'upgrade';
@@ -62,18 +63,18 @@ export const useHostsBulkSelect = ({ initialSelectedHosts, modalIsOpen }) => {
   };
 };
 
-export const getPackagesUrl = (selectedAction) => {
+export const getPackagesUrl = (selectedAction, contentTypeName) => {
+  if (contentTypeName === PACKAGE_CONTENT_TYPE_NAMES.INVALID) return '';
   if (selectedAction === REMOVE) {
-    return `${foremanApi.getApiUrl('/hosts/host_packages/installed_packages')}?per_page=7&include_permissions=true`;
+    return `${foremanApi.getApiUrl(`/hosts/host_${contentTypeName}/installed_${contentTypeName}`)}?per_page=7&include_permissions=true`;
   }
 
-  return `${katelloApi.getApiUrl('/packages/thindex')}?per_page=7&include_permissions=true&packages_restrict_upgradable=${selectedAction === 'upgrade'}`;
+  return `${katelloApi.getApiUrl(`/${contentTypeName}/thindex`)}?per_page=7&include_permissions=true&packages_restrict_upgradable=${selectedAction === 'upgrade'}`;
 };
 
 const BulkPackagesWizard = () => {
   const { modalOpen, setModalClosed: closeModal } = useForemanModal({ id: 'bulk-packages-wizard' });
 
-
   const [selectedAction, setSelectedAction] = useState(UPGRADE_ALL);
 
   const { selectedCount: initialSelectedHostCount, fetchBulkParams }
@@ -86,28 +87,32 @@ const BulkPackagesWizard = () => {
   const packageActionsNames = {
     install: __('Install packages'), remove: __('Remove packages'), upgrade: __('Upgrade packages'), upgradeAll: __('Upgrade packages'),
   };
-  const packageActions = () => {
-    switch (selectedAction) {
-    case INSTALL:
-      return (
-        <BulkPackagesInstallTable modalIsOpen={modalOpen} />
-      );
-    case REMOVE:
-      return (
-        <BulkPackagesRemoveTable modalIsOpen={modalOpen} />
-      );
-    default:
-      return (
-        <BulkPackagesUpgradeTable modalIsOpen={modalOpen} />
-      );
+
+
+  const initialSelectedHosts = fetchBulkParams();
+
+  const hostsBulkSelect =
+    useHostsBulkSelect({ initialSelectedHosts, modalIsOpen: modalOpen });
+
+  const currentlySelectedHosts =
+    hostsBulkSelect?.hostsResponse?.response?.results?.filter(host =>
+      !hostsBulkSelect.hostsBulkSelect.exclusionSet.has(host.id));
+
+  const getContentTypeName = () => {
+    if (currentlySelectedHosts === undefined) {
+      return PACKAGE_CONTENT_TYPE_NAMES.INVALID;
+    } else if (currentlySelectedHosts[0]?.operatingsystem_family === 'Debian') {
+      return PACKAGE_CONTENT_TYPE_NAMES.DEBIAN;
     }
+
+    return PACKAGE_CONTENT_TYPE_NAMES.REDHAT;
   };
 
   const finishButtonTextValues = {
     install: __('Install'), remove: __('Remove'), upgrade: __('Upgrade'), upgradeAll: __('Upgrade'),
   };
   const finishButtonText = finishButtonTextValues[selectedAction];
-  const PACKAGES_URL = getPackagesUrl(selectedAction);
+  const PACKAGES_URL = getPackagesUrl(selectedAction, getContentTypeName());
   const apiOptions = { key: 'BULK_HOST_PACKAGES' };
   const replacementResponse = !modalOpen ? { response: {} } : false;
   const packagesResponse = useTableIndexAPIResponse({
@@ -132,11 +137,6 @@ const BulkPackagesWizard = () => {
     idColumn: 'name',
   });
 
-  const initialSelectedHosts = fetchBulkParams();
-
-  const hostsBulkSelect =
-    useHostsBulkSelect({ initialSelectedHosts, modalIsOpen: modalOpen });
-
   // eslint-disable-next-line no-restricted-globals
   const selectionIsValid = count => count > 0 || isNaN(count);
   const packagesResultsPresent = packagesResults?.length > 0;
@@ -164,6 +164,33 @@ const BulkPackagesWizard = () => {
     packagesResponse,
     hostsBulkSelect: hostsBulkSelect.hostsBulkSelect,
   };
+
+  const packageActions = () => {
+    switch (selectedAction) {
+    case INSTALL:
+      return (
+        <BulkPackagesInstallTable
+          contentTypeName={getContentTypeName()}
+          modalIsOpen={modalOpen}
+        />
+      );
+    case REMOVE:
+      return (
+        <BulkPackagesRemoveTable
+          contentTypeName={getContentTypeName()}
+          modalIsOpen={modalOpen}
+        />
+      );
+    default:
+      return (
+        <BulkPackagesUpgradeTable
+          contentTypeName={getContentTypeName()}
+          modalIsOpen={modalOpen}
+        />
+      );
+    }
+  };
+
   return (
     <BulkPackagesWizardContext.Provider value={bulkPackagesWizardContextData}>
       <Wizard

data/webpack/components/extensions/Hosts/BulkActions/HostReview.js

@@ -86,6 +86,13 @@ const HostReview = ({
       isSorted: true,
       weight: 100,
     },
+    cv_environments: {
+      title: __('Content view environments'),
+      wrapper: hostDetails =>
+        hostDetails?.content_facet_attributes?.content_view_environment_labels,
+      isSorted: false,
+      weight: 100,
+    },
   };
 
   // restrict search query to only selected hosts

data/webpack/containers/Application/config.js

@@ -15,7 +15,9 @@ import ContentDetails from '../../scenes/Content/Details';
 import withHeader from './withHeaders';
 import ChangeContentSource from '../../scenes/Hosts/ChangeContentSource';
 import AlternateContentSource from '../../scenes/AlternateContentSources';
-import BootedContainerImages from '../../scenes/BootedContainerImages';
+import BootedContainerImages from '../../scenes/ContainerImages/Booted';
+import ContainerImages from '../../scenes/ContainerImages';
+import ManifestDetails from '../../scenes/ContainerImages/Synced/Details';
 import FlatpakRemotes from '../../scenes/FlatpakRemotes';
 import FlatpakRemoteDetails from '../../scenes/FlatpakRemotes/Details';
 
@@ -92,6 +94,14 @@ export const links = [
     path: 'booted_container_images',
     component: WithOrganization(withHeader(BootedContainerImages, { title: __('Booted container images') })),
   },
+  {
+    path: 'labs/container_images',
+    component: WithOrganization(withHeader(ContainerImages, { title: __('Container Images') })),
+  },
+  {
+    path: 'labs/container_images/:id([0-9]+)',
+    component: WithOrganization(withHeader(ManifestDetails, { title: __('Manifest Details') })),
+  },
   {
     path: 'flatpak_remotes',
     component: WithOrganization(withHeader(FlatpakRemotes, { title: __('Flatpak Remotes') })),

data/webpack/global_index.js

@@ -34,6 +34,7 @@ import HostsIndexActionsBar from './components/extensions/Hosts/ActionsBar';
 import RecentCommunicationCardExtensions from './components/extensions/HostDetails/DetailsTabCards/RecentCommunicationCardExtensions';
 import SystemPurposeCard from './components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard';
 import BulkChangeHostCVModal from './components/extensions/Hosts/BulkActions/BulkChangeHostCVModal/index.js';
+import BulkChangeHostCollectionsModal, { BulkChangeHostCollectionsMenuItem } from './components/extensions/Hosts/BulkActions/BulkChangeHostCollectionsModal/index.js';
 import BulkPackagesWizardModal from './components/extensions/Hosts/BulkActions/BulkPackagesWizard/index.js';
 import BulkErrataWizardModal from './components/extensions/Hosts/BulkActions/BulkErrataWizard/index.js';
 import BulkRepositorySetsWizardModal from './components/extensions/Hosts/BulkActions/BulkRepositorySetsWizard/index.js';
@@ -95,6 +96,8 @@ addGlobalFill('_all-hosts-modals', 'BulkChangeHostCVModal', <BulkChangeHostCVMod
 addGlobalFill('_all-hosts-modals', 'BulkPackagesWizardModal', <BulkPackagesWizardModal key="bulk-packages-wizard-modal" />, 200);
 addGlobalFill('_all-hosts-modals', 'BulkErrataWizardModal', <BulkErrataWizardModal key="bulk-errata-wizard-modal" />, 300);
 addGlobalFill('_all-hosts-modals', 'BulkRepositorySetsWizardModal', <BulkRepositorySetsWizardModal key="bulk-repo-sets-wizard-modal" />, 400);
+addGlobalFill('_all-hosts-modals', 'BulkChangeHostCollectionsModal', <BulkChangeHostCollectionsModal key="bulk-change-host-collections-modal" />, 500);
+addGlobalFill('_host-associations', 'BulkChangeHostCollectionsMenuItem', <BulkChangeHostCollectionsMenuItem key="bulk-change-host-collections-menu-item" />, 100);
 
 registerColumns(hostsIndexColumnExtensions);
 registerGetActions({

data/webpack/scenes/{BootedContainerImages → ContainerImages/Booted}/BootedContainerImagesConstants.js

@@ -1,4 +1,4 @@
-import { foremanApi } from '../../services/api';
+import { foremanApi } from '../../../services/api';
 
 const BOOTED_CONTAINER_IMAGES_KEY = 'BOOTED_CONTAINER_IMAGES';
 export const BOOTED_CONTAINER_IMAGES_API_PATH = foremanApi.getApiUrl('/hosts/bootc_images');

data/webpack/scenes/{BootedContainerImages → ContainerImages/Booted}/BootedContainerImagesPage.js

@@ -16,9 +16,10 @@ import {
   useTableSort,
 } from 'foremanReact/components/PF4/Helpers/useTableSort';
 import Pagination from 'foremanReact/components/Pagination';
-import EmptyPage from 'foremanReact/routes/common/EmptyPage';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useForemanHostsPageUrl } from 'foremanReact/Root/Context/ForemanContext';
+import { STATUS } from '../containerImagesHelpers';
+import TableEmptyState from '../TableEmptyState';
 import BOOTED_CONTAINER_IMAGES_KEY, { BOOTED_CONTAINER_IMAGES_API_PATH } from './BootedContainerImagesConstants';
 
 const BootedContainerImagesPage = () => {
@@ -79,11 +80,6 @@ const BootedContainerImagesPage = () => {
   });
   const expandedImages = useSet([]);
   const imageIsExpanded = bootcBootedImage => expandedImages.has(bootcBootedImage);
-  const STATUS = {
-    PENDING: 'PENDING',
-    RESOLVED: 'RESOLVED',
-    ERROR: 'ERROR',
-  };
 
   const {
     response: {
@@ -108,7 +104,6 @@ const BootedContainerImagesPage = () => {
     <TableIndexPage
       apiUrl={BOOTED_CONTAINER_IMAGES_API_PATH}
       apiOptions={apiOptions}
-      header={__('Booted container images')}
       createable={false}
       isDeleteable={false}
       controller="/katello/api/v2/host_bootc_images"
@@ -134,42 +129,11 @@ const BootedContainerImagesPage = () => {
               </>
             </Tr>
           </Thead>
-          {(results.length === 0 || errorMessage) && (
-            <Tbody>
-              {status === STATUS.PENDING && results.length === 0 && (
-                <Tr ouiaId="table-loading">
-                  <Td colSpan={100}>
-                    <EmptyPage
-                      message={{
-                        type: 'loading',
-                        text: __('Loading...'),
-                      }}
-                    />
-                  </Td>
-                </Tr>
-              )}
-              {!(status === STATUS.PENDING) &&
-                results.length === 0 &&
-                !errorMessage && (
-                  <Tr ouiaId="table-empty">
-                    <Td colSpan={100}>
-                      <EmptyPage
-                        message={{
-                          type: 'empty',
-                        }}
-                      />
-                    </Td>
-                  </Tr>
-              )}
-              {errorMessage && (
-                <Tr ouiaId="table-error">
-                  <Td colSpan={100}>
-                    <EmptyPage message={{ type: 'error', text: errorMessage }} />
-                  </Td>
-                </Tr>
-              )}
-            </Tbody>
-          )}
+          <TableEmptyState
+            status={status}
+            results={results}
+            errorMessage={errorMessage}
+          />
           {results?.map((result, rowIndex) => {
             const { bootc_booted_image: bootcBootedImage, digests } = result;
             const isExpanded = imageIsExpanded(bootcBootedImage);

data/webpack/scenes/{BootedContainerImages → ContainerImages/Booted}/__tests__/bootedContainerImagesPage.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor, act } from 'react-testing-lib-wrapper';
-import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../../test-utils/nockWrapper';
 import BootedContainerImagesPage from '../BootedContainerImagesPage';
 import bootcImagesData from './bootedContainerImages.fixtures';
 

data/webpack/scenes/ContainerImages/ContainerImagesPage.js

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import {
+  Title,
+  PageSection,
+  Stack,
+  StackItem,
+  Tabs,
+  Tab,
+  TabTitleText,
+  TabTitleIcon,
+  Popover,
+  Button,
+} from '@patternfly/react-core';
+import { SyncAltIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import FontAwesomeImageModeIcon from '../../components/extensions/Hosts/FontAwesomeImageModeIcon';
+import BootedContainerImagesPage from './Booted/BootedContainerImagesPage';
+import SyncedContainerImagesPage from './Synced/SyncedContainerImagesPage';
+
+const ContainerImagesPage = () => {
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const history = useHistory();
+  const location = useLocation();
+
+  const handleTabClick = (event, tabIndex) => {
+    setActiveTabKey(tabIndex);
+    history.replace(location.pathname);
+  };
+
+  return (
+    <PageSection variant="light">
+      <Stack hasGutter>
+        <StackItem>
+          <Title headingLevel="h1" size="2xl" ouiaId="container-images-title">
+            {__('Container images')}
+            <Popover
+              headerContent={<div>{__('Container images')}</div>}
+              bodyContent={
+                <div>
+                  {__('View container images in the local registry using the Synced tab. View container images booted by image mode hosts using the Booted tab. The Booted tab also shows images outside of the local container registry.')}
+                </div>
+              }
+            >
+              <Button variant="plain" aria-label="Help" isInline icon={<OutlinedQuestionCircleIcon size="sm" />} ouiaId="container-images-help-button" />
+            </Popover>
+          </Title>
+        </StackItem>
+        <StackItem>
+          <Tabs
+            activeKey={activeTabKey}
+            onSelect={handleTabClick}
+            ouiaId="container-images-tabs"
+          >
+            <Tab
+              eventKey={0}
+              title={
+                <>
+                  <TabTitleIcon><SyncAltIcon /></TabTitleIcon>
+                  <TabTitleText>{__('Synced')}</TabTitleText>
+                </>
+              }
+              ouiaId="container-images-synced-tab"
+            />
+            <Tab
+              eventKey={1}
+              title={
+                <>
+                  <TabTitleIcon><FontAwesomeImageModeIcon /></TabTitleIcon>
+                  <TabTitleText>{__('Booted')}</TabTitleText>
+                </>
+              }
+              ouiaId="container-images-booted-tab"
+            />
+          </Tabs>
+        </StackItem>
+        <StackItem>
+          {activeTabKey === 0 && <SyncedContainerImagesPage />}
+          {activeTabKey === 1 && <BootedContainerImagesPage />}
+        </StackItem>
+      </Stack>
+    </PageSection>
+  );
+};
+
+export default ContainerImagesPage;

data/webpack/scenes/ContainerImages/LabelsAnnotationsModal.js

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  Label,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+
+const LabelsAnnotationsModal = ({
+  show, setIsOpen, digest, labels, annotations,
+}) => {
+  const INITIAL_DISPLAY_COUNT = 10;
+  const [showAll, setShowAll] = useState(false);
+
+  const handleClose = () => {
+    setShowAll(false);
+    setIsOpen(false);
+  };
+
+  // Combine labels and annotations into a single array of key-value pairs
+  const allItems = [
+    ...Object.entries(labels || {}).map(([key, value]) => ({
+      key: `label-${key}`,
+      value: `${key}=${value}`,
+    })),
+    ...Object.entries(annotations || {}).map(([key, value]) => ({
+      key: `annotation-${key}`,
+      value: `${key}=${value}`,
+    })),
+  ];
+
+  const totalCount = allItems.length;
+  const displayedItems = showAll ? allItems : allItems.slice(0, INITIAL_DISPLAY_COUNT);
+  const remainingCount = totalCount - INITIAL_DISPLAY_COUNT;
+
+  return (
+    <Modal
+      ouiaId="labels-annotations-modal"
+      title={__('Labels and annotations')}
+      variant={ModalVariant.medium}
+      isOpen={show}
+      onClose={handleClose}
+      appendTo={document.body}
+      actions={[
+        <Button key="close" variant="link" onClick={handleClose} ouiaId="labels-annotations-close-button">
+          {__('Close')}
+        </Button>,
+      ]}
+    >
+      <div>
+        <p>
+          {__('View labels and annotations for image ')}
+          <strong>{digest}</strong>.
+        </p>
+        <p style={{ marginTop: '16px', fontWeight: 'bold' }}>
+          {__(`${totalCount} labels and annotations`)}
+        </p>
+        <Flex
+          spaceItems={{ default: 'spaceItemsSm' }}
+          style={{ marginTop: '16px' }}
+          direction={{ default: 'row' }}
+          flexWrap={{ default: 'wrap' }}
+        >
+          {displayedItems.map(item => (
+            <FlexItem key={item.key}>
+              <Label>{item.value}</Label>
+            </FlexItem>
+          ))}
+        </Flex>
+        {!showAll && remainingCount > 0 && (
+          <Button
+            variant="link"
+            isInline
+            onClick={() => setShowAll(true)}
+            style={{ marginTop: '16px', padding: 0 }}
+            ouiaId="show-more-labels-annotations-button"
+          >
+            {__(`Show ${remainingCount} more`)}
+          </Button>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+LabelsAnnotationsModal.propTypes = {
+  show: PropTypes.bool,
+  setIsOpen: PropTypes.func.isRequired,
+  digest: PropTypes.string,
+  labels: PropTypes.objectOf(PropTypes.string),
+  annotations: PropTypes.objectOf(PropTypes.string),
+};
+
+LabelsAnnotationsModal.defaultProps = {
+  show: false,
+  digest: '',
+  labels: {},
+  annotations: {},
+};
+
+export default LabelsAnnotationsModal;