@openshift-migration-advisor/shared-components 0.0.0

package/src/forms/SelectFormGroup.tsx

@@ -0,0 +1,57 @@
+import {
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
+} from "@patternfly/react-core";
+import { Controller, type FieldError, useFormContext } from "react-hook-form";
+
+import FormFieldHelperText from "./FormFieldHelperText.js";
+import type { FormGroupProps } from "./types.js";
+
+export default function SelectFormGroup({
+  id,
+  label,
+  name,
+  isRequired = false,
+  options,
+  helpText,
+  isDisabled = false,
+  ...props
+}: {
+  options: {
+    label: string;
+    value: string;
+  }[];
+} & FormGroupProps) {
+  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 }) => (
+          <FormSelect id={id} isDisabled={isDisabled} {...field}>
+            {options.map((option) => (
+              <FormSelectOption
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </FormSelect>
+        )}
+      />
+      <FormFieldHelperText
+        helpText={helpText}
+        errorMessage={showError ? error?.message : undefined}
+      />
+    </FormGroup>
+  );
+}

package/src/forms/TextAreaFormGroup.tsx

@@ -0,0 +1,43 @@
+import { FormGroup, TextArea, ValidatedOptions } from "@patternfly/react-core";
+import { type FieldError, useFormContext } from "react-hook-form";
+
+import FormFieldHelperText from "./FormFieldHelperText.js";
+import type { FormGroupProps } from "./types.js";
+
+export default function TextAreaFormGroup({
+  id,
+  label,
+  name,
+  isRequired = false,
+  isDisabled = false,
+  placeholder = "",
+  helpText,
+  ...props
+}: FormGroupProps) {
+  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}>
+      <TextArea
+        id={id}
+        placeholder={placeholder}
+        isRequired={isRequired}
+        isDisabled={isDisabled}
+        validated={
+          showError ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        {...methods.register(name)}
+      />
+      <FormFieldHelperText
+        helpText={helpText}
+        errorMessage={showError ? error?.message : undefined}
+      />
+    </FormGroup>
+  );
+}

package/src/forms/TextInputFormGroup.tsx

