@flightctl/ui-components 0.0.3 → 0.0.5

package/src/components/charts/DonutChart.tsx

@@ -0,0 +1,115 @@
+import { ChartContainer, ChartDonut } from '@patternfly/react-charts';
+import { Flex, FlexItem, Stack, StackItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import * as React from 'react';
+import { Link, LinkProps } from '../../hooks/useNavigate';
+import WithHelperText from '../common/WithHelperText';
+import { useTranslation } from '../../hooks/useTranslation';
+import { getDefaultStatusColor } from '../../utils/status/common';
+
+import './DonutChart.css';
+
+export type Data = {
+  x: string;
+  y: number;
+  color: string;
+  link: LinkProps;
+  tooltip: string;
+};
+
+const Legend = ({ rows }: { rows: Data[][] }) => {
+  return (
+    <Stack>
+      {rows.map((r, index) => (
+        <StackItem key={index}>
+          <Flex rowGap={{ default: 'rowGapNone' }} columnGap={{ default: 'columnGapMd' }}>
+            {r.map((datum, index) => (
+              <FlexItem key={index}>
+                <LegendItem key={datum.x} color={datum.color}>
+                  <span>
+                    {`${datum.y}%`} <Link {...datum.link}>{datum.x}</Link>
+                  </span>
+                </LegendItem>
+              </FlexItem>
+            ))}
+          </Flex>
+        </StackItem>
+      ))}
+    </Stack>
+  );
+};
+
+const LegendItem = ({ children, color }: { children: React.ReactNode; color: string }) => {
+  return (
+    <Flex
+      flexWrap={{ default: 'nowrap' }}
+      alignItems={{ default: 'alignItemsBaseline' }}
+      justifyContent={{ default: 'justifyContentFlexStart' }}
+      columnGap={{ default: 'columnGapXs' }}
+    >
+      <FlexItem>
+        <div
+          style={{
+            backgroundColor: color,
+            height: '10px',
+            width: '10px',
+          }}
+        />
+      </FlexItem>
+      <FlexItem>{children}</FlexItem>
+    </Flex>
+  );
+};
+
+const DonutChart = ({ data, title, helperText }: { data: Data[]; title: string; helperText?: string }) => {
+  const { t } = useTranslation();
+  const firstRow = data.slice(0, Math.floor(data.length / 2));
+  const secondRow = data.slice(Math.floor(data.length / 2), data.length);
+
+  const isEmpty = !data.some(({ y }) => !!y);
+
+  return (
+    <Flex
+      justifyContent={{ default: 'justifyContentCenter' }}
+      direction={{ default: 'column' }}
+      alignItems={{ default: 'alignItemsCenter' }}
+    >
+      <FlexItem className="fctl-charts__donut">
+        <div style={{ height: '230px', width: '230px' }}>
+          <ChartContainer>
+            <foreignObject x="0" y="0" width="230px" height="230px">
+              <Flex
+                alignItems={{ default: 'alignItemsCenter' }}
+                justifyContent={{ default: 'justifyContentCenter' }}
+                alignContent={{ default: 'alignContentCenter' }}
+                className="fctl-charts__title"
+              >
+                {helperText ? <WithHelperText showLabel ariaLabel={title} content={helperText} /> : title}
+              </Flex>
+            </foreignObject>
+            <ChartDonut
+              ariaDesc={title}
+              ariaTitle={title}
+              constrainToVisibleArea
+              colorScale={isEmpty ? [getDefaultStatusColor('unknown')] : data.map((datum) => datum.color)}
+              data={isEmpty ? [{ y: 100 }] : data}
+              name={title}
+              standalone={false}
+              labels={isEmpty ? [] : data.map((datum) => datum.tooltip)}
+            />
+          </ChartContainer>
+        </div>
+      </FlexItem>
+      <FlexItem>
+        {isEmpty ? (
+          <TextContent>
+            <Text component={TextVariants.small}>{t('No devices')}</Text>
+          </TextContent>
+        ) : (
+          <Legend rows={[firstRow, secondRow]} />
+        )}
+      </FlexItem>
+    </Flex>
+  );
+};
+
+export default DonutChart;

package/src/components/charts/utils.ts

@@ -0,0 +1,38 @@
+import percentRound from 'percent-round';
+
+import { StatusItem, getDefaultStatusColor } from '../../utils/status/common';
+import { FilterSearchParams } from '../../utils/status/devices';
+import { ROUTE, Route } from '../../hooks/useNavigate';
+
+export type StatusMap = Record<string, number>;
+
+export const toChartData = <T extends string>(
+  map: StatusMap,
+  statusItems: StatusItem<T>[],
+  baseQuery: URLSearchParams,
+  filterName: FilterSearchParams,
+) => {
+  const statusMapList = Object.entries<number>(map);
+  const percentages = percentRound(statusMapList.map((entry) => entry[1]));
+
+  return statusItems.map((statusItem) => {
+    const statusId = statusItem.id;
+
+    // We lookup the index in the original array to get the current status percentage value
+    const entryIndex = statusMapList.findIndex((entry) => entry[0] === statusId);
+
+    const query = new URLSearchParams(baseQuery);
+    query.append(filterName, statusId);
+
+    return {
+      x: `${statusItem.label}`,
+      y: entryIndex === -1 ? 0 : percentages[entryIndex],
+      color: getDefaultStatusColor(statusItem.level),
+      link: {
+        to: ROUTE.DEVICES as Route,
+        query: query.toString(),
+      },
+      tooltip: `${map[statusId]} ${statusItem.label}`,
+    };
+  });
+};

package/src/components/common/CopyButton.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { CopyIcon } from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import { Button, ButtonProps, Icon, Tooltip } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+
+interface CopyButtonProps {
+  text: string;
+  variant?: ButtonProps['variant'];
+  ariaLabel?: string;
+}
+
+const CopyButton = ({ ariaLabel, text, variant }: CopyButtonProps) => {
+  const { t } = useTranslation();
+
+  const onCopy = () => {
+    void navigator.clipboard.writeText(text);
+  };
+
+  return (
+    <Tooltip content={ariaLabel || t('Copy text')}>
+      <Button
+        variant={variant || 'plain'}
+        isInline={variant === 'link'}
+        icon={
+          <Icon size="sm">
+            <CopyIcon onClick={onCopy} />
+          </Icon>
+        }
+        aria-label={ariaLabel || t('Copy text')}
+      />
+    </Tooltip>
+  );
+};
+
+export default CopyButton;

package/src/components/common/EditableLabelControl.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Button, TextInput } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+
+type EditableLabelControlProps = {
+  isEditable?: boolean;
+  addButtonText?: string;
+  defaultLabel: string;
+  onAddLabel: (text: string) => void;
+};
+
+const EditableLabelControl = ({
+  addButtonText,
+  defaultLabel,
+  onAddLabel,
+  isEditable = true,
+}: EditableLabelControlProps) => {
+  const [isEditing, setIsEditing] = React.useState<boolean>();
+  const [label, setLabel] = React.useState<string>('');
+  const { t } = useTranslation();
+
+  const onConfirmAdd = () => {
+    if (label) {
+      onAddLabel(label);
+      setIsEditing(false);
+      setLabel('');
+    }
+  };
+
+  const onDiscardAdd = () => {
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  return isEditing ? (
+    <TextInput
+      aria-label={t('New label')}
+      autoFocus
+      value={label}
+      onChange={(ev: React.FormEvent<HTMLInputElement>) => {
+        setLabel(ev.currentTarget.value);
+      }}
+      onBlur={onConfirmAdd}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onConfirmAdd();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          onDiscardAdd();
+        }
+      }}
+    />
+  ) : (
+    <Button
+      variant="link"
+      isDisabled={!isEditable}
+      onClick={() => {
+        setIsEditing(true);
+        setLabel(defaultLabel);
+      }}
+    >
+      {addButtonText || t('Add label')}
+    </Button>
+  );
+};
+
+export default EditableLabelControl;

