katello 4.13.1 → 4.14.0.rc1

data/webpack/ForemanColumnExtensions/index.js

@@ -7,9 +7,11 @@ import {
   PackageIcon,
 } from '@patternfly/react-icons';
 import { Link } from 'react-router-dom';
-import { Flex, FlexItem } from '@patternfly/react-core';
+import { Flex, FlexItem, Popover, Badge } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
+import { ContentViewEnvironmentDisplay } from '../components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard';
+import { truncate } from '../utils/helpers';
 
 const hostsIndexColumnExtensions = [
   {
@@ -97,6 +99,47 @@ const hostsIndexColumnExtensions = [
     weight: 2400,
     isSorted: true,
   },
+  {
+    columnName: 'content_view_environments',
+    title: __('Content view environments'),
+    wrapper: (hostDetails) => {
+      const contentViewEnvironments =
+        hostDetails?.content_facet_attributes?.content_view_environments ?? [];
+      if (contentViewEnvironments.length === 0) return '—'; // don't show popover
+      return (
+        <Flex>
+          {contentViewEnvironments.length > 1 &&
+            <FlexItem>
+              <Badge isRead>{contentViewEnvironments.length}</Badge>
+            </FlexItem>
+          }
+          <Popover
+            id="content-view-environments-tooltip"
+            className="content-view-environments-tooltip"
+            maxWidth="34rem"
+            headerContent={hostDetails.display_name}
+            bodyContent={
+              <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>
+            }
+          >
+            <FlexItem>
+              {truncate(contentViewEnvironments.map(cve => cve.candlepin_name).join(', '), 35)}
+            </FlexItem>
+          </Popover>
+        </Flex>
+      );
+    },
+    weight: 2290,
+    isSorted: false,
+  },
   {
     columnName: 'content_source',
     title: __('Content source'),

data/webpack/components/Table/TableWrapper.js

@@ -33,6 +33,8 @@ const TableWrapper = ({
   additionalListeners,
   activeFilters,
   displaySelectAllCheckbox,
+  hasInteracted,
+  setHasInteracted,
   selectAll,
   selectAllMode,
   selectNone,
@@ -307,6 +309,8 @@ TableWrapper.propTypes = {
   selectedDefaultCount: PropTypes.number,
   selectedResults: PropTypes.arrayOf(PropTypes.shape({})),
   clearSelectedResults: PropTypes.func,
+  hasInteracted: PropTypes.bool,
+  setHasInteracted: PropTypes.func,
   selectAll: PropTypes.func,
   selectAllMode: PropTypes.bool,
   selectNone: PropTypes.func,
@@ -337,6 +341,8 @@ TableWrapper.defaultProps = {
   alwaysShowActionButtons: true,
   alwaysShowToggleGroup: false,
   toggleGroup: null,
+  hasInteracted: false,
+  setHasInteracted: noop,
   displaySelectAllCheckbox: false,
   selectedCount: 0,
   selectedDefaultCount: 0,

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

@@ -5,6 +5,7 @@ import { Modal, Button, Alert, Checkbox, TextContent, Text, TextVariants } from
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+import { useUrlParams } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import { selectAPIStatus } from 'foremanReact/redux/API/APISelectors';
 import EnvironmentPaths from '../../../../../scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths';
 import { ENVIRONMENT_PATHS_KEY } from '../../../../../scenes/ContentViews/components/EnvironmentPaths/EnvironmentPathConstants';
@@ -32,7 +33,9 @@ const ChangeHostCVModal = ({
   hostId,
   contentSourceId,
   hostName,
+  multiEnv,
 }) => {
+  const { content_view_assignment: initialCVModalOpen } = useUrlParams();
   const [selectedEnvForHost, setSelectedEnvForHost]
     = useState([]);
 
@@ -62,6 +65,13 @@ const ChangeHostCVModal = ({
     closeModal();
   };
 
+  const handleCancel = () => {
+    handleModalClose();
+    if (initialCVModalOpen) {
+      window.history.back();
+    }
+  };
+
   const selectedEnv = selectedEnvForHost?.[0];
   const selectedEnvId = selectedEnv?.id;
 
@@ -132,8 +142,8 @@ const ChangeHostCVModal = ({
     >
       {__('Save')}
     </Button>,
-    <Button key="cancel" ouiaId="change-host-cv-modal-cancel-button" variant="link" onClick={handleModalClose}>
-      Cancel
+    <Button key="cancel" ouiaId="change-host-cv-modal-cancel-button" variant="link" onClick={handleCancel}>
+      {__('Cancel')}
     </Button>,
   ]);
   return (
@@ -174,13 +184,22 @@ const ChangeHostCVModal = ({
           <a href={`/change_host_content_source?host_id=${hostId}`}>{__('change the host\'s content source.')}</a>
         </Alert>
       }
+      {multiEnv &&
+        <Alert
+          variant="warning"
+          ouiaId="multi-env-alert"
+          isInline
+          title={__('This host is associated with multiple content view environments. If you assign a lifecycle environment and content view here, the host will be removed from the other environments.')}
+          style={{ marginBottom: '1rem' }}
+        />
+      }
       <EnvironmentPaths
         userCheckedItems={selectedEnvForHost}
         setUserCheckedItems={handleEnvSelect}
         publishing={false}
         multiSelect={false}
         hostId={hostId}
-        headerText={__('Select environment')}
+        headerText={__('Select lifecycle environment')}
         isDisabled={hostUpdateStatus === STATUS.PENDING}
       />
       <ContentViewSelect
@@ -229,6 +248,7 @@ ChangeHostCVModal.propTypes = {
   hostId: PropTypes.number.isRequired,
   contentSourceId: PropTypes.number,
   hostName: PropTypes.string.isRequired,
+  multiEnv: PropTypes.bool,
 };
 
 ChangeHostCVModal.defaultProps = {
@@ -236,6 +256,7 @@ ChangeHostCVModal.defaultProps = {
   closeModal: () => {},
   hostEnvId: null,
   contentSourceId: null,
+  multiEnv: false,
 };
 
 

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

@@ -18,29 +18,91 @@ import { FormattedMessage } from 'react-intl';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { useUrlParams } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import PropTypes from 'prop-types';
 import ContentViewIcon from '../../../../../scenes/ContentViews/components/ContentViewIcon';
 import { hasRequiredPermissions, hostIsRegistered } from '../../hostDetailsHelpers';
 import ChangeHostCVModal from './ChangeHostCVModal';
+import { truncate } from '../../../../../utils/helpers';
 
 const requiredPermissions = [
   'view_lifecycle_environments', 'view_content_views',
   'promote_or_remove_content_views_to_environments',
 ];
 
-const HostContentViewDetails = ({
-  contentView, lifecycleEnvironment, contentViewVersionId, contentViewDefault,
-  contentViewVersion, contentViewVersionLatest, hostId, hostName, orgId, hostEnvId,
-  hostPermissions, permissions, contentSourceId,
+export const ContentViewEnvironmentDisplay = ({
+  contentView, lifecycleEnvironment,
 }) => {
-  let versionLabel = `Version ${contentViewVersion}`;
+  const {
+    contentViewDefault,
+    contentViewVersionId,
+    contentViewVersion,
+    contentViewVersionLatest,
+  } = propsToCamelCase(contentView);
+  let versionLabel = 'Version {version}';
   if (contentViewVersionLatest) {
     versionLabel += ' (latest)';
   }
+  return (
+    <FlexItem>
+      <Flex direction={{ default: 'row', sm: 'row' }} flexWrap={{ default: 'wrap' }}>
+        <Tooltip
+          position="top"
+          enableFlip
+          entryDelay={400}
+          content={<FormattedMessage
+            id="cv-card-lce-tooltip"
+            defaultMessage={__('Lifecycle environment: {lce}')}
+            values={{
+              lce: lifecycleEnvironment.name,
+            }}
+          />}
+        >
+          <Label isTruncated color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`}>{lifecycleEnvironment.name}</Label>
+        </Tooltip>
+        <ContentViewIcon composite={contentView.composite} style={{ marginRight: '2px' }} position="left" />
+        {contentViewDefault ? <span>{contentView.name}</span> :
+        <a style={{ fontSize: '14px' }} href={`/content_views/${contentView.id}`}>
+          {truncate(contentView.name)}
+        </a>
+        }
+        {!contentViewDefault &&
+          <FlexItem>
+            <a style={{ fontSize: '14px' }} href={urlBuilder(`content_views/${contentView.id}/versions/${contentViewVersionId}`, '')}>
+              <FormattedMessage
+                id={`lce-${lifecycleEnvironment.name}-cv-version-${contentViewVersion}`}
+                defaultMessage={versionLabel}
+                values={{
+                  version: contentViewVersion,
+                }}
+              />
+            </a>
+          </FlexItem>}
+      </Flex>
+    </FlexItem>
+  );
+};
 
+ContentViewEnvironmentDisplay.propTypes = {
+  contentView: PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+    composite: PropTypes.bool,
+  }).isRequired,
+  lifecycleEnvironment: PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.number,
+  }).isRequired,
+};
+
+const HostContentViewDetails = ({
+  contentViewEnvironments, hostId, hostName, orgId, hostEnvId,
+  hostPermissions, permissions, contentSourceId,
+}) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const toggleHamburger = () => setIsDropdownOpen(prev => !prev);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { content_view_assignment: initialCVModalOpen } = useUrlParams();
+  const [isModalOpen, setIsModalOpen] = useState(!!initialCVModalOpen);
   const closeModal = () => setIsModalOpen(false);
   const openModal = () => {
     setIsDropdownOpen(false);
@@ -58,7 +120,7 @@ const HostContentViewDetails = ({
       component="button"
       onClick={openModal}
     >
-      {__('Edit content view assignment')}
+      {__('Edit content view environments')}
     </DropdownItem>,
   ];
 
@@ -77,7 +139,15 @@ const HostContentViewDetails = ({
                 justifyContent={{ default: 'justifyContentSpaceBetween' }}
               >
                 <FlexItem>
-                  <CardTitle>{__('Content view details')}</CardTitle>
+                  <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>
@@ -97,42 +167,14 @@ const HostContentViewDetails = ({
         </CardHeader>
         <CardBody>
           <Flex direction={{ default: 'column' }}>
-            <Flex
-              direction={{ default: 'row', sm: 'row' }}
-              flexWrap={{ default: 'nowrap' }}
-              alignItems={{ default: 'alignItemsCenter', sm: 'alignItemsCenter' }}
-            >
-              <ContentViewIcon composite={contentView.composite} style={{ marginRight: '2px' }} position="left" />
-              <h3>{__('Content view')}</h3>
-            </Flex>
-            <Flex direction={{ default: 'row', sm: 'row' }} flexWrap={{ default: 'wrap' }}>
-              <a style={{ fontSize: '14px' }} href={`/content_views/${contentView.id}`}>{contentView.name}</a>
-              <Tooltip
-                position="top"
-                enableFlip
-                entryDelay={400}
-                content={<FormattedMessage
-                  id="cv-card-lce-tooltip"
-                  defaultMessage={__('Lifecycle environment: {lce}')}
-                  values={{
-                    lce: lifecycleEnvironment.name,
-                  }}
-                />}
-              >
-                <Label isTruncated color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`}>{lifecycleEnvironment.name}</Label>
-              </Tooltip>
-            </Flex>
-          </Flex>
-          {!contentViewDefault &&
-          <Flex direction={{ default: 'column' }}>
-            <FlexItem>
-              <h3>{__('Version in use')}</h3>
-              <a style={{ fontSize: '14px' }} href={urlBuilder(`content_views/${contentView.id}/versions/${contentViewVersionId}`, '')}>
-                {versionLabel}
-              </a>
-            </FlexItem>
+            {contentViewEnvironments.map(env => (
+              <ContentViewEnvironmentDisplay
+                key={`${env.lifecycle_environment.name}-${env.content_view.name}`}
+                contentView={env.content_view}
+                lifecycleEnvironment={env.lifecycle_environment}
+              />
+            ))}
           </Flex>
-      }
         </CardBody>
       </Card>
       {hostId &&
@@ -144,6 +186,7 @@ const HostContentViewDetails = ({
           hostEnvId={hostEnvId}
           contentSourceId={contentSourceId}
           orgId={orgId}
+          multiEnv={contentViewEnvironments.length > 1}
           key={`cv-change-modal-${hostId}`}
         />
       }
@@ -151,6 +194,44 @@ const HostContentViewDetails = ({
   );
 };
 
+HostContentViewDetails.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,
+    }),
+  })),
+  hostId: PropTypes.number,
+  hostName: PropTypes.string,
+  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,
+  }),
+  contentSourceId: PropTypes.number,
+};
+
+HostContentViewDetails.defaultProps = {
+  contentViewEnvironments: [],
+  hostId: null,
+  hostName: '',
+  orgId: null,
+  hostEnvId: null,
+  hostPermissions: {},
+  permissions: {},
+  contentSourceId: null,
+};
+
 const ContentViewDetailsCard = ({ hostDetails }) => {
   if (hostIsRegistered({ hostDetails })
     && hostDetails.content_facet_attributes && hostDetails.organization_id) {
@@ -173,16 +254,6 @@ HostContentViewDetails.propTypes = {
     id: PropTypes.number,
     composite: PropTypes.bool,
   }).isRequired,
-  contentViewDefault: PropTypes.bool,
-  lifecycleEnvironment: PropTypes.shape({
-    name: PropTypes.string,
-    id: PropTypes.number,
-  }).isRequired,
-  contentViewVersionId: PropTypes.number.isRequired,
-  contentViewVersion: PropTypes.string.isRequired,
-  contentViewVersionLatest: PropTypes.bool.isRequired,
-  id: PropTypes.number,
-  name: PropTypes.string,
   hostId: PropTypes.number,
   hostName: PropTypes.string,
   contentSourceId: PropTypes.number,
@@ -199,14 +270,11 @@ HostContentViewDetails.propTypes = {
 };
 
 HostContentViewDetails.defaultProps = {
-  id: null,
-  name: '',
   hostEnvId: null,
   hostId: null,
   hostName: '',
   orgId: null,
   contentSourceId: null,
-  contentViewDefault: false,
   hostPermissions: {},
   permissions: {},
 };

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

@@ -2,7 +2,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { API_OPERATIONS, put } from 'foremanReact/redux/API';
 import { errorToast } from '../../../../../scenes/Tasks/helpers';
 import { foremanApi } from '../../../../../services/api';
-import { runCommand } from '../../Tabs/RemoteExecutionActions';
+import { uploadProfile } from '../../Tabs/RemoteExecutionActions';
 import HOST_CV_AND_ENV_KEY from './HostContentViewConstants';
 
 const updateHostContentViewAndEnvironment = (params, hostId, handleSuccess, handleError) => put({
@@ -17,9 +17,8 @@ const updateHostContentViewAndEnvironment = (params, hostId, handleSuccess, hand
 });
 
 export const runSubmanRepos =
-  (hostname, handleSuccess) => runCommand({
+  (hostname, handleSuccess) => uploadProfile({
     hostname,
-    command: 'subscription-manager repos',
     handleSuccess,
   });
 

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/__tests__/contentViewDetailsCard.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from 'react-testing-lib-wrapper';
+import * as hooks from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import ContentViewDetailsCard from '../ContentViewDetailsCard';
 
 const baseHostDetails = {
@@ -18,15 +19,36 @@ const baseHostDetails = {
     content_view_version_id: 1000,
     content_view_version: '1.0',
     content_view_version_latest: true,
+    content_view_environments: [
+      {
+        content_view: {
+          name: 'CV',
+          id: 100,
+          composite: false,
+          content_view_default: false,
+          content_view_version_id: 1000,
+          content_view_version: '1.0',
+          content_view_version_latest: true,
+        },
+        lifecycle_environment: {
+          name: 'ENV',
+          id: 300,
+        },
+      },
+    ],
   },
   subscription_facet_attributes: {
     uuid: '123',
   },
 };
 
+beforeEach(() => {
+  jest.spyOn(hooks, 'useUrlParams').mockImplementation(() => ({}));
+});
+
 test('shows content view details when host is registered', () => {
   const { getByText } = render(<ContentViewDetailsCard hostDetails={baseHostDetails} />);
-  expect(getByText('Version 1.0 (latest)')).toBeInTheDocument();
+  expect(getByText('Version {version} (latest)')).toBeInTheDocument();
 });
 
 
@@ -36,7 +58,7 @@ test('does not show content view details when host is not registered', () => {
     subscription_facet_attributes: undefined,
   };
   const { queryByText } = render(<ContentViewDetailsCard hostDetails={hostDetails} />);
-  expect(queryByText('Version 1.0')).toBeNull();
+  expect(queryByText('Version {version}')).toBeNull();
 });
 
 
@@ -45,12 +67,20 @@ test('shows when the CV in use is not the latest version', () => {
     ...baseHostDetails,
     content_facet_attributes: {
       ...baseHostDetails.content_facet_attributes,
-      content_view_version_latest: false,
+      content_view_environments: [
+        {
+          content_view: {
+            ...baseHostDetails.content_facet_attributes.content_view_environments[0].content_view,
+            content_view_version_latest: false,
+          },
+          lifecycle_environment: baseHostDetails.content_facet_attributes.lifecycle_environment,
+        },
+      ],
     },
   };
   const { getByText, queryByText } = render(<ContentViewDetailsCard hostDetails={hostDetails} />);
-  expect(getByText('Version 1.0')).toBeInTheDocument();
-  expect(queryByText('Version 1.0 (latest)')).toBeNull();
+  expect(getByText('Version {version}')).toBeInTheDocument();
+  expect(queryByText('Version {version} (latest)')).toBeNull();
 });
 
 test('does not show version info when using Default Organization View', () => {
@@ -58,17 +88,21 @@ test('does not show version info when using Default Organization View', () => {
     ...baseHostDetails,
     content_facet_attributes: {
       ...baseHostDetails.content_facet_attributes,
-      content_view:
+      content_view_environments: [
         {
-          ...baseHostDetails.content_facet_attributes.content_view,
-          content_view_default: true,
-          name: 'Default Organization View',
+          content_view: {
+            ...baseHostDetails.content_facet_attributes.content_view_environments[0].content_view,
+            content_view_default: true,
+            name: 'Default Organization View',
+          },
+          lifecycle_environment: baseHostDetails.content_facet_attributes.lifecycle_environment,
         },
+      ],
     },
   };
 
   const { queryByText } = render(<ContentViewDetailsCard hostDetails={hostDetails} />);
   expect(queryByText('Default Organization View')).toBeInTheDocument();
-  expect(queryByText('Version 1.0')).toBeNull();
+  expect(queryByText('Version {version}')).toBeNull();
 });