katello 4.14.1 → 4.15.0.rc1

data/vendor/assets/javascripts/katello/chosen.jquery.js

@@ -382,7 +382,7 @@ Copyright (c) 2011 by Harvest
       this.search_results.mouseout(function(evt) {
         return _this.search_results_mouseout(evt);
       });
-      this.form_field_jq.bind("liszt:updated", function(evt) {
+      this.form_field_jq.on("liszt:updated", function(evt) {
         return _this.results_update_field(evt);
       });
       this.search_field.blur(function(evt) {
@@ -421,7 +421,7 @@ Copyright (c) 2011 by Harvest
         this.container.removeClass('chzn-disabled');
         this.search_field[0].disabled = false;
         if (!this.is_multiple) {
-          return this.selected_item.bind("focus", this.activate_action);
+          return this.selected_item.on("focus", this.activate_action);
         }
       }
     };

data/vendor/assets/javascripts/katello/jquery.ba-bbq.js

@@ -1021,7 +1021,7 @@
   //   example) use $(window).trigger( 'hashchange' );
   // * The event can be bound before DOM ready, but since it won't be usable
   //   before then in IE6/7 (due to the necessary Iframe), recommended usage is
-  //   to bind it inside a $(document).ready() callback.
+  //   to bind it inside a $(document).on('loadJS', ) callback.
   
   jq_event_special[ str_hashchange ] = $.extend( jq_event_special[ str_hashchange ], {
     

data/vendor/assets/javascripts/katello/jquery.hoverIntent.js

@@ -87,7 +87,7 @@
 				// set "previous" X and Y position based on initial entry point
 				pX = ev.pageX; pY = ev.pageY;
 				// update "current" X and Y position based on mousemove
-				$(ob).bind("mousemove",track);
+				$(ob).on("mousemove",track);
 				// start polling interval (self-calling timeout) to compare mouse coordinates over time
 				if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
 
@@ -101,6 +101,6 @@
 		};
 
 		// bind the function to the two event listeners
-		return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover);
+		return this.on('mouseenter',handleHover).on('mouseleave',handleHover);
 	};
 })(jQuery);

data/webpack/ForemanColumnExtensions/index.js

@@ -131,7 +131,7 @@ const hostsIndexColumnExtensions = [
             }
           >
             <FlexItem>
-              {truncate(contentViewEnvironments.map(cve => cve.candlepin_name).join(', '), 35)}
+              {truncate(contentViewEnvironments.map(cve => cve.label).join(', '), 35)}
             </FlexItem>
           </Popover>
         </Flex>

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard.js

@@ -24,6 +24,7 @@ import ContentViewIcon from '../../../../../scenes/ContentViews/components/Conte
 import { hasRequiredPermissions, hostIsRegistered } from '../../hostDetailsHelpers';
 import ChangeHostCVModal from './ChangeHostCVModal';
 import { truncate } from '../../../../../utils/helpers';
+import InactiveText from '../../../../../scenes/ContentViews/components/InactiveText';
 
 const requiredPermissions = [
   'view_lifecycle_environments', 'view_content_views',
@@ -95,7 +96,106 @@ ContentViewEnvironmentDisplay.propTypes = {
   }).isRequired,
 };
 
