@openshift-migration-advisor/shared-components 0.0.0

package/dist/report/useOsBarChartViewModel.js

@@ -0,0 +1,59 @@
+import { useMemo, useState } from "react";
+import { getSupportTierLegendLabel, getSupportTierSortOrder, hasOsUpgradeNotice, resolveSupportTier, } from "./osSupportTier.js";
+export const ALL_TIERS_FILTER = "all";
+function buildOsTableRows(osData) {
+    return Object.entries(osData)
+        .filter(([osName]) => osName.trim() !== "")
+        .map(([osName, entry]) => ({
+        osName,
+        tier: resolveSupportTier(entry.supportTier, entry.supported),
+        count: entry.count,
+        upgradeRecommendation: entry.upgradeRecommendation || undefined,
+    }))
+        .sort((a, b) => {
+        const tierOrder = getSupportTierSortOrder(a.tier) - getSupportTierSortOrder(b.tier);
+        if (tierOrder !== 0) {
+            return tierOrder;
+        }
+        return b.count - a.count;
+    });
+}
+export function useOsBarChartViewModel(osData) {
+    const [osFilter, setOsFilter] = useState("");
+    const [tierFilter, setTierFilter] = useState(ALL_TIERS_FILTER);
+    const [isTierSelectOpen, setIsTierSelectOpen] = useState(false);
+    const tableRows = useMemo(() => buildOsTableRows(osData), [osData]);
+    const filteredRows = useMemo(() => {
+        const normalizedFilter = osFilter.trim().toLowerCase();
+        return tableRows.filter((row) => {
+            const matchesOs = normalizedFilter === "" ||
+                row.osName.toLowerCase().includes(normalizedFilter);
+            const matchesTier = tierFilter === ALL_TIERS_FILTER || row.tier === tierFilter;
+            return matchesOs && matchesTier;
+        });
+    }, [osFilter, tableRows, tierFilter]);
+    const tierFilterLabel = tierFilter === ALL_TIERS_FILTER
+        ? "Filter by tier"
+        : getSupportTierLegendLabel(tierFilter);
+    const handleTierSelect = (_event, value) => {
+        if (typeof value === "string") {
+            setTierFilter(value);
+        }
+        setIsTierSelectOpen(false);
+    };
+    return {
+        osFilter,
+        tierFilter,
+        isTierSelectOpen,
+        tableRows,
+        filteredRows,
+        tierFilterLabel,
+        showNoResults: filteredRows.length === 0,
+        showUpgradeNotice: hasOsUpgradeNotice(osData),
+        setOsFilter,
+        clearOsFilter: () => setOsFilter(""),
+        setIsTierSelectOpen,
+        toggleTierSelectOpen: () => setIsTierSelectOpen((open) => !open),
+        handleTierSelect,
+    };
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@openshift-migration-advisor/shared-components",
+  "version": "0.0.0",
+  "description": "Shared React UI components for Migration Advisor apps (report charts, forms, OS support tiers)",
+  "author": "Red Hat",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kubev2v/migration-planner-agent-ui.git",
+    "directory": "packages/shared-components"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "yarn run -T tsc -b",
+    "bundle": "yarn build && yarn pack --out ../../out/%s-%v.tgz",
+    "clean": "rm -rf node_modules dist .tmp",
+    "check": "yarn run -T biome check .",
+    "check:fix": "yarn run -T biome check --write .",
+    "test": "yarn run -T vitest run",
+    "typecheck": "yarn run -T tsc -b --noEmit"
+  },
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@emotion/css": "^11.13.0",
+    "@patternfly/react-charts": "^8.0.0",
+    "@patternfly/react-core": "^6.5.0",
+    "@patternfly/react-icons": "^6.5.0",
+    "@patternfly/react-table": "^6.5.0",
+    "@patternfly/react-tokens": "^6.5.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-hook-form": "^7.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1"
+  }
+}

package/src/charts/MigrationDonutChart.tsx

