CONSOLE-4549: Remove and/or replace Bootstrap styles with PatternFly equivalents where possible (#14962)

* CONSOLE-4549: Remove and/or replace Bootstrap styles with PatternFly equivalents where possible

* Remove `text-capitalize` as it is orphaned

* Remove `.table` as it is no longer in use

* Replace `text-muted`, `text-secondary` with `pf-v6-u-text-color-subtle`

* Update `form-group` to use PatternFly values

* Update `help-block` to use PatternFly values

* Update `label` to use PatternFly values

* Update `list-group*` to use PatternFly values

* Update `checkbox`, `radio` to use PatternFly values

* Correct size of `small` to actually be smaller than default

* Remove `box-shadow`, `text-overflow` mixins

* Remove `container`, `container-fluid`

* Update `row`, `col-*` to use PatternFly values

* Remove orphaned variables

* Remove orphaned `control-label`

* Remove orphaned `help-text`

* run `yarn generate`

---------

Co-authored-by: logonoff <[email protected]>

Author: rhamilto

frontend/__tests__/components/graphs/graph-empty.spec.tsx

@@ -10,7 +10,7 @@ describe('<GraphEmpty />', () => {
 
   it('should render an empty state', () => {
     const wrapper = shallow(<GraphEmpty />);
-    expect(wrapper.find('.text-secondary').exists()).toBe(true);
+    expect(wrapper.find('.pf-v6-u-text-color-subtle').exists()).toBe(true);
     expect(wrapper.text()).toEqual('No datapoints found.');
   });
 });

frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx

@@ -210,7 +210,7 @@ const ClonePVCModal = withHandlePromise((props: ClonePVCModalProps) => {
           )}
         </FormGroup>
         <div className="co-clone-pvc-modal__details">
-          <p className="text-muted">{t('console-app~PVC details')}</p>
+          <p className="pf-v6-u-text-color-subtle">{t('console-app~PVC details')}</p>
           <div className="co-clone-pvc-modal__details-section">
             <div>
               <div>

frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx

@@ -231,7 +231,7 @@ const RestorePVCModal = withHandlePromise<RestorePVCModalProps>(
             )}
           </FormGroup>
           <div className="co-restore-pvc-modal__details-section">
-            <p className="text-muted">
+            <p className="pf-v6-u-text-color-subtle">
               {t('console-app~{{resourceKind}} details', {
                 resourceKind: VolumeSnapshotModel.label,
               })}

frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx

