Owned Groups Scaffolder Field Extension #17608

Parsifal-M · 2023-05-02T08:57:02Z

Hey, I just made a Pull Request!

Hey Team 👋

This is my attempt at adding a field extension that is a drop-down that displays only the group entities a user entity belongs to.

For now, I will keep it as a draft as there are some todos and likely some corrections to be made, I would love some feedback as I have never done this before. 🙏

Add some Tests
Probably some corrections based on feedback and pipeline results

✔️ Checklist

A changeset describing the change and affected packages. (more info)
Added or updated documentation
Tests for new functionality and regression tests for bug fixes
Screenshots attached (for UI changes)
All your commits have a Signed-off-by line in the message. (more info)

backstage-goalie · 2023-05-02T08:57:23Z

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage/plugin-scaffolder	plugins/scaffolder	minor	`v1.13.2-next.2`

github-actions · 2023-05-02T09:08:29Z

Uffizzi Preview deployment-24014 was deleted.

Parsifal-M · 2023-05-02T09:16:35Z

@benjdlambert FYI, no rush on this but would love some feedback as I've not done something like this before in this repo and I am sure there are better ways/things to improve. 👍

Thanks!

benjdlambert

Overall I think we're on the right lines, just a comment about what data to use.

benjdlambert · 2023-05-02T11:56:50Z

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

