katello 4.4.1 → 4.5.0

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

@@ -0,0 +1,250 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { Modal, Button, Select, SelectOption, Alert, Flex } from '@patternfly/react-core';
+import {
+  global_palette_black_600 as pfDescriptionColor,
+} from '@patternfly/react-tokens';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import { useAPI } from 'foremanReact/common/hooks/API/APIHooks';
+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';
+import api from '../../../../../services/api';
+import getContentViews from '../../../../../scenes/ContentViews/ContentViewsActions';
+import { selectContentViews, selectContentViewStatus } from '../../../../../scenes/ContentViews/ContentViewSelectors';
+import { uniq } from '../../../../../utils/helpers';
+import ContentViewIcon from '../../../../../scenes/ContentViews/components/ContentViewIcon';
+import updateHostContentViewAndEnvironment from './HostContentViewActions';
+import HOST_CV_AND_ENV_KEY from './HostContentViewConstants';
+import { getHostDetails } from '../../HostDetailsActions';
+
+const ENV_PATH_OPTIONS = { key: ENVIRONMENT_PATHS_KEY };
+
+const ContentViewDescription = ({ cv, versionNumber }) => {
+  const descriptionStyle = {
+    fontSize: '12px',
+    fontWeight: 400,
+    color: pfDescriptionColor.value,
+  };
+  if (cv.default) return <span style={descriptionStyle}>{__('Library')}</span>;
+  return (
+    <span style={descriptionStyle}>
+      <FormattedMessage
+        id={`content-view-${cv.id}-version-${cv.latest_version}`}
+        defaultMessage="Version {versionNumber}"
+        values={{ versionNumber }}
+      />
+    </span>
+  );
+};
+
+ContentViewDescription.propTypes = {
+  cv: PropTypes.shape({
+    default: PropTypes.bool.isRequired,
+    id: PropTypes.number.isRequired,
+    latest_version: PropTypes.string.isRequired,
+  }).isRequired,
+  versionNumber: PropTypes.string.isRequired,
+};
+
+const ChangeHostCVModal = ({
+  isOpen,
+  closeModal,
+  hostEnvId,
+  orgId,
+  hostId,
+  hostName,
+}) => {
+  const [selectedEnvForHost, setSelectedEnvForHost]
+    = useState([]);
+
+  const [selectedCVForHost, setSelectedCVForHost] = useState(null);
+  const [cvSelectOpen, setCVSelectOpen] = useState(false);
+  const dispatch = useDispatch();
+  const contentViewsInEnvResponse = useSelector(state => selectContentViews(state, `FOR_ENV_${hostEnvId}`));
+  const contentViewsInEnvStatus = useSelector(state => selectContentViewStatus(state, `FOR_ENV_${hostEnvId}`));
+  const hostUpdateStatus = useSelector(state => selectAPIStatus(state, HOST_CV_AND_ENV_KEY));
+  useAPI( // No TableWrapper here, so we can useAPI from Foreman
+    'get',
+    api.getApiUrl(`/organizations/${orgId}/environments/paths?permission_type=promotable`),
+    ENV_PATH_OPTIONS,
+  );
+
+  const handleModalClose = () => {
+    setCVSelectOpen(false);
+    setSelectedCVForHost(null);
+    setSelectedEnvForHost([]);
+    closeModal();
+  };
+
+  const selectedEnv = selectedEnvForHost?.[0];
+  const selectedEnvId = selectedEnv?.id;
+
+  const handleCVSelect = (event, selection) => {
+    setSelectedCVForHost(selection);
+    setCVSelectOpen(false);
+  };
+
+  const handleEnvSelect = (selection) => {
+    dispatch(getContentViews({
+      environment_id: selection[0].id,
+      include_default: true,
+      full_result: true,
+      order: 'default DESC', // show Default Organization View first
+    }, `FOR_ENV_${hostEnvId}`));
+    setSelectedCVForHost(null);
+    setSelectedEnvForHost(selection);
+  };
+  const { results: contentViewsInEnv = [] } = contentViewsInEnvResponse;
+  const canSave = !!(selectedCVForHost && selectedEnvForHost.length);
+
+  const relevantVersionObjFromCv = (cv, env) => { // returns the entire version object
+    const versions = cv.versions.filter(version => new Set(version.environment_ids).has(env.id));
+    return uniq(versions)?.[0];
+  };
+  const relevantVersionFromCv = (cv, env) =>
+    relevantVersionObjFromCv(cv, env)?.version; // returns the version text e.g. "1.0"
+
+  const refreshHostDetails = () => {
+    handleModalClose();
+    return dispatch(getHostDetails({ hostname: hostName }));
+  };
+
+  const handleSave = () => {
+    const requestBody = {
+      id: hostId,
+      host: {
+        content_facet_attributes: {
+          content_view_id: selectedCVForHost,
+          lifecycle_environment_id: selectedEnvId,
+        },
+      },
+    };
+    dispatch(updateHostContentViewAndEnvironment(
+      requestBody, hostId,
+      refreshHostDetails, handleModalClose,
+    ));
+  };
+
+  const cvPlaceholderText = useCallback(() => {
+    if (contentViewsInEnvStatus === STATUS.PENDING) return __('Loading...');
+    if (contentViewsInEnvStatus === STATUS.ERROR) return __('Error loading content views');
+    return (contentViewsInEnv.length === 0) ? __('No content views available') : __('Select a content view');
+  }, [contentViewsInEnv.length, contentViewsInEnvStatus]);
+
+  const modalActions = ([
+    <Button
+      key="add"
+      variant="primary"
+      onClick={handleSave}
+      isDisabled={!canSave}
+      isLoading={hostUpdateStatus === STATUS.PENDING}
+    >
+      {__('Save')}
+    </Button>,
+    <Button key="cancel" variant="link" onClick={handleModalClose}>
+      Cancel
+    </Button>,
+  ]);
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleModalClose}
+      onEscapePress={handleModalClose}
+      title={__('Edit content view assignment')}
+      width="50%"
+      position="top"
+      actions={modalActions}
+      id="change-host-cv-modal"
+    >
+      {contentViewsInEnvStatus === STATUS.RESOLVED &&
+        !!selectedEnvForHost.length && contentViewsInEnv.length === 0 &&
+        <Alert
+          variant="warning"
+          isInline
+          title={__('No content views available for the selected environment')}
+          style={{ marginBottom: '1rem' }}
+        >
+          {__('View the Content Views page to manage and promote content views, or select a different environment.')}
+        </Alert>
+      }
+      <EnvironmentPaths
+        userCheckedItems={selectedEnvForHost}
+        setUserCheckedItems={handleEnvSelect}
+        publishing={false}
+        multiSelect={false}
+        headerText={__('Select environment')}
+        isDisabled={hostUpdateStatus === STATUS.PENDING}
+      />
+      {selectedEnvForHost.length > 0 &&
+      <div style={{ marginTop: '1em' }}>
+        <h3>{__('Select content view')}</h3>
+        <Select
+          selections={selectedCVForHost}
+          onSelect={handleCVSelect}
+          isOpen={cvSelectOpen}
+          menuAppendTo="parent"
+          isDisabled={contentViewsInEnv.length === 0 || hostUpdateStatus === STATUS.PENDING}
+          onToggle={isExpanded => setCVSelectOpen(isExpanded)}
+          ouiaId="select-content-view"
+          id="selectCV"
+          name="selectCV"
+          aria-label="selectCV"
+          placeholderText={cvPlaceholderText()}
+        >
+          {contentViewsInEnv?.map(cv => (
+            <SelectOption
+              key={cv.id}
+              value={cv.id}
+            >
+              <Flex
+                direction={{ default: 'row', sm: 'row' }}
+                flexWrap={{ default: 'nowrap' }}
+                alignItems={{ default: 'alignItemsCenter', sm: 'alignItemsCenter' }}
+              >
+                <ContentViewIcon
+                  composite={cv.composite}
+                  size="sm"
+                />
+                <Flex
+                  direction={{ default: 'column', sm: 'column' }}
+                  flexWrap={{ default: 'nowrap' }}
+                  alignItems={{ default: 'alignItemsFlexStart', sm: 'alignItemsFlexStart' }}
+                >
+                  {cv.name}
+                  <ContentViewDescription
+                    cv={cv}
+                    versionNumber={relevantVersionFromCv(cv, selectedEnv)}
+                  />
+                </Flex>
+              </Flex>
+            </SelectOption>
+          ))
+          }
+        </Select>
+      </div>
+      }
+    </Modal>
+  );
+};
+
+ChangeHostCVModal.propTypes = {
+  isOpen: PropTypes.bool,
+  closeModal: PropTypes.func,
+  hostEnvId: PropTypes.number,
+  orgId: PropTypes.number.isRequired,
+  hostId: PropTypes.number.isRequired,
+  hostName: PropTypes.string.isRequired,
+};
+
+ChangeHostCVModal.defaultProps = {
+  isOpen: false,
+  closeModal: () => {},
+  hostEnvId: null,
+};
+
+
+export default ChangeHostCVModal;

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

