@openshift-assisted/ui-lib 2.7.12-cim → 2.8.3-cim

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Button, ButtonVariant, Label } from '@patternfly/react-core';
+import { TableVariant, Table, TableBody, breakWord } from '@patternfly/react-table';
+import {
+  InfoCircleIcon,
+  ExclamationTriangleIcon,
+  ExclamationCircleIcon,
+  SearchIcon,
+} from '@patternfly/react-icons';
+import { ExtraParamsType } from '@patternfly/react-table/dist/js/components/Table/base';
+import { Event, EventList } from '../../api';
+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 getLabelColor = (severity: Event['severity']) => {
+  switch (severity) {
+    case 'info':
+      return 'blue';
+    case 'warning':
+      return 'orange';
+    case 'error':
+      return 'red';
+    case 'critical':
+      return 'purple';
+  }
+};
+
+const getLabelIcon = (severity: Event['severity']) => {
+  switch (severity) {
+    case 'info':
+      return <InfoCircleIcon />;
+    case 'warning':
+      return <ExclamationTriangleIcon />;
+    case 'error':
+    case 'critical':
+      return <ExclamationCircleIcon />;
+  }
+};
+
+export type EventsListProps = {
+  events: EventList;
+  resetFilters: () => void;
+  className?: string;
+};
+
+const EventsList = ({ events, className, resetFilters }: EventsListProps) => {
+  const { t } = useTranslation();
+  if (events.length === 0) {
+    return (
+      <EmptyState
+        icon={SearchIcon}
+        title={t('ai:No matching events')}
+        content={t(
+          'ai:There are no events that match the current filters. Adjust or clear the filters to view events.',
+        )}
+        primaryAction={
+          <Button
+            variant={ButtonVariant.primary}
+            onClick={resetFilters}
+            id="empty-state-cluster-events-clear-filters-button"
+            data-ouia-id="button-clear-events-filter"
+          >
+            {t('ai:Clear filters')}
+          </Button>
+        }
+      />
+    );
+  }
+
+  const rows = events.map((event) => ({
+    cells: [
+      {
+        title: <strong>{getHumanizedDateTime(event.eventTime)}</strong>,
+      },
+      {
+        title: (
+          <>
+            {event.severity !== 'info' && (
+              <>
+                <Label color={getLabelColor(event.severity)} icon={getLabelIcon(event.severity)}>
+                  {event.severity}
+                </Label>{' '}
+              </>
+            )}
+            {event.message}
+          </>
+        ),
+      },
+    ],
+    props: { event },
+  }));
+
+  return (
+    <div className={className}>
+      <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>
+    </div>
+  );
+};
+
+export default EventsList;

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

@@ -0,0 +1,8 @@
+.events-modal__body {
+  display: flex;
+  flex-direction: column;
+}
+
+.events-modal__event-list {
+  overflow: auto;
+}

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { Text } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+interface ExternalLinkProps {
+  href?: string;
+  onClick?: VoidFunction;
+  children?: ReactNode;
+}
+const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children, onClick }) => (
+  <Text component="a" href={href} onClick={onClick} target="_blank" rel="noopener noreferrer">
+    {children ? children : href} <ExternalLinkAltIcon color="rgb(0, 123, 186)" />
+  </Text>
+);
+export default ExternalLink;

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

