From 8028bb3ae303ef6cfeb5657f59e4dbbb20a4090c Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Wed, 23 Oct 2024 13:55:06 +0200
Subject: [PATCH 1/2] feat: K8sNameDescriptionField and related components

---
 .eslintrc.json                                |  1 -
 .../FieldGroupHelpLabelIcon.md                | 26 ++++++
 .../FieldGroupHelpLabelIconBasic.tsx          | 24 ++++++
 .../K8sNameDescriptionField.md                | 33 ++++++++
 .../K8sNameDescriptionFieldBasic.tsx          | 48 +++++++++++
 .../NameWithResourceNameFieldBasic.tsx        | 44 +++++++++++
 .../FieldGroupHelpLabelIcon.tsx               | 19 +++++
 .../src/FieldGroupHelpLabelIcon/index.ts      |  1 +
 .../HelperTextItemVariants.tsx                | 35 ++++++++
 .../K8sNameDescriptionField.tsx               | 54 +++++++++++++
 .../NameWithResourceNameField.tsx             | 79 +++++++++++++++++++
 .../ResourceNameDefinitionPopover.tsx         | 14 ++++
 .../ResourceNameField.tsx                     | 59 ++++++++++++++
 .../src/K8sNameDescriptionField/index.tsx     |  3 +
 .../src/K8sNameDescriptionField/types.ts      | 39 +++++++++
 packages/module/src/index.ts                  |  2 +
 16 files changed, 480 insertions(+), 1 deletion(-)
 create mode 100644 packages/module/patternfly-docs/content/examples/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIcon.md
 create mode 100644 packages/module/patternfly-docs/content/examples/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIconBasic.tsx
 create mode 100644 packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionField.md
 create mode 100644 packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionFieldBasic.tsx
 create mode 100644 packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/NameWithResourceNameFieldBasic.tsx
 create mode 100644 packages/module/src/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIcon.tsx
 create mode 100644 packages/module/src/FieldGroupHelpLabelIcon/index.ts
 create mode 100644 packages/module/src/K8sNameDescriptionField/HelperTextItemVariants.tsx
 create mode 100644 packages/module/src/K8sNameDescriptionField/K8sNameDescriptionField.tsx
 create mode 100644 packages/module/src/K8sNameDescriptionField/NameWithResourceNameField.tsx
 create mode 100644 packages/module/src/K8sNameDescriptionField/ResourceNameDefinitionPopover.tsx
 create mode 100644 packages/module/src/K8sNameDescriptionField/ResourceNameField.tsx
 create mode 100644 packages/module/src/K8sNameDescriptionField/index.tsx
 create mode 100644 packages/module/src/K8sNameDescriptionField/types.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index a6dcec8..b910b7d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -84,7 +84,6 @@
     ],
     "no-unused-labels": "error",
     "no-var": "error",
-    "object-shorthand": "error",
     "one-var": ["error", "never"],
     "prefer-const": "error",
     "radix": ["error", "as-needed"],
