From 5680506577dfa7d05ea689d151cab780293f770f Mon Sep 17 00:00:00 2001 From: SanjalKatiyar Date: Thu, 28 Dec 2023 18:28:10 +0530 Subject: [PATCH] remove 'co-*' classes supporting PF5 imports/variables --- .../dashboards/cards/activity-card.tsx | 15 ++-- .../dashboards/cards/status-card.tsx | 29 ++++---- packages/client/style.scss | 1 + packages/ocs/block-pool/body.tsx | 1 + .../activity-card/activity-card.tsx | 15 ++-- .../status-card/status-card.scss | 4 -- .../status-card/status-card.tsx | 45 ++++++------ .../persistent-external/status-card.tsx | 28 ++++---- .../activity-card/activity-card.tsx | 15 ++-- .../status-card/status-card.tsx | 72 ++++++++++--------- .../utilization-card/utilization-card.tsx | 2 +- .../block-pool/create-block-pool-modal.tsx | 2 +- packages/ocs/storage-class/sc-form.tsx | 1 + packages/ocs/style.scss | 1 + .../bucket-class/_backingstore-table.scss | 2 +- .../create-bs/backing-store-dropdown.tsx | 1 + .../capacity-and-nodes.scss | 2 +- .../create-local-volume-set-step/body.tsx | 1 + .../select-nodes-table.scss | 2 +- .../namespace-store-dropdown.tsx | 1 + .../namespace-store/namespace-store-form.tsx | 3 +- .../namespace-store-table.scss | 2 +- .../status-card/status-card.scss | 4 -- .../odf-dashboard/status-card/status-card.tsx | 2 +- .../components/utils/osd-size-dropdown.tsx | 1 + .../multi-utilization-item.tsx | 5 +- .../utilization-card/utilization-item.tsx | 2 +- .../shared/src/details-page/DetailsPage.tsx | 3 +- .../shared/src/dropdown/ResourceDropdown.tsx | 19 +++-- .../shared/src/dropdown/resourceDropdown.scss | 13 ++++ .../shared/src/generic/FieldLevelHelp.tsx | 5 +- packages/shared/src/generic/ModalTitle.tsx | 1 + .../shared/src/generic/field-level-help.scss | 12 ++++ packages/shared/src/generic/status-box.tsx | 5 +- packages/shared/src/modals/modal.scss | 5 ++ .../src/resource-link/resource-link.tsx | 7 +- packages/shared/src/style.scss | 1 + packages/shared/src/styles/_common.scss | 9 +++ packages/shared/src/styles/_dashboard.scss | 19 +++++ packages/shared/src/styles/_dropdown.scss | 7 ++ packages/shared/src/styles/_resource.scss | 22 ++++++ packages/shared/src/styles/_vars.scss | 4 +- packages/shared/src/utils/Errors.tsx | 3 +- packages/shared/src/utils/SecretValue.tsx | 3 +- 44 files changed, 263 insertions(+), 134 deletions(-) create mode 100644 packages/client/style.scss delete mode 100644 packages/ocs/dashboards/object-service/status-card/status-card.scss create mode 100644 packages/ocs/style.scss delete mode 100644 packages/odf/components/odf-dashboard/status-card/status-card.scss create mode 100644 packages/shared/src/generic/field-level-help.scss create mode 100644 packages/shared/src/styles/_dropdown.scss diff --git a/packages/client/src/components/dashboards/cards/activity-card.tsx b/packages/client/src/components/dashboards/cards/activity-card.tsx index c485f3ea6..7b0b4eb98 100644 --- 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 ( - + {t('Activity')} - - - - + + + + + + ); }); diff --git a/packages/client/src/components/dashboards/cards/status-card.tsx b/packages/client/src/components/dashboards/cards/status-card.tsx index c45124e95..296022e06 100644 --- 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 ( - + {t('Status')} - - {/** Remove usage of `co-` className */} - - - - - - + + + + + + + + + ); }; diff --git a/packages/client/style.scss b/packages/client/style.scss new file mode 100644 index 000000000..6b6960da6 --- /dev/null +++ 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 index f4b1f63b6..ca9b92e0e 100644 --- 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 = ({ diff --git a/packages/ocs/dashboards/object-service/activity-card/activity-card.tsx b/packages/ocs/dashboards/object-service/activity-card/activity-card.tsx index 7be7d4425..c7568dc94 100644 --- 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 ( - + {t('Activity')} - - - - + + + + + + ); }; diff --git a/packages/ocs/dashboards/object-service/status-card/status-card.scss b/packages/ocs/dashboards/object-service/status-card/status-card.scss deleted file mode 100644 index e47d63558..000000000 --- a/packages/ocs/dashboards/object-service/status-card/status-card.scss +++ /dev/null @@ -1,4 +0,0 @@ -.nb-status-card__health.pf-l-gallery { - width: 100%; - --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(250px, 1fr)); -} diff --git a/packages/ocs/dashboards/object-service/status-card/status-card.tsx b/packages/ocs/dashboards/object-service/status-card/status-card.tsx index 6d72977e1..da2a0f769 100644 --- 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 ( - + {t('Status')} - - - - - - - - - - - + + + + + + + + + + + + + ); }; diff --git a/packages/ocs/dashboards/persistent-external/status-card.tsx b/packages/ocs/dashboards/persistent-external/status-card.tsx index 5530cac32..374218878 100644 --- 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 ( - + {t('Status')} - - - - - - - + + + + + + + + + ); }; diff --git a/packages/ocs/dashboards/persistent-internal/activity-card/activity-card.tsx b/packages/ocs/dashboards/persistent-internal/activity-card/activity-card.tsx index d51cad878..9b06d99d2 100644 --- 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 ( - + {t('Activity')} - - - - + + + + + + ); }); diff --git a/packages/ocs/dashboards/persistent-internal/status-card/status-card.tsx b/packages/ocs/dashboards/persistent-internal/status-card/status-card.tsx index c9c4e573a..6939868aa 100644 --- 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 ( - + {t('Status')} - - - - - {healthChecks?.map((healthCheck: CephHealthCheckType, i) => ( - - ))} - - - - - - - - - + + + + + + {healthChecks?.map((healthCheck: CephHealthCheckType, i) => ( + + ))} + + + + + + + + + + ); }; diff --git a/packages/ocs/dashboards/persistent-internal/utilization-card/utilization-card.tsx b/packages/ocs/dashboards/persistent-internal/utilization-card/utilization-card.tsx index b1373ebd6..da27dbc65 100644 --- 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 ( - + {t('Utilization')} {t( diff --git a/packages/ocs/modals/block-pool/create-block-pool-modal.tsx b/packages/ocs/modals/block-pool/create-block-pool-modal.tsx index 073e0c1ef..8ade5d31d 100644 --- a/packages/ocs/modals/block-pool/create-block-pool-modal.tsx +++ b/packages/ocs/modals/block-pool/create-block-pool-modal.tsx @@ -157,7 +157,7 @@ export const CreateBlockPoolModal = withHandlePromise( isOpen onClose={props.closeModal} className="modal-content create-block-pool__modal" - variant="medium" + variant="small" > {MODAL_TITLE} diff --git a/packages/ocs/storage-class/sc-form.tsx b/packages/ocs/storage-class/sc-form.tsx index dc28ff2bd..cec75574a 100644 --- a/packages/ocs/storage-class/sc-form.tsx +++ b/packages/ocs/storage-class/sc-form.tsx @@ -82,6 +82,7 @@ import { } from '../constants'; import { CreateBlockPoolModal } from '../modals/block-pool/create-block-pool-modal'; import { StoragePoolKind } from '../types'; +import '../style.scss'; import './sc-form.scss'; type OnParamChange = (id: string, paramName: string, checkbox: boolean) => void; diff --git a/packages/ocs/style.scss b/packages/ocs/style.scss new file mode 100644 index 000000000..6b6960da6 --- /dev/null +++ b/packages/ocs/style.scss @@ -0,0 +1 @@ +@import '@odf/shared/style.scss'; diff --git a/packages/odf/components/bucket-class/_backingstore-table.scss b/packages/odf/components/bucket-class/_backingstore-table.scss index fbda0d824..01bb159a2 100644 --- a/packages/odf/components/bucket-class/_backingstore-table.scss +++ b/packages/odf/components/bucket-class/_backingstore-table.scss @@ -16,7 +16,7 @@ } } - .co-m-pane__body { + .odf-m-pane__body { padding: 0; } } diff --git a/packages/odf/components/create-bs/backing-store-dropdown.tsx b/packages/odf/components/create-bs/backing-store-dropdown.tsx index 386f2a25a..75a0b7ee5 100644 --- a/packages/odf/components/create-bs/backing-store-dropdown.tsx +++ b/packages/odf/components/create-bs/backing-store-dropdown.tsx @@ -11,6 +11,7 @@ import { DropdownToggle, } from '@patternfly/react-core'; import { BackingStoreKind } from '../../types'; +import '../../style.scss'; export const BackingStoreDropdown: React.FC = ({ id, diff --git a/packages/odf/components/create-storage-system/create-storage-system-steps/capacity-and-nodes-step/capacity-and-nodes.scss b/packages/odf/components/create-storage-system/create-storage-system-steps/capacity-and-nodes-step/capacity-and-nodes.scss index 683095fcd..836218a99 100644 --- a/packages/odf/components/create-storage-system/create-storage-system-steps/capacity-and-nodes-step/capacity-and-nodes.scss +++ b/packages/odf/components/create-storage-system/create-storage-system-steps/capacity-and-nodes-step/capacity-and-nodes.scss @@ -1,5 +1,5 @@ .odf-capacity-and-nodes__select-nodes { - .co-m-pane__body { + .odf-m-pane__body { /* Removes padding from the list page to align the table with rest of the form fields*/ padding: 0; } diff --git a/packages/odf/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/body.tsx b/packages/odf/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/body.tsx index 784c02547..60b184854 100644 --- a/packages/odf/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/body.tsx +++ b/packages/odf/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/body.tsx @@ -40,6 +40,7 @@ import { getValidatedDeviceTypes } from '../../../../utils'; import validationRegEx from '../../../../utils/validation'; import { LocalVolumeSet, WizardDispatch, WizardState } from '../../reducer'; import { SelectNodesTable } from '../../select-nodes-table/select-nodes-table'; +import '../../../../style.scss'; import './body.scss'; const diskModeDropdownOptions: JSX.Element[] = _.map( diff --git a/packages/odf/components/create-storage-system/select-nodes-table/select-nodes-table.scss b/packages/odf/components/create-storage-system/select-nodes-table/select-nodes-table.scss index d8572a5e6..d7639413c 100644 --- a/packages/odf/components/create-storage-system/select-nodes-table/select-nodes-table.scss +++ b/packages/odf/components/create-storage-system/select-nodes-table/select-nodes-table.scss @@ -1,5 +1,5 @@ .odf-capacity-and-nodes__select-nodes { - .co-m-pane__body { + .odf-m-pane__body { /* Removes padding from the list page to align the table with rest of the form fields*/ padding: 0; } diff --git a/packages/odf/components/namespace-store/namespace-store-dropdown.tsx b/packages/odf/components/namespace-store/namespace-store-dropdown.tsx index e244f95da..ad1641a3d 100644 --- a/packages/odf/components/namespace-store/namespace-store-dropdown.tsx +++ b/packages/odf/components/namespace-store/namespace-store-dropdown.tsx @@ -13,6 +13,7 @@ import { import { NamespacePolicyType } from '../../constants'; import { namespaceStoreResource } from '../../resources'; import { NamespaceStoreKind } from '../../types'; +import '../../style.scss'; export const NamespaceStoreDropdown: React.FC = ({ id, diff --git a/packages/odf/components/namespace-store/namespace-store-form.tsx b/packages/odf/components/namespace-store/namespace-store-form.tsx index 4c79e719c..96fbeb5b3 100644 --- a/packages/odf/components/namespace-store/namespace-store-form.tsx +++ b/packages/odf/components/namespace-store/namespace-store-form.tsx @@ -51,6 +51,7 @@ import { ProviderDataState, StoreAction, } from './reducer'; +import '../../style.scss'; import '../mcg-endpoints/noobaa-provider-endpoints.scss'; const PROVIDERS = getProviders(StoreType.NS); @@ -267,7 +268,7 @@ const NamespaceStoreForm: React.FC = (props) => {
({ kind: 'operators.coreos.com~v1alpha1~ClusterServiceVersion', diff --git a/packages/odf/components/utils/osd-size-dropdown.tsx b/packages/odf/components/utils/osd-size-dropdown.tsx index e09d35f38..500f4e852 100644 --- a/packages/odf/components/utils/osd-size-dropdown.tsx +++ b/packages/odf/components/utils/osd-size-dropdown.tsx @@ -5,6 +5,7 @@ import { TFunction } from 'i18next'; import * as _ from 'lodash-es'; import { SelectOption } from '@patternfly/react-core'; import { OSD_CAPACITY_SIZES } from '../../constants'; +import '../../style.scss'; const valueLabelMap = (t: TFunction) => { return { diff --git a/packages/shared/src/dashboards/utilization-card/multi-utilization-item.tsx b/packages/shared/src/dashboards/utilization-card/multi-utilization-item.tsx index 130181d5d..36f91c56b 100644 --- a/packages/shared/src/dashboards/utilization-card/multi-utilization-item.tsx +++ b/packages/shared/src/dashboards/utilization-card/multi-utilization-item.tsx @@ -43,10 +43,7 @@ export const MultilineUtilizationItem: React.FC = >
-

+

{title}

{error || diff --git a/packages/shared/src/dashboards/utilization-card/utilization-item.tsx b/packages/shared/src/dashboards/utilization-card/utilization-item.tsx index 4a92de64b..d39403764 100644 --- a/packages/shared/src/dashboards/utilization-card/utilization-item.tsx +++ b/packages/shared/src/dashboards/utilization-card/utilization-item.tsx @@ -159,7 +159,7 @@ export const UtilizationItem: React.FC = React.memo( >
-

+

{title}

{error || (!isLoading && !utilizationData?.length) ? ( diff --git a/packages/shared/src/details-page/DetailsPage.tsx b/packages/shared/src/details-page/DetailsPage.tsx index 6cfbfefbb..f4cc750ed 100644 --- a/packages/shared/src/details-page/DetailsPage.tsx +++ b/packages/shared/src/details-page/DetailsPage.tsx @@ -34,6 +34,7 @@ import { getPropertyDescription } from '../utils/swagger'; import { LabelList } from './label-list'; import { OwnerReferences } from './owner-references'; import { Timestamp } from './timestamp'; +import '../style.scss'; import './details.scss'; type DetailsPageProps = { @@ -315,7 +316,7 @@ export const ResourceSummary: React.FC = ({ const launchModal = useModal(); return ( -
+
@@ -32,7 +33,7 @@ const ResourceBadge: React.FC = ({ }) => ( <> {resourceModel.abbr.toLocaleUpperCase()} - + {resourceModel.abbr.toLocaleUpperCase()} @@ -67,7 +68,7 @@ const ResourceDropdownItem: ResourceDropdownItem = ({ return (
- + {showBadge && } {propertySelector(resource)} @@ -224,7 +225,12 @@ const ResourceDropdown: ResourceDropdown = ({ <> null} @@ -409,7 +415,12 @@ export const ResourcesDropdown: ResourcesDropdown = ({ return ( button { width: 100%; } + +.odf-resourceDropdownHeight > div { + max-height: 20rem; + overflow-y: auto; +} + +.odf-resourceDropdownListItems li { + // @extend .pf-c-menu__list-item !optional; + display: var(--pf-c-menu__list-item--Display); + position: relative; + color: var(--pf-c-menu__list-item--Color); + background-color: var(--pf-c-menu__list-item--BackgroundColor); +} diff --git a/packages/shared/src/generic/FieldLevelHelp.tsx b/packages/shared/src/generic/FieldLevelHelp.tsx index 6f3b9a803..66bd2b3cf 100644 --- a/packages/shared/src/generic/FieldLevelHelp.tsx +++ b/packages/shared/src/generic/FieldLevelHelp.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Button, Popover, PopoverProps } from '@patternfly/react-core'; import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'; import { useCustomTranslation } from '../useCustomTranslationHook'; +import './field-level-help.scss'; export const FieldLevelHelp: React.FC = React.memo( ({ children, popoverHasAutoWidth, testId }) => { @@ -19,10 +20,10 @@ export const FieldLevelHelp: React.FC = React.memo( aria-label={t('Help')} variant="link" isInline - className="co-field-level-help" + className="odf-field-level-help" data-test-id={testId || null} > - + ); diff --git a/packages/shared/src/generic/ModalTitle.tsx b/packages/shared/src/generic/ModalTitle.tsx index d9c0bc613..8d59ef408 100644 --- a/packages/shared/src/generic/ModalTitle.tsx +++ b/packages/shared/src/generic/ModalTitle.tsx @@ -3,6 +3,7 @@ import { ActionGroup, Button } from '@patternfly/react-core'; import { useCustomTranslation } from '../useCustomTranslationHook'; import { ButtonBar } from './ButtonBar'; import CloseButton from './CloseButton'; +import '../modals/modal.scss'; export const ModalTitle: React.FC = ({ children, diff --git a/packages/shared/src/generic/field-level-help.scss b/packages/shared/src/generic/field-level-help.scss new file mode 100644 index 000000000..6a2431d48 --- /dev/null +++ b/packages/shared/src/generic/field-level-help.scss @@ -0,0 +1,12 @@ +.odf-field-level-help { + margin-left: 5px; + + &:hover .odf-field-level-help__icon { + color: var(--pf-global--Color--dark-100); + } + + .odf-field-level-help__icon { + color: var(--pf-global--Color--dark-200); + font-size: 12px; + } +} diff --git a/packages/shared/src/generic/status-box.tsx b/packages/shared/src/generic/status-box.tsx index 586fbe3e4..278e3d974 100644 --- a/packages/shared/src/generic/status-box.tsx +++ b/packages/shared/src/generic/status-box.tsx @@ -9,6 +9,7 @@ import * as _ from 'lodash-es'; import { Trans } from 'react-i18next'; import { Alert, Button } from '@patternfly/react-core'; import { useCustomTranslation } from '../useCustomTranslationHook'; +import '../style.scss'; export const Box: React.FC = ({ children, className }) => (
{children}
@@ -183,8 +184,8 @@ export const StatusBox: React.FC = (props) => { const status = _.get(loadError, 'response.status'); if (status === 404) { return ( -
-

+
+

{t('404: Not Found')}

diff --git a/packages/shared/src/modals/modal.scss b/packages/shared/src/modals/modal.scss index a1fd0d077..5c4c626ee 100644 --- a/packages/shared/src/modals/modal.scss +++ b/packages/shared/src/modals/modal.scss @@ -39,3 +39,8 @@ overflow-x: unset; overflow-y: unset; } + +.modal-footer { + display: flex; + justify-content: flex-end; +} diff --git a/packages/shared/src/resource-link/resource-link.tsx b/packages/shared/src/resource-link/resource-link.tsx index efbdc1eb6..597e97c62 100644 --- a/packages/shared/src/resource-link/resource-link.tsx +++ b/packages/shared/src/resource-link/resource-link.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { K8sKind } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types'; import classNames from 'classnames'; import { Link } from 'react-router-dom-v5-compat'; +import '../style.scss'; type ResourceLinkProps = { resourceModel: K8sKind; @@ -24,7 +25,7 @@ export const ResourceIcon: React.FC = ({ <> {resourceModel.abbr.toLocaleUpperCase()} {resourceModel.abbr.toLocaleUpperCase()} @@ -41,13 +42,13 @@ const ResourceLink: React.FC = ({ className, }) => { return ( - + {!hideIcon && ( <> {resourceModel.abbr.toLocaleUpperCase()} - + {resourceModel.abbr.toLocaleUpperCase()} diff --git a/packages/shared/src/style.scss b/packages/shared/src/style.scss index 9d222826c..e73e12295 100644 --- a/packages/shared/src/style.scss +++ b/packages/shared/src/style.scss @@ -8,6 +8,7 @@ // React Components @import './styles/common'; @import './styles/dashboard'; +@import './styles/dropdown'; @import './styles/skeleton'; @import './styles/alerts'; @import './styles/copy-to-clipboard'; diff --git a/packages/shared/src/styles/_common.scss b/packages/shared/src/styles/_common.scss index 0c4a4fba1..21cd2ecc3 100644 --- a/packages/shared/src/styles/_common.scss +++ b/packages/shared/src/styles/_common.scss @@ -153,3 +153,12 @@ .odf-m-pane__body-group { padding: 0 0 30px; } + +.odf-m-pane__details { + line-height: 1.66; + min-width: 0; + white-space: normal; + dd { + @include odf-break-word; + } +} diff --git a/packages/shared/src/styles/_dashboard.scss b/packages/shared/src/styles/_dashboard.scss index c2fc3713b..e124a213b 100644 --- a/packages/shared/src/styles/_dashboard.scss +++ b/packages/shared/src/styles/_dashboard.scss @@ -6,3 +6,22 @@ padding: $pf-global-gutter--md; } } + +.odf-overview-card--gradient { + position: relative; + &:after { + background: linear-gradient(rgba(255, 255, 255, 0), var(--pf-global--BackgroundColor--100)); + bottom: 0; + content: ''; + left: 0; + min-height: 2rem; + pointer-events: none; + position: absolute; + width: calc(100% - var(--pf-global--spacer--lg)); + } +} + +.odf-overview-status__health.pf-l-gallery { + width: 100%; + --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(150px, auto)); +} diff --git a/packages/shared/src/styles/_dropdown.scss b/packages/shared/src/styles/_dropdown.scss new file mode 100644 index 000000000..693c9b47b --- /dev/null +++ b/packages/shared/src/styles/_dropdown.scss @@ -0,0 +1,7 @@ +.dropdown--full-width { + &, + .pf-c-dropdown__toggle { + justify-content: space-between; + width: 100%; + } +} diff --git a/packages/shared/src/styles/_resource.scss b/packages/shared/src/styles/_resource.scss index a3a20ccfb..7007a09a2 100644 --- a/packages/shared/src/styles/_resource.scss +++ b/packages/shared/src/styles/_resource.scss @@ -41,3 +41,25 @@ overflow: hidden; text-overflow: ellipsis; } + +.odf-m-resource-icon { + background-color: $color-container-dark; + border-radius: 20px; + color: var(--pf-global--palette--white); + display: inline-block; + flex-shrink: 0; + font-size: $font-size-base; + line-height: 16px; + margin-right: 4px; + min-width: 18px; + padding: 1px 4px; + text-align: center; + white-space: nowrap; + &--lg { + font-size: ($font-size-base + 3); + line-height: 20px; + margin-right: 7px; + min-width: 24px; + padding: 0 7px; + } +} diff --git a/packages/shared/src/styles/_vars.scss b/packages/shared/src/styles/_vars.scss index ce30a75c6..711e5a028 100644 --- a/packages/shared/src/styles/_vars.scss +++ b/packages/shared/src/styles/_vars.scss @@ -29,7 +29,6 @@ $screen-md-max: ($screen-lg-min - 1) !default; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace !default; //== Typography - $font-size-base: 14px !default; $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px @@ -43,3 +42,6 @@ $pf-global--breakpoint--lg-max: ($pf-global--breakpoint--lg - 1); // Can not use --pf-global--gutter --pf-global--gutter--md because you can't get a negative value of a scss variable that is assigned a css custom property. $pf-global-gutter: 1rem; // Matches --pf-global--gutter $pf-global-gutter--md: 1.5rem; // Matches --pf-global--gutter--md + +// == Colors +$color-container-dark: $pf-color-blue-300; diff --git a/packages/shared/src/utils/Errors.tsx b/packages/shared/src/utils/Errors.tsx index 76fb025b2..662e7191c 100644 --- a/packages/shared/src/utils/Errors.tsx +++ b/packages/shared/src/utils/Errors.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Helmet } from 'react-helmet'; import PageHeading from '../heading/page-heading'; import { useCustomTranslation } from '../useCustomTranslationHook'; +import '../style.scss'; export type ErrorComponentProps = { title: string; @@ -13,7 +14,7 @@ const ErrorComponent: React.SFC = ({ title, message }) => { return ( <> -
+
{message &&
{message}
}
diff --git a/packages/shared/src/utils/SecretValue.tsx b/packages/shared/src/utils/SecretValue.tsx index 61ef88385..80ec1cada 100644 --- a/packages/shared/src/utils/SecretValue.tsx +++ b/packages/shared/src/utils/SecretValue.tsx @@ -10,6 +10,7 @@ import { ConfigMapModel, SecretModel } from '../models'; import { getName, getNamespace } from '../selectors'; import { ConfigMapKind, K8sResourceKind, SecretKind } from '../types'; import { useCustomTranslation } from '../useCustomTranslationHook'; +import '../style.scss'; type SecretValueProps = { value: string; @@ -113,7 +114,7 @@ export const GetSecret: React.FC = ({ obj }) => { : []; return dl.length ? ( -
+
{secretValues.length ? (