@@ -276,7 +276,7 @@ const CreateSnapshotForm = withHandlePromise<SnapshotResourceProps>((props) => {
             ) : (
               /* eslint-disable jsx-a11y/label-has-associated-control */
               <>
-                <label className="control-label co-required" html-for="claimName">
+                <label className="co-required" html-for="claimName">
                   {t('console-app~PersistentVolumeClaim')}
                 </label>
                 <PVCDropdown
@@ -292,7 +292,7 @@ const CreateSnapshotForm = withHandlePromise<SnapshotResourceProps>((props) => {
               </>
             )}
             <div className="form-group co-volume-snapshot__form">
-              <label className="control-label co-required" htmlFor="snapshot-name">
+              <label className="co-required" htmlFor="snapshot-name">
                 {t('console-app~Name')}
               </label>
               <span className="pf-v6-c-form-control">
@@ -308,7 +308,7 @@ const CreateSnapshotForm = withHandlePromise<SnapshotResourceProps>((props) => {
             </div>
             {pvcObj && (
               <div className="form-group co-volume-snapshot__form">
-                <label className="control-label co-required" htmlFor="snapshot-class">
+                <label className="co-required" htmlFor="snapshot-class">
                   {t('console-app~Snapshot Class')}
                 </label>
                 {vscErr || scObjListErr ? (

frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class.tsx

@@ -48,7 +48,9 @@ const Row: React.FC<RowProps<VolumeSnapshotClassKind>> = ({ obj }) => {
       <TableData {...tableColumnInfo[0]}>
         <ResourceLink name={name} kind={referenceForModel(VolumeSnapshotClassModel)}>
           {isDefaultSnapshotClass(obj) && (
-            <span className="small text-muted co-resource-item__help-text">&ndash; Default</span>
+            <span className="small pf-v6-u-text-color-subtle co-resource-item__help-text">
+              &ndash; Default
+            </span>
           )}
         </ResourceLink>
       </TableData>

frontend/packages/console-dynamic-plugin-sdk/README.md

@@ -193,6 +193,7 @@ This section documents notable changes in the Console provided shared modules ac
 - Removed `co-m-nav-title` spacing styling. Use
   [PatternFly PageSection](https://www.patternfly.org/components/page#pagesection) instead.
 - Removed `co-button-help-icon`, `co-inline`, `co-resource-list*`, `co-toolbar*` styling.
+- Removed Bootstrap `table`, `text-muted`, `text-secondary` styling.
 - Removed `co-m-pane__details` and `details-item` styling. Use
   [PatternFly DescriptionList](https://www.patternfly.org/components/description-list) instead.
 

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -1388,7 +1388,7 @@ Component that shows the status in a popup window. Can be used when building `co
     firstColumn={
       <>
         <span>{title}</span>
-        <span className="text-secondary">
+        <span className="pf-v6-u-text-color-subtle">
           My Example Item
         </span>
       </>

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -422,7 +422,7 @@ export {
  *     firstColumn={
  *       <>
  *         <span>{title}</span>
- *         <span className="text-secondary">
+ *         <span className="pf-v6-u-text-color-subtle">
  *           My Example Item
  *         </span>
  *       </>

frontend/packages/console-plugin-shared/src/components/OverviewPage/OverviewDetailItem.tsx

@@ -31,7 +31,7 @@ export const OverviewDetailItem: React.FC<OverviewDetailItemProps> = ({
   let status: React.ReactNode;
 
   if (error) {
-    status = <span className="text-secondary">{error}</span>;
+    status = <span className="pf-v6-u-text-color-subtle">{error}</span>;
   } else if (isLoading) {
     status = <div className="skeleton-text" />;
   } else {

frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogCategories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension';
-import * as cx from 'classnames';
 import * as _ from 'lodash';
 import { Link } from 'react-router-dom-v5-compat';
 import { isModifiedEvent } from '@console/shared/src/utils';
@@ -30,16 +29,13 @@ const CatalogCategories: React.FC<CatalogCategoriesProp> = ({
   ) => {
     if (!categorizedIds[category.id]) return null;
 
-    const { id, label, subcategories, numItems } = category;
+    const { id, label, subcategories } = category;
     const active = id === selectedCategory;
 
-    const tabClasses = cx('text-capitalize', { 'co-catalog-tab__empty': !numItems });
-
     return (
       <VerticalTabsTab
         key={id}
         active={active}
-        className={tabClasses}
         hasActiveDescendant={hasActiveDescendant(selectedCategory, category)}
         shown={toplevelCategory}
         data-test={`tab ${id}`}

frontend/packages/console-shared/src/components/dashboard/activity-card/ActivityBody.tsx

@@ -24,7 +24,7 @@ export const Activity: React.FC<ActivityProps> = ({ timestamp, children }) => {
   return (
     <div className="co-activity-item__ongoing" data-test="activity">
       {timestamp && (
-        <span className="text-secondary">
+        <span className="pf-v6-u-text-color-subtle">
           {t('console-shared~Started')}{' '}
           <span data-test="timestamp">
             <Timestamp simple timestamp={timestamp.toString()} />
@@ -95,7 +95,9 @@ export const RecentEventsBodyContent: React.FC<RecentEventsBodyContentProps> = (
   if (sortedEvents.length === 0) {
     return (
       <Activity>
-        <div className="text-secondary">{t('console-shared~There are no recent events.')}</div>
+        <div className="pf-v6-u-text-color-subtle">
+          {t('console-shared~There are no recent events.')}
+        </div>
       </Activity>
     );
   }
@@ -204,7 +206,9 @@ export const OngoingActivityBody: React.FC<OngoingActivityBodyProps> = ({
       allActivities
     ) : (
       <Activity>
-        <div className="text-secondary">{t('console-shared~There are no ongoing activities.')}</div>
+        <div className="pf-v6-u-text-color-subtle">
+          {t('console-shared~There are no ongoing activities.')}
+        </div>
       </Activity>
     );
   }

frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx

@@ -31,7 +31,7 @@ const EventItem: React.FC<EventItemProps> = React.memo(({ event, isExpanded, onT
         })}
       >
         <div className="co-recent-item__title">
-          <div className="co-recent-item__title-timestamp text-secondary">
+          <div className="co-recent-item__title-timestamp pf-v6-u-text-color-subtle">
             {lastTime ? (
               <span title={lastTime}>{timeFormatter.format(new Date(lastTime))}</span>
             ) : (

frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryCard.tsx

@@ -23,7 +23,7 @@ export const InventoryItemBody: React.FC<InventoryItemBodyProps> = ({ error, chi
   return (
     <div className="co-inventory-card__item-status">
       {error ? (
-        <div className="co-dashboard-text--small text-secondary">
+        <div className="co-dashboard-text--small pf-v6-u-text-color-subtle">
           {t('console-shared~Not available')}
         </div>
       ) : (

frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryItem.tsx

@@ -110,7 +110,9 @@ export const InventoryItem: React.FC<InventoryItemProps> = React.memo(
               {!expanded && (error || !isLoading) && (
                 <div className="co-inventory-card__item-status">
                   {error ? (
-                    <div className="text-secondary">{t('console-shared~Not available')}</div>
+                    <div className="pf-v6-u-text-color-subtle">
+                      {t('console-shared~Not available')}
+                    </div>
                   ) : (
                     children
                   )}

frontend/packages/console-shared/src/components/dashboard/resource-quota-card/ResourceQuotaBody.tsx

@@ -12,11 +12,15 @@ const ResourceQuotaBody: React.FC<ResourceQuotaBodyProps> = ({
   let body: React.ReactNode;
   const { t } = useTranslation();
   if (error) {
-    body = <div className="text-secondary">{t('console-shared~Not available')}</div>;
+    body = <div className="pf-v6-u-text-color-subtle">{t('console-shared~Not available')}</div>;
   } else if (isLoading) {
     body = <div className="skeleton-quota" />;
   } else if (!React.Children.count(children)) {
-    body = <div className="text-secondary">{noText || t('console-shared~No ResourceQuotas')}</div>;
+    body = (
+      <div className="pf-v6-u-text-color-subtle">
+        {noText || t('console-shared~No ResourceQuotas')}
+      </div>
+    );
   }
 
   return <>{body || children}</>;

frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx

@@ -50,7 +50,7 @@ export const StatusItem: React.FC<StatusItemProps> = ({
           {name && <span className="co-status-card__alert-item-header">{name}</span>}
           {timestamp && (
             <div
-              className="co-health-card__alert-item-timestamp co-status-card__health-item-text text-secondary"
+              className="co-health-card__alert-item-timestamp co-status-card__health-item-text pf-v6-u-text-color-subtle"
               data-test="timestamp"
             >
               <Timestamp simple timestamp={timestamp} />

frontend/packages/console-shared/src/components/dashboard/status-card/OperatorStatusBody.tsx

@@ -36,7 +36,7 @@ export const OperatorsSection: React.FC<OperatorsSectionProps> = ({
       firstColumn={
         <>
           <span>{title}</span>
-          <span className="text-secondary co-status__operator-detail">
+          <span className="pf-v6-u-text-color-subtle co-status__operator-detail">
             {' '}
             {t('console-shared~({{operatorStatusLength}} installed)', {
               operatorStatusLength: operatorStatuses.length,
@@ -47,7 +47,7 @@ export const OperatorsSection: React.FC<OperatorsSectionProps> = ({
       secondColumn={t('console-shared~Status')}
     >
       {error ? (
-        <div className="text-secondary">{t('console-shared~Not available')}</div>
+        <div className="pf-v6-u-text-color-subtle">{t('console-shared~Not available')}</div>
       ) : (
         !operatorsHealthy &&
         sortedOperatorStatuses.map((operatorStatus) => (

frontend/packages/console-shared/src/components/dashboard/status-card/StatusPopup.tsx

@@ -14,7 +14,7 @@ export const StatusPopupSection: React.FC<StatusPopupSectionProps> = ({
   <>
     <div className="co-status-popup__row">
       <div className="co-status-popup__text--bold">{firstColumn}</div>
-      {secondColumn && <div className="text-secondary">{secondColumn}</div>}
+      {secondColumn && <div className="pf-v6-u-text-color-subtle">{secondColumn}</div>}
     </div>
     {children}
   </>
@@ -25,7 +25,7 @@ const Status: React.FC<StatusPopupItemProps> = ({ value, icon, children }) => (
     {children}
     {(value || icon) && (
       <div className="co-status-popup__status">
-        {value && <div className="text-secondary">{value}</div>}
+        {value && <div className="pf-v6-u-text-color-subtle">{value}</div>}
         {icon && <div className="co-status-popup__icon">{icon}</div>}
       </div>
     )}

frontend/packages/console-shared/src/components/dashboard/utilization-card/TopConsumerPopover.tsx

@@ -202,7 +202,7 @@ export const PopoverBody = withDashboardResources<DashboardItemProps & PopoverBo
 
       let body: React.ReactNode;
       if (error || consumersLoadError) {
-        body = <div className="text-secondary">{t('console-shared~Not available')}</div>;
+        body = <div className="pf-v6-u-text-color-subtle">{t('console-shared~Not available')}</div>;
       } else if (!consumerLoaded || !data) {
         body = (
           <ul className="co-utilization-card-popover__consumer-list">

frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx

@@ -126,7 +126,7 @@ export const MultilineUtilizationItem: React.FC<MultilineUtilizationItemProps> =
               {title}
             </Title>
             {error || (!isLoading && !(data.length && data.every((datum) => datum.length))) ? (
-              <div className="text-secondary">{t('console-shared~Not available')}</div>
+              <div className="pf-v6-u-text-color-subtle">{t('console-shared~Not available')}</div>
             ) : (
               <div className="co-utilization-card__item-description">{currentValue}</div>
             )}
@@ -265,7 +265,7 @@ export const UtilizationItem: React.FC<UtilizationItemProps> = React.memo(
             </FlexItem>
             <FlexItem>
               {error || (!isLoading && !utilizationData?.length) ? (
-                <div className="text-secondary">{t('console-shared~Not available')}</div>
+                <div className="pf-v6-u-text-color-subtle">{t('console-shared~Not available')}</div>
               ) : (
                 <div>
                   {LimitIcon && <LimitIcon className="co-utilization-card__item-icon" />}

frontend/packages/console-shared/src/components/dropdown/ResourceDropdown.tsx

@@ -32,7 +32,7 @@ const DropdownItem: React.FC<DropdownItemProps> = ({ model, name, namespace }) =
     <span className="co-resource-item__resource-name">
       <span>{name}</span>
       {namespace && (
-        <div className="text-muted co-truncate co-nowrap small co-resource-item__resource-namespace">
+        <div className="pf-v6-u-text-color-subtle co-truncate co-nowrap small co-resource-item__resource-namespace">
           {namespace}
         </div>
       )}

frontend/packages/console-shared/src/components/dynamic-form/styles.scss

@@ -19,14 +19,24 @@
   --pf-v6-c-accordion__toggle--PaddingRight: 0.9375rem !important;
   --pf-v6-c-accordion__toggle--m-expanded--BorderLeftColor: none !important;
   --pf-v6-c-accordion__expanded-content-body--PaddingLeft: 0.9375rem !important;
-  --pf-v6-c-accordion__expanded-content--Color: var(--pf-t--global--text--color--regular) !important;
-  --pf-v6-c-accordion__toggle-text--active--Color: var(--pf-t--global--text--color--regular) !important;
+  --pf-v6-c-accordion__expanded-content--Color: var(
+    --pf-t--global--text--color--regular
+  ) !important;
+  --pf-v6-c-accordion__toggle-text--active--Color: var(
+    --pf-t--global--text--color--regular
+  ) !important;
   --pf-v6-c-accordion__toggle-text--active--FontWeight: 600 !important;
-  --pf-v6-c-accordion__toggle-text--expanded--Color: var(--pf-t--global--text--color--regular) !important;
+  --pf-v6-c-accordion__toggle-text--expanded--Color: var(
+    --pf-t--global--text--color--regular
+  ) !important;
   --pf-v6-c-accordion__toggle-text--expanded--FontWeight: 600 !important;
-  --pf-v6-c-accordion__toggle-text--focus--Color: var(--pf-t--global--text--color--regular) !important;
+  --pf-v6-c-accordion__toggle-text--focus--Color: var(
+    --pf-t--global--text--color--regular
+  ) !important;
   --pf-v6-c-accordion__toggle-text--focus--FontWeight: 600 !important;
-  --pf-v6-c-accordion__toggle-text--hover--Color: var(--pf-t--global--text--color--regular) !important;
+  --pf-v6-c-accordion__toggle-text--hover--Color: var(
+    --pf-t--global--text--color--regular
+  ) !important;
   --pf-v6-c-accordion__toggle-text--hover--FontWeight: 600 !important;
   margin-bottom: 0.5rem;
 
@@ -43,7 +53,7 @@
   }
 
   .help-block {
-    margin-bottom: 8px;
+    margin-bottom: var(--pf-t--global--spacer--sm);
     margin-top: 0;
   }
 }

frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx

@@ -181,7 +181,7 @@ export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
     >
       <form onSubmit={submit} name="form" className="modal-content">
         <div className="form-group">
-          <label htmlFor="input-name" className="control-label co-required">
+          <label htmlFor="input-name" className="co-required">
             {t('console-shared~Name')}
           </label>
           <FieldLevelHelp>
@@ -211,9 +211,7 @@ export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
           </div>
         </div>
         <div className="form-group">
-          <label htmlFor="tags-input" className="control-label">
-            {t('console-shared~Labels')}
-          </label>
+          <label htmlFor="tags-input">{t('console-shared~Labels')}</label>
           <div className="modal-body__field">
             <SelectorInput
               labelClassName="co-m-namespace"
@@ -223,9 +221,7 @@ export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
           </div>
         </div>
         <div className="form-group">
-          <label htmlFor="network-policy" className="control-label">
-            {t('console-shared~Default network policy')}
-          </label>
+          <label htmlFor="network-policy">{t('console-shared~Default network policy')}</label>
           <div className="modal-body__field ">
             <Select
               id="dropdown-selectbox"

frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx

@@ -143,7 +143,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
           </Content>
         )}
         <div className="form-group">
-          <label htmlFor="input-name" className="control-label co-required">
+          <label htmlFor="input-name" className="co-required">
             {t('console-shared~Name')}
           </label>{' '}
           <FieldLevelHelp>
@@ -173,9 +173,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
           </div>
         </div>
         <div className="form-group">
-          <label htmlFor="input-display-name" className="control-label">
-            {t('console-shared~Display name')}
-          </label>
+          <label htmlFor="input-display-name">{t('console-shared~Display name')}</label>
           <div className="modal-body__field">
             <span className="pf-v6-c-form-control">
               <input
@@ -189,9 +187,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
           </div>
         </div>
         <div className="form-group">
-          <label htmlFor="input-description" className="control-label">
-            {t('console-shared~Description')}
-          </label>
+          <label htmlFor="input-description">{t('console-shared~Description')}</label>
           <div className="modal-body__field">
             <span className="pf-v6-c-form-control pf-m-resize-vertical">
               <textarea