example-app: add an example of adding a custom Scaffolder field extension

This is useful to visualize what it takes to add a new custom Scaffolder field extension.

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

packages/app/package.json

@@ -61,6 +61,7 @@
   },
   "devDependencies": {
     "@backstage/test-utils": "^0.1.16",
+    "@rjsf/core": "^3.0.0",
     "@testing-library/cypress": "^7.0.1",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",

packages/app/src/App.tsx

@@ -50,7 +50,6 @@ import {
   EntityPickerFieldExtension,
   EntityNamePickerFieldExtension,
 } from '@backstage/plugin-scaffolder';
-import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
 import { SearchPage } from '@backstage/plugin-search';
 import { TechRadarPage } from '@backstage/plugin-tech-radar';
 import { TechdocsPage } from '@backstage/plugin-techdocs';
@@ -63,6 +62,7 @@ import { apis } from './apis';
 import { Root } from './components/Root';
 import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
+import { LowerCaseValuePickerFieldExtension } from './components/scaffolder/customScaffolderExtensions';
 import { providers } from './identityProviders';
 import * as plugins from './plugins';
 
@@ -133,7 +133,6 @@ const routes = (
     />
     <Route path="/graphiql" element={<GraphiQLPage />} />
     <Route path="/lighthouse" element={<LighthousePage />} />
-
     <Route path="/api-docs" element={<ApiExplorerPage />} />
     <Route path="/gcp-projects" element={<GcpProjectsPage />} />
     <Route path="/newrelic" element={<NewRelicPage />} />

packages/app/src/components/scaffolder/customScaffolderExtensions.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 type { FieldValidation } from '@rjsf/core';
+import {
+  createScaffolderFieldExtension,
+  TextValuePicker,
+  scaffolderPlugin,
+} from '@backstage/plugin-scaffolder';
+
+export const LowerCaseValuePickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    name: 'LowerCaseValuePicker',
+    component: TextValuePicker,
+    validation: (value: string, validation: FieldValidation) => {
+      if (value.toLowerCase() !== value) {
+        validation.addError('Only lowercase values are allowed.');
+      }
+    },
+  }),
+);