Upgrade to Patternfly 5 #1107

bipuladh · 2023-11-24T09:22:12Z

Major changes:

Packages related to Patternfly upgraded to v5.
Changes to how form validation is done.
......

packages/mco/components/create-dr-policy/select-cluster-list.tsx

packages/mco/components/empty-state-page/empty-page.tsx

SanjalKatiyar · 2024-03-06T09:28:33Z

packages/mco/components/mco-dashboard/disaster-recovery/cluster-app-card/common.tsx

+  Select as SelectNext /* data-codemods */,
+  SelectOption as SelectOptionNext /* data-codemods */,
+  SelectList as SelectListNext /* data-codemods */,
+  SelectGroup as SelectGroupNext /* data-codemods */,


shouldn't we remove /* data-codemods */ comments now ?

packages/mco/components/modals/app-data-policies-status/subscriptions/dr-status-table.tsx

SanjalKatiyar · 2024-03-06T09:31:48Z

packages/mco/components/modals/app-manage-policies/policy-list-view.tsx

-              {t('No assigned data policy found')}
-            </Title>
+            <EmptyStateHeader
+              titleText={<>{t('No assigned data policy found')}</>}


Suggested change

titleText={<>{t('No assigned data policy found')}</>}

titleText={t('No assigned data policy found')}

Expects React.ReactNode

packages/shared/src/table/selectable-table.tsx

tsconfig.json

webpack.config.ts

packages/mco/components/create-dr-policy/create-dr-policy.tsx

packages/mco/components/modals/app-manage-policies/helper/pvc-details-wizard-content.tsx

GowthamShanmugam · 2024-03-06T11:04:57Z

packages/ocs/storage-class/sc-form.tsx

