@backstage/plugin-scaffolder 1.24.0-next.2 → 1.24.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @backstage/plugin-scaffolder
 
+## 1.24.0-next.3
+
+### Minor Changes
+
+- 1552c33: Changed the way to display entities in `MyGroupsPicker` to use `entityPresentationApi` and make it consistent across scaffolder pickers
+
+### Patch Changes
+
+- 47ed51b: Add an extra bit of height to the EntityPicker dropdown to make it clear there are more options to select from, and to remove the scroll bar when there is less than 10 options
+- d18f4eb: Fix undefined in the title of Scaffolder Runs on the page load
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.7.0-next.3
+  - @backstage/catalog-model@1.6.0-next.0
+  - @backstage/core-compat-api@0.2.8-next.3
+  - @backstage/plugin-catalog-react@1.12.3-next.3
+  - @backstage/catalog-client@1.6.6-next.0
+  - @backstage/core-components@0.14.10-next.0
+  - @backstage/core-plugin-api@1.9.3
+  - @backstage/errors@1.2.4
+  - @backstage/integration@1.14.0-next.0
+  - @backstage/integration-react@1.1.30-next.0
+  - @backstage/types@1.1.1
+  - @backstage/plugin-catalog-common@1.0.26-next.2
+  - @backstage/plugin-permission-react@0.4.25-next.1
+  - @backstage/plugin-scaffolder-common@1.5.5-next.2
+  - @backstage/plugin-scaffolder-react@1.11.0-next.3
+
 ## 1.24.0-next.2
 
 ### Minor Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder__alpha",
-  "version": "1.24.0-next.2",
+  "version": "1.24.0-next.3",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/alpha.d.ts

@@ -72,6 +72,6 @@ declare const _default: _backstage_frontend_plugin_api.BackstagePlugin<{
         kind: string;
         namespace: string;
     }>;
-}>;
+}, {}>;
 
 export { type FormProps, type TemplateListPageProps, type TemplateWizardPageProps, _default as default };

package/dist/components/OngoingTask/OngoingTask.esm.js

