Merge pull request #8438 from mufaddal7/feature/OwnedEntityPicker

add OwnedEntityPicker field in plugin/scaffolder

plugins/scaffolder/api-report.md

@@ -96,6 +96,24 @@ export type FieldExtensionOptions<T = any> = {
   validation?: CustomFieldValidator<T>;
 };
 
+// Warning: (ae-missing-release-tag) "OwnedEntityPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const OwnedEntityPicker: ({
+  onChange,
+  schema: { title, description },
+  required,
+  uiSchema,
+  rawErrors,
+  formData,
+  idSchema,
+}: FieldProps<string>) => JSX.Element;
+
+// Warning: (ae-missing-release-tag) "OwnedEntityPickerFieldExtension" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const OwnedEntityPickerFieldExtension: () => null;
+
 // Warning: (ae-missing-release-tag) "OwnerPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

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

@@ -0,0 +1,75 @@
+/*
+ * 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 {
+  formatEntityRefTitle,
+  useOwnedEntities,
+} from '@backstage/plugin-catalog-react';
+import { TextField } from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { FieldProps } from '@rjsf/core';
+import React from 'react';
+
+export const OwnedEntityPicker = ({
+  onChange,
+  schema: { title = 'Entity', description = 'An entity from the catalog' },
+  required,
+  uiSchema,
+  rawErrors,
+  formData,
+  idSchema,
+}: FieldProps<string>) => {
+  const allowedKinds = uiSchema['ui:options']?.allowedKinds as string[];
+  const defaultKind = uiSchema['ui:options']?.defaultKind as string | undefined;
+  const { ownedEntities, loading } = useOwnedEntities(allowedKinds);
+
+  const entityRefs = ownedEntities?.items
+    .map(e => formatEntityRefTitle(e, { defaultKind }))
+    .filter(n => n);
+
+  const onSelect = (_: any, value: string | null) => {
+    onChange(value || '');
+  };
+
+  return (
+    <FormControl
+      margin="normal"
+      required={required}
+      error={rawErrors?.length > 0 && !formData}
+    >
+      <Autocomplete
+        id={idSchema?.$id}
+        value={(formData as string) || ''}
+        loading={loading}
+        onChange={onSelect}
+        options={entityRefs || []}
+        autoSelect
+        freeSolo
+        renderInput={params => (
+          <TextField
+            {...params}
+            label={title}
+            margin="normal"
+            helperText={description}
+            variant="outlined"
+            required={required}
+            InputProps={params.InputProps}
+          />
+        )}
+      />
+    </FormControl>
+  );
+};

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

@@ -0,0 +1,16 @@
+/*
+ * 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 { OwnedEntityPicker } from './OwnedEntityPicker';

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

@@ -18,3 +18,4 @@ export * from './EntityPicker';
 export * from './OwnerPicker';
 export * from './RepoUrlPicker';
 export * from './TextValuePicker';
+export * from './OwnedEntityPicker';

plugins/scaffolder/src/extensions/default.ts

@@ -24,6 +24,7 @@ import {
   RepoUrlPicker,
 } from '../components/fields/RepoUrlPicker';
 import { FieldExtensionOptions } from './types';
+import { OwnedEntityPicker } from '../components/fields/OwnedEntityPicker';
 
 export const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS: FieldExtensionOptions[] = [
   {
@@ -44,4 +45,8 @@ export const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS: FieldExtensionOptions[] = [
     component: OwnerPicker,
     name: 'OwnerPicker',
   },
+  {
+    component: OwnedEntityPicker,
+    name: 'OwnedEntityPicker',
+  },
 ];

plugins/scaffolder/src/index.ts

@@ -31,6 +31,7 @@ export {
   EntityPickerFieldExtension,
   EntityNamePickerFieldExtension,
   OwnerPickerFieldExtension,
+  OwnedEntityPickerFieldExtension,
   RepoUrlPickerFieldExtension,
   ScaffolderPage,
   scaffolderPlugin as plugin,
@@ -42,6 +43,7 @@ export {
   OwnerPicker,
   RepoUrlPicker,
   TextValuePicker,
+  OwnedEntityPicker,
 } from './components/fields';
 export { FavouriteTemplate } from './components/FavouriteTemplate';
 export { TemplateList } from './components/TemplateList';

plugins/scaffolder/src/plugin.ts

@@ -35,6 +35,7 @@ import {
   discoveryApiRef,
   identityApiRef,
 } from '@backstage/core-plugin-api';
+import { OwnedEntityPicker } from './components/fields/OwnedEntityPicker';
 
 export const scaffolderPlugin = createPlugin({
   id: 'scaffolder',
@@ -95,3 +96,10 @@ export const ScaffolderPage = scaffolderPlugin.provide(
     mountPoint: rootRouteRef,
   }),
 );
+
+export const OwnedEntityPickerFieldExtension = scaffolderPlugin.provide(
+  createScaffolderFieldExtension({
+    component: OwnedEntityPicker,
+    name: 'OwnedEntityPicker',
+  }),
+);