Fixes #36762 - Update Katello CSS to not override Foreman (#10748)

webpack/components/Table/MainTable.scss

@@ -1,21 +1,22 @@
-.pf-c-dropdown.pf-m-align-right {
-  width: 100%;
-  justify-content: flex-end;
-  display: flex;
-}
+.katello-pf4-table {
+  .pf-c-dropdown.pf-m-align-right {
+    width: 100%;
+    justify-content: flex-end;
+    display: flex;
+  }
 
-.pf-c-dropdown__menu {
-  min-width: 0;
-}
+  .pf-c-dropdown__menu {
+    min-width: 0;
+  }
+  .pf-c-wizard__footer {
+    z-index: 1;
+  }
 
-.pf-c-wizard__footer {
-  z-index: 1;
-}
-
-.pf-c-table tbody tr td {
-  vertical-align: inherit;
-}
+  .pf-c-table tbody tr td {
+    vertical-align: inherit;
+  }
 
-input[type="checkbox"][disabled] {
-  cursor: initial;
+  input[type='checkbox'][disabled] {
+    cursor: initial;
+  }
 }

webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss

@@ -1,8 +1,10 @@
-.pf-c-empty-state {
-  margin-top: 0;
+#errata-card {
+  .pf-c-empty-state {
+    margin-top: 0;
+  }
+  .piechart-overflow {
+    margin-right: -20px;
+    position: relative;
+    left: -30px;
+  }
 }
-.piechart-overflow {
-  margin-right: -20px;
-  position: relative;
-  left: -30px;
-}

webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.js

@@ -53,7 +53,7 @@ const ActivationKeyDetails = ({ match }) => {
   };
 
   return (
-    <div >
+    <div id="ak-details-katello" >
       <Panel className="ak-details-header">
         <div className="breadcrumb-bar-pf4">
           <Breadcrumb ouiaId="ak-breadcrumbs" className="breadcrumb-display">

webpack/scenes/ActivationKeys/Details/ActivationKeyDetails.scss

@@ -1,37 +1,39 @@
-.ak-details-header {
-  margin: 0 24px 16px;
-  padding-top: 16px;
-}
+#ak-details-katello {
+  .ak-details-header {
+    margin: 0 24px 16px;
+    padding-top: 16px;
+  }
 
-.ak-details-description {
-  padding-top: 16px;
-}
+  .ak-details-description {
+    padding-top: 16px;
+  }
 
-.breadcrumb-bar-pf4 {
-  margin: 0 0 16px;
-}
+  .breadcrumb-bar-pf4 {
+    margin: 0 0 16px;
+  }
 
-.breadcrumb-display {
-  display: block;
-}
+  .breadcrumb-display {
+    display: block;
+  }
 
-.breadcrumb-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
+  .breadcrumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
 
-.ak-name-truncate {
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  display: inline-block;
-  margin-right: 16px
-}
+  .ak-name-truncate {
+    text-overflow: ellipsis;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    display: inline-block;
+    margin-right: 16px;
+  }
 
-.ak-name-wrapper {
-  display: inline-flex;
-  max-width: 60%;
-  margin-right: 8px;
-}
+  .ak-name-wrapper {
+    display: inline-flex;
+    max-width: 60%;
+    margin-right: 8px;
+  }
+}

webpack/scenes/ContentViews/Create/CreateContentViewForm.js

@@ -76,10 +76,12 @@ const CreateContentViewForm = ({ setModalOpen }) => {
   const submitDisabled = !name?.length || !label?.length || saving || redirect || labelValidated === 'error';
 
   return (
-    <Form onSubmit={(e) => {
-      e.preventDefault();
-      onSave();
-    }}
+    <Form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSave();
+      }}
+      id="create-content-view-form"
     >
       <FormGroup label={__('Name')} isRequired fieldId="name">
         <TextInput

webpack/scenes/ContentViews/Create/CreateContentViewForm.scss

@@ -1,7 +1,9 @@
-.pf-c-tile__title {
-  font-size: 16px;
-}
+#create-content-view-form {
+  .pf-c-tile__title {
+    font-size: 16px;
+  }
 
-.pf-c-tile__icon {
-  min-height: 38px;
-}
+  .pf-c-tile__icon {
+    min-height: 38px;
+  }
+}

webpack/scenes/ContentViews/Delete/ContentViewDeleteWizard.js

@@ -151,6 +151,7 @@ const ContentViewDeleteWizard =
             setIsOpen(false);
           }}
           isOpen={show}
+          id="content-view-delete-wizard"
         />
       </CVDeleteContext.Provider>
     );

webpack/scenes/ContentViews/Delete/Steps/CVEnvironmentSelectionForm.scss

@@ -1,4 +1,6 @@
-.pf-c-expandable-section__content {
+#content-view-delete-wizard {
+  .pf-c-expandable-section__content {
     margin-bottom: 1em;
     margin-top: 1em;
-}
+  }
+}

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