-const HostContentViewDetails = ({
+export const CVEDetailsBareCard = ({
+  contentViewEnvironments, hostPermissions, permissions, dropdownItems,
+  isDropdownOpen, toggleHamburger,
+}) => {
+  const userPermissions = { ...hostPermissions, ...permissions };
+  const showKebab = hasRequiredPermissions(requiredPermissions, userPermissions);
+
+  return (
+    <Card ouiaId="content-view-details-card">
+      <CardHeader>
+        <Flex
+          alignItems={{ default: 'alignItemsCenter' }}
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          style={{ width: '100%' }}
+        >
+          <FlexItem>
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            >
+              <FlexItem>
+                <CardTitle>
+                  <FormattedMessage
+                    id="cv-card-title"
+                    defaultMessage="{count, plural, =0 {Content view environments} one {Content view environment} other {Content view environments}}"
+                    values={{
+                      count: contentViewEnvironments.length,
+                    }}
+                  />
+                </CardTitle>
+              </FlexItem>
+            </Flex>
+          </FlexItem>
+          {showKebab && dropdownItems && (
+            <FlexItem>
+              <Dropdown
+                toggle={<KebabToggle aria-label="change_content_view_hamburger" onToggle={toggleHamburger} />}
+                isOpen={isDropdownOpen}
+                isPlain
+                ouiaId="change-content-view-environments-card-kebab"
+                position="right"
+                dropdownItems={dropdownItems}
+              />
+            </FlexItem>
+          )}
+        </Flex>
+      </CardHeader>
+      <CardBody>
+        <Flex direction={{ default: 'column' }}>
+          {contentViewEnvironments.length === 0 && (
+            <InactiveText text={__('N/A')} />
+          )}
+          {contentViewEnvironments.map(env => (
+            <ContentViewEnvironmentDisplay
+              key={`${env.lifecycle_environment.name}-${env.content_view.name}`}
+              contentView={env.content_view}
+              lifecycleEnvironment={env.lifecycle_environment}
+            />
+          ))}
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+CVEDetailsBareCard.propTypes = {
+  contentViewEnvironments: PropTypes.arrayOf(PropTypes.shape({
+    content_view: PropTypes.shape({
+      name: PropTypes.string,
+      id: PropTypes.number,
+      composite: PropTypes.bool,
+    }),
+    lifecycle_environment: PropTypes.shape({
+      name: PropTypes.string,
+      id: PropTypes.number,
+    }),
+  })),
+  hostPermissions: PropTypes.shape({
+    edit_hosts: PropTypes.bool,
+  }),
+  permissions: PropTypes.shape({
+    view_content_views: PropTypes.bool,
+    view_lifecycle_environments: PropTypes.bool,
+    promote_or_remove_content_views_to_environments: PropTypes.bool,
+  }),
+  dropdownItems: PropTypes.arrayOf(PropTypes.node),
+  isDropdownOpen: PropTypes.bool,
+  toggleHamburger: PropTypes.func,
+};
+
+CVEDetailsBareCard.defaultProps = {
+  contentViewEnvironments: [],
+  hostPermissions: {},
+  permissions: {},
+  dropdownItems: [],
+  isDropdownOpen: false,
+  toggleHamburger: () => {},
+};
+
+export const ContentViewEnvironmentDetails = ({
   contentViewEnvironments, hostId, hostName, orgId, hostEnvId,
   hostPermissions, permissions, contentSourceId,
 }) => {
@@ -126,57 +226,14 @@ const HostContentViewDetails = ({
 
   return (
     <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
-      <Card ouiaId="content-view-details-card">
-        <CardHeader>
-          <Flex
-            alignItems={{ default: 'alignItemsCenter' }}
-            justifyContent={{ default: 'justifyContentSpaceBetween' }}
-            style={{ width: '100%' }}
-          >
-            <FlexItem>
-              <Flex
-                alignItems={{ default: 'alignItemsCenter' }}
-                justifyContent={{ default: 'justifyContentSpaceBetween' }}
-              >
-                <FlexItem>
-                  <CardTitle>
-                    <FormattedMessage
-                      id="cv-card-title"
-                      defaultMessage="{count, plural, =0 {Content view environments} one {Content view environment} other {Content view environments}}"
-                      values={{
-                        count: contentViewEnvironments.length,
-                      }}
-                    />
-                  </CardTitle>
-                </FlexItem>
-              </Flex>
-            </FlexItem>
-            {showKebab && (
-              <FlexItem>
-                <Dropdown
-                  toggle={<KebabToggle aria-label="change_content_view_hamburger" onToggle={toggleHamburger} />}
-                  isOpen={isDropdownOpen}
-                  isPlain
-                  ouiaId="change-host-content-view-kebab"
-                  position="right"
-                  dropdownItems={dropdownItems}
-                />
-              </FlexItem>
-            )}
-          </Flex>
-        </CardHeader>
-        <CardBody>
-          <Flex direction={{ default: 'column' }}>
-            {contentViewEnvironments.map(env => (
-              <ContentViewEnvironmentDisplay
-                key={`${env.lifecycle_environment.name}-${env.content_view.name}`}
-                contentView={env.content_view}
-                lifecycleEnvironment={env.lifecycle_environment}
-              />
-            ))}
-          </Flex>
-        </CardBody>
-      </Card>
+      <CVEDetailsBareCard
+        isDropdownOpen={isDropdownOpen}
+        toggleHamburger={toggleHamburger}
+        contentViewEnvironments={contentViewEnvironments}
+        hostPermissions={hostPermissions}
+        permissions={permissions}
+        dropdownItems={showKebab ? dropdownItems : []}
+      />
       {hostId &&
         <ChangeHostCVModal
           isOpen={isModalOpen}
@@ -194,7 +251,7 @@ const HostContentViewDetails = ({
   );
 };
 
-HostContentViewDetails.propTypes = {
+ContentViewEnvironmentDetails.propTypes = {
   contentViewEnvironments: PropTypes.arrayOf(PropTypes.shape({
     content_view: PropTypes.shape({
       name: PropTypes.string,
@@ -221,7 +278,7 @@ HostContentViewDetails.propTypes = {
   contentSourceId: PropTypes.number,
 };
 
-HostContentViewDetails.defaultProps = {
+ContentViewEnvironmentDetails.defaultProps = {
   contentViewEnvironments: [],
   hostId: null,
   hostName: '',
@@ -232,10 +289,11 @@ HostContentViewDetails.defaultProps = {
   contentSourceId: null,
 };
 
+
 const ContentViewDetailsCard = ({ hostDetails }) => {
   if (hostIsRegistered({ hostDetails })
     && hostDetails.content_facet_attributes && hostDetails.organization_id) {
-    return (<HostContentViewDetails
+    return (<ContentViewEnvironmentDetails
       hostId={hostDetails.id}
       hostName={hostDetails.name}
       contentSourceId={hostDetails.content_facet_attributes.content_source?.id}
@@ -248,37 +306,6 @@ const ContentViewDetailsCard = ({ hostDetails }) => {
   return null;
 };
 
-HostContentViewDetails.propTypes = {
-  contentView: PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.number,
-    composite: PropTypes.bool,
-  }).isRequired,
-  hostId: PropTypes.number,
-  hostName: PropTypes.string,
-  contentSourceId: PropTypes.number,
-  orgId: PropTypes.number,
-  hostEnvId: PropTypes.number,
-  hostPermissions: PropTypes.shape({
-    edit_hosts: PropTypes.bool,
-  }),
-  permissions: PropTypes.shape({
-    view_content_views: PropTypes.bool,
-    view_lifecycle_environments: PropTypes.bool,
-    promote_or_remove_content_views_to_environments: PropTypes.bool,
-  }),
-};
-
-HostContentViewDetails.defaultProps = {
-  hostEnvId: null,
-  hostId: null,
-  hostName: '',
-  orgId: null,
-  contentSourceId: null,
-  hostPermissions: {},
-  permissions: {},
-};
-
 ContentViewDetailsCard.propTypes = {
   hostDetails: PropTypes.shape({
     id: PropTypes.number,

data/webpack/components/extensions/HostDetails/DetailsTabCards/HwPropertiesCard.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { number_to_human_size as NumberToHumanSize } from 'number_helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
   DescriptionList,
@@ -46,7 +47,7 @@ const HwPropertiesCard = ({ isExpandedGlobal, hostDetails }) => {
   const cpuSockets = facts?.['cpu::cpu_socket(s)'];
   const coreSocket = facts?.['cpu::core(s)_per_socket'];
   const blockDevices = facts?.blockdevices;
-  const memory = facts?.['dmi::memory::maximum_capacity'];
+  const memory = facts?.['memory::memtotal'];
 
   return (
     <CardTemplate
@@ -74,7 +75,11 @@ const HwPropertiesCard = ({ isExpandedGlobal, hostDetails }) => {
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>{__('RAM')}</DescriptionListTerm>
-          <DescriptionListDescription>{memory}</DescriptionListDescription>
+          <DescriptionListDescription>
+            {NumberToHumanSize(memory * 1024, {
+              strip_insignificant_zeros: true,
+            })}
+          </DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <HostDisks blockDevices={blockDevices} />

data/webpack/components/extensions/HostDetails/Tabs/DebsTab/DebsTab.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useRef } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import {
   ActionList,
   ActionListItem,
@@ -19,6 +19,7 @@ import {
 import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText } from '@patternfly/react-table';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { HOST_DETAILS_KEY } from 'foremanReact/components/HostDetails/consts';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
@@ -44,6 +45,7 @@ import { hasRequiredPermissions as can,
   userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
 import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
 import { useRexJobPolling } from '../RemoteExecutionHooks';
+import { runSubmanRepos } from '../../Cards/ContentViewDetailsCard/HostContentViewActions';
 
 export const hideDebsTab = ({ hostDetails }) => !(hostDetails?.operatingsystem_family === 'Debian');
 
@@ -197,6 +199,7 @@ export const DebsTab = () => {
   const { results, ...metadata } = response;
   const { error: errorSearchBody } = metadata;
   const status = useSelector(state => selectHostDebsStatus(state));
+  const dispatch = useDispatch();
   const {
     selectOne,
     isSelected,
@@ -269,6 +272,21 @@ export const DebsTab = () => {
     isPolling: isInstallInProgress,
   } = useRexJobPolling(packageInstallAction, getHostDetails({ hostname }));
 
+  const refreshHostDetails = () => dispatch({
+    type: 'API_GET',
+    payload: {
+      key: HOST_DETAILS_KEY,
+      url: `/api/hosts/${hostname}`,
+    },
+  });
+  const {
+    triggerJobStart: triggerRecalculate, lastCompletedJob: lastCompletedRecalculate,
+  } = useRexJobPolling(() => runSubmanRepos(hostname, refreshHostDetails));
+  const handleRefreshApplicabilityClick = () => {
+    setIsBulkActionOpen(false);
+    triggerRecalculate();
+  };
+
   const actionInProgress = (isRemoveInProgress || isUpgradeInProgress
     || isBulkRemoveInProgress || isBulkUpgradeInProgress || isInstallInProgress);
   const disabledReason = __('A remote execution job is in progress.');
@@ -345,7 +363,7 @@ export const DebsTab = () => {
     </DropdownItem>,
   ];
 
-  const dropdownRemoveItems = [
+  const kebabItems = [
     <DropdownItem
       aria-label="bulk_remove"
       ouiaId="bulk_remove"
@@ -366,6 +384,15 @@ export const DebsTab = () => {
     >
       {__('Install packages')}
     </DropdownItem>,
+    <DropdownItem
+      aria-label="refresh_applicability"
+      ouiaId="refresh_applicability"
+      key="refresh_applicability"
+      component="button"
+      onClick={handleRefreshApplicabilityClick}
+    >
+      {__('Refresh package applicability')}
+    </DropdownItem>,
   ];
 
   const handlePackageStatusSelected = newStatus => setPackageStatusSelected((prevStatus) => {
@@ -406,7 +433,7 @@ export const DebsTab = () => {
               toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
               isOpen={isBulkActionOpen}
               isPlain
-              dropdownItems={dropdownRemoveItems}
+              dropdownItems={kebabItems}
               ouiaId="bulk_actions_dropdown"
             />
           </ActionListItem>
@@ -461,7 +488,7 @@ export const DebsTab = () => {
           additionalListeners={[hostId, packageStatusSelected,
             activeSortDirection, activeSortColumn, lastCompletedPackageUpgrade,
             lastCompletedPackageRemove, lastCompletedBulkPackageRemove,
-            lastCompletedBulkPackageUpgrade, lastCompletedPackageInstall]}
+            lastCompletedBulkPackageUpgrade, lastCompletedPackageInstall, lastCompletedRecalculate]}
           fetchItems={fetchItems}
           bookmarkController="katello_host_installed_debs"
           readOnlyBookmarks={readOnlyBookmarks}

data/webpack/components/extensions/HostDetails/Tabs/RepositorySetsTab/RepositorySetsTab.js

@@ -194,7 +194,7 @@ const RepositorySetsTab = () => {
   const { name: lifecycleEnvironmentName } = lifecycleEnvironment ?? {};
   const multiEnvHost = contentViewEnvironments.length > 1;
   const contentViewEnvironmentNames =
-    contentViewEnvironments.map(({ candlepin_name: candlepinName }) => candlepinName).join(', ');
+    contentViewEnvironments.map(({ label }) => label).join(', ');
   const nonLibraryHost = contentViewDefault === false ||
     lifecycleEnvironmentLibrary === false;
   const [isBulkActionOpen, setIsBulkActionOpen] = useState(false);

data/webpack/components/extensions/RegistrationCommands/fields/ActivationKeys.js

@@ -62,12 +62,6 @@ const ActivationKeys = ({
     );
   }, [handleInvalidField, hostGroupId, hostGroupActivationKeys, pluginValues]);
 
-  useEffect(() => {
-    if (activationKeys?.length === 1) {
-      onChange({ activationKeys: [activationKeys[0].name] });
-    }
-  }, [activationKeys, onChange]);
-
   return (
     <FormGroup
       onFocus={() => setHasInteraction(true)}
@@ -131,7 +125,7 @@ const ActivationKeys = ({
             <SelectOption
               key={ack.name}
               value={ack.name}
-              description={ack?.lce ? ack.lce : __('No environment')}
+              description={ack?.cves ? ack.cves : __('No content view environments')}
             />
           ))}
       </Select>

data/webpack/components/extensions/RegistrationCommands/helpers.js

@@ -0,0 +1,15 @@
+export const determineInitialAKSelection = (activationKeys, initialAKSelection) => {
+  // If we've received the initialAKSelection from the URL, and it's a valid activation key, use it
+  if (initialAKSelection &&
+    (activationKeys ?? []).some(ak => ak.name === initialAKSelection)) {
+    return { activationKeys: initialAKSelection.split(',') };
+  }
+  // If there's only one activation key, use it
+  if (activationKeys?.length === 1) {
+    return { activationKeys: [activationKeys[0].name] };
+  }
+  // Otherwise, don't select any activation keys
+  return { activationKeys: [] };
+};
+
+export default determineInitialAKSelection;

data/webpack/components/extensions/RegistrationCommands/index.js

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { noop } from 'foremanReact/common/helpers';
 import { useUrlParams } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
+import { determineInitialAKSelection } from './helpers';
 
 import ActivationKeys from './fields/ActivationKeys';
 import IgnoreSubmanErrors from './fields/IgnoreSubmanErrors';
@@ -51,15 +52,8 @@ export const RegistrationActivationKeys = ({
 }) => {
   const { initialAKSelection } = useUrlParams();
   useEffect(() => {
-    onChange({ activationKeys: [] });
-  }, [onChange, organizationId, hostGroupId]);
-
-  useEffect(() => {
-    if (initialAKSelection &&
-       (pluginData?.activationKeys ?? []).some(ak => ak.name === initialAKSelection)) {
-      onChange({ activationKeys: initialAKSelection.split(',') });
-    }
-  }, [initialAKSelection, onChange, pluginData?.activationKeys]);
+    onChange(determineInitialAKSelection(pluginData?.activationKeys, initialAKSelection));
+  }, [initialAKSelection, onChange, pluginData?.activationKeys, organizationId, hostGroupId]);
 
   return (
     <ActivationKeys

data/webpack/global_index.js

@@ -38,6 +38,7 @@ import BulkChangeHostCVModal from './components/extensions/Hosts/BulkActions/Bul
 import BulkPackagesWizardModal from './components/extensions/Hosts/BulkActions/BulkPackagesWizard/index.js';
 import BulkErrataWizardModal from './components/extensions/Hosts/BulkActions/BulkErrataWizard/index.js';
 import ActivationKeysSearch from './components/ActivationKeysSearch';
+import { CVEDetailsCard } from './scenes/ActivationKeys/Details/components/CVEDetailsCard.js';
 
 registerReducer('katelloExtends', extendReducer);
 registerReducer('katello', rootReducer);
@@ -102,8 +103,14 @@ registerGetActions({
   tableName: 'hosts',
 });
 
-componentRegistry.register({
-  name: 'ActivationKeysSearch',
-  type: ActivationKeysSearch,
-});
+componentRegistry.registerMultiple([
+  {
+    name: 'ActivationKeysSearch',
+    type: ActivationKeysSearch,
+  },
+  {
+    name: 'CVEDetailsCard',
+    type: CVEDetailsCard,
+  },
+]);
 

data/webpack/redux/actions/RedHatRepositories/helpers.js

@@ -14,6 +14,8 @@ const recommendedRepositoriesRHEL = [
   'rhel-9-for-x86_64-baseos-kickstart',
   'rhel-9-for-x86_64-appstream-rpms',
   'rhel-9-for-x86_64-appstream-kickstart',
+  'rhel-9-for-x86_64-baseos-eus-rpms',
+  'rhel-9-for-x86_64-appstream-eus-rpms',
   'rhel-8-for-x86_64-baseos-rpms',
   'rhel-8-for-x86_64-baseos-kickstart',
   'rhel-8-for-x86_64-appstream-rpms',

data/webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js

@@ -34,6 +34,7 @@ import { getActivationKey } from './ActivationKeyActions';
 import DeleteModal from './components/DeleteModal';
 import InactiveText from '../../ContentViews/components/InactiveText';
 import SystemPurposeCard from '../../../components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard';
+import { CVEDetailsBareCard } from '../../../components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard';
 
 const ActivationKeyDetails = ({ match }) => {
   const dispatch = useDispatch();
@@ -113,6 +114,9 @@ const ActivationKeyDetails = ({ match }) => {
           <GridItem span={6}>
             <SystemPurposeCard akDetails={akDetails} />
           </GridItem>
+          <GridItem span={6}>
+            <CVEDetailsBareCard contentViewEnvironments={akDetails.contentViewEnvironments} />
+          </GridItem>
         </Grid>
       </PageSection>
       <DeleteModal isModalOpen={isModalOpen} handleModalToggle={handleModalToggle} akId={akId} />

data/webpack/scenes/ActivationKeys/Details/components/CVEDetailsCard.js

@@ -0,0 +1,37 @@
+import React, { useRef, useState } from 'react';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { CVEDetailsBareCard } from '../../../../components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard';
+
+const getAKDetailsFromDOM = (node) => {
+  try {
+    return propsToCamelCase(JSON.parse(node.dataset.akDetails));
+  } catch (e) {
+    return null;
+  }
+};
+export const CVEDetailsCard = () => { // used as foreman-react-component, takes no props
+  const akDetailsNode = useRef(document.getElementById('ak-cve-details')).current;
+  const [akDetails, setAkDetails] = useState(getAKDetailsFromDOM(akDetailsNode));
+
+  const observer = new MutationObserver((mutationsList) => {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const mutation of mutationsList) {
+      if (mutation.type === 'attributes' && mutation.attributeName.startsWith('data-')) {
+        akDetailsNode.current = document.getElementById('ak-cve-details');
+        setAkDetails(getAKDetailsFromDOM(akDetailsNode));
+      }
+    }
+  });
+
+  // Start observing akDetailsNode for attribute changes
+  if (akDetailsNode) observer.observe(akDetailsNode, { attributes: true });
+
+  if (!akDetails || !akDetails.contentViewEnvironments) return null;
+  return (
+    <CVEDetailsBareCard
+      contentViewEnvironments={akDetails.contentViewEnvironments}
+    />
+  );
+};
+
+export default CVEDetailsCard;

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailConfig.js

@@ -251,8 +251,7 @@ export default ({ cvId, versionId }) => [
       },
       {
         title: __('Updated'),
-        getProperty: item => item?.updated &&
-          <LongDateTime date={item.updated} showRelativeTimeTooltip />,
+        getProperty: item => item?.updated,
       },
     ],
   },

data/webpack/scenes/Hosts/ChangeContentSource/helpers.js

@@ -18,12 +18,6 @@ export const formIsLoading = (data, contentView, change) => (
   change === STATUS.PENDING
 );
 
-export const copyToClipboard = (event, textToCopy) => {
-  const clipboard = event.currentTarget.parentElement;
-  const el = document.createElement('textarea');
-  el.value = textToCopy;
-  clipboard.appendChild(el);
-  el.select();
-  document.execCommand('copy');
-  clipboard.removeChild(el);
+export const copyToClipboard = async (event, textToCopy) => {
+  await navigator.clipboard.writeText(textToCopy);
 };