@@ -460,18 +462,14 @@ export const StorageClassEncryption: React.FC<ProvisionerProps> = ({
  return (
    <div className="ocs-storage-class__form">
      <Form>
-        <FormGroup
-          fieldId="storage-class-encryption"
-          helperTextInvalid={t('This is a required field')}


Ignoring helperTextInvalid?

added a comment to add it in future as bug fix

packages/odf/components/kms-config/name-address-port.tsx

packages/odf/components/kms-config/thales-config.tsx

packages/odf/components/kms-config/name-address-port.tsx

packages/odf/components/kms-config/hpcs-config.tsx

GowthamShanmugam · 2024-03-06T13:21:46Z

packages/odf/components/kms-config/hpcs-config.tsx

+          <HelperText>
+            {isValid(kms.apiKey.valid) === ValidatedOptions.error && (
+              <HelperTextItem
+                variant={isValid(kms.apiKey.valid) ? 'default' : 'error'}


Suggested change

variant={isValid(kms.apiKey.valid) ? 'default' : 'error'}

variant={isValid(kms.apiKey.valid) }

packages/odf/components/kms-config/hpcs-config.tsx

packages/odf/components/kms-config/vault-auth-methods.tsx

packages/odf/components/kms-config/vault-config.tsx

Updates @openshift-console sdk to 1.0.0 Signed-off-by: Bipul Adhikari <badhikar@redhat.com>

SanjalKatiyar · 2024-03-07T05:43:52Z

analyzeTest.ts

@@ -1,7 +1,7 @@
 import * as fs from 'fs';

 const pluginName = process.env.PLUGIN;
-const MAX_ASSET_SIZE = 3; //3 MiB
+const MAX_ASSET_SIZE = 17; //17 MiB


is this intentional ? or were you testing something ?

Yes I will dicuss with ocp team later to reduce bundle size

bipuladh · 2024-03-07T07:48:11Z

/retest

bipuladh · 2024-03-07T10:09:52Z

/test odf-console-e2e-aws

bipuladh · 2024-03-07T14:44:27Z

/test odf-console-e2e-aws

SanjalKatiyar · 2024-03-07T16:37:49Z

/override ci/prow/odf-console-e2e-aws

openshift-ci · 2024-03-07T16:37:54Z

@SanjalKatiyar: Overrode contexts on behalf of SanjalKatiyar: ci/prow/odf-console-e2e-aws

In response to this:

/override ci/prow/odf-console-e2e-aws

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

SanjalKatiyar · 2024-03-07T16:38:23Z

/lgtm

openshift-ci · 2024-03-07T16:38:33Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: bipuladh, SanjalKatiyar

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [SanjalKatiyar,bipuladh]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

SanjalKatiyar · 2024-03-07T16:39:54Z

/override ci/prow/odf-console-e2e-aws

need to merge this in order to send/test followup CI fixes on release side...

SanjalKatiyar · 2024-03-07T16:48:10Z

packages/mco/components/modals/protected-applications/managed-applications-modal.tsx

@@ -80,7 +81,9 @@ const ManagedApplicationsModal: React.FC<CommonModalProps> = (props) => {
          isInline
        >
          {t('Continue to Applications page')}
-          <ArrowRightIcon size={IconSize.sm} className="pf-u-ml-sm" />
+          <Icon size="sm">
+            <ArrowRightIcon className="pf-u-ml-sm" />


there are other references in this file too...

Suggested change

<ArrowRightIcon className="pf-u-ml-sm" />

<ArrowRightIcon className="pf-v5-u-ml-sm" />

SanjalKatiyar · 2024-03-07T16:48:43Z

packages/mco/components/protected-applications/components.tsx

-                size={IconSize.sm}
-                className="pf-u-mr-sm"
-              />
+              <OutlinedQuestionCircleIcon className="pf-u-mr-sm" />


there are other references in this file too...

Suggested change

<OutlinedQuestionCircleIcon className="pf-u-mr-sm" />

<OutlinedQuestionCircleIcon className="pf-v5-u-mr-sm" />

SanjalKatiyar · 2024-03-07T16:49:28Z

packages/mco/components/protected-applications/list-page.tsx

@@ -202,6 +204,7 @@ const ProtectedAppsTableRow: React.FC<
        <Td translate={null} isActionCell>
          <ActionsColumn
            items={getRowActions(t, launcher, navigate, application)}
+            translate={null}


this file as well, contains references to PF4 classes...

SanjalKatiyar · 2024-03-07T16:51:54Z

packages/shared/src/badges/Badge.scss

@@ -1,10 +1,10 @@
 .ocs-preview-badge {
  &.pf-c-label {


now we will have to override PF5 classes, I guess...

Suggested change

&.pf-c-label {

&.pf-v5-c-label {

SanjalKatiyar · 2024-03-07T16:52:24Z

packages/shared/src/badges/Badge.scss

@@ -1,10 +1,10 @@
 .ocs-preview-badge {
  &.pf-c-label {
    --pf-c-label--BackgroundColor: #d93f00;
-    --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--sm);
+    --pf-c-label--BorderRadius: var(--pf-v5-global--BorderRadius--sm);


aren't these variable names gonna get changed too ??

Suggested change

--pf-c-label--BorderRadius: var(--pf-v5-global--BorderRadius--sm);

--pf-v5-c-label--BorderRadius: var(--pf-v5-global--BorderRadius--sm);

SanjalKatiyar · 2024-03-07T16:54:01Z

packages/shared/src/list-page/paginated-list-page.tsx

@@ -62,7 +62,6 @@ export const PaginatedsListPage: React.FC<PaginatedsListPageProps> = ({
            </GridItem>
            <GridItem md={4} sm={12}>
              <Pagination
-                perPageComponent="button"


this file contains ref to PF4 classes too...

SanjalKatiyar · 2024-03-07T16:54:48Z

packages/shared/src/table/composable-table.tsx

@@ -63,11 +63,7 @@ export const ComposableTable: ComposableTableProps = <
      NoDataEmptyMsg={noDataMsg}
      skeleton={<div className="loading-skeleton--table pf-u-mt-lg" />}


PF4 refs in this file...

SanjalKatiyar · 2024-03-07T16:55:18Z

packages/shared/src/table/selectable-table.tsx

@@ -101,7 +102,7 @@ export const SelectableTable: SelectableTableProps = <
      data={sortedRows}
      skeleton={<div className="loading-skeleton--table pf-u-mt-lg" />}


PF4 refs...

SanjalKatiyar · 2024-03-07T16:55:44Z

packages/shared/src/table/table.tsx

@@ -103,7 +103,7 @@ const Table: React.FC<TableProps> = React.memo(
        NoDataEmptyMsg={noDataMsg}
        skeleton={<div className="loading-skeleton--table pf-u-mt-lg" />}


openshift-ci bot added the do-not-merge/work-in-progress label Nov 24, 2023

openshift-merge-robot added the needs-rebase label Nov 24, 2023

openshift-ci bot added the approved label Nov 24, 2023

bipuladh force-pushed the pf5 branch from 54794d6 to c52b098 Compare February 21, 2024 09:07

openshift-merge-robot added needs-rebase and removed needs-rebase labels Feb 21, 2024

SanjalKatiyar reviewed Mar 6, 2024

View reviewed changes