@@ -156,7 +156,7 @@ const ContentViewComponents = ({ cvId, details }) => {
                 <SplitItem>
                   <Button
                     ouiaId={`edit-component-version-${componentCvId}`}
-                    className="foreman-edit-icon"
+                    className="katello-edit-icon foreman-edit-icon"
                     aria-label="edit_version"
                     variant="plain"
                     onClick={() => {

webpack/scenes/ContentViews/Publish/PublishContentViewWizard.js

@@ -122,6 +122,7 @@ const PublishContentViewWizard = ({
         } else onClose();
       }}
       isOpen={show}
+      id="content-view-publish-wizard"
     />
   );
 };

webpack/scenes/ContentViews/Publish/cvPublishForm.scss

@@ -1,13 +1,15 @@
-.pf-c-switch {
-  --pf-c-switch__input--focus__toggle--OutlineWidth: 0;
-}
+#content-view-publish-wizard {
+  .pf-c-switch {
+    --pf-c-switch__input--focus__toggle--OutlineWidth: 0;
+  }
 
-.pf-c-wizard__main-body {
-  display: flex;
-  grid-gap: 16px;
-  flex-direction: column;
-}
+  .pf-c-wizard__main-body {
+    display: flex;
+    grid-gap: 16px;
+    flex-direction: column;
+  }
 
-.pf-c-content h4 {
-  margin-top: 0px;
-}
+  .pf-c-content h4 {
+    margin-top: 0px;
+  }
+}

webpack/scenes/Subscriptions/Details/SubscriptionDetails.js

@@ -58,7 +58,7 @@ class SubscriptionDetails extends Component {
     }
 
     return (
-      <div>
+      <div id="subscription-details">
         {!subscriptionDetails.loading &&
           <BreadcrumbsBar
             onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}

webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss

@@ -1,9 +1,11 @@
-.scrolld-list {
-  max-height: 400px;
-  overflow-y: auto; 
-}
+#subscription-details {
+  .scrolld-list {
+    max-height: 400px;
+    overflow-y: auto;
+  }
 
-.list-view-pf-expand {
-  max-height: 20px;
-  padding: 0;
+  .list-view-pf-expand {
+    max-height: 20px;
+    padding: 0;
+  }
 }

webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`subscriptions details page should render and contain appropiate components 1`] = `
-<div>
+<div
+  id="subscription-details"
+>
   <BreadcrumbsBar
     data={
       Object {

webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationForm.scss

@@ -1,3 +1,5 @@
-.pf-c-form__group.pf-m-action {
-  margin-top: 0px;
+#cdn-configuration {
+  .pf-c-form__group.pf-m-action {
+    margin-top: 0px;
+  }
 }

webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss

@@ -1,27 +1,46 @@
-.form-horizontal {
-  padding-left: 40px;
-  padding-right: 20px;
-}
+#manifest-history-tabs {
+  .form-horizontal {
+    padding-left: 40px;
+    padding-right: 20px;
+  }
 
-form .row {
-  margin-left: -15px;
-}
+  form .row {
+    margin-left: -15px;
+  }
 
-span.pficon.pficon-info {
-  margin: 0 5px 0 5px;
-}
+  span.pficon.pficon-info {
+    margin: 0 5px 0 5px;
+  }
 
-#simple-content-access {
-  padding-bottom: 40px;
+  #simple-content-access {
+    padding-bottom: 40px;
 
-  .sca-label {
-    float: left;
-    text-align: left;
+    .sca-label {
+      float: left;
+      text-align: left;
+    }
   }
-}
 
-.manifest-actions {
-  .spinner {
-    margin: 5px 15px 12px 5px;
+  .manifest-actions {
+    .spinner {
+      margin: 5px 15px 12px 5px;
+    }
+  }
+  .manifest-actions > * {
+    margin: 10px 5px 0 0 ;
+  }
+
+  #manifest-actions-row {
+    display: flex;
+    flex-direction: row;
+    & > * {
+      margin-right: 8px;
+    }
+  }
+
+  .modal-body {
+    overflow-y: auto;
+    overflow-x: hidden;
   }
+
 }

webpack/scenes/Subscriptions/Manifest/index.js

@@ -17,8 +17,6 @@ import { selectContentCredentials } from '../../ContentCredentials/ContentCreden
 
 import ManifestModal from './ManageManifestModal';
 
-import './Manifest.scss';
-
 // map state to props
 const mapStateToProps = state => ({
   organization: state.katello.organization,

webpack/scenes/Subscriptions/SubscriptionsPage.js

@@ -246,7 +246,7 @@ class SubscriptionsPage extends Component {
       />
     );
     return (
-      <Grid bsClass="container-fluid">
+      <Grid bsClass="container-fluid" id="subscriptions-page">
         <Row>
           <Col sm={12}>
             <Flex alignItems={{ default: 'alignItemsBaseline' }}>