katello 4.4.2.2 → 4.5.0.rc1

data/webpack/scenes/ContentViews/Details/ContentViewDetailSelectors.js

@@ -1,42 +1,43 @@
+import { STATUS } from 'foremanReact/constants';
 import {
-  selectAPIStatus,
   selectAPIError,
   selectAPIResponse,
+  selectAPIStatus,
 } from 'foremanReact/redux/API/APISelectors';
-import { STATUS } from 'foremanReact/constants';
+import { pollTaskKey } from '../../Tasks/helpers';
 import {
+  ACTIVATION_KEY_KEY,
+  ADD_CONTENT_VIEW_FILTER_RULE,
+  bulkRemoveVersionKey,
+  CREATE_CONTENT_VIEW_FILTER_KEY,
+  cvAddComponentKey,
+  cvDetailsComponentKey,
+  cvDetailsFiltersKey,
+  cvDetailsHistoryKey,
   cvDetailsKey,
   cvDetailsRepoKey,
-  cvDetailsFiltersKey,
+  cvDetailsVersionKey,
   cvFilterDetailsKey,
-  cvFilterPackageGroupsKey,
-  cvFilterModuleStreamKey,
   cvFilterErratumIDKey,
-  cvDetailsHistoryKey,
+  cvFilterModuleStreamKey,
+  cvFilterPackageGroupsKey,
+  cvFilterRepoKey,
   cvFilterRulesKey,
-  cvDetailsVersionKey,
-  REPOSITORY_TYPES,
-  cvDetailsComponentKey,
-  cvAddComponentKey,
   cvRemoveComponentKey,
-  CREATE_CONTENT_VIEW_FILTER_KEY,
-  ADD_CONTENT_VIEW_FILTER_RULE,
-  ACTIVATION_KEY_KEY,
-  HOSTS_KEY,
-  cvFilterRepoKey,
-  cvVersionDetailsKey,
   cvRemoveVersionKey,
-  RPM_PACKAGES_CONTENT,
-  RPM_PACKAGE_GROUPS_CONTENT,
-  REPOSITORY_CONTENT,
-  FILE_CONTENT,
-  ERRATA_CONTENT,
-  MODULE_STREAMS_CONTENT,
+  cvVersionDetailsKey,
   DEB_PACKAGES_CONTENT,
   DOCKER_TAGS_CONTENT,
+  ERRATA_CONTENT,
+  FILE_CONTENT,
   generatedContentKey,
+  HOSTS_KEY,
+  MODULE_STREAMS_CONTENT,
+  REPOSITORY_CONTENT,
+  REPOSITORY_TYPES,
+  RPM_PACKAGE_GROUPS_CONTENT,
+  RPM_PACKAGES_CONTENT,
 } from '../ContentViewsConstants';
-import { pollTaskKey } from '../../Tasks/helpers';
 
 export const selectCVDetails = (state, cvId) =>
   selectAPIResponse(state, cvDetailsKey(cvId)) || {};
@@ -212,12 +213,6 @@ export const selectCVVersionDetailsStatus = (state, versionId, cvId) =>
 export const selectCVVersionDetailsError = (state, versionId, cvId) =>
   selectAPIError(state, cvVersionDetailsKey(versionId, cvId));
 
-export const selectPublishTaskPoll = (state, cvVersionPublishKey) =>
-  selectAPIResponse(state, pollTaskKey(cvVersionPublishKey)) || {};
-
-export const selectPublishTaskPollStatus = (state, cvVersionPublishKey) =>
-  selectAPIStatus(state, pollTaskKey(cvVersionPublishKey)) || STATUS.PENDING;
-
 export const selectTaskPoll = (state, key) =>
   selectAPIResponse(state, pollTaskKey(key)) || {};
 
@@ -275,6 +270,15 @@ export const selectCVHosts = state =>
 export const selectCVHostsStatus = state =>
   selectAPIStatus(state, HOSTS_KEY) || STATUS.PENDING;
 