+  const identityApi = useApi(identityApiRef);
+  const { loading, value: identityRefs } = useAsync(async () => {
+    const identity = await identityApi.getBackstageIdentity();
+    return identity.userEntityRef;


So I think this would be more of a GroupsImPartOfPicker, not ownership as such. It could be implemented that way in the auth-backend, but I would recommend using the ownershipEntityRefs from identity as the groups, and then you don't need the entity picker at all, you can just render a dropdown select with these options.

You might want to go and make a request to the catalog for each of the refs in the ownershipEntityRefs however to go get their metadata.title etc to display in a nice way.

Also to be clear, maybe there is a use case for this picker, so maybe we could also have the OwnedGroupsPicker one and also the UsersMemberOfGroup picker (names need work) 😂

Awesome! Thanks for the feedback, will get on this and report back 👍

Did a ..small.. refactor on this but still working on it 😅

Hey @benjdlambert,

Could I get another sanity check on this to just make sure I am moving in the right direction?

Thanks!

Parsifal-M · 2023-05-08T06:51:12Z

Hey, sorry for little movement on this I've been off sick so not had any time to work on it 😢 will pick it up sometime this week again.

Parsifal-M · 2023-05-16T04:53:07Z

Just quick update I am on holiday at the moment so will be little progress this week 🌴

benjdlambert

This is looking pretty good I think - just a few comments.

benjdlambert · 2023-05-22T10:29:49Z

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

+
+export { GroupsImPartOfPickerSchema };
+
+export const GroupsImPartOfPicker = (props: GroupsImPartOfPickerProps) => {


Still a little unsure about this name 😂 it could be something like OwnershipEntityRefPicker or something. Do you have any thoughts?

I'm terrible with names 😂, OwnershipEntityRefPicker this sounds good to me 👍

benjdlambert · 2023-05-22T10:30:15Z

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

+      <InputLabel>{title}</InputLabel>
+      <Select value={selectedGroup} onChange={handleChange} label={title}>
+        {identityRefs?.map((ref: string) => (
+          <MenuItem key={ref} value={ref}>


Not sure that this should be a MenuItem component? I think there might be something else that it should be.

Could be <Option> or something I feel like we might have used before. You can take a look at the other FieldExtensions :)

Will do! Think I got a bit confused somewhere around here 😅

Done, now using Autocomplete which seems to be the norm(?)

benjdlambert · 2023-05-22T10:31:25Z

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

+    <FormControl variant="outlined" margin="dense" required={required}>
+      <InputLabel>{title}</InputLabel>
+      <Select value={selectedGroup} onChange={handleChange} label={title}>
+        {identityRefs?.map((ref: string) => (


I think that we might want to go and call the catalog with these refs to decorate them with their correct name or title if thats available rather than just having group:my-group or whatever.

Think I've managed to do this 💪 I get team-a now instead of the triplets

Parsifal-M · 2023-05-25T13:59:17Z

Hey @benjdlambert

Sorry for being slow on this, I think with my latest commit it's almost there, and I'd like to just maybe try and write a few tests to accompany it.

Hopefully, get it finished this week 😓

benjdlambert · 2023-05-29T10:39:06Z

@Parsifal-M I think this is looking pretty good - would be good to test it out with some different use cases, it might be that we should drop the memberOf query, and just use the ownershipEntityRefs as they should be enough, but we can see!

Parsifal-M · 2023-05-30T13:12:21Z

Hey @benjdlambert,

Think we are at the finishing line here ... thankfully!

QQ -> I need to run yarn build:api-reports I guess as the pipeline complains about it? And would it be okay to sanity-check my tests? Honestly was harder to write the test than to actually implement the field 🤣

Again sorry this took so long, actually I am implementing Backstage where I work by myself and having to customize quite a few things so time is a bit of a luxury for me 😅

benjdlambert · 2023-05-30T13:45:54Z

Yep - we did some hacking on a test framework for FieldExtensions but it's not ready yet for OpenSourcing but it's something that's definitely going to help making field extensions! You'll need to run yarn build:api-reports locally and commit the changes. And you'll also need a changeset too, so yarn changeset and it's a minor bump I think! 👍

Parsifal-M · 2023-05-30T17:15:52Z

Yep - we did some hacking on a test framework for FieldExtensions but it's not ready yet for OpenSourcing but it's something that's definitely going to help making field extensions! You'll need to run yarn build:api-reports locally and commit the changes. And you'll also need a changeset too, so yarn changeset and it's a minor bump I think! 👍

Woop! 💪

Could you possibly help me understand what I am doing wrong here? 😅

Then I think we're good!

// Warning: (ae-missing-release-tag) "OwnershipEntityRefPickerSchema" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const OwnershipEntityRefPickerSchema: CustomFieldExtensionSchema_2;

// Warning: (ae-forgotten-export) The symbol "OwnershipEntityRefPickerFieldSchema" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "OwnershipEntityRefPickerUiOptions" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export type OwnershipEntityRefPickerUiOptions =
  typeof OwnershipEntityRefPickerFieldSchema.uiOptionsType;

EDIT Think I fixed it... 🤔 💭

benjdlambert

Hey @Parsifal-M!

This is looking pretty good now, just two small nits and then I think we're good to go!

benjdlambert · 2023-06-07T07:25:47Z

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

+  const [groups, setGroups] = useState<string[]>([]);
+  const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
+
+  useEffect(() => {


Can you not make this useEffect(async() => {..}) or use useAsync instead of having to wrap up the fetchUserGroups?

Hey @benjdlambert 👋 !

Happy to look into this and try to make this change, would it be okay if you help me understand why that would be better and maybe a small example? I don't know all the ins and outs of react hooks 😅 so just wondering why this is not an ideal approach

Thanks a lot!

It's just a little cleaner, and it will do the caching for you. It's much easier to read, and you have better control over the async promise that it's wrapped up with.

For instance you can do something like this:

const { data, loading, error } = useAsync( () => ...)

And you will get the return value, the loading state if the promise is not resolved yet, and the any error thats thrown from the promise, which is a nice pattern even if they're not used so much it's cleaner than using useEffect :)

benjdlambert · 2023-06-07T07:26:18Z

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

+      const userIdentity = identity.ownershipEntityRefs;
+
+      if (!userIdentity) {
+        throw new NotFoundError('No ownership entity refs found');


Maybe use the alertApi here to post an error message rather than throwing?

Did not know this was a thing, TIL!

Thanks!

Parsifal-M · 2023-06-07T07:59:21Z

Hey @Parsifal-M!

This is looking pretty good now, just two small nits and then I think we're good to go!

Hey! 👋

Thanks for the review, duly noted will do this probably on Friday as today and tomorrow are a bit crazy for me, but maybe I'll get a chance later (we shall see!)

Thanks!

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

…he meta for now Signed-off-by: blam <ben@blam.sh>

… a member Signed-off-by: blam <ben@blam.sh>

Signed-off-by: blam <ben@blam.sh>

github-actions · 2023-06-13T15:51:48Z

Thank you for contributing to Backstage! The changes in this pull request will be part of the 1.15.0 release, scheduled for Tue, 20 Jun 2023.

benjdlambert · 2023-06-13T15:52:24Z

Let’s give this a try!

github-actions bot added the area:scaffolder Everything and all things related to the scaffolder project area label May 2, 2023

benjdlambert reviewed May 2, 2023

View reviewed changes

jhaals mentioned this pull request May 8, 2023

🚀 Feature: Field Extension to display group entities a user is part of #15456

Closed

2 tasks

Parsifal-M force-pushed the Owned-Groups-Field-Extension branch from abf288e to 2ca16c0 Compare May 11, 2023 07:22

benjdlambert requested changes May 22, 2023

View reviewed changes

Parsifal-M force-pushed the Owned-Groups-Field-Extension branch from b549fbc to 4f14981 Compare May 23, 2023 10:52

Parsifal-M force-pushed the Owned-Groups-Field-Extension branch from 4f14981 to f657aca Compare May 30, 2023 07:51

Parsifal-M marked this pull request as ready for review May 30, 2023 13:09

Parsifal-M requested a review from a team as a code owner May 30, 2023 13:09

Parsifal-M requested a review from jhaals May 30, 2023 13:09

Parsifal-M force-pushed the Owned-Groups-Field-Extension branch from 24fd6b3 to fb7d4d9 Compare May 30, 2023 16:56

Parsifal-M force-pushed the Owned-Groups-Field-Extension branch from fb7d4d9 to b86d47c Compare May 31, 2023 06:44

Parsifal-M requested a review from benjdlambert June 6, 2023 07:24

benjdlambert requested changes Jun 7, 2023

View reviewed changes

Parsifal-M added 5 commits June 13, 2023 16:59

OwnedGroups Dropdown

c99e60e

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

Owned Groups Picker

0a40875

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

Small refactor

de75235

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

Small refactor

d308271

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

OwnershipEntityRefPicker Work

93dafd1

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

Parsifal-M and others added 10 commits June 13, 2023 16:59

small modifications, TODO: Testing

a9cec8c

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

writing tests

f79755d

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

writing tests

e7ce0cd

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

writing tests

2af2bdf

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

api-report and changeset

464125e

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

api-report fixed?

0278da3

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

feat: reworking the picker slightly to just use groups and decorate t…

67d7412

…he meta for now Signed-off-by: blam <ben@blam.sh>

feat: change the lookup to get all groups where the logged in user is…

bffbba4

… a member Signed-off-by: blam <ben@blam.sh>

feat: reworking the calls, and changing the name

7c506d8

Signed-off-by: blam <ben@blam.sh>

chore: fixing typescript

15a681a

Signed-off-by: blam <ben@blam.sh>

benjdlambert force-pushed the Owned-Groups-Field-Extension branch from 99670d3 to 15a681a Compare June 13, 2023 15:03

benjdlambert added 2 commits June 13, 2023 17:04

chore: fixing changeset

5d695c3

Signed-off-by: blam <ben@blam.sh>

chore: fixing api-reprots

65bff8d

Signed-off-by: blam <ben@blam.sh>

benjdlambert approved these changes Jun 13, 2023

View reviewed changes

benjdlambert enabled auto-merge June 13, 2023 15:08

benjdlambert disabled auto-merge June 13, 2023 15:08

Parsifal-M force-pushed the Owned-Groups-Field-Extension branch from 65bff8d to 0dcf350 Compare June 13, 2023 15:10

benjdlambert force-pushed the Owned-Groups-Field-Extension branch from 0dcf350 to 65bff8d Compare June 13, 2023 15:14

benjdlambert merged commit 864cdac into backstage:master Jun 13, 2023
49 of 54 checks passed

namco1992 mentioned this pull request Jul 27, 2023

Fix the query filter in the MyGroupsPicker #18813

Merged

5 tasks

Parsifal-M mentioned this pull request Jun 17, 2024

Org Member: Parsifal-M backstage/community#139

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Owned Groups Scaffolder Field Extension #17608

Owned Groups Scaffolder Field Extension #17608

Parsifal-M commented May 2, 2023 •

edited

Loading

backstage-goalie bot commented May 2, 2023 •

edited

Loading

github-actions bot commented May 2, 2023 •

edited

Loading

Parsifal-M commented May 2, 2023

benjdlambert left a comment

benjdlambert May 2, 2023

benjdlambert May 2, 2023

Parsifal-M May 2, 2023

Parsifal-M May 11, 2023

Parsifal-M May 22, 2023

Parsifal-M commented May 8, 2023

Parsifal-M commented May 16, 2023

benjdlambert left a comment

benjdlambert May 22, 2023

Parsifal-M May 22, 2023

benjdlambert May 22, 2023

benjdlambert May 22, 2023

Parsifal-M May 22, 2023

Parsifal-M May 23, 2023

benjdlambert May 22, 2023

Parsifal-M May 23, 2023

Parsifal-M commented May 25, 2023

benjdlambert commented May 29, 2023

Parsifal-M commented May 30, 2023

benjdlambert commented May 30, 2023

Parsifal-M commented May 30, 2023 •

edited

Loading

benjdlambert left a comment

benjdlambert Jun 7, 2023

Parsifal-M Jun 9, 2023

benjdlambert Jun 13, 2023

benjdlambert Jun 7, 2023

Parsifal-M Jun 7, 2023

Parsifal-M commented Jun 7, 2023

github-actions bot commented Jun 13, 2023

benjdlambert commented Jun 13, 2023


		export { GroupsImPartOfPickerSchema };

		export const GroupsImPartOfPicker = (props: GroupsImPartOfPickerProps) => {

Owned Groups Scaffolder Field Extension #17608

Owned Groups Scaffolder Field Extension #17608

Conversation

Parsifal-M commented May 2, 2023 • edited Loading

Hey, I just made a Pull Request!

✔️ Checklist

backstage-goalie bot commented May 2, 2023 • edited Loading

Changed Packages

github-actions bot commented May 2, 2023 • edited Loading

Parsifal-M commented May 2, 2023

benjdlambert left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Parsifal-M commented May 8, 2023

Parsifal-M commented May 16, 2023

benjdlambert left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Parsifal-M commented May 25, 2023

benjdlambert commented May 29, 2023

Parsifal-M commented May 30, 2023

benjdlambert commented May 30, 2023

Parsifal-M commented May 30, 2023 • edited Loading

benjdlambert left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Parsifal-M commented Jun 7, 2023

github-actions bot commented Jun 13, 2023

benjdlambert commented Jun 13, 2023

Parsifal-M commented May 2, 2023 •

edited

Loading

backstage-goalie bot commented May 2, 2023 •

edited

Loading

github-actions bot commented May 2, 2023 •

edited

Loading

Parsifal-M commented May 30, 2023 •

edited

Loading