@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Dropdown,
+  DropdownItem,
+  Flex,
+  FlexItem,
+  GridItem,
+  KebabToggle,
+  Label,
+  Tooltip,
+} from '@patternfly/react-core';
+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 PropTypes from 'prop-types';
+import ContentViewIcon from '../../../../../scenes/ContentViews/components/ContentViewIcon';
+import { hasRequiredPermissions, hostIsRegistered } from '../../hostDetailsHelpers';
+import ChangeHostCVModal from './ChangeHostCVModal';
+
+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,
+}) => {
+  let versionLabel = `Version ${contentViewVersion}`;
+  if (contentViewVersionLatest) {
+    versionLabel += ' (latest)';
+  }
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const toggleHamburger = () => setIsDropdownOpen(prev => !prev);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const closeModal = () => setIsModalOpen(false);
+  const openModal = () => {
+    setIsDropdownOpen(false);
+    setIsModalOpen(true);
+  };
+
+  const userPermissions = { ...hostPermissions, ...permissions };
+  const showKebab = hasRequiredPermissions(requiredPermissions, userPermissions);
+
+  const dropdownItems = [
+    <DropdownItem
+      aria-label="change-host-content-view"
+      key="change-host-content-view"
+      component="button"
+      onClick={openModal}
+    >
+      {__('Edit content view assignment')}
+    </DropdownItem>,
+  ];
+
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
+      <Card isHoverable>
+        <CardHeader>
+          <Flex
+            alignItems={{ default: 'alignItemsCenter' }}
+            justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            style={{ width: '100%' }}
+          >
+            <FlexItem>
+              <Flex
+                alignItems={{ default: 'alignItemsCenter' }}
+                justifyContent={{ default: 'justifyContentSpaceBetween' }}
+              >
+                <FlexItem>
+                  <CardTitle>{__('Content view details')}</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' }}>
+            <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>
+          </Flex>
+      }
+        </CardBody>
+      </Card>
+      {hostId &&
+        <ChangeHostCVModal
+          isOpen={isModalOpen}
+          closeModal={closeModal}
+          hostId={hostId}
+          hostName={hostName}
+          hostEnvId={hostEnvId}
+          orgId={orgId}
+          key={`cv-change-modal-${hostId}`}
+        />
+      }
+    </GridItem>
+  );
+};
+
+const ContentViewDetailsCard = ({ hostDetails }) => {
+  if (hostIsRegistered({ hostDetails })
+    && hostDetails.content_facet_attributes && hostDetails.organization_id) {
+    return (<HostContentViewDetails
+      hostId={hostDetails.id}
+      hostName={hostDetails.name}
+      orgId={hostDetails.organization_id}
+      hostEnvId={hostDetails.content_facet_attributes.lifecycle_environment_id}
+      hostPermissions={hostDetails.permissions}
+      {...propsToCamelCase(hostDetails.content_facet_attributes)}
+    />);
+  }
+  return null;
+};
+
+HostContentViewDetails.propTypes = {
+  contentView: PropTypes.shape({
+    name: PropTypes.string,
+    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,
+  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 = {
+  id: null,
+  name: '',
+  hostEnvId: null,
+  hostId: null,
+  hostName: '',
+  orgId: null,
+  contentViewDefault: false,
+  hostPermissions: {},
+  permissions: {},
+};
+
+ContentViewDetailsCard.propTypes = {
+  hostDetails: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    organization_id: PropTypes.number,
+    content_facet_attributes: PropTypes.shape({
+      lifecycle_environment_id: PropTypes.number,
+      permissions: PropTypes.shape({
+        view_content_views: PropTypes.bool,
+        view_lifecycle_environments: PropTypes.bool,
+        promote_or_remove_content_views_to_environments: PropTypes.bool,
+      }),
+    }),
+    permissions: PropTypes.shape({
+      edit_hosts: PropTypes.bool,
+    }),
+  }),
+};
+
+ContentViewDetailsCard.defaultProps = {
+  hostDetails: {},
+};
+
+export default ContentViewDetailsCard;

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

@@ -0,0 +1,19 @@
+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 HOST_CV_AND_ENV_KEY from './HostContentViewConstants';
+
+const updateHostContentViewAndEnvironment = (params, hostId, handleSuccess, handleError) => put({
+  type: API_OPERATIONS.PUT,
+  key: HOST_CV_AND_ENV_KEY,
+  url: foremanApi.getApiUrl(`/hosts/${hostId}`),
+  successToast: () => __('Host content view and environment updated'),
+  handleSuccess,
+  handleError,
+  errorToast,
+  params,
+});
+
+export default updateHostContentViewAndEnvironment;
+

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

@@ -0,0 +1,2 @@
+const HOST_CV_AND_ENV_KEY = 'HOST_CV_AND_ENV';
+export default HOST_CV_AND_ENV_KEY;

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, act } from 'react-testing-lib-wrapper';
+import userEvent from '@testing-library/user-event';
+import ChangeHostCVModal from '../ChangeHostCVModal';
+import mockEnvPaths from './envPaths.fixtures.json';
+import mockContentViews from './contentViews.fixtures.json';
+import HOST_CV_AND_ENV_KEY from '../HostContentViewConstants';
+import { assertNockRequest, nockInstance } from '../../../../../../test-utils/nockWrapper';
+import katelloApi from '../../../../../../services/api';
+
+const contentViews = katelloApi.getApiUrl('/content_views');
+// const hostDetailsUrl = '/api/hosts/test-host';
+
+const renderOptions = () => ({
+  apiNamespace: HOST_CV_AND_ENV_KEY,
+  initialState: {
+    API: {
+      HOST_DETAILS: {
+        response: {
+          id: 1,
+          name: 'test-host',
+          content_facet_attributes: {
+            content_view_id: 1,
+            lifecycle_environment_id: 1,
+          },
+          organization_id: 1,
+        },
+        status: 'RESOLVED',
+      },
+      ENVIRONMENT_PATHS: {
+        response: mockEnvPaths,
+        status: 'RESOLVED',
+      },
+    },
+  },
+});
+
+let firstEnvPath;
+let firstCV;
+let secondCV;
+let firstEnv;
+
+const cvQuery = {
+  organization_id: 1,
+  include_permissions: true,
+  include_default: true,
+  environment_id: 1,
+  full_result: true,
+  order: 'default DESC',
+};
+
+beforeEach(() => {
+  const { results } = mockEnvPaths;
+  [firstEnvPath] = results;
+  const { environments: envResults } = firstEnvPath;
+  [firstEnv] = envResults;
+  const { results: cvResults } = mockContentViews;
+  [firstCV, secondCV] = cvResults;
+});
+
+jest.mock('foremanReact/common/hooks/API/APIHooks', () => ({
+  useAPI: jest.fn(),
+}));
+
+test('Displays environment paths', async (done) => {
+  const { getAllByText }
+     = renderWithRedux(<ChangeHostCVModal
+       isOpen
+       closeModal={jest.fn()}
+       hostId={1}
+       hostName="test-host"
+       hostEnvId={1}
+       orgId={1}
+     />, renderOptions());
+
+  await patientlyWaitFor(() =>
+    expect(getAllByText(firstEnv.name)[0]).toBeInTheDocument());
+  done();
+});
+
+test('Select an env > call CV API > select a CV > Save button is enabled', async (done) => {
+  const contentViewsScope = nockInstance
+    .get(contentViews)
+    .query(cvQuery)
+    .reply(200, mockContentViews);
+
+  const {
+    getAllByText, getByText,
+    findByText, getAllByRole,
+  } = renderWithRedux(<ChangeHostCVModal
+    isOpen
+    closeModal={jest.fn()}
+    hostId={1}
+    hostName="test-host"
+    hostEnvId={1}
+    orgId={1}
+  />, renderOptions());
+
+  await patientlyWaitFor(() => {
+    const envLabel = getAllByText(firstEnv.name)[0];
+    expect(envLabel).toBeInTheDocument();
+  });
+
+  const envRadio = getAllByRole('radio', { name: firstEnv.name })[0];
+  expect(envRadio).toBeInTheDocument();
+
+  await act(async () => {
+    userEvent.click(envRadio); // Select the Library environment
+
+    const cvDropdown = await findByText('Select a content view');
+    expect(cvDropdown).toBeInTheDocument();
+
+    userEvent.click(cvDropdown); // Open the CV dropdown
+
+
+    [firstCV, secondCV].forEach((cv) => {
+      expect(getByText(cv.name)).toBeInTheDocument(); // the content view names should be showing
+    });
+
+
+    userEvent.click(getByText(secondCV.name)); // Select the second content view
+  });
+
+  // find the Save button and assert that it is enabled
+  const saveButton = getAllByRole('button', { name: 'Save' })[0];
+  expect(saveButton).toBeInTheDocument();
+  expect(saveButton).toHaveAttribute('aria-disabled', 'false');
+
+  assertNockRequest(contentViewsScope, done);
+  act(done);
+});

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

