katello 4.3.0.rc1 → 4.3.0.rc4

data/lib/katello/version.rb

@@ -1,3 +1,3 @@
 module Katello
-  VERSION = "4.3.0.rc1".freeze
+  VERSION = "4.3.0.rc4".freeze
 end

data/package.json

@@ -28,6 +28,7 @@
     "@sheerun/mutationobserver-shim": "^0.3.3",
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^10.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "@theforeman/builder": ">= 6.0.0",
     "@theforeman/find-foreman": "^4.8.0",
     "axios-mock-adapter": "^1.10.0",

data/webpack/components/AddedStatusLabel.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Label } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
+import InactiveText from '../scenes/ContentViews/components/InactiveText';
 
 const AddedStatusLabel = ({ added }) => {
   if (added) {
@@ -12,7 +13,7 @@ const AddedStatusLabel = ({ added }) => {
       </Label>
     );
   }
-  return __('Not added');
+  return <InactiveText text={__('Not added')} />;
 };
 
 AddedStatusLabel.propTypes = {

data/webpack/components/EditableTextInput/EditableTextInput.js

@@ -1,20 +1,33 @@
 import React, { useState, useEffect } from 'react';
-import { TextInput, TextArea, Text, TextVariants, Button, Split, SplitItem } from '@patternfly/react-core';
-import { TimesIcon, CheckIcon, PencilAltIcon } from '@patternfly/react-icons';
+import {
+  TextInput, TextArea, Text, Button, Split,
+  SplitItem, Tooltip, TooltipPosition,
+} from '@patternfly/react-core';
+import {
+  EyeIcon,
+  EyeSlashIcon,
+  TimesIcon,
+  CheckIcon,
+  PencilAltIcon,
+} from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import Loading from '../Loading';
 import './editableTextInput.scss';
 
+const PASSWORD_MASK = '••••••••';
+
 const EditableTextInput = ({
-  onEdit, value, textArea, attribute, placeholder,
+  onEdit, value, textArea, attribute, placeholder, isPassword, hasPassword,
   component, currentAttribute, setCurrentAttribute, disabled,
 }) => {
   // Tracks input box state
   const [inputValue, setInputValue] = useState(value);
   const [editing, setEditing] = useState(false);
   const [submitting, setSubmitting] = useState(false);
-
+  const [passwordPlaceholder, setPasswordPlaceholder] = useState(hasPassword
+    ? PASSWORD_MASK : null);
+  const [showPassword, setShowPassword] = useState(false);
 
   useEffect(() => {
     if (setCurrentAttribute && currentAttribute) {
@@ -27,6 +40,12 @@ const EditableTextInput = ({
   const onEditClick = () => {
     setEditing(true);
     if (setCurrentAttribute) setCurrentAttribute(attribute);
+
+    if (isPassword) {
+      if (passwordPlaceholder) {
+        setPasswordPlaceholder(null);
+      }
+    }
   };
 
   // Setting didCancel to prevent actions from happening after component has been unmounted
@@ -37,9 +56,16 @@ const EditableTextInput = ({
     const onSubmit = async () => {
       if (submitting) { // no dependency array because this check takes care of it
         await onEdit(inputValue, attribute);
+
         if (!didCancel) {
           setSubmitting(false);
           setEditing(false);
+
+          if (isPassword) {
+            if (inputValue?.length > 0) {
+              setPasswordPlaceholder(PASSWORD_MASK);
+            }
+          }
         }
       }
     };
@@ -64,10 +90,20 @@ const EditableTextInput = ({
   }, [editing]);
 
   const onClear = () => {
+    if (isPassword) {
+      if (hasPassword || inputValue?.length > 0) {
+        setPasswordPlaceholder(PASSWORD_MASK);
+      }
+    }
+
     setInputValue(value);
     setEditing(false);
   };
 
+  const toggleShowPassword = () => {
+    setShowPassword(prevShowPassword => !prevShowPassword);
+  };
+
   const inputProps = {
     component,
     value: inputValue || '',
@@ -81,7 +117,7 @@ const EditableTextInput = ({
         <SplitItem>
           {textArea ?
             (<TextArea {...inputProps} aria-label={`${attribute} text area`} />) :
-            (<TextInput {...inputProps} type="text" aria-label={`${attribute} text input`} />)}
+            (<TextInput {...inputProps} type={(isPassword && !showPassword) ? 'password' : 'text'} aria-label={`${attribute} text input`} />)}
         </SplitItem>
         <SplitItem>
           <Button
@@ -97,29 +133,48 @@ const EditableTextInput = ({
             <TimesIcon />
           </Button>
         </SplitItem>
+        {isPassword ?
+          <SplitItem>
+            <Button aria-label={`show-password ${attribute}`} variant="plain" isDisabled={!inputValue?.length} onClick={toggleShowPassword}>
+              {showPassword ?
+                (<EyeSlashIcon />) :
+                (<EyeIcon />)}
+            </Button>
+          </SplitItem> :
+          null
+        }
       </Split>
     );
   }
   return (
     <Split>
       <SplitItem>
-        <Text aria-label={`${attribute} text value`} component={component || TextVariants.p}>
-          {value || (<i>{placeholder}</i>)}
-        </Text>
-      </SplitItem>
+        {inputValue ?
+          <Text aria-label={`${attribute} text value`} component={component}>
+            {editing ? inputValue : passwordPlaceholder || inputValue}
+          </Text> :
+          <Text className="textInput-placeholder" aria-label={`${attribute} text value`} component={component}>
+            {passwordPlaceholder || placeholder}
+          </Text>}
+      </SplitItem >
       {!disabled &&
         <SplitItem>
-          <Button
-            className="foreman-edit-icon"
-            aria-label={`edit ${attribute}`}
-            variant="plain"
-            onClick={onEditClick}
+          <Tooltip
+            position={TooltipPosition.top}
+            content={__('Edit')}
           >
-            <PencilAltIcon />
-          </Button>
+            <Button
+              className="foreman-edit-icon"
+              aria-label={`edit ${attribute}`}
+              variant="plain"
+              onClick={onEditClick}
+            >
+              <PencilAltIcon />
+            </Button>
+          </Tooltip>
         </SplitItem>
       }
-    </Split>
+    </Split >
   );
 };
 
@@ -133,6 +188,8 @@ EditableTextInput.propTypes = {
   currentAttribute: PropTypes.string,
   setCurrentAttribute: PropTypes.func,
   disabled: PropTypes.bool,
+  isPassword: PropTypes.bool,
+  hasPassword: PropTypes.bool,
 };
 
 EditableTextInput.defaultProps = {
@@ -143,6 +200,8 @@ EditableTextInput.defaultProps = {
   currentAttribute: undefined,
   setCurrentAttribute: undefined,
   disabled: false,
+  isPassword: false,
+  hasPassword: false,
 };
 
 export default EditableTextInput;

data/webpack/components/EditableTextInput/__tests__/editableTextInput.test.js

@@ -50,3 +50,85 @@ test('input is set back to original value after clearing', () => {
   // Original value is still showing even though it's been edited
   expect(getByLabelText(`${attribute} text value`)).toHaveTextContent(actualValue);
 });
+
+test('shows a mask over the password when there is one', () => {
+  const { getByLabelText } = render(<EditableTextInput
+    attribute={attribute}
+    onEdit={jest.fn()}
+    isPassword
+    hasPassword
+  />);
+
+  expect(getByLabelText(`${attribute} text value`)).toHaveTextContent('••••••••');
+});
+
+test('shows a mask over the password after undoing changes', () => {
+  const { getByLabelText } = render(<EditableTextInput
+    attribute={attribute}
+    onEdit={jest.fn()}
+    isPassword
+    hasPassword
+  />);
+
+  getByLabelText(`edit ${attribute}`).click();
+  expect(getByLabelText(`${attribute} text input`)).toHaveTextContent('');
+
+  getByLabelText(`clear ${attribute}`).click();
+  expect(getByLabelText(`${attribute} text value`)).toHaveTextContent('••••••••');
+});
+
+test('shows a mask over the password after editing', async () => {
+  const newPassword = 'Pizza';
+  const { getByLabelText } = render(<EditableTextInput
+    attribute={attribute}
+    onEdit={jest.fn()}
+    isPassword
+    hasPassword
+  />);
+
+  getByLabelText(`edit ${attribute}`).click();
+  fireEvent.change(getByLabelText(`${attribute} text input`), { target: { value: newPassword } });
+  expect(getByLabelText(`${attribute} text input`)).toHaveValue(newPassword);
+  getByLabelText(`submit ${attribute}`).click();
+
+  await patientlyWaitFor(() => expect(getByLabelText(`${attribute} text value`)).toBeInTheDocument());
+  expect(getByLabelText(`${attribute} text value`)).toHaveTextContent('••••••••');
+});
+
+test('shows a placeholder after clearing the password', async () => {
+  const { getByLabelText } = render(<EditableTextInput
+    attribute={attribute}
+    onEdit={jest.fn()}
+    isPassword
+    hasPassword
+  />);
+
+  getByLabelText(`edit ${attribute}`).click();
+  getByLabelText(`submit ${attribute}`).click();
+
+  await patientlyWaitFor(() => expect(getByLabelText(`${attribute} text value`)).toBeInTheDocument());
+  expect(getByLabelText(`${attribute} text value`)).toHaveTextContent('None provided');
+});
+
+test('can toggle showing the current password', async () => {
+  const { getByLabelText } = render(<EditableTextInput
+    attribute={attribute}
+    onEdit={jest.fn()}
+    isPassword
+    hasPassword
+  />);
+
+  getByLabelText(`edit ${attribute}`).click();
+
+  expect(getByLabelText(`show-password ${attribute}`)).toHaveAttribute('disabled', '');
+
+  const newPassword = 'New Password';
+  fireEvent.change(getByLabelText(`${attribute} text input`), { target: { value: newPassword } });
+  expect(getByLabelText(`${attribute} text input`)).toHaveAttribute('type', 'password');
+
+  getByLabelText(`show-password ${attribute}`).click();
+  expect(getByLabelText(`${attribute} text input`)).toHaveAttribute('type', 'text');
+
+  getByLabelText(`show-password ${attribute}`).click();
+  expect(getByLabelText(`${attribute} text input`)).toHaveAttribute('type', 'password');
+});

data/webpack/components/EditableTextInput/editableTextInput.scss

@@ -11,4 +11,8 @@
 // Edit icon isn't in line with text
 .foreman-edit-icon {
   padding-top: 2px;
+}
+
+.textInput-placeholder {
+  color: var(--pf-global--disabled-color--100);
 }

data/webpack/components/Packages/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { TableText } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  CheckIcon,
+  LongArrowAltUpIcon,
+  MinusIcon,
+} from '@patternfly/react-icons';
+import PropTypes from 'prop-types';
+
+export const PackagesStatus = ({ upgradable_version: upgradableVersion }) => {
+  let PackagesIcon;
+  let label;
+  let color;
+
+  if (upgradableVersion == null) {
+    color = 'green';
+    label = __('Up-to date');
+    PackagesIcon = CheckIcon;
+  } else {
+    color = 'blue';
+    label = __('Upgradable');
+    PackagesIcon = LongArrowAltUpIcon;
+  }
+  if (!PackagesIcon) return null;
+
+  return (
+    <TableText wrapModifier="nowrap">
+      {color && <PackagesIcon color={color} title={label} />} {label}
+    </TableText>
+  );
+};
+
+PackagesStatus.propTypes = {
+  upgradable_version: PropTypes.string,
+};
+
+PackagesStatus.defaultProps = {
+  upgradable_version: null,
+};
+
+export const PackagesLatestVersion = ({ name, upgradable_version: upgradableVersion }) => {
+  let label;
+  let color;
+
+  if (upgradableVersion == null) {
+    label = '';
+    color = 'green';
+  } else {
+    label = upgradableVersion.replace(`${name}-`, '');
+  }
+
+  return <TableText wrapModifier="nowrap">{color && <MinusIcon color={color} title={label} />} {label} </TableText>;
+};
+
+PackagesLatestVersion.propTypes = {
+  name: PropTypes.string.isRequired,
+  upgradable_version: PropTypes.string,
+};
+
+PackagesLatestVersion.defaultProps = {
+  upgradable_version: null,
+};

data/webpack/components/RoutedTabs/index.js

@@ -14,6 +14,8 @@ const RoutedTabs = ({
 
   // The below transforms #/history/6 to history
   const currentTabFromUrl = head(last(hash.split('#/')).split('/'));
+  // Allows navigation back to mainTab
+  const onSubTab = currentTabFromUrl !== last(last(hash.split('#/')).split('/'));
 
   const onSelect = (e, key) => {
     e.preventDefault();
@@ -22,7 +24,7 @@ const RoutedTabs = ({
     // https://www.w3schools.com/jsref/event_button.asp
     const middleMouseButtonNotUsed = !(e.button === 1 || e.buttons === 4 || e.which === 2);
     const notCurrentTab = currentTabFromUrl !== key;
-    if (middleMouseButtonNotUsed && notCurrentTab) {
+    if (middleMouseButtonNotUsed && (notCurrentTab || !!onSubTab)) {
       push(`#/${key}`);
     }
   };

data/webpack/components/Search/Search.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { ControlLabel } from 'react-bootstrap';
 import { loadSetting } from 'foremanReact/components/Settings/SettingsActions';
@@ -26,11 +26,14 @@ const Search = ({
 }) => {
   const [items, setItems] = useState([]);
   const dispatch = useDispatch();
+  const mountedRef = useRef(true);
 
   const onInputUpdate = async (searchTerm = '') => {
     const newItems = items.filter(({ text }) => stringIncludes(text, searchTerm));
 
     if (newItems.length !== items.length) {
+      // Checking whether the current component is mounted before state change events
+      if (!mountedRef.current) return;
       setItems(newItems);
     }
 
@@ -43,6 +46,8 @@ const Search = ({
       } else {
         data = await api.get(endpoint, undefined, params);
       }
+      // Checking whether the current component is mounted before state change events
+      if (!mountedRef.current) return;
       setItems(data?.data?.filter(({ error }) => !error).map(({ label }) => ({
         text: label.trim(),
       })));
@@ -56,6 +61,7 @@ const Search = ({
   useEffect(() => {
     dispatch(loadSetting(AUTOSEARCH_DELAY));
     dispatch(loadSetting(AUTOSEARCH_WHILE_TYPING));
+    return () => { mountedRef.current = false; };
   }, [dispatch]);
 
   const onNewSearch = (search) => {

data/webpack/components/SelectAllCheckbox/index.js

@@ -71,13 +71,13 @@ const SelectAllCheckbox = ({
     <DropdownItem key="select-none" component="button" isDisabled={selectedCount === 0} onClick={handleSelectNone} >
       {`${__('Select none')} (0)`}
     </DropdownItem>,
-    <DropdownItem key="select-page" component="button" isDisabled={areAllRowsOnPageSelected} onClick={handleSelectPage}>
+    <DropdownItem key="select-page" component="button" isDisabled={pageRowCount === 0 || areAllRowsOnPageSelected} onClick={handleSelectPage}>
       {`${__('Select page')} (${pageRowCount})`}
     </DropdownItem>,
   ];
   if (canSelectAll) {
     selectAllDropdownItems.push((
-      <DropdownItem key="select-all" id="all" component="button" isDisabled={areAllRowsSelected} onClick={handleSelectAll}>
+      <DropdownItem key="select-all" id="all" component="button" isDisabled={totalCount === 0 || areAllRowsSelected} onClick={handleSelectAll}>
         {`${__('Select all')} (${totalCount})`}
       </DropdownItem>));
   }

data/webpack/components/Table/EmptyStateMessage.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import { EmptyState,
+import {
+  EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStateVariant,
   Bullseye,
-  Title } from '@patternfly/react-core';
+  Title,
+} from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { CubeIcon, ExclamationCircleIcon, SearchIcon } from '@patternfly/react-icons';

data/webpack/components/Table/MainTable.scss

@@ -1,11 +1,17 @@
-.pf-c-dropdown.pf-m-align-right{
+.pf-c-dropdown.pf-m-align-right {
   width: 100%;
   justify-content: flex-end;
   display: flex;
 }
+
 .pf-c-dropdown__menu {
   min-width: 0;
 }
+
 .pf-c-wizard__footer {
   z-index: 1;
+}
+
+.pf-c-table tbody tr td {
+  vertical-align: inherit;
 }

data/webpack/components/Table/TableHooks.js

@@ -179,27 +179,18 @@ export const useBulkSelect = ({
   };
 
   const fetchBulkParams = () => {
-    const selected = {
-      included: {
-        ids: [],
-        search: null,
-      },
-      excluded: {
-        ids: [],
-      },
-      all: false,
+    const searchQueryWithExclusionSet = () => {
+      const query = [searchQuery,
+        !isEmpty(exclusionSet) && `${idColumn} !^ (${[...exclusionSet].join(',')})`];
+      return query.filter(item => item).join(' and ');
     };
 
-    if (selectAllMode) {
-      selected.included.search = searchQuery;
-      selected.excluded.ids = [...exclusionSet];
-      selected.all = true;
-    } else if (!isEmpty(inclusionSet)) {
-      selected.included.ids = [...inclusionSet];
-    } else {
-      return {};
-    }
-    return selected;
+    const searchQueryWithInclusionSet = () => {
+      if (isEmpty(inclusionSet)) throw new Error('Cannot build a search query with no items selected');
+      return `${idColumn} ^ (${[...inclusionSet].join(',')})`;
+    };
+
+    return selectAllMode ? searchQueryWithExclusionSet() : searchQueryWithInclusionSet();
   };
 
   const prevSearchRef = usePrevious({ searchQuery });

data/webpack/components/Table/TableWrapper.js

@@ -49,6 +49,8 @@ const TableWrapper = ({
   const { pageRowCount } = getPageStats({ total, page, perPage });
   const unresolvedStatus = !!allTableProps?.status && allTableProps.status !== STATUS.RESOLVED;
   const unresolvedStatusOrNoRows = unresolvedStatus || pageRowCount === 0;
+  const resolvedStatusNoContent =
+    !searchQuery && allTableProps.status === STATUS.RESOLVED && pageRowCount === 0;
   const showPagination = !unresolvedStatusOrNoRows;
   const showActionButtons = actionButtons && !unresolvedStatus;
   const showToggleGroup = toggleGroup && !unresolvedStatus;
@@ -63,8 +65,6 @@ const TableWrapper = ({
   const hasChanged = (oldValue, newValue) => !isEqual(oldValue, newValue);
 
   const spawnFetch = useCallback((paginationData) => {
-    // The search component will update the search query when a search is performed, listen for that
-    // and perform the search so we can be sure the searchQuery is updated when search is performed.
     const fetchWithParams = (allParams = {}) => {
       const newRequest = {
         ...(paginationData ?? paginationParams()),
@@ -177,7 +177,7 @@ const TableWrapper = ({
             />
           </FlexItem>
         }
-        {!disableSearch &&
+        {!disableSearch && !resolvedStatusNoContent &&
           <FlexItem>
             <Search
               isDisabled={unresolvedStatusOrNoRows && !searchQuery}

data/webpack/components/WithOrganization/__snapshots__/withOrganization.test.js.snap

@@ -17,7 +17,6 @@ exports[`subscriptions page should render select org page 1`] = `
     default={[Function]}
     loadOrganization={[Function]}
     organization={Object {}}
-    saveOrganization={[Function]}
     store={
       Object {
         "clearActions": [Function],
@@ -28,6 +27,7 @@ exports[`subscriptions page should render select org page 1`] = `
         "subscribe": [Function],
       }
     }
+    updateCdnConfiguration={[Function]}
   >
     <Header
       title="Select Organization"
@@ -73,7 +73,6 @@ exports[`subscriptions page should render the wrapped component 1`] = `
     default={[Function]}
     loadOrganization={[Function]}
     organization={Object {}}
-    saveOrganization={[Function]}
     store={
       Object {
         "clearActions": [Function],
@@ -84,12 +83,12 @@ exports[`subscriptions page should render the wrapped component 1`] = `
         "subscribe": [Function],
       }
     }
+    updateCdnConfiguration={[Function]}
   >
     <WrappedComponent
       default={[Function]}
       loadOrganization={[Function]}
       organization={Object {}}
-      saveOrganization={[Function]}
       store={
         Object {
           "clearActions": [Function],
@@ -100,6 +99,7 @@ exports[`subscriptions page should render the wrapped component 1`] = `
           "subscribe": [Function],
         }
       }
+      updateCdnConfiguration={[Function]}
     >
       <div>
          Wrapped! 

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

@@ -1,9 +1,5 @@
 import React from 'react';
 import {
-  DescriptionList,
-  DescriptionListTerm,
-  DescriptionListGroup,
-  DescriptionListDescription,
   Card,
   CardHeader,
   CardTitle,
@@ -30,36 +26,34 @@ const HostContentViewDetails = ({
   }
 
   return (
-    <GridItem rowSpan={2} md={6} lg={3}>
+    <GridItem rowSpan={2} md={6} lg={4}>
       <Card isHoverable>
         <CardHeader>
-          <CardTitle>{__('Content View Details')}</CardTitle>
+          <CardTitle>{__('Content view details')}</CardTitle>
         </CardHeader>
         <CardBody>
-          <DescriptionList isHorizontal isAutoColumnWidths>
-            <DescriptionListGroup>
-              <DescriptionListTerm>{__('Content View')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                <Flex>
-                  <FlexItem spacer={{ default: 'spacerNone' }}><ContentViewIcon composite={contentView.composite} /></FlexItem>
-                  <FlexItem><a href={`/content_views/${contentView.id}`}>{`${contentView.name}`}</a> </FlexItem>
-                  <FlexItem><Label isTruncated color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`}>{`${lifecycleEnvironment.name}`}</Label></FlexItem>
-                </Flex>
-              </DescriptionListDescription>
-            </DescriptionListGroup>
-            <DescriptionListGroup>
-              <DescriptionListTerm>{__('Version in use')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                <Flex>
-                  <FlexItem>
-                    <a href={urlBuilder(`content_views/${contentView.id}/versions/${contentViewVersionId}`, '')}>
-                      {versionLabel}
-                    </a>
-                  </FlexItem>
-                </Flex>
-              </DescriptionListDescription>
-            </DescriptionListGroup>
-          </DescriptionList>
+          <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' }} />
+              <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>
+              <Label isTruncated color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`}>{`${lifecycleEnvironment.name}`}</Label>
+            </Flex>
+          </Flex>
+          <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>
     </GridItem>

data/webpack/components/extensions/HostDetails/HostDetailsConstants.js

@@ -0,0 +1 @@
+export default 'HOST_DETAILS';