From 6364a1b39ee62600887c86c92335936dce443989 Mon Sep 17 00:00:00 2001
From: Andrew Ballantyne <aballant@redhat.com>
Date: Fri, 6 Sep 2024 11:02:52 -0400
Subject: [PATCH] Support better K8s Resource Name editing

---
 .../mockK8sNameDescriptionFieldData.ts        |  26 ++
 .../src/__mocks__/mockStartNotebookData.ts    |   4 +-
 frontend/src/api/k8s/notebooks.ts             |  12 +-
 .../HelperTextItemVariants.tsx                |  42 +++
 .../K8sNameDescriptionField.tsx               | 128 +++++++++
 .../ResourceNameField.tsx                     |  58 ++++
 .../__tests__/utils.spec.ts                   | 265 ++++++++++++++++++
 .../k8s/K8sNameDescriptionField/types.ts      |  55 ++++
 .../k8s/K8sNameDescriptionField/utils.ts      | 123 ++++++++
 .../src/concepts/k8s/NameDescriptionField.tsx |  32 +--
 .../k8s/ResourceNameDefinitionTooltip.tsx     |  19 ++
 .../src/concepts/k8s/__tests__/utils.spec.ts  |  26 +-
 frontend/src/concepts/k8s/utils.ts            |  60 +++-
 .../pages/home/projects/ProjectsSection.tsx   |   5 +-
 .../screens/projects/ManageProjectModal.tsx   |  65 ++---
 .../screens/projects/NewProjectButton.tsx     |  27 +-
 .../screens/projects/ProjectListView.tsx      |  33 +--
 .../screens/spawner/SpawnerFooter.tsx         |   4 +-
 .../projects/screens/spawner/SpawnerPage.tsx  |  42 ++-
 .../projects/screens/spawner/spawnerUtils.ts  |   5 +-
 frontend/src/pages/projects/types.ts          |   6 +-
 frontend/src/utilities/useAutoFocusRef.ts     |  21 ++
 22 files changed, 904 insertions(+), 154 deletions(-)
 create mode 100644 frontend/src/__mocks__/mockK8sNameDescriptionFieldData.ts
 create mode 100644 frontend/src/concepts/k8s/K8sNameDescriptionField/HelperTextItemVariants.tsx
 create mode 100644 frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx
 create mode 100644 frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx
 create mode 100644 frontend/src/concepts/k8s/K8sNameDescriptionField/__tests__/utils.spec.ts
 create mode 100644 frontend/src/concepts/k8s/K8sNameDescriptionField/types.ts
 create mode 100644 frontend/src/concepts/k8s/K8sNameDescriptionField/utils.ts
 create mode 100644 frontend/src/concepts/k8s/ResourceNameDefinitionTooltip.tsx
 create mode 100644 frontend/src/utilities/useAutoFocusRef.ts

diff --git a/frontend/src/__mocks__/mockK8sNameDescriptionFieldData.ts b/frontend/src/__mocks__/mockK8sNameDescriptionFieldData.ts
new file mode 100644
index 0000000000..b02fc1b82c
--- /dev/null
+++ b/frontend/src/__mocks__/mockK8sNameDescriptionFieldData.ts
@@ -0,0 +1,26 @@
+import * as _ from 'lodash-es';
+import { RecursivePartial } from '~/typeHelpers';
+import { K8sNameDescriptionFieldData } from '~/concepts/k8s/K8sNameDescriptionField/types';
+
+export const mockK8sNameDescriptionFieldData = (
+  overrides: RecursivePartial<K8sNameDescriptionFieldData> = {},
+): K8sNameDescriptionFieldData =>
+  _.merge(
+    {},
+    {
+      name: '',
+      description: '',
+      k8sName: {
+        value: '',
+        state: {
+          immutable: false,
+          invalidLength: false,
+          invalidCharacters: false,
+          autoTrimmed: false,
+          maxLength: 253,
+          touched: false,
+        },
+      },
+    },
+    overrides,
+  );
diff --git a/frontend/src/__mocks__/mockStartNotebookData.ts b/frontend/src/__mocks__/mockStartNotebookData.ts
index c13a867eba..94379dff22 100644
--- a/frontend/src/__mocks__/mockStartNotebookData.ts
+++ b/frontend/src/__mocks__/mockStartNotebookData.ts
@@ -1,5 +1,6 @@
 import { ImageStreamKind } from '~/k8sTypes';
 import { StartNotebookData } from '~/pages/projects/types';
