@openshift-assisted/ui-lib 2.44.5 → 2.46.0

package/lib/ocm/components/clusters/Clusters.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import {
-  Button,
-  ButtonVariant,
-  PageSectionVariants,
-  TextContent,
-  Text,
-  PageSection,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, Content, PageSection } from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons/dist/js/icons/add-circle-o-icon';
 import {
   ResourceUIState,
@@ -79,13 +72,13 @@ const Clusters = () => {
   switch (uiState.current) {
     case LOADING:
       return (
-        <PageSection variant={PageSectionVariants.light} isFilled>
+        <PageSection hasBodyWrapper={false} isFilled>
           <LoadingState />
         </PageSection>
       );
     case EMPTY:
       return (
-        <PageSection variant={PageSectionVariants.light} isFilled>
+        <PageSection hasBodyWrapper={false} isFilled>
           <EmptyState
             icon={AddCircleOIcon}
             title="Create new assisted cluster"
@@ -106,7 +99,7 @@ const Clusters = () => {
     default:
       if (clusterRows.length === 0 && uiState.current === POLLING_ERROR) {
         return (
-          <PageSection variant={PageSectionVariants.light} isFilled>
+          <PageSection hasBodyWrapper={false} isFilled>
             <ErrorState title="Failed to fetch clusters." fetchData={fetchClusters} />
           </PageSection>
         );
@@ -114,12 +107,12 @@ const Clusters = () => {
         return (
           <>
             <ClusterBreadcrumbs />
-            <PageSection variant={PageSectionVariants.light}>
-              <TextContent>
-                <Text component="h1">Assisted Clusters</Text>
-              </TextContent>
+            <PageSection hasBodyWrapper={false}>
+              <Content>
+                <Content component="h1">Assisted Clusters</Content>
+              </Content>
             </PageSection>
-            <PageSection variant={PageSectionVariants.light} isFilled>
+            <PageSection hasBodyWrapper={false} isFilled>
               <Alerts />
               <ClustersTable rows={clusterRows} deleteCluster={deleteClusterAsync} />
             </PageSection>

package/lib/ocm/components/clusters/ClustersListToolbar.tsx

@@ -85,7 +85,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     onSelect('status', isSelectEventChecked(event), value);
   };
 
-  const onDeleteChip: ToolbarFilterProps['deleteChip'] = (type, id) => {
+  const onDeleteLabel: ToolbarFilterProps['deleteLabel'] = (type, id) => {
     if (type) {
       setFilters({
         ...filters,
@@ -96,7 +96,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
     }
   };
 
-  const onDeleteChipGroup: ToolbarFilterProps['deleteChipGroup'] = (type) => {
+  const onDeleteLabelGroup: ToolbarFilterProps['deleteLabelGroup'] = (type) => {
     setFilters({
       ...filters,
       [type as string]: [],
@@ -135,9 +135,9 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
           </InputGroup>
         </ToolbarItem>
         <CustomToolbarFilter
-          chips={filters.status}
-          deleteChip={onDeleteChip}
-          deleteChipGroup={onDeleteChipGroup}
+          labels={filters.status}
+          deleteLabel={onDeleteLabel}
+          deleteLabelGroup={onDeleteLabelGroup}
           categoryName="status"
         >
           <Dropdown
@@ -180,8 +180,10 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
         >
           Create Cluster
         </ToolbarButton>
-        {clustersUIState === ResourceUIState.RELOADING && <Spinner size="lg" />}
-        <ToolbarGroup align={{ lg: 'alignRight' }}>
+        {clustersUIState === ResourceUIState.RELOADING && (
+          <Spinner size="lg" data-testid="clusters-list-toolbar-spinner" />
+        )}
+        <ToolbarGroup align={{ lg: 'alignEnd' }}>
           <ToolbarButton
             variant={ButtonVariant.plain}
             onClick={() => fetchClusters()}

package/lib/ocm/components/clusters/DeleteClusterModal.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Modal, Button, ModalVariant } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 
 type DeleteClusterModalProps = {
   name: string;

package/lib/ocm/components/clusters/NewClusterPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageSectionVariants, PageSection } from '@patternfly/react-core';
+import { PageSection } from '@patternfly/react-core';
 import { AlertsContextProvider } from '../../../common';
 import ClusterBreadcrumbs from './ClusterBreadcrumbs';
 import { ClusterDefaultConfigurationProvider } from '../clusterConfiguration/ClusterDefaultConfigurationContext';
@@ -25,10 +25,10 @@ const NewClusterPageGeneric = ({ children }: React.PropsWithChildren<unknown>) =
             <OpenShiftVersionsContextProvider>
               <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
                 {children}
-                <PageSection variant={PageSectionVariants.light}>
+                <PageSection hasBodyWrapper={false} isFilled>
                   <AssistedInstallerHeader />
                 </PageSection>
-                <PageSection variant={PageSectionVariants.light} isFilled>
+                <PageSection hasBodyWrapper={false} isFilled>
                   <ClusterWizardContextProvider>
                     <NewClusterWizard />
                   </ClusterWizardContextProvider>

package/lib/ocm/components/featureSupportLevels/ReviewClusterFeatureSupportLevels.tsx

@@ -1,8 +1,9 @@
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import React from 'react';
-import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import { Text, TextList, TextListItem, TextContent } from '@patternfly/react-core';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { t_global_color_status_info_100 as infoColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_info_100';
+import { Content } from '@patternfly/react-core';
 import {
   FeatureId,
   FeatureIdToSupportLevel,
@@ -64,14 +65,16 @@ const getPreviewFeatureList = (supportLevelMap: FeatureIdToSupportLevel) => {
     return null;
   }
   const featureList = previewSupportLevels[supportLevel].map((featureId: FeatureId) => (
-    <TextListItem key={featureId}>{getFeatureReviewText(featureId)}</TextListItem>
+    <Content component="li" key={featureId}>
+      {getFeatureReviewText(featureId)}
+    </Content>
   ));
   return (
     <>
-      <TextListItem>
+      <Content component="li">
         {getPreviewSupportLevelTitle(supportLevel)}
-        <TextList>{featureList}</TextList>
-      </TextListItem>
+        <Content component="ul">{featureList}</Content>
+      </Content>
     </>
   );
 };
@@ -83,21 +86,21 @@ export const LimitedSupportedCluster = ({
   clusterFeatureSupportLevels: FeatureIdToSupportLevel;
   showVersionWarning: boolean;
 }) => (
-  <TextContent>
+  <Content>
     {showVersionWarning && (
-      <Text>
-        <UiIcon size="sm" icon={<InfoCircleIcon color="var(--pf-v5-global--info-color--100)" />} />
+      <Content component="p">
+        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
         &nbsp;The installed OpenShift version is not production-ready
-      </Text>
+      </Content>
     )}
     {Object.keys(clusterFeatureSupportLevels).length > 0 && (
       <>
-        <UiIcon size="sm" icon={<InfoCircleIcon color="var(--pf-v5-global--info-color--100)" />} />
+        <UiIcon size="sm" icon={<InfoCircleIcon color={infoColor.var} />} />
         &nbsp;Your cluster will be subject to support limitations because it includes:
-        <TextList>{getPreviewFeatureList(clusterFeatureSupportLevels)}</TextList>
+        <Content component="ul">{getPreviewFeatureList(clusterFeatureSupportLevels)}</Content>
       </>
     )}
-  </TextContent>
+  </Content>
 );
 
 export const FullySupportedCluster = () => (
@@ -166,7 +169,7 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
           />
         )
       }
-      classNameValue={'pf-v5-u-mb-md'}
+      classNameValue={'pf-v6-u-mb-md'}
       testId="feature-support-levels"
     />
   );

package/lib/ocm/components/hosts/DeleteHostModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Modal, ModalVariant, Button, ButtonVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 type DeleteHostModalProps = {

package/lib/ocm/components/hosts/HostRequirementsContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
+import { List, ListItem, Content } from '@patternfly/react-core';
 import { DISK_WRITE_SPEED_LINK, ErrorState, ExternalLink, LoadingState } from '../../../common';
 import { useClusterPreflightRequirements } from '../../hooks';
 import { fileSize } from '../../../common/utils';
@@ -41,9 +41,11 @@ const HostRequirementsContent = ({
 
   if (isAddingHosts) {
     return (
-      <TextContent>
-        <Text component={'p'}>{`Worker hosts must have at least ${contentForWorkerNodes}`}</Text>
-      </TextContent>
+      <Content>
+        <Content
+          component={'p'}
+        >{`Worker hosts must have at least ${contentForWorkerNodes}`}</Content>
+      </Content>
     );
   }
 

package/lib/ocm/components/hosts/ResetHostModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Modal, ModalVariant, Button, ButtonVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 
 type ResetHostModalProps = {
   hostname?: string;

package/lib/ocm/components/hosts/UpdateDay2ApiVipForm.tsx

@@ -1,13 +1,7 @@
 import React from 'react';
 import * as Yup from 'yup';
-import {
-  Button,
-  ButtonVariant,
-  ButtonType,
-  Form,
-  ModalBoxBody,
-  ModalBoxFooter,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, ButtonType, Form } from '@patternfly/react-core';
+import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik } from 'formik';
 import {
   AlertFormikError,

package/lib/ocm/components/hosts/UpdateDay2ApiVipModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import UpdateDay2ApiVipForm, { UpdateDay2ApiVipFormProps } from './UpdateDay2ApiVipForm';
 
 type UpdateDay2ApiVipModalProps = {

package/lib/ocm/components/ui/InfoLinkWithModal.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  IconComponentProps,
-  Modal,
-  ModalProps,
-} from '@patternfly/react-core';
+import { Button, ButtonVariant, IconComponentProps } from '@patternfly/react-core';
+import { Modal, ModalProps } from '@patternfly/react-core/deprecated';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { UiIcon } from '../../../common';
 

package/package.json

@@ -1,15 +1,15 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.44.5",
-    "@openshift-assisted/types": "2.44.5",
+    "@openshift-assisted/locales": "2.46.0",
+    "@openshift-assisted/types": "2.46.0",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
-    "@patternfly/patternfly": "5.2.0",
-    "@patternfly/react-code-editor": "5.2.0",
-    "@patternfly/react-core": "5.2.0",
-    "@patternfly/react-icons": "5.2.0",
-    "@patternfly/react-styles": "5.2.0",
-    "@patternfly/react-table": "5.2.0",
-    "@patternfly/react-tokens": "5.2.0",
+    "@patternfly/patternfly": "6.2.3",
+    "@patternfly/react-code-editor": "6.2.2",
+    "@patternfly/react-core": "6.2.2",
+    "@patternfly/react-icons": "6.2.2",
+    "@patternfly/react-styles": "6.2.2",
+    "@patternfly/react-table": "6.2.2",
+    "@patternfly/react-tokens": "6.2.2",
     "axios-case-converter": "^0.11.1",
     "camel-case": "^4.1.2",
     "cidr-tools": "^4.3.0",
@@ -125,7 +125,7 @@
     "format": "yarn run -T prettier --cache --check . \"!build\"",
     "fix-code-style": "yarn lint --fix && yarn format --write",
     "lint": "yarn run -T eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache .",
-    "test": "vitest"
+    "test": "vitest run"
   },
   "typesVersions": {
     "*": {
@@ -140,5 +140,5 @@
       ]
     }
   },
-  "version": "2.44.5"
+  "version": "2.46.0"
 }

package/lib/ocm/hooks/_use-feature-detection.test.tsx

@@ -1,115 +0,0 @@
-import type { Account, Organization } from '@openshift-assisted/types/accounts-management-service';
-import { describe, it, vi, expect } from 'vitest';
-import * as React from 'react';
-import { Provider } from 'react-redux';
-import { act } from 'react-dom/test-utils';
-import { featureFlagsActions } from '../store/slices/feature-flags/slice';
-import { storeDay1 } from '../store/store-day1';
-import { useFeatureDetection } from './use-feature-detection';
-import { CurrentAccountApi } from '../../common/api/accounts-management-service/current-account-api';
-import { OrganizationsApi } from '../../common/api/accounts-management-service/organizations-api';
-import { getMockContainer } from '../../_test-helpers/mock-container';
-
-vi.spyOn(featureFlagsActions, 'setFeatureFlag');
-vi.spyOn(CurrentAccountApi, 'getCurrentAccount').mockImplementation(() => {
-  return Promise.resolve({
-    username: 'jdoe',
-  } as Account);
-});
-
-const makeSpyOn$OrganizationsApi$getOrganization = (mockResponse: Organization) =>
-  vi.spyOn(OrganizationsApi, 'getOrganization').mockImplementation(() => {
-    return Promise.resolve(mockResponse);
-  });
-
-describe('use-feature-detection.ts', () => {
-  it('Sets only external features when no overrides are provided', async () => {
-    const DummyComponent: React.FC = () => {
-      useFeatureDetection();
-      return null;
-    };
-    makeSpyOn$OrganizationsApi$getOrganization({
-      capabilities: [
-        {
-          name: 'capability.organization.bare_metal_installer_platform_oci',
-          value: 'true',
-          inherited: true,
-        },
-      ],
-    });
-
-    const mockContainer = getMockContainer();
-
-    if (mockContainer) {
-      await act(() =>
-        Promise.resolve(
-          mockContainer.render(
-            <Provider store={storeDay1}>
-              <DummyComponent />
-            </Provider>,
-          ),
-        ),
-      );
-    }
-  });
-
-  it('Internal features override external features', async () => {
-    const DummyComponent: React.FC = () => {
-      return null;
-    };
-    makeSpyOn$OrganizationsApi$getOrganization({
-      capabilities: [
-        {
-          name: 'capability.organization.bare_metal_installer_platform_oci',
-          value: 'false',
-          inherited: true,
-        },
-      ],
-    });
-
-    const mockContainer = getMockContainer();
-
-    if (mockContainer) {
-      await act(() =>
-        Promise.resolve(
-          mockContainer.render(
-            <Provider store={storeDay1}>
-              <DummyComponent />
-            </Provider>,
-          ),
-        ),
-      );
-    }
-  });
-
-  it('Processes only features prefixed with ASSISTED_INSTALLER', async () => {
-    const featuresOverride = { NON_ASSISTED_INSTALLER_FEATURE: true };
-    const DummyComponent: React.FC = () => {
-      useFeatureDetection(featuresOverride);
-      return null;
-    };
-
-    const mockContainer = getMockContainer();
-
-    if (mockContainer) {
-      await act(() =>
-        Promise.resolve(
-          mockContainer.render(
-            <Provider store={storeDay1}>
-              <DummyComponent />
-            </Provider>,
-          ),
-        ),
-      );
-    }
-    /* Here we don't mock the call to the user organization API, therefore the
-     * capabilities in the currentUser slice should remain undefined, since the list
-     * of featuresOverride should get filtered out of features not prefixed with
-     * "ASSISTED_INSTALLER" there should be no call to setFeatureFlag.
-     */
-    expect(featureFlagsActions.setFeatureFlag).not.toHaveBeenCalled();
-    expect(
-      storeDay1.getState().featureFlags.data['NON_ASSISTED_INSTALLER_FEATURE'],
-    ).not.toBeDefined();
-  });
-});