+export const selectBulkRemoveCVVersionResponse = (state, cvId) =>
+  selectAPIResponse(state, bulkRemoveVersionKey(cvId)) || {};
+
+export const selectBulkRemoveCVVersionStatus = (state, cvId) =>
+  selectAPIStatus(state, bulkRemoveVersionKey(cvId)) || STATUS.PENDING;
+
+export const selectBulkRemoveCVVersionError = (state, cvId) =>
+  selectAPIError(state, bulkRemoveVersionKey(cvId));
+
 export const selectRemoveCVVersionResponse = (state, versionId, versionEnvironments) =>
   selectAPIResponse(state, cvRemoveVersionKey(versionId, versionEnvironments)) || {};
 

data/webpack/scenes/ContentViews/Details/ContentViewDetails.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
+import React, { useState, useEffect } from 'react';
+import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import {
   Grid,
@@ -15,17 +15,20 @@ import {
   KebabToggle,
   DropdownPosition,
 } from '@patternfly/react-core';
+import { STATUS } from 'foremanReact/constants';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import DetailsContainer from './DetailsContainer';
+import { selectIsPollingTask, selectIsPollingTaskComplete } from '../../Tasks/TaskSelectors';
+import getContentViewDetails from './ContentViewDetailActions';
+import Loading from '../../../components/Loading';
 import ContentViewInfo from './ContentViewInfo';
 import ContentViewVersionsRoutes from './Versions';
 import ContentViewFilterRoutes from './Filters';
 import ContentViewRepositories from './Repositories/ContentViewRepositories';
 import ContentViewComponents from './ComponentContentViews/ContentViewComponents';
 import ContentViewHistories from './Histories/ContentViewHistories';
-import { selectCVDetails } from './ContentViewDetailSelectors';
+import { selectCVDetails, selectCVDetailStatus, selectCVDetailError } from './ContentViewDetailSelectors';
 import RoutedTabs from '../../../components/RoutedTabs';
 import ContentViewIcon from '../components/ContentViewIcon';
 import CVBreadCrumb from '../components/CVBreadCrumb';
@@ -33,16 +36,49 @@ import PublishContentViewWizard from '../Publish/PublishContentViewWizard';
 import { hasPermission } from '../helpers';
 import CopyContentViewModal from '../Copy/CopyContentViewModal';
 import ContentViewDeleteWizard from '../Delete/ContentViewDeleteWizard';
+import EmptyStateMessage from '../../../components/Table/EmptyStateMessage';
+import { cvVersionTaskPollingKey } from '../ContentViewsConstants';
+import { clearPollTaskData, stopPollingTask } from '../../Tasks/TaskActions';
 
 export default () => {
   const { id } = useParams();
   const cvId = Number(id);
+  const contentViewVersionTaskKey = cvVersionTaskPollingKey(cvId);
   const details = useSelector(state => selectCVDetails(state, cvId), shallowEqual);
   const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
-  const [currentStep, setCurrentStep] = useState(1);
   const [dropDownOpen, setDropdownOpen] = useState(false);
   const [copying, setCopying] = useState(false);
   const [deleting, setDeleting] = useState(false);
+  const dispatch = useDispatch();
+  const status = useSelector(state => selectCVDetailStatus(state, cvId), shallowEqual);
+  const error = useSelector(state => selectCVDetailError(state, cvId), shallowEqual);
+  const taskNeedsToBeStopped = useSelector(state =>
+    selectIsPollingTaskComplete(state, contentViewVersionTaskKey));
+  const isTaskRunning = useSelector(state =>
+    selectIsPollingTask(state, contentViewVersionTaskKey));
+
+  useEffect(() => {
+    if (taskNeedsToBeStopped) {
+      dispatch(stopPollingTask(contentViewVersionTaskKey));
+      dispatch(clearPollTaskData(contentViewVersionTaskKey));
+    }
+    return () => {
+      // This stops the polling task if you leave contentView/XXX route.
+      if (isTaskRunning && !taskNeedsToBeStopped) {
+        dispatch(stopPollingTask(contentViewVersionTaskKey));
+        dispatch(clearPollTaskData(contentViewVersionTaskKey));
+      }
+    };
+  }, [contentViewVersionTaskKey, dispatch, isTaskRunning, taskNeedsToBeStopped]);
+
+  useEffect(() => {
+    dispatch(getContentViewDetails(cvId));
+  }, [cvId, dispatch]);
+
+
+  if (status === STATUS.PENDING) return (<Loading />);
+  if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
+
   const dropDownItems = [
     <DropdownItem
       key="copy"
@@ -64,7 +100,9 @@ export default () => {
 
   const {
     name, composite, permissions, environments, versions,
+    generated_for: generatedFor, import_only: importOnly,
   } = details;
+  const generatedContentView = generatedFor !== 'none';
   const tabs = [
     {
       key: 'details',
@@ -85,6 +123,7 @@ export default () => {
       title: __('Repositories'),
       content: <ContentViewRepositories {...{ cvId, details }} />,
     },
+    !(importOnly || generatedContentView) &&
     {
       key: 'filters',
       title: __('Filters'),
@@ -97,90 +136,102 @@ export default () => {
     },
   ];
 
+
   return (
     <>
-      <DetailsContainer cvId={cvId}>
-        <Grid>
-          <Grid className="margin-16-24">
-            <CVBreadCrumb />
-            <GridItem md={8} sm={12}>
-              <Flex alignItems={{
-                default: 'alignItemsCenter',
-              }}
-              >
-                <FlexItem>
-                  <TextContent>
-                    <Text component={TextVariants.h1}>
-                      <ContentViewIcon count={name} composite={composite} />
-                    </Text>
-                  </TextContent>
-                </FlexItem>
-              </Flex>
-            </GridItem>
-            <GridItem md={4} sm={12} style={{ minWidth: '380px' }}>
-              <Flex justifyContent={{ lg: 'justifyContentFlexEnd', sm: 'justifyContentFlexStart' }}>
-                {hasPermission(permissions, 'publish_content_views') &&
-                  <FlexItem>
-                    <Button onClick={() => { setIsPublishModalOpen(true); }} variant="primary" aria-label="publish_content_view">
-                      {__('Publish new version')}
-                    </Button>
-                    {isPublishModalOpen && <PublishContentViewWizard
-                      details={details}
-                      show={isPublishModalOpen}
-                      setIsOpen={setIsPublishModalOpen}
-                      currentStep={currentStep}
-                      setCurrentStep={setCurrentStep}
-                      aria-label="publish_content_view_modal"
-                    />}
-                  </FlexItem>
-                }
+      <Grid>
+        <Grid className="margin-16-24">
+          <CVBreadCrumb />
+          <GridItem md={8} sm={12}>
+            <Flex alignItems={{
+              default: 'alignItemsCenter',
+            }}
+            >
+              <FlexItem>
+                <TextContent>
+                  <Text component={TextVariants.h1}>
+                    <ContentViewIcon count={name} composite={composite} />
+                  </Text>
+                </TextContent>
+              </FlexItem>
+            </Flex>
+          </GridItem>
+          <GridItem md={4} sm={12} style={{ minWidth: '380px' }}>
+            <Flex justifyContent={{ lg: 'justifyContentFlexEnd', sm: 'justifyContentFlexStart' }}>
+              {hasPermission(permissions, 'publish_content_views') &&
                 <FlexItem>
                   <Button
-                    component="a"
-                    aria-label="view tasks button"
-                    href={`/foreman_tasks/tasks?search=resource_type%3D+Katello%3A%3AContentView+resource_id%3D${cvId}`}
-                    target="_blank"
+                    ouiaId="cv-details-publish-button"
+                    isDisabled={importOnly || generatedContentView}
+                    onClick={() => setIsPublishModalOpen(true)}
                     variant="secondary"
+                    aria-label="publish_content_view"
                   >
-                    {'View tasks '}
-                    <ExternalLinkAltIcon />
+                    {__('Publish new version')}
                   </Button>
+                  {isPublishModalOpen &&
+                    <PublishContentViewWizard
+                      details={details}
+                      show={isPublishModalOpen}
+                      onClose={(step3) => {
+                        if (step3) dispatch(getContentViewDetails(cvId));
+                        setIsPublishModalOpen(false);
+                      }}
+                      aria-label="publish_content_view_modal"
+                    />}
                 </FlexItem>
-                <FlexItem>
-                  <Dropdown
-                    position={DropdownPosition.right}
-                    style={{ marginLeft: 'auto' }}
-                    toggle={<KebabToggle onToggle={setDropdownOpen} id="toggle-dropdown" />}
-                    isOpen={dropDownOpen}
-                    isPlain
-                    dropdownItems={dropDownItems}
-                  />
-                </FlexItem>
-              </Flex>
-            </GridItem>
-          </Grid>
-          <GridItem span={12}>
-            <RoutedTabs tabs={tabs} defaultTabIndex={1} />
+              }
+              <FlexItem>
+                <Button
+                  ouiaId="cv-details-view-tasks-button"
+                  component="a"
+                  aria-label="view tasks button"
+                  href={`/foreman_tasks/tasks?search=resource_type%3D+Katello%3A%3AContentView+resource_id%3D${cvId}`}
+                  target="_blank"
+                  variant="secondary"
+                >
+                  {__('View tasks ')}
+                  <ExternalLinkAltIcon />
+                </Button>
+              </FlexItem>
+              <FlexItem>
+                <Dropdown
+                  position={DropdownPosition.right}
+                  style={{ marginLeft: 'auto' }}
+                  toggle={<KebabToggle onToggle={setDropdownOpen} id="toggle-dropdown" />}
+                  isOpen={dropDownOpen}
+                  isPlain
+                  dropdownItems={dropDownItems}
+                />
+              </FlexItem>
+            </Flex>
           </GridItem>
         </Grid>
-      </DetailsContainer>
-      {copying && <CopyContentViewModal
-        cvId={cvId}
-        cvName={name}
-        show={copying}
-        setIsOpen={setCopying}
-        aria-label="copy_content_view_modal"
-      />}
-      {deleting && <ContentViewDeleteWizard
-        cvId={cvId && Number(cvId)}
-        cvEnvironments={environments}
-        cvVersions={versions}
-        show={deleting}
-        setIsOpen={setDeleting}
-        currentStep={currentStep}
-        setCurrentStep={setCurrentStep}
-        aria-label="delete_content_view_modal"
-      />}
+        <GridItem span={12}>
+          <RoutedTabs tabs={tabs} defaultTabIndex={1} />
+        </GridItem>
+      </Grid>
+      {
+        copying &&
+        <CopyContentViewModal
+          cvId={cvId}
+          cvName={name}
+          show={copying}
+          setIsOpen={setCopying}
+          aria-label="copy_content_view_modal"
+        />
+      }
+      {
+        deleting &&
+        <ContentViewDeleteWizard
+          cvId={cvId && Number(cvId)}
+          cvEnvironments={environments}
+          cvVersions={versions}
+          show={deleting}
+          setIsOpen={setDeleting}
+          aria-label="delete_content_view_modal"
+        />
+      }
     </>
   );
 };

data/webpack/scenes/ContentViews/Details/ContentViewInfo.js

@@ -19,7 +19,7 @@ import ContentViewIcon from '../components/ContentViewIcon';
 import ActionableDetail from '../../../components/ActionableDetail';
 import './contentViewInfo.scss';
 import { dependenciesHelpText, autoPublishHelpText, hasPermission } from '../helpers';
-import { LabelImportOnly } from '../Create/ContentViewFormComponents';
+import { LabelImportOnly, LabelGenerated } from '../Create/ContentViewFormComponents';
 
 const ContentViewInfo = ({ cvId, details }) => {
   const dispatch = useDispatch();
@@ -33,9 +33,10 @@ const ContentViewInfo = ({ cvId, details }) => {
     solve_dependencies: solveDependencies,
     auto_publish: autoPublish,
     import_only: importOnly,
+    generated_for: generatedFor,
     permissions,
   } = details;
-
+  const generatedContentView = generatedFor !== 'none';
   const onEdit = (val, attribute) => {
     if (val === details[attribute]) return;
     dispatch(updateContentView(cvId, { [attribute]: val }));
@@ -70,7 +71,7 @@ const ContentViewInfo = ({ cvId, details }) => {
         <TextListItem component={TextListItemVariants.dd} className="foreman-spaced-list">
           <Flex>
             <FlexItem spacer={{ default: 'spacerXs' }}>
-              <ContentViewIcon composite={composite} description={composite ? __('Composite') : __('Content view')} />
+              <ContentViewIcon composite={composite} description={composite ? __('Composite') : __('Component')} />
             </FlexItem>
           </Flex>
         </TextListItem>
@@ -122,6 +123,18 @@ const ContentViewInfo = ({ cvId, details }) => {
             disabled
           />
         </TextListItem>
+        <TextListItem component={TextListItemVariants.dt}>
+          {LabelGenerated()}
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd} className="foreman-spaced-list">
+          <Switch
+            id="generated_by_export_switch"
+            aria-label="generated_by_export_switch"
+            isChecked={generatedContentView}
+            className="foreman-spaced-list"
+            disabled
+          />
+        </TextListItem>
       </TextList>
     </TextContent>
   );
@@ -137,6 +150,7 @@ ContentViewInfo.propTypes = {
     solve_dependencies: PropTypes.bool,
     auto_publish: PropTypes.bool,
     import_only: PropTypes.bool,
+    generated_for: PropTypes.string,
     permissions: PropTypes.shape({}),
   }).isRequired,
 };

data/webpack/scenes/ContentViews/Details/Filters/Add/CVFilterAddModal.js

@@ -161,6 +161,7 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
         </FormGroup>
         <ActionGroup>
           <Button
+            ouiaId="create-filter-form-submit-button"
             aria-label="create_filter"
             variant="primary"
             isDisabled={saving || name.length === 0}
@@ -168,7 +169,7 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
           >
             {__('Create filter')}
           </Button>
-          <Button variant="link" onClick={onClose}>
+          <Button ouiaId="create-filter-form-cancel-button" variant="link" onClick={onClose}>
             {__('Cancel')}
           </Button>
         </ActionGroup>

data/webpack/scenes/ContentViews/Details/Filters/AffectedRepositories/AffectedRepositoryTable.js

@@ -200,6 +200,7 @@ const AffectedRepositoryTable = ({
         error,
         status,
       }}
+      ouiaId="content-view-filter-affected-repository-table"
       onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
       cells={columnHeaders}
       variant={TableVariant.compact}
@@ -222,7 +223,7 @@ const AffectedRepositoryTable = ({
               <SplitItem>
                 <ActionList>
                   <ActionListItem>
-                    <Button onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="primary" aria-label="add_repositories">
+                    <Button ouiaId="add-repositories" onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="primary" aria-label="add_repositories">
                       {__('Add repositories')}
                     </Button>
                   </ActionListItem>

data/webpack/scenes/ContentViews/Details/Filters/CVContainerImageFilterContent.js

@@ -65,6 +65,8 @@ const CVContainerImageFilterContent = ({
     __('Tag name'),
   ];
 
+  const repositoryIds = details.repository_ids;
+
   const bulkRemove = () => {
     setBulkActionOpen(false);
     const tagFilterIds =
@@ -129,6 +131,7 @@ const CVContainerImageFilterContent = ({
               updateSearchQuery,
               status,
             }}
+            ouiaId="content-view-container-image-filter"
             actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
             onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
             cells={columnHeaders}
@@ -140,6 +143,7 @@ const CVContainerImageFilterContent = ({
                 <Split hasGutter>
                   <SplitItem>
                     <Button
+                      ouiaId="add-content-view-container-image-filter-button"
                       onClick={() => setModalOpen(true)}
                       variant="primary"
                       aria-label="add_filter_rule"
@@ -163,7 +167,7 @@ const CVContainerImageFilterContent = ({
                 {modalOpen &&
                   <AddEditContainerTagRuleModal
                     {...{
-                      filterId, selectedFilterRuleData, onClose,
+                      filterId, selectedFilterRuleData, onClose, repositoryIds,
                     }}
                   />
                 }
@@ -189,6 +193,7 @@ CVContainerImageFilterContent.propTypes = {
   showAffectedRepos: PropTypes.bool,
   setShowAffectedRepos: PropTypes.func,
   details: PropTypes.shape({
+    repository_ids: PropTypes.arrayOf(PropTypes.number),
     permissions: PropTypes.shape({}),
   }).isRequired,
 };

data/webpack/scenes/ContentViews/Details/Filters/CVErrataDateFilterContent.js

@@ -7,6 +7,7 @@ import {
   Tooltip, Form, ActionGroup, Flex, FlexItem, Select,
   SelectOption, SelectVariant, ChipGroup, Chip,
   Tabs, Tab, TabTitleText, Button, DatePicker, Bullseye,
+  Divider, Text,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -53,6 +54,8 @@ const CVErrataDateFilterContent = ({
   const [selectedTypes, setSelectedTypes] = useState(types);
   const dispatch = useDispatch();
   const [activeTabKey, setActiveTabKey] = useState(0);
+  const [startEntry, setStartEntry] = useState(false);
+  const [endEntry, setEndEntry] = useState(false);
 
   const onSave = () => {
     dispatch(editCVFilterRule(
@@ -103,6 +106,7 @@ const CVErrataDateFilterContent = ({
   }, [showAffectedRepos, repositories.length]);
 
   const tabTitle = inclusion ? __('Included errata') : __('Excluded errata');
+  const invalidDateFormat = __('Enter a valid date: MM/DD/YYYY');
 
   return (
     <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
@@ -153,7 +157,7 @@ const CVErrataDateFilterContent = ({
                   </SelectOption>
                 </Select>
               </FlexItem>
-              <FlexItem span={1} spacer={{ default: 'spacerMd' }}>
+              <FlexItem span={1} spacer={{ default: 'spacerNone' }}>
                 {(selectedTypes.length === 1) &&
                   <Tooltip
                     position="top"
@@ -165,7 +169,8 @@ const CVErrataDateFilterContent = ({
                   </Tooltip>
                 }
               </FlexItem>
-              <FlexItem span={2} spacer={{ default: 'spacerMd' }}>
+              <Divider isVertical />
+              <FlexItem span={2} spacer={{ default: 'spacerNone' }}>
                 <Select
                   selections={dateType}
                   onSelect={(_event, selection) => {
@@ -179,49 +184,51 @@ const CVErrataDateFilterContent = ({
                   aria-label="date_type_selector"
                   isDisabled={!hasPermission(permissions, 'edit_content_views')}
                 >
-                  <SelectOption key="issued" value="issued">{__('Issued')}</SelectOption>
-                  <SelectOption key="updated" value="updated">{__('Updated')}</SelectOption>
+                  <SelectOption key="issued" value="issued">{__('Issued from')}</SelectOption>
+                  <SelectOption key="updated" value="updated">{__('Updated from')}</SelectOption>
                 </Select>
               </FlexItem>
-              <FlexItem span={2} spacer={{ default: 'spacerXs' }}>
-                <Bullseye>
+              <FlexItem span={2} spacer={{ default: 'spacerNone' }}>
+                <Bullseye
+                  onFocus={() => setStartEntry(true)}
+                  onBlur={() => setStartEntry(false)}
+                >
                   <DatePicker
                     aria-label="start_date_input"
                     value={startDate}
+                    invalidFormatText={invalidDateFormat}
                     dateFormat={dateFormat}
                     onChange={setStartDate}
                     dateParse={dateParse}
-                    placeholder="MM/DD/YYYY"
+                    placeholder={startEntry ? 'MM/DD/YYYY' : __('Start date')}
                     isDisabled={!hasPermission(permissions, 'edit_content_views')}
                   />
                 </Bullseye>
               </FlexItem>
+              <FlexItem spacer={{ default: 'spacerNone' }}>
+                <Bullseye style={{ padding: '0 5px' }}>
+                  <Text>{__('to')}</Text>
+                </Bullseye>
+              </FlexItem>
               <FlexItem span={2}>
-                <Bullseye>
+                <Bullseye
+                  onFocus={() => setEndEntry(true)}
+                  onBlur={() => setEndEntry(false)}
+                >
                   <DatePicker
                     aria-label="end_date_input"
                     value={endDate}
+                    invalidFormatText={invalidDateFormat}
                     dateFormat={dateFormat}
                     onChange={setEndDate}
                     dateParse={dateParse}
-                    placeholder="MM/DD/YYYY"
+                    placeholder={endEntry ? 'MM/DD/YYYY' : __('End date')}
                     isDisabled={!hasPermission(permissions, 'edit_content_views')}
                   />
                 </Bullseye>
               </FlexItem>
             </Flex>
             <Flex>
-              <FlexItem>
-                <ChipGroup categoryName={dateType === 'issued' ? __('Issued') : __('Updated')}>
-                  <Chip key="startDate" onClick={() => setStartDate('')} isReadOnly={!startDate || !hasPermission(permissions, 'edit_content_views')}>
-                    {startDate || __('ANY')}
-                  </Chip>
-                  -
-                  <Chip key="endDate" onClick={() => setEndDate('')} isReadOnly={!endDate || !hasPermission(permissions, 'edit_content_views')}>
-                    {endDate || __('ANY')}
-                  </Chip>
-                </ChipGroup>
-              </FlexItem>
               <FlexItem>
                 <ChipGroup categoryName={__('Type')}>
                   {selectedTypes.map(type => (
@@ -235,9 +242,21 @@ const CVErrataDateFilterContent = ({
                   ))}
                 </ChipGroup>
               </FlexItem>
+              <FlexItem>
+                <ChipGroup categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}>
+                  <Chip key="startDate" onClick={() => setStartDate('')} isReadOnly={!startDate || !hasPermission(permissions, 'edit_content_views')}>
+                    {startDate || __('ANY')}
+                  </Chip>
+                  {__('to')}
+                  <Chip key="endDate" onClick={() => setEndDate('')} isReadOnly={!endDate || !hasPermission(permissions, 'edit_content_views')}>
+                    {endDate || __('ANY')}
+                  </Chip>
+                </ChipGroup>
+              </FlexItem>
               {hasPermission(permissions, 'edit_content_views') &&
                 <FlexItem>
                   <Button
+                    ouiaId="errata-date-reset-filters-button"
                     isDisabled={saveDisabled}
                     variant="link"
                     onClick={resetFilters}
@@ -251,6 +270,7 @@ const CVErrataDateFilterContent = ({
             {hasPermission(permissions, 'edit_content_views') &&
               <ActionGroup>
                 <Button
+                  ouiaId="save-filter-rule-button"
                   aria-label="save_filter_rule"
                   variant="primary"
                   isDisabled={saveDisabled}
@@ -259,7 +279,7 @@ const CVErrataDateFilterContent = ({
                   {__('Edit rule')}
                 </Button>
                 <Link to={`/content_views/${cvId}#/filters`}>
-                  <Button variant="link">
+                  <Button ouiaId="cancel-save-filter-rule-button" variant="link">
                     {__('Cancel')}
                   </Button>
                 </Link>