Node resource table and modal

frontend/src/pages/hardwareProfiles/ManageNodeResourceSection.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FormSection, Flex, FlexItem, Button } from '@patternfly/react-core';
+import { Identifier } from '~/types';
+import NodeResourceTable from './nodeResource/NodeResourceTable';
+import ManageNodeResourceModal from './nodeResource/ManageNodeResourceModal';
+
+type ManageNodeResourceSectionProps = {
+  identifiers: Identifier[];
+  setIdentifiers: (identifiers: Identifier[]) => void;
+};
+
+export const ManageNodeResourceSection: React.FC<ManageNodeResourceSectionProps> = ({
+  identifiers,
+  setIdentifiers,
+}) => {
+  const [isNodeResourceModalOpen, setIsNodeResourceModalOpen] = React.useState<boolean>(false);
+  return (
+    <>
+      <FormSection
+        title={
+          <Flex>
+            <FlexItem>Node resources</FlexItem>
+            <FlexItem>
+              <Button
+                variant="secondary"
+                onClick={() => setIsNodeResourceModalOpen(true)}
+                data-testid="add-node-resource-button"
+              >
+                Add resource
+              </Button>
+            </FlexItem>
+          </Flex>
+        }
+      >
+        <NodeResourceTable
+          identifiers={identifiers}
+          onUpdate={(newIdentifiers) => setIdentifiers(newIdentifiers)}
+        />
+      </FormSection>
+      {isNodeResourceModalOpen ? (
+        <ManageNodeResourceModal
+          onClose={() => setIsNodeResourceModalOpen(false)}
+          onSave={(identifier) => setIdentifiers([...identifiers, identifier])}
+        />
+      ) : null}
+    </>
+  );
+};

frontend/src/pages/hardwareProfiles/nodeResource/CountFormField.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import ValueUnitField from '~/components/ValueUnitField';
+import { MEMORY_UNITS_FOR_SELECTION } from '~/utilities/valueUnits';
+
+type CountFormFielddProps = {
+  label: string;
+  fieldId: string;
+  size: string;
+  setSize: (val: string) => void;
+  errorMessage?: string;
+  isValid?: boolean;
+};
+
+const CountFormField: React.FC<CountFormFielddProps> = ({
+  label,
+  fieldId,
+  size,
+  setSize,
+  errorMessage,
+  isValid = true,
+}) => (
+  <FormGroup label={label} fieldId={fieldId} data-testid={fieldId}>
+    <ValueUnitField
+      onBlur={(value) => setSize(value)}
+      onChange={(value) => setSize(value)}
+      options={MEMORY_UNITS_FOR_SELECTION}
+      value={size}
+    />
+    {!isValid && (
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem data-testid="persistent-storage-warning-can-not-edit" variant="error">
+            {errorMessage}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    )}
+  </FormGroup>
+);
+
+export default CountFormField;

frontend/src/pages/hardwareProfiles/nodeResource/ManageNodeResourceModal.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { Modal } from '@patternfly/react-core/deprecated';
+import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
+import { Identifier } from '~/types';
+import { EMPTY_IDENTIFIER } from './const';
+import NodeResourceForm from './NodeResourceForm';
+import { validateDefaultCount, validateMinCount } from './utils';
+
+type ManageNodeResourceModalProps = {
+  onClose: () => void;
+  existingIdentifier?: Identifier;
+  onSave: (identifier: Identifier) => void;
+};
+
+const ManageNodeResourceModal: React.FC<ManageNodeResourceModalProps> = ({
+  onClose,
+  existingIdentifier,
+  onSave,
+}) => {
+  const [identifier, setIdentifier] = useState<Identifier>(EMPTY_IDENTIFIER);
+  const isButtonDisabled =
+    !identifier.displayName ||
+    !identifier.identifier ||
+    !identifier.maxCount ||
+    !validateDefaultCount(identifier) ||
+    !validateMinCount(identifier);
+  useEffect(() => {
+    if (existingIdentifier) {
+      setIdentifier(existingIdentifier);
+    }
+  }, [existingIdentifier]);
+
+  const handleUpdate = (updatedIdentifier: Identifier) => {
+    setIdentifier(updatedIdentifier);
+  };
+
+  const onBeforeClose = () => {
+    setIdentifier(EMPTY_IDENTIFIER);
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={existingIdentifier ? 'Edit resource' : 'Add resource'}
+      variant="medium"
+      isOpen
+      onClose={() => {
+        onBeforeClose();
+      }}
+      footer={
+        <DashboardModalFooter
+          submitLabel={existingIdentifier ? 'Update' : 'Add'}
+          onSubmit={() => {
+            onSave(identifier);
+            onBeforeClose();
+          }}
+          onCancel={() => onBeforeClose()}
+          isSubmitDisabled={isButtonDisabled}
+          alertTitle="Error saving resource"
+        />
+      }
+    >
+      <NodeResourceForm identifier={identifier} onUpdate={handleUpdate} />
+    </Modal>
+  );
+};
+
+export default ManageNodeResourceModal;

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceForm.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { TextInput, FormGroup, Form } from '@patternfly/react-core';
+import { Identifier } from '~/types';
+import CountFormField from './CountFormField';
+import { validateDefaultCount, validateMinCount } from './utils';
+
+type NodeResourceFormProps = {
+  identifier: Identifier;
+  onUpdate: (data: Identifier) => void;
+};
+
+const NodeResourceForm: React.FC<NodeResourceFormProps> = ({ identifier, onUpdate }) => {
+  const handleFieldUpdate = (field: keyof Identifier, value: unknown) => {
+    onUpdate({ ...identifier, [field]: value });
+  };
+
+  return (
+    <Form>
+      <FormGroup label="Resource label" fieldId="resource-label">
+        <TextInput
+          value={identifier.displayName || ''}
+          onChange={(_, value) => handleFieldUpdate('displayName', value)}
+        />
+      </FormGroup>
+
+      <FormGroup label="Resource identifier" fieldId="resource-identifier">
+        <TextInput
+          value={identifier.identifier || ''}
+          onChange={(_, value) => handleFieldUpdate('identifier', value)}
+        />
+      </FormGroup>
+
+      <CountFormField
+        size={String(identifier.defaultCount) || ''}
+        setSize={(value: string) => handleFieldUpdate('defaultCount', value)}
+        label="Default"
+        fieldId="default"
+        errorMessage="Default must be equal to or between the minimum and maximum allowed limits."
+        isValid={validateDefaultCount(identifier)}
+      />
+
+      <CountFormField
+        size={String(identifier.minCount) || ''}
+        setSize={(value: string) => handleFieldUpdate('minCount', value)}
+        label="Minimum allowed"
+        fieldId="minimum-allowed"
+        isValid={validateMinCount(identifier)}
+        errorMessage="Minimum allowed value cannot exceed the maximum allowed value"
+      />
+
+      <CountFormField
+        size={String(identifier.maxCount) || ''}
+        setSize={(value: string) => handleFieldUpdate('maxCount', value)}
+        label="Maximum allowed"
+        fieldId="maximum-allowed"
+      />
+    </Form>
+  );
+};
+
+export default NodeResourceForm;

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceTable.tsx