@@ -0,0 +1,9 @@
+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" />;
+
+export default GridGap;

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import {
+  Alert,
+  AlertVariant,
+  Progress,
+  ProgressMeasureLocation,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type ModalProgressProps = {
+  error?: {
+    title: string;
+    message: string;
+  };
+  progress: number | null;
+};
+
+const ModalProgress: React.FC<ModalProgressProps> = ({ error, progress }) => {
+  const { t } = useTranslation();
+  return (
+    <Stack hasGutter>
+      {error && (
+        <StackItem>
+          <Alert variant={AlertVariant.danger} title={error.title} isInline>
+            {error.message}
+          </Alert>
+        </StackItem>
+      )}
+      {progress !== null && (
+        <StackItem>
+          <Progress
+            value={progress}
+            measureLocation={ProgressMeasureLocation.outside}
+            aria-label={t('ai:Progress')}
+          />
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default ModalProgress;

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  DropdownItem,
+  DropdownToggle,
+  Dropdown,
+  HelperText,
+  FormGroup,
+  DropdownSeparator,
+} from '@patternfly/react-core';
+import { CaretDownIcon } from '@patternfly/react-icons';
+
+import { OpenshiftVersionOptionType } from '../../types';
+import { TFunction } from 'i18next';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { useField } from 'formik';
+import { getFieldId } from './formik';
+import ExternalLink from './ExternalLink';
+import { OCP_RELEASES_PAGE } from '../../config';
+
+export type HelperTextType = (
+  versions: OpenshiftVersionOptionType[],
+  value: string | undefined,
+  t: TFunction,
+) => JSX.Element | null;
+
+type OpenShiftVersionDropdownProps = {
+  name: string;
+  items: {
+    label: string;
+    value: string;
+  }[];
+  versions: OpenshiftVersionOptionType[];
+  getHelperText: HelperTextType;
+  showReleasesLink: boolean;
+};
+
+export const OpenShiftVersionDropdown = ({
+  name,
+  items,
+  versions,
+  getHelperText,
+  showReleasesLink,
+}: OpenShiftVersionDropdownProps) => {
+  const [field, , { setValue }] = useField(name);
+  const [isOpen, setOpen] = React.useState(false);
+  const { t } = useTranslation();
+  const fieldId = getFieldId(name, 'input');
+  const isDisabled = versions.length === 0;
+
+  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);
+
+  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 items = versions.map(({ value, label }) => (
+      <DropdownItem key={value} id={value}>
+        {label}
+      </DropdownItem>
+    ));
+
+    if (y !== lastVersion) {
+      items.push(<DropdownSeparator key={`separator-${y || ''}`} />);
+    }
+
+    return items;
+  });
+
+  const onSelect = React.useCallback(
+    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+      const newLabel = event?.currentTarget.innerText;
+      const newValue = event?.currentTarget.id;
+      if (newLabel && newValue) {
+        setCurrent(newLabel);
+        setValue(newValue);
+        setHelperText(getHelperText(versions, newValue, t));
+        setOpen(false);
+      }
+    },
+    [setCurrent, setHelperText, setOpen, getHelperText, t, versions, setValue],
+  );
+
+  const toggle = React.useMemo(
+    () => (
+      <DropdownToggle
+        onToggle={(val) => setOpen(!isDisabled && val)}
+        toggleIndicator={CaretDownIcon}
+        isDisabled={isDisabled}
+        isText
+        className="pf-u-w-100"
+      >
+        {current}
+      </DropdownToggle>
+    ),
+    [setOpen, current, isDisabled],
+  );
+
+  return (
+    <FormGroup fieldId={fieldId} label={t('ai:OpenShift version')} isRequired>
+      <Dropdown
+        {...field}
+        name={name}
+        id={fieldId}
+        onSelect={onSelect}
+        dropdownItems={dropdownItems}
+        toggle={toggle}
+        isOpen={isOpen}
+        className="pf-u-w-100"
+      />
+      <HelperText style={{ display: 'inherit' }}>{helperText}</HelperText>
+      {showReleasesLink && (
+        <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
+          <span data-ouia-id="openshift-releases-link">
+            {t('ai:Learn more about OpenShift releases')}
+          </span>
+        </ExternalLink>
+      )}
+    </FormGroup>
+  );
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Button, ButtonProps, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
+import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
+
+type PopoverIconProps = PopoverProps & {
+  variant?: ButtonProps['variant'];
+  component?: ButtonProps['component'];
+  IconComponent?: React.ComponentClass<SVGIconProps>;
+  noVerticalAlign?: boolean;
+  buttonClassName?: string;
+  buttonOuiaId?: string;
+  buttonStyle?: React.CSSProperties;
+};
+
+const PopoverIcon: React.FC<PopoverIconProps> = ({
+  component,
+  variant = 'plain',
+  IconComponent = OutlinedQuestionCircleIcon,
+  noVerticalAlign = false,
+  buttonClassName,
+  buttonOuiaId,
+  buttonStyle,
+  ...props
+}) => (
+  <Popover {...props}>
+    <Button
+      component={component}
+      variant={variant}
+      onClick={(e) => e.preventDefault()}
+      className={classNames('pf-c-form__group-label-help', 'pf-u-p-0', buttonClassName)}
+      ouiaId={buttonOuiaId}
+      style={buttonStyle}
+    >
+      <IconComponent noVerticalAlign={noVerticalAlign} />
+    </Button>
+  </Popover>
+);
+
+export default PopoverIcon;

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Label, Popover } from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import { TECH_SUPPORT_LEVEL_LINK } from '../../config/constants';
+import ExternalLink from './ExternalLink';
+import { WithTestID } from '../../types';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+export type DeveloperPreviewProps = {
+  position?: PreviewBadgePosition;
+  className?: string;
+} & WithTestID;
+
+export type TechnologyPreviewProps = DeveloperPreviewProps;
+
+export enum PreviewBadgePosition {
+  default,
+  inline,
+  inlineRight,
+}
+
+type PreviewBadgeProps = DeveloperPreviewProps & {
+  text: string;
+  externalLink?: string;
+  popoverText: string;
+};
+
+const PreviewBadge: React.FC<PreviewBadgeProps> = ({
+  position = PreviewBadgePosition.inline,
+  className = 'pf-u-ml-md',
+  text,
+  popoverText,
+  externalLink,
+  testId,
+}) => {
+  let clsName = className;
+  const { t } = useTranslation();
+  switch (position) {
+    case PreviewBadgePosition.inlineRight:
+      clsName += ' pf-u-float-right';
+      break;
+    case PreviewBadgePosition.inline:
+      clsName += ' pf-u-display-inline';
+      break;
+  }
+  const bodyContent = (
+    <>
+      <div style={{ marginBottom: 'var(--pf-global--spacer--sm)' }}>{popoverText}</div>
+      {externalLink && (
+        <>
+          <ExternalLink href={externalLink}>{t('ai:Learn more')}</ExternalLink>
+        </>
+      )}
+    </>
+  );
+  return (
+    <span onClick={(e) => e.preventDefault()}>
+      <Popover bodyContent={bodyContent} position="top">
+        <Label
+          style={{ cursor: 'pointer' }}
+          color="orange"
+          icon={<InfoCircleIcon color="var(--pf-c-label__content--Color)" />}
+          className={clsName}
+          {...(testId ? { 'data-testid': testId } : {})}
+        >
+          {text}
+        </Label>
+      </Popover>
+    </span>
+  );
+};
+
+export const DeveloperPreview: React.FC<DeveloperPreviewProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <PreviewBadge
+      text={t('ai:Developer Preview')}
+      popoverText={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}
+    />
+  );
+};
+DeveloperPreview.displayName = 'DeveloperPreview';
+
+export const TechnologyPreview: React.FC<TechnologyPreviewProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <PreviewBadge
+      text={t('ai:Technology Preview')}
+      popoverText={t(
+        'ai:Technology preview features provide early access to upcoming product innovations, enabling you to test functionality and provide feedback during the development process.',
+      )}
+      externalLink={TECH_SUPPORT_LEVEL_LINK}
+      {...props}
+    />
+  );
+};
+TechnologyPreview.displayName = 'TechnologyPreview';

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

