Small refactor

Signed-off-by: Peter Macdonald <macdonald.peter90@gmail.com>

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

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2023 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 { identityApiRef, useApi } from '@backstage/core-plugin-api';
+import useAsync from 'react-use/lib/useAsync';
+import {
+  TextField,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel,
+} from '@material-ui/core';
+import {
+  GroupsImPartOfPickerProps,
+  GroupsImPartOfPickerSchema,
+} from './schema';
+
+export { GroupsImPartOfPickerSchema };
+
+export const GroupsImPartOfPicker = (props: GroupsImPartOfPickerProps) => {
+  const {
+    schema: { title = 'Group', description = 'A group you are part of' },
+    required,
+  } = props;
+
+  const identityApi = useApi(identityApiRef);
+  const { loading, value: identityRefs } = useAsync(async () => {
+    const identity = await identityApi.getBackstageIdentity();
+    return identity.ownershipEntityRefs;
+  });
+
+  const [selectedGroup, setSelectedGroup] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setSelectedGroup(event.target.value as string);
+  };
+
+  if (loading) {
+    return (
+      <TextField
+        label={title}
+        margin="dense"
+        helperText={description}
+        FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}
+        variant="outlined"
+        required={required}
+        disabled
+      />
+    );
+  }
+
+  return (
+    <FormControl variant="outlined" margin="dense" required={required}>
+      <InputLabel>{title}</InputLabel>
+      <Select value={selectedGroup} onChange={handleChange} label={title}>
+        {identityRefs?.map((ref: string) => (
+          <MenuItem key={ref} value={ref}>
+            {ref}
+          </MenuItem>
+        )) || []}
+      </Select>
+    </FormControl>
+  );
+};

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

@@ -15,6 +15,6 @@
  */
 
 export {
-  OwnedGroupsPickerFieldSchema,
-  type OwnedGroupsPickerUiOptions,
+  GroupsImPartOfPickerSchema,
+  type GroupsImPartOfPickerUiOptions,
 } from './schema';

plugins/scaffolder/src/components/fields/GroupsImPartOfPicker/schema.ts

@@ -13,3 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import { z } from 'zod';
+import { makeFieldSchemaFromZod } from '../utils';
+
+export const GroupsImPartOfPickerFieldSchema = makeFieldSchemaFromZod(
+  z.string(),
+  z.object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+  }),
+);
+
+export type GroupsImPartOfPickerUiOptions =
+  typeof GroupsImPartOfPickerFieldSchema.uiOptionsType;
+export type GroupsImPartOfPickerProps =
+  typeof GroupsImPartOfPickerFieldSchema.type;
+export const GroupsImPartOfPickerSchema =
+  GroupsImPartOfPickerFieldSchema.schema;

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

