katello 4.1.4 → 4.2.0.rc1

data/package.json

@@ -38,6 +38,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.9.0",
     "nock": "^12.0.3",
     "react-test-renderer": "^16.0.0"
@@ -49,6 +50,7 @@
     "downshift": "^5.4.2",
     "ngreact": "^0.5.0",
     "query-string": "^6.1.0",
-    "react-bootstrap": "^0.32.1"
+    "react-bootstrap": "^0.32.1",
+    "use-deep-compare-effect": "^1.6.1"
   }
 }

data/webpack/components/EditableTextInput/EditableTextInput.js

@@ -14,13 +14,13 @@ const EditableTextInput = ({
   const [editing, setEditing] = useState(false);
   const [submitting, setSubmitting] = useState(false);
 
-  // Setting didCancel to avoid actions from happening after component has been unmounted
+  // Setting didCancel to prevent actions from happening after component has been unmounted
   // see https://overreacted.io/a-complete-guide-to-useeffect/#speaking-of-race-conditions
   useEffect(() => {
     let didCancel = false;
 
     const onSubmit = async () => {
-      if (submitting) {
+      if (submitting) { // no dependency array because this check takes care of it
         await onEdit(inputValue, attribute);
         if (!didCancel) {
           setSubmitting(false);
@@ -33,7 +33,7 @@ const EditableTextInput = ({
     return () => {
       didCancel = true;
     };
-  }, [submitting]);
+  });
 
   // Listen for enter and trigger submit workflow on enter
   useEffect(() => {

data/webpack/components/RoutedTabs/RoutedTabs.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { shape, string, number, element, arrayOf } from 'prop-types';
 import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -17,30 +17,29 @@ const RoutedTabs = ({
   const { hash } = useLocation();
   const { hash: tabFromUrl, params: { subContentId } } = paramsFromHash(hash);
 
-  const buildLink = tabKey => `${baseUrl}#${tabKey}`;
-
-  const changeTab = (eventKey) => {
+  const changeTab = useCallback((eventKey) => {
+    const buildLink = tabKey => `${baseUrl}#${tabKey}`;
     const matchedTab = tabs.find(tab => tab.key === eventKey);
     if (matchedTab) {
       history.push(buildLink(matchedTab.key));
     } else {
       history.replace(buildLink(tabs[defaultTabIndex].key)); // go to first tab if no tab selected
     }
-  };
+  }, [tabs, defaultTabIndex, history, baseUrl]);
 
   const handleTabSelect = (_event, eventKey) => changeTab(eventKey);
 
-  const getActiveTab = () => {
+  const getActiveTab = useCallback(() => {
     const matchedTab = tabs.find(tab => tab.key === tabFromUrl);
     if (matchedTab) return matchedTab.key;
 
     return tabs[defaultTabIndex].key; // Default to first tab
-  };
+  }, [tabs, tabFromUrl, defaultTabIndex]);
 
   // Useful when first navigating to the page, switches to default tab in url
   useEffect(() => {
     if (tabFromUrl !== getActiveTab()) changeTab(tabFromUrl);
-  }, [tabFromUrl]);
+  }, [tabFromUrl, getActiveTab, changeTab]);
 
   // Handle subroutes to show item's detail content while staying on a tab
   const showContent = (tab) => {

data/webpack/components/Table/TableWrapper.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import { Pagination, Flex, FlexItem } from '@patternfly/react-core';
 
 import PropTypes from 'prop-types';
@@ -31,27 +32,34 @@ const TableWrapper = ({
 
   const updatePagination = (data) => {
     const { subtotal: newTotal, page: newPage, per_page: newPerPage } = data;
-    if (newTotal) setTotal(parseInt(newTotal, 10));
-    if (newPage) setPage(parseInt(newPage, 10));
-    if (newPerPage) setPerPage(parseInt(newPerPage, 10));
-  };
-  const paginationParams = () => ({ per_page: perPage, page });
-  const fetchWithParams = (allParams = {}) => {
-    dispatch(fetchItems({ ...paginationParams(), ...allParams }));
+    if (newTotal !== undefined) setTotal(parseInt(newTotal, 10));
+    if (newPage !== undefined) setPage(parseInt(newPage, 10));
+    if (newPerPage !== undefined) setPerPage(parseInt(newPerPage, 10));
   };
+  const paginationParams = useCallback(() => ({ per_page: perPage, page }), [perPage, page]);
 
   useEffect(() => updatePagination(metadata), [metadata]);
 
   // 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.
-  useEffect(() => {
+  useDeepCompareEffect(() => {
+    const fetchWithParams = (allParams = {}) => {
+      dispatch(fetchItems({ ...paginationParams(), ...allParams }));
+    };
     if (searchQuery || activeFilters) {
       // Reset page back to 1 when filter or search changes
       fetchWithParams({ search: searchQuery, page: 1 });
     } else {
       fetchWithParams();
     }
-  }, [searchQuery, ...additionalListeners]);
+  }, [
+    activeFilters,
+    dispatch,
+    fetchItems,
+    paginationParams,
+    searchQuery,
+    additionalListeners,
+  ]);
 
   const getAutoCompleteParams = search => ({
     endpoint: autocompleteEndpoint,
@@ -63,7 +71,6 @@ const TableWrapper = ({
 
   const onPaginationUpdate = (updatedPagination) => {
     updatePagination(updatedPagination);
-    dispatch(fetchItems({ ...paginationParams(), ...updatedPagination, search: searchQuery }));
   };
 
   return (
@@ -118,6 +125,7 @@ TableWrapper.propTypes = {
   additionalListeners: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string,
+    PropTypes.bool,
   ])),
   activeFilters: PropTypes.bool,
 };

data/webpack/components/Table/helpers.js

@@ -5,7 +5,7 @@ const onSelect = (rows, setRows) => (_event, isSelected, rowId) => {
     newRows = rows.map(row => ({ ...row, selected: isSelected }));
   } else {
     newRows = [...rows];
-    newRows[rowId].selected = isSelected;
+    newRows[rowId] = { ...newRows[rowId], selected: isSelected };
   }
 
   setRows(newRows);

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

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import EmptyPage from 'foremanReact/components/common/EmptyState/EmptyStatePattern';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const ContentTab = () => {
+  const [activeTab, setActiveTab] = useState('packages');
+  const handleTabClick = (event, tabIndex) => setActiveTab(tabIndex);
+  return (
+    <Tabs
+      isSecondary
+      activeKey={activeTab}
+      onSelect={handleTabClick}
+    >
+      <Tab eventKey="packages" title={<TabTitleText>{ __('Packages')}</TabTitleText>}>
+        <EmptyPage
+          icon="enterprise"
+          header="WIP Packages"
+          description="This is a demo for adding content to the new host details page"
+        />
+      </Tab>
+
+      <Tab eventKey="errata" title={<TabTitleText>{ __('Errata')}</TabTitleText>}>
+        <EmptyPage
+          icon="enterprise"
+          header="WIP Errata"
+          description="This is a demo for adding content to the new host details page"
+        />
+      </Tab>
+
+      <Tab eventKey="modulestreams" title={<TabTitleText>{ __('Module Streams')}</TabTitleText>}>
+        <EmptyPage
+          icon="enterprise"
+          header="WIP Module Streams"
+          description="This is a demo for module streams on new host details page"
+        />
+      </Tab>
+    </Tabs>
+  );
+};
+
+export default ContentTab;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import EmptyPage from 'foremanReact/components/common/EmptyState/EmptyStatePattern';
+
+const SubscriptionTab = () => (
+  <EmptyPage
+    icon="enterprise"
+    header="WIP Subscription"
+    description="This is a demo for adding content to the new host details page"
+  />
+);
+
+export default SubscriptionTab;

data/webpack/components/extensions/RegistrationCommands/__tests__/__snapshots__/ActivationKeys.test.js.snap

@@ -15,6 +15,8 @@ exports[`ActivationKeys renders 1`] = `
   validated="error"
 >
   <Select
+    aria-describedby=""
+    aria-invalid={false}
     aria-label=""
     aria-labelledby=""
     chipGroupComponent={null}
@@ -33,6 +35,7 @@ exports[`ActivationKeys renders 1`] = `
     isCreatable={false}
     isDisabled={true}
     isGrouped={false}
+    isInputValuePersisted={false}
     isOpen={false}
     isPlain={false}
     menuAppendTo="inline"
@@ -51,6 +54,7 @@ exports[`ActivationKeys renders 1`] = `
     toggleIcon={null}
     toggleId={null}
     typeAheadAriaLabel=""
+    validated="default"
     variant="typeaheadmulti"
     width=""
   />

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

@@ -40,7 +40,7 @@ const ActivationKeys = ({
   // Validate field when hostgroup is changed (host group may have some keys)
   useEffect(() => {
     handleInvalidField('Activation Keys', akHasValidValue(hostGroupId, pluginValues?.activationKeys, hostGroupActivationKeys));
-  }, [hostGroupId, hostGroupActivationKeys, pluginValues]);
+  }, [hostGroupId, hostGroupActivationKeys, pluginValues]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <FormGroup

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

@@ -18,7 +18,7 @@ const RegistrationCommands = ({
 }) => {
   useEffect(() => {
     onChange({ activationKeys: [], lifecycleEnvironmentId: '' });
-  }, [organizationId, hostGroupId]);
+  }, [organizationId, hostGroupId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <>
@@ -78,4 +78,3 @@ RegistrationCommands.defaultProps = {
 };
 
 export default RegistrationCommands;
-

data/webpack/components/pf3Table/formatters/selectionHeaderCellFormatter.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import TableSelectionHeaderCell from '../components/TableSelectionHeaderCell';
 
-export default (selectionController, label) => (
+export default (selectionController, label, selectionEnabled) => (
   <TableSelectionHeaderCell
     label={label}
     checked={selectionController.allRowsSelected()}
     onChange={() => selectionController.selectAllRows()}
+    disabled={!selectionEnabled}
   />
 );

data/webpack/fills_index.js

@@ -4,10 +4,13 @@ import { registerReducer } from 'foremanReact/common/MountingService';
 
 import SystemStatuses from './components/extensions/about';
 import RegistrationCommands from './components/extensions/RegistrationCommands';
-
+import ContentTab from './components/extensions/HostDetails/Tabs/ContentTab';
+import SubscriptionTab from './components/extensions/HostDetails/Tabs/SubscriptionTab';
 import extendReducer from './components/extensions/reducers';
 
 registerReducer('katelloExtends', extendReducer);
 
 addGlobalFill('aboutFooterSlot', '[katello]AboutSystemStatuses', <SystemStatuses key="katello-system-statuses" />, 100);
 addGlobalFill('registrationAdvanced', '[katello]RegistrationCommands', <RegistrationCommands key="katello-reg" />, 100);
+addGlobalFill('host-details-page-tabs', 'Content', <ContentTab key="content" />, 100);
+addGlobalFill('host-details-page-tabs', 'Subscription', <SubscriptionTab key="subscription" />, 100);

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

@@ -19,16 +19,14 @@ const recommendedRepositoriesRHEL = [
   'rhel-7-server-extras-rpms',
   'rhel-7-server-eus-rpms',
   'rhel-7-server-kickstart',
-  'rhel-6-server-rpms',
+  'rhel-6-server-els-rpms',
   'rhel-6-server-kickstart',
-  'rhel-5-server-els-rpms',
 ];
 
 const recommendedRepositoriesSatTools = [
   'satellite-tools-6.9-for-rhel-8-x86_64-rpms',
   'rhel-7-server-satellite-tools-6.9-rpms',
-  'rhel-6-server-satellite-tools-6.9-rpms',
-  'rhel-5-server-els-satellite-tools-6.9-rpms',
+  'rhel-6-server-els-satellite-tools-6.9-rpms',
   'rhel-7-server-satellite-maintenance-6-rpms',
 ];
 

data/webpack/redux/reducers/RedHatRepositories/enabled.js

@@ -1,6 +1,7 @@
 import Immutable from 'seamless-immutable';
 import { isEmpty } from 'lodash';
 
+
 import {
   ENABLED_REPOSITORIES_REQUEST,
   ENABLED_REPOSITORIES_SUCCESS,
@@ -82,7 +83,9 @@ export default (state = initialState, action) => {
           // server can return per_page: null when there's error in the search query,
           // don't store it in such case
           // eslint-disable-next-line camelcase
-          perPage: Number(per_page || state.pagination.perPage),
+          perPage: (per_page || state.pagination.perPage)
+          // eslint-disable-next-line camelcase
+            && Number(per_page || state.pagination.perPage),
         },
         itemCount: Number(subtotal),
         loading: false,

data/webpack/scenes/ContentViews/ContentViewsActions.js

@@ -1,8 +1,12 @@
 import { translate as __ } from 'foremanReact/common/I18n';
 import { API_OPERATIONS, get, post } from 'foremanReact/redux/API';
 import api, { orgId } from '../../services/api';
-import CONTENT_VIEWS_KEY, { CREATE_CONTENT_VIEW_KEY, COPY_CONTENT_VIEW_KEY } from './ContentViewsConstants';
+import CONTENT_VIEWS_KEY, {
+  CREATE_CONTENT_VIEW_KEY, COPY_CONTENT_VIEW_KEY,
+  cvVersionPublishKey,
+} from './ContentViewsConstants';
 import { getResponseErrorMsgs } from '../../utils/helpers';
+import { renderTaskStartedToast } from '../Tasks/helpers';
 
 export const createContentViewsParams = extraParams => ({
   organization_id: orgId(),
@@ -44,4 +48,15 @@ export const copyContentView = params => post({
   successToast: response => cvSuccessToast(response),
   errorToast: error => cvErrorToast(error),
 });
+
+export const publishContentView = params => post({
+  type: API_OPERATIONS.POST,
+  key: cvVersionPublishKey(params.id, params.versionCount),
+  url: api.getApiUrl(`/content_views/${params.id}/publish`),
+  params,
+  handleSuccess: response => renderTaskStartedToast(response.data),
+  errorToast: error => cvErrorToast(error),
+});
+
+
 export default getContentViews;

data/webpack/scenes/ContentViews/ContentViewsConstants.js

@@ -1,6 +1,12 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+
 const CONTENT_VIEWS_KEY = 'CONTENT_VIEWS';
 export const CREATE_CONTENT_VIEW_KEY = 'CONTENT_VIEW_CREATE';
 export const COPY_CONTENT_VIEW_KEY = 'CONTENT_VIEW_COPY';
+export const CREATE_CONTENT_VIEW_FILTER_KEY = 'CONTENT_VIEW_FILTER_CREATE';
+export const DELETE_CONTENT_VIEW_FILTER_KEY = 'CONTENT_VIEW_FILTER_DELETE';
+export const DELETE_CONTENT_VIEW_FILTERS_KEY = 'CONTENT_VIEW_FILTERS_DELETE';
+export const PUBLISH_CONTENT_VIEW_KEY = 'CONTENT_VIEW_PUBLISH';
 export const UPDATE_CONTENT_VIEW = 'UPDATE_CONTENT_VIEW';
 export const UPDATE_CONTENT_VIEW_SUCCESS = 'UPDATE_CONTENT_VIEW_SUCCESS';
 export const UPDATE_CONTENT_VIEW_FAILURE = 'UPDATE_CONTENT_VIEW_FAILURE';
@@ -14,6 +20,14 @@ export const cvDetailsHistoryKey = cvId => `${CONTENT_VIEWS_KEY}_HISTORIES_${cvI
 export const cvFilterRulesKey = filterId => `CONTENT_VIEW_FILTER_${filterId}_RULES`;
 export const cvDetailsComponentKey = cvId => `${CONTENT_VIEWS_KEY}_COMPONENTS_${cvId}`;
 export const cvDetailsVersionKey = cvId => `${CONTENT_VIEWS_KEY}_VERSIONS_${cvId}`;
+export const cvVersionPublishKey = (cvId, versionCount) => `${PUBLISH_CONTENT_VIEW_KEY}_${cvId}_VERSION_${versionCount}`;
+export const cvAddComponentKey = cvId => `${CONTENT_VIEWS_KEY}_ADD_COMPONENT_${cvId}`;
+export const cvRemoveComponentKey = cvId => `${CONTENT_VIEWS_KEY}_REMOVE_COMPONENT_${cvId}`;
+
+export const removeComponentSuccessMessage = size => (size === 1 ? __('Removed component from content view') : __('Removed components from content view'));
+
+export const addComponentSuccessMessage = component => (component ? __('Updated component details') : __('Added component to content view'));
+
 
 // Repo added to content view status display and key
 export const ADDED = 'Added';
@@ -21,5 +35,6 @@ export const NOT_ADDED = 'Not added';
 export const ALL_STATUSES = 'All';
 
 export const REPOSITORY_TYPES = 'REPOSITORY_TYPES';
+export const FILTER_TYPES = ['rpm', 'package_group', 'erratum', 'docker', 'modulemd'];
 
 export default CONTENT_VIEWS_KEY;

data/webpack/scenes/ContentViews/ContentViewsPage.js

@@ -1,29 +1,19 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { useSelector } from 'react-redux';
 import { Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
-import { selectContentViews,
-  selectContentViewStatus,
-  selectContentViewError } from './ContentViewSelectors';
 import ContentViewsTable from './Table/ContentViewsTable';
 
-const ContentViewsPage = () => {
-  const response = useSelector(selectContentViews);
-  const status = useSelector(selectContentViewStatus);
-  const error = useSelector(selectContentViewError);
-
-  return (
-    <Grid className="grid-with-margin">
-      <GridItem span={12}>
-        <TextContent>
-          <Text component={TextVariants.h1}>{__('Content Views')}</Text>
-        </TextContent>
-      </GridItem>
-      <GridItem span={12}>
-        <ContentViewsTable {...{ response, status, error }} />
-      </GridItem>
-    </Grid>
-  );
-};
+const ContentViewsPage = () => (
+  <Grid className="grid-with-margin">
+    <GridItem span={12}>
+      <TextContent>
+        <Text component={TextVariants.h1}>{__('Content Views')}</Text>
+      </TextContent>
+    </GridItem>
+    <GridItem span={12}>
+      <ContentViewsTable />
+    </GridItem>
+  </Grid>
+);
 
 export default ContentViewsPage;

data/webpack/scenes/ContentViews/Copy/CopyContentViewForm.js

@@ -1,5 +1,6 @@
 import { STATUS } from 'foremanReact/constants';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect } from 'react-router-dom';
@@ -19,7 +20,7 @@ const CopyContentViewForm = ({ cvId, setModalOpen }) => {
   const status = useSelector(selectCopyContentViewStatus);
   const error = useSelector(selectCopyContentViewError);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const { id } = response;
     if (id && status === STATUS.RESOLVED) {
       setSaving(false);
@@ -27,7 +28,7 @@ const CopyContentViewForm = ({ cvId, setModalOpen }) => {
     } else if (status === STATUS.ERROR) {
       setSaving(false);
     }
-  }, [JSON.stringify(response), status, error]);
+  }, [response, status, error]);
 
   const onSubmit = () => {
     setSaving(true);

data/webpack/scenes/ContentViews/Create/CreateContentViewForm.js

@@ -1,5 +1,7 @@
-import { STATUS } from 'foremanReact/constants';
 import React, { useState, useEffect } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { STATUS } from 'foremanReact/constants';
+import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { Redirect } from 'react-router-dom';
@@ -26,15 +28,15 @@ const CreateContentViewForm = ({ setModalOpen }) => {
   const status = useSelector(selectCreateContentViewStatus);
   const error = useSelector(selectCreateContentViewError);
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     const { id } = response;
-    if (id && status === STATUS.RESOLVED) {
+    if (id && status === STATUS.RESOLVED && saving) {
       setSaving(false);
       setRedirect(true);
     } else if (status === STATUS.ERROR) {
       setSaving(false);
     }
-  }, [JSON.stringify(response), status, error]);
+  }, [response, status, error, saving]);
 
   const onSave = () => {
     setSaving(true);
@@ -63,7 +65,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
 
   return (
     <Form>
-      <FormGroup label="Name" isRequired fieldId="name">
+      <FormGroup label={__('Name')} isRequired fieldId="name">
         <TextInput
           isRequired
           type="text"
@@ -74,7 +76,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
           onChange={value => setName(value)}
         />
       </FormGroup>
-      <FormGroup label="Label" isRequired fieldId="label">
+      <FormGroup label={__('Label')} isRequired fieldId="label">
         <TextInput
           isRequired
           type="text"
@@ -85,7 +87,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
           onChange={value => setLabel(value)}
         />
       </FormGroup>
-      <FormGroup label="Description" fieldId="description">
+      <FormGroup label={__('Description')} fieldId="description">
         <TextArea
           isRequired
           type="text"
@@ -96,7 +98,7 @@ const CreateContentViewForm = ({ setModalOpen }) => {
           onChange={value => setDescription(value)}
         />
       </FormGroup>
-      <FormGroup isInline fieldId="type" label="Type">
+      <FormGroup isInline fieldId="type" label={__('Type')}>
         <Grid hasGutter>
           <GridItem span={6}>
             <Tile
@@ -104,11 +106,11 @@ const CreateContentViewForm = ({ setModalOpen }) => {
               aria-label="component_tile"
               icon={<ContentViewIcon composite={false} />}
               id="component"
-              title="Component content view"
+              title={__('Component content view')}
               onClick={() => { setComponent(true); setComposite(false); }}
               isSelected={component}
             >
-              Single content view consisting of repositories
+              {__('Single content view consisting of repositories')}
             </Tile>
           </GridItem>
           <GridItem span={6}>
@@ -117,11 +119,11 @@ const CreateContentViewForm = ({ setModalOpen }) => {
               aria-label="composite_tile"
               icon={<ContentViewIcon composite />}
               id="composite"
-              title="Composite content view"
+              title={__('Composite content view')}
               onClick={() => { setComposite(true); setComponent(false); }}
               isSelected={composite}
             >
-              Consists of component content views
+              {__('Consisting of multiple component content views')}
             </Tile>
           </GridItem>
         </Grid>
@@ -157,8 +159,17 @@ const CreateContentViewForm = ({ setModalOpen }) => {
           />
         </FormGroup>}
       <ActionGroup>
-        <Button aria-label="create_content_view" variant="primary" isDisabled={saving} onClick={() => onSave()}>Create content view</Button>
-        <Button variant="link" onClick={() => setModalOpen(false)}>Cancel</Button>
+        <Button
+          aria-label="create_content_view"
+          variant="primary"
+          isDisabled={saving}
+          onClick={() => onSave()}
+        >
+          {__('Create content view')}
+        </Button>
+        <Button variant="link" onClick={() => setModalOpen(false)}>
+          {__('Cancel')}
+        </Button>
       </ActionGroup>
     </Form>
   );

data/webpack/scenes/ContentViews/Create/CreateContentViewModal.js

@@ -1,16 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { Modal, ModalVariant } from '@patternfly/react-core';
 import CreateContentViewForm from './CreateContentViewForm';
 
 const CreateContentViewModal = ({ show, setIsOpen }) => (
   <Modal
-    title="Create content view"
+    title={__('Create content view')}
     variant={ModalVariant.small}
     isOpen={show}
     onClose={() => { setIsOpen(false); }}
     appendTo={document.body}
-  ><CreateContentViewForm setModalOpen={setIsOpen} />
+  >
+    <CreateContentViewForm setModalOpen={setIsOpen} />
   </Modal>
 );