katello 4.3.0.rc4 → 4.4.0.rc2

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ComponentContentViewBulkAddModal.js

@@ -1,9 +1,12 @@
 import React, { useState, useMemo } from 'react';
 import { last } from 'lodash';
 import PropTypes from 'prop-types';
-import { Modal, ModalVariant, FormSelect,
+import {
+  Flex, Modal, ModalVariant, FormSelect,
   FormSelectOption, Checkbox, Form, FormGroup,
-  ActionGroup, Button, Card, CardTitle, CardBody } from '@patternfly/react-core';
+  ActionGroup, Button, Card, CardTitle, CardBody, Tooltip,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { useDispatch } from 'react-redux';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { addComponent } from '../ContentViewDetailActions';
@@ -75,25 +78,35 @@ const ComponentContentViewBulkAddModal = ({ cvId, rowsToAdd, onClose }) => {
                   aria-label={`version-select-${componentCvName}`}
                 >
                   {versionSelectOptions[componentCvName].map((version, index) => (
-                  // eslint-disable-next-line react/no-array-index-key
+                    // eslint-disable-next-line react/no-array-index-key
                     <FormSelectOption aria-label={`${componentCvName}-${version.version}`} key={index} value={version.id} label={`${__('Version')} ${version.version}`} />
-                ))}
+                  ))}
                 </FormSelect>
               </FormGroup>
               <FormGroup style={{ marginTop: '1em' }}>
-                <Checkbox
-                  style={{ marginTop: 0 }}
-                  id={`latest-${componentCvName}`}
-                  name="latest"
-                  label={__('Always update to latest version')}
-                  isChecked={selectedComponentLatest[componentCvName]}
-                  onChange={checked =>
-                    setSelectedComponentLatest({
-                      ...selectedComponentLatest,
-                      ...{ [componentCvName]: checked },
-                    })
-                  }
-                />
+                <Flex style={{ display: 'inline-flex' }}>
+                  <Checkbox
+                    style={{ marginTop: 0 }}
+                    id={`latest-${componentCvName}`}
+                    name="latest"
+                    label={__('Always update to latest version')}
+                    isChecked={selectedComponentLatest[componentCvName]}
+                    onChange={checked =>
+                      setSelectedComponentLatest({
+                        ...selectedComponentLatest,
+                        ...{ [componentCvName]: checked },
+                      })
+                    }
+                  />
+                  <Tooltip
+                    position="top"
+                    content={
+                      __('This content view will be automatically updated to the latest version.')
+                    }
+                  >
+                    <OutlinedQuestionCircleIcon />
+                  </Tooltip>
+                </Flex>
               </FormGroup>
             </CardBody>
           </Card>
