Skip to content

Commit

Permalink
Merge pull request #1265 from SanjalKatiyar/fix_pf5_styling
Browse files Browse the repository at this point in the history
Fix styling issue due to PF5 upgrade
  • Loading branch information
openshift-merge-bot[bot] authored Mar 25, 2024
2 parents 36e6be2 + 7e74c78 commit 241a027
Show file tree
Hide file tree
Showing 82 changed files with 377 additions and 353 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.mco-create-data-policy {
margin: var(--pf-v5-global--spacer--lg);
max-width: 700px;
.pf-c-form.pf-m-limit-width {
.pf-v5-c-form.pf-m-limit-width {
max-width: 33rem;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.mco-configuration-step {
&__radio {
border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
border-radius: 10px;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.mco-namespace-selection {
&__border {
border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
}
&__table {
overflow-y: auto;
Expand Down
2 changes: 1 addition & 1 deletion packages/mco/components/drpolicy-list-page/helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const tableColumnInfo = [
className: classNames('pf-m-hidden', 'pf-m-visible-on-lg'),
id: 'applications',
},
{ className: 'dropdown-kebab-pf pf-c-table__action', id: '' },
{ className: 'dropdown-kebab-pf pf-v5-c-table__action', id: '' },
];

export const kebabActionItems = (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ $mco-icon-and-text-icon-lg: 1.2rem;
overflow-x: hidden;
overflow-y: auto;

.pf-c-empty-state {
--pf-c-empty-state__icon--MarginBottom: 0 !important;
.pf-v5-c-empty-state {
--pf-v5-c-empty-state__icon--MarginBottom: 0 !important;
}
}

.mco-status-card__alert-item {
display: flex;
padding-bottom: 0.5rem;
padding-left: var(--pf-c-card--child--PaddingLeft);
padding-right: var(--pf-c-card--child--PaddingRight);
padding-left: var(--pf-v5-c-card--child--PaddingLeft);
padding-right: var(--pf-v5-c-card--child--PaddingRight);
}

.mco-status-card__alert-item-icon {
Expand Down
2 changes: 1 addition & 1 deletion packages/mco/components/mco-dashboard/mco-dashboard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.mco-dashboard {
&__title {
font-weight: var(--pf-c-card__title--FontWeight);
font-weight: var(--pf-v5-c-card__title--FontWeight);
margin-bottom: var(--pf-v5-global--spacer--xs);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -131,22 +131,22 @@ const metricsSort = (
const headerColumns = (t: TFunction) => [
{
columnName: t('plugin__odf-console~Name'),
className: 'pf-u-w-25',
className: 'pf-v5-u-w-25',
sortFunction: systemNameSort,
},
{
columnName: t('plugin__odf-console~Cluster name'),
className: 'pf-u-w-20',
className: 'pf-v5-u-w-20',
sortFunction: clusterNameSort,
},
{
columnName: t('plugin__odf-console~Used Capacity %'),
className: 'pf-u-w-25',
className: 'pf-v5-u-w-25',
sortFunction: metricsSort,
},
{
columnName: t('plugin__odf-console~Used / Total'),
className: 'pf-u-w-30',
className: 'pf-v5-u-w-30',
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export const TargetClusterSelector: React.FC<TargetClusterSelectorProps> = ({
{t('Last available: ')}
<DateTimeFormat
dateTime={state.selectedTargetCluster?.lastAvailableTime}
className="pf-u-display-inline-block pf-u-ml-sm"
className="pf-v5-u-display-inline-block pf-v5-u-ml-sm"
/>
</HelperTextItem>
</HelperText>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,39 +35,39 @@ const ManagedApplicationsModal: React.FC<CommonModalProps> = (props) => {
aria-label={headerText}
>
<ModalBody>
<p className="co-break-word pf-u-mb-md">
<p className="co-break-word pf-v5-u-mb-md">
{t(
'Follow the below steps to enroll your managed applications to disaster recovery:'
)}
</p>
<Trans t={t}>
<p className="co-break-word pf-u-mb-md">
<span className="pf-u-mr-sm">
<p className="co-break-word pf-v5-u-mb-md">
<span className="pf-v5-u-mr-sm">
<StepsCountBadge stepCount={1} />
</span>{' '}
Navigate to{' '}
<span className="pf-u-font-weight-bold">Applications</span> section
and locate your application.
<span className="pf-v5-u-font-weight-bold">Applications</span>{' '}
section and locate your application.
</p>

<p className="co-break-word pf-u-mb-md">
<span className="pf-u-mr-sm">
<p className="co-break-word pf-v5-u-mb-md">
<span className="pf-v5-u-mr-sm">
<StepsCountBadge stepCount={2} />
</span>{' '}
Select{' '}
<span className="pf-u-font-weight-bold">
<span className="pf-v5-u-font-weight-bold">
Manage disaster recovery
</span>{' '}
from inline actions.
</p>

<p className="co-break-word">
<span className="pf-u-mr-sm">
<span className="pf-v5-u-mr-sm">
<StepsCountBadge stepCount={3} />
</span>{' '}
In the Manage disaster recovery modal, click on{' '}
<span className="pf-u-font-weight-bold">Enroll application</span> to
start the wizard process.
<span className="pf-v5-u-font-weight-bold">Enroll application</span>{' '}
to start the wizard process.
</p>
</Trans>
</ModalBody>
Expand All @@ -82,7 +82,7 @@ const ManagedApplicationsModal: React.FC<CommonModalProps> = (props) => {
>
{t('Continue to Applications page')}
<Icon size="sm">
<ArrowRightIcon className="pf-u-ml-sm" />
<ArrowRightIcon className="pf-v5-u-ml-sm" />
</Icon>
</Button>
</ModalFooter>
Expand Down
10 changes: 6 additions & 4 deletions packages/mco/components/protected-applications/list-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,9 @@ const ProtectedAppsTableRow: React.FC<
<Icon size="sm">
<CubeIcon color={blackIconColor.value} />
</Icon>
<span className="pf-u-pl-sm">{enrolledNamespaces.length}</span>
<span className="pf-v5-u-pl-sm">
{enrolledNamespaces.length}
</span>
</div>
}
tooltipContent={t('View namespaces')}
Expand All @@ -162,7 +164,7 @@ const ProtectedAppsTableRow: React.FC<
<Icon size="sm">
<InProgressIcon color={blackIconColor.value} />
</Icon>
<span className="pf-u-pl-sm">{eventsCount}</span>
<span className="pf-v5-u-pl-sm">{eventsCount}</span>
</div>
}
tooltipContent={t('View activity')}
Expand All @@ -171,7 +173,7 @@ const ProtectedAppsTableRow: React.FC<
className={classNames({
'mco-protected-applications__expanded':
expandableComponentType === EXPANDABLE_COMPONENT_TYPE.EVENTS,
'pf-u-pl-lg': true,
'pf-v5-u-pl-lg': true,
})}
/>
)}
Expand All @@ -181,7 +183,7 @@ const ProtectedAppsTableRow: React.FC<
title={
<div>
{icon}
<span className="pf-u-pl-sm">{title}</span>
<span className="pf-v5-u-pl-sm">{title}</span>
</div>
}
tooltipContent={t('See detailed information')}
Expand Down
6 changes: 3 additions & 3 deletions packages/ocs/block-pool/BlockPoolListPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,12 @@ import {
import { PopoverHelper } from './popover-helper';

const tableColumnInfo = [
{ className: 'pf-u-w-16-on-2xl', id: 'name' },
{ className: 'pf-v5-u-w-16-on-2xl', id: 'name' },
{
className: classNames(
'pf-m-hidden',
'pf-m-visible-on-md',
'pf-u-w-8-on-2xl'
'pf-v5-u-w-8-on-2xl'
),
id: 'status',
},
Expand All @@ -69,7 +69,7 @@ const tableColumnInfo = [
className: classNames(
'pf-m-hidden',
'pf-m-visible-on-lg',
'pf-u-w-8-on-2xl'
'pf-v5-u-w-8-on-2xl'
),
id: 'replicas',
},
Expand Down
4 changes: 2 additions & 2 deletions packages/ocs/block-pool/body.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
}

.ceph-block-pool__switch {
--pf-c-switch--FontSize: var(--pf-v5-global--FontSize--xs) !important;
--pf-c-switch__input--focus__toggle--OutlineWidth: 0 !important; // To disable the switch focus border
--pf-v5-c-switch--FontSize: var(--pf-v5-global--FontSize--xs) !important;
--pf-v5-c-switch__input--focus__toggle--OutlineWidth: 0 !important; // To disable the switch focus border
}

.ceph-block-pool__error-icon {
Expand Down
2 changes: 1 addition & 1 deletion packages/ocs/block-pool/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const BlockPoolFooter = (props: BlockPoolFooterProps) => {

return (
<ButtonBar errorMessage={state.errorMessage} inProgress={state.inProgress}>
<ActionGroup className="pf-c-form pf-c-form__actions--left">
<ActionGroup className="pf-v5-c-form pf-v5-c-form__actions--left">
<Button
type="button"
variant="primary"
Expand Down
1 change: 1 addition & 0 deletions packages/ocs/dashboards/block-pool/mirroring-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ export const MirroringCard: React.FC = () => {
<StatusIconAndText
title={mirroringImageHealth}
icon={healthStateMapping[mirroringImageHealth]?.icon}
className="pf-v5-u-ml-xs"
/>
</MirroringCardItem>
{!_.isEmpty(obj.status?.mirroringStatus?.summary?.states) && (
Expand Down
2 changes: 1 addition & 1 deletion packages/ocs/dashboards/block-pool/utilization-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const UtilizationCard: React.FC = () => {
>
<CardTitle>{t('Performance')}</CardTitle>
</CardHeader>
<Grid className="odf-block-pool-utilization-card-body">
<Grid className="odf-block-pool-utilization-card-body pf-v5-u-ml-lg pf-v5-u-mr-md">
<PrometheusUtilizationItem
title={t('IOPS')}
utilizationQuery={getPoolQuery(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -413,16 +413,16 @@ const BreakdownCard: React.FC = () => {

return (
<Card>
<CardHeader className="nb-capacity-breakdown-card__header">
<CardTitle>
{t('Capacity breakdown')}
<FieldLevelHelp>
{t(
'This card shows used capacity for different resources. The available capacity is based on cloud services therefore it cannot be shown.'
)}
</FieldLevelHelp>
</CardTitle>
<div className="nb-capacity-breakdown-card__header">
<CardHeader>
<div className="pf-v5-u-display-flex pf-v5-u-justify-content-space-between">
<CardTitle>
{t('Capacity breakdown')}
<FieldLevelHelp>
{t(
'This card shows used capacity for different resources. The available capacity is based on cloud services therefore it cannot be shown.'
)}
</FieldLevelHelp>
</CardTitle>
{isRGWSupported && isMCGSupported && (
<Select
className="nb-capacity-breakdown-card-header__dropdown nb-capacity-breakdown-card-header__dropdown--margin"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
margin-right: var(--pf-v5-global--spacer--xs);
}
/* Override Options Menu item style to make it similar to Select Menu */
.pf-c-options-menu {
--pf-c-options-menu__menu-item--PaddingLeft: 0;
.pf-v5-c-options-menu {
--pf-v5-c-options-menu__menu-item--PaddingLeft: 0;
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -276,25 +276,27 @@ const DataConsumptionCard: React.FC = () => {

return (
<Card>
<CardHeader className="nb-data-consumption-card__header">
<CardTitle>
{t('Performance')}
<FieldLevelHelp>
{t(
'Shows an overview of the data consumption per provider or account collected from the day of the entity creation.'
)}
</FieldLevelHelp>
</CardTitle>
<DataConsumptionDropdown
selectedService={serviceType}
setSelectedService={setServiceType}
selectedBreakdown={breakdownBy}
setSelectedBreakdown={setBreakdownBy}
selectedMetric={metric}
setSelectedMetric={setMetric}
isRgwSupported={RGW && !isOCS45}
isMcgSupported={MCG}
/>
<CardHeader>
<div className="pf-v5-u-display-flex pf-v5-u-justify-content-space-between">
<CardTitle>
{t('Performance')}
<FieldLevelHelp>
{t(
'Shows an overview of the data consumption per provider or account collected from the day of the entity creation.'
)}
</FieldLevelHelp>
</CardTitle>
<DataConsumptionDropdown
selectedService={serviceType}
setSelectedService={setServiceType}
selectedBreakdown={breakdownBy}
setSelectedBreakdown={setBreakdownBy}
selectedMetric={metric}
setSelectedMetric={setMetric}
isRgwSupported={RGW && !isOCS45}
isMcgSupported={MCG}
/>
</div>
</CardHeader>
<CardBody>
{serviceType === ServiceType.MCG &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,14 @@ const ResourceProviders: React.FC<{}> = () => {
return (
<Card>
<CardHeader>
<CardTitle>{t('Resource providers')}</CardTitle>
<FieldLevelHelp>
{t(
"A list of all Multicloud Object Gateway resources that are currently in use. Those resources are used to store data according to the buckets' policies and can be a cloud-based resource or a bare metal resource."
)}
</FieldLevelHelp>
<CardTitle>
{t('Resource providers')}
<FieldLevelHelp>
{t(
"A list of all Multicloud Object Gateway resources that are currently in use. Those resources are used to store data according to the buckets' policies and can be a cloud-based resource or a bare metal resource."
)}
</FieldLevelHelp>
</CardTitle>
</CardHeader>
<CardBody>
{hasMCG ? <ResourceProvidersBody_ /> : <DataUnavailableError />}
Expand Down
Loading

0 comments on commit 241a027

Please sign in to comment.