@@ -0,0 +1,398 @@
+import { css } from "@emotion/css";
+import { ChartDonut, ChartLabel } from "@patternfly/react-charts/victory";
+import {
+  EmptyState,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+} from "@patternfly/react-core";
+import { InboxIcon } from "@patternfly/react-icons";
+import type { FC } from "react";
+import { useCallback, useMemo } from "react";
+
+export interface MigrationDonutChartDatum {
+  name: string;
+  count: number;
+  legendCategory: string;
+  countDisplay?: string;
+  diskRange?: { min: number; max?: number };
+  memoryRange?: { min: number; max?: number };
+  clusterNames?: string[];
+  networkNames?: string[];
+}
+
+export interface MigrationDonutChartProps {
+  data: MigrationDonutChartDatum[];
+  legend?: Record<string, string>;
+  customColors?: Record<string, string>;
+  height?: number;
+  width?: number;
+  title?: string;
+  subTitle?: string;
+  titleColor?: string;
+  subTitleColor?: string;
+  marginLeft?: string;
+  titleFontSize?: number;
+  subTitleFontSize?: number;
+  donutThickness?: number;
+  padAngle?: number;
+  tooltipLabelFormatter?: (args: {
+    datum: {
+      x: string;
+      y: number;
+      countDisplay?: string | number;
+      legendCategory: string;
+    };
+    percent: number;
+    total: number;
+  }) => string;
+  onItemClick?: (item: MigrationDonutChartDatum) => void;
+  onTitleClick?: () => void;
+  /** When set, used for legend label instead of "name (countDisplay)". */
+  legendLabelFormatter?: (item: {
+    x: string;
+    countDisplay?: string | number;
+  }) => string;
+}
+
+const legendColors = ["#0066cc", "#5e40be", "#b6a6e9", "#b98412"];
+
+const styles = {
+  legendIcon: css`
+    margin-right: 4px;
+  `,
+  cursorPointer: css`
+    cursor: pointer;
+  `,
+  cursorDefault: css`
+    cursor: default;
+  `,
+  chartContainer: css`
+    padding: 1em 0;
+  `,
+  donutWrapper: css`
+    position: relative;
+    display: inline-block;
+  `,
+  legendContainer: css`
+    overflow: hidden;
+    min-height: 40px;
+  `,
+  legendButton: css`
+    gap: var(--pf-t--global--spacer--lg);
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
+    margin: 0;
+    transition: opacity var(--pf-t--global--motion--duration--short);
+    white-space: nowrap;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  `,
+  legendLabel: css`
+    gap: var(--pf-t--global--spacer--lg);
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--ml);
+    white-space: nowrap;
+  `,
+  legendInner: css`
+    max-width: 680px;
+    padding: var(--pf-t--global--spacer--ml);
+  `,
+};
+
+export const MigrationDonutChart: FC<MigrationDonutChartProps> = ({
+  data,
+  legend,
+  customColors,
+  height = 260,
+  width = 420,
+  title,
+  subTitle,
+  titleColor = "#000000",
+  subTitleColor = "#000000",
+  marginLeft = "0%",
+  titleFontSize = 28,
+  subTitleFontSize = 14,
+  donutThickness = 45,
+  padAngle = 1,
+  tooltipLabelFormatter,
+  onItemClick,
+  onTitleClick,
+  legendLabelFormatter,
+}) => {
+  const dynamicLegend = useMemo(() => {
+    return data.reduce(
+      (acc, current) => {
+        const key = `${current.legendCategory}`;
+        if (!acc.seen.has(key)) {
+          acc.seen.add(key);
+          const color =
+            customColors?.[key] ??
+            legendColors[(acc.seen.size - 1) % legendColors.length];
+          acc.result.push({ [key]: color });
+        }
+        return acc;
+      },
+      { seen: new Set(), result: [] } as {
+        seen: Set<string>;
+        result: Record<string, string>[];
+      },
+    ).result;
+  }, [data, customColors]);
+
+  const chartLegend = legend ? legend : Object.assign({}, ...dynamicLegend);
+  const getColor = useCallback(
+    (name: string): string => chartLegend[name],
+    [chartLegend],
+  );
+
+  const chartData = useMemo(() => {
+    return data.map((item) => ({
+      x: item.name,
+      y: item.count,
+      legendCategory: item.legendCategory,
+      countDisplay: item.countDisplay ?? item.count,
+    }));
+  }, [data]);
+
+  const colorScale = useMemo(() => {
+    return chartData.map((item) => getColor(item.legendCategory));
+  }, [chartData, getColor]);
+
+  const innerRadius = useMemo(() => {
+    const outerApprox = Math.min(width, height) / 2;
+    const computed = outerApprox - donutThickness;
+    return computed > 0 ? computed : 0;
+  }, [width, height, donutThickness]);
+
+  const totalY = useMemo(() => {
+    return chartData.reduce((sum, item) => sum + (Number(item.y) || 0), 0);
+  }, [chartData]);
+
+  const handleClick = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: Victory chart types are not well-typed
+    (props: any) => {
+      if (!onItemClick) return;
+
+      const datum = props?.datum;
+      if (!datum) return;
+
+      let clickedItem = data.find((item) => item.name === datum.x);
+
+      if (!clickedItem && typeof props.index === "number") {
+        clickedItem = data[props.index];
+      }
+
+      if (!clickedItem) {
+        clickedItem = data.find(
+          (item) => item.legendCategory === datum.legendCategory,
+        );
+      }
+
+      if (clickedItem) {
+        onItemClick(clickedItem);
+      }
+    },
+    [onItemClick, data],
+  );
+
+  const chartEvents = useMemo(() => {
+    if (!onItemClick) return undefined;
+
+    return [
+      {
+        target: "data" as const,
+        eventHandlers: {
+          onClick: () => [
+            {
+              target: "data" as const,
+              // biome-ignore lint/suspicious/noExplicitAny: Victory chart types are not well-typed
+              mutation: (props: any) => {
+                handleClick(props);
+                return null;
+              },
+            },
+          ],
+        },
+      },
+    ];
+  }, [onItemClick, handleClick]);
+
+  if (!data || data.length === 0) {
+    return (
+      <EmptyState
+        headingLevel="h3"
+        titleText="No data available"
+        icon={InboxIcon}
+        variant={EmptyStateVariant.xs}
+      />
+    );
+  }
+
+  return (
+    <Flex
+      direction={{ default: "column" }}
+      alignItems={{ default: "alignItemsCenter" }}
+      className={`${onItemClick ? styles.cursorPointer : styles.cursorDefault} ${styles.chartContainer}`}
+    >
+      <div className={styles.donutWrapper}>
+        <ChartDonut
+          ariaDesc="Migration data donut chart"
+          data={chartData}
+          events={chartEvents}
+          labels={({
+            datum,
+          }: {
+            datum: {
+              x: string;
+              y: number;
+              legendCategory: string;
+              countDisplay?: string | number;
+            };
+          }) => {
+            const percent = totalY > 0 ? (Number(datum.y) / totalY) * 100 : 0;
+            return tooltipLabelFormatter
+              ? tooltipLabelFormatter({
+                  datum: {
+                    x: datum.x,
+                    y: Number(datum.y),
+                    countDisplay: datum.countDisplay,
+                    legendCategory: datum.legendCategory,
+                  },
+                  percent,
+                  total: totalY,
+                })
+              : `${datum.x}: ${datum.countDisplay ?? datum.y}`;
+          }}
+          colorScale={colorScale}
+          constrainToVisibleArea
+          innerRadius={innerRadius}
+          padAngle={padAngle}
+          title={title}
+          subTitle={subTitle}
+          height={height}
+          width={width}
+          padding={{
+            bottom: 5,
+            left: 20,
+            right: 20,
+            top: 0,
+          }}
+          titleComponent={
+            title ? (
+              <ChartLabel
+                style={[
+                  {
+                    fill: titleColor,
+                    fontSize: titleFontSize,
+                    fontWeight: "bold",
+                  },
+                ]}
+              />
+            ) : undefined
+          }
+          subTitleComponent={
+            subTitle ? (
+              <ChartLabel
+                style={[
+                  {
+                    fill: subTitleColor,
+                    fontSize: subTitleFontSize,
+                  },
+                ]}
+              />
+            ) : undefined
+          }
+        />
+        {onTitleClick && title && (
+          // biome-ignore lint/a11y/useSemanticElements: Transparent overlay requires precise positioning and styling that button element would interfere with
+          <div
+            onClick={onTitleClick}
+            className={css`
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              width: ${innerRadius * 2}px;
+              height: ${innerRadius * 2}px;
+              cursor: pointer;
+              border-radius: 50%;
+              z-index: 10;
+            `}
+            title="Click to view all VMs"
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onTitleClick();
+              }
+            }}
+          />
+        )}
+      </div>
+      <Flex
+        className={`${styles.legendContainer} ${css`margin-left: ${marginLeft};`}`}
+        justifyContent={{ default: "justifyContentCenter" }}
+        alignItems={{ default: "alignItemsFlexStart" }}
+      >
+        <Flex
+          className={styles.legendInner}
+          spaceItems={{ default: "spaceItemsMd" }}
+          justifyContent={{ default: "justifyContentCenter" }}
+          alignItems={{ default: "alignItemsCenter" }}
+          flexWrap={{ default: "wrap" }}
+        >
+          {data.map((item) => {
+            const label = legendLabelFormatter
+              ? legendLabelFormatter({
+                  x: item.name,
+                  countDisplay: item.countDisplay,
+                })
+              : item.name;
+
+            const content = (
+              <>
+                <svg
+                  width="10"
+                  height="10"
+                  aria-hidden="true"
+                  className={styles.legendIcon}
+                >
+                  <title>Legend color indicator</title>
+                  <rect
+                    width="10"
+                    height="10"
+                    fill={getColor(item.legendCategory)}
+                  />
+                </svg>
+                <span>{label}</span>
+              </>
+            );
+
+            return (
+              <FlexItem key={`${item.legendCategory}-${item.name}`}>
+                {onItemClick ? (
+                  <button
+                    type="button"
+                    onClick={() => onItemClick(item)}
+                    className={styles.legendButton}
+                  >
+                    {content}
+                  </button>
+                ) : (
+                  <span className={styles.legendLabel}>{content}</span>
+                )}
+              </FlexItem>
+            );
+          })}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default MigrationDonutChart;