@@ -103,7 +116,7 @@ const ComponentContentViewBulkAddModal = ({ cvId, rowsToAdd, onClose }) => {
           <Button variant="link" onClick={onClose}>{__('Cancel')}</Button>
         </ActionGroup>
       </Form>
-    </Modal>);
+    </Modal >);
 };
 
 ComponentContentViewBulkAddModal.propTypes = {

data/webpack/scenes/ContentViews/Details/ComponentContentViews/ContentViewComponents.js

@@ -268,7 +268,7 @@ const ContentViewComponents = ({ cvId, details }) => {
               <SplitItem>
                 <ActionList>
                   <ActionListItem>
-                    <Button onClick={addBulk} isDisabled={!(bulkAddEnabled())} variant="secondary" aria-label="bulk_add_components">
+                    <Button onClick={addBulk} isDisabled={!(bulkAddEnabled())} variant="primary" aria-label="bulk_add_components">
                       {__('Add content views')}
                     </Button>
                   </ActionListItem>

data/webpack/scenes/ContentViews/Details/ComponentContentViews/__tests__/contentViewComponents.test.js

@@ -25,8 +25,8 @@ let autoSearchScope;
 beforeEach(() => {
   const { results } = cvComponentData;
   [firstComponent] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 });
 
 afterEach(() => {

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

@@ -1,6 +1,6 @@
 import { API_OPERATIONS, APIActions, get, put, post } from 'foremanReact/redux/API';
-import { addToast } from 'foremanReact/redux/actions/toasts';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { lowerCase } from 'lodash';
 import {
   RPM_PACKAGES_CONTENT,
   RPM_PACKAGE_GROUPS_CONTENT,
@@ -45,11 +45,11 @@ import {
   ERRATA_CONTENT,
   MODULE_STREAMS_CONTENT,
   DEB_PACKAGES_CONTENT,
-  ANSIBLE_COLLECTIONS_CONTENT,
   DOCKER_TAGS_CONTENT,
+  generatedContentKey,
 } from '../ContentViewsConstants';
 import api, { foremanApi, orgId } from '../../../services/api';
-import { getResponseErrorMsgs, apiError } from '../../../utils/helpers';
+import { getResponseErrorMsgs } from '../../../utils/helpers';
 import { renderTaskStartedToast } from '../../Tasks/helpers';
 import { cvErrorToast } from '../ContentViewsActions';
 
@@ -60,15 +60,13 @@ const getContentViewDetails = (cvId, extraParams = {}) => get({
   url: api.getApiUrl(`/content_views/${cvId}`),
 });
 
-const cvUpdateSuccess = (response, dispatch) => {
-  const { data: { id } } = response;
-  // Update CV info in redux with the updated CV info from API
-  dispatch(getContentViewDetails(id));
-  return dispatch(addToast({
-    type: 'success',
-    message: __(' Content view updated'),
-  }));
-};
+export const getContent = (pluralLabel, params) => get({
+  type: API_OPERATIONS.GET,
+  key: generatedContentKey(pluralLabel),
+  url: api.getApiUrl(`/${pluralLabel}`),
+  params,
+  errorToast: error => __(`Something went wrong while fetching ${lowerCase(pluralLabel)}! ${getResponseErrorMsgs(error.response)}`),
+});
 
 export const getRPMPackages = params => get({
   type: API_OPERATIONS.GET,
@@ -86,19 +84,21 @@ export const getFiles = params => get({
   errorToast: error => __(`Something went wrong while fetching files! ${getResponseErrorMsgs(error.response)}`),
 });
 
-export const updateContentView = (cvId, params) => dispatch => dispatch(put({
+export const updateContentView = (cvId, params, handleSuccess) => put({
   type: API_OPERATIONS.PUT,
   key: cvDetailsKey(cvId),
   url: api.getApiUrl(`/content_views/${cvId}`),
-  params,
-  handleSuccess: response => cvUpdateSuccess(response, dispatch),
-  handleError: error => dispatch(apiError(null, error)),
+  handleSuccess,
+  params: { include_permissions: true, ...params },
+  successToast: () => __(' Content view updated'),
+  errorToast: error => getResponseErrorMsgs(error.response),
+  updateData: (_prevState, respState) => respState,
   actionTypes: {
     REQUEST: UPDATE_CONTENT_VIEW,
     SUCCESS: UPDATE_CONTENT_VIEW_SUCCESS,
     FAILURE: UPDATE_CONTENT_VIEW_FAILURE,
   },
-}));
+});
 
 export const addComponent = params => put({
   type: API_OPERATIONS.PUT,
@@ -132,15 +132,7 @@ export const getDockerTags = params => get({
   key: DOCKER_TAGS_CONTENT,
   url: api.getApiUrl('/docker_tags'),
   params,
-  errorToast: error => __(`Something went wrong while getting docker tags! ${getResponseErrorMsgs(error.response)}`),
-});
-
-export const getAnsibleCollections = params => get({
-  type: API_OPERATIONS.GET,
-  key: ANSIBLE_COLLECTIONS_CONTENT,
-  url: api.getApiUrl('/ansible_collections'),
-  params,
-  errorToast: error => __(`Something went wrong while getting ansible collections! ${getResponseErrorMsgs(error.response)}`),
+  errorToast: error => __(`Something went wrong while getting container tags! ${getResponseErrorMsgs(error.response)}`),
 });
 
 export const getErrata = params => get({
@@ -176,7 +168,7 @@ export const getRepositories = params => get({
 });
 
 export const getContentViewRepositories = (cvId, params, status) => {
-  const apiParams = { ...params };
+  const apiParams = { organization_id: orgId(), ...params };
   let apiUrl = `/content_views/${cvId}/repositories`;
 
   if (status === ALL_STATUSES) {
@@ -205,12 +197,13 @@ export const getFilterRepositories = (cvId, filterId, params) => {
   });
 };
 
-export const editCVFilter = (filterId, params, handleSuccess) => put({
+export const editCVFilter = (filterId, params, handleSuccess, handleError) => put({
   type: API_OPERATIONS.PUT,
   key: EDIT_CONTENT_VIEW_FILTER,
   url: api.getApiUrl(`/content_view_filters/${filterId}`),
   params,
   handleSuccess,
+  handleError,
   successToast: () => __('Filter edited'),
   errorToast: error => __(`Something went wrong while editing the filter! ${getResponseErrorMsgs(error.response)}`),
 });
@@ -416,6 +409,7 @@ export const editContentViewVersionDetails = (versionId, cvId, params, handleSuc
     url: api.getApiUrl(`/content_view_versions/${versionId}`),
     params,
     handleSuccess,
+    successToast: () => __('Version details updated.'),
     errorToast: error => __(`Something went wrong while editing version details. ${getResponseErrorMsgs(error.response)}`),
   });
 

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

@@ -11,13 +11,13 @@ const initialState = Immutable({
 
 export default (state = initialState, action) => {
   switch (action.type) {
-    case UPDATE_CONTENT_VIEW:
-      return state.set('updating', true);
-    case UPDATE_CONTENT_VIEW_SUCCESS:
-      return state.merge({ updating: false });
-    case UPDATE_CONTENT_VIEW_FAILURE:
-      return state.set('updating', false);
-    default:
-      return state;
+  case UPDATE_CONTENT_VIEW:
+    return state.set('updating', true);
+  case UPDATE_CONTENT_VIEW_SUCCESS:
+    return state.merge({ updating: false });
+  case UPDATE_CONTENT_VIEW_FAILURE:
+    return state.set('updating', false);
+  default:
+    return state;
   }
 };

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

@@ -33,8 +33,8 @@ import {
   ERRATA_CONTENT,
   MODULE_STREAMS_CONTENT,
   DEB_PACKAGES_CONTENT,
-  ANSIBLE_COLLECTIONS_CONTENT,
   DOCKER_TAGS_CONTENT,
+  generatedContentKey,
 } from '../ContentViewsConstants';
 import { pollTaskKey } from '../../Tasks/helpers';
 
@@ -131,11 +131,11 @@ export const selectCVFilterRules = (state, filterId) =>
 export const selectCVFilterRulesStatus = (state, filterId) =>
   selectAPIStatus(state, cvFilterRulesKey(filterId)) || STATUS.PENDING;
 
-export const selectAnsibleCollections = state =>
-  selectAPIResponse(state, ANSIBLE_COLLECTIONS_CONTENT);
+export const selectContent = (pluralLabel, state) =>
+  selectAPIResponse(state, generatedContentKey(pluralLabel));
 
-export const selectAnsibleCollectionsStatus = state =>
-  selectAPIStatus(state, ANSIBLE_COLLECTIONS_CONTENT) || STATUS.PENDING;
+export const selectContentStatus = (pluralLabel, state) =>
+  selectAPIStatus(state, generatedContentKey(pluralLabel)) || STATUS.PENDING;
 
 export const selectDockerTags = state =>
   selectAPIResponse(state, DOCKER_TAGS_CONTENT);

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

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { Grid,
+import {
+  Grid,
   GridItem,
   TextContent,
   Text,
@@ -12,7 +13,8 @@ import { Grid,
   Dropdown,
   DropdownItem,
   KebabToggle,
-  DropdownPosition } from '@patternfly/react-core';
+  DropdownPosition,
+} from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 
@@ -76,7 +78,7 @@ export default () => {
     },
     ...composite ? [{
       key: 'contentviews',
-      title: __('Content Views'),
+      title: __('Content views'),
       content: <ContentViewComponents {...{ cvId, details }} />,
     }] : [{
       key: 'repositories',
@@ -97,14 +99,14 @@ export default () => {
 
   return (
     <>
-      <Grid className="grid-with-margin">
-        <DetailsContainer cvId={cvId}>
-          <>
+      <DetailsContainer cvId={cvId}>
+        <Grid>
+          <Grid className="margin-16-24">
             <CVBreadCrumb />
-            <GridItem xl={8} lg={7} sm={12} style={{ margin: '10px 0' }}>
+            <GridItem md={8} sm={12}>
               <Flex alignItems={{
-              default: 'alignItemsCenter',
-            }}
+                default: 'alignItemsCenter',
+              }}
               >
                 <FlexItem>
                   <TextContent>
@@ -115,23 +117,23 @@ export default () => {
                 </FlexItem>
               </Flex>
             </GridItem>
-            <GridItem xl={4} lg={5} sm={12} >
+            <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>
-              }
+                  <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>
+                }
                 <FlexItem>
                   <Button
                     component="a"
@@ -156,12 +158,12 @@ export default () => {
                 </FlexItem>
               </Flex>
             </GridItem>
-            <GridItem span={12}>
-              <RoutedTabs tabs={tabs} defaultTabIndex={1} />
-            </GridItem>
-          </ >
-        </DetailsContainer >
-      </Grid >
+          </Grid>
+          <GridItem span={12}>
+            <RoutedTabs tabs={tabs} defaultTabIndex={1} />
+          </GridItem>
+        </Grid>
+      </DetailsContainer>
       {copying && <CopyContentViewModal
         cvId={cvId}
         cvName={name}

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

@@ -15,7 +15,6 @@ import { translate as __ } from 'foremanReact/common/I18n';
 
 import { updateContentView } from './ContentViewDetailActions';
 import { selectIsCVUpdating } from './ContentViewDetailSelectors';
-import Loading from '../../../components/Loading';
 import ContentViewIcon from '../components/ContentViewIcon';
 import ActionableDetail from '../../../components/ActionableDetail';
 import './contentViewInfo.scss';
@@ -37,19 +36,19 @@ const ContentViewInfo = ({ cvId, details }) => {
     permissions,
   } = details;
 
-  if (updating) return <Loading size="sm" showText={false} />;
-
   const onEdit = (val, attribute) => {
     if (val === details[attribute]) return;
     dispatch(updateContentView(cvId, { [attribute]: val }));
   };
 
   return (
-    <TextContent>
+    <TextContent className="margin-0-24">
       <TextList component={TextListVariants.dl}>
         <ActionableDetail
+          key={name}
           label={__('Name')}
           attribute="name"
+          loading={updating && currentAttribute === 'name'}
           onEdit={onEdit}
           disabled={!hasPermission(permissions, 'edit_content_views')}
           value={name}
@@ -76,9 +75,11 @@ const ContentViewInfo = ({ cvId, details }) => {
           </Flex>
         </TextListItem>
         <ActionableDetail
+          key={description}
           textArea
           label={__('Description')}
           attribute="description"
+          loading={updating && currentAttribute === 'description'}
           onEdit={onEdit}
           disabled={!hasPermission(permissions, 'edit_content_views')}
           value={description}
@@ -86,8 +87,10 @@ const ContentViewInfo = ({ cvId, details }) => {
         />
         {composite ?
           (<ActionableDetail
+            key={autoPublish}
             label={__('Autopublish')}
             attribute="auto_publish"
+            loading={updating && currentAttribute === 'auto_publish'}
             value={autoPublish}
             onEdit={onEdit}
             disabled={!hasPermission(permissions, 'edit_content_views')}
@@ -98,6 +101,8 @@ const ContentViewInfo = ({ cvId, details }) => {
           (<ActionableDetail
             label={__('Solve dependencies')}
             attribute="solve_dependencies"
+            key={solveDependencies}
+            loading={updating && currentAttribute === 'solve_dependencies'}
             value={solveDependencies}
             onEdit={onEdit}
             disabled={!hasPermission(permissions, 'edit_content_views')}

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

@@ -1,39 +1,36 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import PropTypes from 'prop-types';
 import { STATUS } from 'foremanReact/constants';
-import EmptyStateMessage from '../../../components/Table/EmptyStateMessage';
+import PropTypes from 'prop-types';
+import {
+  shallowEqual,
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 import Loading from '../../../components/Loading';
+import EmptyStateMessage from '../../../components/Table/EmptyStateMessage';
 import getContentViewDetails from './ContentViewDetailActions';
-import { selectCVDetails,
+import {
+  selectCVDetailError,
   selectCVDetailStatus,
-  selectCVDetailError } from './ContentViewDetailSelectors';
+} from './ContentViewDetailSelectors';
 
-const DetailsContainer = ({ children, cvId, isOpen }) => {
+const DetailsContainer = ({ children, cvId }) => {
   const dispatch = useDispatch();
-  const details = useSelector(state => selectCVDetails(state, cvId), shallowEqual);
   const status = useSelector(state => selectCVDetailStatus(state, cvId), shallowEqual);
   const error = useSelector(state => selectCVDetailError(state, cvId), shallowEqual);
 
   useEffect(() => {
-    if (isOpen && Object.keys(details).length === 0) {
-      dispatch(getContentViewDetails(cvId));
-    }
-  });
+    dispatch(getContentViewDetails(cvId));
+  }, [cvId, dispatch]);
 
   if (status === STATUS.PENDING) return (<Loading />);
   if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
-  return (<React.Fragment>{children}</React.Fragment>);
+  return (<>{children}</>);
 };
 
 DetailsContainer.propTypes = {
   children: PropTypes.element.isRequired,
   cvId: PropTypes.number.isRequired,
-  isOpen: PropTypes.bool,
-};
-
-DetailsContainer.defaultProps = {
-  isOpen: true,
 };
 
 export default DetailsContainer;

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

@@ -153,6 +153,9 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
             name="description"
             aria-label="input_description"
             value={description}
+            resizeOrientation="vertical"
+            autoResize
+            style={{ maxHeight: '200px', minHeight: '36px' }}
             onChange={value => setDescription(value)}
           />
         </FormGroup>

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

@@ -222,7 +222,7 @@ const AffectedRepositoryTable = ({
               <SplitItem>
                 <ActionList>
                   <ActionListItem>
-                    <Button onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="secondary" aria-label="add_repositories">
+                    <Button onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="primary" aria-label="add_repositories">
                       {__('Add repositories')}
                     </Button>
                   </ActionListItem>

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

@@ -22,14 +22,14 @@ export const ArtifactsWithNoErrataRenderer = ({ filterDetails }) => {
   };
   const getLabel = () => {
     switch (true) {
-      case type === 'modulemd' && inclusion:
-        return __('Include all Module Streams with no errata.');
-      case type === 'modulemd' && !inclusion:
-        return __('Exclude all Module Streams with no errata.');
-      case !inclusion:
-        return __('Exclude all RPMs with no errata.');
-      default:
-        return __('Include all RPMs with no errata.');
+    case type === 'modulemd' && inclusion:
+      return __('Include all Module Streams with no errata.');
+    case type === 'modulemd' && !inclusion:
+      return __('Exclude all Module Streams with no errata.');
+    case !inclusion:
+      return __('Exclude all RPMs with no errata.');
+    default:
+      return __('Include all RPMs with no errata.');
     }
   };
 

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

@@ -114,9 +114,9 @@ const CVContainerImageFilterContent = ({
   ];
 
   return (
-    <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
       <Tab eventKey={0} title={<TabTitleText>{__('Tags')}</TabTitleText>}>
-        <div className="tab-body-with-spacing">
+        <div className="margin-24-0">
           <TableWrapper
             {...{
               rows,
@@ -141,7 +141,7 @@ const CVContainerImageFilterContent = ({
                   <SplitItem>
                     <Button
                       onClick={() => setModalOpen(true)}
-                      variant="secondary"
+                      variant="primary"
                       aria-label="add_filter_rule"
                     >
                       {__('Add filter rule')}
@@ -174,7 +174,7 @@ const CVContainerImageFilterContent = ({
       </Tab>
       {(repositories.length || showAffectedRepos) &&
         <Tab eventKey={1} title={<TabTitleText>{__('Affected repositories')}</TabTitleText>}>
-          <div className="tab-body-with-spacing">
+          <div className="margin-24-0">
             <AffectedRepositoryTable cvId={cvId} filterId={filterId} repoType="docker" setShowAffectedRepos={setShowAffectedRepos} details={details} />
           </div>
         </Tab>

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

@@ -105,9 +105,9 @@ const CVErrataDateFilterContent = ({
   const tabTitle = inclusion ? __('Included errata') : __('Excluded errata');
 
   return (
-    <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
       <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
-        <div className="tab-body-with-spacing">
+        <div className="margin-24">
           <Form onSubmit={(e) => {
             e.preventDefault();
             onSave();
@@ -153,7 +153,7 @@ const CVErrataDateFilterContent = ({
                   </SelectOption>
                 </Select>
               </FlexItem>
-              <FlexItem span={1} spacer={{ default: 'spacer3xl' }}>
+              <FlexItem span={1} spacer={{ default: 'spacerMd' }}>
                 {(selectedTypes.length === 1) &&
                   <Tooltip
                     position="top"
@@ -238,7 +238,7 @@ const CVErrataDateFilterContent = ({
               {hasPermission(permissions, 'edit_content_views') &&
                 <FlexItem>
                   <Button
-                    disabled={saveDisabled}
+                    isDisabled={saveDisabled}
                     variant="link"
                     onClick={resetFilters}
                     isInline
@@ -252,7 +252,7 @@ const CVErrataDateFilterContent = ({
               <ActionGroup>
                 <Button
                   aria-label="save_filter_rule"
-                  variant="secondary"
+                  variant="primary"
                   isDisabled={saveDisabled}
                   type="submit"
                 >
@@ -270,7 +270,7 @@ const CVErrataDateFilterContent = ({
       </Tab>
       {(repositories.length || showAffectedRepos) &&
         <Tab eventKey={1} title={<TabTitleText>{__('Affected repositories')}</TabTitleText>}>
-          <div className="tab-body-with-spacing">
+          <div className="margin-24-0">
             <AffectedRepositoryTable cvId={cvId} filterId={filterId} repoType="yum" setShowAffectedRepos={setShowAffectedRepos} details={details} />
           </div>
         </Tab>}