@openshift-assisted/ui-lib 2.13.0-cim → 2.14.1-cim

package/lib/common/components/ui/CustomToolbarFilter.tsx

@@ -0,0 +1,134 @@
+// This component resolves the folowing bug: https://issues.redhat.com/browse/MGMT-18567
+// Once this issues is addressed in PatternFly, this component should be removed.
+
+import {
+  Chip,
+  ChipGroup,
+  PickOptional,
+  ToolbarChip,
+  ToolbarContentContext,
+  ToolbarContext,
+  ToolbarFilterProps,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+interface ToolbarFilterState {
+  isMounted: boolean;
+}
+
+class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
+  static displayName = 'CustomToolbarFilter';
+  static contextType = ToolbarContext;
+  context!: React.ContextType<typeof ToolbarContext>;
+  static defaultProps: PickOptional<ToolbarFilterProps> = {
+    chips: [] as (string | ToolbarChip)[],
+    showToolbarItem: true,
+  };
+
+  constructor(props: ToolbarFilterProps) {
+    super(props);
+    this.state = {
+      isMounted: false,
+    };
+  }
+
+  componentDidMount() {
+    const { categoryName, chips } = this.props;
+    this.context.updateNumberFilters(
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString(),
+      chips ? chips.length : 0,
+    );
+    this.setState({ isMounted: true });
+  }
+
+  componentDidUpdate() {
+    const { categoryName, chips } = this.props;
+    this.context.updateNumberFilters(
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString(),
+      chips ? chips.length : 0,
+    );
+  }
+
+  render() {
+    const {
+      children,
+      chips,
+      deleteChipGroup,
+      deleteChip,
+      chipGroupExpandedText,
+      chipGroupCollapsedText,
+      categoryName,
+      showToolbarItem,
+      isExpanded,
+      expandableChipContainerRef,
+      ...props
+    } = this.props;
+    const { isExpanded: managedIsExpanded, chipGroupContentRef } = this.context;
+    const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
+    const categoryKey =
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString();
+
+    const chipGroup =
+      chips !== undefined && chips.length ? (
+        <ToolbarItem variant="chip-group">
+          <ChipGroup
+            key={categoryKey}
+            categoryName={typeof categoryName === 'string' ? categoryName : categoryName.name}
+            isClosable={deleteChipGroup !== undefined}
+            onClick={() => deleteChipGroup && deleteChipGroup(categoryName)}
+            collapsedText={chipGroupCollapsedText}
+            expandedText={chipGroupExpandedText}
+          >
+            {chips.map((chip) =>
+              typeof chip === 'string' ? (
+                <Chip key={chip} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
+                  {chip}
+                </Chip>
+              ) : (
+                <Chip key={chip.key} onClick={() => deleteChip && deleteChip(categoryKey, chip)}>
+                  {chip.node}
+                </Chip>
+              ),
+            )}
+          </ChipGroup>
+        </ToolbarItem>
+      ) : null;
+
+    if (!_isExpanded && this.state.isMounted) {
+      return (
+        <React.Fragment>
+          {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
+          {chipGroupContentRef &&
+            chipGroupContentRef.current !== null &&
+            chipGroupContentRef.current.firstElementChild !== null &&
+            ReactDOM.createPortal(chipGroup, chipGroupContentRef.current.firstElementChild)}
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <ToolbarContentContext.Consumer>
+        {({ chipContainerRef }) => (
+          <React.Fragment>
+            {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
+            {chipContainerRef.current &&
+              ReactDOM.createPortal(chipGroup, chipContainerRef.current as Element)}
+            {expandableChipContainerRef &&
+              expandableChipContainerRef.current &&
+              ReactDOM.createPortal(chipGroup, expandableChipContainerRef.current)}
+          </React.Fragment>
+        )}
+      </ToolbarContentContext.Consumer>
+    );
+  }
+}
+
+export { CustomToolbarFilter };

package/lib/common/components/ui/DetailList.css

@@ -3,10 +3,10 @@
 }
 
 .detail-list dd {
-  margin-bottom: var(--pf-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .detail-list ul ul,
 .detail-list ul li {
-  margin-top: var(--pf-c-content--dt--sm--MarginTop);
+  margin-top: var(--pf-v5-c-content--dt--sm--MarginTop);
 }

package/lib/common/components/ui/DeveloperPreview.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
 
-export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverText'>;
+export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverContent'>;
 
 export const DeveloperPreview: React.FC<DeveloperPreviewProps> = (props) => {
   const { t } = useTranslation();
   return (
     <PreviewBadge
       text={t('ai:Developer Preview')}
-      popoverText={t(
+      popoverContent={t(
         'ai:Developer preview features are not intended to be used in production environments. The clusters deployed with the developer preview features are considered to be development clusters and are not supported through the Red Hat Customer Portal case management system.',
       )}
       {...props}

package/lib/common/components/ui/EventsList.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
 import { Button, ButtonVariant, Label } from '@patternfly/react-core';
-import { TableVariant, Table, TableBody, breakWord } from '@patternfly/react-table';
+import { Table, TableText, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { SearchIcon } from '@patternfly/react-icons/dist/js/icons/search-icon';
-import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
 import { Event, EventList } from '@openshift-assisted/types/assisted-installer-service';
 import { EmptyState } from './uiState';
 import { getHumanizedDateTime } from './utils';
-import { fitContent, noPadding } from './table';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
-const getEventRowKey = ({ rowData }: ExtraParamsType) =>
-  // eslint-disable-next-line
-  rowData?.props?.event.eventTime + rowData?.props?.event.message;
+const getEventRowKey = (event: Event) => event.eventTime + event.message;
 
 const getLabelColor = (severity: Event['severity']) => {
   switch (severity) {
@@ -73,11 +69,15 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
   const rows = events.map((event) => ({
     cells: [
       {
-        title: <strong>{getHumanizedDateTime(event.eventTime)}</strong>,
+        title: (
+          <TableText wrapModifier="fitContent" cellPadding={0}>
+            <strong>{getHumanizedDateTime(event.eventTime)}</strong>
+          </TableText>
+        ),
       },
       {
         title: (
-          <>
+          <TableText wrapModifier="breakWord">
             {event.severity !== 'info' && (
               <>
                 <Label color={getLabelColor(event.severity)} icon={getLabelIcon(event.severity)}>
@@ -85,8 +85,8 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
                 </Label>{' '}
               </>
             )}
-            {event.message}
-          </>
+            {event.message.replace(/\\n/, ' ')}
+          </TableText>
         ),
       },
     ],
@@ -94,17 +94,28 @@ const EventsList = ({ events, resetFilters }: EventsListProps) => {
   }));
 
   return (
-    <Table
-      rows={rows}
-      cells={[
-        { title: t('ai:Time'), cellTransforms: [fitContent, noPadding] },
-        { title: t('ai:Message'), cellTransforms: [breakWord] },
-      ]}
-      variant={TableVariant.compact}
-      aria-label={t('ai:Events table')}
-      borders={false}
-    >
-      <TableBody rowKey={getEventRowKey} />
+    <Table variant={TableVariant.compact} aria-label={t('ai:Events table')} borders={false}>
+      <Thead>
+        <Tr>
+          <Th>
+            <TableText wrapModifier="fitContent" cellPadding={0}>
+              {t('ai:Time')}
+            </TableText>
+          </Th>
+          <Th>
+            <TableText wrapModifier="breakWord">{t('ai:Message')}</TableText>
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows.map((row, i) => (
+          <Tr key={getEventRowKey(row.props.event)}>
+            {row.cells.map((cell, j) => (
+              <Td key={`cell-${i}-${j}`}>{cell.title}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
     </Table>
   );
 };

package/lib/common/components/ui/GridGap.tsx

@@ -4,6 +4,6 @@ import React from 'react';
  * This component allows to maintain grid gap behaviour of PF Form by wrapping
  * FormGroup components which are inside of Grid
  */
-const GridGap: React.FC = (props) => <div {...props} className="pf-c-form" />;
+const GridGap: React.FC = (props) => <div {...props} className="pf-v5-c-form" />;
 
 export default GridGap;

package/lib/common/components/ui/OpenShiftVersionDropdown.tsx

@@ -1,107 +1,157 @@
 import React from 'react';
+import {
+  HelperText,
+  FormGroup,
+  FormHelperText,
+  HelperTextItem,
+  Button,
+} from '@patternfly/react-core';
 import {
   DropdownItem,
   DropdownToggle,
   Dropdown,
-  HelperText,
-  FormGroup,
+  DropdownGroup,
   DropdownSeparator,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 
 import { OpenshiftVersionOptionType } from '../../types';
-import { TFunction } from 'i18next';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { useField } from 'formik';
+import { useField, useFormikContext } from 'formik';
 import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
+import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
+import './OpenshiftVersionDropdown.css';
 
-export type HelperTextType = (
-  versions: OpenshiftVersionOptionType[],
-  value: string | undefined,
-  t: TFunction,
-) => JSX.Element | null;
+export type HelperTextType = (value: string | undefined, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
-  items: {
-    label: string;
-    value: string;
-  }[];
+  items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
   getHelperText: HelperTextType;
   showReleasesLink: boolean;
+  showOpenshiftVersionModal: () => void;
+  customItems: ItemDropdown;
 };
 
+const getParsedVersions = (items: ItemDropdown) => {
+  const versionsY = Array.from(new Set(items.map((val) => val.value.match(/^\d+\.(\d+)/)?.[1])));
+
+  const parsedVersions = versionsY.map((y) => ({
+    y: y,
+    versions: items.filter((val) => val.value.match(/^\d+\.(\d+)/)?.[1] === y),
+  }));
+  return { parsedVersions: parsedVersions.reverse() };
+};
 export const OpenShiftVersionDropdown = ({
   name,
   items,
   versions,
   getHelperText,
   showReleasesLink,
+  showOpenshiftVersionModal,
+  customItems,
 }: OpenShiftVersionDropdownProps) => {
-  const [field, , { setValue }] = useField(name);
+  const [field, , { setValue }] = useField<string>(name);
   const [isOpen, setOpen] = React.useState(false);
   const { t } = useTranslation();
   const fieldId = getFieldId(name, 'input');
   const isDisabled = versions.length === 0;
+  const {
+    values: { customOpenshiftSelect },
+  } = useFormikContext<ClusterDetailsValues>();
+  const [current, setCurrent] = React.useState<string>();
 
-  const { defaultLabel, defaultValue } = React.useMemo(() => {
-    const defaultVersion = versions.find((item) => item.default);
-    return {
-      defaultLabel: defaultVersion?.label || '',
-      defaultValue: defaultVersion?.value || '',
-    };
-  }, [versions]);
-
-  const [helperText, setHelperText] = React.useState(getHelperText(versions, defaultValue, t));
-  const [current, setCurrent] = React.useState<string>(defaultLabel);
+  React.useEffect(() => {
+    const defaultVersion = customOpenshiftSelect
+      ? customOpenshiftSelect
+      : versions.find((item) => item.default);
+    setCurrent(defaultVersion?.label || '');
+    setValue(defaultVersion?.value || '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [customOpenshiftSelect]);
 
-  const versionsY = Array.from(new Set(items.map((val) => val.value.match(/^\d+\.(\d+)/)?.[1])));
-  const lastVersion = versionsY.slice(-1)[0];
-
-  const parsedVersions = versionsY.map((y) => ({
-    y: y,
-    versions: items.filter((val) => val.value.match(/^\d+\.(\d+)/)?.[1] === y),
-  }));
-
-  const dropdownItems = parsedVersions.map(({ y, versions }) => {
+  const parsedVersionsForItems = getParsedVersions(items);
+  let lastY: string | undefined = '';
+  const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => {
     const items = versions.map(({ value, label }) => (
       <DropdownItem key={value} id={value}>
         {label}
       </DropdownItem>
     ));
 
-    if (y !== lastVersion) {
+    if (lastY !== null && y !== lastY) {
       items.push(<DropdownSeparator key={`separator-${y || ''}`} />);
     }
-
+    lastY = y;
     return items;
   });
 
+  const parsedVersionsForCustomItems = getParsedVersions(customItems);
+  let lastCustomY: string | undefined = '';
+  const customDropdownItems = parsedVersionsForCustomItems.parsedVersions.map(({ y, versions }) => {
+    const customItems = versions.map(({ value, label }) => (
+      <DropdownItem key={value} id={value}>
+        {label}
+      </DropdownItem>
+    ));
+
+    if (lastCustomY !== null && y !== lastCustomY) {
+      customItems.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+    }
+    lastCustomY = y;
+
+    return customItems;
+  });
+
+  const dropdownGroup = [
+    <DropdownGroup label="Latest releases" key="latest-releases">
+      {dropdownItems}
+    </DropdownGroup>,
+    <DropdownGroup
+      label="Custom releases"
+      key="custom-releases"
+      hidden={customDropdownItems.length === 0}
+    >
+      {customDropdownItems}
+    </DropdownGroup>,
+    <DropdownGroup key="all-available-versions">
+      <DropdownItem key="all-versions" id="all-versions">
+        <Button
+          variant="link"
+          isInline
+          onClick={() => showOpenshiftVersionModal()}
+          id="show-all-versions"
+        >
+          Show all available versions
+        </Button>
+      </DropdownItem>
+    </DropdownGroup>,
+  ];
+
   const onSelect = React.useCallback(
     (event?: React.SyntheticEvent<HTMLDivElement>) => {
       const newLabel = event?.currentTarget.innerText;
-      const newValue = event?.currentTarget.id;
-      if (newLabel && newValue) {
+      const newValue = event?.currentTarget.id || '';
+      if (newLabel && newValue !== 'all-versions') {
         setCurrent(newLabel);
         setValue(newValue);
-        setHelperText(getHelperText(versions, newValue, t));
         setOpen(false);
       }
     },
-    [setCurrent, setHelperText, setOpen, getHelperText, t, versions, setValue],
+    [setValue],
   );
 
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(!isDisabled && val)}
+        onToggle={(_event, val) => setOpen(!isDisabled && val)}
         toggleIndicator={CaretDownIcon}
         isDisabled={isDisabled}
         isText
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
       >
         {current}
       </DropdownToggle>
@@ -109,6 +159,8 @@ export const OpenShiftVersionDropdown = ({
     [setOpen, current, isDisabled],
   );
 
+  const helperText = getHelperText(field.value);
+
   return (
     <FormGroup
       id={`form-control__${fieldId}`}
@@ -121,12 +173,18 @@ export const OpenShiftVersionDropdown = ({
         name={name}
         id={fieldId}
         onSelect={onSelect}
-        dropdownItems={dropdownItems}
+        dropdownItems={dropdownGroup}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-u-w-100"
+        className="pf-v5-u-w-100"
       />
-      <HelperText style={{ display: 'inherit' }}>{helperText}</HelperText>
+      {helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant="default">{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
       {showReleasesLink && (
         <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
           <span data-ouia-id="openshift-releases-link">