package/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { TFunction, withTranslation } from 'react-i18next';
+import { Alert } from '@patternfly/react-core';
+
+import { getErrorMessage } from '../../utils/error';
+
+interface Props {
+  children?: React.ReactNode;
+  t: TFunction;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error;
+  info: React.ErrorInfo;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  state = {
+    hasError: false,
+    error: { message: '', stack: '' } as Error,
+    info: { componentStack: '' },
+  };
+
+  static getDerivedStateFromError = (/* error */) => {
+    return { hasError: true };
+  };
+
+  componentDidCatch = (error: Error, info: React.ErrorInfo) => {
+    this.setState({ error, info });
+  };
+
+  render() {
+    const { hasError, error } = this.state;
+    const { children, t } = this.props;
+    if (!hasError && !children) {
+      return null;
+    }
+
+    return hasError ? (
+      <Alert variant="danger" title={t('Unexpected error occurred')} isInline>
+        {t('Please reload the page and try again.')}
+        <details>{getErrorMessage(error)}</details>
+      </Alert>
+    ) : (
+      children
+    );
+  }
+}
+
+const TranslatedErrorBoundary = withTranslation()(ErrorBoundary);
+
+export default TranslatedErrorBoundary;

package/src/components/common/FlightCtlDescriptionList.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+// eslint-disable-next-line no-restricted-imports
+import { DescriptionList, DescriptionListProps } from '@patternfly/react-core';
+
+// Wrapper that adds the PF4 class for description lists as their styles are not loaded in the Console
+const FlightCtlDescriptionList = ({ children, ...rest }: DescriptionListProps) => (
+  <DescriptionList {...rest} className="pf-c-description-list">
+    {children}
+  </DescriptionList>
+);
+
+export default FlightCtlDescriptionList;