@@ -0,0 +1,63 @@
+import {
+  FormGroup,
+  TextInput,
+  type TextInputProps,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import type { FocusEvent } from "react";
+import { type FieldError, useFormContext } from "react-hook-form";
+
+import FormFieldHelperText from "./FormFieldHelperText.js";
+import type { FormGroupProps } from "./types.js";
+
+interface TextInputFormGroupProps extends FormGroupProps {
+  type?: TextInputProps["type"];
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+}
+
+export default function TextInputFormGroup({
+  id,
+  label,
+  name,
+  isRequired = false,
+  placeholder = "",
+  type = "text",
+  onBlur,
+  isDisabled = false,
+  helpText,
+  ...props
+}: TextInputFormGroupProps) {
+  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 registration = methods.register(name);
+  const showError = error && (isTouched || isSubmitted);
+
+  return (
+    <FormGroup label={label} isRequired={isRequired} fieldId={id} {...props}>
+      <TextInput
+        id={id}
+        placeholder={placeholder}
+        isRequired={isRequired}
+        validated={
+          showError ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        type={type}
+        isDisabled={isDisabled}
+        {...registration}
+        onBlur={(e: FocusEvent<HTMLInputElement>) => {
+          void registration.onBlur(e);
+          onBlur?.(e);
+        }}
+      />
+      <FormFieldHelperText
+        helpText={helpText}
+        errorMessage={showError ? error?.message : undefined}
+      />
+    </FormGroup>
+  );
+}

package/src/forms/index.ts

@@ -0,0 +1,7 @@
+export { default as CheckboxFormGroup } from "./CheckboxFormGroup.js";
+export { default as FormFieldHelperText } from "./FormFieldHelperText.js";
+export { default as RadioButtonFormGroup } from "./RadioButtonFormGroup.js";
+export { default as SelectFormGroup } from "./SelectFormGroup.js";
+export { default as TextAreaFormGroup } from "./TextAreaFormGroup.js";
+export { default as TextInputFormGroup } from "./TextInputFormGroup.js";
+export type { FormGroupProps } from "./types.js";

package/src/forms/types.ts

@@ -0,0 +1,11 @@
+import type { FormGroupProps as PFFormGroupProps } from "@patternfly/react-core";
+
+export interface FormGroupProps extends Omit<PFFormGroupProps, "fieldId"> {
+  id: string;
+  name: string;
+  label?: string;
+  isRequired?: boolean;
+  placeholder?: string;
+  helpText?: string;
+  isDisabled?: boolean;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./charts/index.js";
+export * from "./forms/index.js";
+export * from "./report/index.js";

package/src/report/CardEmptyState.tsx

@@ -0,0 +1,30 @@
+import { css } from "@emotion/css";
+import type { FC } from "react";
+import { DashboardEmptyStateBase } from "./DashboardEmptyStateBase.js";
+
+export const CARD_EMPTY_STATE_DESCRIPTION =
+  "This data is not available for older inventories or certain imported reports.";
+
+const cardEmptyStateContainer = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  min-height: 250px;
+`;
+
+export interface CardEmptyStateProps {
+  title: string;
+  description?: string;
+}
+
+export const CardEmptyState: FC<CardEmptyStateProps> = ({
+  title,
+  description = CARD_EMPTY_STATE_DESCRIPTION,
+}) => (
+  <div className={cardEmptyStateContainer}>
+    <DashboardEmptyStateBase title={title} body={description} />
+  </div>
+);
+
+CardEmptyState.displayName = "CardEmptyState";

package/src/report/DashboardEmptyStateBase.tsx

@@ -0,0 +1,30 @@
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateVariant,
+} from "@patternfly/react-core";
+import { SearchIcon } from "@patternfly/react-icons";
+import type { ComponentType, FC, SVGProps } from "react";
+
+export interface DashboardEmptyStateBaseProps {
+  title: string;
+  body: string;
+  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+}
+
+export const DashboardEmptyStateBase: FC<DashboardEmptyStateBaseProps> = ({
+  title,
+  body,
+  icon: IconComponent = SearchIcon,
+}) => (
+  <EmptyState
+    headingLevel="h4"
+    icon={IconComponent}
+    titleText={title}
+    variant={EmptyStateVariant.sm}
+  >
+    <EmptyStateBody>{body}</EmptyStateBody>
+  </EmptyState>
+);
+
+DashboardEmptyStateBase.displayName = "DashboardEmptyStateBase";

package/src/report/EmptySearchResults.tsx

@@ -0,0 +1,14 @@
+import type { FC } from "react";
+import { DashboardEmptyStateBase } from "./DashboardEmptyStateBase.js";
+
+export interface EmptySearchResultsProps {
+  title?: string;
+  body?: string;
+}
+
+export const EmptySearchResults: FC<EmptySearchResultsProps> = ({
+  title = "No results found",
+  body = "To continue, adjust your search or filters and try again",
+}) => <DashboardEmptyStateBase title={title} body={body} />;
+
+EmptySearchResults.displayName = "EmptySearchResults";

package/src/report/OSDistribution.tsx

@@ -0,0 +1,206 @@
+import { css } from "@emotion/css";
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  Flex,
+  FlexItem,
+  MenuToggle,
+  type MenuToggleElement,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+} from "@patternfly/react-core";
+import { DesktopIcon } from "@patternfly/react-icons";
+import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
+import type { FC, Ref } from "react";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles, tableFullWidthStyle } from "./dashboardStyles.js";
+import { EmptySearchResults } from "./EmptySearchResults.js";
+import { OsSupportTiersHelpPopover } from "./OsSupportTiersHelpPopover.js";
+import { OsUpgradeNotice } from "./OsUpgradeNotice.js";
+import { OsNameCell } from "./OsUpgradeRecommendationPopover.js";
+import {
+  getSupportTierLegendLabel,
+  ORDERED_SUPPORT_TIERS,
+  type OSDistributionEntry,
+} from "./osSupportTier.js";
+import { SupportTierBadge } from "./SupportTierBadge.js";
+import {
+  ALL_TIERS_FILTER,
+  useOsBarChartViewModel,
+} from "./useOsBarChartViewModel.js";
+
+const filterToolbarStyle = css`
+  padding-left: 0;
+  padding-right: 0;
+`;
+
+const filterItemStyle = css`
+  flex: 1 1 0;
+  min-width: 0;
+`;
+
+const vmsColumnStyle = css`
+  text-align: right;
+`;
+
+const tableScrollStyle = css`
+  overflow: auto;
+`;
+
+interface OSDistributionProps {
+  osData: Record<string, OSDistributionEntry>;
+  isExportMode?: boolean;
+}
+
+export const OSDistribution: FC<OSDistributionProps> = ({
+  osData,
+  isExportMode = false,
+}) => (
+  <Card
+    className={isExportMode ? dashboardStyles.cardPrint : dashboardStyles.card}
+    id="os-distribution"
+  >
+    <CardTitle>
+      <Flex
+        alignItems={{ default: "alignItemsCenter" }}
+        spaceItems={{ default: "spaceItemsSm" }}
+      >
+        <FlexItem>
+          <DesktopIcon /> Operating Systems
+        </FlexItem>
+        <FlexItem>
+          <OsSupportTiersHelpPopover />
+        </FlexItem>
+      </Flex>
+    </CardTitle>
+    <CardBody>
+      <OSBarChart osData={osData} isExportMode={isExportMode} />
+    </CardBody>
+  </Card>
+);
+
+interface OSBarChartProps {
+  osData: Record<string, OSDistributionEntry>;
+  isExportMode?: boolean;
+}
+
+export const OSBarChart: FC<OSBarChartProps> = ({
+  osData,
+  isExportMode = false,
+}) => {
+  const vm = useOsBarChartViewModel(osData);
+
+  if (vm.tableRows.length === 0) {
+    return (
+      <CardEmptyState title={REPORT_CARD_EMPTY_STATE_TITLES.operatingSystems} />
+    );
+  }
+
+  return (
+    <>
+      {!isExportMode ? (
+        <Toolbar className={filterToolbarStyle}>
+          <ToolbarContent>
+            <ToolbarItem className={filterItemStyle}>
+              <SearchInput
+                placeholder="Filter by OS"
+                value={vm.osFilter}
+                onChange={(_event, value) => vm.setOsFilter(value)}
+                onClear={vm.clearOsFilter}
+                aria-label="Filter operating systems by name"
+              />
+            </ToolbarItem>
+            <ToolbarItem className={filterItemStyle}>
+              <Select
+                isOpen={vm.isTierSelectOpen}
+                selected={vm.tierFilter}
+                onSelect={vm.handleTierSelect}
+                onOpenChange={vm.setIsTierSelectOpen}
+                toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={vm.isTierSelectOpen}
+                    onClick={vm.toggleTierSelectOpen}
+                    style={{ width: "100%" }}
+                  >
+                    {vm.tierFilterLabel}
+                  </MenuToggle>
+                )}
+                aria-label="Filter operating systems by support tier"
+              >
+                <SelectList>
+                  <SelectOption value={ALL_TIERS_FILTER}>
+                    All tiers
+                  </SelectOption>
+                  {ORDERED_SUPPORT_TIERS.map((tier) => (
+                    <SelectOption key={tier} value={tier}>
+                      {getSupportTierLegendLabel(tier)}
+                    </SelectOption>
+                  ))}
+                </SelectList>
+              </Select>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      ) : null}
+
+      {vm.showUpgradeNotice ? <OsUpgradeNotice /> : null}
+
+      <div
+        className={isExportMode ? undefined : tableScrollStyle}
+        style={isExportMode ? undefined : { maxHeight: "350px" }}
+      >
+        <Table
+          aria-label="Operating systems"
+          variant="compact"
+          className={tableFullWidthStyle}
+        >
+          <Thead>
+            <Tr>
+              <Th>OS</Th>
+              <Th>Tier</Th>
+              <Th className={vmsColumnStyle}>VMs</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {vm.showNoResults ? (
+              <Tr>
+                <Td colSpan={3}>
+                  <EmptySearchResults title="No matching operating system found" />
+                </Td>
+              </Tr>
+            ) : (
+              vm.filteredRows.map((row) => (
+                <Tr key={row.osName}>
+                  <Td dataLabel="OS">
+                    <OsNameCell
+                      osName={row.osName}
+                      upgradeRecommendation={row.upgradeRecommendation}
+                      isExportMode={isExportMode}
+                    />
+                  </Td>
+                  <Td dataLabel="Tier">
+                    <SupportTierBadge
+                      tier={row.tier}
+                      isExportMode={isExportMode}
+                    />
+                  </Td>
+                  <Td dataLabel="VMs" className={vmsColumnStyle}>
+                    {row.count}
+                  </Td>
+                </Tr>
+              ))
+            )}
+          </Tbody>
+        </Table>
+      </div>
+    </>
+  );
+};

package/src/report/OsSupportTiersHelpPopover.tsx

@@ -0,0 +1,87 @@
+import { css } from "@emotion/css";
+import { Label } from "@patternfly/react-core";
+import { ExternalLinkAltIcon } from "@patternfly/react-icons";
+import type { FC } from "react";
+import {
+  getSupportTierBadgeColor,
+  getSupportTierDefinition,
+  getSupportTierLegendLabel,
+  ORDERED_SUPPORT_TIERS,
+  SUPPORT_TIER_LEARN_MORE_URL,
+} from "./osSupportTier.js";
+import PopoverIcon from "./PopoverIcon.js";
+
+const tierListStyle = css`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--400);
+`;
+
+const tierItemStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--100);
+`;
+
+const tierBadgeStyle = css`
+  width: fit-content;
+  max-width: 100%;
+  align-self: flex-start;
+`;
+
+const tierDescriptionStyle = css`
+  margin: 0;
+  color: var(--pf-t--global--text--color--regular);
+`;
+
+const learnMoreLinkStyle = css`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pf-t--global--spacer--xs);
+  margin-top: var(--pf-t--global--spacer--400);
+`;
+
+const OsSupportTiersHelpBody: FC = () => (
+  <div>
+    <ul className={tierListStyle}>
+      {ORDERED_SUPPORT_TIERS.map((tier) => (
+        <li key={tier} className={tierItemStyle}>
+          <Label
+            className={tierBadgeStyle}
+            color={getSupportTierBadgeColor(tier)}
+            isCompact
+          >
+            {getSupportTierLegendLabel(tier)}
+          </Label>
+          <p className={tierDescriptionStyle}>
+            {getSupportTierDefinition(tier)}
+          </p>
+        </li>
+      ))}
+    </ul>
+    <a
+      className={learnMoreLinkStyle}
+      href={SUPPORT_TIER_LEARN_MORE_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Learn more <ExternalLinkAltIcon />
+    </a>
+  </div>
+);
+
+export const OsSupportTiersHelpPopover: FC = () => (
+  <PopoverIcon
+    noVerticalAlign
+    maxWidth="40rem"
+    headerContent="Guest OS support tiers"
+    bodyContent={<OsSupportTiersHelpBody />}
+    buttonOuiaId="guest-os-support-tiers-help"
+    aria-label="Guest OS support tiers help"
+  />
+);
+
+OsSupportTiersHelpPopover.displayName = "OsSupportTiersHelpPopover";

package/src/report/OsUpgradeNotice.tsx

@@ -0,0 +1,29 @@
+import { css } from "@emotion/css";
+import { Content, Flex, FlexItem, Icon } from "@patternfly/react-core";
+import { InfoCircleIcon } from "@patternfly/react-icons";
+import type { FC } from "react";
+
+const noticeStyle = css`
+  margin-bottom: var(--pf-t--global--spacer--200);
+`;
+
+export const OsUpgradeNotice: FC = () => (
+  <Flex
+    alignItems={{ default: "alignItemsCenter" }}
+    spaceItems={{ default: "spaceItemsSm" }}
+    className={noticeStyle}
+  >
+    <FlexItem>
+      <Icon status="info">
+        <InfoCircleIcon />
+      </Icon>
+    </FlexItem>
+    <FlexItem>
+      <Content component="p" style={{ fontWeight: 500 }}>
+        Some operating systems may need upgrades before migration
+      </Content>
+    </FlexItem>
+  </Flex>
+);
+
+OsUpgradeNotice.displayName = "OsUpgradeNotice";

package/src/report/OsUpgradeRecommendationPopover.tsx

@@ -0,0 +1,78 @@
+import { css } from "@emotion/css";
+import { Button, Flex, FlexItem, Popover } from "@patternfly/react-core";
+import { InfoCircleIcon } from "@patternfly/react-icons";
+import type { FC } from "react";
+
+const upgradeRecommendationPopoverCloseButton = css`
+  .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain,
+  .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain:hover {
+    color: var(--pf-t--global--text--color--regular);
+  }
+`;
+
+const infoButtonStyle = css`
+  padding: 0;
+  vertical-align: middle;
+`;
+
+interface OsUpgradeRecommendationPopoverProps {
+  upgradeRecommendation: string;
+}
+
+export const OsUpgradeRecommendationPopover: FC<
+  OsUpgradeRecommendationPopoverProps
+> = ({ upgradeRecommendation }) => (
+  <Popover
+    className={upgradeRecommendationPopoverCloseButton}
+    position="bottom"
+    headerContent="Upgrade to get support"
+    bodyContent={<div>{upgradeRecommendation}</div>}
+  >
+    <Button
+      type="button"
+      aria-label="Open operating system upgrade information"
+      variant="plain"
+      className={infoButtonStyle}
+    >
+      <InfoCircleIcon color="var(--pf-t--global--icon--color--status--info--default)" />
+    </Button>
+  </Popover>
+);
+
+OsUpgradeRecommendationPopover.displayName = "OsUpgradeRecommendationPopover";
+
+interface OsNameCellProps {
+  osName: string;
+  upgradeRecommendation?: string;
+  isExportMode?: boolean;
+}
+
+export const OsNameCell: FC<OsNameCellProps> = ({
+  osName,
+  upgradeRecommendation,
+  isExportMode = false,
+}) => {
+  const hasUpgradeRecommendation =
+    upgradeRecommendation && upgradeRecommendation.trim() !== "";
+
+  if (!hasUpgradeRecommendation || isExportMode) {
+    return <>{osName}</>;
+  }
+
+  return (
+    <Flex
+      alignItems={{ default: "alignItemsCenter" }}
+      spaceItems={{ default: "spaceItemsXs" }}
+      flexWrap={{ default: "nowrap" }}
+    >
+      <FlexItem>{osName}</FlexItem>
+      <FlexItem shrink={{ default: "shrink" }}>
+        <OsUpgradeRecommendationPopover
+          upgradeRecommendation={upgradeRecommendation}
+        />
+      </FlexItem>
+    </Flex>
+  );
+};
+
+OsNameCell.displayName = "OsNameCell";