@@ -0,0 +1,4 @@
+pre.prism-code {
+  padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
+  overflow-x: auto;
+}

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-renderer';
+import { Text, TextVariants, ClipboardCopy, clipboardCopyFunc } from '@patternfly/react-core';
+import {
+  global_Color_100,
+  global_palette_purple_400,
+  global_palette_blue_300,
+} from '@patternfly/react-tokens';
+import defaultTheme from 'prism-react-renderer/themes/github';
+import './PrismCode.css';
+export const SimpleAIPrismTheme = {
+  plain: {
+    color: global_Color_100.value,
+    backgroundColor: defaultTheme.plain.backgroundColor,
+    fontSize: '.93em',
+  },
+  styles: [
+    {
+      types: ['variable'],
+      style: {
+        color: global_palette_blue_300.value,
+      },
+    },
+    {
+      types: ['class-name', 'function', 'tag', 'attr-name'],
+      style: {
+        color: global_palette_purple_400.value,
+      },
+    },
+  ],
+};
+type PrismCodeProps = {
+  code: string;
+  language?: Language;
+  theme?: PrismTheme;
+  copiable?: boolean;
+};
+const PrismCode: React.FC<PrismCodeProps> = ({
+  code,
+  language = 'bash',
+  theme = defaultTheme,
+  copiable = false,
+}) => (
+  <Highlight {...defaultProps} code={code} language={language} theme={theme}>
+    {({ className, style, tokens, getLineProps, getTokenProps }) => (
+      <Text component={TextVariants.pre} className={className} style={style}>
+        {copiable && (
+          <ClipboardCopy
+            isReadOnly
+            variant={'inline-compact'}
+            onCopy={(e) => clipboardCopyFunc(e, code)}
+            style={{ float: 'right', background: 'inherit' }}
+          >
+            {}
+          </ClipboardCopy>
+        )}
+        {tokens.map((line, i) => (
+          <div key={i} {...getLineProps({ line, key: i })}>
+            {line.map((token, key) => (
+              <span key={key} {...getTokenProps({ token, key })} />
+            ))}
+          </div>
+        ))}
+      </Text>
+    )}
+  </Highlight>
+);
+
+export default PrismCode;

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

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+
+interface RenderIfProps {
+  condition: boolean;
+}
+
+export const RenderIf = ({ condition = false, children }: PropsWithChildren<RenderIfProps>) =>
+  condition ? <>{children}</> : null;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TextContent, Text, TextVariants, GridItem } from '@patternfly/react-core';
+import { WithTestID } from '../../types';
+
+interface SectionTitleProps extends WithTestID {
+  title: string;
+}
+
+const SectionTitle = ({ title, testId }: SectionTitleProps) => (
+  <GridItem>
+    <TextContent>
+      <Text data-testid={testId} component={TextVariants.h3}>
+        {title}
+      </Text>
+    </TextContent>
+  </GridItem>
+);
+
+export default SectionTitle;

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

