@backstage/plugin-scaffolder 0.11.13 → 0.11.14

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @backstage/plugin-scaffolder
 
+## 0.11.14
+
+### Patch Changes
+
+- 6845cce533: Can specify allowedOwners to the RepoUrlPicker picker in a template definition
+- cd450844f6: Moved React dependencies to `peerDependencies` and allow both React v16 and v17 to be used.
+- 2edcf7738f: Fix bug with setting owner in RepoUrlPicker causing validation failure
+- b291c3176e: Switch to using `LogViewer` component from `@backstage/core-components` to display scaffolder logs.
+- Updated dependencies
+  - @backstage/core-components@0.8.0
+  - @backstage/core-plugin-api@0.3.0
+  - @backstage/integration-react@0.1.15
+  - @backstage/plugin-catalog-react@0.6.5
+
 ## 0.11.13
 
 ### Patch Changes

package/dist/esm/{Router-8b2aa17e.esm.js → Router-0282e15a.esm.js}

@@ -1,10 +1,10 @@
-import React, { useState, useCallback, useEffect, memo, Suspense, useMemo } from 'react';
+import React, { useState, useCallback, useEffect, memo, useMemo } from 'react';
 import { useNavigate, Navigate, generatePath, useParams as useParams$1, useOutlet, Routes, Route } from 'react-router';