@@ -113,7 +113,7 @@ const OngoingTask = (props) => {
   return /* @__PURE__ */ React.createElement(Page, { themeId: "website" }, /* @__PURE__ */ React.createElement(
     Header,
     {
-      pageTitleOverride: `Run of ${templateName}`,
+      pageTitleOverride: templateName ? `Run of ${templateName}` : `Scaffolder Run`,
       title: /* @__PURE__ */ React.createElement("div", null, "Run of ", /* @__PURE__ */ React.createElement("code", null, templateName)),
       subtitle: `Task ${taskId}`
     },

package/dist/components/OngoingTask/OngoingTask.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OngoingTask.esm.js","sources":["../../../src/components/OngoingTask/OngoingTask.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Content, ErrorPanel, Header, Page } from '@backstage/core-components';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Paper from '@material-ui/core/Paper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ResizableBox } from 'react-resizable';\nimport {\n  ScaffolderTaskOutput,\n  scaffolderApiRef,\n  useTaskEventStream,\n} from '@backstage/plugin-scaffolder-react';\nimport { selectedTemplateRouteRef } from '../../routes';\nimport { useAnalytics, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport qs from 'qs';\nimport { ContextMenu } from './ContextMenu';\nimport {\n  DefaultTemplateOutputs,\n  TaskLogStream,\n  TaskSteps,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useAsync } from '@react-hookz/web';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport {\n  taskCancelPermission,\n  taskReadPermission,\n  taskCreatePermission,\n} from '@backstage/plugin-scaffolder-common/alpha';\n\nconst useStyles = makeStyles(theme => ({\n  contentWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  buttonBar: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'right',\n  },\n  cancelButton: {\n    marginRight: theme.spacing(1),\n  },\n  logsVisibilityButton: {\n    marginRight: theme.spacing(1),\n  },\n}));\n\n/**\n * @public\n */\nexport const OngoingTask = (props: {\n  TemplateOutputsComponent?: React.ComponentType<{\n    output?: ScaffolderTaskOutput;\n  }>;\n}) => {\n  // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful.\n  const { taskId } = useParams();\n  const templateRouteRef = useRouteRef(selectedTemplateRouteRef);\n  const navigate = useNavigate();\n  const analytics = useAnalytics();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const taskStream = useTaskEventStream(taskId!);\n  const classes = useStyles();\n  const steps = useMemo(\n    () =>\n      taskStream.task?.spec.steps.map(step => ({\n        ...step,\n        ...taskStream?.steps?.[step.id],\n      })) ?? [],\n    [taskStream],\n  );\n\n  const [logsVisible, setLogVisibleState] = useState(false);\n  const [buttonBarVisible, setButtonBarVisibleState] = useState(true);\n\n  // Used dummy string value for `resourceRef` since `allowed` field will always return `false` if `resourceRef` is `undefined`\n  const { allowed: canCancelTask } = usePermission({\n    permission: taskCancelPermission,\n  });\n\n  const { allowed: canReadTask } = usePermission({\n    permission: taskReadPermission,\n  });\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n\n  // Start Over endpoint requires user to have both read (to grab parameters) and create (to create new task) permissions\n  const canStartOver = canReadTask && canCreateTask;\n\n  useEffect(() => {\n    if (taskStream.error) {\n      setLogVisibleState(true);\n    }\n  }, [taskStream.error]);\n\n  useEffect(() => {\n    if (taskStream.completed && !taskStream.error) {\n      setButtonBarVisibleState(false);\n    }\n  }, [taskStream.error, taskStream.completed]);\n\n  const activeStep = useMemo(() => {\n    for (let i = steps.length - 1; i >= 0; i--) {\n      if (steps[i].status !== 'open') {\n        return i;\n      }\n    }\n\n    return 0;\n  }, [steps]);\n\n  const startOver = useCallback(() => {\n    const { namespace, name } =\n      taskStream.task?.spec.templateInfo?.entity?.metadata ?? {};\n\n    const formData = taskStream.task?.spec.parameters ?? {};\n\n    if (!namespace || !name) {\n      return;\n    }\n\n    analytics.captureEvent('click', `Task has been started over`);\n\n    navigate({\n      pathname: templateRouteRef({\n        namespace,\n        templateName: name,\n      }),\n      search: `?${qs.stringify({ formData: JSON.stringify(formData) })}`,\n    });\n  }, [\n    analytics,\n    navigate,\n    taskStream.task?.spec.parameters,\n    taskStream.task?.spec.templateInfo?.entity?.metadata,\n    templateRouteRef,\n  ]);\n\n  const [{ status: cancelStatus }, { execute: triggerCancel }] = useAsync(\n    async () => {\n      if (taskId) {\n        analytics.captureEvent('cancelled', 'Template has been cancelled');\n        await scaffolderApi.cancelTask(taskId);\n      }\n    },\n  );\n\n  const Outputs = props.TemplateOutputsComponent ?? DefaultTemplateOutputs;\n\n  const templateName =\n    taskStream.task?.spec.templateInfo?.entity?.metadata.name;\n\n  const cancelEnabled = !(taskStream.cancelled || taskStream.completed);\n\n  return (\n    <Page themeId=\"website\">\n      <Header\n        pageTitleOverride={`Run of ${templateName}`}\n        title={\n          <div>\n            Run of <code>{templateName}</code>\n          </div>\n        }\n        subtitle={`Task ${taskId}`}\n      >\n        <ContextMenu\n          cancelEnabled={cancelEnabled}\n          logsVisible={logsVisible}\n          buttonBarVisible={buttonBarVisible}\n          onStartOver={startOver}\n          onToggleLogs={setLogVisibleState}\n          onToggleButtonBar={setButtonBarVisibleState}\n          taskId={taskId}\n        />\n      </Header>\n      <Content className={classes.contentWrapper}>\n        {taskStream.error ? (\n          <Box paddingBottom={2}>\n            <ErrorPanel\n              error={taskStream.error}\n              titleFormat=\"markdown\"\n              title={taskStream.error.message}\n            />\n          </Box>\n        ) : null}\n\n        <Box paddingBottom={2}>\n          <TaskSteps\n            steps={steps}\n            activeStep={activeStep}\n            isComplete={taskStream.completed}\n            isError={Boolean(taskStream.error)}\n          />\n        </Box>\n\n        <Outputs output={taskStream.output} />\n\n        {buttonBarVisible ? (\n          <Box paddingBottom={2}>\n            <Paper>\n              <Box padding={2}>\n                <div className={classes.buttonBar}>\n                  <Button\n                    className={classes.cancelButton}\n                    disabled={\n                      !cancelEnabled ||\n                      cancelStatus !== 'not-executed' ||\n                      !canCancelTask\n                    }\n                    onClick={triggerCancel}\n                    data-testid=\"cancel-button\"\n                  >\n                    Cancel\n                  </Button>\n                  <Button\n                    className={classes.logsVisibilityButton}\n                    color=\"primary\"\n                    variant=\"outlined\"\n                    onClick={() => setLogVisibleState(!logsVisible)}\n                  >\n                    {logsVisible ? 'Hide Logs' : 'Show Logs'}\n                  </Button>\n                  <Button\n                    variant=\"contained\"\n                    color=\"primary\"\n                    disabled={cancelEnabled || !canStartOver}\n                    onClick={startOver}\n                    data-testid=\"start-over-button\"\n                  >\n                    Start Over\n                  </Button>\n                </div>\n              </Box>\n            </Paper>\n          </Box>\n        ) : null}\n\n        {logsVisible ? (\n          <ResizableBox height={240} minConstraints={[0, 160]} axis=\"y\">\n            <Paper style={{ height: '100%' }}>\n              <Box padding={2} height=\"100%\">\n                <TaskLogStream logs={taskStream.stepLogs} />\n              </Box>\n            </Paper>\n          </ResizableBox>\n        ) : null}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OngoingTask.esm.js","sources":["../../../src/components/OngoingTask/OngoingTask.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Content, ErrorPanel, Header, Page } from '@backstage/core-components';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport Paper from '@material-ui/core/Paper';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ResizableBox } from 'react-resizable';\nimport {\n  ScaffolderTaskOutput,\n  scaffolderApiRef,\n  useTaskEventStream,\n} from '@backstage/plugin-scaffolder-react';\nimport { selectedTemplateRouteRef } from '../../routes';\nimport { useAnalytics, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport qs from 'qs';\nimport { ContextMenu } from './ContextMenu';\nimport {\n  DefaultTemplateOutputs,\n  TaskLogStream,\n  TaskSteps,\n} from '@backstage/plugin-scaffolder-react/alpha';\nimport { useAsync } from '@react-hookz/web';\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport {\n  taskCancelPermission,\n  taskReadPermission,\n  taskCreatePermission,\n} from '@backstage/plugin-scaffolder-common/alpha';\n\nconst useStyles = makeStyles(theme => ({\n  contentWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  buttonBar: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'right',\n  },\n  cancelButton: {\n    marginRight: theme.spacing(1),\n  },\n  logsVisibilityButton: {\n    marginRight: theme.spacing(1),\n  },\n}));\n\n/**\n * @public\n */\nexport const OngoingTask = (props: {\n  TemplateOutputsComponent?: React.ComponentType<{\n    output?: ScaffolderTaskOutput;\n  }>;\n}) => {\n  // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful.\n  const { taskId } = useParams();\n  const templateRouteRef = useRouteRef(selectedTemplateRouteRef);\n  const navigate = useNavigate();\n  const analytics = useAnalytics();\n  const scaffolderApi = useApi(scaffolderApiRef);\n  const taskStream = useTaskEventStream(taskId!);\n  const classes = useStyles();\n  const steps = useMemo(\n    () =>\n      taskStream.task?.spec.steps.map(step => ({\n        ...step,\n        ...taskStream?.steps?.[step.id],\n      })) ?? [],\n    [taskStream],\n  );\n\n  const [logsVisible, setLogVisibleState] = useState(false);\n  const [buttonBarVisible, setButtonBarVisibleState] = useState(true);\n\n  // Used dummy string value for `resourceRef` since `allowed` field will always return `false` if `resourceRef` is `undefined`\n  const { allowed: canCancelTask } = usePermission({\n    permission: taskCancelPermission,\n  });\n\n  const { allowed: canReadTask } = usePermission({\n    permission: taskReadPermission,\n  });\n\n  const { allowed: canCreateTask } = usePermission({\n    permission: taskCreatePermission,\n  });\n\n  // Start Over endpoint requires user to have both read (to grab parameters) and create (to create new task) permissions\n  const canStartOver = canReadTask && canCreateTask;\n\n  useEffect(() => {\n    if (taskStream.error) {\n      setLogVisibleState(true);\n    }\n  }, [taskStream.error]);\n\n  useEffect(() => {\n    if (taskStream.completed && !taskStream.error) {\n      setButtonBarVisibleState(false);\n    }\n  }, [taskStream.error, taskStream.completed]);\n\n  const activeStep = useMemo(() => {\n    for (let i = steps.length - 1; i >= 0; i--) {\n      if (steps[i].status !== 'open') {\n        return i;\n      }\n    }\n\n    return 0;\n  }, [steps]);\n\n  const startOver = useCallback(() => {\n    const { namespace, name } =\n      taskStream.task?.spec.templateInfo?.entity?.metadata ?? {};\n\n    const formData = taskStream.task?.spec.parameters ?? {};\n\n    if (!namespace || !name) {\n      return;\n    }\n\n    analytics.captureEvent('click', `Task has been started over`);\n\n    navigate({\n      pathname: templateRouteRef({\n        namespace,\n        templateName: name,\n      }),\n      search: `?${qs.stringify({ formData: JSON.stringify(formData) })}`,\n    });\n  }, [\n    analytics,\n    navigate,\n    taskStream.task?.spec.parameters,\n    taskStream.task?.spec.templateInfo?.entity?.metadata,\n    templateRouteRef,\n  ]);\n\n  const [{ status: cancelStatus }, { execute: triggerCancel }] = useAsync(\n    async () => {\n      if (taskId) {\n        analytics.captureEvent('cancelled', 'Template has been cancelled');\n        await scaffolderApi.cancelTask(taskId);\n      }\n    },\n  );\n\n  const Outputs = props.TemplateOutputsComponent ?? DefaultTemplateOutputs;\n\n  const templateName =\n    taskStream.task?.spec.templateInfo?.entity?.metadata.name;\n\n  const cancelEnabled = !(taskStream.cancelled || taskStream.completed);\n\n  return (\n    <Page themeId=\"website\">\n      <Header\n        pageTitleOverride={\n          templateName ? `Run of ${templateName}` : `Scaffolder Run`\n        }\n        title={\n          <div>\n            Run of <code>{templateName}</code>\n          </div>\n        }\n        subtitle={`Task ${taskId}`}\n      >\n        <ContextMenu\n          cancelEnabled={cancelEnabled}\n          logsVisible={logsVisible}\n          buttonBarVisible={buttonBarVisible}\n          onStartOver={startOver}\n          onToggleLogs={setLogVisibleState}\n          onToggleButtonBar={setButtonBarVisibleState}\n          taskId={taskId}\n        />\n      </Header>\n      <Content className={classes.contentWrapper}>\n        {taskStream.error ? (\n          <Box paddingBottom={2}>\n            <ErrorPanel\n              error={taskStream.error}\n              titleFormat=\"markdown\"\n              title={taskStream.error.message}\n            />\n          </Box>\n        ) : null}\n\n        <Box paddingBottom={2}>\n          <TaskSteps\n            steps={steps}\n            activeStep={activeStep}\n            isComplete={taskStream.completed}\n            isError={Boolean(taskStream.error)}\n          />\n        </Box>\n\n        <Outputs output={taskStream.output} />\n\n        {buttonBarVisible ? (\n          <Box paddingBottom={2}>\n            <Paper>\n              <Box padding={2}>\n                <div className={classes.buttonBar}>\n                  <Button\n                    className={classes.cancelButton}\n                    disabled={\n                      !cancelEnabled ||\n                      cancelStatus !== 'not-executed' ||\n                      !canCancelTask\n                    }\n                    onClick={triggerCancel}\n                    data-testid=\"cancel-button\"\n                  >\n                    Cancel\n                  </Button>\n                  <Button\n                    className={classes.logsVisibilityButton}\n                    color=\"primary\"\n                    variant=\"outlined\"\n                    onClick={() => setLogVisibleState(!logsVisible)}\n                  >\n                    {logsVisible ? 'Hide Logs' : 'Show Logs'}\n                  </Button>\n                  <Button\n                    variant=\"contained\"\n                    color=\"primary\"\n                    disabled={cancelEnabled || !canStartOver}\n                    onClick={startOver}\n                    data-testid=\"start-over-button\"\n                  >\n                    Start Over\n                  </Button>\n                </div>\n              </Box>\n            </Paper>\n          </Box>\n        ) : null}\n\n        {logsVisible ? (\n          <ResizableBox height={240} minConstraints={[0, 160]} axis=\"y\">\n            <Paper style={{ height: '100%' }}>\n              <Box padding={2} height=\"100%\">\n                <TaskLogStream logs={taskStream.stepLogs} />\n              </Box>\n            </Paper>\n          </ResizableBox>\n        ) : null}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/fields/MyGroupsPicker/MyGroupsPicker.esm.js

@@ -1,13 +1,14 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import { useApi, identityApiRef, errorApiRef } from '@backstage/core-plugin-api';
 import TextField from '@material-ui/core/TextField';
 import FormControl from '@material-ui/core/FormControl';
 export { MyGroupsPickerSchema } from './schema.esm.js';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
+import { catalogApiRef, entityPresentationApiRef, EntityDisplayName } from '@backstage/plugin-catalog-react';
 import { NotFoundError } from '@backstage/errors';
 import useAsync from 'react-use/esm/useAsync';
 import { stringifyEntityRef } from '@backstage/catalog-model';
+import { VirtualizedListbox } from '../VirtualizedListbox.esm.js';
 
 const MyGroupsPicker = (props) => {
   const {
@@ -20,12 +21,12 @@ const MyGroupsPicker = (props) => {
   const identityApi = useApi(identityApiRef);
   const catalogApi = useApi(catalogApiRef);
   const errorApi = useApi(errorApiRef);
-  const [groups, setGroups] = useState([]);
-  useAsync(async () => {
+  const entityPresentationApi = useApi(entityPresentationApiRef);
+  const { value: groups, loading } = useAsync(async () => {
     const { userEntityRef } = await identityApi.getBackstageIdentity();
     if (!userEntityRef) {
       errorApi.post(new NotFoundError("No user entity ref found"));
-      return;
+      return { catalogEntities: [], entityRefToPresentation: /* @__PURE__ */ new Map() };
     }
     const { items } = await catalogApi.getEntities({
       filter: {
@@ -33,16 +34,25 @@ const MyGroupsPicker = (props) => {
         ["relations.hasMember"]: [userEntityRef]
       }
     });
-    const groupValues = items.filter((e) => Boolean(e)).map((item) => ({
-      label: item.metadata.title ?? item.metadata.name,
-      ref: stringifyEntityRef(item)
-    }));
-    setGroups(groupValues);
+    const entityRefToPresentation = new Map(
+      await Promise.all(
+        items.map(async (item) => {
+          const presentation = await entityPresentationApi.forEntity(item).promise;
+          return [stringifyEntityRef(item), presentation];
+        })
+      )
+    );
+    return { catalogEntities: items, entityRefToPresentation };
   });
   const updateChange = (_, value) => {
-    onChange(value?.ref ?? "");
+    onChange(value ? stringifyEntityRef(value) : "");
   };
-  const selectedEntity = groups?.find((e) => e.ref === formData) || null;
+  const selectedEntity = groups?.catalogEntities.find((e) => stringifyEntityRef(e) === formData) || null;
+  useEffect(() => {
+    if (groups?.catalogEntities.length === 1 && !selectedEntity) {
+      onChange(stringifyEntityRef(groups.catalogEntities[0]));
+    }
+  }, [groups, onChange, selectedEntity]);
   return /* @__PURE__ */ React.createElement(
     FormControl,
     {
@@ -53,11 +63,14 @@ const MyGroupsPicker = (props) => {
     /* @__PURE__ */ React.createElement(
       Autocomplete,
       {
+        disabled: groups?.catalogEntities.length === 1,
         id: "OwnershipEntityRefPicker-dropdown",
-        options: groups || [],
+        options: groups?.catalogEntities || [],
         value: selectedEntity,
+        loading,
         onChange: updateChange,
-        getOptionLabel: (group) => group.label,
+        getOptionLabel: (option) => groups?.entityRefToPresentation.get(stringifyEntityRef(option))?.primaryTitle,
+        autoSelect: true,
         renderInput: (params) => /* @__PURE__ */ React.createElement(
           TextField,
           {
@@ -67,9 +80,15 @@ const MyGroupsPicker = (props) => {
             helperText: description,
             FormHelperTextProps: { margin: "dense", style: { marginLeft: 0 } },
             variant: "outlined",
-            required
+            required,
+            InputProps: params.InputProps
           }
-        )
+        ),
+        renderOption: (option) => /* @__PURE__ */ React.createElement(EntityDisplayName, { entityRef: option }),
+        filterOptions: createFilterOptions({
+          stringify: (option) => groups?.entityRefToPresentation.get(stringifyEntityRef(option))?.primaryTitle
+        }),
+        ListboxComponent: VirtualizedListbox
       }
     )
   );

package/dist/components/fields/MyGroupsPicker/MyGroupsPicker.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MyGroupsPicker.esm.js","sources":["../../../../src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useState } from 'react';\nimport {\n  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from '@material-ui/core/FormControl';\nimport { MyGroupsPickerProps, MyGroupsPickerSchema } from './schema';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { NotFoundError } from '@backstage/errors';\nimport useAsync from 'react-use/esm/useAsync';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\n\nexport { MyGroupsPickerSchema };\n\nexport const MyGroupsPicker = (props: MyGroupsPickerProps) => {\n  const {\n    schema: { title, description },\n    required,\n    rawErrors,\n    onChange,\n    formData,\n  } = props;\n\n  const identityApi = useApi(identityApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const errorApi = useApi(errorApiRef);\n  const [groups, setGroups] = useState<\n    {\n      label: string;\n      ref: string;\n    }[]\n  >([]);\n\n  useAsync(async () => {\n    const { userEntityRef } = await identityApi.getBackstageIdentity();\n\n    if (!userEntityRef) {\n      errorApi.post(new NotFoundError('No user entity ref found'));\n      return;\n    }\n\n    const { items } = await catalogApi.getEntities({\n      filter: {\n        kind: 'Group',\n        ['relations.hasMember']: [userEntityRef],\n      },\n    });\n\n    const groupValues = items\n      .filter((e): e is Entity => Boolean(e))\n      .map(item => ({\n        label: item.metadata.title ?? item.metadata.name,\n        ref: stringifyEntityRef(item),\n      }));\n\n    setGroups(groupValues);\n  });\n\n  const updateChange = (\n    _: React.ChangeEvent<{}>,\n    value: { label: string; ref: string } | null,\n  ) => {\n    onChange(value?.ref ?? '');\n  };\n\n  const selectedEntity = groups?.find(e => e.ref === formData) || null;\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0}\n    >\n      <Autocomplete\n        id=\"OwnershipEntityRefPicker-dropdown\"\n        options={groups || []}\n        value={selectedEntity}\n        onChange={updateChange}\n        getOptionLabel={group => group.label}\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            helperText={description}\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n            variant=\"outlined\"\n            required={required}\n          />\n        )}\n      />\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MyGroupsPicker.esm.js","sources":["../../../../src/components/fields/MyGroupsPicker/MyGroupsPicker.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useEffect } from 'react';\nimport {\n  errorApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport TextField from '@material-ui/core/TextField';\nimport FormControl from '@material-ui/core/FormControl';\nimport { MyGroupsPickerProps, MyGroupsPickerSchema } from './schema';\nimport Autocomplete, {\n  createFilterOptions,\n} from '@material-ui/lab/Autocomplete';\nimport {\n  catalogApiRef,\n  EntityDisplayName,\n  entityPresentationApiRef,\n  EntityRefPresentationSnapshot,\n} from '@backstage/plugin-catalog-react';\nimport { NotFoundError } from '@backstage/errors';\nimport useAsync from 'react-use/esm/useAsync';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { VirtualizedListbox } from '../VirtualizedListbox';\n\nexport { MyGroupsPickerSchema };\n\nexport const MyGroupsPicker = (props: MyGroupsPickerProps) => {\n  const {\n    schema: { title, description },\n    required,\n    rawErrors,\n    onChange,\n    formData,\n  } = props;\n\n  const identityApi = useApi(identityApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const errorApi = useApi(errorApiRef);\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n\n  const { value: groups, loading } = useAsync(async () => {\n    const { userEntityRef } = await identityApi.getBackstageIdentity();\n\n    if (!userEntityRef) {\n      errorApi.post(new NotFoundError('No user entity ref found'));\n      return { catalogEntities: [], entityRefToPresentation: new Map() };\n    }\n\n    const { items } = await catalogApi.getEntities({\n      filter: {\n        kind: 'Group',\n        ['relations.hasMember']: [userEntityRef],\n      },\n    });\n\n    const entityRefToPresentation = new Map<\n      string,\n      EntityRefPresentationSnapshot\n    >(\n      await Promise.all(\n        items.map(async item => {\n          const presentation = await entityPresentationApi.forEntity(item)\n            .promise;\n          return [stringifyEntityRef(item), presentation] as [\n            string,\n            EntityRefPresentationSnapshot,\n          ];\n        }),\n      ),\n    );\n\n    return { catalogEntities: items, entityRefToPresentation };\n  });\n\n  const updateChange = (_: React.ChangeEvent<{}>, value: Entity | null) => {\n    onChange(value ? stringifyEntityRef(value) : '');\n  };\n\n  const selectedEntity =\n    groups?.catalogEntities.find(e => stringifyEntityRef(e) === formData) ||\n    null;\n\n  useEffect(() => {\n    if (groups?.catalogEntities.length === 1 && !selectedEntity) {\n      onChange(stringifyEntityRef(groups.catalogEntities[0]));\n    }\n  }, [groups, onChange, selectedEntity]);\n\n  return (\n    <FormControl\n      margin=\"normal\"\n      required={required}\n      error={rawErrors?.length > 0}\n    >\n      <Autocomplete\n        disabled={groups?.catalogEntities.length === 1}\n        id=\"OwnershipEntityRefPicker-dropdown\"\n        options={groups?.catalogEntities || []}\n        value={selectedEntity}\n        loading={loading}\n        onChange={updateChange}\n        getOptionLabel={option =>\n          groups?.entityRefToPresentation.get(stringifyEntityRef(option))\n            ?.primaryTitle!\n        }\n        autoSelect\n        renderInput={params => (\n          <TextField\n            {...params}\n            label={title}\n            margin=\"dense\"\n            helperText={description}\n            FormHelperTextProps={{ margin: 'dense', style: { marginLeft: 0 } }}\n            variant=\"outlined\"\n            required={required}\n            InputProps={params.InputProps}\n          />\n        )}\n        renderOption={option => <EntityDisplayName entityRef={option} />}\n        filterOptions={createFilterOptions<Entity>({\n          stringify: option =>\n            groups?.entityRefToPresentation.get(stringifyEntityRef(option))\n              ?.primaryTitle!,\n        })}\n        ListboxComponent={VirtualizedListbox}\n      />\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/fields/VirtualizedListbox.esm.js

@@ -5,23 +5,32 @@ const renderRow = (props) => {
   const { data, index, style } = props;
   return React.cloneElement(data[index], { style });
 };
+const OuterElementContext = React.createContext({});
+const OuterElementType = React.forwardRef(
+  (props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return /* @__PURE__ */ React.createElement("div", { ref, ...props, ...outerProps });
+  }
+);
 const VirtualizedListbox = React.forwardRef((props, ref) => {
-  const itemData = React.Children.toArray(props.children);
+  const { children, ...other } = props;
+  const itemData = React.Children.toArray(children);
   const itemCount = itemData.length;
   const itemSize = 36;
-  const itemsToShow = Math.min(10, itemCount);
-  const height = Math.max(itemSize, itemsToShow * itemSize - 0.5 * itemSize);
-  return /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
+  const itemsToShow = Math.min(10, itemCount) + 0.5;
+  const height = itemsToShow * itemSize;
+  return /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(OuterElementContext.Provider, { value: other }, /* @__PURE__ */ React.createElement(
     FixedSizeList,
     {
       height,
       itemData,
       itemCount,
       itemSize,
+      outerElementType: OuterElementType,
       width: "100%"
     },
     renderRow
-  ));
+  )));
 });
 
 export { VirtualizedListbox };

package/dist/components/fields/VirtualizedListbox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedListbox.esm.js","sources":["../../../src/components/fields/VirtualizedListbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { FixedSizeList, ListChildComponentProps } from 'react-window';\n\nconst renderRow = (props: ListChildComponentProps) => {\n  const { data, index, style } = props;\n  return React.cloneElement(data[index], { style });\n};\n\nexport const VirtualizedListbox = React.forwardRef<\n  HTMLDivElement,\n  { children?: React.ReactNode }\n>((props, ref) => {\n  const itemData = React.Children.toArray(props.children);\n  const itemCount = itemData.length;\n\n  const itemSize = 36;\n\n  const itemsToShow = Math.min(10, itemCount);\n  const height = Math.max(itemSize, itemsToShow * itemSize - 0.5 * itemSize);\n\n  return (\n    <div ref={ref}>\n      <FixedSizeList\n        height={height}\n        itemData={itemData}\n        itemCount={itemCount}\n        itemSize={itemSize}\n        width=\"100%\"\n      >\n        {renderRow}\n      </FixedSizeList>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;AAmBA,MAAM,SAAA,GAAY,CAAC,KAAmC,KAAA;AACpD,EAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC/B,EAAA,OAAO,MAAM,YAAa,CAAA,IAAA,CAAK,KAAK,CAAG,EAAA,EAAE,OAAO,CAAA,CAAA;AAClD,CAAA,CAAA;AAEO,MAAM,kBAAqB,GAAA,KAAA,CAAM,UAGtC,CAAA,CAAC,OAAO,GAAQ,KAAA;AAChB,EAAA,MAAM,QAAW,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,MAAM,QAAQ,CAAA,CAAA;AACtD,EAAA,MAAM,YAAY,QAAS,CAAA,MAAA,CAAA;AAE3B,EAAA,MAAM,QAAW,GAAA,EAAA,CAAA;AAEjB,EAAA,MAAM,WAAc,GAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,SAAS,CAAA,CAAA;AAC1C,EAAA,MAAM,SAAS,IAAK,CAAA,GAAA,CAAI,UAAU,WAAc,GAAA,QAAA,GAAW,MAAM,QAAQ,CAAA,CAAA;AAEzE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,GACH,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAM,EAAA,MAAA;AAAA,KAAA;AAAA,IAEL,SAAA;AAAA,GAEL,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"VirtualizedListbox.esm.js","sources":["../../../src/components/fields/VirtualizedListbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { FixedSizeList, ListChildComponentProps } from 'react-window';\n\ntype HTMLDivProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst renderRow = (props: ListChildComponentProps) => {\n  const { data, index, style } = props;\n  return React.cloneElement(data[index], { style });\n};\n\n// Context needed to keep Autocomplete working correctly : https://v4.mui.com/components/autocomplete/#Virtualize.tsx\nconst OuterElementContext = React.createContext<HTMLDivProps>({});\n\nconst OuterElementType = React.forwardRef<HTMLDivElement, HTMLDivProps>(\n  (props, ref) => {\n    const outerProps = React.useContext(OuterElementContext);\n    return <div ref={ref} {...props} {...outerProps} />;\n  },\n);\n\nexport const VirtualizedListbox = React.forwardRef<\n  HTMLDivElement,\n  HTMLDivProps\n>((props, ref) => {\n  const { children, ...other } = props;\n  const itemData = React.Children.toArray(children);\n  const itemCount = itemData.length;\n\n  const itemSize = 36;\n\n  const itemsToShow = Math.min(10, itemCount) + 0.5;\n  const height = itemsToShow * itemSize;\n\n  return (\n    <div ref={ref}>\n      <OuterElementContext.Provider value={other}>\n        <FixedSizeList\n          height={height}\n          itemData={itemData}\n          itemCount={itemCount}\n          itemSize={itemSize}\n          outerElementType={OuterElementType}\n          width=\"100%\"\n        >\n          {renderRow}\n        </FixedSizeList>\n      </OuterElementContext.Provider>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;AAqBA,MAAM,SAAA,GAAY,CAAC,KAAmC,KAAA;AACpD,EAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC/B,EAAA,OAAO,MAAM,YAAa,CAAA,IAAA,CAAK,KAAK,CAAG,EAAA,EAAE,OAAO,CAAA,CAAA;AAClD,CAAA,CAAA;AAGA,MAAM,mBAAsB,GAAA,KAAA,CAAM,aAA4B,CAAA,EAAE,CAAA,CAAA;AAEhE,MAAM,mBAAmB,KAAM,CAAA,UAAA;AAAA,EAC7B,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA,UAAA,GAAa,KAAM,CAAA,UAAA,CAAW,mBAAmB,CAAA,CAAA;AACvD,IAAA,2CAAQ,KAAI,EAAA,EAAA,GAAA,EAAW,GAAG,KAAA,EAAQ,GAAG,UAAY,EAAA,CAAA,CAAA;AAAA,GACnD;AACF,CAAA,CAAA;AAEO,MAAM,kBAAqB,GAAA,KAAA,CAAM,UAGtC,CAAA,CAAC,OAAO,GAAQ,KAAA;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,KAAA,EAAU,GAAA,KAAA,CAAA;AAC/B,EAAA,MAAM,QAAW,GAAA,KAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAChD,EAAA,MAAM,YAAY,QAAS,CAAA,MAAA,CAAA;AAE3B,EAAA,MAAM,QAAW,GAAA,EAAA,CAAA;AAEjB,EAAA,MAAM,WAAc,GAAA,IAAA,CAAK,GAAI,CAAA,EAAA,EAAI,SAAS,CAAI,GAAA,GAAA,CAAA;AAC9C,EAAA,MAAM,SAAS,WAAc,GAAA,QAAA,CAAA;AAE7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,GACH,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,oBAAoB,QAApB,EAAA,EAA6B,OAAO,KACnC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAkB,EAAA,gBAAA;AAAA,MAClB,KAAM,EAAA,MAAA;AAAA,KAAA;AAAA,IAEL,SAAA;AAAA,GAEL,CACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-scaffolder",
-  "version": "1.24.0-next.2",
+  "version": "1.24.0-next.3",
   "description": "The Backstage plugin that helps you create new things",
   "backstage": {
     "role": "frontend-plugin",
@@ -57,20 +57,20 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "^1.6.5",
-    "@backstage/catalog-model": "^1.5.0",
-    "@backstage/core-compat-api": "^0.2.8-next.2",
+    "@backstage/catalog-client": "^1.6.6-next.0",
+    "@backstage/catalog-model": "^1.6.0-next.0",
+    "@backstage/core-compat-api": "^0.2.8-next.3",
     "@backstage/core-components": "^0.14.10-next.0",
     "@backstage/core-plugin-api": "^1.9.3",
     "@backstage/errors": "^1.2.4",
-    "@backstage/frontend-plugin-api": "^0.7.0-next.2",
+    "@backstage/frontend-plugin-api": "^0.7.0-next.3",
     "@backstage/integration": "^1.14.0-next.0",
     "@backstage/integration-react": "^1.1.30-next.0",
-    "@backstage/plugin-catalog-common": "^1.0.26-next.1",
-    "@backstage/plugin-catalog-react": "^1.12.3-next.2",
+    "@backstage/plugin-catalog-common": "^1.0.26-next.2",
+    "@backstage/plugin-catalog-react": "^1.12.3-next.3",
     "@backstage/plugin-permission-react": "^0.4.25-next.1",
-    "@backstage/plugin-scaffolder-common": "^1.5.5-next.1",
-    "@backstage/plugin-scaffolder-react": "^1.11.0-next.2",
+    "@backstage/plugin-scaffolder-common": "^1.5.5-next.2",
+    "@backstage/plugin-scaffolder-react": "^1.11.0-next.3",
     "@backstage/types": "^1.1.1",
     "@codemirror/language": "^6.0.0",
     "@codemirror/legacy-modes": "^6.1.0",
@@ -104,10 +104,10 @@
     "zod-to-json-schema": "^3.20.4"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.27.0-next.3",
+    "@backstage/cli": "^0.27.0-next.4",
     "@backstage/core-app-api": "^1.14.2-next.0",
-    "@backstage/dev-utils": "^1.0.37-next.2",
-    "@backstage/plugin-catalog": "^1.22.0-next.2",
+    "@backstage/dev-utils": "^1.0.37-next.3",
+    "@backstage/plugin-catalog": "^1.22.0-next.3",
     "@backstage/plugin-permission-common": "^0.8.1-next.1",
     "@backstage/test-utils": "^1.5.10-next.2",
     "@testing-library/dom": "^10.0.0",