Merge pull request #1144 from SanjalKatiyar/css_classes_issue

remove 'co-*' classes supporting PF5 imports/variables
red-hat-storage · Dec 29, 2023 · 2a88524 · 2a88524
2 parents facdd8d + 5680506
commit 2a88524
Show file tree

Hide file tree

Showing 44 changed files with 263 additions and 134 deletions.
diff --git a/packages/client/src/components/dashboards/cards/activity-card.tsx b/packages/client/src/components/dashboards/cards/activity-card.tsx
@@ -26,8 +26,9 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { EventKind } from '@openshift-console/dynamic-plugin-sdk/lib/api/internal-types';
 import * as _ from 'lodash-es';
-import { Card, CardHeader, CardTitle } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import { CLIENT_OPERATOR } from '../../../constants';
+import '../../../../style.scss';
 import './activity-card.scss';
 
 const ClientOperatorUpgradeActivity: React.FC = () => {
@@ -115,14 +116,16 @@ export const ActivityCard: React.FC = React.memo(() => {
   const { t } = useCustomTranslation();
 
   return (
-    <Card className="co-overview-card--gradient">
+    <Card className="odf-overview-card--gradient">
       <CardHeader>
         <CardTitle>{t('Activity')}</CardTitle>
       </CardHeader>
-      <ActivityBody className="odf-client-activity-card__body">
-        <OngoingActivity />
-        <RecentEvent />
-      </ActivityBody>
+      <CardBody>
+        <ActivityBody className="odf-client-activity-card__body">
+          <OngoingActivity />
+          <RecentEvent />
+        </ActivityBody>
+      </CardBody>
     </Card>
   );
 });

diff --git a/packages/client/src/components/dashboards/cards/status-card.tsx b/packages/client/src/components/dashboards/cards/status-card.tsx
@@ -16,10 +16,12 @@ import {
   Gallery,
   Card,
   CardHeader,
+  CardBody,
   CardTitle,
 } from '@patternfly/react-core';
 import { StorageClientModel } from '../../../models';
 import { StorageClient } from '../../../types';
+import '../../../../style.scss';
 
 const clientResource: WatchK8sResource = {
   kind: referenceForModel(StorageClientModel),
@@ -65,22 +67,23 @@ export const StatusCard: React.FC = () => {
   const cephHealth = getStorageClientHealth(data?.[0], loaded, loadError);
 
   return (
-    <Card className="co-overview-card--gradient">
+    <Card className="odf-overview-card--gradient">
       <CardHeader>
         <CardTitle>{t('Status')}</CardTitle>
       </CardHeader>
-      <HealthBody>
-        {/** Remove usage of `co-` className */}
-        <Gallery className="co-overview-status__health" hasGutter>
-          <GalleryItem>
-            <HealthItem
-              title={t('Storage Client')}
-              state={cephHealth.state}
-              details={cephHealth.message}
-            />
-          </GalleryItem>
-        </Gallery>
-      </HealthBody>
+      <CardBody>
+        <HealthBody>
+          <Gallery className="odf-overview-status__health" hasGutter>
+            <GalleryItem>
+              <HealthItem
+                title={t('Storage Client')}
+                state={cephHealth.state}
+                details={cephHealth.message}
+              />
+            </GalleryItem>
+          </Gallery>
+        </HealthBody>
+      </CardBody>
     </Card>
   );
 };

diff --git a/packages/client/style.scss b/packages/client/style.scss
@@ -0,0 +1 @@
+@import '@odf/shared/style.scss';
diff --git a/packages/ocs/block-pool/body.tsx b/packages/ocs/block-pool/body.tsx
@@ -40,6 +40,7 @@ import {
   BlockPoolActionType,
   BlockPoolState,
 } from './reducer';
+import '../style.scss';
 import './body.scss';
 
 export const BlockPoolStatus: React.FC<BlockPoolStatusProps> = ({

diff --git a/packages/ocs/dashboards/object-service/activity-card/activity-card.tsx b/packages/ocs/dashboards/object-service/activity-card/activity-card.tsx
@@ -18,13 +18,14 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { EventKind } from '@openshift-console/dynamic-plugin-sdk-internal/lib/api/internal-types';
 import { useParams } from 'react-router-dom-v5-compat';
-import { Card, CardHeader, CardTitle } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import {
   dataResiliencyQueryMap,
   ObjectServiceDashboardQuery,
 } from '../../../queries';
 import { ODFSystemParams } from '../../../types';
 import { isObjectStorageEvent, decodeRGWPrefix } from '../../../utils';
+import '../../../style.scss';
 import './activity-card.scss';
 
 const eventsResource = { isList: true, kind: EventModel.kind };
@@ -124,14 +125,16 @@ const ActivityCard: React.FC = () => {
   const { systemFlags } = useODFSystemFlagsSelector();
 
   return (
-    <Card className="co-overview-card--gradient">
+    <Card className="odf-overview-card--gradient">
       <CardHeader>
         <CardTitle>{t('Activity')}</CardTitle>
       </CardHeader>
-      <ActivityBody className="nb-activity-card__body">
-        <OngoingActivity systemFlags={systemFlags} clusterNs={clusterNs} />
-        <RecentEvent systemFlags={systemFlags} clusterNs={clusterNs} />
-      </ActivityBody>
+      <CardBody>
+        <ActivityBody className="nb-activity-card__body">
+          <OngoingActivity systemFlags={systemFlags} clusterNs={clusterNs} />
+          <RecentEvent systemFlags={systemFlags} clusterNs={clusterNs} />
+        </ActivityBody>
+      </CardBody>
     </Card>
   );
 };

diff --git a/packages/ocs/dashboards/object-service/status-card/status-card.scss b/packages/ocs/dashboards/object-service/status-card/status-card.scss
diff --git a/packages/ocs/dashboards/object-service/status-card/status-card.tsx b/packages/ocs/dashboards/object-service/status-card/status-card.tsx
@@ -31,6 +31,7 @@ import {
   GalleryItem,
   Card,
   CardHeader,
+  CardBody,
   CardTitle,
 } from '@patternfly/react-core';
 import { StatusType } from '../../../constants';
@@ -44,7 +45,7 @@ import { ODFSystemParams } from '../../../types';
 import { decodeRGWPrefix } from '../../../utils';
 import { ObjectServiceStatus } from './object-service-health';
 import { getNooBaaState, getRGWHealthState } from './statuses';
-import './status-card.scss';
+import '../../../style.scss';
 
 const noobaaResource = {
   kind: referenceForModel(NooBaaSystemModel),
@@ -151,29 +152,31 @@ const StatusCard: React.FC<{}> = () => {
   );
 
   return (
-    <Card className="co-overview-card--gradient">
+    <Card className="odf-overview-card--gradient">
       <CardHeader>
         <CardTitle>{t('Status')}</CardTitle>
       </CardHeader>
-      <HealthBody>
-        <Gallery className="nb-status-card__health" hasGutter>
-          <GalleryItem>
-            <ObjectServiceStatus
-              RGWMetrics={isRGWSupported ? RGWState : undefined}
-              MCGMetrics={isMCGSupported ? MCGState : undefined}
-              statusType={StatusType.HEALTH}
-            />
-          </GalleryItem>
-          <GalleryItem>
-            <ObjectServiceStatus
-              RGWMetrics={isRGWSupported ? RGWResiliencyState : undefined}
-              MCGMetrics={isMCGSupported ? dataResiliencyState : undefined}
-              statusType={StatusType.RESILIENCY}
-            />
-          </GalleryItem>
-        </Gallery>
-      </HealthBody>
-      <ObjectStorageAlerts />
+      <CardBody>
+        <HealthBody>
+          <Gallery className="odf-overview-status__health" hasGutter>
+            <GalleryItem>
+              <ObjectServiceStatus
+                RGWMetrics={isRGWSupported ? RGWState : undefined}
+                MCGMetrics={isMCGSupported ? MCGState : undefined}
+                statusType={StatusType.HEALTH}
+              />
+            </GalleryItem>
+            <GalleryItem>
+              <ObjectServiceStatus
+                RGWMetrics={isRGWSupported ? RGWResiliencyState : undefined}
+                MCGMetrics={isMCGSupported ? dataResiliencyState : undefined}
+                statusType={StatusType.RESILIENCY}
+              />
+            </GalleryItem>
+          </Gallery>
+        </HealthBody>
+        <ObjectStorageAlerts />
+      </CardBody>
     </Card>
   );
 };

diff --git a/packages/ocs/dashboards/persistent-external/status-card.tsx b/packages/ocs/dashboards/persistent-external/status-card.tsx
@@ -15,9 +15,11 @@ import {
   Gallery,
   Card,
   CardHeader,
+  CardBody,
   CardTitle,
 } from '@patternfly/react-core';
 import { ODFSystemParams } from '../../types';
+import '../../style.scss';
 
 export const StatusCard: React.FC = () => {
   const { t } = useCustomTranslation();
@@ -38,21 +40,23 @@ export const StatusCard: React.FC = () => {
   );
 
   return (
-    <Card className="co-overview-card--gradient">
+    <Card className="odf-overview-card--gradient">
       <CardHeader>
         <CardTitle>{t('Status')}</CardTitle>
       </CardHeader>
-      <HealthBody>
-        <Gallery className="co-overview-status__health" hasGutter>
-          <GalleryItem>
-            <HealthItem
-              title={t('Storage Cluster')}
-              state={cephHealth.state}
-              details={cephHealth.message}
-            />
-          </GalleryItem>
-        </Gallery>
-      </HealthBody>
+      <CardBody>
+        <HealthBody>
+          <Gallery className="odf-overview-status__health" hasGutter>
+            <GalleryItem>
+              <HealthItem
+                title={t('Storage Cluster')}
+                state={cephHealth.state}
+                details={cephHealth.message}
+              />
+            </GalleryItem>
+          </Gallery>
+        </HealthBody>
+      </CardBody>
     </Card>
   );
 };

diff --git a/packages/ocs/dashboards/persistent-internal/activity-card/activity-card.tsx b/packages/ocs/dashboards/persistent-internal/activity-card/activity-card.tsx
@@ -29,7 +29,7 @@ import {
 import { EventKind } from '@openshift-console/dynamic-plugin-sdk/lib/api/internal-types';
 import * as _ from 'lodash-es';
 import { useParams } from 'react-router-dom-v5-compat';
-import { Card, CardHeader, CardTitle } from '@patternfly/react-core';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import { OCS_OPERATOR, PVC_PROVISIONER_ANNOTATION } from '../../../constants';
 import { StorageClusterModel } from '../../../models';
 import {
@@ -49,6 +49,7 @@ import {
   isSubscriptionUpgradeActivity,
   OCSUpgradeActivity,
 } from './ocs-upgrade-activity';
+import '../../../style.scss';
 import './activity-card.scss';
 
 export const getOCSSubscription = (
@@ -178,14 +179,16 @@ export const ActivityCard: React.FC = React.memo(() => {
   const { t } = useCustomTranslation();
 
   return (
-    <Card className="co-overview-card--gradient">
+    <Card className="odf-overview-card--gradient">
       <CardHeader>
         <CardTitle>{t('Activity')}</CardTitle>
       </CardHeader>
-      <ActivityBody className="ceph-activity-card__body">
-        <OngoingActivity />
-        <RecentEvent />
-      </ActivityBody>
+      <CardBody>
+        <ActivityBody className="ceph-activity-card__body">
+          <OngoingActivity />
+          <RecentEvent />
+        </ActivityBody>
+      </CardBody>
     </Card>
   );
 });

diff --git a/packages/ocs/dashboards/persistent-internal/status-card/status-card.tsx b/packages/ocs/dashboards/persistent-internal/status-card/status-card.tsx
@@ -33,6 +33,7 @@ import {
   FlexItem,
   Card,
   CardHeader,
+  CardBody,
   CardTitle,
 } from '@patternfly/react-core';
 import { CephClusterModel } from '../../../models';
@@ -41,6 +42,7 @@ import { ODFSystemParams } from '../../../types';
 import { OSDMigrationProgress } from './osd-migration/osd-migration-progress';
 import { getDataResiliencyState } from './utils';
 import { whitelistedHealthChecksRef } from './whitelisted-health-checks';
+import '../../../style.scss';
 import './healthchecks.scss';
 
 const resiliencyProgressQuery = (managedByOCS: string) =>
@@ -167,43 +169,45 @@ export const StatusCard: React.FC = () => {
   }
 
   return (
-    <Card className="co-overview-card--gradient">
+    <Card className="odf-overview-card--gradient">
       <CardHeader>
         <CardTitle>{t('Status')}</CardTitle>
       </CardHeader>
-      <HealthBody>
-        <Gallery className="co-overview-status__health" hasGutter>
-          <GalleryItem>
-            <HealthItem
-              title={t('Storage Cluster')}
-              state={cephHealthState.state}
-              details={cephHealthState.message}
-              popupTitle={healthChecks ? t('Active health checks') : null}
-            >
-              {healthChecks?.map((healthCheck: CephHealthCheckType, i) => (
-                <CephHealthCheck
-                  key={`${i}`}
-                  cephHealthState={cephHealthState}
-                  healthCheck={healthCheck}
-                />
-              ))}
-            </HealthItem>
-          </GalleryItem>
-          <GalleryItem>
-            <HealthItem
-              title={t('Data Resiliency')}
-              state={dataResiliencyState.state}
-              details={dataResiliencyState.message}
-            />
-          </GalleryItem>
-        </Gallery>
-      </HealthBody>
-      <OSDMigrationProgress
-        cephData={cephCluster}
-        dataLoaded={loaded}
-        dataLoadError={loadError}
-      />
-      <CephAlerts />
+      <CardBody>
+        <HealthBody>
+          <Gallery className="odf-overview-status__health" hasGutter>
+            <GalleryItem>
+              <HealthItem
+                title={t('Storage Cluster')}
+                state={cephHealthState.state}
+                details={cephHealthState.message}
+                popupTitle={healthChecks ? t('Active health checks') : null}
+              >
+                {healthChecks?.map((healthCheck: CephHealthCheckType, i) => (
+                  <CephHealthCheck
+                    key={`${i}`}
+                    cephHealthState={cephHealthState}
+                    healthCheck={healthCheck}
+                  />
+                ))}
+              </HealthItem>
+            </GalleryItem>
+            <GalleryItem>
+              <HealthItem
+                title={t('Data Resiliency')}
+                state={dataResiliencyState.state}
+                details={dataResiliencyState.message}
+              />
+            </GalleryItem>
+          </Gallery>
+        </HealthBody>
+        <OSDMigrationProgress
+          cephData={cephCluster}
+          dataLoaded={loaded}
+          dataLoadError={loadError}
+        />
+        <CephAlerts />
+      </CardBody>
     </Card>
   );
 };

diff --git a/packages/ocs/dashboards/persistent-internal/utilization-card/utilization-card.tsx b/packages/ocs/dashboards/persistent-internal/utilization-card/utilization-card.tsx
@@ -121,7 +121,7 @@ const UtilizationCard: React.FC = () => {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="co-utilization-card__title">
+        <CardTitle>
           {t('Utilization')}
           <FieldLevelHelp>
             {t(