From fbbc9aafc2c36448ad75634b02c17b3244138fd3 Mon Sep 17 00:00:00 2001
From: Himanshu Mishra <himanshu@orkohunter.net>
Date: Thu, 5 Aug 2021 12:17:39 +0200
Subject: [PATCH] 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                     |  1 +
 packages/app/src/App.tsx                      |  3 +-
 .../scaffolder/customScaffolderExtensions.tsx | 34 +++++++++++++++++++
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 packages/app/src/components/scaffolder/customScaffolderExtensions.tsx

diff --git a/packages/app/package.json b/packages/app/package.json
index 5fa6fe2198..10066f9ba0 100644
--- a/packages/app/package.json
+++ b/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",
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index a93cc9279a..12d7c0c231 100644
--- a/packages/app/src/App.tsx
+++ b/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 />} />
diff --git a/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx b/packages/app/src/components/scaffolder/customScaffolderExtensions.tsx
new file mode 100644
index 0000000000..5ef4f617a7
--- /dev/null
+++ b/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.');
+      }
+    },
+  }),
+);