+import { mockK8sNameDescriptionFieldData } from '~/__mocks__/mockK8sNameDescriptionFieldData';
 
 type MockResourceConfigType = {
   volumeName?: string;
@@ -8,8 +9,7 @@ export const mockStartNotebookData = ({
   volumeName = 'test-volume',
 }: MockResourceConfigType): StartNotebookData => ({
   projectName: 'test-project',
-  notebookName: 'test-notebook',
-  description: '',
+  notebookData: mockK8sNameDescriptionFieldData({ name: 'test-notebook', description: '' }),
   image: {
     imageStream: {
       metadata: {
diff --git a/frontend/src/api/k8s/notebooks.ts b/frontend/src/api/k8s/notebooks.ts
index f2b897538f..c5e1e48bf7 100644
--- a/frontend/src/api/k8s/notebooks.ts
+++ b/frontend/src/api/k8s/notebooks.ts
@@ -14,7 +14,6 @@ import { K8sAPIOptions, KnownLabels, NotebookKind } from '~/k8sTypes';
 import { usernameTranslate } from '~/utilities/notebookControllerUtils';
 import { EnvironmentFromVariable, StartNotebookData } from '~/pages/projects/types';
 import { ROOT_MOUNT_PATH } from '~/pages/projects/pvc/const';
-import { translateDisplayNameForK8s } from '~/concepts/k8s/utils';
 import { getTolerationPatch, TolerationChanges } from '~/utilities/tolerations';
 import { applyK8sAPIOptions } from '~/api/apiMergeUtils';
 import {
@@ -36,9 +35,7 @@ export const assembleNotebook = (
 ): NotebookKind => {
   const {
     projectName,
-    notebookName,
-    notebookId: overrideNotebookId,
-    description,
+    notebookData,
     notebookSize,
     envFrom,
     initialAcceleratorProfile,
@@ -50,7 +47,11 @@ export const assembleNotebook = (
     existingTolerations,
     existingResources,
   } = data;
-  const notebookId = overrideNotebookId || translateDisplayNameForK8s(notebookName, 'wb-');
+  const {
+    name: notebookName,
+    description,
+    k8sName: { value: notebookId },
+  } = notebookData;
   const imageUrl = `${image.imageStream?.status?.dockerImageRepository}:${image.imageVersion?.name}`;
   const imageSelection = `${image.imageStream?.metadata.name}:${image.imageVersion?.name}`;
 
@@ -277,7 +278,6 @@ export const updateNotebook = (
   username: string,
   opts?: K8sAPIOptions,
 ): Promise<NotebookKind> => {
-  assignableData.notebookId = existingNotebook.metadata.name;
   const notebook = assembleNotebook(assignableData, username);
 
   const oldNotebook = structuredClone(existingNotebook);
diff --git a/frontend/src/concepts/k8s/K8sNameDescriptionField/HelperTextItemVariants.tsx b/frontend/src/concepts/k8s/K8sNameDescriptionField/HelperTextItemVariants.tsx
new file mode 100644
index 0000000000..42c875c48b
--- /dev/null
+++ b/frontend/src/concepts/k8s/K8sNameDescriptionField/HelperTextItemVariants.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { HelperTextItem } from '@patternfly/react-core';
+import { K8sNameDescriptionFieldData } from '~/concepts/k8s/K8sNameDescriptionField/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.state.autoTrimmed) {
+    variant = 'warning';
+  } else if (k8sName.value.trim().length > 0) {
+    variant = 'success';
+  }
+
+  return (
+    <HelperTextItem variant={variant} hasIcon>
+      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} hasIcon>
+      Must start and end with a letter or number. Valid characters include lowercase letters,
+      numbers, and hyphens (-).
+    </HelperTextItem>
+  );
+};
diff --git a/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx b/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx
new file mode 100644
index 0000000000..0114d51cff
--- /dev/null
+++ b/frontend/src/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField.tsx
@@ -0,0 +1,128 @@
+import * as React from 'react';
+import {
+  Button,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Stack,
+  StackItem,
+  TextArea,
+  TextInput,
+} from '@patternfly/react-core';
+import {
+  K8sNameDescriptionFieldData,
+  K8sNameDescriptionFieldUpdateFunction,
+  UseK8sNameDescriptionDataConfiguration,
+  UseK8sNameDescriptionFieldData,
+} from '~/concepts/k8s/K8sNameDescriptionField/types';
+import ResourceNameDefinitionTooltip from '~/concepts/k8s/ResourceNameDefinitionTooltip';
+import useAutoFocusRef from '~/utilities/useAutoFocusRef';
+import { handleUpdateLogic, setupDefaults } from '~/concepts/k8s/K8sNameDescriptionField/utils';
+import ResourceNameField from '~/concepts/k8s/K8sNameDescriptionField/ResourceNameField';
+
+/** Companion data hook */
+export const useK8sNameDescriptionFieldData = (
+  configuration: UseK8sNameDescriptionDataConfiguration = {},
+): UseK8sNameDescriptionFieldData => {
+  const [data, setData] = React.useState<K8sNameDescriptionFieldData>(() =>
+    setupDefaults(configuration),
+  );
+
+  // Hold the data in a ref to avoid churn in the update method
+  const dataRef = React.useRef(data);
+  dataRef.current = data;
+  const onDataChange = React.useCallback<K8sNameDescriptionFieldUpdateFunction>(
+    (key, value) => {
+      setData(handleUpdateLogic(dataRef.current)(key, value));
+    },
+    [setData],
+  );
+
+  return { data, onDataChange };
+};
+
+type K8sNameDescriptionFieldProps = {
+  autoFocusName?: boolean;
+  dataTestId: string;
+  descriptionLabel?: string;
+  nameLabel?: string;
+} & UseK8sNameDescriptionFieldData;
+
+/**
+ * Use in place of any K8s Resource creation / edit.
+ * @see useK8sNameDescriptionFieldData
+ */
+const K8sNameDescriptionField: React.FC<K8sNameDescriptionFieldProps> = ({
+  autoFocusName,
+  data,
+  dataTestId,
+  descriptionLabel = 'Description',
+  onDataChange,
+  nameLabel = 'Name',
+}) => {
+  const autoFocusNameRef = useAutoFocusRef(autoFocusName);
+  const [showK8sField, setShowK8sField] = React.useState(false);
+
+  const { name, description, k8sName } = data;
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroup label={nameLabel} isRequired>
+          <TextInput
+            data-testid={`${dataTestId}-name`}
+            id={`${dataTestId}-name`}
+            ref={autoFocusNameRef}
+            isRequired
+            value={name}
+            onChange={(event, value) => onDataChange('name', value)}
+          />
+        </FormGroup>
+        {!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)}
+                >
+                  Edit resource name
+                </Button>{' '}
+                <ResourceNameDefinitionTooltip />
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
+      </StackItem>
+      <ResourceNameField
+        allowEdit={showK8sField}
+        dataTestId={dataTestId}
+        k8sName={k8sName}
+        onDataChange={onDataChange}
+      />
+      <StackItem>
+        <FormGroup label={descriptionLabel}>
+          <TextArea
+            data-testid={`${dataTestId}-description`}
+            id={`${dataTestId}-description`}
+            value={description}
+            onChange={(event, value) => onDataChange('description', value)}
+            resizeOrientation="vertical"
+          />
+        </FormGroup>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default K8sNameDescriptionField;
diff --git a/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx b/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx
new file mode 100644
index 0000000000..36039368b4
--- /dev/null
+++ b/frontend/src/concepts/k8s/K8sNameDescriptionField/ResourceNameField.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { FormGroup, HelperText, StackItem, TextInput } from '@patternfly/react-core';
+import ResourceNameDefinitionTooltip from '~/concepts/k8s/ResourceNameDefinitionTooltip';
+import {
+  HelperTextItemMaxLength,
+  HelperTextItemValidCharacters,
+} from '~/concepts/k8s/K8sNameDescriptionField/HelperTextItemVariants';
+import {
+  K8sNameDescriptionFieldData,
+  K8sNameDescriptionFieldUpdateFunction,
+} from '~/concepts/k8s/K8sNameDescriptionField/types';
+
+type ResourceNameFieldProps = {
+  allowEdit: boolean;
+  dataTestId: string;
+  k8sName: K8sNameDescriptionFieldData['k8sName'];
+  onDataChange: K8sNameDescriptionFieldUpdateFunction;
+};
+
+/** Sub-resource; not for public cunsumption */
+const ResourceNameField: React.FC<ResourceNameFieldProps> = ({
+  allowEdit,
+  dataTestId,
+  k8sName,
+  onDataChange,
+}) => {
+  if (k8sName.state.immutable) {
+    return (
+      <StackItem>
+        <FormGroup label="Resource name" labelIcon={<ResourceNameDefinitionTooltip />}>
+          {k8sName.value}
+        </FormGroup>
+      </StackItem>
+    );
+  }
+
+  if (!allowEdit) {
+    return null;
+  }
+
+  return (
+    <StackItem>
+      <FormGroup label="Resource name" labelIcon={<ResourceNameDefinitionTooltip />}>
+        <TextInput
+          data-testid={`${dataTestId}-resourceName`}
+          value={k8sName.value}
+          onChange={(event, value) => onDataChange('k8sName', value)}
+        />
+        <HelperText>
+          <HelperTextItemMaxLength k8sName={k8sName} />
+          <HelperTextItemValidCharacters k8sName={k8sName} />
+        </HelperText>
+      </FormGroup>
+    </StackItem>
+  );
+};
+
+export default ResourceNameField;
diff --git a/frontend/src/concepts/k8s/K8sNameDescriptionField/__tests__/utils.spec.ts b/frontend/src/concepts/k8s/K8sNameDescriptionField/__tests__/utils.spec.ts
new file mode 100644
index 0000000000..6a39783e0a
--- /dev/null
+++ b/frontend/src/concepts/k8s/K8sNameDescriptionField/__tests__/utils.spec.ts
@@ -0,0 +1,265 @@
+import * as _ from 'lodash-es';
+import {
+  handleUpdateLogic,
+  isK8sNameDescriptionDataValid,
+  LimitNameResourceType,
+  setupDefaults,
+} from '~/concepts/k8s/K8sNameDescriptionField/utils';
+import { K8sNameDescriptionFieldData } from '~/concepts/k8s/K8sNameDescriptionField/types';
+import { mockProjectK8sResource } from '~/__mocks__';
+import { RecursivePartial } from '~/typeHelpers';
+import { mockK8sNameDescriptionFieldData } from '~/__mocks__/mockK8sNameDescriptionFieldData';
+
+describe('setupDefaults', () => {
+  it('should return a sane default', () => {
+    expect(setupDefaults({})).toEqual(mockK8sNameDescriptionFieldData());
+  });
+
+  it('should get resource name and description from initial resource', () => {
+    expect(
+      setupDefaults({
+        initialData: mockProjectK8sResource({
+          displayName: 'Display Name',
+          k8sName: 'k8s-name',
+          description: 'my description',
+        }),
+      }),
+    ).toEqual(
+      mockK8sNameDescriptionFieldData({
+        name: 'Display Name',
+        description: 'my description',
+        k8sName: {
+          value: 'k8s-name',
+          state: {
+            immutable: true,
+          },
+        },
+      }),
+    );
+  });
+
+  it('should limit project length if identified', () => {
+    expect(
+      setupDefaults({
+        limitNameResourceType: LimitNameResourceType.PROJECT,
+      }),
+    ).toEqual(
+      mockK8sNameDescriptionFieldData({
+        k8sName: {
+          state: {
+            maxLength: 30,
+          },
+        },
+      }),
+    );
+  });
+});
+
+describe('handleUpdateLogic', () => {
+  it('should handle description update simply', () => {
+    expect(
+      handleUpdateLogic(mockK8sNameDescriptionFieldData())('description', 'new value'),
+    ).toEqual(mockK8sNameDescriptionFieldData({ description: 'new value' }));
+  });
+
+  it('should update k8s name when name updates', () => {
+    expect(handleUpdateLogic(mockK8sNameDescriptionFieldData())('name', 'new value')).toEqual(
+      mockK8sNameDescriptionFieldData({ name: 'new value', k8sName: { value: 'new-value' } }),
+    );
+  });
+
+  it('should make k8s name touched when directly edited', () => {
+    expect(handleUpdateLogic(mockK8sNameDescriptionFieldData())('k8sName', 'new-value')).toEqual(
+      mockK8sNameDescriptionFieldData({
+        k8sName: { value: 'new-value', state: { touched: true } },
+      }),
+    );
+  });
+
+  it('should auto trim the k8s value if the display name is too long', () => {
+    const configuredDefaults = setupDefaults({
+      limitNameResourceType: LimitNameResourceType.PROJECT,
+    });
+    const { maxLength } = configuredDefaults.k8sName.state;
+
+    const overMaxLength = 'This is a long string of text that exceeds the max number of characters';
+    expect(overMaxLength.length).toBeGreaterThan(maxLength);
+
+    expect(handleUpdateLogic(configuredDefaults)('name', overMaxLength)).toEqual(
+      mockK8sNameDescriptionFieldData({
+        name: overMaxLength,
+        k8sName: {
+          value: 'this-is-a-long-string-of-text',
+          state: { autoTrimmed: true, maxLength },
+        },
+      }),
+    );
+  });
+
+  it('should have invalid length if directly modifying k8s value', () => {
+    const configuredDefaults = setupDefaults({
+      limitNameResourceType: LimitNameResourceType.PROJECT,
+    });
+    const { maxLength } = configuredDefaults.k8sName.state;
+
+    const overMaxLength = 'this-is-a-long-string-of-text-for-k8s';
+    expect(overMaxLength.length).toBeGreaterThan(maxLength);
+
+    expect(handleUpdateLogic(configuredDefaults)('k8sName', overMaxLength)).toEqual(
+      mockK8sNameDescriptionFieldData({
+        k8sName: {
+          value: overMaxLength,
+          state: { maxLength, invalidLength: true, touched: true },
+        },
+      }),
+    );
+  });
+
+  it('should have invalid state with invalid characters', () => {
+    expect(
+      handleUpdateLogic(mockK8sNameDescriptionFieldData())('k8sName', 'you want what!?'),
+    ).toEqual(
+      mockK8sNameDescriptionFieldData({
+        k8sName: { value: 'you want what!?', state: { invalidCharacters: true, touched: true } },
+      }),
+    );
+  });
+
+  it('should ignore invalid k8s characters when they are in display names', () => {
+    expect(
+      handleUpdateLogic(mockK8sNameDescriptionFieldData())('name', 'you are okay with this!?'),
+    ).toEqual(
+      mockK8sNameDescriptionFieldData({
+        name: 'you are okay with this!?',
+        k8sName: { value: 'you-are-okay-with-this' },
+      }),
+    );
+  });
+
+  it('should not have auto trimmed and touched for k8s name', () => {
+    const configuredDefaults = setupDefaults({
+      limitNameResourceType: LimitNameResourceType.PROJECT,
+    });
+    const { maxLength } = configuredDefaults.k8sName.state;
+
+    const overMaxLength = 'this-really-is-a-long-string-of-text-for-k8s';
+    expect(overMaxLength.length).toBeGreaterThan(maxLength);
+
+    const causeAutoTrimState = handleUpdateLogic(configuredDefaults)('name', overMaxLength);
+    expect(causeAutoTrimState.k8sName.state.autoTrimmed).toBe(true);
+    expect(causeAutoTrimState.k8sName.state.invalidLength).toBe(false);
+    const currentValue = causeAutoTrimState.k8sName.value;
+
+    const causeOverLengthState = handleUpdateLogic(causeAutoTrimState)(
+      'k8sName',
+      `${currentValue}a`,
+    );
+    expect(causeOverLengthState.k8sName.state.autoTrimmed).toBe(false);
+    expect(causeOverLengthState.k8sName.state.invalidLength).toBe(true);
+  });
+
+  it('should not allow update k8s name when immutable', () => {
+    const startingImmutableData = setupDefaults({
+      initialData: mockProjectK8sResource({
+        displayName: 'Display Name',
+        k8sName: 'k8s-name',
+        description: 'my description',
+      }),
+    });
+
+    expect(startingImmutableData.k8sName.state.immutable).toBe(true);
+
+    expect(handleUpdateLogic(startingImmutableData)('name', 'Display Name 2')).toEqual(
+      mockK8sNameDescriptionFieldData({
+        name: 'Display Name 2',
+        description: 'my description',
+        k8sName: {
+          value: 'k8s-name',
+          state: {
+            immutable: true,
+          },
+        },
+      }),
+    );
+  });
+
+  it('should handle a safe prefix', () => {
+    const safePrefixData = setupDefaults({
+      safePrefix: 'wb-',
+    });
+
+    expect(handleUpdateLogic(safePrefixData)('name', '1234')).toEqual(
+      mockK8sNameDescriptionFieldData({
+        name: '1234',
+        k8sName: {
+          value: 'wb-1234',
+          state: {
+            safePrefix: 'wb-',
+          },
+        },
+      }),
+    );
+  });
+});
+
+describe('isK8sNameDescriptionDataValid', () => {
+  it('should be false when invalidCharacters', () => {
+    expect(
+      isK8sNameDescriptionDataValid(
+        mockK8sNameDescriptionFieldData({
+          k8sName: { value: 'invalid!', state: { invalidCharacters: true } },
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it('should be false when invalidLength', () => {
+    expect(
+      isK8sNameDescriptionDataValid(
+        mockK8sNameDescriptionFieldData({
+          k8sName: {
+            value: 'this-is-a-long-string-of-text-for-k8s',
+            state: { invalidLength: true },
+          },
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it('should be false with no errors and no name', () => {
+    expect(
+      isK8sNameDescriptionDataValid(
+        mockK8sNameDescriptionFieldData({
+          name: '',
+          description: 'does not matter',
+          k8sName: {
+            value: '',
+          },
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it('should be true when no invalid states are present', () => {
+    expect(
+      isK8sNameDescriptionDataValid(
+        // Keep direct mapping / no utility to cause devs to vet if the new flag needs a test
+        {
+          name: 'test',
+          description: 'test',
+          k8sName: {
+            value: 'k8s-test',
+            state: {
+              autoTrimmed: true,
+              immutable: true, // not possible with autoTrimmed, but brute force testing
+              invalidLength: false,
+              invalidCharacters: false,
+              maxLength: 123,
+              touched: true,
+            },
+          },
+        } satisfies K8sNameDescriptionFieldData,
+      ),
+    ).toBe(true);
+  });
+});
diff --git a/frontend/src/concepts/k8s/K8sNameDescriptionField/types.ts b/frontend/src/concepts/k8s/K8sNameDescriptionField/types.ts
new file mode 100644
index 0000000000..3db7fbaecd
--- /dev/null
+++ b/frontend/src/concepts/k8s/K8sNameDescriptionField/types.ts
@@ -0,0 +1,55 @@
+import { K8sResourceCommon } from '@openshift/dynamic-plugin-sdk-utils';
+import { LimitNameResourceType } from '~/concepts/k8s/K8sNameDescriptionField/utils';
+
+export type K8sNameDescriptionFieldData = {
+  name: string;
+  description: string;
+  k8sName: {
+    value: string;
+    state: {
+      /** Name is too long, auto trimmed for k8s */
+      autoTrimmed: boolean;
+      /** 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 UseK8sNameDescriptionDataConfiguration = {
+  /** Seed the state with initial data */
+  initialData?: K8sResourceCommon;
+  /** Allow for custom internal logic for limiting k8s names based on their type */
+  limitNameResourceType?: LimitNameResourceType;
+  /**
+   * Provide a safe prefix for the translation function
+   * @see AdditionalCriteriaForTranslation
+   */
+  safePrefix?: string;
+};
+
+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/frontend/src/concepts/k8s/K8sNameDescriptionField/utils.ts b/frontend/src/concepts/k8s/K8sNameDescriptionField/utils.ts
new file mode 100644
index 0000000000..3423164ad0
--- /dev/null
+++ b/frontend/src/concepts/k8s/K8sNameDescriptionField/utils.ts
@@ -0,0 +1,123 @@
+import * as _ from 'lodash-es';
+import { isValidK8sName, translateDisplayNameForK8sAndReport } from '~/concepts/k8s/utils';
+import { RecursivePartial } from '~/typeHelpers';
+import {
+  K8sNameDescriptionFieldData,
+  K8sNameDescriptionFieldUpdateFunctionInternal,
+  UseK8sNameDescriptionDataConfiguration,
+} from './types';
+
+/**
+ * Those used in OpenShift Routes need to be less than 63 between namespace & resource name.
+ * 30 because UX feels this is an easier number to understand than 31 or 32.
+ * Arguably we could dynamically figure this out, but as of right now splitting equally is the UX.
+ */
+const ROUTE_BASED_NAME_LENGTH = 30;
+/**
+ * These are resources that need to be limited
+ * TODO: Support more than just ROUTE_BASED_NAME_LENGTH
+ */
+export enum LimitNameResourceType {
+  /** Project names take up half of all in-project route lengths */
+  PROJECT,
+  /** Workbenches create routes */
+  WORKBENCH,
+  // TODO: Support Model Serving?
+}
+/** K8s max DNS subdomain name length */
+const MAX_RESOURCE_NAME_LENGTH = 253;
+/** Validate check for name */
+const VALID_REGEXP = /^([a-z0-9])([a-z0-9-]*[a-z0-9])*$/;
+
+export const setupDefaults = ({
+  initialData,
+  limitNameResourceType,
+  safePrefix,
+}: UseK8sNameDescriptionDataConfiguration): K8sNameDescriptionFieldData => {
+  let initialName = '';
+  let initialDescription = '';
+  let initialK8sNameValue = '';
+  let configuredMaxLength = MAX_RESOURCE_NAME_LENGTH;
+
+  if (initialData) {
+    const { annotations, name } = initialData.metadata ?? {};
+    initialName = annotations?.['openshift.io/display-name'] ?? name ?? '';
+    initialDescription = annotations?.['openshift.io/description'] ?? '';
+    initialK8sNameValue = name ?? '';
+  }
+  if (limitNameResourceType != null) {
+    configuredMaxLength = ROUTE_BASED_NAME_LENGTH;
+  }
+
+  return {
+    name: initialName,
+    description: initialDescription,
+    k8sName: {
+      value: initialK8sNameValue,
+      state: {
+        autoTrimmed: false,
+        immutable: initialK8sNameValue !== '',
+        invalidCharacters: false,
+        invalidLength: false,
+        maxLength: configuredMaxLength,
+        safePrefix,
+        touched: false,
+      },
+    },
+  } satisfies K8sNameDescriptionFieldData;
+};
+
+export const handleUpdateLogic =
+  (existingData: K8sNameDescriptionFieldData): K8sNameDescriptionFieldUpdateFunctionInternal =>
+  (key, value) => {
+    const changedData: RecursivePartial<K8sNameDescriptionFieldData> = {};
+
+    // Handle special cases
+    switch (key) {
+      case 'name': {
+        changedData.name = value;
+
+        const { touched, immutable, maxLength, safePrefix } = existingData.k8sName.state;
+        // When name changes, we want to update resource name if applicable
+        if (!touched && !immutable) {
+          // Update the generated name
+          const [k8sValue, whatHappened] = translateDisplayNameForK8sAndReport(value, {
+            maxLength,
+            safeK8sPrefix: safePrefix,
+          });
+          changedData.k8sName = {
+            state: {
+              autoTrimmed: whatHappened.maxLength,
+            },
+            value: k8sValue,
+          };
+        }
+        break;
+      }
+      case 'k8sName':
+        changedData.k8sName = {
+          state: {
+            autoTrimmed: false,
+            invalidCharacters: value.length > 0 ? !VALID_REGEXP.test(value) : false,
+            invalidLength: value.length > existingData.k8sName.state.maxLength,
+            touched: true,
+          },
+          value,
+        };
+        break;
+      default:
+        // Do nothing special
+        changedData[key] = value;
+    }
+
+    return _.merge({}, existingData, changedData);
+  };
+
+export const isK8sNameDescriptionDataValid = ({
+  name,
+  k8sName: {
+    value,
+    state: { invalidCharacters, invalidLength },
+  },
+}: K8sNameDescriptionFieldData): boolean =>
+  name.trim().length > 0 && isValidK8sName(value) && !invalidLength && !invalidCharacters;
diff --git a/frontend/src/concepts/k8s/NameDescriptionField.tsx b/frontend/src/concepts/k8s/NameDescriptionField.tsx
index 32e9718388..40f804a643 100644
--- a/frontend/src/concepts/k8s/NameDescriptionField.tsx
+++ b/frontend/src/concepts/k8s/NameDescriptionField.tsx
@@ -13,6 +13,8 @@ import {
 import { ExclamationCircleIcon, HelpIcon } from '@patternfly/react-icons';
 import { NameDescType } from '~/pages/projects/types';
 import { isValidK8sName, translateDisplayNameForK8s } from '~/concepts/k8s/utils';
+import ResourceNameDefinitionTooltip from '~/concepts/k8s/ResourceNameDefinitionTooltip';
+import useAutoFocusRef from '~/utilities/useAutoFocusRef';
 
 type NameDescriptionFieldProps = {
   nameFieldId: string;
@@ -31,6 +33,10 @@ type NameDescriptionFieldProps = {
   onNameChange?: (value: string) => void;
 };
 
+/**
+ * Don't use for K8s name anymore -- that functionality is deprecated.
+ * @see K8sNameDescriptionField
+ */
 const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
   nameFieldId,
   nameFieldLabel = 'Name',
@@ -47,13 +53,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
   nameHelperText,
   onNameChange,
 }) => {
-  const autoSelectNameRef = React.useRef<HTMLInputElement | null>(null);
-
-  React.useEffect(() => {
-    if (autoFocusName) {
-      autoSelectNameRef.current?.focus();
-    }
-  }, [autoFocusName]);
+  const autoFocusNameRef = useAutoFocusRef(autoFocusName);
 
   const k8sName = React.useMemo(() => {
     if (showK8sName) {
@@ -70,7 +70,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
           <TextInput
             aria-readonly={!setData}
             isRequired
-            ref={autoSelectNameRef}
+            ref={autoFocusNameRef}
             id={nameFieldId}
             data-testid={nameFieldId}
             name={nameFieldId}
@@ -99,21 +99,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
         <StackItem>
           <FormGroup
             label={K8sLabelName}
-            labelIcon={
-              <Tooltip
-                position="right"
-                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>
-                }
-              >
-                <HelpIcon aria-label="More info" />
-              </Tooltip>
-            }
+            labelIcon={<ResourceNameDefinitionTooltip />}
             isRequired
             fieldId={`resource-${nameFieldId}`}
           >
diff --git a/frontend/src/concepts/k8s/ResourceNameDefinitionTooltip.tsx b/frontend/src/concepts/k8s/ResourceNameDefinitionTooltip.tsx
new file mode 100644
index 0000000000..946e8d8bfb
--- /dev/null
+++ b/frontend/src/concepts/k8s/ResourceNameDefinitionTooltip.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
+
+const ResourceNameDefinitionTooltip: React.FC = () => (
+  <Tooltip
+    position="right"
+    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>
+    }
+  >
+    <HelpIcon aria-label="More info" />
+  </Tooltip>
+);
+
+export default ResourceNameDefinitionTooltip;
diff --git a/frontend/src/concepts/k8s/__tests__/utils.spec.ts b/frontend/src/concepts/k8s/__tests__/utils.spec.ts
index 713c699877..bc4497d6af 100644
--- a/frontend/src/concepts/k8s/__tests__/utils.spec.ts
+++ b/frontend/src/concepts/k8s/__tests__/utils.spec.ts
@@ -4,6 +4,7 @@ import {
   getDisplayNameFromK8sResource,
   isValidK8sName,
   translateDisplayNameForK8s,
+  translateDisplayNameForK8sAndReport,
 } from '~/concepts/k8s/utils';
 
 describe('getDisplayNameFromK8sResource', () => {
@@ -41,9 +42,30 @@ describe('translateDisplayNameForK8s', () => {
     expect(translateDisplayNameForK8s('Test Project 1')).toBe('test-project-1');
     expect(translateDisplayNameForK8s("John Doe's Cool Project!")).toBe('john-does-cool-project');
     expect(translateDisplayNameForK8s('$ymbols & Capitals and Spaces! (These are invalid!)')).toBe(
-      'ymbols--capitals-and-spaces-these-are-invalid',
+      'ymbols-capitals-and-spaces-these-are-invalid',
     );
-    expect(translateDisplayNameForK8s('1234', 'wb-')).toBe('wb-1234');
+    expect(translateDisplayNameForK8s('1234', { safeK8sPrefix: 'wb-' })).toBe('wb-1234');
+  });
+});
+
+describe('translateDisplayNameForK8sAndReport', () => {
+  it('should handle cases where it applied additional criteria', () => {
+    expect(translateDisplayNameForK8sAndReport('1234', { safeK8sPrefix: 'wb-' })).toEqual([
+      'wb-1234',
+      { safeK8sPrefix: true, maxLength: false },
+    ] satisfies ReturnType<typeof translateDisplayNameForK8sAndReport>);
+
+    expect(translateDisplayNameForK8sAndReport('foobarbaz', { maxLength: 3 })).toEqual([
+      'foo',
+      { safeK8sPrefix: false, maxLength: true },
+    ] satisfies ReturnType<typeof translateDisplayNameForK8sAndReport>);
+  });
+
+  it('should report nothing happened if no criteria was provided', () => {
+    expect(translateDisplayNameForK8sAndReport('foobarbaz')).toEqual([
+      'foobarbaz',
+      { safeK8sPrefix: false, maxLength: false },
+    ] satisfies ReturnType<typeof translateDisplayNameForK8sAndReport>);
   });
 });
 
diff --git a/frontend/src/concepts/k8s/utils.ts b/frontend/src/concepts/k8s/utils.ts
index 2dfef833e7..88bf1f9972 100644
--- a/frontend/src/concepts/k8s/utils.ts
+++ b/frontend/src/concepts/k8s/utils.ts
@@ -16,24 +16,60 @@ export const getCreatorFromK8sResource = (resource: K8sDSGResource): string =>
   ownedByDSC(resource)
     ? PreInstalledName
     : resource.metadata.annotations?.['opendatahub.io/username'] || 'unknown';
+
+type AdditionalCriteriaForTranslation = {
+  /** If pure digits, prevent it with this safe string */
+  safeK8sPrefix?: string;
+  /** Cap the characters allowed */
+  maxLength?: number;
+};
+type AdditionalCriteriaApplied = Record<keyof AdditionalCriteriaForTranslation, boolean>;
+
 /**
- * Converts a display name to a k8s safe variant, if needed a `safeK8sPrefix` can be provided to customize the prefix used to align with k8s standards if it is needed.
+ * Converts a display name to a k8s safe variant.
+ * Provide additional criteria to help trim the value
  */
-export const translateDisplayNameForK8s = (name: string, safeK8sPrefix?: string): string => {
-  const translatedName: string = name
+export const translateDisplayNameForK8sAndReport = (
+  name: string,
+  { safeK8sPrefix, maxLength }: AdditionalCriteriaForTranslation = {},
+): [string, AdditionalCriteriaApplied] => {
+  const appliedCriteria: AdditionalCriteriaApplied = {
+    safeK8sPrefix: false,
+    maxLength: false,
+  };
+
+  let translatedName = name
     .trim()
     .toLowerCase()
-    .replace(/\s/g, '-')
-    .replace(/[^A-Za-z0-9-]/g, '');
-
-  if (safeK8sPrefix) {
-    if (/^\d+$/.test(translatedName)) {
-      const translatedNameWithoutNumbers = `wb-${translatedName}`;
-      return translatedNameWithoutNumbers;
-    }
+    .replace(/\s/g, '-') // spaces to dashes
+    .replace(/[^a-z0-9-]/g, '') // remove inverse of good k8s characters
+    .replace(/[-]+/g, '-'); // simplify double dashes ('A - B' turns into 'a---b' where 'a-b' is enough)
+
+  if (safeK8sPrefix && /^\d+$/.test(translatedName)) {
+    // Avoid pure digit names
+    translatedName = `${safeK8sPrefix}${translatedName}`;
+    appliedCriteria.safeK8sPrefix = true;
   }
-  return translatedName;
+
+  if (maxLength && translatedName.length > maxLength) {
+    // Avoid too long
+    translatedName = translatedName
+      .slice(0, maxLength) // shorten to length
+      .replace(/[-]*$/, ''); // remove invalid trailing characters
+    appliedCriteria.maxLength = true;
+  }
+
+  return [translatedName, appliedCriteria];
 };
 
+/**
+ * Simplified if you don't care what happened.
+ * @see translateDisplayNameForK8sAndReport
+ */
+export const translateDisplayNameForK8s = (
+  name: string,
+  additionalCriteria: AdditionalCriteriaForTranslation = {},
+): string => translateDisplayNameForK8sAndReport(name, additionalCriteria)[0];
+
 export const isValidK8sName = (name?: string): boolean =>
   name === undefined || (name.length > 0 && /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/.test(name));
diff --git a/frontend/src/pages/home/projects/ProjectsSection.tsx b/frontend/src/pages/home/projects/ProjectsSection.tsx
index da6bb1f164..23c9c6f46f 100644
--- a/frontend/src/pages/home/projects/ProjectsSection.tsx
+++ b/frontend/src/pages/home/projects/ProjectsSection.tsx
@@ -132,9 +132,8 @@ const ProjectsSection: React.FC = () => {
           </Flex>
         </StackItem>
       </Stack>
-      {createProjectOpen ? (
+      {createProjectOpen && (
         <ManageProjectModal
-          open
           onClose={(newProjectName) => {
             if (newProjectName) {
               navigate(`/projects/${newProjectName}`);
@@ -143,7 +142,7 @@ const ProjectsSection: React.FC = () => {
             setCreateProjectOpen(false);
           }}
         />
-      ) : null}
+      )}
     </PageSection>
   );
 };
diff --git a/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx b/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx
index c7cb62fe36..c004e763e3 100644
--- a/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx
+++ b/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx
@@ -3,54 +3,34 @@ import { Alert, Button, Form, Modal, Stack, StackItem } from '@patternfly/react-
 import { createProject, updateProject } from '~/api';
 import { useUser } from '~/redux/selectors';
 import { ProjectKind } from '~/k8sTypes';
-import {
-  getDescriptionFromK8sResource,
-  getDisplayNameFromK8sResource,
-  isValidK8sName,
-} from '~/concepts/k8s/utils';
-import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
-import { NameDescType } from '~/pages/projects/types';
 import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import { fireFormTrackingEvent } from '~/concepts/analyticsTracking/segmentIOUtils';
 
 import { TrackingOutcome } from '~/concepts/analyticsTracking/trackingProperties';
+import K8sNameDescriptionField, {
+  useK8sNameDescriptionFieldData,
+} from '~/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField';
+import {
+  isK8sNameDescriptionDataValid,
+  LimitNameResourceType,
+} from '~/concepts/k8s/K8sNameDescriptionField/utils';
 
 type ManageProjectModalProps = {
   editProjectData?: ProjectKind;
-  open: boolean;
   onClose: (newProjectName?: string) => void;
 };
 
-const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
-  editProjectData,
-  onClose,
-  open,
-}) => {
+const ManageProjectModal: React.FC<ManageProjectModalProps> = ({ editProjectData, onClose }) => {
   const { waitForProject } = React.useContext(ProjectsContext);
   const [fetching, setFetching] = React.useState(false);
   const [error, setError] = React.useState<Error | undefined>();
-  const [nameDesc, setNameDesc] = React.useState<NameDescType>({
-    name: '',
-    k8sName: undefined,
-    description: '',
+  const k8sNameDescriptionData = useK8sNameDescriptionFieldData({
+    initialData: editProjectData,
+    limitNameResourceType: LimitNameResourceType.PROJECT,
   });
   const { username } = useUser();
 
-  const canSubmit =
-    !fetching && nameDesc.name.trim().length > 0 && isValidK8sName(nameDesc.k8sName);
-
-  const editNameValue = editProjectData ? getDisplayNameFromK8sResource(editProjectData) : '';
-  const editDescriptionValue = editProjectData
-    ? getDescriptionFromK8sResource(editProjectData)
-    : '';
-  const editResourceNameValue = editProjectData ? editProjectData.metadata.name : undefined;
-  React.useEffect(() => {
-    setNameDesc({
-      name: editNameValue,
-      k8sName: editResourceNameValue,
-      description: editDescriptionValue,
-    });
-  }, [editDescriptionValue, editNameValue, editResourceNameValue]);
+  const canSubmit = !fetching && isK8sNameDescriptionDataValid(k8sNameDescriptionData.data);
 
   const onBeforeClose = (newProjectName?: string) => {
     onClose(newProjectName);
@@ -61,9 +41,6 @@ const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
         projectName: newProjectName,
       });
     }
-    setFetching(false);
-    setError(undefined);
-    setNameDesc({ name: '', k8sName: undefined, description: '' });
   };
   const handleError = (e: Error) => {
     fireFormTrackingEvent(editProjectData ? 'Project Edited' : 'NewProject Created', {
@@ -78,7 +55,11 @@ const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
 
   const submit = () => {
     setFetching(true);
-    const { name, description, k8sName } = nameDesc;
+    const {
+      name,
+      description,
+      k8sName: { value: k8sName },
+    } = k8sNameDescriptionData.data;
     if (editProjectData) {
       updateProject(editProjectData, name, description)
         .then(() => onBeforeClose())
@@ -94,7 +75,7 @@ const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
     <Modal
       title={editProjectData ? 'Edit data science project' : 'Create data science project'}
       variant="medium"
-      isOpen={open}
+      isOpen
       onClose={() => onBeforeClose()}
       actions={[
         <Button
@@ -128,14 +109,10 @@ const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
               submit();
             }}
           >
-            <NameDescriptionField
-              nameFieldId="manage-project-modal-name"
-              descriptionFieldId="manage-project-modal-description"
-              data={nameDesc}
-              setData={setNameDesc}
+            <K8sNameDescriptionField
               autoFocusName
-              showK8sName
-              disableK8sName={!!editProjectData}
+              dataTestId="manage-project-modal"
+              {...k8sNameDescriptionData}
             />
           </Form>
         </StackItem>
diff --git a/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx b/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx
index 72f5d5a79e..98ef1c1712 100644
--- a/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx
+++ b/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx
@@ -19,21 +19,22 @@ const NewProjectButton: React.FC<NewProjectButtonProps> = ({ closeOnCreate, onPr
       >
         Create data science project
       </Button>
-      <ManageProjectModal
-        open={open}
-        onClose={(newProjectName) => {
-          if (newProjectName) {
-            if (onProjectCreated) {
-              onProjectCreated(newProjectName);
-            } else if (closeOnCreate) {
-              setOpen(false);
+      {open && (
+        <ManageProjectModal
+          onClose={(newProjectName) => {
+            if (newProjectName) {
+              if (onProjectCreated) {
+                onProjectCreated(newProjectName);
+              } else if (closeOnCreate) {
+                setOpen(false);
+              }
+              return;
             }
-            return;
-          }
 
-          setOpen(false);
-        }}
-      />
+            setOpen(false);
+          }}
+        />
+      )}
     </>
   );
 };
diff --git a/frontend/src/pages/projects/screens/projects/ProjectListView.tsx b/frontend/src/pages/projects/screens/projects/ProjectListView.tsx
index 94566e6442..dae8bfaca6 100644
--- a/frontend/src/pages/projects/screens/projects/ProjectListView.tsx
+++ b/frontend/src/pages/projects/screens/projects/ProjectListView.tsx
@@ -110,25 +110,26 @@ const ProjectListView: React.FC<ProjectListViewProps> = ({ allowCreate }) => {
           </>
         }
       />
-      <ManageProjectModal
-        open={!!editData}
-        onClose={(newProjectName) => {
-          if (newProjectName) {
-            navigate(`/projects/${newProjectName}`);
-            return;
-          }
+      {!!editData && (
+        <ManageProjectModal
+          onClose={(newProjectName) => {
+            if (newProjectName) {
+              navigate(`/projects/${newProjectName}`);
+              return;
+            }
 
-          const refreshId = editData?.metadata.uid;
-          if (refreshId) {
-            setRefreshIds((otherIds) => [...otherIds, refreshId]);
-          }
+            const refreshId = editData.metadata.uid;
+            if (refreshId) {
+              setRefreshIds((otherIds) => [...otherIds, refreshId]);
+            }
 
-          setEditData(undefined);
+            setEditData(undefined);
 
-          setRefreshIds((ids) => ids.filter((id) => id !== refreshId));
-        }}
-        editProjectData={editData}
-      />
+            setRefreshIds((ids) => ids.filter((id) => id !== refreshId));
+          }}
+          editProjectData={editData}
+        />
+      )}
       <DeleteProjectModal
         deleteData={deleteData}
         onClose={() => {
diff --git a/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx b/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
index 22978b9fd3..b040869cbf 100644
--- a/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
+++ b/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
@@ -181,7 +181,7 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
         }
 
         const { volumes, volumeMounts } = pvcDetails;
-        const newStartNotebookData = {
+        const newStartNotebookData: StartNotebookData = {
           ...startNotebookData,
           volumes,
           volumeMounts,
@@ -258,7 +258,7 @@ const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
     }
 
     const { volumes, volumeMounts } = pvcDetails;
-    const newStartData = {
+    const newStartData: StartNotebookData = {
       ...startNotebookData,
       volumes,
       volumeMounts,
diff --git a/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx b/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
index 790da0f874..71b8d2eced 100644
--- a/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
+++ b/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
@@ -13,9 +13,7 @@ import {
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { ImageStreamAndVersion } from '~/types';
 import GenericSidebar from '~/components/GenericSidebar';
-import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
-import { NameDescType } from '~/pages/projects/types';
 import { NotebookKind } from '~/k8sTypes';
 import useNotebookImageData from '~/pages/projects/screens/detail/notebooks/useNotebookImageData';
 import NotebookRestartAlert from '~/pages/projects/components/NotebookRestartAlert';
@@ -26,8 +24,12 @@ import AcceleratorProfileSelectField, {
 } from '~/pages/notebookController/screens/server/AcceleratorProfileSelectField';
 import useNotebookAcceleratorProfile from '~/pages/projects/screens/detail/notebooks/useNotebookAcceleratorProfile';
 import { NotebookImageAvailability } from '~/pages/projects/screens/detail/notebooks/const';
-import { getDescriptionFromK8sResource, getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
 import useGenericObjectState from '~/utilities/useGenericObjectState';
+import K8sNameDescriptionField, {
+  useK8sNameDescriptionFieldData,
+} from '~/concepts/k8s/K8sNameDescriptionField/K8sNameDescriptionField';
+import { LimitNameResourceType } from '~/concepts/k8s/K8sNameDescriptionField/utils';
 import { SpawnerPageSectionID } from './types';
 import { ScrollableSelectorID, SpawnerPageSectionTitles } from './const';
 import SpawnerFooter from './SpawnerFooter';
@@ -54,10 +56,10 @@ const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
   const { currentProject, dataConnections } = React.useContext(ProjectDetailsContext);
   const displayName = getDisplayNameFromK8sResource(currentProject);
 
-  const [nameDesc, setNameDesc] = React.useState<NameDescType>({
-    name: '',
-    k8sName: undefined,
-    description: '',
+  const k8sNameDescriptionData = useK8sNameDescriptionFieldData({
+    initialData: existingNotebook,
+    limitNameResourceType: LimitNameResourceType.WORKBENCH,
+    safePrefix: 'wb-',
   });
   const [selectedImage, setSelectedImage] = React.useState<ImageStreamAndVersion>({
     imageStream: undefined,
@@ -68,7 +70,10 @@ const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
     string[] | undefined
   >();
   const [storageDataWithoutDefault, setStorageData] = useStorageDataObject(existingNotebook);
-  const storageData = useMergeDefaultPVCName(storageDataWithoutDefault, nameDesc.name);
+  const storageData = useMergeDefaultPVCName(
+    storageDataWithoutDefault,
+    k8sNameDescriptionData.data.k8sName.value,
+  );
   const [envVariables, setEnvVariables] = useNotebookEnvVariables(existingNotebook);
   const [dataConnectionData, setDataConnectionData] = useNotebookDataConnection(
     dataConnections.data,
@@ -84,16 +89,6 @@ const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
 
   const restartNotebooks = useWillNotebooksRestart([existingNotebook?.metadata.name || '']);
 
-  React.useEffect(() => {
-    if (existingNotebook) {
-      setNameDesc({
-        name: getDisplayNameFromK8sResource(existingNotebook),
-        k8sName: existingNotebook.metadata.name,
-        description: getDescriptionFromK8sResource(existingNotebook),
-      });
-    }
-  }, [existingNotebook, setStorageData]);
-
   const [data, loaded, loadError] = useNotebookImageData(existingNotebook);
   React.useEffect(() => {
     if (loaded) {
@@ -157,11 +152,9 @@ const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
               id={SpawnerPageSectionID.NAME_DESCRIPTION}
               aria-label={SpawnerPageSectionTitles[SpawnerPageSectionID.NAME_DESCRIPTION]}
             >
-              <NameDescriptionField
-                nameFieldId="workbench-name"
-                descriptionFieldId="workbench-description"
-                data={nameDesc}
-                setData={setNameDesc}
+              <K8sNameDescriptionField
+                dataTestId="workbench"
+                {...k8sNameDescriptionData}
                 autoFocusName
               />
             </FormSection>
@@ -246,8 +239,7 @@ const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
               {(canEnablePipelines) => (
                 <SpawnerFooter
                   startNotebookData={{
-                    notebookName: nameDesc.name,
-                    description: nameDesc.description,
+                    notebookData: k8sNameDescriptionData.data,
                     projectName: currentProject.metadata.name,
                     image: selectedImage,
                     notebookSize: selectedSize,
diff --git a/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts b/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts
index de6ab0719e..867dd074b3 100644
--- a/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts
+++ b/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts
@@ -21,6 +21,7 @@ import {
 import { ROOT_MOUNT_PATH } from '~/pages/projects/pvc/const';
 import { AWS_FIELDS } from '~/pages/projects/dataConnections/const';
 import { FieldOptions } from '~/components/FieldList';
+import { isK8sNameDescriptionDataValid } from '~/concepts/k8s/K8sNameDescriptionField/utils';
 import {
   BuildStatus,
   ImageVersionDependencyType,
@@ -396,11 +397,11 @@ export const checkRequiredFieldsForNotebookStart = (
   envVariables: EnvVariable[],
   dataConnection: DataConnectionData,
 ): boolean => {
-  const { projectName, notebookName, image } = startNotebookData;
+  const { projectName, notebookData, image } = startNotebookData;
   const { storageType, creating, existing } = storageData;
   const isNotebookDataValid = !!(
     projectName &&
-    notebookName.trim() &&
+    isK8sNameDescriptionDataValid(notebookData) &&
     image.imageStream &&
     image.imageVersion
   );
diff --git a/frontend/src/pages/projects/types.ts b/frontend/src/pages/projects/types.ts
index e8e6be0de3..7a358f1a94 100644
--- a/frontend/src/pages/projects/types.ts
+++ b/frontend/src/pages/projects/types.ts
@@ -13,6 +13,7 @@ import { ValueOf } from '~/typeHelpers';
 import { AWSSecretKind } from '~/k8sTypes';
 import { AcceleratorProfileState } from '~/utilities/useAcceleratorProfileState';
 import { AcceleratorProfileSelectFieldState } from '~/pages/notebookController/screens/server/AcceleratorProfileSelectField';
+import { K8sNameDescriptionFieldData } from '~/concepts/k8s/K8sNameDescriptionField/types';
 import { AwsKeys } from './dataConnections/const';
 
 export type UpdateObjectAtPropAndValue<T> = (propKey: keyof T, propValue: ValueOf<T>) => void;
@@ -64,7 +65,7 @@ export type StorageData = {
 
 export type StartNotebookData = {
   projectName: string;
-  notebookName: string;
+  notebookData: K8sNameDescriptionFieldData;
   notebookSize: NotebookSize;
   initialAcceleratorProfile: AcceleratorProfileState;
   selectedAcceleratorProfile: AcceleratorProfileSelectFieldState;
@@ -75,9 +76,6 @@ export type StartNotebookData = {
   existingTolerations?: Toleration[];
   existingResources?: ContainerResources;
   envFrom?: EnvironmentFromVariable[];
-  description?: string;
-  /** An override for the assembleNotebook so it doesn't regen an id */
-  notebookId?: string;
 };
 
 export type SecretRef = {
diff --git a/frontend/src/utilities/useAutoFocusRef.ts b/frontend/src/utilities/useAutoFocusRef.ts
new file mode 100644
index 0000000000..76a960d716
--- /dev/null
+++ b/frontend/src/utilities/useAutoFocusRef.ts
@@ -0,0 +1,21 @@
+import React, { MutableRefObject } from 'react';
+
+/**
+ * If enabled to autofocus, it will after the component mounts. Supply the return value to the
+ * component you want to focus on.
+ */
+const useAutoFocusRef = <T extends HTMLInputElement = HTMLInputElement>(
+  enableAutoFocus?: boolean,
+): MutableRefObject<T | null> => {
+  const ref = React.useRef<T | null>(null);
+
+  React.useEffect(() => {
+    if (enableAutoFocus) {
+      ref.current?.focus();
+    }
+  }, [enableAutoFocus]);
+
+  return ref;
+};
+
+export default useAutoFocusRef;