diff --git a/packages/module/patternfly-docs/content/examples/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIcon.md b/packages/module/patternfly-docs/content/examples/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIcon.md
new file mode 100644
index 0000000..65aa3ea
--- /dev/null
+++ b/packages/module/patternfly-docs/content/examples/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIcon.md
@@ -0,0 +1,26 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: AI-infra-ui-components
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: FieldGroupHelpLabelIcon
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['FieldGroupHelpLabelIcon']
+---
+
+import { FieldGroupHelpLabelIcon } from "@patternfly/ai-infra-ui-components";
+
+Note: this component documents the API and enhances the [existing FieldGroupHelpLabelIcon](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/FieldGroupHelpLabelIcon.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/components/FieldGroupHelpLabelIcon`
+
+This AI-infra-ui-components version of `FieldGroupHelpLabelIcon` uses internally a new PatternFly's `FormGroupLabelHelp` component instead of odh-dasboard's `DashboardPopupIconButton`.
+**We recommend** replacing occurences of `<DashboardPopupIconButton icon={<OutlinedQuestionCircleIcon />} aria-label="More info"/>` with `<FormGroupLabelHelp aria-label="More info" />`.
+
+### Example
+
+```js file="./FieldGroupHelpLabelIconBasic.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/examples/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIconBasic.tsx b/packages/module/patternfly-docs/content/examples/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIconBasic.tsx
new file mode 100644
index 0000000..cc68d4f
--- /dev/null
+++ b/packages/module/patternfly-docs/content/examples/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIconBasic.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { FieldGroupHelpLabelIcon } from '@patternfly/ai-infra-ui-components';
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+
+export const FieldGroupHelpLabelIconBasic: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+
+  const handleNameChange = (_event, name: string) => {
+    setName(name);
+  };
+
+  return (
+    <Form>
+      <FormGroup
+        label="Full name"
+        labelHelp={<FieldGroupHelpLabelIcon content="The name of a person" />}
+        isRequired
+        fieldId="simple-form-name"
+      >
+        <TextInput type="text" id="simple-form-name" name="simple-form-name" value={name} onChange={handleNameChange} />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionField.md b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionField.md
new file mode 100644
index 0000000..c57c528
--- /dev/null
+++ b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionField.md
@@ -0,0 +1,33 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: AI-infra-ui-components
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: K8sNameDescriptionField
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['K8sNameDescriptionField', 'NameWithResourceNameField']
+---
+
+import { K8sNameDescriptionField, NameWithResourceNameField } from "@patternfly/ai-infra-ui-components";
+
+Note: this component documents the API and enhances the [existing K8sNameDescriptionField](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField`
+
+In the following examples, sample `data` and `onDataChange` props are provided. To obtain these props properly, you should use the [useK8sNameDescriptionFieldData hook](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx#L23).
+
+### Example
+
+```js file="./K8sNameDescriptionFieldBasic.tsx"
+
+```
+
+### Example without description
+
+Internally in ai-infra-ui-components the `K8sNameDescriptionField` is built out of `NameWithResourceNameField` component, which encapsulates only the Name and Resource name fields - it has been created for future use cases where the "Description" field won't occur.
+
+```js file="./NameWithResourceNameFieldBasic.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionFieldBasic.tsx b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionFieldBasic.tsx
new file mode 100644
index 0000000..1bb9218
--- /dev/null
+++ b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionFieldBasic.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  K8sNameDescriptionField,
+  K8sNameDescriptionFieldData,
+  UseK8sNameDescriptionFieldData
+} from '@patternfly/ai-infra-ui-components';
+import { Form } from '@patternfly/react-core';
+
+export const K8sNameDescriptionFieldBasic: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+  const [resourceName, setResourceName] = React.useState<string | null>(null);
+  const [description, setDescription] = React.useState('');
+
+  const createResourceName = (name: string) => name.toLowerCase().replaceAll(' ', '-');
+  const RESOURCE_NAME_MAX_LENGTH = 30;
+
+  const data: K8sNameDescriptionFieldData = {
+    name: name,
+    description: description,
+    k8sName: {
+      value: resourceName ?? createResourceName(name),
+      state: {
+        immutable: false,
+        invalidCharacters: resourceName !== null && resourceName.includes(' '),
+        invalidLength: resourceName !== null && resourceName.length > RESOURCE_NAME_MAX_LENGTH,
+        safePrefix: undefined,
+        maxLength: RESOURCE_NAME_MAX_LENGTH,
+        touched: false
+      }
+    }
+  };
+
+  const onDataChange: UseK8sNameDescriptionFieldData['onDataChange'] = (key, value) => {
+    if (key === 'name') {
+      setName(value);
+    } else if (key === 'k8sName') {
+      setResourceName(value);
+    } else if (key === 'description') {
+      setDescription(value);
+    }
+  };
+
+  return (
+    <Form>
+      <K8sNameDescriptionField data={data} dataTestId="example-0" onDataChange={onDataChange} />
+    </Form>
+  );
+};
diff --git a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/NameWithResourceNameFieldBasic.tsx b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/NameWithResourceNameFieldBasic.tsx
new file mode 100644
index 0000000..88d1509
--- /dev/null
+++ b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/NameWithResourceNameFieldBasic.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  NameWithResourceNameField,
+  NameWithResourceNameFieldData,
+  UseK8sNameDescriptionFieldData
+} from '@patternfly/ai-infra-ui-components';
+import { Form } from '@patternfly/react-core';
+
+export const NameWithResourceNameFieldBasic: React.FunctionComponent = () => {
+  const [name, setName] = React.useState('');
+  const [resourceName, setResourceName] = React.useState<string | null>(null);
+
+  const createResourceName = (name: string) => name.toLowerCase().replaceAll(' ', '-');
+  const RESOURCE_NAME_MAX_LENGTH = 30;
+
+  const data: NameWithResourceNameFieldData = {
+    name: name,
+    k8sName: {
+      value: resourceName ?? createResourceName(name),
+      state: {
+        immutable: false,
+        invalidCharacters: resourceName !== null && resourceName.includes(' '),
+        invalidLength: resourceName !== null && resourceName.length > RESOURCE_NAME_MAX_LENGTH,
+        safePrefix: undefined,
+        maxLength: RESOURCE_NAME_MAX_LENGTH,
+        touched: false
+      }
+    }
+  };
+
+  const onDataChange: UseK8sNameDescriptionFieldData['onDataChange'] = (key, value) => {
+    if (key === 'name') {
+      setName(value);
+    } else if (key === 'k8sName') {
+      setResourceName(value);
+    }
+  };
+
+  return (
+    <Form>
+      <NameWithResourceNameField data={data} dataTestId="example-1" onDataChange={onDataChange} />
+    </Form>
+  );
+};
diff --git a/packages/module/src/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIcon.tsx b/packages/module/src/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIcon.tsx
new file mode 100644
index 0000000..2a9bc23
--- /dev/null
+++ b/packages/module/src/FieldGroupHelpLabelIcon/FieldGroupHelpLabelIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Popover, FormGroupLabelHelp } from '@patternfly/react-core';
+
+export type FieldGroupHelpLabelIconProps = {
+  /** Body content of the popover. Should provide additional context for a form field.
+   *  If you want to close the popover after an action within the body content, you can provide a function which will receive a callback as an argument to hide the popover, i.e. bodyContent={hide => <Button onClick={() => hide()}>Close} */
+  content: React.ComponentProps<typeof Popover>['bodyContent'];
+};
+
+/**
+ * A help icon with a popover. Should be used in FormGroup in a labelHelp prop to provide additional context for a form field.
+ */
+export const FieldGroupHelpLabelIcon: React.FC<FieldGroupHelpLabelIconProps> = ({
+  content
+}: FieldGroupHelpLabelIconProps) => (
+  <Popover bodyContent={content}>
+    <FormGroupLabelHelp aria-label="More info" />
+  </Popover>
+);
diff --git a/packages/module/src/FieldGroupHelpLabelIcon/index.ts b/packages/module/src/FieldGroupHelpLabelIcon/index.ts
new file mode 100644
index 0000000..011b1e4
--- /dev/null
+++ b/packages/module/src/FieldGroupHelpLabelIcon/index.ts
@@ -0,0 +1 @@
+export * from './FieldGroupHelpLabelIcon';
diff --git a/packages/module/src/K8sNameDescriptionField/HelperTextItemVariants.tsx b/packages/module/src/K8sNameDescriptionField/HelperTextItemVariants.tsx
new file mode 100644
index 0000000..7b1b01a
--- /dev/null
+++ b/packages/module/src/K8sNameDescriptionField/HelperTextItemVariants.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { HelperTextItem } from '@patternfly/react-core';
+import { K8sNameDescriptionFieldData } from './types';
+
+type Variants = React.ComponentProps<typeof HelperTextItem>['variant'];
+
+type HelperTextItemType = React.FC<{
+  k8sName: K8sNameDescriptionFieldData['k8sName'];
+}>;
+
+export const HelperTextItemMaxLength: HelperTextItemType = ({ k8sName }) => {
+  let variant: Variants = 'indeterminate';
+  if (k8sName.state.invalidLength) {
+    variant = 'error';
+  } else if (k8sName.value.trim().length > 0) {
+    variant = 'success';
+  }
+
+  return <HelperTextItem variant={variant}>Cannot exceed {k8sName.state.maxLength} characters</HelperTextItem>;
+};
+
+export const HelperTextItemValidCharacters: HelperTextItemType = ({ k8sName }) => {
+  let variant: Variants = 'indeterminate';
+  if (k8sName.state.invalidCharacters) {
+    variant = 'error';
+  } else if (k8sName.value.trim().length > 0) {
+    variant = 'success';
+  }
+
+  return (
+    <HelperTextItem variant={variant}>
+      Must start and end with a letter or number. Valid characters include lowercase letters, numbers, and hyphens (-).
+    </HelperTextItem>
+  );
+};
diff --git a/packages/module/src/K8sNameDescriptionField/K8sNameDescriptionField.tsx b/packages/module/src/K8sNameDescriptionField/K8sNameDescriptionField.tsx
new file mode 100644
index 0000000..793ea2c
--- /dev/null
+++ b/packages/module/src/K8sNameDescriptionField/K8sNameDescriptionField.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { FormGroup, FormSection, TextArea } from '@patternfly/react-core';
+import { UseK8sNameDescriptionFieldData } from './types';
+import { NameWithResourceNameField } from './NameWithResourceNameField';
+
+export type K8sNameDescriptionFieldProps = {
+  /** Flag to indicate if the initial focus should be in the name text input */
+  autoFocusName?: boolean;
+  /** Initial data */
+  data: UseK8sNameDescriptionFieldData['data'];
+  /** Test id */
+  dataTestId: string;
+  /** Label of the description field */
+  descriptionLabel?: string;
+  /** Label of the name field */
+  nameLabel?: string;
+  /** Callback function on text input changes. Accepts 2 arguments.
+   * First is a key determining which text input we handle (name | k8sName | description), second is the updated value. */
+  onDataChange?: UseK8sNameDescriptionFieldData['onDataChange'];
+};
+
+/**
+ * Use in place of any K8s Resource creation / edit.
+ * @see useK8sNameDescriptionFieldData
+ */
+export const K8sNameDescriptionField: React.FC<K8sNameDescriptionFieldProps> = ({
+  autoFocusName,
+  data,
+  dataTestId,
+  descriptionLabel = 'Description',
+  nameLabel = 'Name',
+  onDataChange
+}: K8sNameDescriptionFieldProps) => (
+  <FormSection style={{ margin: 0 }}>
+    <NameWithResourceNameField
+      autoFocusName={autoFocusName}
+      data={data}
+      dataTestId={dataTestId}
+      nameLabel={nameLabel}
+      onDataChange={onDataChange}
+    />
+    <FormGroup label={descriptionLabel} fieldId={`${dataTestId}-description`}>
+      <TextArea
+        aria-readonly={!onDataChange}
+        data-testid={`${dataTestId}-description`}
+        id={`${dataTestId}-description`}
+        name={`${dataTestId}-description`}
+        value={data.description}
+        onChange={(_event, value) => onDataChange?.('description', value)}
+        resizeOrientation="vertical"
+      />
+    </FormGroup>
+  </FormSection>
+);
diff --git a/packages/module/src/K8sNameDescriptionField/NameWithResourceNameField.tsx b/packages/module/src/K8sNameDescriptionField/NameWithResourceNameField.tsx
new file mode 100644
index 0000000..a08861b
--- /dev/null
+++ b/packages/module/src/K8sNameDescriptionField/NameWithResourceNameField.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { Button, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
+import { ResourceNameDefinitionPopover } from './ResourceNameDefinitionPopover';
+import { ResourceNameField } from './ResourceNameField';
+import { NameWithResourceNameFieldData, UseK8sNameDescriptionFieldData } from './types';
+
+export type NameWithResourceNameFieldProps = {
+  /** Flag to indicate if the initial focus should be in the name text input */
+  autoFocusName?: boolean;
+  /** Initial data */
+  data: NameWithResourceNameFieldData;
+  /** Test id */
+  dataTestId: string;
+  /** Label of the name field */
+  nameLabel?: string;
+  /** Callback function on text input changes. Accepts 2 arguments.
+   * First is a key determining which text input we handle (name | k8sName | description), second is the updated value. */
+  onDataChange?: UseK8sNameDescriptionFieldData['onDataChange'];
+};
+
+export const NameWithResourceNameField: React.FC<NameWithResourceNameFieldProps> = ({
+  autoFocusName,
+  data,
+  dataTestId,
+  nameLabel = 'Name',
+  onDataChange
+}: NameWithResourceNameFieldProps) => {
+  const [showK8sField, setShowK8sField] = React.useState(false);
+
+  const { name, k8sName } = data;
+
+  return (
+    <>
+      <FormGroup label={nameLabel} isRequired fieldId={`${dataTestId}-name`}>
+        <TextInput
+          aria-readonly={!onDataChange}
+          data-testid={`${dataTestId}-name`}
+          id={`${dataTestId}-name`}
+          name={`${dataTestId}-name`}
+          autoFocus={autoFocusName}
+          isRequired
+          value={name}
+          onChange={(_event, value) => onDataChange?.('name', value)}
+        />
+        {!showK8sField && !k8sName.state.immutable && (
+          <FormHelperText>
+            {k8sName.value && (
+              <HelperText>
+                <HelperTextItem>
+                  The resource name will be <b>{k8sName.value}</b>.
+                </HelperTextItem>
+              </HelperText>
+            )}
+            <HelperText>
+              <HelperTextItem>
+                <Button
+                  data-testid={`${dataTestId}-editResourceLink`}
+                  variant="link"
+                  isInline
+                  onClick={() => setShowK8sField(true)}
+                  style={{ marginRight: 'var(--pf-t--global--spacer--xs)' }}
+                >
+                  Edit resource name
+                </Button>{' '}
+                <ResourceNameDefinitionPopover />
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
+      </FormGroup>
+      <ResourceNameField
+        allowEdit={showK8sField}
+        dataTestId={dataTestId}
+        k8sName={k8sName}
+        onDataChange={onDataChange}
+      />
+    </>
+  );
+};
diff --git a/packages/module/src/K8sNameDescriptionField/ResourceNameDefinitionPopover.tsx b/packages/module/src/K8sNameDescriptionField/ResourceNameDefinitionPopover.tsx
new file mode 100644
index 0000000..5ec2cbc
--- /dev/null
+++ b/packages/module/src/K8sNameDescriptionField/ResourceNameDefinitionPopover.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import { FieldGroupHelpLabelIcon } from '../FieldGroupHelpLabelIcon';
+
+export const ResourceNameDefinitionPopover: React.FC = () => (
+  <FieldGroupHelpLabelIcon
+    content={
+      <Stack hasGutter>
+        <StackItem>Resource names are what your resources are labeled in OpenShift.</StackItem>
+        <StackItem>Resource names are not editable after creation.</StackItem>
+      </Stack>
+    }
+  />
+);
diff --git a/packages/module/src/K8sNameDescriptionField/ResourceNameField.tsx b/packages/module/src/K8sNameDescriptionField/ResourceNameField.tsx
new file mode 100644
index 0000000..552a8d2
--- /dev/null
+++ b/packages/module/src/K8sNameDescriptionField/ResourceNameField.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { FormGroup, HelperText, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { ResourceNameDefinitionPopover } from './ResourceNameDefinitionPopover';
+import { HelperTextItemMaxLength, HelperTextItemValidCharacters } from './HelperTextItemVariants';
+import { K8sNameDescriptionFieldData, K8sNameDescriptionFieldUpdateFunction } from './types';
+
+type ResourceNameFieldProps = {
+  allowEdit: boolean;
+  dataTestId: string;
+  k8sName: K8sNameDescriptionFieldData['k8sName'];
+  onDataChange?: K8sNameDescriptionFieldUpdateFunction;
+};
+
+/** Sub-resource; not for public consumption */
+export const ResourceNameField: React.FC<ResourceNameFieldProps> = ({
+  allowEdit,
+  dataTestId,
+  k8sName,
+  onDataChange
+}) => {
+  const formGroupProps: React.ComponentProps<typeof FormGroup> = {
+    label: 'Resource name',
+    labelHelp: <ResourceNameDefinitionPopover />,
+    fieldId: `${dataTestId}-resourceName`
+  };
+
+  if (k8sName.state.immutable) {
+    return <FormGroup {...formGroupProps}>{k8sName.value}</FormGroup>;
+  }
+
+  if (!allowEdit) {
+    return null;
+  }
+
+  let validated: ValidatedOptions = ValidatedOptions.default;
+  if (k8sName.state.invalidLength || k8sName.state.invalidCharacters) {
+    validated = ValidatedOptions.error;
+  } else if (k8sName.value.length > 0) {
+    validated = ValidatedOptions.success;
+  }
+
+  return (
+    <FormGroup {...formGroupProps} isRequired>
+      <TextInput
+        data-testid={`${dataTestId}-resourceName`}
+        name={`${dataTestId}-resourceName`}
+        id={`${dataTestId}-resourceName`}
+        isRequired
+        value={k8sName.value}
+        onChange={(_event, value) => onDataChange?.('k8sName', value)}
+        validated={validated}
+      />
+      <HelperText>
+        <HelperTextItemMaxLength k8sName={k8sName} />
+        <HelperTextItemValidCharacters k8sName={k8sName} />
+      </HelperText>
+    </FormGroup>
+  );
+};
diff --git a/packages/module/src/K8sNameDescriptionField/index.tsx b/packages/module/src/K8sNameDescriptionField/index.tsx
new file mode 100644
index 0000000..6ed923a
--- /dev/null
+++ b/packages/module/src/K8sNameDescriptionField/index.tsx
@@ -0,0 +1,3 @@
+export * from './K8sNameDescriptionField';
+export * from './NameWithResourceNameField';
+export * from './types';
diff --git a/packages/module/src/K8sNameDescriptionField/types.ts b/packages/module/src/K8sNameDescriptionField/types.ts
new file mode 100644
index 0000000..a7ea737
--- /dev/null
+++ b/packages/module/src/K8sNameDescriptionField/types.ts
@@ -0,0 +1,39 @@
+export type K8sNameDescriptionFieldData = {
+  name: string;
+  description: string;
+  k8sName: {
+    value: string;
+    state: {
+      /** The value cannot be changeable */
+      immutable: boolean;
+      /** If an invalid character was used */
+      invalidCharacters: boolean;
+      /** If the maxLength is exceeded */
+      invalidLength: boolean;
+      /**
+       * Optional safe prefix for translation.
+       * @see AdditionalCriteriaForTranslation
+       */
+      safePrefix?: string;
+      /** Max length for the K8s name */
+      maxLength: number;
+      /** The user is now in control of the value; do not auto generate */
+      touched: boolean;
+    };
+  };
+};
+
+export type NameWithResourceNameFieldData = Omit<K8sNameDescriptionFieldData, 'description'>;
+
+type K8sNameDescriptionFieldUpdateFunctionTemplate<T> = (
+  key: keyof K8sNameDescriptionFieldData,
+  value: string // always the value; directly or k8sName.value
+) => T;
+export type K8sNameDescriptionFieldUpdateFunction = K8sNameDescriptionFieldUpdateFunctionTemplate<void>;
+export type K8sNameDescriptionFieldUpdateFunctionInternal =
+  K8sNameDescriptionFieldUpdateFunctionTemplate<K8sNameDescriptionFieldData>;
+
+export type UseK8sNameDescriptionFieldData = {
+  data: K8sNameDescriptionFieldData;
+  onDataChange: K8sNameDescriptionFieldUpdateFunction;
+};
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
index 06e59e5..85a3ff4 100644
--- a/packages/module/src/index.ts
+++ b/packages/module/src/index.ts
@@ -1,4 +1,6 @@
 export * from './BulkActionExpandableSection';
 export * from './DeleteModal';
+export * from './FieldGroupHelpLabelIcon';
 export * from './IndentSection';
+export * from './K8sNameDescriptionField';
 export * from './TruncatedText';

From 195bf8c2315a8501109cf01c0b1cc2a25c8a61fb Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Fri, 8 Nov 2024 09:58:40 +0100
Subject: [PATCH 2/2] feat(K8sNameDescriptionField): add showDescription prop,
 remove NameWithResourceNameField

---
 .../K8sNameDescriptionField.md                |  12 +-
 .../K8sNameDescriptionFieldBasic.tsx          |  22 +++-
 .../NameWithResourceNameFieldBasic.tsx        |  44 --------
 .../K8sNameDescriptionField.tsx               | 105 ++++++++++++++----
 .../NameWithResourceNameField.tsx             |  79 -------------
 .../src/K8sNameDescriptionField/index.tsx     |   1 -
 .../src/K8sNameDescriptionField/types.ts      |   2 -
 7 files changed, 101 insertions(+), 164 deletions(-)
 delete mode 100644 packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/NameWithResourceNameFieldBasic.tsx
 delete mode 100644 packages/module/src/K8sNameDescriptionField/NameWithResourceNameField.tsx

diff --git a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionField.md b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionField.md
index c57c528..264fad9 100644
--- a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionField.md
+++ b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionField.md
@@ -9,10 +9,10 @@ id: K8sNameDescriptionField
 source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents: ['K8sNameDescriptionField', 'NameWithResourceNameField']
+propComponents: ['K8sNameDescriptionField']
 ---
 
-import { K8sNameDescriptionField, NameWithResourceNameField } from "@patternfly/ai-infra-ui-components";
+import { K8sNameDescriptionField } from "@patternfly/ai-infra-ui-components";
 
 Note: this component documents the API and enhances the [existing K8sNameDescriptionField](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField`
 
@@ -23,11 +23,3 @@ In the following examples, sample `data` and `onDataChange` props are provided.
 ```js file="./K8sNameDescriptionFieldBasic.tsx"
 
 ```
-
-### Example without description
-
-Internally in ai-infra-ui-components the `K8sNameDescriptionField` is built out of `NameWithResourceNameField` component, which encapsulates only the Name and Resource name fields - it has been created for future use cases where the "Description" field won't occur.
-
-```js file="./NameWithResourceNameFieldBasic.tsx"
-
-```
diff --git a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionFieldBasic.tsx b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionFieldBasic.tsx
index 1bb9218..c7df4d2 100644
--- a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionFieldBasic.tsx
+++ b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/K8sNameDescriptionFieldBasic.tsx
@@ -4,12 +4,13 @@ import {
   K8sNameDescriptionFieldData,
   UseK8sNameDescriptionFieldData
 } from '@patternfly/ai-infra-ui-components';
-import { Form } from '@patternfly/react-core';
+import { Checkbox, Form } from '@patternfly/react-core';
 
 export const K8sNameDescriptionFieldBasic: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [resourceName, setResourceName] = React.useState<string | null>(null);
   const [description, setDescription] = React.useState('');
+  const [showDescription, setShowDescription] = React.useState(true);
 
   const createResourceName = (name: string) => name.toLowerCase().replaceAll(' ', '-');
   const RESOURCE_NAME_MAX_LENGTH = 30;
@@ -41,8 +42,21 @@ export const K8sNameDescriptionFieldBasic: React.FunctionComponent = () => {
   };
 
   return (
-    <Form>
-      <K8sNameDescriptionField data={data} dataTestId="example-0" onDataChange={onDataChange} />
-    </Form>
+    <>
+      <Checkbox
+        id="checkbox-1"
+        onClick={() => setShowDescription((checked) => !checked)}
+        checked={showDescription}
+        label="Show description"
+      />
+      <Form>
+        <K8sNameDescriptionField
+          showDescription={showDescription}
+          data={data}
+          dataTestId="example-0"
+          onDataChange={onDataChange}
+        />
+      </Form>
+    </>
   );
 };
diff --git a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/NameWithResourceNameFieldBasic.tsx b/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/NameWithResourceNameFieldBasic.tsx
deleted file mode 100644
index 88d1509..0000000
--- a/packages/module/patternfly-docs/content/examples/K8sNameDescriptionField/NameWithResourceNameFieldBasic.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import {
-  NameWithResourceNameField,
-  NameWithResourceNameFieldData,
-  UseK8sNameDescriptionFieldData
-} from '@patternfly/ai-infra-ui-components';
-import { Form } from '@patternfly/react-core';
-
-export const NameWithResourceNameFieldBasic: React.FunctionComponent = () => {
-  const [name, setName] = React.useState('');
-  const [resourceName, setResourceName] = React.useState<string | null>(null);
-
-  const createResourceName = (name: string) => name.toLowerCase().replaceAll(' ', '-');
-  const RESOURCE_NAME_MAX_LENGTH = 30;
-
-  const data: NameWithResourceNameFieldData = {
-    name: name,
-    k8sName: {
-      value: resourceName ?? createResourceName(name),
-      state: {
-        immutable: false,
-        invalidCharacters: resourceName !== null && resourceName.includes(' '),
-        invalidLength: resourceName !== null && resourceName.length > RESOURCE_NAME_MAX_LENGTH,
-        safePrefix: undefined,
-        maxLength: RESOURCE_NAME_MAX_LENGTH,
-        touched: false
-      }
-    }
-  };
-
-  const onDataChange: UseK8sNameDescriptionFieldData['onDataChange'] = (key, value) => {
-    if (key === 'name') {
-      setName(value);
-    } else if (key === 'k8sName') {
-      setResourceName(value);
-    }
-  };
-
-  return (
-    <Form>
-      <NameWithResourceNameField data={data} dataTestId="example-1" onDataChange={onDataChange} />
-    </Form>
-  );
-};
diff --git a/packages/module/src/K8sNameDescriptionField/K8sNameDescriptionField.tsx b/packages/module/src/K8sNameDescriptionField/K8sNameDescriptionField.tsx
index 793ea2c..4e8878b 100644
--- a/packages/module/src/K8sNameDescriptionField/K8sNameDescriptionField.tsx
+++ b/packages/module/src/K8sNameDescriptionField/K8sNameDescriptionField.tsx
@@ -1,7 +1,17 @@
 import * as React from 'react';
-import { FormGroup, FormSection, TextArea } from '@patternfly/react-core';
+import {
+  Button,
+  FormGroup,
+  FormHelperText,
+  FormSection,
+  HelperText,
+  HelperTextItem,
+  TextArea,
+  TextInput
+} from '@patternfly/react-core';
 import { UseK8sNameDescriptionFieldData } from './types';
-import { NameWithResourceNameField } from './NameWithResourceNameField';
+import { ResourceNameDefinitionPopover } from './ResourceNameDefinitionPopover';
+import { ResourceNameField } from './ResourceNameField';
 
 export type K8sNameDescriptionFieldProps = {
   /** Flag to indicate if the initial focus should be in the name text input */
@@ -14,6 +24,8 @@ export type K8sNameDescriptionFieldProps = {
   descriptionLabel?: string;
   /** Label of the name field */
   nameLabel?: string;
+  /** Flag indicating whether to show the description field */
+  showDescription?: boolean;
   /** Callback function on text input changes. Accepts 2 arguments.
    * First is a key determining which text input we handle (name | k8sName | description), second is the updated value. */
   onDataChange?: UseK8sNameDescriptionFieldData['onDataChange'];
@@ -29,26 +41,71 @@ export const K8sNameDescriptionField: React.FC<K8sNameDescriptionFieldProps> = (
   dataTestId,
   descriptionLabel = 'Description',
   nameLabel = 'Name',
-  onDataChange
-}: K8sNameDescriptionFieldProps) => (
-  <FormSection style={{ margin: 0 }}>
-    <NameWithResourceNameField
-      autoFocusName={autoFocusName}
-      data={data}
-      dataTestId={dataTestId}
-      nameLabel={nameLabel}
-      onDataChange={onDataChange}
-    />
-    <FormGroup label={descriptionLabel} fieldId={`${dataTestId}-description`}>
-      <TextArea
-        aria-readonly={!onDataChange}
-        data-testid={`${dataTestId}-description`}
-        id={`${dataTestId}-description`}
-        name={`${dataTestId}-description`}
-        value={data.description}
-        onChange={(_event, value) => onDataChange?.('description', value)}
-        resizeOrientation="vertical"
+  onDataChange,
+  showDescription
+}: K8sNameDescriptionFieldProps) => {
+  const [showK8sField, setShowK8sField] = React.useState(false);
+
+  const { name, k8sName, description } = data;
+
+  return (
+    <FormSection style={{ margin: 0 }}>
+      <FormGroup label={nameLabel} isRequired fieldId={`${dataTestId}-name`}>
+        <TextInput
+          aria-readonly={!onDataChange}
+          data-testid={`${dataTestId}-name`}
+          id={`${dataTestId}-name`}
+          name={`${dataTestId}-name`}
+          autoFocus={autoFocusName}
+          isRequired
+          value={name}
+          onChange={(_event, value) => onDataChange?.('name', value)}
+        />
+        {!showK8sField && !k8sName.state.immutable && (
+          <FormHelperText>
+            {k8sName.value && (
+              <HelperText>
+                <HelperTextItem>
+                  The resource name will be <b>{k8sName.value}</b>.
+                </HelperTextItem>
+              </HelperText>
+            )}
+            <HelperText>
+              <HelperTextItem>
+                <Button
+                  data-testid={`${dataTestId}-editResourceLink`}
+                  variant="link"
+                  isInline
+                  onClick={() => setShowK8sField(true)}
+                  style={{ marginRight: 'var(--pf-t--global--spacer--xs)' }}
+                >
+                  Edit resource name
+                </Button>{' '}
+                <ResourceNameDefinitionPopover />
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
+      </FormGroup>
+      <ResourceNameField
+        allowEdit={showK8sField}
+        dataTestId={dataTestId}
+        k8sName={k8sName}
+        onDataChange={onDataChange}
       />
-    </FormGroup>
-  </FormSection>
-);
+      {showDescription && (
+        <FormGroup label={descriptionLabel} fieldId={`${dataTestId}-description`}>
+          <TextArea
+            aria-readonly={!onDataChange}
+            data-testid={`${dataTestId}-description`}
+            id={`${dataTestId}-description`}
+            name={`${dataTestId}-description`}
+            value={description}
+            onChange={(_event, value) => onDataChange?.('description', value)}
+            resizeOrientation="vertical"
+          />
+        </FormGroup>
+      )}
+    </FormSection>
+  );
+};
diff --git a/packages/module/src/K8sNameDescriptionField/NameWithResourceNameField.tsx b/packages/module/src/K8sNameDescriptionField/NameWithResourceNameField.tsx
deleted file mode 100644
index a08861b..0000000
--- a/packages/module/src/K8sNameDescriptionField/NameWithResourceNameField.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react';
-import { Button, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
-import { ResourceNameDefinitionPopover } from './ResourceNameDefinitionPopover';
-import { ResourceNameField } from './ResourceNameField';
-import { NameWithResourceNameFieldData, UseK8sNameDescriptionFieldData } from './types';
-
-export type NameWithResourceNameFieldProps = {
-  /** Flag to indicate if the initial focus should be in the name text input */
-  autoFocusName?: boolean;
-  /** Initial data */
-  data: NameWithResourceNameFieldData;
-  /** Test id */
-  dataTestId: string;
-  /** Label of the name field */
-  nameLabel?: string;
-  /** Callback function on text input changes. Accepts 2 arguments.
-   * First is a key determining which text input we handle (name | k8sName | description), second is the updated value. */
-  onDataChange?: UseK8sNameDescriptionFieldData['onDataChange'];
-};
-
-export const NameWithResourceNameField: React.FC<NameWithResourceNameFieldProps> = ({
-  autoFocusName,
-  data,
-  dataTestId,
-  nameLabel = 'Name',
-  onDataChange
-}: NameWithResourceNameFieldProps) => {
-  const [showK8sField, setShowK8sField] = React.useState(false);
-
-  const { name, k8sName } = data;
-
-  return (
-    <>
-      <FormGroup label={nameLabel} isRequired fieldId={`${dataTestId}-name`}>
-        <TextInput
-          aria-readonly={!onDataChange}
-          data-testid={`${dataTestId}-name`}
-          id={`${dataTestId}-name`}
-          name={`${dataTestId}-name`}
-          autoFocus={autoFocusName}
-          isRequired
-          value={name}
-          onChange={(_event, value) => onDataChange?.('name', value)}
-        />
-        {!showK8sField && !k8sName.state.immutable && (
-          <FormHelperText>
-            {k8sName.value && (
-              <HelperText>
-                <HelperTextItem>
-                  The resource name will be <b>{k8sName.value}</b>.
-                </HelperTextItem>
-              </HelperText>
-            )}
-            <HelperText>
-              <HelperTextItem>
-                <Button
-                  data-testid={`${dataTestId}-editResourceLink`}
-                  variant="link"
-                  isInline
-                  onClick={() => setShowK8sField(true)}
-                  style={{ marginRight: 'var(--pf-t--global--spacer--xs)' }}
-                >
-                  Edit resource name
-                </Button>{' '}
-                <ResourceNameDefinitionPopover />
-              </HelperTextItem>
-            </HelperText>
-          </FormHelperText>
-        )}
-      </FormGroup>
-      <ResourceNameField
-        allowEdit={showK8sField}
-        dataTestId={dataTestId}
-        k8sName={k8sName}
-        onDataChange={onDataChange}
-      />
-    </>
-  );
-};
diff --git a/packages/module/src/K8sNameDescriptionField/index.tsx b/packages/module/src/K8sNameDescriptionField/index.tsx
index 6ed923a..c6f294a 100644
--- a/packages/module/src/K8sNameDescriptionField/index.tsx
+++ b/packages/module/src/K8sNameDescriptionField/index.tsx
@@ -1,3 +1,2 @@
 export * from './K8sNameDescriptionField';
-export * from './NameWithResourceNameField';
 export * from './types';
diff --git a/packages/module/src/K8sNameDescriptionField/types.ts b/packages/module/src/K8sNameDescriptionField/types.ts
index a7ea737..97a9a85 100644
--- a/packages/module/src/K8sNameDescriptionField/types.ts
+++ b/packages/module/src/K8sNameDescriptionField/types.ts
@@ -23,8 +23,6 @@ export type K8sNameDescriptionFieldData = {
   };
 };
 
-export type NameWithResourceNameFieldData = Omit<K8sNameDescriptionFieldData, 'description'>;
-
 type K8sNameDescriptionFieldUpdateFunctionTemplate<T> = (
   key: keyof K8sNameDescriptionFieldData,
   value: string // always the value; directly or k8sName.value