package/src/components/common/HelperTextItems.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { Button } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+
+export const KubernetesLabelHelperText = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {t('Must be a valid Kubernetes label')}{' '}
+      <Button
+        component="a"
+        variant="link"
+        isInline
+        icon={<ExternalLinkAltIcon />}
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/"
+      >
+        {t('Learn more')}
+      </Button>
+    </>
+  );
+};

package/src/components/common/LabelsView.css

@@ -0,0 +1,9 @@
+.fctl-labels-view__collapsed {
+  /* Set a maximum width on larger breakpoints */
+  @media (min-width: 769px) {
+    max-width: 400px;
+  }
+}
+
+
+

package/src/components/common/LabelsView.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+
+import { useTranslation } from '../../hooks/useTranslation';
+
+import './LabelsView.css';
+
+interface LabelsViewProps {
+  prefix: string;
+  labels: Record<string, string | undefined> | undefined;
+  variant?: 'default' | 'collapsed';
+}
+
+const LabelsView = ({ variant, prefix, labels }: LabelsViewProps) => {
+  const { t } = useTranslation();
+  const labelItems = Object.entries(labels || {});
+  if (labelItems.length === 0) {
+    return '-';
+  }
+
+  const isLimited = variant === 'collapsed';
+  return (
+    <LabelGroup
+      numLabels={isLimited ? 2 : 5}
+      className={isLimited ? 'fctl-labels-view__collapsed' : undefined}
+      expandedText={t('Show less')}
+      collapsedText={'${remaining} ' + t('more')}
+    >
+      {labelItems.map(([key, value], index: number) => (
+        <Label key={`${prefix}_${index}`} id={`${prefix}_${index}`}>
+          {value ? `${key}=${value}` : key}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};
+
+export default LabelsView;

package/src/components/common/LeaveFormConfirmation.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Button, Modal, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import { Blocker, BlockerFunction } from 'react-router-dom';
+import { useFormikContext } from 'formik';
+
+import { useTranslation } from '../../hooks/useTranslation';
+import { useAppContext } from '../../hooks/useAppContext';
+
+const ConfirmNavigationDialog = ({ blocker }: { blocker: Blocker }) => {
+  const { t } = useTranslation();
+
+  if (blocker.state !== 'blocked') {
+    return null;
+  }
+
+  return (
+    <Modal
+      title={t('There are unsaved changes')}
+      isOpen
+      variant="small"
+      titleIconVariant="warning"
+      actions={[
+        <Button
+          key="proceed"
+          variant="danger"
+          onClick={() => {
+            blocker.proceed?.();
+          }}
+        >
+          {t('Discard changes')}
+        </Button>,
+        <Button
+          key="stay"
+          variant="link"
+          onClick={() => {
+            blocker.reset?.();
+          }}
+        >
+          {t('Stay here')}
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>
+          <TextContent>
+            <Text>{t('Are you sure you want to leave the current page? Unsaved changes will be lost.')}</Text>
+          </TextContent>
+        </StackItem>
+      </Stack>
+    </Modal>
+  );
+};
+
+const RouterBlocker = ({ lock }: { lock: boolean }) => {
+  const {
+    router: { useBlocker },
+  } = useAppContext();
+
+  const shouldBlock: BlockerFunction = ({ currentLocation, nextLocation }) => {
+    return lock && currentLocation.pathname !== nextLocation.pathname;
+  };
+  const blocker = useBlocker?.(shouldBlock);
+
+  return <>{blocker ? <ConfirmNavigationDialog blocker={blocker} /> : null}</>;
+};
+
+const BrowserBlocker = ({ lock }: { lock: boolean }) => {
+  const { t } = useTranslation();
+  const {
+    router: { Prompt },
+  } = useAppContext();
+
+  return (
+    Prompt &&
+    lock && <Prompt message={t('Are you sure you want to leave the current page? Unsaved changes will be lost.')} />
+  );
+};
+
+const LeaveFormConfirmation = () => {
+  const { dirty, isSubmitting } = useFormikContext();
+  const {
+    appType,
+    router: { useBlocker },
+  } = useAppContext();
+
+  const lock = !isSubmitting && dirty;
+
+  if (appType === 'aap') {
+    return null;
+  }
+
+  // workaround for OCP plugin where useBlocker is not yet available due to older react-router-dom version
+  return useBlocker ? <RouterBlocker lock={lock} /> : <BrowserBlocker lock={lock} />;
+};
+
+export default LeaveFormConfirmation;

package/src/components/common/ResourceLink.css

@@ -0,0 +1,29 @@
+.fctl-resource-link {
+  display: inline-flex;
+  align-items: center;
+}
+
+.fctl-resource-link.fctl-resource-link__full {
+  display: flex;
+}
+
+.fctl-resource-link .fctl-resource-link__text {
+  text-wrap: nowrap;
+  overflow-x: hidden;
+}
+
+.fctl-resource-link .pf-v5-c-button {
+  /* The copy name button is hidden by default */
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.fctl-resource-link:hover .pf-v5-c-button {
+  /* Makes the copy name button visible when hovering over the name */
+  clip: initial;
+  clip-path: initial;
+  overflow: visible;
+  white-space: initial;
+}

package/src/components/common/ResourceLink.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { Link, type RouteWithPostfix } from '../../hooks/useNavigate';
+import CopyButton from './CopyButton';
+
+import './ResourceLink.css';
+
+const maxDisplayLength = 50;
+
+type ResourceDisplayLinkProps = {
+  id: string;
+  name?: string;
+  variant?: 'shortened' | 'full';
+  routeLink?: RouteWithPostfix;
+};
+
+export const getDisplayText = (name: string | undefined) => {
+  if (!name) {
+    return '-';
+  }
+  if (name.length <= maxDisplayLength) {
+    return name;
+  }
+  return `${name.substring(0, 6)}...${name.substring(name.length - 7)}`;
+};
+
+const ResourceLink = ({ id, name, variant = 'shortened', routeLink }: ResourceDisplayLinkProps) => {
+  const nameOrId = name || id;
+  const displayText = getDisplayText(nameOrId);
+  const showCopy = nameOrId !== displayText;
+
+  const textEl = <span className="fctl-resource-link__text">{variant === 'full' ? nameOrId : displayText}</span>;
+
+  return (
+    <span className={`fctl-resource-link fctl-resource-link__${variant}`}>
+      {routeLink ? <Link to={{ route: routeLink, postfix: id }}>{textEl}</Link> : <>{textEl}</>}
+      {showCopy && nameOrId && <CopyButton text={nameOrId} />}
+    </span>
+  );
+};
+
+export default ResourceLink;

package/src/components/common/ResourceListEmptyState.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { EmptyState, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
+
+type ResourceListEmptyStateProps = {
+  titleText: string;
+  icon: React.ComponentType;
+};
+
+const ResourceListEmptyState = ({
+  titleText,
+  icon,
+  children,
+}: React.PropsWithChildren<ResourceListEmptyStateProps>) => (
+  <EmptyState style={{ '--pf-v5-c-empty-state--PaddingTop': '4rem' } as React.CSSProperties}>
+    <EmptyStateHeader titleText={titleText} headingLevel="h4" icon={<EmptyStateIcon icon={icon} />} />
+    {children}
+  </EmptyState>
+);
+export default ResourceListEmptyState;

package/src/components/common/WithHelperText.css

@@ -0,0 +1,3 @@
+.fctl-helper-text__icon {
+    padding: 0 0 0 var(--pf-v5-global--spacer--xs);
+}

package/src/components/common/WithHelperText.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Button, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+
+import './WithHelperText.css';
+
+type WithHelperTextProps = {
+  ariaLabel: string;
+  showLabel?: boolean;
+  triggerAction?: 'click' | 'hover';
+  content: React.ReactNode;
+};
+
+const WithHelperText = ({ ariaLabel, showLabel, content, triggerAction }: WithHelperTextProps) => (
+  <>
+    {showLabel && ariaLabel}
+    <Popover aria-label={ariaLabel} bodyContent={content} withFocusTrap triggerAction={triggerAction}>
+      <Button
+        component="a"
+        className="fctl-helper-text__icon"
+        isInline
+        variant="plain"
+        onClick={(ev) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+        }}
+        aria-label={`${ariaLabel} help text`}
+        icon={<OutlinedQuestionCircleIcon />}
+      />
+    </Popover>
+  </>
+);
+
+export default WithHelperText;

package/src/components/common/WithTooltip.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { Tooltip } from '@patternfly/react-core';
+
+type WithTooltipProps = {
+  showTooltip: boolean;
+  content: React.ReactNode;
+  children: React.ReactElement;
+};
+
+const WithTooltip = ({ showTooltip, content, children }: PropsWithChildren<WithTooltipProps>) =>
+  showTooltip ? <Tooltip content={content}>{children}</Tooltip> : children;
+
+export default WithTooltip;

package/src/components/form/CheckboxField.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useField } from 'formik';
+import { Checkbox, CheckboxProps, FormGroup } from '@patternfly/react-core';
+import ErrorHelperText, { DefaultHelperText } from './FieldHelperText';
+
+export interface CheckboxFieldProps extends Omit<CheckboxProps, 'onChange' | 'id' | 'ref'> {
+  name: string;
+  helperText?: React.ReactNode;
+  onChangeCustom?: (value: boolean) => void;
+}
+
+const CheckboxField = ({ helperText, onChangeCustom, children, ...props }: CheckboxFieldProps) => {
+  const [{ value, ...rest }, meta, { setValue, setTouched }] = useField<boolean>({
+    name: props.name,
+  });
+
+  const onChange: CheckboxProps['onChange'] = async (_, value) => {
+    await setValue(value);
+    if (onChangeCustom) {
+      onChangeCustom(value);
+    }
+    await setTouched(true);
+  };
+
+  const fieldId = `checkboxfield-${props.name}`;
+  return (
+    <>
+      <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+        <Checkbox {...rest} {...props} isChecked={value} id={fieldId} onChange={onChange} body={value && props.body} />
+
+        <DefaultHelperText helperText={helperText} />
+        <ErrorHelperText meta={meta} />
+      </FormGroup>
+      {value && children}
+    </>
+  );
+};
+
+export default CheckboxField;