@@ -3,11 +3,13 @@ import { render } from 'react-testing-lib-wrapper';
 import ContentViewDetailsCard from '../ContentViewDetailsCard';
 
 const baseHostDetails = {
+  organization_id: 1,
   content_facet_attributes: {
     content_view: {
       name: 'CV',
       id: 100,
       composite: false,
+      content_view_default: false,
     },
     lifecycle_environment: {
       name: 'ENV',
@@ -50,3 +52,23 @@ test('shows when the CV in use is not the latest version', () => {
   expect(getByText('Version 1.0')).toBeInTheDocument();
   expect(queryByText('Version 1.0 (latest)')).toBeNull();
 });
+
+test('does not show version info when using Default Organization View', () => {
+  const hostDetails = {
+    ...baseHostDetails,
+    content_facet_attributes: {
+      ...baseHostDetails.content_facet_attributes,
+      content_view:
+        {
+          ...baseHostDetails.content_facet_attributes.content_view,
+          content_view_default: true,
+          name: 'Default Organization View',
+        },
+    },
+  };
+
+  const { queryByText } = render(<ContentViewDetailsCard hostDetails={hostDetails} />);
+  expect(queryByText('Default Organization View')).toBeInTheDocument();
+  expect(queryByText('Version 1.0')).toBeNull();
+});
+