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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

openshift-merge-bot merged 14 commits into openshift:main from rhamilto:CONSOLE-4514

Mar 30, 2025

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

-Original file line number
+Diff line change
@@ Expand Up / @@ -262,7 +262,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",
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
@@ Expand Down @@

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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>

        </>

      );

    };

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!