scaffolder: add EntityNamePicker field

Co-authored-by: Mike Lewis <mtlewis@users.noreply.github.com>
Signed-off-by: Himanshu Mishra <himanshu@orkohunter.net>

plugins/scaffolder/src/components/fields/EntityNamePicker/EntityNamePicker.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { FieldProps } from '@rjsf/core';
+import InputLabel from '@material-ui/core/InputLabel';
+import Input from '@material-ui/core/Input';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+export const EntityNamePicker = ({
+  onChange,
+  required,
+  schema: { title = 'Name', description = 'Unique name of the component' },
+  rawErrors,
+  formData,
+}: FieldProps<string>) => (
+  <FormControl
+    margin="normal"
+    required={required}
+    error={rawErrors?.length > 0 && !formData}
+  >
+    <InputLabel htmlFor="nameInput">{title}</InputLabel>
+    <Input
+      id="nameInput"
+      onChange={({ target: { value } }) => onChange(value)}
+      value={formData ?? ''}
+    />
+    <FormHelperText>{description}</FormHelperText>
+  </FormControl>
+);

plugins/scaffolder/src/components/fields/EntityNamePicker/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { EntityNamePicker } from './EntityNamePicker';
+export { entityNamePickerValidation } from './validation';

plugins/scaffolder/src/components/fields/EntityNamePicker/validation.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FieldValidation } from '@rjsf/core';
+import { KubernetesValidatorFunctions } from '@backstage/catalog-model';
+
+export const entityNamePickerValidation = (
+  value: string,
+  validation: FieldValidation,
+) => {
+  if (!KubernetesValidatorFunctions.isValidObjectName(value)) {
+    validation.addError(
+      'must start and end with an alphanumeric character, and contain only alphanumeric characters, hyphens, underscores, and periods. Maximum length is 63 characters.',
+    );
+  }
+};

plugins/scaffolder/src/components/fields/index.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export * from './EntityNamePicker';
 export * from './EntityPicker';
 export * from './OwnerPicker';
 export * from './RepoUrlPicker';

plugins/scaffolder/src/extensions/default.ts

@@ -14,6 +14,10 @@
  * limitations under the License.
  */
 import { EntityPicker } from '../components/fields/EntityPicker';
+import {
+  EntityNamePicker,
+  entityNamePickerValidation,
+} from '../components/fields/EntityNamePicker';
 import { OwnerPicker } from '../components/fields/OwnerPicker';
 import {
   repoPickerValidation,
@@ -26,6 +30,11 @@ export const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS: FieldExtensionOptions[] = [
     component: EntityPicker,
     name: 'EntityPicker',
   },
+  {
+    component: EntityNamePicker,
+    name: 'EntityNamePicker',
+    validation: entityNamePickerValidation,
+  },
   {
     component: RepoUrlPicker,
     name: 'RepoUrlPicker',

plugins/scaffolder/src/index.ts

@@ -23,6 +23,7 @@ export {
 export type { CustomFieldValidator, FieldExtensionOptions } from './extensions';
 export {
   EntityPickerFieldExtension,
+  EntityNamePickerFieldExtension,
   OwnerPickerFieldExtension,
   RepoUrlPickerFieldExtension,
   ScaffolderPage,

plugins/scaffolder/src/plugin.ts

@@ -17,6 +17,10 @@
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
 import { scaffolderApiRef, ScaffolderClient } from './api';
 import { EntityPicker } from './components/fields/EntityPicker';
+import {
+  entityNamePickerValidation,
+  EntityNamePicker,
+} from './components/fields/EntityNamePicker';
 import { OwnerPicker } from './components/fields/OwnerPicker';
 import {
   repoPickerValidation,
@@ -61,6 +65,14 @@ export const EntityPickerFieldExtension = scaffolderPlugin.provide(
   }),
 );
 
+export const EntityNamePickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    component: EntityNamePicker,
+    name: 'EntityNamePicker',
+    validation: entityNamePickerValidation,
+  }),
+);
+
 export const RepoUrlPickerFieldExtension = scaffolderPlugin.provide(
   createScaffolderFieldExtension({
     component: RepoUrlPicker,