@@ -1,81 +0,0 @@
-/*
- * Copyright 2023 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 { identityApiRef, useApi } from '@backstage/core-plugin-api';
-import useAsync from 'react-use/lib/useAsync';
-import { EntityPicker } from '../EntityPicker/EntityPicker';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import { OwnedGroupsPickerProps } from './schema';
-import { TextField } from '@material-ui/core';
-
-export { OwnedGroupsPickerSchema } from './schema';
-
-export const OwnedGroupsPicker = (props: OwnedGroupsPickerProps) => {
-  const {
-    schema: { title = 'Group', description = 'A group from the catalog' },
-    uiSchema,
-    required,
-  } = props;
-
-  const identityApi = useApi(identityApiRef);
-  const { loading, value: identityRefs } = useAsync(async () => {
-    const identity = await identityApi.getBackstageIdentity();
-    return identity.userEntityRef;
-  });
-
-  const catalogFilter = {
-    kind: 'group',
-    ['relations.hasMember']: identityRefs || [],
-  };
-
-  const groupUiSchema = {
-    ...uiSchema,
-    'ui:options': {
-      catalogFilter,
-      defaultKind: 'group',
-    },
-  };
-
-  if (loading) {
-    return (
-      <Autocomplete
-        loading={loading}
-        renderInput={params => (
-          <TextField
-            {...params}
-            label={title}
-            margin="dense"
-            helperText={description}
-            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}
-            variant="outlined"
-            required={required}
-          />
-        )}
-        options={[]}
-      />
-    );
-  }
-
-  return (
-    <EntityPicker
-      {...props}
-      schema={{ title, description }}
-      uiSchema={groupUiSchema}
-      catalogFilter={catalogFilter}
-    />
-  );
-};

plugins/scaffolder/src/components/fields/OwnedGroupsPicker/schema.ts

@@ -1,47 +0,0 @@
-/*
- * Copyright 2023 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 { z } from 'zod';
-import { makeFieldSchemaFromZod } from '../utils';
-import { entityQueryFilterExpressionSchema } from '../EntityPicker/schema';
-
-export const OwnedGroupsPickerFieldSchema = makeFieldSchemaFromZod(
-  z.string(),
-  z.object({
-    defaultKind: z
-      .string()
-      .optional()
-      .describe(
-        'The default entity kind. Options of this kind will not be prefixed.',
-      ),
-    defaultNamespace: z
-      .union([z.string(), z.literal(false)])
-      .optional()
-      .describe(
-        'The default namespace. Options with this namespace will not be prefixed.',
-      ),
-    catalogFilter: z
-      .array(entityQueryFilterExpressionSchema)
-      .or(entityQueryFilterExpressionSchema)
-      .optional()
-      .describe('List of key-value filter expression for entities'),
-  }),
-);
-
-export type OwnedGroupsPickerUiOptions =
-  typeof OwnedGroupsPickerFieldSchema.uiOptionsType;
-export type OwnedGroupsPickerProps = typeof OwnedGroupsPickerFieldSchema.type;
-export const OwnedGroupsPickerSchema = OwnedGroupsPickerFieldSchema.schema;

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

@@ -18,5 +18,5 @@ export * from './OwnerPicker';
 export * from './RepoUrlPicker';
 export * from './OwnedEntityPicker';
 export * from './EntityTagsPicker';
-export * from './OwnedGroupsPicker';
+export * from './GroupsImPartOfPicker';
 export { type FieldSchema, makeFieldSchemaFromZod } from './utils';

plugins/scaffolder/src/extensions/default.ts

@@ -40,9 +40,9 @@ import {
   OwnedEntityPickerSchema,
 } from '../components/fields/OwnedEntityPicker/OwnedEntityPicker';
 import {
-  OwnedGroupsPicker,
-  OwnedGroupsPickerSchema,
-} from '../components/fields/OwnedGroupsPicker/OwnedGroupsPicker';
+  GroupsImPartOfPicker,
+  GroupsImPartOfPickerSchema,
+} from '../components/fields/GroupsImPartOfPicker/GroupsImPartOfPicker';
 
 export const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
   {
@@ -78,8 +78,8 @@ export const DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS = [
     schema: OwnedEntityPickerSchema,
   },
   {
-    component: OwnedGroupsPicker,
-    name: 'OwnedGroupsPicker',
-    schema: OwnedGroupsPickerSchema,
+    component: GroupsImPartOfPicker,
+    name: 'GroupsImPartOfPicker',
+    schema: GroupsImPartOfPickerSchema,
   },
 ];

plugins/scaffolder/src/plugin.tsx

@@ -65,9 +65,9 @@ import {
   editRouteRef,
 } from './routes';
 import {
-  OwnedGroupsPicker,
-  OwnedGroupsPickerSchema,
-} from './components/fields/OwnedGroupsPicker/OwnedGroupsPicker';
+  GroupsImPartOfPicker,
+  GroupsImPartOfPickerSchema,
+} from './components/fields/GroupsImPartOfPicker/GroupsImPartOfPicker';
 
 /**
  * The main plugin export for the scaffolder.
@@ -169,9 +169,9 @@ export const OwnerPickerFieldExtension = scaffolderPlugin.provide(
  */
 export const OwnedGroupsFieldExtension = scaffolderPlugin.provide(
   createScaffolderFieldExtension({
-    component: OwnedGroupsPicker,
-    name: 'OwnedGroupsPicker',
-    schema: OwnedGroupsPickerSchema,
+    component: GroupsImPartOfPicker,
+    name: 'GroupsImPartOfPicker',
+    schema: GroupsImPartOfPickerSchema,
   }),
 );