package/src/charts/index.ts

@@ -0,0 +1,5 @@
+export {
+  MigrationDonutChart,
+  type MigrationDonutChartDatum,
+  type MigrationDonutChartProps,
+} from "./MigrationDonutChart.js";

package/src/forms/CheckboxFormGroup.tsx

@@ -0,0 +1,53 @@
+import { Checkbox, FormGroup } from "@patternfly/react-core";
+import { Controller, type FieldError, useFormContext } from "react-hook-form";
+
+import FormFieldHelperText from "./FormFieldHelperText.js";
+import type { FormGroupProps } from "./types.js";
+
+type CheckboxFormGroupProps = Omit<FormGroupProps, "placeholder">;
+
+export default function CheckboxFormGroup({
+  id,
+  label,
+  name,
+  isRequired = false,
+  isDisabled = false,
+  helpText,
+  ...props
+}: CheckboxFormGroupProps) {
+  const methods = useFormContext();
+  const error = methods.formState.errors[name] as FieldError | undefined;
+  const isTouched = methods.formState.touchedFields[name] as
+    | boolean
+    | undefined;
+  const isSubmitted = methods.formState.isSubmitted;
+  const showError = error && (isTouched || isSubmitted);
+
+  return (
+    <FormGroup isRequired={isRequired} fieldId={id} {...props}>
+      <Controller
+        name={name}
+        control={methods.control}
+        render={({ field }) => {
+          return (
+            <Checkbox
+              label={label}
+              id={id}
+              isRequired={isRequired}
+              isDisabled={isDisabled}
+              isChecked={field.value as boolean}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              name={field.name}
+              ref={field.ref}
+            />
+          );
+        }}
+      />
+      <FormFieldHelperText
+        helpText={helpText}
+        errorMessage={showError ? error?.message : undefined}
+      />
+    </FormGroup>
+  );
+}

