CONSOLE-4492,CONSOLE-4514: Align spacing of page elements with PatternFly and remove border after PageHeading (#14875)

* Replace `co-m-page__body` with PatternFly's `Flex` component

* Use PatternFly's `PageBreadcrumb`

* Replace `div#app-content` with PatternFly's `Flex` component

* Replace `co-m-pane__body` and `co-m-nav-title` with PatternFly's `PageSection` component

* Update docs

* Plugin fix

* Update comment to include link to PatternFly bug

* Use `isFilled` prop instead of `pf-v6-u-h-100`

* Remove unnecessary nodes

* Fix regression where actions can be misaligned

* Fix Project Access content layout

* Update dynamic-demo-plugin/src/components/ListPage.tsx

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

* Update Cypress to latest

* CONSOLE-4514: remove border after PageHeading, above HorizontalNav

---------

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

Author: rhamilto

dynamic-demo-plugin/src/components/ListPage.tsx

@@ -26,7 +26,7 @@ type PodsTableProps = {
 };
 
 const PodsTable: React.FC<PodsTableProps> = ({ data, unfilteredData, loaded, loadError }) => {
-  const { t } = useTranslation("plugin__console-demo-plugin");
+  const { t } = useTranslation('plugin__console-demo-plugin');
 
   const columns: TableColumn<K8sResourceCommon>[] = [
     {
@@ -96,7 +96,7 @@ const ListPage = () => {
     isList: true,
     namespaced: true,
   });
-  const { t } = useTranslation("plugin__console-demo-plugin");
+  const { t } = useTranslation('plugin__console-demo-plugin');
 
   const [data, filteredData, onFilterChange] = useListPageFilter(pods, filters, {
     name: { selected: ['openshift'] },
@@ -124,7 +124,9 @@ const ListPage = () => {
       </ListPageBody>
       <ListPageBody>
         <p>{t('Sample ResourceIcon')}</p>
-        <ResourceIcon kind="Pod" />
+        <p>
+          <ResourceIcon kind="Pod" />
+        </p>
       </ListPageBody>
     </>
   );

frontend/package.json

@@ -263,7 +263,7 @@
     "comment-json": "4.x",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^5.2.7",
-    "cypress": "^13.10.0",
+    "cypress": "^14.2.1",
     "cypress-axe": "^1.5.0",
     "cypress-cucumber-preprocessor": "latest",
     "cypress-file-upload": "^5.0.8",

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

@@ -3,16 +3,6 @@
   flex-direction: column;
   min-height: 100%;
 
-  // Fix missing white background color above the header.
-  .ocs-page-layout__title {
-    margin-top: 0;
-    padding-top: var(--pf-t--global--spacer--lg);
-  }
-
-  .ocs-page-layout__content {
-    display: inline;
-  }
-
   .pf-v6-c-empty-state {
     background-color: var(--pf-t--global--background--color--primary--default);
     flex: 1;

frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx

@@ -54,6 +54,7 @@ import {
   GreenCheckCircleIcon,
   YellowExclamationTriangleIcon,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   boolComparator,
   localeComparator,
@@ -226,7 +227,7 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows, lo
   return !loaded ? (
     <LoadingBox />
   ) : (
-    <div className="co-m-pane__body">
+    <PaneBody>
       {obj.spec?.managementState === 'Unmanaged' && (
         <Alert
           className="co-alert"
@@ -290,7 +291,7 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows, lo
       ) : (
         <EmptyBox label={t('console-app~Console plugins')} />
       )}
-    </div>
+    </PaneBody>
   );
 };
 

frontend/packages/console-app/src/components/console-operator/ConsolePluginManifestPage.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { PageComponentProps, CopyToClipboard, EmptyBox } from '@console/internal/components/utils';
 import { usePluginStore } from '@console/plugin-sdk/src/api/usePluginStore';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 export const ConsolePluginManifestPage: React.FC<PageComponentProps> = ({ obj }) => {
   const { t } = useTranslation();
@@ -14,12 +15,12 @@ export const ConsolePluginManifestPage: React.FC<PageComponentProps> = ({ obj })
   ]);
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       {pluginManifest ? (
         <CopyToClipboard value={JSON.stringify(pluginManifest, null, 2)} />
       ) : (
         <EmptyBox label={t('console-app~Plugin manifest')} />
       )}
-    </div>
+    </PaneBody>
   );
 };

frontend/packages/console-app/src/components/network-policies/network-policy-form.tsx

@@ -28,6 +28,7 @@ import { MultiNetworkPolicyModel, NetworkPolicyModel } from '@console/internal/m
 import { k8sCreate, NetworkPolicyKind } from '@console/internal/module/k8s';
 import { useClusterNetworkFeatures } from '@console/internal/module/k8s/network';
 import { FLAGS, YellowExclamationTriangleIcon } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { useFlag } from '@console/shared/src/hooks/flag';
 import NADsSelector from './NADsSelector';
 import { NetworkPolicyConditionalSelector } from './network-policy-conditional-selector';
@@ -81,7 +82,7 @@ export const NetworkPolicyForm: React.FC<NetworkPolicyFormProps> = ({ formData,
     // Note, this case is not expected to happen. Validity of the network policy for form should have been checked prior to showing this form.
     // When used with the SyncedEditor, an error is thrown when the data is invalid, that should prevent the user from opening the form with invalid data, hence not running into this conditional block.
     return (
-      <div className="co-m-pane__body">
+      <PaneBody>
         <Alert
           variant={AlertVariant.danger}
           title={t(
@@ -90,7 +91,7 @@ export const NetworkPolicyForm: React.FC<NetworkPolicyFormProps> = ({ formData,
         >
           {networkPolicy.error}
         </Alert>
-      </div>
+      </PaneBody>
     );
   }
 
@@ -204,7 +205,7 @@ export const NetworkPolicyForm: React.FC<NetworkPolicyFormProps> = ({ formData,
   };
 
   return (
-    <div className="co-m-pane__body co-m-pane__form">
+    <PaneBody className="co-m-pane__form">
       <Form onSubmit={save} className="co-create-networkpolicy">
         {showSDNAlert &&
           networkFeaturesLoaded &&
@@ -417,6 +418,6 @@ export const NetworkPolicyForm: React.FC<NetworkPolicyFormProps> = ({ formData,
           </ActionGroup>
         </ButtonBar>
       </Form>
-    </div>
+    </PaneBody>
   );
 };

frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { CamelCaseWrap } from '@console/dynamic-plugin-sdk';
 import { SectionHeading, Timestamp } from '@console/internal/components/utils';
 import { NodeKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 type NodeDetailsConditionsProps = {
   node: NodeKind;
@@ -12,7 +13,7 @@ type NodeDetailsConditionsProps = {
 const NodeDetailsConditions: React.FC<NodeDetailsConditionsProps> = ({ node }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~Node conditions')} />
       <div className="co-table-container">
         <table className="pf-v6-c-table pf-m-compact pf-m-border-rows">
@@ -46,7 +47,7 @@ const NodeDetailsConditions: React.FC<NodeDetailsConditionsProps> = ({ node }) =
           </tbody>
         </table>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 

frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx

@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, units } from '@console/internal/components/utils';
 import { NodeKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 type NodeDetailsImagesProps = {
   node: NodeKind;
@@ -12,7 +13,7 @@ const NodeDetailsImages: React.FC<NodeDetailsImagesProps> = ({ node }) => {
   const images = _.filter(node.status.images, 'names');
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~Images')} />
       <div className="co-table-container">
         <table className="pf-v6-c-table pf-m-compact pf-m-border-rows">
@@ -38,7 +39,7 @@ const NodeDetailsImages: React.FC<NodeDetailsImagesProps> = ({ node }) => {
           </tbody>
         </table>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 

frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx

@@ -16,6 +16,7 @@ import {
 import { DetailsItem } from '@console/internal/components/utils/details-item';
 import { NodeModel, MachineModel } from '@console/internal/models';
 import { NodeKind, referenceForModel } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { useLabelsModal } from '@console/shared/src/hooks/useLabelsModal';
 import {
   getNodeMachineNameAndNamespace,
@@ -42,7 +43,7 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~Node details')} />
       <div className="row">
         <div className="col-md-6 col-xs-12">
@@ -165,7 +166,7 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 

frontend/packages/console-app/src/components/nodes/NodeLogs.tsx

@@ -29,6 +29,7 @@ import {
 } from '@console/internal/components/utils';
 import { modelFor, NodeKind, resourceURL } from '@console/internal/module/k8s';
 import { useUserSettings } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { LOG_WRAP_LINES_USERSETTINGS_KEY } from '@console/shared/src/constants';
 import NodeLogsUnitFilter from './NodeLogsUnitFilter';
 import './node-logs.scss';
@@ -348,7 +349,7 @@ const NodeLogs: React.FC<NodeLogsProps> = ({ obj: node }) => {
   );
 
   return (
-    <div className="co-m-pane__body co-m-pane__body--full-height">
+    <PaneBody fullHeight>
       <div className="log-window-wrapper">
         {(isLoadingLog || errorExists) && logControls}
         {trimmedContent?.length > 0 && !isLoadingLog && (
@@ -403,7 +404,7 @@ const NodeLogs: React.FC<NodeLogsProps> = ({ obj: node }) => {
           />
         )}
       </div>
-    </div>
+    </PaneBody>
   );
 };
 

frontend/packages/console-app/src/components/nodes/NodeTerminal.tsx

@@ -8,6 +8,7 @@ import {
   LoadingBox,
 } from '@console/internal/components/utils';
 import { NodeKind, PodKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PodExecLoader } from '../../../../../public/components/pod';
 import { ImageStreamTagModel, NamespaceModel, PodModel } from '../../../../../public/models';
 import { k8sCreate, k8sGet, k8sKillByName } from '../../../../../public/module/k8s';
@@ -120,9 +121,9 @@ const getDebugPod = async (
 
 const NodeTerminalError: React.FC<NodeTerminalErrorProps> = ({ error }) => {
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <Alert variant="danger" isInline title={error} data-test="node-terminal-error" />
-    </div>
+    </PaneBody>
   );
 };
 

frontend/packages/console-app/src/components/oauth-config/OAuthConfigDetails.tsx

@@ -18,6 +18,7 @@ import {
 } from '@console/internal/components/utils';
 import { ClusterOperatorModel } from '@console/internal/models';
 import { OAuthKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { IDP_TYPES } from '@console/shared/src/constants/auth';
 import { useQueryParams } from '@console/shared/src/hooks/useQueryParams';
 import { IdentityProviders } from './IdentityProviders';
@@ -77,7 +78,7 @@ export const OAuthConfigDetails: React.FC<OAuthDetailsProps> = ({ obj }: { obj:
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('console-app~OAuth details')} />
         <div className="row">
           <div className="col-md-6">
@@ -91,8 +92,8 @@ export const OAuthConfigDetails: React.FC<OAuthDetailsProps> = ({ obj }: { obj:
             </ResourceSummary>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('console-app~Identity providers')} />
         <p className="co-m-pane__explanation co-m-pane__explanation--alt">
           {t('console-app~Identity providers determine how users log into the cluster.')}
@@ -114,29 +115,32 @@ export const OAuthConfigDetails: React.FC<OAuthDetailsProps> = ({ obj }: { obj:
             </>
           </Alert>
         )}
-        <Dropdown
-          isOpen={isIDPOpen}
-          onSelect={() => setIDPOpen(false)}
-          onOpenChange={(isOpen: boolean) => setIDPOpen(isOpen)}
-          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle
-              id="idp-dropdown"
-              data-test-id="dropdown-button"
-              ref={toggleRef}
-              onClick={() => setIDPOpen(!isIDPOpen)}
-              isExpanded={isIDPOpen}
-            >
-              {t('console-app~Add')}
-            </MenuToggle>
-          )}
-          shouldFocusToggleOnSelect
-          id="idp"
-        >
-          <DropdownList>{IDPDropdownItems}</DropdownList>
-        </Dropdown>
+        <div>
+          <Dropdown
+            isOpen={isIDPOpen}
+            onSelect={() => setIDPOpen(false)}
+            onOpenChange={(isOpen: boolean) => setIDPOpen(isOpen)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                id="idp-dropdown"
+                data-test-id="dropdown-button"
+                ref={toggleRef}
+                onClick={() => setIDPOpen(!isIDPOpen)}
+                isExpanded={isIDPOpen}
+              >
+                {t('console-app~Add')}
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
+            id="idp"
+            popperProps={{}}
+          >
+            <DropdownList>{IDPDropdownItems}</DropdownList>
+          </Dropdown>
+        </div>
 
         <IdentityProviders identityProviders={identityProviders} />
-      </div>
+      </PaneBody>
     </>
   );
 };