-import { Page, Header, Lifecycle, Content, ContentHeader, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, Link, Progress, ErrorPage } from '@backstage/core-components';
+import { Page, Header, Lifecycle, Content, ContentHeader, CreateButton, SupportButton, StructuredMetadataTable, InfoCard, Link, ErrorPage, LogViewer, Progress } from '@backstage/core-components';
 import { useRouteRef, useApi, errorApiRef, useApiHolder, useApp, useElementFilter } from '@backstage/core-plugin-api';
 import { EntityListProvider, EntitySearchBar, EntityKindPicker, UserListPicker, EntityTagPicker, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { makeStyles, Stepper, Step, StepLabel, Typography, StepContent, Button, Paper, Box, LinearProgress, Grid, StepButton, CircularProgress, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
-import { E as EntityPicker, a as EntityNamePicker, e as entityNamePickerValidation, R as RepoUrlPicker, r as repoPickerValidation, O as OwnerPicker, b as registerComponentRouteRef, T as TemplateTypePicker, c as TemplateList, s as scaffolderApiRef, d as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, f as FIELD_EXTENSION_KEY } from './index-385b3fc1.esm.js';
+import { E as EntityPicker, a as EntityNamePicker, e as entityNamePickerValidation, R as RepoUrlPicker, r as repoPickerValidation, O as OwnerPicker, b as registerComponentRouteRef, T as TemplateTypePicker, c as TemplateList, s as scaffolderApiRef, d as rootRouteRef, F as FIELD_EXTENSION_WRAPPER_KEY, f as FIELD_EXTENSION_KEY } from './index-306a8b5a.esm.js';
 import { useParams } from 'react-router-dom';
 import { useAsync, useInterval } from 'react-use';
 import { withTheme } from '@rjsf/core';
@@ -128,7 +128,7 @@ function extractUiSchema(schema, uiSchema) {
   if (!isObject$1(schema)) {
     return;
   }
-  const {properties, items, anyOf, oneOf, allOf, dependencies} = schema;
+  const { properties, items, anyOf, oneOf, allOf, dependencies } = schema;
   for (const propName in schema) {
     if (!schema.hasOwnProperty(propName)) {
       continue;
@@ -197,7 +197,7 @@ function transformSchemaToProps(inputSchema) {
   delete schema.title;
   const uiSchema = {};
   extractUiSchema(schema, uiSchema);
-  return {schema, uiSchema};
+  return { schema, uiSchema };
 }
 
 const Form = withTheme(Theme);
@@ -278,7 +278,7 @@ const MultistepJsonForm = ({
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Stepper, {
     activeStep,
     orientation: "vertical"
-  }, steps.map(({title, schema, ...formProps}, index) => {
+  }, steps.map(({ title, schema, ...formProps }, index) => {
     return /* @__PURE__ */ React.createElement(Step, {
       key: title
     }, /* @__PURE__ */ React.createElement(StepLabel, {
@@ -337,12 +337,12 @@ const MultistepJsonForm = ({
 
 const useTemplateParameterSchema = (templateName) => {
   const scaffolderApi = useApi(scaffolderApiRef);
-  const {value, loading, error} = useAsync(() => scaffolderApi.getTemplateParameterSchema({
+  const { value, loading, error } = useAsync(() => scaffolderApi.getTemplateParameterSchema({
     name: templateName,
     kind: "template",
     namespace: "default"
   }), [scaffolderApi, templateName]);
-  return {schema: value, loading, error};
+  return { schema: value, loading, error };
 };
 function isObject(obj) {
   return typeof obj === "object" && obj !== null && !Array.isArray(obj);
@@ -380,16 +380,16 @@ const TemplatePage = ({
   const apiHolder = useApiHolder();
   const errorApi = useApi(errorApiRef);
   const scaffolderApi = useApi(scaffolderApiRef);
-  const {templateName} = useParams();
+  const { templateName } = useParams();
   const navigate = useNavigate();
   const rootLink = useRouteRef(rootRouteRef);
-  const {schema, loading, error} = useTemplateParameterSchema(templateName);
+  const { schema, loading, error } = useTemplateParameterSchema(templateName);
   const [formState, setFormState] = useState({});
   const handleFormReset = () => setFormState({});
   const handleChange = useCallback((e) => setFormState(e.formData), [setFormState]);
   const handleCreate = async () => {
     const id = await scaffolderApi.scaffold(templateName, formState);
-    navigate(generatePath(`${rootLink()}/tasks/:taskId`, {taskId: id}));
+    navigate(generatePath(`${rootLink()}/tasks/:taskId`, { taskId: id }));
   };
   if (error) {
     errorApi.post(new Error(`Failed to load template, ${error}`));
@@ -403,8 +403,8 @@ const TemplatePage = ({
       to: rootLink()
     });
   }
-  const customFieldComponents = Object.fromEntries(customFieldExtensions.map(({name, component}) => [name, component]));
-  const customFieldValidators = Object.fromEntries(customFieldExtensions.map(({name, validation}) => [name, validation]));
+  const customFieldComponents = Object.fromEntries(customFieldExtensions.map(({ name, component }) => [name, component]));
+  const customFieldValidators = Object.fromEntries(customFieldExtensions.map(({ name, validation }) => [name, validation]));
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
@@ -418,7 +418,7 @@ const TemplatePage = ({
   }), schema && /* @__PURE__ */ React.createElement(InfoCard, {
     title: schema.title,
     noPadding: true,
-    titleTypographyProps: {component: "h2"}
+    titleTypographyProps: { component: "h2" }
   }, /* @__PURE__ */ React.createElement(MultistepJsonForm, {
     formData: formState,
     fields: customFieldComponents,
@@ -428,7 +428,7 @@ const TemplatePage = ({
     steps: schema.steps.map((step) => {
       return {
         ...step,
-        validate: createValidator(step.schema, customFieldValidators, {apiHolder})
+        validate: createValidator(step.schema, customFieldValidators, { apiHolder })
       };
     })
   }))));
@@ -439,7 +439,7 @@ function reducer(draft, action) {
   switch (action.type) {
     case "INIT": {
       draft.steps = action.data.spec.steps.reduce((current, next) => {
-        current[next.id] = {status: "open", id: next.id};
+        current[next.id] = { status: "open", id: next.id };
         return current;
       }, {});
       draft.stepLogs = action.data.spec.steps.reduce((current, next) => {
@@ -505,13 +505,13 @@ const useTaskEventStream = (taskId) => {
       if (didCancel) {
         return;
       }
-      dispatch({type: "INIT", data: task});
-      const observable = scaffolderApi.streamLogs({taskId});
+      dispatch({ type: "INIT", data: task });
+      const observable = scaffolderApi.streamLogs({ taskId });
       const collectedLogEvents = new Array();
       function emitLogs() {
         if (collectedLogEvents.length) {
           const logs = collectedLogEvents.splice(0, collectedLogEvents.length);
-          dispatch({type: "LOGS", data: logs});
+          dispatch({ type: "LOGS", data: logs });
         }
       }
       logPusher = setInterval(emitLogs, 500);
@@ -522,7 +522,7 @@ const useTaskEventStream = (taskId) => {
               return collectedLogEvents.push(event);
             case "completion":
               emitLogs();
-              dispatch({type: "COMPLETED", data: event});
+              dispatch({ type: "COMPLETED", data: event });
               return void 0;
             default:
               throw new Error(`Unhandled event type ${event.type} in observer`);
@@ -530,12 +530,12 @@ const useTaskEventStream = (taskId) => {
         },
         error: (error) => {
           emitLogs();
-          dispatch({type: "ERROR", data: error});
+          dispatch({ type: "ERROR", data: error });
         }
       });
     }, (error) => {
       if (!didCancel) {
-        dispatch({type: "ERROR", data: error});
+        dispatch({ type: "ERROR", data: error });
       }
     });
     return () => {
@@ -562,7 +562,7 @@ const useStyles$2 = makeStyles({
   }
 });
 const IconLink = (props) => {
-  const {href, text, Icon, ...linkProps} = props;
+  const { href, text, Icon, ...linkProps } = props;
   const classes = useStyles$2();
   return /* @__PURE__ */ React.createElement(Grid, {
     container: true,
@@ -581,9 +581,9 @@ const IconLink = (props) => {
   }, text || href)));
 };
 
-const TaskPageLinks = ({output}) => {
-  const {entityRef: entityRefOutput, remoteUrl} = output;
-  let {links = []} = output;
+const TaskPageLinks = ({ output }) => {
+  const { entityRef: entityRefOutput, remoteUrl } = output;
+  let { links = [] } = output;
   const app = useApp();
   const entityRoute = useRouteRef(entityRouteRef);
   const iconResolver = (key) => {
@@ -591,7 +591,7 @@ const TaskPageLinks = ({output}) => {
     return key ? (_a = app.getSystemIcon(key)) != null ? _a : LanguageIcon : LanguageIcon;
   };
   if (remoteUrl) {
-    links = [{url: remoteUrl, title: "Repo"}, ...links];
+    links = [{ url: remoteUrl, title: "Repo" }, ...links];
   }
   if (entityRefOutput) {
     links = [
@@ -606,14 +606,14 @@ const TaskPageLinks = ({output}) => {
   return /* @__PURE__ */ React.createElement(Box, {
     px: 3,
     pb: 3
-  }, links.filter(({url, entityRef}) => url || entityRef).map(({url, entityRef, title, icon}) => {
+  }, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
     if (entityRef) {
       const entityName = parseEntityName(entityRef);
       const target = entityRoute(entityName);
-      return {title, icon, url: target};
+      return { title, icon, url: target };
     }
-    return {title, icon, url};
-  }).map(({url, title, icon}, i) => /* @__PURE__ */ React.createElement(IconLink, {
+    return { title, icon, url };
+  }).map(({ url, title, icon }, i) => /* @__PURE__ */ React.createElement(IconLink, {
     key: `output-link-${i}`,
     href: url,
     text: title != null ? title : url,
@@ -622,7 +622,6 @@ const TaskPageLinks = ({output}) => {
   })));
 };
 
-const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 const humanizeDuration = require("humanize-duration");
 const useStyles$1 = makeStyles$1((theme) => createStyles({
   root: {
@@ -648,7 +647,7 @@ const useStyles$1 = makeStyles$1((theme) => createStyles({
     width: "100%"
   }
 }));
-const StepTimeTicker = ({step}) => {
+const StepTimeTicker = ({ step }) => {
   const [time, setTime] = useState("");
   useInterval(() => {
     if (!step.startedAt) {
@@ -658,7 +657,7 @@ const StepTimeTicker = ({step}) => {
     const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
     const startedAt = DateTime.fromISO(step.startedAt);
     const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
-    setTime(humanizeDuration(formatted, {round: true}));
+    setTime(humanizeDuration(formatted, { round: true }));
   }, 1e3);
   return /* @__PURE__ */ React.createElement(Typography$1, {
     variant: "caption"
@@ -680,7 +679,7 @@ const useStepIconStyles = makeStyles$1((theme) => createStyles({
 }));
 function TaskStepIconComponent(props) {
   const classes = useStepIconStyles();
-  const {active, completed, error} = props;
+  const { active, completed, error } = props;
   const getMiddle = () => {
     if (active) {
       return /* @__PURE__ */ React.createElement(CircularProgress, {
@@ -743,24 +742,11 @@ const TaskStatusStepper = memo(({
     })))));
   })));
 });
-const TaskLogger = memo(({log}) => {
-  return /* @__PURE__ */ React.createElement(Suspense, {
-    fallback: /* @__PURE__ */ React.createElement(Progress, null)
-  }, /* @__PURE__ */ React.createElement("div", {
-    style: {height: "80vh"}
-  }, /* @__PURE__ */ React.createElement(LazyLog, {
-    text: log,
-    extraLines: 1,
-    follow: true,
-    selectableLines: true,
-    enableSearch: true
-  })));
-});
-const hasLinks = ({entityRef, remoteUrl, links = []}) => !!(entityRef || remoteUrl || links.length > 0);
+const hasLinks = ({ entityRef, remoteUrl, links = [] }) => !!(entityRef || remoteUrl || links.length > 0);
 const TaskPage = () => {
   const [userSelectedStepId, setUserSelectedStepId] = useState(void 0);
   const [lastActiveStepId, setLastActiveStepId] = useState(void 0);
-  const {taskId} = useParams$1();
+  const { taskId } = useParams$1();
   const taskStream = useTaskEventStream(taskId);
   const completed = taskStream.completed;
   const steps = useMemo(() => {
@@ -794,7 +780,7 @@ const TaskPage = () => {
     return log.join("\n");
   }, [taskStream.stepLogs, currentStepId]);
   const taskNotFound = taskStream.completed === true && taskStream.loading === false && !taskStream.task;
-  const {output} = taskStream;
+  const { output } = taskStream;
   return /* @__PURE__ */ React.createElement(Page, {
     themeId: "home"
   }, /* @__PURE__ */ React.createElement(Header, {
@@ -822,9 +808,11 @@ const TaskPage = () => {
   }))), /* @__PURE__ */ React.createElement(Grid$1, {
     item: true,
     xs: 9
-  }, /* @__PURE__ */ React.createElement(TaskLogger, {
-    log: logAsString
-  }))))));
+  }, /* @__PURE__ */ React.createElement("div", {
+    style: { height: "80vh" }
+  }, /* @__PURE__ */ React.createElement(LogViewer, {
+    text: logAsString
+  })))))));
 };
 
 const useStyles = makeStyles((theme) => ({
@@ -851,7 +839,7 @@ const useStyles = makeStyles((theme) => ({
 const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
   const classes = useStyles();
-  const {loading, value, error} = useAsync(async () => {
+  const { loading, value, error } = useAsync(async () => {
     return api.listActions();
   });
   if (loading) {
@@ -935,7 +923,7 @@ const ActionsPage = () => {
   }), /* @__PURE__ */ React.createElement(Content, null, items));
 };
 
-const Router = ({TemplateCardComponent, groups}) => {
+const Router = ({ TemplateCardComponent, groups }) => {
   const outlet = useOutlet();
   const customFieldExtensions = useElementFilter(outlet, (elements) => elements.selectByComponentData({
     key: FIELD_EXTENSION_WRAPPER_KEY
@@ -944,7 +932,7 @@ const Router = ({TemplateCardComponent, groups}) => {
   }));
   const fieldExtensions = [
     ...customFieldExtensions,
-    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(({name}) => !customFieldExtensions.some((customFieldExtension) => customFieldExtension.name === name))
+    ...DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS.filter(({ name }) => !customFieldExtensions.some((customFieldExtension) => customFieldExtension.name === name))
   ];
   return /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
     path: "/",
@@ -967,4 +955,4 @@ const Router = ({TemplateCardComponent, groups}) => {
 };
 
 export { Router };
-//# sourceMappingURL=Router-8b2aa17e.esm.js.map
+//# sourceMappingURL=Router-0282e15a.esm.js.map