@@ -0,0 +1,6 @@
+.role-dropdown {
+  padding-left: 0;
+  padding-right: 0;
+  text-align: left;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { DropdownItem, DropdownToggle, Dropdown, DropdownProps } from '@patternfly/react-core';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import { HostRole } from '../../../common/types/hosts';
+import './SimpleDropdown.css';
+
+type SimpleDropdownProps = {
+  current?: string;
+  defaultValue: string;
+  items: HostRole[];
+  setValue: (value?: string) => void;
+  isDisabled: boolean;
+  idPrefix?: string;
+  menuAppendTo?: DropdownProps['menuAppendTo'];
+};
+
+export const SimpleDropdown = ({
+  current,
+  defaultValue,
+  items,
+  setValue,
+  isDisabled,
+  idPrefix,
+  menuAppendTo,
+}: SimpleDropdownProps) => {
+  const [isOpen, setOpen] = React.useState(false);
+  const dropdownItems = items.map(({ value, label, description }) => (
+    <DropdownItem key={value} id={value} description={description}>
+      {label}
+    </DropdownItem>
+  ));
+
+  const onSelect = React.useCallback(
+    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+      setValue(event?.currentTarget.id);
+      setOpen(false);
+    },
+    [setValue, setOpen],
+  );
+
+  const toggle = React.useMemo(
+    () => (
+      <DropdownToggle
+        onToggle={(val) => setOpen(!isDisabled && val)}
+        toggleIndicator={CaretDownIcon}
+        isDisabled={isDisabled}
+        id={idPrefix ? `${idPrefix}-dropdown-toggle-items` : undefined}
+        className="role-dropdown"
+      >
+        {current || defaultValue}
+      </DropdownToggle>
+    ),
+    [setOpen, current, isDisabled, defaultValue, idPrefix],
+  );
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      dropdownItems={dropdownItems}
+      toggle={toggle}
+      isOpen={isOpen}
+      isPlain
+      id={idPrefix ? `${idPrefix}-dropdown-toggle` : undefined}
+      menuAppendTo={menuAppendTo}
+    />
+  );
+};