package/src/forms/FormFieldHelperText.tsx

@@ -0,0 +1,32 @@
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+
+interface FormFieldHelperTextProps {
+  helpText?: string;
+  errorMessage?: string;
+}
+
+export default function FormFieldHelperText({
+  helpText,
+  errorMessage,
+}: FormFieldHelperTextProps) {
+  if (!helpText && !errorMessage) return null;
+
+  return (
+    <FormHelperText>
+      <HelperText>
+        {errorMessage ? (
+          <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+            {errorMessage}
+          </HelperTextItem>
+        ) : (
+          helpText && <HelperTextItem>{helpText}</HelperTextItem>
+        )}
+      </HelperText>
+    </FormHelperText>
+  );
+}

package/src/forms/RadioButtonFormGroup.tsx

@@ -0,0 +1,62 @@
+import { FormGroup, Radio } from "@patternfly/react-core";
+import { Controller, type FieldError, useFormContext } from "react-hook-form";
+
+import FormFieldHelperText from "./FormFieldHelperText.js";
+import type { FormGroupProps } from "./types.js";
+
+interface RadioOption {
+  value: string;
+  label: string;
+  id: string;
+}
+
+interface RadioButtonFormGroupProps
+  extends Omit<FormGroupProps, "placeholder"> {
+  options: RadioOption[];
+}
+
+export default function RadioButtonFormGroup({
+  id,
+  label,
+  name,
+  isRequired = false,
+  options,
+  helpText,
+  ...props
+}: RadioButtonFormGroupProps) {
+  const methods = useFormContext();
+  const error = methods.formState.errors[name] as FieldError | undefined;
+  const isTouched = methods.formState.touchedFields[name] as
+    | boolean
+    | undefined;
+  const isSubmitted = methods.formState.isSubmitted;
+  const showError = error && (isTouched || isSubmitted);
+
+  return (
+    <FormGroup label={label} isRequired={isRequired} fieldId={id} {...props}>
+      <Controller
+        name={name}
+        control={methods.control}
+        render={({ field }) => (
+          <div style={{ display: "flex", gap: "16px" }} role="radiogroup">
+            {options.map((option) => (
+              <Radio
+                key={option.value}
+                id={option.id}
+                name={name}
+                label={option.label}
+                isChecked={field.value === option.value}
+                onChange={() => field.onChange(option.value)}
+                onBlur={field.onBlur}
+              />
+            ))}
+          </div>
+        )}
+      />
+      <FormFieldHelperText
+        helpText={helpText}
+        errorMessage={showError ? error?.message : undefined}
+      />
+    </FormGroup>
+  );
+}