Skip to content

Commit 1f526a4

Browse files
logonofflogonoff
committed
CONSOLE-4492: remove NavTitle and PrimaryHeading
Removed children
1 parent c4455c2 commit 1f526a4

File tree

34 files changed

+399
-586
lines changed

34 files changed

+399
-586
lines changed

‎frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.tsx

+15-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import { IconStatus, Status } from '@patternfly/react-component-groups/dist/dynamic/Status';
23
import {
34
Tabs,
45
Tab,
@@ -8,14 +9,15 @@ import {
89
TabContent,
910
TabContentProps,
1011
TabTitleText,
12+
PageSection,
1113
} from '@patternfly/react-core';
14+
import { ExclamationTriangleIcon } from '@patternfly/react-icons';
1215
import { LockIcon } from '@patternfly/react-icons/dist/esm/icons/lock-icon';
1316
import { useTranslation } from 'react-i18next';
1417
import { useParams } from 'react-router-dom-v5-compat';
15-
import { LoadingBox, history } from '@console/internal/components/utils';
16-
import { PageLayout, isModifiedEvent } from '@console/shared';
18+
import { LoadingBox, BasePageHeading, history } from '@console/internal/components/utils';
19+
import { isModifiedEvent } from '@console/shared';
1720
import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
18-
import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
1921
import ClusterConfigurationForm from './ClusterConfigurationForm';
2022
import { getClusterConfigurationGroups } from './getClusterConfigurationGroups';
2123
import { ClusterConfigurationTabGroup } from './types';
@@ -98,12 +100,13 @@ const ClusterConfigurationPage: React.FC = () => {
98100
return (
99101
<div className="co-cluster-configuration-page">
100102
<DocumentTitle>{t('console-app~Cluster configuration')}</DocumentTitle>
101-
<PageLayout
103+
<BasePageHeading
102104
title={t('console-app~Cluster configuration')}
103-
hint={t(
105+
helpText={t(
104106
'console-app~Set cluster-wide configuration for the console experience. Your changes will be autosaved and will affect after a refresh.',
105107
)}
106-
>
108+
/>
109+
<PageSection>
107110
{!loaded ? (
108111
<LoadingBox />
109112
) : clusterConfigurationTabs.length === 0 ? (
@@ -138,14 +141,16 @@ const ClusterConfigurationPage: React.FC = () => {
138141
{groupNotFound ? (
139142
/* Similar to a TabContent */
140143
<section className="co-cluster-configuration-page pf-v6-c-tab-content">
141-
<PrimaryHeading>
142-
{t('console-app~{{section}} not found', { section: activeTabId })}
143-
</PrimaryHeading>
144+
<Status
145+
status={IconStatus.warning}
146+
icon={<ExclamationTriangleIcon />}
147+
label={t('console-app~{{section}} not found', { section: activeTabId })}
148+
/>
144149
</section>
145150
) : null}
146151
</>
147152
)}
148-
</PageLayout>
153+
</PageSection>
149154
</div>
150155
);
151156
};

‎frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
TabTitleText,
77
TabContent,
88
TabContentProps,
9+
PageSection,
910
} from '@patternfly/react-core';
1011
import { useTranslation } from 'react-i18next';
1112
import { useParams } from 'react-router-dom-v5-compat';
@@ -16,12 +17,11 @@ import {
1617
UserPreferenceItem,
1718
isUserPreferenceItem,
1819
} from '@console/dynamic-plugin-sdk';
19-
import { LoadingBox, history } from '@console/internal/components/utils';
20+
import { LoadingBox, BasePageHeading, history } from '@console/internal/components/utils';
2021
import { useExtensions } from '@console/plugin-sdk/src';
2122
import {
2223
isModifiedEvent,
2324
orderExtensionBasedOnInsertBeforeAndAfter,
24-
PageLayout,
2525
useQueryParams,
2626
Spotlight,
2727
} from '@console/shared';
@@ -127,12 +127,13 @@ const UserPreferencePage: React.FC = () => {
127127
? t('console-app~User Preferences {{activeTab}}', { activeTab })
128128
: t('console-app~User Preferences')}
129129
</DocumentTitle>
130-
<PageLayout
130+
<BasePageHeading
131131
title={t('console-app~User Preferences')}
132-
hint={t(
132+
helpText={t(
133133
'console-app~Set your individual preferences for the console experience. Any changes will be autosaved.',
134134
)}
135-
>
135+
/>
136+
<PageSection>
136137
{userPreferenceItemResolved ? (
137138
<div className="co-user-preference-page-content">
138139
<div className="co-user-preference-page-content__tabs">
@@ -154,7 +155,7 @@ const UserPreferencePage: React.FC = () => {
154155
) : (
155156
<LoadingBox />
156157
)}
157-
</PageLayout>
158+
</PageSection>
158159
</div>
159160
);
160161
};

‎frontend/packages/console-shared/src/components/heading/PrimaryHeading.tsx

-30
This file was deleted.

‎frontend/packages/console-shared/src/components/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export * from './health-checks';
1515
export * from './virtualized-grid';
1616
export * from './alerts';
1717
export * from './popover';
18-
export * from './layout';
1918
export * from './utils';
2019
export * from './modal';
2120
export * from './modals';

‎frontend/packages/console-shared/src/components/layout/NavTitle.tsx

-32
This file was deleted.

‎frontend/packages/console-shared/src/components/layout/PageLayout.tsx

-26
This file was deleted.

‎frontend/packages/console-shared/src/components/layout/index.ts

-1
This file was deleted.

‎frontend/packages/dev-console/integration-tests/support/step-definitions/common/addFlow.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ When('user clicks Create button on Add page', () => {
8787

8888
Then('user will be redirected to Add page', () => {
8989
// detailsPage.titleShouldContain(pageTitle.Add);
90-
cy.get('.ocs-page-layout__title').should('contain.text', pageTitle.Add);
90+
cy.get('[data-test-id="resource-title"]').should('contain.text', pageTitle.Add);
9191
});
9292

9393
When('user clicks Cancel button on Add page', () => {

‎frontend/packages/dev-console/integration-tests/support/step-definitions/userPreferences/user-preferences-dev-perspective.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -173,13 +173,13 @@ When('user clicks on the checkbox to uncheck it', () => {
173173
});
174174

175175
Then('user will see the language change to 日本語', () => {
176-
cy.get('h1.ocs-page-layout__title')
176+
cy.get('[data-test-id="resource-title"]')
177177
.invoke('attr', 'value')
178178
.then(($initialVal) => {
179179
if ($initialVal !== 'ユーザー設定') {
180180
cy.wait(5000);
181181
}
182-
cy.get('h1.ocs-page-layout__title').should('contain.text', 'ユーザー設定');
182+
cy.get('[data-test-id="resource-title"]').should('contain.text', 'ユーザー設定');
183183
});
184184
// After execution of all tests Language value is changed back to English
185185
cy.selectByDropDownText(getPreferenceDropdown('Language'), 'English');

‎frontend/packages/dev-console/src/components/add/AddPageLayout.scss

-4
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,6 @@
3737
}
3838
}
3939

40-
&__additional-hint-block {
41-
padding-bottom: var(--pf-t--global--spacer--md);
42-
}
43-
4440
&__resource-quota-message-block {
4541
margin-right: var(--pf-t--global--spacer--xl);
4642
}

‎frontend/packages/dev-console/src/components/add/AddPageLayout.tsx

+54-61
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import * as React from 'react';
2-
import { Skeleton, Switch, Tooltip } from '@patternfly/react-core';
2+
import { PageSection, Skeleton, Switch, Tooltip } from '@patternfly/react-core';
33
import * as cx from 'classnames';
44
import { useTranslation } from 'react-i18next';
55
import { AddActionGroup, isAddActionGroup } from '@console/dynamic-plugin-sdk';
66
import { GettingStartedSection } from '@console/internal/components/dashboard/project-dashboard/getting-started/GettingStartedSection';
7-
import { getQueryArgument } from '@console/internal/components/utils';
7+
import { getQueryArgument, BasePageHeading } from '@console/internal/components/utils';
88
import { useExtensions } from '@console/plugin-sdk/src';
9-
import { PageLayout, useActiveNamespace } from '@console/shared';
9+
import { useActiveNamespace } from '@console/shared';
1010
import TopologyQuickSearch from '@console/topology/src/components/quick-search/TopologyQuickSearch';
1111
import TopologyQuickSearchButton from '@console/topology/src/components/quick-search/TopologyQuickSearchButton';
1212
import { filterNamespaceScopedUrl } from '../../utils/add-page-utils';
@@ -19,10 +19,9 @@ import './AddPageLayout.scss';
1919

2020
type AddPageLayoutProps = {
2121
title: string;
22-
hintBlock?: React.ReactNode;
2322
};
2423

25-
const AddPageLayout: React.FC<AddPageLayoutProps> = ({ title, hintBlock: additionalHint }) => {
24+
const AddPageLayout: React.FC<AddPageLayoutProps> = ({ title }) => {
2625
const { t } = useTranslation();
2726
const [activeNamespace] = useActiveNamespace();
2827
const [isQuickSearchOpen, setIsQuickSearchOpen] = React.useState<boolean>(
@@ -53,65 +52,59 @@ const AddPageLayout: React.FC<AddPageLayoutProps> = ({ title, hintBlock: additio
5352
const addActionAccessCheckFailed: boolean =
5453
!allAddActionsDisabled && extensionsLoaded && filteredAddActionExtensions?.length === 0;
5554

56-
const getHint = (): React.ReactNode => {
57-
return (
58-
<>
59-
<div className="odc-add-page-layout__hint-block">
60-
<div className="odc-add-page-layout__hint-block__text">
61-
<TopologyQuickSearchButton onClick={() => setIsQuickSearchOpen(true)} />
62-
</div>
63-
<div className="odc-add-page-layout__hint-block__actions">
64-
<div className="odc-add-page-layout__resource-quota-message-block">
65-
<ResourceQuotaAlert namespace={activeNamespace} />
66-
</div>
67-
<div
68-
className={cx('odc-add-page-layout__hint-block__details-switch', {
69-
'odc-add-page-layout__hint-block__details-switch__loading-state': !extensionsLoaded,
70-
})}
71-
data-test="details-switch"
72-
>
73-
{!allAddActionsDisabled &&
74-
(extensionsLoaded ? (
75-
<Tooltip
76-
content={t('devconsole~Show or hide details about each item')}
77-
position="top"
78-
>
79-
<Switch
80-
aria-label={
81-
showDetails
82-
? t('devconsole~Show add card details')
83-
: t('devconsole~Hide add card details')
84-
}
85-
isChecked={showDetails}
86-
onChange={(_event, checked) => {
87-
setShowDetails(checked);
88-
}}
89-
data-test="switch"
90-
label={showDetails ? t('devconsole~Details on') : t('devconsole~Details off')}
91-
className="odc-add-page-layout__hint-block__details-switch__text"
92-
/>
93-
</Tooltip>
94-
) : (
95-
<Skeleton shape="circle" width="24px" />
96-
))}
97-
</div>
98-
</div>
99-
<TopologyQuickSearch
100-
namespace={activeNamespace}
101-
isOpen={isQuickSearchOpen}
102-
setIsOpen={setIsQuickSearchOpenAndFireEvent}
103-
/>
55+
const HelpText = () => (
56+
<div className="odc-add-page-layout__hint-block">
57+
<div className="odc-add-page-layout__hint-block__text">
58+
<TopologyQuickSearchButton onClick={() => setIsQuickSearchOpen(true)} />
59+
</div>
60+
<div className="odc-add-page-layout__hint-block__actions">
61+
<div className="odc-add-page-layout__resource-quota-message-block">
62+
<ResourceQuotaAlert namespace={activeNamespace} />
10463
</div>
105-
{additionalHint && (
106-
<div className="odc-add-page-layout__additional-hint-block">{additionalHint}</div>
107-
)}
108-
</>
109-
);
110-
};
64+
<div
65+
className={cx('odc-add-page-layout__hint-block__details-switch', {
66+
'odc-add-page-layout__hint-block__details-switch__loading-state': !extensionsLoaded,
67+
})}
68+
data-test="details-switch"
69+
>
70+
{!allAddActionsDisabled &&
71+
(extensionsLoaded ? (
72+
<Tooltip
73+
content={t('devconsole~Show or hide details about each item')}
74+
position="top"
75+
>
76+
<Switch
77+
aria-label={
78+
showDetails
79+
? t('devconsole~Show add card details')
80+
: t('devconsole~Hide add card details')
81+
}
82+
isChecked={showDetails}
83+
onChange={(_event, checked) => {
84+
setShowDetails(checked);
85+
}}
86+
data-test="switch"
87+
label={showDetails ? t('devconsole~Details on') : t('devconsole~Details off')}
88+
className="odc-add-page-layout__hint-block__details-switch__text"
89+
/>
90+
</Tooltip>
91+
) : (
92+
<Skeleton shape="circle" width="24px" data-test="add-page-skeleton" />
93+
))}
94+
</div>
95+
</div>
96+
<TopologyQuickSearch
97+
namespace={activeNamespace}
98+
isOpen={isQuickSearchOpen}
99+
setIsOpen={setIsQuickSearchOpenAndFireEvent}
100+
/>
101+
</div>
102+
);
111103

112104
return (
113105
<div className="odc-add-page-layout ocs-quick-search-modal__no-backdrop" data-test="add-page">
114-
<PageLayout title={title} hint={getHint()}>
106+
<BasePageHeading title={title} helpText={<HelpText />} />
107+
<PageSection>
115108
<GettingStartedSection userSettingKey="devconsole.addPage.gettingStarted" />
116109
<AddCardSection
117110
addActionExtensions={filteredAddActionExtensions}
@@ -121,7 +114,7 @@ const AddPageLayout: React.FC<AddPageLayoutProps> = ({ title, hintBlock: additio
121114
loadingFailed={addActionLoadingFailed}
122115
accessCheckFailed={addActionAccessCheckFailed}
123116
/>
124-
</PageLayout>
117+
</PageSection>
125118
</div>
126119
);
127120
};

0 commit comments

Comments
 (0)