@@ -0,0 +1,88 @@
+import { EmptyState, EmptyStateBody, Title } from '@patternfly/react-core';
+import React from 'react';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import { Table } from '~/components/table';
+import { Identifier } from '~/types';
+import { nodeResourceColumns } from './const';
+import NodeResourceTableRow from './NodeResourceTableRow';
+import ManageNodeResourceModal from './ManageNodeResourceModal';
+
+type NodeResourceTableProps = {
+  identifiers: Identifier[];
+  onUpdate: (identifiers: Identifier[]) => void;
+  viewOnly?: boolean;
+};
+
+const NodeResourceTable: React.FC<NodeResourceTableProps> = ({
+  identifiers,
+  onUpdate,
+  viewOnly,
+}) => {
+  const [editIdentifier, setEditIdentifier] = React.useState<Identifier | undefined>();
+  const [currentIndex, setCurrentIndex] = React.useState<number | undefined>();
+
+  if (identifiers.length === 0) {
+    return (
+      <EmptyState
+        titleText={
+          <Title headingLevel="h2" size="lg">
+            No node resource
+          </Title>
+        }
+        icon={PlusCircleIcon}
+        variant="xs"
+        data-testid="node-resource-empty-state"
+      >
+        <EmptyStateBody>No node resource body</EmptyStateBody>
+      </EmptyState>
+    );
+  }
+
+  return (
+    <>
+      <Table
+        data={identifiers}
+        columns={
+          viewOnly
+            ? nodeResourceColumns.filter((column) => column.field !== 'kebab')
+            : nodeResourceColumns
+        }
+        data-testid="node-resource-table"
+        rowRenderer={(identifier, rowIndex) => (
+          <NodeResourceTableRow
+            key={identifier.identifier + rowIndex}
+            identifier={identifier}
+            onEdit={(newIdentifier) => {
+              setEditIdentifier(newIdentifier);
+              setCurrentIndex(rowIndex);
+            }}
+            onDelete={() => {
+              const updatedIdentifiers = [...identifiers];
+              updatedIdentifiers.splice(rowIndex, 1);
+              onUpdate(updatedIdentifiers);
+            }}
+            showKebab={!!viewOnly}
+          />
+        )}
+      />
+      {editIdentifier ? (
+        <ManageNodeResourceModal
+          existingIdentifier={editIdentifier}
+          onClose={() => {
+            setEditIdentifier(undefined);
+            setCurrentIndex(undefined);
+          }}
+          onSave={(identifier) => {
+            if (currentIndex !== undefined) {
+              const updatedIdentifiers = [...identifiers];
+              updatedIdentifiers[currentIndex] = identifier;
+              onUpdate(updatedIdentifiers);
+            }
+          }}
+        />
+      ) : null}
+    </>
+  );
+};
+
+export default NodeResourceTable;

frontend/src/pages/hardwareProfiles/nodeResource/NodeResourceTableRow.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
+import { Identifier } from '~/types';
+
+type NodeResourceTableRowProps = {
+  identifier: Identifier;
+  onDelete: (identifier: Identifier) => void;
+  onEdit: (identifier: Identifier) => void;
+  showKebab: boolean;
+};
+
+const NodeResourceTableRow: React.FC<NodeResourceTableRowProps> = ({
+  identifier,
+  onEdit,
+  onDelete,
+  showKebab,
+}) => (
+  <Tr>
+    <Td dataLabel="Resource label">{identifier.displayName}</Td>
+    <Td dataLabel="Resource identifier">{identifier.identifier}</Td>
+    <Td dataLabel="Default">{identifier.defaultCount}</Td>
+    <Td dataLabel="Minimum allowed">{identifier.minCount}</Td>
+    <Td dataLabel="Maximum allowed">{identifier.maxCount}</Td>
+    {!showKebab && (
+      <Td isActionCell>
+        <ActionsColumn
+          items={[
+            {
+              title: 'Edit',
+              onClick: () => onEdit(identifier),
+            },
+            { isSeparator: true },
+            {
+              title: 'Delete',
+              onClick: () => onDelete(identifier),
+            },
+          ]}
+        />
+      </Td>
+    )}
+  </Tr>
+);
+
+export default NodeResourceTableRow;